# 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

```ts
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

```text
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.