@auto-engineer/component-implementor-react 1.98.0 → 1.100.0

package/inputs/model-b/spec-deltas.json

@@ -0,0 +1,1424 @@
+[
+  {
+    "componentId": "board-card",
+    "componentName": "BoardCard",
+    "isNew": true,
+    "atomicType": "molecule",
+    "composes": ["ui-components-card"],
+    "specDeltas": {
+      "structure": [
+        "Composes Card with CardHeader showing title, CardContent showing description, and CardFooter with edit button.",
+        "Uses semantic <article> for the root element."
+      ],
+      "rendering": ["Renders card data from props: title and description.", "In ready state, shows full card content."],
+      "interaction": [
+        "On drag start, calls onDragStart: (cardId: string) => void.",
+        "On drag end, calls onDragEnd: (cardId: string, newListId: string) => void.",
+        "Clicking edit button calls onEdit: (cardId: string) => void, which navigates to edit-card scene."
+      ],
+      "styling": [
+        "Root uses `w-full rounded-md border border-border bg-background p-4 shadow-sm hover:shadow-md transition-shadow` consistent with Card.",
+        "Header uses `text-lg font-semibold tracking-tight text-foreground` for title.",
+        "Content uses `text-sm text-muted-foreground mt-2` for description.",
+        "Footer uses `mt-4 flex justify-end` with edit button `text-sm text-primary hover:underline`.",
+        "Draggable state adds `cursor-grab active:cursor-grabbing` with hover `ring-1 ring-accent`.",
+        "Hover effect wrapped in `@media (hover: hover) and (pointer: fine) { hover:bg-accent/10 }` with CSS `transition: background-color 150ms ease`.",
+        "Touch target for edit button uses `min-h-11 min-w-11 touch-action: manipulation`."
+      ]
+    },
+    "props": [
+      {
+        "name": "card",
+        "type": "{ id: string; title: string; description: string; listId: string }",
+        "required": true,
+        "description": "Data for the card.",
+        "category": "data"
+      },
+      {
+        "name": "onEdit",
+        "type": "(cardId: string) => void",
+        "required": false,
+        "description": "Callback to edit the card.",
+        "category": "callback"
+      },
+      {
+        "name": "onDragStart",
+        "type": "(cardId: string) => void",
+        "required": false,
+        "description": "Callback on drag start.",
+        "category": "callback"
+      },
+      {
+        "name": "onDragEnd",
+        "type": "(cardId: string, newListId: string) => void",
+        "required": false,
+        "description": "Callback on drag end.",
+        "category": "callback"
+      },
+      {
+        "name": "draggable",
+        "type": "boolean",
+        "required": false,
+        "default": "true",
+        "description": "Enables drag-and-drop for the card.",
+        "category": "visual"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state with sample data.",
+        "args": {
+          "card": {
+            "id": "1",
+            "title": "Task",
+            "description": "Do something",
+            "listId": "list1"
+          },
+          "onEdit": "fn()",
+          "onDragStart": "fn()",
+          "onDragEnd": "fn()",
+          "draggable": true
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click edit button using userEvent.click(getByRole('button', { name: 'Edit' })). 2. Verify onEdit called with expect(fn).toHaveBeenCalledWith('1')."
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "card",
+      "fields": ["id", "title", "description", "listId"]
+    }
+  },
+  {
+    "componentId": "board-list",
+    "componentName": "BoardList",
+    "isNew": true,
+    "atomicType": "organism",
+    "composes": ["ui-components-card", "board-card"],
+    "specDeltas": {
+      "structure": [
+        "Composes Card with CardHeader showing list title, CardContent rendering array of BoardCard components vertically stacked, CardFooter with add card button.",
+        "Uses semantic <section> with aria-label='List {title}' for the root."
+      ],
+      "rendering": [
+        "Renders list of cards from props.cards array as vertical stack; empty state shows 'No cards' message when cards.length === 0.",
+        "In ready state, shows header, content with cards, and footer."
+      ],
+      "interaction": [
+        "Accepts dropped cards and calls onCardDrop: (listId: string, cardId: string) => void.",
+        "Clicking add card button calls onAddCard: (listId: string) => void, which navigates to edit-card for new card."
+      ],
+      "styling": [
+        "Root uses `w-72 rounded-lg border border-border bg-background p-4 shadow-sm flex flex-col space-y-4` consistent with Card.",
+        "Header uses `text-xl font-semibold tracking-tight text-foreground` for title.",
+        "Content uses `flex flex-col space-y-3 min-h-[200px]` for cards stack; empty state `text-sm text-muted-foreground text-center py-8`.",
+        "Footer uses `mt-auto` with add button `w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-md h-10`.",
+        "Drop target highlights with `ring-2 ring-accent` on drag over.",
+        "Hover on add button uses CSS `transition: background-color 150ms ease` wrapped in `@media (hover: hover) and (pointer: fine)`.",
+        "Touch target for add button uses `min-h-11 touch-action: manipulation`."
+      ]
+    },
+    "props": [
+      {
+        "name": "list",
+        "type": "{ id: string; title: string; cards: Array<{ id: string; title: string; description: string; listId: string }> }",
+        "required": true,
+        "description": "Data for the list and its cards.",
+        "category": "data"
+      },
+      {
+        "name": "onAddCard",
+        "type": "(listId: string) => void",
+        "required": false,
+        "description": "Callback to add a new card to the list.",
+        "category": "callback"
+      },
+      {
+        "name": "onCardDrop",
+        "type": "(listId: string, cardId: string) => void",
+        "required": false,
+        "description": "Callback when a card is dropped into the list.",
+        "category": "callback"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state with cards.",
+        "args": {
+          "list": {
+            "id": "1",
+            "title": "To Do",
+            "cards": [
+              {
+                "id": "c1",
+                "title": "Task 1",
+                "description": "",
+                "listId": "1"
+              }
+            ]
+          },
+          "onAddCard": "fn()",
+          "onCardDrop": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click add card button using userEvent.click(getByRole('button', { name: 'Add Card' })). 2. Verify onAddCard called with expect(fn).toHaveBeenCalledWith('1')."
+      },
+      {
+        "name": "Empty",
+        "description": "Empty state without cards.",
+        "args": {
+          "list": {
+            "id": "1",
+            "title": "To Do",
+            "cards": []
+          },
+          "onAddCard": "fn()",
+          "onCardDrop": "fn()"
+        },
+        "needsPlayFunction": false
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "list",
+      "fields": ["id", "title", "cards.id", "cards.title", "cards.description", "cards.listId"]
+    }
+  },
+  {
+    "componentId": "board-lists-container",
+    "componentName": "BoardListsContainer",
+    "isNew": true,
+    "atomicType": "organism",
+    "composes": ["board-list"],
+    "specDeltas": {
+      "structure": [
+        "Horizontal scrollable container rendering array of BoardList components side by side.",
+        "Uses semantic <main> with role='region' aria-label='Board lists'."
+      ],
+      "rendering": [
+        "In loading state, shows skeletons for each list (h-64 w-72 for each list placeholder).",
+        "In ready state, renders lists from props.lists array as horizontal row; empty state shows 'No lists' message when lists.length === 0.",
+        "In error state, hides lists and shows error banner with retry button."
+      ],
+      "interaction": [
+        "Supports drag-and-drop of cards between lists, using react-dnd or similar; calls onCardMoved: (cardId: string, fromListId: string, toListId: string) => void on successful drop.",
+        "Clicking retry in error state calls onRetry: () => void, transitioning to loading state."
+      ],
+      "styling": [
+        "Root uses `flex overflow-x-auto space-x-4 p-4` for horizontal scrollable layout.",
+        "Loading state skeletons use `h-64 w-72 rounded-lg bg-muted animate-pulse` for each list placeholder.",
+        "Error state banner uses `p-4 border border-destructive rounded-md bg-destructive/10 text-destructive text-center` with retry button `mt-2 bg-destructive text-destructive-foreground hover:bg-destructive/90`.",
+        "Empty state uses `text-lg text-muted-foreground text-center py-8` with `w-full`.",
+        "Drag over list adds `bg-accent/20` with CSS `transition: background-color 150ms ease`.",
+        "Respects prefers-reduced-motion by setting `transition: none` for background changes."
+      ]
+    },
+    "props": [
+      {
+        "name": "lists",
+        "type": "Array<{ id: string; title: string; cards: Array<{ id: string; title: string; description: string; listId: string }> }>",
+        "required": true,
+        "description": "Array of lists with their cards.",
+        "category": "data"
+      },
+      {
+        "name": "isLoading",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Triggers loading state with skeletons.",
+        "category": "state"
+      },
+      {
+        "name": "error",
+        "type": "string | null",
+        "required": false,
+        "default": "null",
+        "description": "Error message for error state.",
+        "category": "state"
+      },
+      {
+        "name": "onCardMoved",
+        "type": "(cardId: string, fromListId: string, toListId: string) => void",
+        "required": false,
+        "description": "Callback when a card is moved between lists.",
+        "category": "callback"
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "required": false,
+        "description": "Callback for retry in error state.",
+        "category": "callback"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state with lists and cards.",
+        "args": {
+          "lists": [
+            {
+              "id": "1",
+              "title": "To Do",
+              "cards": [
+                {
+                  "id": "c1",
+                  "title": "Task",
+                  "description": "",
+                  "listId": "1"
+                }
+              ]
+            }
+          ],
+          "onCardMoved": "fn()",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Loading",
+        "description": "Loading state with skeletons.",
+        "args": {
+          "isLoading": true,
+          "onCardMoved": "fn()",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Error state with banner.",
+        "args": {
+          "error": "Failed to load board",
+          "onCardMoved": "fn()",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click retry button using userEvent.click(getByRole('button', { name: 'Retry' })). 2. Verify onRetry called with expect(fn).toHaveBeenCalled()."
+      },
+      {
+        "name": "Empty",
+        "description": "Empty state without lists.",
+        "args": {
+          "lists": [],
+          "onCardMoved": "fn()",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": false
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "lists",
+      "fields": ["id", "title", "cards.id", "cards.title", "cards.description", "cards.listId"]
+    }
+  },
+  {
+    "componentId": "ui-components-input",
+    "componentName": "Input",
+    "isNew": false,
+    "specDeltas": {
+      "structure": ["Renders as a single input element with associated label via htmlFor for accessibility."],
+      "rendering": [
+        "In editing-invalid state, shows inline error message below the input if validation fails, with aria-invalid=true and aria-describedby pointing to the error message element."
+      ],
+      "interaction": [
+        "On change, calls onChange: (event: React.ChangeEvent<HTMLInputElement>) => void and validates input; if invalid, sets internal error state and shows inline feedback.",
+        "On blur, triggers validation and shows inline error if invalid."
+      ],
+      "styling": [
+        "Input uses `h-10 px-3 py-2 rounded-md border border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50` for base styling.",
+        "Error state applies `border-destructive focus-visible:ring-destructive` to the input when aria-invalid=true.",
+        "Inline error message uses `text-sm text-destructive mt-1` positioned below the input.",
+        "Respects prefers-reduced-motion by adding `motion-reduce:transition-none` to focus-visible transitions.",
+        "Uses `text-base` for font-size to prevent iOS auto-zoom on focus.",
+        "Hover effect wrapped in `@media (hover: hover) and (pointer: fine) { hover:border-input/80 }`.",
+        "Touch target expanded with `min-h-11` including padding."
+      ]
+    },
+    "props": [
+      {
+        "name": "value",
+        "type": "string",
+        "required": false,
+        "description": "The current value of the input.",
+        "category": "state"
+      },
+      {
+        "name": "onChange",
+        "type": "(event: React.ChangeEvent<HTMLInputElement>) => void",
+        "required": false,
+        "description": "Callback fired on input change.",
+        "category": "callback"
+      },
+      {
+        "name": "placeholder",
+        "type": "string",
+        "required": false,
+        "description": "Placeholder text shown when input is empty.",
+        "category": "config"
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Disables the input if true.",
+        "category": "state"
+      },
+      {
+        "name": "error",
+        "type": "string | null",
+        "required": false,
+        "default": "null",
+        "description": "Error message to display if validation fails.",
+        "category": "state"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state with placeholder.",
+        "args": {
+          "placeholder": "Enter title",
+          "onChange": "fn()"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Invalid state with error message.",
+        "args": {
+          "placeholder": "Enter title",
+          "error": "Title is required",
+          "onChange": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Type 'a' in the input using userEvent.type(getByRole('textbox'), 'a'). 2. Blur the input using userEvent.tab(). 3. Verify error message appears with expect(getByText('Title is required')).toBeVisible()."
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "value",
+      "fields": ["value"]
+    }
+  },
+  {
+    "componentId": "ui-components-textarea",
+    "componentName": "Textarea",
+    "isNew": false,
+    "specDeltas": {
+      "structure": ["Renders as a single textarea element with associated label via htmlFor for accessibility."],
+      "rendering": [
+        "In editing-invalid state, shows inline error message below the textarea if validation fails, with aria-invalid=true and aria-describedby pointing to the error message element."
+      ],
+      "interaction": [
+        "On change, calls onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void and validates input; if invalid, sets internal error state and shows inline feedback.",
+        "On blur, triggers validation and shows inline error if invalid.",
+        "Supports Cmd+Enter (Mac) or Ctrl+Enter (Windows) to submit the form."
+      ],
+      "styling": [
+        "Textarea uses `min-h-[80px] px-3 py-2 rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y` for base styling.",
+        "Error state applies `border-destructive focus-visible:ring-destructive` to the textarea when aria-invalid=true.",
+        "Inline error message uses `text-sm text-destructive mt-1` positioned below the textarea.",
+        "Respects prefers-reduced-motion by adding `motion-reduce:transition-none` to focus-visible transitions.",
+        "Uses `text-base` for font-size to prevent iOS auto-zoom on focus.",
+        "Hover effect wrapped in `@media (hover: hover) and (pointer: fine) { hover:border-input/80 }`.",
+        "Touch target expanded with `min-h-11` for each line including padding."
+      ]
+    },
+    "props": [
+      {
+        "name": "value",
+        "type": "string",
+        "required": false,
+        "description": "The current value of the textarea.",
+        "category": "state"
+      },
+      {
+        "name": "onChange",
+        "type": "(event: React.ChangeEvent<HTMLTextAreaElement>) => void",
+        "required": false,
+        "description": "Callback fired on textarea change.",
+        "category": "callback"
+      },
+      {
+        "name": "placeholder",
+        "type": "string",
+        "required": false,
+        "description": "Placeholder text shown when textarea is empty.",
+        "category": "config"
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Disables the textarea if true.",
+        "category": "state"
+      },
+      {
+        "name": "error",
+        "type": "string | null",
+        "required": false,
+        "default": "null",
+        "description": "Error message to display if validation fails.",
+        "category": "state"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state with placeholder.",
+        "args": {
+          "placeholder": "Enter description",
+          "onChange": "fn()"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Invalid state with error message.",
+        "args": {
+          "placeholder": "Enter description",
+          "error": "Description is required",
+          "onChange": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Type 'a' in the textarea using userEvent.type(getByRole('textbox'), 'a'). 2. Blur the textarea using userEvent.tab(). 3. Verify error message appears with expect(getByText('Description is required')).toBeVisible()."
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "value",
+      "fields": ["value"]
+    }
+  },
+  {
+    "componentId": "ui-components-button",
+    "componentName": "Button",
+    "isNew": false,
+    "specDeltas": {
+      "structure": ["Renders as a button element with semantic role='button'."],
+      "rendering": ["In submitting state, disables the button and shows loading spinner inside."],
+      "interaction": ["On click, calls onClick: () => void if not disabled."],
+      "styling": [
+        "Button uses `inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50` for base styling.",
+        "Default variant adds `bg-primary text-primary-foreground hover:bg-primary/90`.",
+        "Loading state shows spinner with `animate-spin h-5 w-5 mr-2 text-primary-foreground` inside the button.",
+        "Hover effect uses CSS `transition: background-color 150ms ease` wrapped in `@media (hover: hover) and (pointer: fine)`.",
+        "Active state uses CSS `active:scale-[0.97]` with `transition: transform 100ms ease-out`.",
+        "Respects prefers-reduced-motion by setting `transition: none` for scale and color changes.",
+        "Touch target uses `min-h-11 min-w-11 touch-action: manipulation`."
+      ]
+    },
+    "props": [
+      {
+        "name": "onClick",
+        "type": "() => void",
+        "required": false,
+        "description": "Callback fired on button click.",
+        "category": "callback"
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Disables the button if true.",
+        "category": "state"
+      },
+      {
+        "name": "isLoading",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Shows loading spinner and disables button if true.",
+        "category": "state"
+      },
+      {
+        "name": "children",
+        "type": "ReactNode",
+        "required": false,
+        "description": "Content inside the button.",
+        "category": "slot"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state.",
+        "args": {
+          "children": "Button",
+          "onClick": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click the button using userEvent.click(getByRole('button', { name: 'Button' })). 2. Verify the action is called with expect(fn).toHaveBeenCalled()."
+      },
+      {
+        "name": "Loading",
+        "description": "Submitting state with spinner.",
+        "args": {
+          "children": "Button",
+          "isLoading": true,
+          "onClick": "fn()"
+        },
+        "needsPlayFunction": false
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "children",
+      "fields": ["children"]
+    }
+  },
+  {
+    "componentId": "ui-components-dialog",
+    "componentName": "Dialog",
+    "isNew": false,
+    "specDeltas": {
+      "structure": [
+        "Root Dialog wraps DialogTrigger and DialogContent; DialogContent contains DialogHeader with DialogTitle, form content as children, DialogFooter with action buttons, and DialogClose.",
+        "Uses semantic <header>, <footer>, and <main> inside DialogContent for landmarks."
+      ],
+      "rendering": [
+        "In loading state, shows skeleton in form region and hides actions region.",
+        "In ready state, shows header, form, actions, and feedback regions.",
+        "In editing-invalid state, shows header, form, actions, and feedback regions with inline error messages.",
+        "In submitting state, disables actions and shows progress indicator in feedback region; hides form region.",
+        "In error state, hides form and actions regions; shows error banner in feedback region with retry button."
+      ],
+      "interaction": [
+        "On open, moves focus to the first focusable element inside DialogContent (first input field); sets inert on background content.",
+        "On close (via DialogClose or Escape), returns focus to the trigger element and removes inert from background.",
+        "Calls onOpenChange: (open: boolean) => void on open/close.",
+        "Escape key closes the dialog.",
+        "Clicking outside closes the dialog."
+      ],
+      "styling": [
+        "DialogContent uses `sm:max-w-[425px] bg-background p-6 space-y-4 rounded-lg shadow-lg` for base layout.",
+        "Overlay uses `fixed inset-0 z-[300] bg-black/80` for backdrop.",
+        "Content entrance uses useTransition(isOpen, { from: { opacity: 0, scale: 0.95 }, enter: { opacity: 1, scale: 1 }, leave: { opacity: 0, scale: 0.95 }, config: { tension: 300, friction: 22 } }); both overlay and content use the same config; respects useReducedMotion() by setting immediate: true when reduced.",
+        "DialogHeader uses `space-y-1.5 text-center sm:text-left` with DialogTitle `text-lg font-semibold leading-none tracking-tight` and DialogDescription `text-sm text-muted-foreground`.",
+        "DialogFooter uses `flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`.",
+        "DialogClose uses `absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground`.",
+        "Loading state skeletons use `h-10 w-full bg-muted animate-pulse` for inputs.",
+        "Error state Alert uses `p-4 border border-destructive rounded-md bg-destructive/10 text-destructive`."
+      ]
+    },
+    "props": [
+      {
+        "name": "open",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Controls the open state of the dialog.",
+        "category": "state"
+      },
+      {
+        "name": "onOpenChange",
+        "type": "(open: boolean) => void",
+        "required": false,
+        "description": "Callback fired when open state changes.",
+        "category": "callback"
+      },
+      {
+        "name": "children",
+        "type": "ReactNode",
+        "required": true,
+        "description": "Content inside the dialog.",
+        "category": "slot"
+      },
+      {
+        "name": "isLoading",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Triggers loading state with skeletons.",
+        "category": "state"
+      },
+      {
+        "name": "error",
+        "type": "string | null",
+        "required": false,
+        "default": "null",
+        "description": "Error message for error state.",
+        "category": "state"
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "required": false,
+        "description": "Callback for retry button in error state.",
+        "category": "callback"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state with form content.",
+        "args": {
+          "open": true,
+          "onOpenChange": "fn()",
+          "children": "{\"header\": \"Title\", \"form\": \"Form fields\"}"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Verify dialog is open with expect(getByRole('dialog')).toBeVisible(). 2. Click close button using userEvent.click(getByRole('button', { name: 'Close' })). 3. Await waitFor(() => expect(getByRole('dialog')).not.toBeVisible())."
+      },
+      {
+        "name": "Loading",
+        "description": "Loading state with skeletons.",
+        "args": {
+          "open": true,
+          "isLoading": true,
+          "onOpenChange": "fn()",
+          "children": "{\"header\": \"Title\", \"form\": \"Form fields\"}"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Error state with banner and retry.",
+        "args": {
+          "open": true,
+          "error": "Failed to load",
+          "onOpenChange": "fn()",
+          "onRetry": "fn()",
+          "children": "{\"header\": \"Title\", \"form\": \"Form fields\"}"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Verify error banner with expect(getByRole('alert')).toHaveTextContent('Failed to load'). 2. Click retry button using userEvent.click(getByRole('button', { name: 'Retry' })). 3. Verify onRetry called with expect(fn).toHaveBeenCalled()."
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "children",
+      "fields": ["children"]
+    }
+  },
+  {
+    "componentId": "ui-components-alert",
+    "componentName": "Alert",
+    "isNew": false,
+    "specDeltas": {
+      "structure": [
+        "Renders Alert with AlertTitle and AlertDescription; includes a retry button in destructive variant for error states."
+      ],
+      "rendering": [
+        "In error state, renders destructive variant with error message as description and 'Retry' button that calls onRetry."
+      ],
+      "interaction": ["Clicking retry button calls onRetry: () => void."],
+      "styling": [
+        "Alert uses `relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground` for base layout.",
+        "Destructive variant adds `border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive`.",
+        "AlertTitle uses `mb-1 font-medium leading-none tracking-tight`.",
+        "AlertDescription uses `text-sm [&_p]:leading-relaxed`.",
+        "Retry button in destructive variant uses `mt-2 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90`."
+      ]
+    },
+    "props": [
+      {
+        "name": "variant",
+        "type": "'default' | 'destructive'",
+        "required": false,
+        "default": "'default'",
+        "description": "Visual variant of the alert.",
+        "category": "config"
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": "Title of the alert.",
+        "category": "data"
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "required": false,
+        "description": "Description or message of the alert.",
+        "category": "data"
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "required": false,
+        "description": "Callback for retry action in error alerts.",
+        "category": "callback"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Default variant with title and description.",
+        "args": {
+          "title": "Info",
+          "description": "This is an info alert."
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Destructive variant with retry button.",
+        "args": {
+          "variant": "destructive",
+          "title": "Error",
+          "description": "Failed to load",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click retry button using userEvent.click(getByRole('button', { name: 'Retry' })). 2. Verify onRetry called with expect(fn).toHaveBeenCalled()."
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "description",
+      "fields": ["title", "description"]
+    }
+  },
+  {
+    "componentId": "ui-components-card",
+    "componentName": "Card",
+    "isNew": false,
+    "specDeltas": {
+      "structure": [
+        "Root Card wraps CardHeader with CardTitle and CardDescription, CardContent for body, CardFooter for actions."
+      ],
+      "rendering": ["Always renders provided slots; no conditional logic."],
+      "interaction": [],
+      "styling": [
+        "Card uses `rounded-lg border bg-card text-card-foreground shadow-sm` for base styling.",
+        "CardHeader uses `flex flex-col space-y-1.5 p-6` with CardTitle `text-2xl font-semibold leading-none tracking-tight` and CardDescription `text-sm text-muted-foreground`.",
+        "CardContent uses `p-6 pt-0` for body content.",
+        "CardFooter uses `flex items-center p-6 pt-0` for actions."
+      ]
+    },
+    "props": [
+      {
+        "name": "children",
+        "type": "ReactNode",
+        "required": false,
+        "description": "Content inside the card.",
+        "category": "slot"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Basic card with title and content.",
+        "args": {
+          "children": "{\"title\": \"Card Title\", \"content\": \"Card content\"}"
+        },
+        "needsPlayFunction": false
+      }
+    ],
+    "dataContract": {
+      "source": "props",
+      "propsFieldName": "children",
+      "fields": ["children"]
+    }
+  },
+  {
+    "componentId": "board-page",
+    "componentName": "BoardPage",
+    "isNew": true,
+    "atomicType": "page",
+    "composes": ["board-lists-container", "ui-components-button", "ui-components-skeleton"],
+    "specDeltas": {
+      "structure": [
+        "Page-level component with <main> containing board-header region (board title and actions), lists-container region (BoardListsContainer), add-list region (Button to navigate to add-list), and feedback region (Alert for errors).",
+        "Registers route '/boards/:boardId' for dedicated routing."
+      ],
+      "rendering": [
+        "In loading state, shows skeleton in lists-container region (h-8 w-48 for header, multiple w-72 h-full for lists); hides add-list region.",
+        "In ready state, shows all regions: board-header, lists-container with lists and cards, add-list button, and empty feedback if no lists.",
+        "In error state, hides lists-container and add-list regions; shows error Alert in feedback region with 'Retry' button.",
+        "Renders data from dataContract: board title in header, lists and cards in lists-container."
+      ],
+      "interaction": [
+        "On mount, fetches board data via GraphQL query.",
+        "Clicking add-list button navigates to add-list scene with boardId parameter.",
+        "Clicking retry in error state refetches data, transitioning to loading state.",
+        "Handles unsaved changes guard from crossCuttingRules: on navigation away from dirty nested forms, shows confirmation dialog."
+      ],
+      "styling": [
+        "Main uses `flex flex-col h-full` with header `sticky top-0 z-[200] bg-background p-4 border-b shadow-sm flex items-center justify-between` including title `text-2xl font-bold tracking-tight text-foreground` and actions.",
+        "Lists container uses `flex-1 overflow-auto p-4` with horizontal flex `space-x-4`.",
+        "Add list button uses `fixed bottom-4 right-4 bg-primary text-primary-foreground rounded-full h-12 w-12 flex items-center justify-center shadow-lg hover:bg-primary/90` for floating action.",
+        "Feedback area uses `absolute top-4 right-4 z-[700]` for toasts or banners.",
+        "Loading skeletons in header use `h-8 w-48 bg-muted animate-pulse`, in lists use multiple `h-full w-72 bg-muted animate-pulse`.",
+        "Error banner uses `m-4 p-4 border border-destructive rounded-md bg-destructive/10 text-destructive` with retry `bg-destructive text-destructive-foreground`.",
+        "Hover on add button wrapped in `@media (hover: hover) and (pointer: fine) { hover:scale-105 }` with CSS `transition: transform 150ms ease`.",
+        "Touch target for add button uses `min-h-11 min-w-11 touch-action: manipulation`."
+      ]
+    },
+    "props": [
+      {
+        "name": "boardId",
+        "type": "string",
+        "required": true,
+        "description": "ID of the board to display.",
+        "category": "config"
+      },
+      {
+        "name": "isLoading",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Triggers loading state.",
+        "category": "state"
+      },
+      {
+        "name": "error",
+        "type": "string | null",
+        "required": false,
+        "default": "null",
+        "description": "Error message for error state.",
+        "category": "state"
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "required": false,
+        "description": "Callback to retry loading.",
+        "category": "callback"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state with sample board data.",
+        "args": {
+          "boardId": "1",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click add list button using userEvent.click(getByRole('button', { name: 'Add List' })). 2. Verify navigation or callback."
+      },
+      {
+        "name": "Loading",
+        "description": "Loading state with skeletons.",
+        "args": {
+          "boardId": "1",
+          "isLoading": true,
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Error state with retry.",
+        "args": {
+          "boardId": "1",
+          "error": "Failed to load board",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click retry button using userEvent.click(getByRole('button', { name: 'Retry' })). 2. Verify onRetry called with expect(fn).toHaveBeenCalled()."
+      },
+      {
+        "name": "Empty",
+        "description": "Ready state with no lists.",
+        "args": {
+          "boardId": "1",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": false
+      }
+    ],
+    "dataContract": {
+      "source": "graphql-query",
+      "operationName": "GetBoard",
+      "fields": [
+        "id",
+        "title",
+        "lists.id",
+        "lists.title",
+        "lists.cards.id",
+        "lists.cards.title",
+        "lists.cards.description"
+      ]
+    }
+  },
+  {
+    "componentId": "create-board-modal",
+    "componentName": "CreateBoardModal",
+    "isNew": true,
+    "atomicType": "page",
+    "composes": [
+      "ui-components-dialog",
+      "ui-components-input",
+      "ui-components-textarea",
+      "ui-components-button",
+      "ui-components-alert"
+    ],
+    "specDeltas": {
+      "structure": [
+        "Composes Dialog with header region (title 'Create New Board'), form region (Input for title, Textarea for description), actions region (Cancel and Create Board buttons), feedback region (Alert for errors).",
+        "Nested route under board-view."
+      ],
+      "rendering": [
+        "In loading state, shows skeleton in form region (h-10 for title input, h-20 for description textarea); hides actions region.",
+        "In ready state, shows all regions with empty form fields.",
+        "In editing-invalid state, shows inline errors for required fields (e.g., 'Title is required' below input).",
+        "In submitting state, disables buttons and shows progress spinner in feedback region.",
+        "In error state, shows Alert with 'Failed to create board' and retry button."
+      ],
+      "interaction": [
+        "Clicking Cancel calls onCancel: () => void, transitioning to loading and navigating back.",
+        "Clicking Create Board validates form; if valid, calls onSubmit: (data: { title: string; description: string }) => void, transitioning to submitting.",
+        "On unsaved changes (dirty form), shows confirmation dialog before closing.",
+        "Retry button in error state calls onRetry: () => void, transitioning to ready."
+      ],
+      "styling": [
+        "DialogContent uses `sm:max-w-md bg-background p-6 space-y-6 rounded-lg shadow-lg` for layout.",
+        "Header uses `text-2xl font-semibold tracking-tight text-foreground text-center`.",
+        "Form uses `space-y-4` with Input `h-10 w-full` and Textarea `min-h-[100px] w-full`.",
+        "Actions uses `flex justify-end space-x-2` with Cancel `variant=\"outline\"` and Create `variant=\"default\"`.",
+        "Feedback uses `text-sm text-destructive` for inline errors; submitting spinner `animate-spin h-5 w-5 text-primary`.",
+        "Error Alert uses `p-4 border border-destructive rounded-md bg-destructive/10 text-destructive` with retry button.",
+        "Entrance animation uses useTransition(open, { from: { opacity: 0, scale: 0.95 }, enter: { opacity: 1, scale: 1 }, leave: { opacity: 0, scale: 0.95 }, config: { tension: 300, friction: 22 } }); respects useReducedMotion() with immediate: true.",
+        "Loading skeletons use `h-10 w-full bg-muted animate-pulse` for input, `h-20 w-full bg-muted animate-pulse` for textarea."
+      ]
+    },
+    "props": [
+      {
+        "name": "open",
+        "type": "boolean",
+        "required": true,
+        "description": "Controls modal open state.",
+        "category": "state"
+      },
+      {
+        "name": "onCancel",
+        "type": "() => void",
+        "required": true,
+        "description": "Callback to cancel and close.",
+        "category": "callback"
+      },
+      {
+        "name": "onSubmit",
+        "type": "(data: { title: string; description: string }) => void",
+        "required": true,
+        "description": "Callback to submit form data.",
+        "category": "callback"
+      },
+      {
+        "name": "isLoading",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Triggers loading state.",
+        "category": "state"
+      },
+      {
+        "name": "error",
+        "type": "string | null",
+        "required": false,
+        "default": "null",
+        "description": "Error message for error state.",
+        "category": "state"
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "required": false,
+        "description": "Callback for retry.",
+        "category": "callback"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state.",
+        "args": {
+          "open": true,
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Type in title input using userEvent.type(getByLabelText('Title'), 'New Board'). 2. Click Create Board using userEvent.click(getByRole('button', { name: 'Create Board' })). 3. Verify onSubmit called with expect(fn).toHaveBeenCalledWith({ title: 'New Board', description: '' })."
+      },
+      {
+        "name": "Loading",
+        "description": "Loading state.",
+        "args": {
+          "open": true,
+          "isLoading": true,
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Error state.",
+        "args": {
+          "open": true,
+          "error": "Failed to create board",
+          "onCancel": "fn()",
+          "onSubmit": "fn()",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click retry using userEvent.click(getByRole('button', { name: 'Retry' })). 2. Verify onRetry called."
+      },
+      {
+        "name": "EditingInvalid",
+        "description": "Invalid form state.",
+        "args": {
+          "open": true,
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click Create Board without input using userEvent.click(getByRole('button', { name: 'Create Board' })). 2. Verify inline error with expect(getByText('Title is required')).toBeVisible()."
+      },
+      {
+        "name": "Submitting",
+        "description": "Submitting state.",
+        "args": {
+          "open": true,
+          "isLoading": true,
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": false
+      }
+    ],
+    "dataContract": {
+      "source": "local-state",
+      "fields": ["title", "description"]
+    }
+  },
+  {
+    "componentId": "add-list-modal",
+    "componentName": "AddListModal",
+    "isNew": true,
+    "atomicType": "page",
+    "composes": ["ui-components-dialog", "ui-components-input", "ui-components-button", "ui-components-alert"],
+    "specDeltas": {
+      "structure": [
+        "Composes Dialog with header region (title 'Add List'), form region (Input for title), actions region (Cancel and Add List buttons), feedback region (Alert for errors).",
+        "Nested route under board-view with boardId parameter."
+      ],
+      "rendering": [
+        "In loading state, shows skeleton in form region (h-10 for title input); hides actions.",
+        "In ready state, shows all regions with empty form.",
+        "In editing-invalid state, shows inline error 'List title is required' below input.",
+        "In submitting state, disables buttons and shows progress spinner in feedback.",
+        "In error state, shows Alert with 'Failed to add list' and retry button."
+      ],
+      "interaction": [
+        "Clicking Cancel calls onCancel: () => void, transitioning to loading and navigating back.",
+        "Clicking Add List validates form; if valid, calls onSubmit: (data: { title: string }) => void, transitioning to submitting.",
+        "On unsaved changes, shows confirmation before closing.",
+        "Retry in error calls onRetry: () => void."
+      ],
+      "styling": [
+        "DialogContent uses `sm:max-w-sm bg-background p-6 space-y-6 rounded-lg shadow-lg` for layout.",
+        "Header uses `text-2xl font-semibold tracking-tight text-foreground text-center`.",
+        "Form uses `space-y-4` with Input `h-10 w-full`.",
+        "Actions uses `flex justify-end space-x-2` with Cancel `variant=\"outline\"` and Add `variant=\"default\"`.",
+        "Feedback uses `text-sm text-destructive` for inline errors; submitting spinner `animate-spin h-5 w-5 text-primary`.",
+        "Error Alert uses `p-4 border border-destructive rounded-md bg-destructive/10 text-destructive` with retry.",
+        "Entrance animation uses useTransition(open, { from: { opacity: 0, scale: 0.95 }, enter: { opacity: 1, scale: 1 }, leave: { opacity: 0, scale: 0.95 }, config: { tension: 300, friction: 22 } }); respects useReducedMotion() with immediate: true.",
+        "Loading skeleton uses `h-10 w-full bg-muted animate-pulse` for input."
+      ]
+    },
+    "props": [
+      {
+        "name": "open",
+        "type": "boolean",
+        "required": true,
+        "description": "Controls modal open state.",
+        "category": "state"
+      },
+      {
+        "name": "boardId",
+        "type": "string",
+        "required": true,
+        "description": "ID of the board to add list to.",
+        "category": "config"
+      },
+      {
+        "name": "onCancel",
+        "type": "() => void",
+        "required": true,
+        "description": "Callback to cancel.",
+        "category": "callback"
+      },
+      {
+        "name": "onSubmit",
+        "type": "(data: { title: string; boardId: string }) => void",
+        "required": true,
+        "description": "Callback to submit list data.",
+        "category": "callback"
+      },
+      {
+        "name": "isLoading",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Triggers loading state.",
+        "category": "state"
+      },
+      {
+        "name": "error",
+        "type": "string | null",
+        "required": false,
+        "default": "null",
+        "description": "Error message.",
+        "category": "state"
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "required": false,
+        "description": "Callback for retry.",
+        "category": "callback"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Type in title using userEvent.type(getByLabelText('Title'), 'New List'). 2. Click Add List using userEvent.click(getByRole('button', { name: 'Add List' })). 3. Verify onSubmit called with { title: 'New List', boardId: '1' }."
+      },
+      {
+        "name": "Loading",
+        "description": "Loading state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "isLoading": true,
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Error state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "error": "Failed to add list",
+          "onCancel": "fn()",
+          "onSubmit": "fn()",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click retry using userEvent.click(getByRole('button', { name: 'Retry' })). 2. Verify onRetry called."
+      },
+      {
+        "name": "EditingInvalid",
+        "description": "Invalid state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click Add List without input. 2. Verify error 'List title is required'."
+      },
+      {
+        "name": "Submitting",
+        "description": "Submitting state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "isLoading": true,
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": false
+      }
+    ],
+    "dataContract": {
+      "source": "local-state",
+      "fields": ["title", "boardId"]
+    }
+  },
+  {
+    "componentId": "edit-card-modal",
+    "componentName": "EditCardModal",
+    "isNew": true,
+    "atomicType": "page",
+    "composes": [
+      "ui-components-dialog",
+      "ui-components-input",
+      "ui-components-textarea",
+      "ui-components-button",
+      "ui-components-alert"
+    ],
+    "specDeltas": {
+      "structure": [
+        "Composes Dialog with header (title 'Edit Card' or 'Create Card'), form (Input for title, Textarea for description), actions (Cancel and Save Card buttons), feedback (Alert for errors).",
+        "Nested route with boardId and optional cardId (new if absent)."
+      ],
+      "rendering": [
+        "In loading state, shows skeletons in form (h-10 title, h-20 description); hides actions.",
+        "In ready state, shows all regions; pre-fills form if editing existing card.",
+        "In editing-invalid state, shows inline error 'Card title is required'.",
+        "In submitting state, disables buttons, shows progress in feedback.",
+        "In error state, shows Alert with 'Failed to save card' and retry."
+      ],
+      "interaction": [
+        "Clicking Cancel calls onCancel: () => void, navigating back.",
+        "Clicking Save Card validates; if valid, calls onSubmit: (data: { title: string; description: string; cardId?: string; boardId: string }) => void.",
+        "On unsaved changes, shows confirmation before closing.",
+        "Retry calls onRetry: () => void."
+      ],
+      "styling": [
+        "DialogContent uses `sm:max-w-md bg-background p-6 space-y-6 rounded-lg shadow-lg` for layout.",
+        "Header uses `text-2xl font-semibold tracking-tight text-foreground text-center`.",
+        "Form uses `space-y-4` with Input `h-10 w-full` and Textarea `min-h-[100px] w-full`.",
+        "Actions uses `flex justify-end space-x-2` with Cancel `variant=\"outline\"` and Save `variant=\"default\"`.",
+        "Feedback uses `text-sm text-destructive` for inline errors; submitting spinner `animate-spin h-5 w-5 text-primary`.",
+        "Error Alert uses `p-4 border border-destructive rounded-md bg-destructive/10 text-destructive` with retry.",
+        "Entrance animation uses useTransition(open, { from: { opacity: 0, scale: 0.95 }, enter: { opacity: 1, scale: 1 }, leave: { opacity: 0, scale: 0.95 }, config: { tension: 300, friction: 22 } }); respects useReducedMotion() with immediate: true.",
+        "Loading skeletons use `h-10 w-full bg-muted animate-pulse` for input, `h-20 w-full bg-muted animate-pulse` for textarea."
+      ]
+    },
+    "props": [
+      {
+        "name": "open",
+        "type": "boolean",
+        "required": true,
+        "description": "Controls open state.",
+        "category": "state"
+      },
+      {
+        "name": "boardId",
+        "type": "string",
+        "required": true,
+        "description": "Board ID.",
+        "category": "config"
+      },
+      {
+        "name": "cardId",
+        "type": "string | undefined",
+        "required": false,
+        "description": "Card ID for editing; undefined for new.",
+        "category": "config"
+      },
+      {
+        "name": "onCancel",
+        "type": "() => void",
+        "required": true,
+        "description": "Cancel callback.",
+        "category": "callback"
+      },
+      {
+        "name": "onSubmit",
+        "type": "(data: { title: string; description: string; cardId?: string; boardId: string }) => void",
+        "required": true,
+        "description": "Submit callback.",
+        "category": "callback"
+      },
+      {
+        "name": "isLoading",
+        "type": "boolean",
+        "required": false,
+        "default": "false",
+        "description": "Loading state.",
+        "category": "state"
+      },
+      {
+        "name": "error",
+        "type": "string | null",
+        "required": false,
+        "default": "null",
+        "description": "Error message.",
+        "category": "state"
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "required": false,
+        "description": "Retry callback.",
+        "category": "callback"
+      }
+    ],
+    "storyVariants": [
+      {
+        "name": "Default",
+        "description": "Ready state for new card.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Type title 'New Card'. 2. Click Save Card. 3. Verify onSubmit with { title: 'New Card', description: '', boardId: '1' }."
+      },
+      {
+        "name": "Loading",
+        "description": "Loading state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "isLoading": true,
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": false
+      },
+      {
+        "name": "Error",
+        "description": "Error state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "error": "Failed to save card",
+          "onCancel": "fn()",
+          "onSubmit": "fn()",
+          "onRetry": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click retry. 2. Verify onRetry called."
+      },
+      {
+        "name": "EditingInvalid",
+        "description": "Invalid state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": true,
+        "playDescription": "1. Click Save Card without input. 2. Verify 'Card title is required'."
+      },
+      {
+        "name": "Submitting",
+        "description": "Submitting state.",
+        "args": {
+          "open": true,
+          "boardId": "1",
+          "isLoading": true,
+          "onCancel": "fn()",
+          "onSubmit": "fn()"
+        },
+        "needsPlayFunction": false
+      }
+    ],
+    "dataContract": {
+      "source": "local-state",
+      "fields": ["title", "description", "cardId", "boardId"]
+    }
+  }
+]