OpenSpec Change: enterprise-gaming-react-crafting

Change ID: enterprise-gaming-react-crafting
Package: @suaveplan/react-crafting
Category: gaming/react
Target path: gaming/react/react-crafting
Status: PROPOSED
Date: 2026-04-24
Reference spec: /mnt/s/web/suaveplan/enterprise/react-crafting.md

Summary

Deliver @suaveplan/react-crafting on the genesis branch from scratch at enterprise quality. The package is the headless React layer around @suaveplan/crafting. A CraftingUIManager wraps a CraftingStation and RecipeRegistry; useCrafting() provides state via useSyncExternalStore; components render the recipe browser (filtered list with ingredient requirements), the crafting queue (active jobs with progress bars), and the output result notification. Genesis adds Storybook stories, Vitest DOM tests, and 100% coverage.

Current-state audit (genesis)

Package does not exist on genesis yet — fresh build.

Available workspace deps on genesis

Package	Role
`@suaveplan/crafting` (`workspace:^`)	`CraftingStation`, `RecipeRegistry`
`@suaveplan/events` (`workspace:^`)	Craft event subscriptions
`react` (`catalog:react`)	React 18

Public API surface

function createCraftingUIManager(station: CraftingStation, registry: RecipeRegistry): CraftingUIManager
function useCrafting(): CraftingUIState

// Components
function RecipeBrowser(props: RecipeBrowserProps): JSX.Element
function RecipeCard(props: RecipeCardProps): JSX.Element
function CraftQueue(props: CraftQueueProps): JSX.Element
function CraftProgress(props: CraftProgressProps): JSX.Element
function CraftResult(props: CraftResultProps): JSX.Element

File layout

gaming/react/react-crafting/
  package.json
  tsconfig.json
  vitest.config.ts
  src/
    index.ts
    types/common.ts + md
    state/crafting-ui-manager.ts + md + test
    hooks/use-crafting.ts + md + test
    components/
      recipe-browser/ (tsx + md + test + stories + index)
      recipe-card/ (tsx + md + test + stories + index)
      craft-queue/ (tsx + md + test + stories + index)
      craft-progress/ (tsx + md + test + stories + index)
      craft-result/ (tsx + md + test + stories + index)

Impact

Downstream: game apps show crafting UI in station interaction panel. Prerequisites: @suaveplan/crafting, @suaveplan/events, react.

2.4 KiB Raw Permalink Blame History