create-auto-app 1.35.0 → 1.36.0

package/templates/typical/.context/components-db.json

@@ -1,4006 +0,0 @@
-[
-  {
-    "id": "ui-components-accordion",
-    "name": "Accordion",
-    "path": "./src/components/ui/Accordion.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Accordion type=\"single\" collapsible className=\"w-full max-w-md\">\n    <AccordionItem value=\"item-1\">\n      <AccordionTrigger>Is it accessible?</AccordionTrigger>\n      <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern for accordions.</AccordionContent>\n    </AccordionItem>\n    <AccordionItem value=\"item-2\">\n      <AccordionTrigger>Is it styled?</AccordionTrigger>\n      <AccordionContent>Yes. It comes with default styles that match the other components.</AccordionContent>\n    </AccordionItem>\n    <AccordionItem value=\"item-3\">\n      <AccordionTrigger>Is it animated?</AccordionTrigger>\n      <AccordionContent>Yes. It uses CSS animations for smooth open and close transitions.</AccordionContent>\n    </AccordionItem>\n  </Accordion>\n);",
-        "description": "Shows the accordion in single-select mode where only one item can be open at a time, with collapsible behavior.",
-        "id": "ui-components-accordion--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Multiple",
-        "snippet": "const Multiple = () => (\n  <Accordion type=\"multiple\" className=\"w-full max-w-md\">\n    <AccordionItem value=\"item-1\">\n      <AccordionTrigger>First section</AccordionTrigger>\n      <AccordionContent>Content for the first section. Multiple items can be open at once.</AccordionContent>\n    </AccordionItem>\n    <AccordionItem value=\"item-2\">\n      <AccordionTrigger>Second section</AccordionTrigger>\n      <AccordionContent>Content for the second section. Try opening multiple items.</AccordionContent>\n    </AccordionItem>\n    <AccordionItem value=\"item-3\">\n      <AccordionTrigger>Third section</AccordionTrigger>\n      <AccordionContent>Content for the third section. All three can be open simultaneously.</AccordionContent>\n    </AccordionItem>\n  </Accordion>\n);",
-        "description": "Demonstrates multiple panels open simultaneously using `type=\"multiple\"`.",
-        "id": "ui-components-accordion--multiple",
-        "exportName": "Multiple",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Expandable content sections. Use `type=\"single\"` for one open at a time, `type=\"multiple\"` for many.",
-    "reactDocgen": {
-      "description": "Expandable content sections. Use `type=\"single\"` for one open at a time, `type=\"multiple\"` for many.",
-      "methods": [],
-      "displayName": "Accordion",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Accordion.tsx",
-      "actualName": "Accordion",
-      "exportName": "Accordion"
-    },
-    "componentPath": "./src/components/ui/Accordion.tsx",
-    "title": "UI Components/Accordion",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-accordion--docs",
-      "title": "UI Components/Accordion",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Accordion.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-alert",
-    "name": "Alert",
-    "path": "./src/components/ui/Alert.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Alert>\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>You can add components to your app using the CLI.</AlertDescription>\n  </Alert>\n);",
-        "description": "Shows the default informational alert variant with a title and description.",
-        "id": "ui-components-alert--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Destructive",
-        "snippet": "const Destructive = () => (\n  <Alert variant=\"destructive\">\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>Your session has expired. Please log in again.</AlertDescription>\n  </Alert>\n);",
-        "description": "Shows the destructive variant used for error or warning messages.",
-        "id": "ui-components-alert--destructive",
-        "exportName": "Destructive",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Alert, AlertDescription, AlertTitle } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Displays a callout message to attract user attention. Supports `default` and `destructive` variants. Compose with AlertTitle and AlertDescription. An optional leading SVG icon is automatically laid out in a grid column.",
-    "reactDocgen": {
-      "description": "Displays a callout message to attract user attention.\nSupports `default` and `destructive` variants. Compose with AlertTitle and AlertDescription.\nAn optional leading SVG icon is automatically laid out in a grid column.",
-      "methods": [],
-      "displayName": "Alert",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Alert.tsx",
-      "actualName": "Alert",
-      "exportName": "Alert"
-    },
-    "componentPath": "./src/components/ui/Alert.tsx",
-    "title": "UI Components/Alert",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-alert--docs",
-      "title": "UI Components/Alert",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Alert.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-alertdialog",
-    "name": "AlertDialog",
-    "path": "./src/components/ui/AlertDialog.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <AlertDialog>\n    <AlertDialogTrigger asChild>\n      <Button variant=\"outline\">Delete Account</Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your account and remove your data from our\n          servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n);",
-        "description": "Shows a standard confirmation dialog with cancel and continue actions.",
-        "id": "ui-components-alertdialog--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "DestructiveAction",
-        "snippet": "const DestructiveAction = () => (\n  <AlertDialog>\n    <AlertDialogTrigger asChild>\n      <Button variant=\"destructive\">Delete Item</Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Delete this item?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This item will be permanently removed. This action cannot be undone.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n);",
-        "description": "Demonstrates a destructive confirmation using the destructive button variant for dangerous actions like deletion."
-      }
-    ],
-    "import": "import {\n    AlertDialog,\n    AlertDialogAction,\n    AlertDialogCancel,\n    AlertDialogContent,\n    AlertDialogDescription,\n    AlertDialogFooter,\n    AlertDialogHeader,\n    AlertDialogTitle,\n    AlertDialogTrigger,\n    Button,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A confirmation modal requiring explicit user action. Unlike Dialog, cannot be dismissed by clicking outside.",
-    "reactDocgen": {
-      "description": "A confirmation modal requiring explicit user action. Unlike Dialog, cannot be dismissed by clicking outside.",
-      "methods": [],
-      "displayName": "AlertDialog",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/AlertDialog.tsx",
-      "actualName": "AlertDialog",
-      "exportName": "AlertDialog"
-    },
-    "componentPath": "./src/components/ui/AlertDialog.tsx",
-    "title": "UI Components/AlertDialog",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-alertdialog--docs",
-      "title": "UI Components/AlertDialog",
-      "name": "Docs",
-      "importPath": "./src/components/ui/AlertDialog.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-aspectratio",
-    "name": "AspectRatio",
-    "path": "./src/components/ui/AspectRatio.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <div className=\"w-[450px]\">\n    <AspectRatio ratio={16 / 9}>\n      <div className=\"flex h-full w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800\">\n        <span className=\"text-sm text-slate-500\">16:9 Aspect Ratio</span>\n      </div>\n    </AspectRatio>\n  </div>\n);",
-        "description": "Shows a 16:9 widescreen aspect ratio container.",
-        "id": "ui-components-aspectratio--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Square",
-        "snippet": "const Square = () => (\n  <div className=\"w-[300px]\">\n    <AspectRatio ratio={1}>\n      <div className=\"flex h-full w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800\">\n        <span className=\"text-sm text-slate-500\">1:1 Square</span>\n      </div>\n    </AspectRatio>\n  </div>\n);",
-        "description": "Shows a 1:1 square aspect ratio container.",
-        "id": "ui-components-aspectratio--square",
-        "exportName": "Square",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { AspectRatio } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Constrains its child element to a specified width-to-height ratio (e.g., 16/9, 1/1). Useful for responsive images, videos, and media containers that must maintain proportions.",
-    "reactDocgen": {
-      "description": "Constrains its child element to a specified width-to-height ratio (e.g., 16/9, 1/1).\nUseful for responsive images, videos, and media containers that must maintain proportions.",
-      "methods": [],
-      "displayName": "AspectRatio",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/AspectRatio.tsx",
-      "actualName": "AspectRatio",
-      "exportName": "AspectRatio"
-    },
-    "componentPath": "./src/components/ui/AspectRatio.tsx",
-    "title": "UI Components/AspectRatio",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-aspectratio--docs",
-      "title": "UI Components/AspectRatio",
-      "name": "Docs",
-      "importPath": "./src/components/ui/AspectRatio.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-avatar",
-    "name": "Avatar",
-    "path": "./src/components/ui/Avatar.stories.tsx",
-    "stories": [
-      {
-        "name": "WithImage",
-        "snippet": "const WithImage = () => (\n  <Avatar>\n    <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n);",
-        "description": "Shows an avatar with a loaded profile image and fallback initials."
-      },
-      {
-        "name": "FallbackOnly",
-        "snippet": "const FallbackOnly = () => (\n  <Avatar>\n    <AvatarFallback>AB</AvatarFallback>\n  </Avatar>\n);",
-        "description": "Shows an avatar displaying only fallback initials without an image."
-      },
-      {
-        "name": "Sizes",
-        "snippet": "const Sizes = () => (\n  <div className=\"flex items-center gap-4\">\n    <Avatar size=\"sm\">\n      <AvatarFallback>SM</AvatarFallback>\n    </Avatar>\n    <Avatar size=\"default\">\n      <AvatarFallback>MD</AvatarFallback>\n    </Avatar>\n    <Avatar size=\"lg\">\n      <AvatarFallback>LG</AvatarFallback>\n    </Avatar>\n  </div>\n);",
-        "description": "Demonstrates the three available avatar sizes: sm, default, and lg.",
-        "id": "ui-components-avatar--sizes",
-        "exportName": "Sizes",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Avatar, AvatarFallback, AvatarImage } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Displays a user profile image with a fallback for missing photos. Compose with AvatarImage, AvatarFallback, and optionally AvatarBadge. Use AvatarGroup to render overlapping stacks of avatars.",
-    "reactDocgen": {
-      "description": "Displays a user profile image with a fallback for missing photos.\nCompose with AvatarImage, AvatarFallback, and optionally AvatarBadge.\nUse AvatarGroup to render overlapping stacks of avatars.",
-      "methods": [],
-      "displayName": "Avatar",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Avatar.tsx",
-      "actualName": "Avatar",
-      "exportName": "Avatar",
-      "props": {
-        "size": {
-          "required": false,
-          "tsType": {
-            "name": "union",
-            "raw": "'default' | 'sm' | 'lg'",
-            "elements": [
-              {
-                "name": "literal",
-                "value": "'default'"
-              },
-              {
-                "name": "literal",
-                "value": "'sm'"
-              },
-              {
-                "name": "literal",
-                "value": "'lg'"
-              }
-            ]
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "'default'",
-            "computed": false
-          }
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Avatar.tsx",
-    "title": "UI Components/Avatar",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-avatar--docs",
-      "title": "UI Components/Avatar",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Avatar.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-badge",
-    "name": "Badge",
-    "path": "./src/components/ui/Badge.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Badge>Default</Badge>;",
-        "description": "Shows the primary filled badge variant.",
-        "id": "ui-components-badge--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Secondary",
-        "snippet": "const Secondary = () => <Badge variant=\"secondary\">Secondary</Badge>;",
-        "description": "Shows the secondary badge variant with muted background.",
-        "id": "ui-components-badge--secondary",
-        "exportName": "Secondary",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Destructive",
-        "snippet": "const Destructive = () => <Badge variant=\"destructive\">Destructive</Badge>;",
-        "description": "Shows the destructive badge variant for error or warning indicators.",
-        "id": "ui-components-badge--destructive",
-        "exportName": "Destructive",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Outline",
-        "snippet": "const Outline = () => <Badge variant=\"outline\">Outline</Badge>;",
-        "description": "Shows the outline badge variant with a visible border and no fill.",
-        "id": "ui-components-badge--outline",
-        "exportName": "Outline",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "AllVariants",
-        "snippet": "const AllVariants = () => (\n  <div className=\"flex flex-wrap gap-2\">\n    <Badge variant=\"default\">Default</Badge>\n    <Badge variant=\"secondary\">Secondary</Badge>\n    <Badge variant=\"destructive\">Destructive</Badge>\n    <Badge variant=\"outline\">Outline</Badge>\n  </div>\n);",
-        "description": "Displays all badge variants side by side for visual comparison."
-      }
-    ],
-    "import": "import { Badge } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A small label used to highlight status, category, or count. Supports multiple visual variants: default, secondary, destructive, outline, ghost, and link.",
-    "reactDocgen": {
-      "description": "A small label used to highlight status, category, or count.\nSupports multiple visual variants: default, secondary, destructive, outline, ghost, and link.",
-      "methods": [],
-      "displayName": "Badge",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Badge.tsx",
-      "actualName": "Badge",
-      "exportName": "Badge",
-      "props": {
-        "asChild": {
-          "required": false,
-          "tsType": {
-            "name": "boolean"
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "false",
-            "computed": false
-          }
-        },
-        "variant": {
-          "defaultValue": {
-            "value": "'default'",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Badge.tsx",
-    "title": "UI Components/Badge",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-badge--docs",
-      "title": "UI Components/Badge",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Badge.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-breadcrumb",
-    "name": "Breadcrumb",
-    "path": "./src/components/ui/Breadcrumb.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n);",
-        "description": "Shows a three-level breadcrumb trail with home, category, and current page.",
-        "id": "ui-components-breadcrumb--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "TwoLevels",
-        "snippet": "const TwoLevels = () => (\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">Dashboard</BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Settings</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n);",
-        "description": "Shows a minimal two-level breadcrumb with just a parent link and current page."
-      }
-    ],
-    "import": "import {\n    Breadcrumb,\n    BreadcrumbItem,\n    BreadcrumbLink,\n    BreadcrumbList,\n    BreadcrumbPage,\n    BreadcrumbSeparator,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A navigation aid that shows the user's current location within a site hierarchy. Compose with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator. Renders as a `<nav>` with `aria-label=\"breadcrumb\"` for accessibility.",
-    "reactDocgen": {
-      "description": "A navigation aid that shows the user's current location within a site hierarchy.\nCompose with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator.\nRenders as a `<nav>` with `aria-label=\"breadcrumb\"` for accessibility.",
-      "methods": [],
-      "displayName": "Breadcrumb",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Breadcrumb.tsx",
-      "actualName": "Breadcrumb",
-      "exportName": "Breadcrumb"
-    },
-    "componentPath": "./src/components/ui/Breadcrumb.tsx",
-    "title": "UI Components/Breadcrumb",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-breadcrumb--docs",
-      "title": "UI Components/Breadcrumb",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Breadcrumb.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-button",
-    "name": "Button",
-    "path": "./src/components/ui/Button.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Button>Button</Button>;",
-        "description": "Shows the primary filled button variant.",
-        "id": "ui-components-button--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Secondary",
-        "snippet": "const Secondary = () => <Button variant=\"secondary\">Secondary</Button>;",
-        "description": "Shows the secondary button variant with muted styling.",
-        "id": "ui-components-button--secondary",
-        "exportName": "Secondary",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Destructive",
-        "snippet": "const Destructive = () => <Button variant=\"destructive\">Destructive</Button>;",
-        "description": "Shows the destructive button variant for dangerous actions like delete.",
-        "id": "ui-components-button--destructive",
-        "exportName": "Destructive",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Outline",
-        "snippet": "const Outline = () => <Button variant=\"outline\">Outline</Button>;",
-        "description": "Shows the outline button variant with a border and transparent background.",
-        "id": "ui-components-button--outline",
-        "exportName": "Outline",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Ghost",
-        "snippet": "const Ghost = () => <Button variant=\"ghost\">Ghost</Button>;",
-        "description": "Shows the ghost button variant with no background until hovered.",
-        "id": "ui-components-button--ghost",
-        "exportName": "Ghost",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Link",
-        "snippet": "const Link = () => <Button variant=\"link\">Link</Button>;",
-        "description": "Shows the link button variant styled as an inline text link with underline on hover.",
-        "id": "ui-components-button--link",
-        "exportName": "Link",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Small",
-        "snippet": "const Small = () => <Button size=\"sm\">Small</Button>;",
-        "description": "Shows a compact small-sized button.",
-        "id": "ui-components-button--small",
-        "exportName": "Small",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Large",
-        "snippet": "const Large = () => <Button size=\"lg\">Large</Button>;",
-        "description": "Shows a larger button with more padding.",
-        "id": "ui-components-button--large",
-        "exportName": "Large",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Icon",
-        "snippet": "const Icon = () => <Button size=\"icon\">X</Button>;",
-        "description": "Shows an icon-only square button.",
-        "id": "ui-components-button--icon",
-        "exportName": "Icon",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "AllVariants",
-        "snippet": "const AllVariants = () => (\n  <div className=\"flex flex-col gap-4\">\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Button variant=\"default\">Default</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"destructive\">Destructive</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n      <Button variant=\"link\">Link</Button>\n    </div>\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Button size=\"sm\">Small</Button>\n      <Button size=\"default\">Default</Button>\n      <Button size=\"lg\">Large</Button>\n      <Button size=\"icon\">X</Button>\n    </div>\n  </div>\n);",
-        "description": "Displays all button variants and sizes side by side for visual comparison."
-      }
-    ],
-    "import": "import { Button } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A clickable element that triggers an action or navigation. Supports six visual variants (default, secondary, destructive, outline, ghost, link) and multiple sizes including icon-only modes.",
-    "reactDocgen": {
-      "description": "A clickable element that triggers an action or navigation.\nSupports six visual variants (default, secondary, destructive, outline, ghost, link) and multiple sizes including icon-only modes.",
-      "methods": [],
-      "displayName": "Button",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Button.tsx",
-      "actualName": "Button",
-      "exportName": "Button",
-      "props": {
-        "asChild": {
-          "required": false,
-          "tsType": {
-            "name": "boolean"
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "false",
-            "computed": false
-          }
-        },
-        "variant": {
-          "defaultValue": {
-            "value": "'default'",
-            "computed": false
-          },
-          "required": false
-        },
-        "size": {
-          "defaultValue": {
-            "value": "'default'",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Button.tsx",
-    "title": "UI Components/Button",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-button--docs",
-      "title": "UI Components/Button",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Button.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-buttongroup",
-    "name": "ButtonGroup",
-    "path": "./src/components/ui/ButtonGroup.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <ButtonGroup>\n    <Button variant=\"outline\">Left</Button>\n    <Button variant=\"outline\">Center</Button>\n    <Button variant=\"outline\">Right</Button>\n  </ButtonGroup>\n);",
-        "description": "Shows a horizontal group of three outline buttons with connected borders.",
-        "id": "ui-components-buttongroup--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Vertical",
-        "snippet": "const Vertical = () => (\n  <ButtonGroup orientation=\"vertical\">\n    <Button variant=\"outline\">Top</Button>\n    <Button variant=\"outline\">Middle</Button>\n    <Button variant=\"outline\">Bottom</Button>\n  </ButtonGroup>\n);",
-        "description": "Shows a vertically stacked button group.",
-        "id": "ui-components-buttongroup--vertical",
-        "exportName": "Vertical",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Button, ButtonGroup } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Groups multiple Buttons together with connected borders, removing inner border-radius between siblings. Supports horizontal (default) and vertical orientation.",
-    "reactDocgen": {
-      "description": "Groups multiple Buttons together with connected borders, removing inner border-radius between siblings.\nSupports horizontal (default) and vertical orientation.",
-      "methods": [],
-      "displayName": "ButtonGroup",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/ButtonGroup.tsx",
-      "actualName": "ButtonGroup",
-      "exportName": "ButtonGroup"
-    },
-    "componentPath": "./src/components/ui/ButtonGroup.tsx",
-    "title": "UI Components/ButtonGroup",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-buttongroup--docs",
-      "title": "UI Components/ButtonGroup",
-      "name": "Docs",
-      "importPath": "./src/components/ui/ButtonGroup.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-calendar",
-    "name": "Calendar",
-    "path": "./src/components/ui/Calendar.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <CalendarDemo />;",
-        "description": "Shows a single-date selection calendar with controlled state.",
-        "id": "ui-components-calendar--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "RangeSelection",
-        "snippet": "const RangeSelection = () => <CalendarRangeDemo />;",
-        "description": "Demonstrates date range selection across two side-by-side months."
-      }
-    ],
-    "import": "import { Calendar } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A date picker component built on react-day-picker supporting single date, multiple date, and date range selection. Supports month/year dropdowns, outside days visibility, keyboard navigation, and multi-month layouts.",
-    "reactDocgen": {
-      "description": "A date picker component built on react-day-picker supporting single date, multiple date, and date range selection.\nSupports month/year dropdowns, outside days visibility, keyboard navigation, and multi-month layouts.",
-      "methods": [],
-      "displayName": "Calendar",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Calendar.tsx",
-      "actualName": "Calendar",
-      "exportName": "Calendar",
-      "props": {
-        "buttonVariant": {
-          "required": false,
-          "tsType": {
-            "name": "ReactComponentProps['variant']",
-            "raw": "React.ComponentProps<typeof Button>['variant']"
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "'ghost'",
-            "computed": false
-          }
-        },
-        "showOutsideDays": {
-          "defaultValue": {
-            "value": "true",
-            "computed": false
-          },
-          "required": false
-        },
-        "captionLayout": {
-          "defaultValue": {
-            "value": "'label'",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Calendar.tsx",
-    "title": "UI Components/Calendar",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-calendar--docs",
-      "title": "UI Components/Calendar",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Calendar.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-card",
-    "name": "Card",
-    "path": "./src/components/ui/Card.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Card className=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Card Title</CardTitle>\n      <CardDescription>Card description goes here.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <p>Card content with some example text to demonstrate the layout.</p>\n    </CardContent>\n    <CardFooter className=\"flex justify-between\">\n      <Button variant=\"outline\">Cancel</Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n);",
-        "description": "Shows a full card with header, content, and footer containing action buttons.",
-        "id": "ui-components-card--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Simple",
-        "snippet": "const Simple = () => (\n  <Card className=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <p className=\"text-sm text-muted-foreground\">Check your inbox for the latest updates.</p>\n    </CardContent>\n  </Card>\n);",
-        "description": "Shows a minimal card with only a header and content, without a footer.",
-        "id": "ui-components-card--simple",
-        "exportName": "Simple",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import {\n    Button,\n    Card,\n    CardContent,\n    CardDescription,\n    CardFooter,\n    CardHeader,\n    CardTitle,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A flexible container for grouping related content with a border, shadow, and rounded corners. Compose with CardHeader, CardTitle, CardDescription, CardContent, CardFooter, and CardAction.",
-    "reactDocgen": {
-      "description": "A flexible container for grouping related content with a border, shadow, and rounded corners.\nCompose with CardHeader, CardTitle, CardDescription, CardContent, CardFooter, and CardAction.",
-      "methods": [],
-      "displayName": "Card",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Card.tsx",
-      "actualName": "Card",
-      "exportName": "Card"
-    },
-    "componentPath": "./src/components/ui/Card.tsx",
-    "title": "UI Components/Card",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-card--docs",
-      "title": "UI Components/Card",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Card.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-carousel",
-    "name": "Carousel",
-    "path": "./src/components/ui/Carousel.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <div className=\"w-full max-w-xs mx-auto\">\n    <Carousel>\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <Card>\n              <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                <span className=\"text-4xl font-semibold\">{index + 1}</span>\n              </CardContent>\n            </Card>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </div>\n);",
-        "description": "Shows a basic carousel with one full-width slide visible at a time and navigation arrows.",
-        "id": "ui-components-carousel--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "ThirdWidth",
-        "snippet": "const ThirdWidth = () => (\n  <div className=\"w-full max-w-sm mx-auto\">\n    <Carousel>\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"basis-1/3\">\n            <Card>\n              <CardContent className=\"flex aspect-square items-center justify-center p-2\">\n                <span className=\"text-2xl font-semibold\">{index + 1}</span>\n              </CardContent>\n            </Card>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </div>\n);",
-        "description": "Demonstrates showing three slides simultaneously using `basis-1/3` on each CarouselItem."
-      }
-    ],
-    "import": "import {\n    Card,\n    CardContent,\n    Carousel,\n    CarouselContent,\n    CarouselItem,\n    CarouselNext,\n    CarouselPrevious,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A slideshow component for cycling through content panels with arrow-key navigation. Built on Embla Carousel. Compose with CarouselContent, CarouselItem, CarouselPrevious, and CarouselNext. Supports horizontal and vertical orientation, and accepts Embla plugins (e.g., autoplay).",
-    "reactDocgen": {
-      "description": "A slideshow component for cycling through content panels with arrow-key navigation.\nBuilt on Embla Carousel. Compose with CarouselContent, CarouselItem, CarouselPrevious, and CarouselNext.\nSupports horizontal and vertical orientation, and accepts Embla plugins (e.g., autoplay).",
-      "methods": [],
-      "displayName": "Carousel",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Carousel.tsx",
-      "actualName": "Carousel",
-      "exportName": "Carousel",
-      "props": {
-        "opts": {
-          "required": false,
-          "tsType": {
-            "name": "Parameters[0]",
-            "raw": "UseCarouselParameters[0]"
-          },
-          "description": ""
-        },
-        "plugins": {
-          "required": false,
-          "tsType": {
-            "name": "Parameters[1]",
-            "raw": "UseCarouselParameters[1]"
-          },
-          "description": ""
-        },
-        "orientation": {
-          "required": false,
-          "tsType": {
-            "name": "union",
-            "raw": "'horizontal' | 'vertical'",
-            "elements": [
-              {
-                "name": "literal",
-                "value": "'horizontal'"
-              },
-              {
-                "name": "literal",
-                "value": "'vertical'"
-              }
-            ]
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "'horizontal'",
-            "computed": false
-          }
-        },
-        "setApi": {
-          "required": false,
-          "tsType": {
-            "name": "signature",
-            "type": "function",
-            "raw": "(api: CarouselApi) => void",
-            "signature": {
-              "arguments": [
-                {
-                  "type": {
-                    "name": "UseEmblaCarouselType[1]",
-                    "raw": "UseEmblaCarouselType[1]"
-                  },
-                  "name": "api"
-                }
-              ],
-              "return": {
-                "name": "void"
-              }
-            }
-          },
-          "description": ""
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Carousel.tsx",
-    "title": "UI Components/Carousel",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-carousel--docs",
-      "title": "UI Components/Carousel",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Carousel.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-chart",
-    "name": "ChartContainer",
-    "path": "./src/components/ui/Chart.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n    <BarChart data={chartData}>\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip content={<ChartTooltipContent />} />\n      <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n      <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n    </BarChart>\n  </ChartContainer>\n);",
-        "description": "Shows a grouped bar chart with desktop and mobile data series, tooltips, and themed colors.",
-        "id": "ui-components-chart--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Bar, BarChart, XAxis, YAxis } from \"recharts\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A themed wrapper for Recharts charts that provides responsive sizing, CSS custom property-based color theming, and a chart context for tooltips and legends. Pass a `config` object mapping data keys to labels, colors, and optional icons.",
-    "reactDocgen": {
-      "description": "A themed wrapper for Recharts charts that provides responsive sizing, CSS custom property-based color theming, and a chart context for tooltips and legends.\nPass a `config` object mapping data keys to labels, colors, and optional icons.",
-      "methods": [],
-      "displayName": "ChartContainer",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Chart.tsx",
-      "actualName": "ChartContainer",
-      "exportName": "ChartContainer",
-      "props": {
-        "config": {
-          "required": true,
-          "tsType": {
-            "name": "signature",
-            "type": "object",
-            "raw": "{\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });\n}",
-            "signature": {
-              "properties": [
-                {
-                  "key": {
-                    "name": "string",
-                    "required": true
-                  },
-                  "value": {
-                    "name": "intersection",
-                    "raw": "{\n  label?: React.ReactNode;\n  icon?: React.ComponentType;\n} & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })",
-                    "elements": [
-                      {
-                        "name": "signature",
-                        "type": "object",
-                        "raw": "{\n  label?: React.ReactNode;\n  icon?: React.ComponentType;\n}",
-                        "signature": {
-                          "properties": [
-                            {
-                              "key": "label",
-                              "value": {
-                                "name": "ReactReactNode",
-                                "raw": "React.ReactNode",
-                                "required": false
-                              }
-                            },
-                            {
-                              "key": "icon",
-                              "value": {
-                                "name": "ReactComponentType",
-                                "raw": "React.ComponentType",
-                                "required": false
-                              }
-                            }
-                          ]
-                        }
-                      },
-                      {
-                        "name": "unknown"
-                      }
-                    ]
-                  }
-                }
-              ]
-            }
-          },
-          "description": ""
-        },
-        "children": {
-          "required": true,
-          "tsType": {
-            "name": "ReactComponentProps['children']",
-            "raw": "React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']"
-          },
-          "description": ""
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Chart.tsx",
-    "title": "UI Components/Chart",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-chart--docs",
-      "title": "UI Components/Chart",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Chart.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-checkbox",
-    "name": "Checkbox",
-    "path": "./src/components/ui/Checkbox.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Checkbox />;",
-        "description": "Shows an unchecked checkbox in its default state.",
-        "id": "ui-components-checkbox--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Checked",
-        "snippet": "const Checked = () => <Checkbox defaultChecked />;",
-        "description": "Shows a checkbox that starts in the checked state.",
-        "id": "ui-components-checkbox--checked",
-        "exportName": "Checked",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Disabled",
-        "snippet": "const Disabled = () => <Checkbox disabled />;",
-        "description": "Shows a disabled checkbox that cannot be interacted with.",
-        "id": "ui-components-checkbox--disabled",
-        "exportName": "Disabled",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithLabel",
-        "snippet": "const WithLabel = () => (\n  <div className=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n  </div>\n);",
-        "description": "Shows a checkbox paired with a Label component for accessible form usage."
-      }
-    ],
-    "import": "import { Checkbox, Label } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A toggleable boolean input with check icon. Supports checked, unchecked, and indeterminate states. Pair with Label for forms.",
-    "reactDocgen": {
-      "description": "A toggleable boolean input with check icon. Supports checked, unchecked, and indeterminate states. Pair with Label for forms.",
-      "methods": [],
-      "displayName": "Checkbox",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Checkbox.tsx",
-      "actualName": "Checkbox",
-      "exportName": "Checkbox"
-    },
-    "componentPath": "./src/components/ui/Checkbox.tsx",
-    "title": "UI Components/Checkbox",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-checkbox--docs",
-      "title": "UI Components/Checkbox",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Checkbox.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-collapsible",
-    "name": "Collapsible",
-    "path": "./src/components/ui/Collapsible.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <CollapsibleDemo />;",
-        "description": "Shows a controlled collapsible section that starts closed and can be toggled with a button.",
-        "id": "ui-components-collapsible--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "DefaultOpen",
-        "snippet": "const DefaultOpen = () => (\n  <Collapsible defaultOpen className=\"w-[350px] space-y-2\">\n    <div className=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 className=\"text-sm font-semibold\">Additional details</h4>\n      <CollapsibleTrigger asChild>\n        <Button variant=\"ghost\" size=\"sm\">\n          Toggle\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <CollapsibleContent className=\"space-y-2\">\n      <div className=\"rounded-md border px-4 py-2 text-sm shadow-sm\">\n        This section is open by default and can be collapsed.\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n);",
-        "description": "Shows a collapsible section that starts in the open state using `defaultOpen`."
-      }
-    ],
-    "import": "import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A disclosure widget that toggles content visibility. Compose with CollapsibleTrigger and CollapsibleContent.",
-    "reactDocgen": {
-      "description": "A disclosure widget that toggles content visibility. Compose with CollapsibleTrigger and CollapsibleContent.",
-      "methods": [],
-      "displayName": "Collapsible",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Collapsible.tsx",
-      "actualName": "Collapsible",
-      "exportName": "Collapsible"
-    },
-    "componentPath": "./src/components/ui/Collapsible.tsx",
-    "title": "UI Components/Collapsible",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-collapsible--docs",
-      "title": "UI Components/Collapsible",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Collapsible.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-combobox",
-    "name": "ComboboxInput",
-    "path": "./src/components/ui/Combobox.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <SearchableCombobox />;",
-        "description": "Shows a searchable combobox with type-ahead filtering of framework options.",
-        "id": "ui-components-combobox--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithClear",
-        "snippet": "const WithClear = () => <ClearableCombobox />;",
-        "description": "Demonstrates the combobox with a clear button that resets the selection."
-      }
-    ],
-    "import": "import {\n    Combobox,\n    ComboboxContent,\n    ComboboxEmpty,\n    ComboboxInput,\n    ComboboxItem,\n    ComboboxList,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Text input for filtering combobox options, wrapped in an InputGroup with optional trigger and clear buttons.",
-    "reactDocgen": {
-      "description": "Text input for filtering combobox options, wrapped in an InputGroup with optional trigger and clear buttons.",
-      "methods": [],
-      "displayName": "ComboboxInput",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Combobox.tsx",
-      "actualName": "ComboboxInput",
-      "exportName": "ComboboxInput",
-      "props": {
-        "showTrigger": {
-          "required": false,
-          "tsType": {
-            "name": "boolean"
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "true",
-            "computed": false
-          }
-        },
-        "showClear": {
-          "required": false,
-          "tsType": {
-            "name": "boolean"
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "false",
-            "computed": false
-          }
-        },
-        "disabled": {
-          "defaultValue": {
-            "value": "false",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Combobox.tsx",
-    "title": "UI Components/Combobox",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-combobox--docs",
-      "title": "UI Components/Combobox",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Combobox.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-command",
-    "name": "Command",
-    "path": "./src/components/ui/Command.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem>\n          <CalendarIcon />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem>\n          <MailIcon />\n          <span>Mail</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem>\n          <UserIcon />\n          <span>Profile</span>\n          <CommandShortcut>Ctrl+P</CommandShortcut>\n        </CommandItem>\n        <CommandItem>\n          <CreditCardIcon />\n          <span>Billing</span>\n          <CommandShortcut>Ctrl+B</CommandShortcut>\n        </CommandItem>\n        <CommandItem>\n          <SettingsIcon />\n          <span>Settings</span>\n          <CommandShortcut>Ctrl+S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n);",
-        "description": "Shows the command palette with grouped items, icons, keyboard shortcuts, and a search input.",
-        "id": "ui-components-command--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithNoResults",
-        "snippet": "const WithNoResults = () => (\n  <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n    <CommandInput placeholder=\"Search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n    </CommandList>\n  </Command>\n);",
-        "description": "Shows the empty state when no items match the search query."
-      }
-    ],
-    "import": "import { CalendarIcon, CreditCardIcon, MailIcon, SettingsIcon, UserIcon } from \"lucide-react\";\nimport {\n    Command,\n    CommandEmpty,\n    CommandGroup,\n    CommandInput,\n    CommandItem,\n    CommandList,\n    CommandSeparator,\n    CommandShortcut,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A command palette / search interface for filtering and selecting from a list of actions or items. Built on cmdk with keyboard navigation, grouping, and search filtering. Compose with CommandInput, CommandList, CommandGroup, CommandItem, and CommandEmpty.",
-    "reactDocgen": {
-      "description": "A command palette / search interface for filtering and selecting from a list of actions or items.\nBuilt on cmdk with keyboard navigation, grouping, and search filtering.\n\nCompose with CommandInput, CommandList, CommandGroup, CommandItem, and CommandEmpty.",
-      "methods": [],
-      "displayName": "Command",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Command.tsx",
-      "actualName": "Command",
-      "exportName": "Command"
-    },
-    "componentPath": "./src/components/ui/Command.tsx",
-    "title": "UI Components/Command",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-command--docs",
-      "title": "UI Components/Command",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Command.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-contextmenu",
-    "name": "ContextMenu",
-    "path": "./src/components/ui/ContextMenu.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <ContextMenu>\n    <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent className=\"w-64\">\n      <ContextMenuItem>\n        Back <ContextMenuShortcut>Ctrl+[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem>\n        Forward <ContextMenuShortcut>Ctrl+]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem>\n        Reload <ContextMenuShortcut>Ctrl+R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSeparator />\n      <ContextMenuSub>\n        <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n        <ContextMenuSubContent className=\"w-48\">\n          <ContextMenuItem>Save Page As...</ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n    </ContextMenuContent>\n  </ContextMenu>\n);",
-        "description": "Shows a context menu with shortcuts, submenus, separators, and a destructive action.",
-        "id": "ui-components-contextmenu--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Simple",
-        "snippet": "const Simple = () => (\n  <ContextMenu>\n    <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent>\n      <ContextMenuItem>Cut</ContextMenuItem>\n      <ContextMenuItem>Copy</ContextMenuItem>\n      <ContextMenuItem>Paste</ContextMenuItem>\n    </ContextMenuContent>\n  </ContextMenu>\n);",
-        "description": "Shows a minimal context menu with basic cut/copy/paste actions.",
-        "id": "ui-components-contextmenu--simple",
-        "exportName": "Simple",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import {\n    ContextMenu,\n    ContextMenuContent,\n    ContextMenuItem,\n    ContextMenuSeparator,\n    ContextMenuShortcut,\n    ContextMenuSub,\n    ContextMenuSubContent,\n    ContextMenuSubTrigger,\n    ContextMenuTrigger,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Right-click menu with keyboard navigation. Supports submenus, checkbox/radio items, separators, and shortcuts.",
-    "reactDocgen": {
-      "description": "Right-click menu with keyboard navigation. Supports submenus, checkbox/radio items, separators, and shortcuts.",
-      "methods": [],
-      "displayName": "ContextMenu",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/ContextMenu.tsx",
-      "actualName": "ContextMenu",
-      "exportName": "ContextMenu"
-    },
-    "componentPath": "./src/components/ui/ContextMenu.tsx",
-    "title": "UI Components/ContextMenu",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-contextmenu--docs",
-      "title": "UI Components/ContextMenu",
-      "name": "Docs",
-      "importPath": "./src/components/ui/ContextMenu.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-dialog",
-    "name": "Dialog",
-    "path": "./src/components/ui/Dialog.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Edit Profile</Button>\n    </DialogTrigger>\n    <DialogContent className=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>Make changes to your profile here. Click save when you are done.</DialogDescription>\n      </DialogHeader>\n      <div className=\"grid gap-4 py-4\">\n        <div className=\"grid grid-cols-4 items-center gap-4\">\n          <Label htmlFor=\"name\" className=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" defaultValue=\"John Doe\" className=\"col-span-3\" />\n        </div>\n        <div className=\"grid grid-cols-4 items-center gap-4\">\n          <Label htmlFor=\"username\" className=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" defaultValue=\"@johndoe\" className=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">Save changes</Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n);",
-        "description": "Shows a dialog with a form for editing profile information.",
-        "id": "ui-components-dialog--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithCloseButton",
-        "snippet": "const WithCloseButton = () => (\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button variant=\"outline\">Open Dialog</Button>\n    </DialogTrigger>\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>Confirm Action</DialogTitle>\n        <DialogDescription>Are you sure you want to proceed? This action cannot be undone.</DialogDescription>\n      </DialogHeader>\n      <DialogFooter showCloseButton>\n        <Button variant=\"destructive\">Confirm</Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n);",
-        "description": "Shows a confirmation dialog with a footer close button and a destructive action."
-      }
-    ],
-    "import": "import {\n    Button,\n    Dialog,\n    DialogContent,\n    DialogDescription,\n    DialogFooter,\n    DialogHeader,\n    DialogTitle,\n    DialogTrigger,\n    Input,\n    Label,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A modal overlay with focus trapping and scroll locking. Click outside or press Escape to close.",
-    "reactDocgen": {
-      "description": "A modal overlay with focus trapping and scroll locking. Click outside or press Escape to close.",
-      "methods": [],
-      "displayName": "Dialog",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Dialog.tsx",
-      "actualName": "Dialog",
-      "exportName": "Dialog"
-    },
-    "componentPath": "./src/components/ui/Dialog.tsx",
-    "title": "UI Components/Dialog",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-dialog--docs",
-      "title": "UI Components/Dialog",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Dialog.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-direction",
-    "name": "DirectionProvider",
-    "path": "./src/components/ui/Direction.stories.tsx",
-    "stories": [
-      {
-        "name": "LTR",
-        "snippet": "const LTR = () => (\n  <DirectionProvider dir=\"ltr\">\n    <div className=\"space-y-2\">\n      <DirectionDisplay />\n      <p>This content is rendered in a left-to-right context.</p>\n    </div>\n  </DirectionProvider>\n);",
-        "description": "Shows the DirectionProvider in left-to-right mode.",
-        "id": "ui-components-direction--ltr",
-        "exportName": "LTR",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "RTL",
-        "snippet": "const RTL = () => (\n  <DirectionProvider dir=\"rtl\">\n    <div className=\"space-y-2\" dir=\"rtl\">\n      <DirectionDisplay />\n      <p>This content is rendered in a right-to-left context.</p>\n    </div>\n  </DirectionProvider>\n);",
-        "description": "Shows the DirectionProvider in right-to-left mode for internationalization support.",
-        "id": "ui-components-direction--rtl",
-        "exportName": "RTL",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { DirectionProvider } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Provides text direction (LTR/RTL) context to all descendant Radix UI components. Accepts either `dir` or `direction` prop for convenience.",
-    "reactDocgen": {
-      "description": "Provides text direction (LTR/RTL) context to all descendant Radix UI components.\nAccepts either `dir` or `direction` prop for convenience.",
-      "methods": [],
-      "displayName": "DirectionProvider",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Direction.tsx",
-      "actualName": "DirectionProvider",
-      "exportName": "DirectionProvider",
-      "props": {
-        "direction": {
-          "required": false,
-          "tsType": {
-            "name": "ReactComponentProps['dir']",
-            "raw": "React.ComponentProps<typeof Direction.DirectionProvider>['dir']"
-          },
-          "description": ""
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Direction.tsx",
-    "title": "UI Components/Direction",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-direction--docs",
-      "title": "UI Components/Direction",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Direction.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-drawer",
-    "name": "Drawer",
-    "path": "./src/components/ui/Drawer.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Drawer>\n    <DrawerTrigger asChild>\n      <Button variant=\"outline\">Open Drawer</Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader>\n        <DrawerTitle>Move Goal</DrawerTitle>\n        <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n      </DrawerHeader>\n      <div className=\"p-4\">\n        <p className=\"text-muted-foreground text-sm\">Adjust the settings below to configure your preferences.</p>\n      </div>\n      <DrawerFooter>\n        <Button>Submit</Button>\n        <DrawerClose asChild>\n          <Button variant=\"outline\">Cancel</Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n);",
-        "description": "Shows a bottom drawer with a title, description, body content, and action buttons.",
-        "id": "ui-components-drawer--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "RightSide",
-        "snippet": "const RightSide = () => (\n  <Drawer direction=\"right\">\n    <DrawerTrigger asChild>\n      <Button variant=\"outline\">Open Right Drawer</Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader>\n        <DrawerTitle>Side Panel</DrawerTitle>\n        <DrawerDescription>This drawer opens from the right side.</DrawerDescription>\n      </DrawerHeader>\n      <div className=\"p-4\">\n        <p className=\"text-muted-foreground text-sm\">Content goes here.</p>\n      </div>\n      <DrawerFooter>\n        <DrawerClose asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n);",
-        "description": "Shows a drawer sliding in from the right side, useful for side panels and detail views."
-      }
-    ],
-    "import": "import {\n    Button,\n    Drawer,\n    DrawerClose,\n    DrawerContent,\n    DrawerDescription,\n    DrawerFooter,\n    DrawerHeader,\n    DrawerTitle,\n    DrawerTrigger,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A panel that slides in from the edge of the screen, ideal for mobile-friendly interactions. Built on Vaul with swipe-to-dismiss gestures. Supports top, bottom, left, and right directions. Compose with DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, and DrawerFooter.",
-    "reactDocgen": {
-      "description": "A panel that slides in from the edge of the screen, ideal for mobile-friendly interactions.\nBuilt on Vaul with swipe-to-dismiss gestures. Supports top, bottom, left, and right directions.\n\nCompose with DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, and DrawerFooter.",
-      "methods": [],
-      "displayName": "Drawer",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Drawer.tsx",
-      "actualName": "Drawer",
-      "exportName": "Drawer"
-    },
-    "componentPath": "./src/components/ui/Drawer.tsx",
-    "title": "UI Components/Drawer",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-drawer--docs",
-      "title": "UI Components/Drawer",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Drawer.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-dropdownmenu",
-    "name": "DropdownMenu",
-    "path": "./src/components/ui/DropdownMenu.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant=\"outline\">Open Menu</Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent className=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <UserIcon />\n          <span>Profile</span>\n          <DropdownMenuShortcut>Ctrl+P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <CreditCardIcon />\n          <span>Billing</span>\n          <DropdownMenuShortcut>Ctrl+B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <SettingsIcon />\n          <span>Settings</span>\n          <DropdownMenuShortcut>Ctrl+S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem variant=\"destructive\">\n        <LogOutIcon />\n        <span>Log out</span>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n);",
-        "description": "Shows a dropdown menu with grouped items, icons, keyboard shortcuts, and a destructive logout action.",
-        "id": "ui-components-dropdownmenu--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Simple",
-        "snippet": "const Simple = () => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant=\"outline\">Actions</Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent>\n      <DropdownMenuItem>Edit</DropdownMenuItem>\n      <DropdownMenuItem>Duplicate</DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n);",
-        "description": "Shows a minimal dropdown menu with basic edit/duplicate/delete actions.",
-        "id": "ui-components-dropdownmenu--simple",
-        "exportName": "Simple",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import {\n    Button,\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuItem,\n    DropdownMenuLabel,\n    DropdownMenuSeparator,\n    DropdownMenuShortcut,\n    DropdownMenuTrigger,\n} from \"react-client\";\nimport { CreditCardIcon, LogOutIcon, SettingsIcon, UserIcon } from \"lucide-react\";",
-    "jsDocTags": {},
-    "description": "Action menu triggered by a button click. Supports submenus, checkbox/radio items, and keyboard shortcuts.",
-    "reactDocgen": {
-      "description": "Action menu triggered by a button click. Supports submenus, checkbox/radio items, and keyboard shortcuts.",
-      "methods": [],
-      "displayName": "DropdownMenu",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/DropdownMenu.tsx",
-      "actualName": "DropdownMenu",
-      "exportName": "DropdownMenu"
-    },
-    "componentPath": "./src/components/ui/DropdownMenu.tsx",
-    "title": "UI Components/DropdownMenu",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-dropdownmenu--docs",
-      "title": "UI Components/DropdownMenu",
-      "name": "Docs",
-      "importPath": "./src/components/ui/DropdownMenu.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-empty",
-    "name": "Empty",
-    "path": "./src/components/ui/Empty.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Empty>\n    <EmptyHeader>\n      <EmptyTitle>No results found</EmptyTitle>\n      <EmptyDescription>Try adjusting your search or filter to find what you are looking for.</EmptyDescription>\n    </EmptyHeader>\n  </Empty>\n);",
-        "description": "Shows a basic empty state with a title and description text.",
-        "id": "ui-components-empty--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithIcon",
-        "snippet": "const WithIcon = () => (\n  <Empty>\n    <EmptyHeader>\n      <EmptyMedia variant=\"icon\">\n        <InboxIcon />\n      </EmptyMedia>\n      <EmptyTitle>Your inbox is empty</EmptyTitle>\n      <EmptyDescription>New messages will appear here when you receive them.</EmptyDescription>\n    </EmptyHeader>\n  </Empty>\n);",
-        "description": "Shows an empty state with a styled icon container above the title and description."
-      }
-    ],
-    "import": "import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from \"react-client\";\nimport { InboxIcon } from \"lucide-react\";",
-    "jsDocTags": {},
-    "description": "A placeholder component for empty states, such as no search results or empty inboxes. Compose with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent to build structured empty state layouts with icons and call-to-action areas.",
-    "reactDocgen": {
-      "description": "A placeholder component for empty states, such as no search results or empty inboxes.\nCompose with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent\nto build structured empty state layouts with icons and call-to-action areas.",
-      "methods": [],
-      "displayName": "Empty",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Empty.tsx",
-      "actualName": "Empty",
-      "exportName": "Empty"
-    },
-    "componentPath": "./src/components/ui/Empty.tsx",
-    "title": "UI Components/Empty",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-empty--docs",
-      "title": "UI Components/Empty",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Empty.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-field",
-    "name": "Field",
-    "path": "./src/components/ui/Field.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Field>\n    <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n    <FieldContent>\n      <Input id=\"email\" type=\"email\" placeholder=\"you@example.com\" />\n      <FieldDescription>We will never share your email.</FieldDescription>\n    </FieldContent>\n  </Field>\n);",
-        "description": "Shows a vertical form field with label, input, and helper description text.",
-        "id": "ui-components-field--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithError",
-        "snippet": "const WithError = () => (\n  <Field data-invalid=\"true\">\n    <FieldLabel htmlFor=\"email-err\">Email</FieldLabel>\n    <FieldContent>\n      <Input id=\"email-err\" type=\"email\" defaultValue=\"invalid-email\" aria-invalid=\"true\" />\n      <FieldDescription>Enter a valid email address.</FieldDescription>\n      <FieldError>Please enter a valid email address.</FieldError>\n    </FieldContent>\n  </Field>\n);",
-        "description": "Shows a field in an invalid state with error styling and a validation error message."
-      },
-      {
-        "name": "Horizontal",
-        "snippet": "const Horizontal = () => (\n  <Field orientation=\"horizontal\">\n    <FieldLabel htmlFor=\"name-h\">Full Name</FieldLabel>\n    <FieldContent>\n      <Input id=\"name-h\" placeholder=\"John Doe\" />\n      <FieldDescription>Your first and last name.</FieldDescription>\n    </FieldContent>\n  </Field>\n);",
-        "description": "Shows a field with horizontal orientation where the label and input are side by side.",
-        "id": "ui-components-field--horizontal",
-        "exportName": "Horizontal",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, Input } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A form field wrapper that pairs a label with an input and optional description/error. Supports vertical, horizontal, and responsive orientations. Set data-invalid=\"true\" to apply error styling.",
-    "reactDocgen": {
-      "description": "A form field wrapper that pairs a label with an input and optional description/error.\nSupports vertical, horizontal, and responsive orientations.\nSet data-invalid=\"true\" to apply error styling.",
-      "methods": [],
-      "displayName": "Field",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Field.tsx",
-      "actualName": "Field",
-      "exportName": "Field",
-      "props": {
-        "orientation": {
-          "defaultValue": {
-            "value": "'vertical'",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Field.tsx",
-    "title": "UI Components/Field",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-field--docs",
-      "title": "UI Components/Field",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Field.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-form",
-    "name": "Form",
-    "path": "./src/components/ui/Form.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <FormDemo />;",
-        "description": "Demonstrates a complete form field with label, input, description, and validation message wiring.",
-        "id": "ui-components-form--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import {\n    Button,\n    Form,\n    FormControl,\n    FormDescription,\n    FormField,\n    FormItem,\n    FormLabel,\n    FormMessage,\n    Input,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Form context provider that wraps react-hook-form's FormProvider. Use with FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage for accessible form layouts with validation.",
-    "reactDocgen": {
-      "description": "Form context provider that wraps react-hook-form's FormProvider.\nUse with FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage for accessible form layouts with validation.",
-      "methods": [],
-      "displayName": "Form",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Form.tsx",
-      "actualName": "Form",
-      "exportName": "Form"
-    },
-    "componentPath": "./src/components/ui/Form.tsx",
-    "title": "UI Components/Form",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-form--docs",
-      "title": "UI Components/Form",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Form.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-hovercard",
-    "name": "HoverCard",
-    "path": "./src/components/ui/HoverCard.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <HoverCard>\n    <HoverCardTrigger asChild>\n      <a href=\"#\" className=\"text-sm font-medium underline underline-offset-4\">\n        @nextjs\n      </a>\n    </HoverCardTrigger>\n    <HoverCardContent className=\"w-80\">\n      <div className=\"flex justify-between space-x-4\">\n        <div className=\"space-y-1\">\n          <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n          <p className=\"text-sm\">The React Framework for the Web. Created and maintained by @vercel.</p>\n          <div className=\"flex items-center pt-2\">\n            <CalendarDaysIcon className=\"text-muted-foreground mr-2 h-4 w-4\" />\n            <span className=\"text-muted-foreground text-xs\">Joined December 2021</span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n);",
-        "description": "Shows a user profile preview card triggered by hovering over a username link.",
-        "id": "ui-components-hovercard--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Simple",
-        "snippet": "const Simple = () => (\n  <HoverCard>\n    <HoverCardTrigger asChild>\n      <span className=\"cursor-pointer text-sm font-medium underline underline-offset-4\">Hover me</span>\n    </HoverCardTrigger>\n    <HoverCardContent>\n      <p className=\"text-sm\">This is a simple hover card with some text content.</p>\n    </HoverCardContent>\n  </HoverCard>\n);",
-        "description": "Minimal hover card with just text content.",
-        "id": "ui-components-hovercard--simple",
-        "exportName": "Simple",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { CalendarDaysIcon } from \"lucide-react\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A popup card that appears when hovering over a trigger element. Ideal for previewing content like user profiles or link destinations.",
-    "reactDocgen": {
-      "description": "A popup card that appears when hovering over a trigger element. Ideal for previewing content like user profiles or link destinations.",
-      "methods": [],
-      "displayName": "HoverCard",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/HoverCard.tsx",
-      "actualName": "HoverCard",
-      "exportName": "HoverCard"
-    },
-    "componentPath": "./src/components/ui/HoverCard.tsx",
-    "title": "UI Components/HoverCard",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-hovercard--docs",
-      "title": "UI Components/HoverCard",
-      "name": "Docs",
-      "importPath": "./src/components/ui/HoverCard.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-input",
-    "name": "Input",
-    "path": "./src/components/ui/Input.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Input />;",
-        "description": "Basic empty input field.",
-        "id": "ui-components-input--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithPlaceholder",
-        "snippet": "const WithPlaceholder = () => <Input placeholder=\"Enter your email...\" type=\"email\" />;",
-        "description": "Email input with placeholder text."
-      },
-      {
-        "name": "Disabled",
-        "snippet": "const Disabled = () => <Input placeholder=\"Disabled input\" disabled defaultValue=\"Cannot edit this\" />;",
-        "description": "Disabled input that cannot be edited.",
-        "id": "ui-components-input--disabled",
-        "exportName": "Disabled",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithLabel",
-        "snippet": "const WithLabel = () => (\n  <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label htmlFor=\"email-input\">Email</Label>\n    <Input type=\"email\" id=\"email-input\" placeholder=\"Email\" />\n  </div>\n);",
-        "description": "Input paired with a label for accessibility."
-      }
-    ],
-    "import": "import { Input, Label } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A styled text input field. Supports all native input types including file uploads. Shows validation error styling via aria-invalid.",
-    "reactDocgen": {
-      "description": "A styled text input field. Supports all native input types including file uploads. Shows validation error styling via aria-invalid.",
-      "methods": [],
-      "displayName": "Input",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Input.tsx",
-      "actualName": "Input",
-      "exportName": "Input"
-    },
-    "componentPath": "./src/components/ui/Input.tsx",
-    "title": "UI Components/Input",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-input--docs",
-      "title": "UI Components/Input",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Input.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-inputgroup",
-    "name": "InputGroup",
-    "path": "./src/components/ui/InputGroup.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <InputGroup className=\"max-w-sm\">\n    <InputGroupAddon align=\"inline-start\">\n      <InputGroupText>\n        <MailIcon />\n      </InputGroupText>\n    </InputGroupAddon>\n    <InputGroupInput placeholder=\"you@example.com\" />\n  </InputGroup>\n);",
-        "description": "Input with a leading email icon addon.",
-        "id": "ui-components-inputgroup--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithPrefixAndSuffix",
-        "snippet": "const WithPrefixAndSuffix = () => (\n  <InputGroup className=\"max-w-sm\">\n    <InputGroupAddon align=\"inline-start\">\n      <InputGroupText>https://</InputGroupText>\n    </InputGroupAddon>\n    <InputGroupInput placeholder=\"example.com\" />\n    <InputGroupAddon align=\"inline-end\">\n      <InputGroupText>.com</InputGroupText>\n    </InputGroupAddon>\n  </InputGroup>\n);",
-        "description": "URL input with text addons on both sides."
-      },
-      {
-        "name": "SearchInput",
-        "snippet": "const SearchInput = () => (\n  <InputGroup className=\"max-w-sm\">\n    <InputGroupAddon align=\"inline-start\">\n      <InputGroupText>\n        <SearchIcon />\n      </InputGroupText>\n    </InputGroupAddon>\n    <InputGroupInput placeholder=\"Search...\" />\n  </InputGroup>\n);",
-        "description": "Search input with a magnifying glass icon."
-      }
-    ],
-    "import": "import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from \"react-client\";\nimport { MailIcon, SearchIcon } from \"lucide-react\";",
-    "jsDocTags": {},
-    "description": "Container that combines an input with addons like icons, buttons, or text. Supports inline and block-positioned addons.",
-    "reactDocgen": {
-      "description": "Container that combines an input with addons like icons, buttons, or text. Supports inline and block-positioned addons.",
-      "methods": [],
-      "displayName": "InputGroup",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/InputGroup.tsx",
-      "actualName": "InputGroup",
-      "exportName": "InputGroup"
-    },
-    "componentPath": "./src/components/ui/InputGroup.tsx",
-    "title": "UI Components/InputGroup",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-inputgroup--docs",
-      "title": "UI Components/InputGroup",
-      "name": "Docs",
-      "importPath": "./src/components/ui/InputGroup.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-inputotp",
-    "name": "InputOTP",
-    "path": "./src/components/ui/InputOTP.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <InputOTP maxLength={6}>\n    <InputOTPGroup>\n      <InputOTPSlot index={0} />\n      <InputOTPSlot index={1} />\n      <InputOTPSlot index={2} />\n    </InputOTPGroup>\n    <InputOTPSeparator />\n    <InputOTPGroup>\n      <InputOTPSlot index={3} />\n      <InputOTPSlot index={4} />\n      <InputOTPSlot index={5} />\n    </InputOTPGroup>\n  </InputOTP>\n);",
-        "description": "6-digit OTP input split into two groups of three with a separator.",
-        "id": "ui-components-inputotp--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "FourDigits",
-        "snippet": "const FourDigits = () => (\n  <InputOTP maxLength={4}>\n    <InputOTPGroup>\n      <InputOTPSlot index={0} />\n      <InputOTPSlot index={1} />\n      <InputOTPSlot index={2} />\n      <InputOTPSlot index={3} />\n    </InputOTPGroup>\n  </InputOTP>\n);",
-        "description": "Compact 4-digit PIN input without separator."
-      }
-    ],
-    "import": "import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "One-time password input with individual digit slots. Handles paste, backspace, and arrow key navigation automatically.",
-    "reactDocgen": {
-      "description": "One-time password input with individual digit slots. Handles paste, backspace, and arrow key navigation automatically.",
-      "methods": [],
-      "displayName": "InputOTP",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/InputOTP.tsx",
-      "actualName": "InputOTP",
-      "exportName": "InputOTP",
-      "props": {
-        "containerClassName": {
-          "required": false,
-          "tsType": {
-            "name": "string"
-          },
-          "description": ""
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/InputOTP.tsx",
-    "title": "UI Components/InputOTP",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-inputotp--docs",
-      "title": "UI Components/InputOTP",
-      "name": "Docs",
-      "importPath": "./src/components/ui/InputOTP.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-item",
-    "name": "Item",
-    "path": "./src/components/ui/Item.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Item>\n    <ItemContent>\n      <ItemTitle>Item Title</ItemTitle>\n      <ItemDescription>This is a description of the item with some details.</ItemDescription>\n    </ItemContent>\n    <ItemActions>\n      <Button variant=\"outline\" size=\"sm\">\n        Edit\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\">\n        Delete\n      </Button>\n    </ItemActions>\n  </Item>\n);",
-        "description": "Standard item with title, description, and action buttons.",
-        "id": "ui-components-item--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "OutlineVariant",
-        "snippet": "const OutlineVariant = () => (\n  <Item variant=\"outline\">\n    <ItemContent>\n      <ItemTitle>Outline Item</ItemTitle>\n      <ItemDescription>An item displayed with the outline variant and a visible border.</ItemDescription>\n    </ItemContent>\n    <ItemActions>\n      <Button variant=\"outline\" size=\"sm\">\n        View\n      </Button>\n    </ItemActions>\n  </Item>\n);",
-        "description": "Item with visible border using the outline variant."
-      },
-      {
-        "name": "SmallSize",
-        "snippet": "const SmallSize = () => (\n  <Item size=\"sm\">\n    <ItemContent>\n      <ItemTitle>Small Item</ItemTitle>\n      <ItemDescription>Compact item with reduced padding.</ItemDescription>\n    </ItemContent>\n    <ItemActions>\n      <Button variant=\"ghost\" size=\"sm\">\n        Action\n      </Button>\n    </ItemActions>\n  </Item>\n);",
-        "description": "Compact item with reduced padding for dense lists."
-      }
-    ],
-    "import": "import { Button, Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A flexible list item for displaying structured content like notifications, settings rows, or search results. Compose with ItemMedia, ItemContent, ItemTitle, ItemDescription, and ItemActions.",
-    "reactDocgen": {
-      "description": "A flexible list item for displaying structured content like notifications, settings rows, or search results. Compose with ItemMedia, ItemContent, ItemTitle, ItemDescription, and ItemActions.",
-      "methods": [],
-      "displayName": "Item",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Item.tsx",
-      "actualName": "Item",
-      "exportName": "Item",
-      "props": {
-        "asChild": {
-          "required": false,
-          "tsType": {
-            "name": "boolean"
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "false",
-            "computed": false
-          }
-        },
-        "variant": {
-          "defaultValue": {
-            "value": "'default'",
-            "computed": false
-          },
-          "required": false
-        },
-        "size": {
-          "defaultValue": {
-            "value": "'default'",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Item.tsx",
-    "title": "UI Components/Item",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-item--docs",
-      "title": "UI Components/Item",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Item.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-kbd",
-    "name": "Kbd",
-    "path": "./src/components/ui/Kbd.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Kbd>⌘K</Kbd>;",
-        "description": "Shows a single keyboard key shortcut.",
-        "id": "ui-components-kbd--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithText",
-        "snippet": "const WithText = () => <Kbd>Ctrl</Kbd>;",
-        "description": "Shows a key with a text label like \"Ctrl\"."
-      },
-      {
-        "name": "ArrowKeys",
-        "snippet": "const ArrowKeys = () => <Kbd>→</Kbd>;",
-        "description": "Shows a key with an arrow symbol."
-      },
-      {
-        "name": "Multiple",
-        "snippet": "const Multiple = () => (\n  <div className=\"flex gap-2 items-center\">\n    <Kbd>⌘</Kbd>\n    <span>+</span>\n    <Kbd>K</Kbd>\n  </div>\n);",
-        "description": "Shows two keys composed together to represent a shortcut combination.",
-        "id": "ui-components-kbd--multiple",
-        "exportName": "Multiple",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Combination",
-        "snippet": "const Combination = () => (\n  <div className=\"flex gap-2 items-center\">\n    <Kbd>Ctrl</Kbd>\n    <span>+</span>\n    <Kbd>Shift</Kbd>\n    <span>+</span>\n    <Kbd>P</Kbd>\n  </div>\n);",
-        "description": "Shows a three-key combination shortcut.",
-        "id": "ui-components-kbd--combination",
-        "exportName": "Combination",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Kbd } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Renders inline keyboard key indicators, styled to look like physical keys. Use to display keyboard shortcuts or key combinations in documentation and UI hints.",
-    "reactDocgen": {
-      "description": "Renders inline keyboard key indicators, styled to look like physical keys.\nUse to display keyboard shortcuts or key combinations in documentation and UI hints.",
-      "methods": [],
-      "displayName": "Kbd",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Kbd.tsx",
-      "actualName": "Kbd",
-      "exportName": "Kbd",
-      "props": {
-        "children": {
-          "required": true,
-          "tsType": {
-            "name": "ReactReactNode",
-            "raw": "React.ReactNode"
-          },
-          "description": ""
-        },
-        "className": {
-          "required": false,
-          "tsType": {
-            "name": "string"
-          },
-          "description": ""
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Kbd.tsx",
-    "title": "UI Components/Kbd",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-kbd--docs",
-      "title": "UI Components/Kbd",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Kbd.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-label",
-    "name": "Label",
-    "path": "./src/components/ui/Label.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Label htmlFor=\"email\">Email address</Label>;",
-        "description": "Shows a basic label associated with a form field.",
-        "id": "ui-components-label--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Required",
-        "snippet": "const Required = () => <Label htmlFor=\"email\" required>Email address</Label>;",
-        "description": "Shows the label with the required prop, which appends a red asterisk.",
-        "id": "ui-components-label--required",
-        "exportName": "Required",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "RequiredVariant",
-        "snippet": "const RequiredVariant = () => <Label htmlFor=\"email\" variant=\"required\">Email address</Label>;",
-        "description": "Shows the label using the \"required\" variant prop directly."
-      },
-      {
-        "name": "WithForm",
-        "snippet": "const WithForm = (args) => (\n  <div className=\"space-y-2\">\n    <Label htmlFor=\"example-input\" required>\n      Example Field\n    </Label>\n    <input\n      id=\"example-input\"\n      type=\"text\"\n      className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 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\"\n      placeholder=\"Enter value...\"\n    />\n  </div>\n);",
-        "description": "Shows the label paired with a text input in a form layout."
-      },
-      {
-        "name": "DisabledField",
-        "snippet": "const DisabledField = (args) => (\n  <div className=\"space-y-2\">\n    <Label htmlFor=\"disabled-input\" required>\n      Disabled Field\n    </Label>\n    <input\n      id=\"disabled-input\"\n      type=\"text\"\n      disabled\n      className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 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\"\n      placeholder=\"Disabled input...\"\n    />\n  </div>\n);",
-        "description": "Demonstrates the dimmed appearance when the associated input is disabled."
-      }
-    ],
-    "import": "import { Label } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "An accessible label associated with a form control via the htmlFor prop. Supports a \"required\" variant that appends a red asterisk, and automatically dims when its peer input is disabled.",
-    "reactDocgen": {
-      "description": "An accessible label associated with a form control via the htmlFor prop.\nSupports a \"required\" variant that appends a red asterisk, and automatically dims when its peer input is disabled.",
-      "methods": [],
-      "displayName": "Label",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Label.tsx",
-      "actualName": "Label",
-      "exportName": "Label",
-      "props": {
-        "htmlFor": {
-          "required": false,
-          "tsType": {
-            "name": "string"
-          },
-          "description": ""
-        },
-        "required": {
-          "required": false,
-          "tsType": {
-            "name": "boolean"
-          },
-          "description": ""
-        },
-        "children": {
-          "required": false,
-          "tsType": {
-            "name": "ReactReactNode",
-            "raw": "React.ReactNode"
-          },
-          "description": ""
-        }
-      },
-      "composes": [
-        "VariantProps"
-      ]
-    },
-    "componentPath": "./src/components/ui/Label.tsx",
-    "title": "UI Components/Label",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-label--docs",
-      "title": "UI Components/Label",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Label.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-menubar",
-    "name": "Menubar",
-    "path": "./src/components/ui/Menubar.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem>\n          Save <MenubarShortcut>Ctrl+S</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem>Exit</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n);",
-        "description": "Shows a menubar with File and Edit menus containing items and keyboard shortcuts.",
-        "id": "ui-components-menubar--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithLabels",
-        "snippet": "const WithLabels = () => (\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarLabel>Appearance</MenubarLabel>\n        <MenubarItem>Zoom In</MenubarItem>\n        <MenubarItem>Zoom Out</MenubarItem>\n        <MenubarSeparator />\n        <MenubarLabel>Layout</MenubarLabel>\n        <MenubarItem>Full Screen</MenubarItem>\n        <MenubarItem>Side by Side</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n);",
-        "description": "Demonstrates menu sections organized with labels to group related items."
-      }
-    ],
-    "import": "import {\n    Menubar,\n    MenubarContent,\n    MenubarItem,\n    MenubarLabel,\n    MenubarMenu,\n    MenubarSeparator,\n    MenubarShortcut,\n    MenubarTrigger,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A horizontal menu bar for desktop applications, built on Radix UI Menubar primitive. Compose with MenubarMenu, MenubarTrigger, and MenubarContent to create top-level menu groups with keyboard navigation.",
-    "reactDocgen": {
-      "description": "A horizontal menu bar for desktop applications, built on Radix UI Menubar primitive.\nCompose with MenubarMenu, MenubarTrigger, and MenubarContent to create top-level menu groups with keyboard navigation.",
-      "methods": [],
-      "displayName": "Menubar",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Menubar.tsx",
-      "actualName": "Menubar",
-      "exportName": "Menubar"
-    },
-    "componentPath": "./src/components/ui/Menubar.tsx",
-    "title": "UI Components/Menubar",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-menubar--docs",
-      "title": "UI Components/Menubar",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Menubar.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-nativeselect",
-    "name": "NativeSelect",
-    "path": "./src/components/ui/NativeSelect.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <NativeSelect defaultValue=\"react\">\n    <NativeSelectOption value=\"react\">React</NativeSelectOption>\n    <NativeSelectOption value=\"vue\">Vue</NativeSelectOption>\n    <NativeSelectOption value=\"angular\">Angular</NativeSelectOption>\n    <NativeSelectOption value=\"svelte\">Svelte</NativeSelectOption>\n  </NativeSelect>\n);",
-        "description": "Shows a native select with pre-selected value and several options.",
-        "id": "ui-components-nativeselect--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Small",
-        "snippet": "const Small = () => (\n  <NativeSelect size=\"sm\" defaultValue=\"\">\n    <NativeSelectOption value=\"\" disabled>\n      Select a fruit...\n    </NativeSelectOption>\n    <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n    <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n    <NativeSelectOption value=\"cherry\">Cherry</NativeSelectOption>\n  </NativeSelect>\n);",
-        "description": "Shows the compact size variant with a disabled placeholder option.",
-        "id": "ui-components-nativeselect--small",
-        "exportName": "Small",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Disabled",
-        "snippet": "const Disabled = () => (\n  <NativeSelect disabled defaultValue=\"react\">\n    <NativeSelectOption value=\"react\">React</NativeSelectOption>\n    <NativeSelectOption value=\"vue\">Vue</NativeSelectOption>\n  </NativeSelect>\n);",
-        "description": "Shows the select in a disabled state.",
-        "id": "ui-components-nativeselect--disabled",
-        "exportName": "Disabled",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { NativeSelect, NativeSelectOption } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A styled wrapper around the browser's native <select> element. Use instead of the custom Select component when native mobile pickers or simpler accessibility is preferred.",
-    "reactDocgen": {
-      "description": "A styled wrapper around the browser's native <select> element.\nUse instead of the custom Select component when native mobile pickers or simpler accessibility is preferred.",
-      "methods": [],
-      "displayName": "NativeSelect",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/NativeSelect.tsx",
-      "actualName": "NativeSelect",
-      "exportName": "NativeSelect",
-      "props": {
-        "size": {
-          "required": false,
-          "tsType": {
-            "name": "union",
-            "raw": "'sm' | 'default'",
-            "elements": [
-              {
-                "name": "literal",
-                "value": "'sm'"
-              },
-              {
-                "name": "literal",
-                "value": "'default'"
-              }
-            ]
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "'default'",
-            "computed": false
-          }
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/NativeSelect.tsx",
-    "title": "UI Components/NativeSelect",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-nativeselect--docs",
-      "title": "UI Components/NativeSelect",
-      "name": "Docs",
-      "importPath": "./src/components/ui/NativeSelect.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-navigationmenu",
-    "name": "NavigationMenu",
-    "path": "./src/components/ui/NavigationMenu.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <div className=\"grid w-[400px] gap-3 p-4\">\n            <NavigationMenuLink href=\"#\">\n              <div className=\"font-medium\">Introduction</div>\n              <p className=\"text-muted-foreground text-sm\">Learn the basics and get up and running quickly.</p>\n            </NavigationMenuLink>\n            <NavigationMenuLink href=\"#\">\n              <div className=\"font-medium\">Installation</div>\n              <p className=\"text-muted-foreground text-sm\">Step-by-step guide to installing dependencies.</p>\n            </NavigationMenuLink>\n          </div>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <div className=\"grid w-[400px] gap-3 p-4\">\n            <NavigationMenuLink href=\"#\">\n              <div className=\"font-medium\">Button</div>\n              <p className=\"text-muted-foreground text-sm\">\n                Displays a button or a component that looks like a button.\n              </p>\n            </NavigationMenuLink>\n            <NavigationMenuLink href=\"#\">\n              <div className=\"font-medium\">Dialog</div>\n              <p className=\"text-muted-foreground text-sm\">A modal dialog that interrupts the user.</p>\n            </NavigationMenuLink>\n          </div>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"#\">Documentation</NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n);",
-        "description": "Shows a navigation menu with dropdown content panels and a direct link item.",
-        "id": "ui-components-navigationmenu--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "SimpleLinks",
-        "snippet": "const SimpleLinks = () => (\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"#\">Home</NavigationMenuLink>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"#\">About</NavigationMenuLink>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"#\">Contact</NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n);",
-        "description": "Shows a flat navigation menu with simple link items and no dropdowns."
-      }
-    ],
-    "import": "import {\n    NavigationMenu,\n    NavigationMenuContent,\n    NavigationMenuItem,\n    NavigationMenuLink,\n    NavigationMenuList,\n    NavigationMenuTrigger,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A site-wide navigation component with dropdown content panels, built on Radix UI NavigationMenu primitive. Compose with NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, and NavigationMenuContent for rich mega-menu layouts.",
-    "reactDocgen": {
-      "description": "A site-wide navigation component with dropdown content panels, built on Radix UI NavigationMenu primitive.\nCompose with NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, and NavigationMenuContent for rich mega-menu layouts.",
-      "methods": [],
-      "displayName": "NavigationMenu",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/NavigationMenu.tsx",
-      "actualName": "NavigationMenu",
-      "exportName": "NavigationMenu",
-      "props": {
-        "viewport": {
-          "required": false,
-          "tsType": {
-            "name": "boolean"
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "true",
-            "computed": false
-          }
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/NavigationMenu.tsx",
-    "title": "UI Components/NavigationMenu",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-navigationmenu--docs",
-      "title": "UI Components/NavigationMenu",
-      "name": "Docs",
-      "importPath": "./src/components/ui/NavigationMenu.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-pagination",
-    "name": "Pagination",
-    "path": "./src/components/ui/Pagination.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Pagination>\n    <PaginationContent>\n      <PaginationItem>\n        <PaginationPrevious href=\"#\" />\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationLink href=\"#\">1</PaginationLink>\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationLink href=\"#\" isActive>\n          2\n        </PaginationLink>\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationLink href=\"#\">3</PaginationLink>\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationEllipsis />\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationLink href=\"#\">10</PaginationLink>\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationNext href=\"#\" />\n      </PaginationItem>\n    </PaginationContent>\n  </Pagination>\n);",
-        "description": "Shows a full pagination bar with previous/next, numbered links, and an ellipsis.",
-        "id": "ui-components-pagination--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "FewPages",
-        "snippet": "const FewPages = () => (\n  <Pagination>\n    <PaginationContent>\n      <PaginationItem>\n        <PaginationPrevious href=\"#\" />\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationLink href=\"#\" isActive>\n          1\n        </PaginationLink>\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationLink href=\"#\">2</PaginationLink>\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationLink href=\"#\">3</PaginationLink>\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationNext href=\"#\" />\n      </PaginationItem>\n    </PaginationContent>\n  </Pagination>\n);",
-        "description": "Shows a compact pagination for a small number of pages without ellipsis."
-      }
-    ],
-    "import": "import {\n    Pagination,\n    PaginationContent,\n    PaginationEllipsis,\n    PaginationItem,\n    PaginationLink,\n    PaginationNext,\n    PaginationPrevious,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A navigation component for paginated content, rendered as a semantic nav element. Compose with PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis.",
-    "reactDocgen": {
-      "description": "A navigation component for paginated content, rendered as a semantic nav element.\nCompose with PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis.",
-      "methods": [],
-      "displayName": "Pagination",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Pagination.tsx",
-      "actualName": "Pagination",
-      "exportName": "Pagination"
-    },
-    "componentPath": "./src/components/ui/Pagination.tsx",
-    "title": "UI Components/Pagination",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-pagination--docs",
-      "title": "UI Components/Pagination",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Pagination.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-popover",
-    "name": "Popover",
-    "path": "./src/components/ui/Popover.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button variant=\"outline\">Open Popover</Button>\n    </PopoverTrigger>\n    <PopoverContent>\n      <div className=\"grid gap-4\">\n        <div className=\"space-y-2\">\n          <h4 className=\"font-medium leading-none\">Dimensions</h4>\n          <p className=\"text-muted-foreground text-sm\">Set the dimensions for the layer.</p>\n        </div>\n        <div className=\"grid gap-2\">\n          <div className=\"grid grid-cols-3 items-center gap-4\">\n            <span className=\"text-sm\">Width</span>\n            <input className=\"border-input col-span-2 h-8 rounded-md border px-3 text-sm\" defaultValue=\"100%\" />\n          </div>\n          <div className=\"grid grid-cols-3 items-center gap-4\">\n            <span className=\"text-sm\">Height</span>\n            <input className=\"border-input col-span-2 h-8 rounded-md border px-3 text-sm\" defaultValue=\"25px\" />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n);",
-        "description": "Shows a popover with form inputs for setting dimensions.",
-        "id": "ui-components-popover--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "SimpleText",
-        "snippet": "const SimpleText = () => (\n  <Popover>\n    <PopoverTrigger asChild>\n      <Button variant=\"outline\">Info</Button>\n    </PopoverTrigger>\n    <PopoverContent className=\"w-60\">\n      <p className=\"text-sm\">This is a simple popover with some informational text content.</p>\n    </PopoverContent>\n  </Popover>\n);",
-        "description": "Shows a popover with simple informational text content."
-      }
-    ],
-    "import": "import { Button, Popover, PopoverContent, PopoverTrigger } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A floating panel anchored to a trigger for rich content on click.",
-    "reactDocgen": {
-      "description": "A floating panel anchored to a trigger for rich content on click.",
-      "methods": [],
-      "displayName": "Popover",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Popover.tsx",
-      "actualName": "Popover",
-      "exportName": "Popover"
-    },
-    "componentPath": "./src/components/ui/Popover.tsx",
-    "title": "UI Components/Popover",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-popover--docs",
-      "title": "UI Components/Popover",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Popover.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-progress",
-    "name": "Progress",
-    "path": "./src/components/ui/Progress.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Progress value={50} className=\"w-[60%]\" />;",
-        "description": "Shows the progress bar at 50% with an adjustable value control.",
-        "id": "ui-components-progress--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Empty",
-        "snippet": "const Empty = () => <Progress value={0} className=\"w-[60%]\" />;",
-        "description": "Shows the progress bar at 0% (empty state).",
-        "id": "ui-components-progress--empty",
-        "exportName": "Empty",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Half",
-        "snippet": "const Half = () => <Progress value={50} className=\"w-[60%]\" />;",
-        "description": "Shows the progress bar at 50%.",
-        "id": "ui-components-progress--half",
-        "exportName": "Half",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Full",
-        "snippet": "const Full = () => <Progress value={100} className=\"w-[60%]\" />;",
-        "description": "Shows the progress bar at 100% (complete state).",
-        "id": "ui-components-progress--full",
-        "exportName": "Full",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Progress } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A horizontal progress bar. Set `value` (0-100) to control fill level.",
-    "reactDocgen": {
-      "description": "A horizontal progress bar. Set `value` (0-100) to control fill level.",
-      "methods": [],
-      "displayName": "Progress",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Progress.tsx",
-      "actualName": "Progress",
-      "exportName": "Progress"
-    },
-    "componentPath": "./src/components/ui/Progress.tsx",
-    "title": "UI Components/Progress",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-progress--docs",
-      "title": "UI Components/Progress",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Progress.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-radiogroup",
-    "name": "RadioGroup",
-    "path": "./src/components/ui/RadioGroup.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <RadioGroup defaultValue=\"comfortable\">\n    <div className=\"flex items-center space-x-2\">\n      <RadioGroupItem value=\"default\" id=\"r1\" />\n      <Label htmlFor=\"r1\">Default</Label>\n    </div>\n    <div className=\"flex items-center space-x-2\">\n      <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n      <Label htmlFor=\"r2\">Comfortable</Label>\n    </div>\n    <div className=\"flex items-center space-x-2\">\n      <RadioGroupItem value=\"compact\" id=\"r3\" />\n      <Label htmlFor=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n);",
-        "description": "Shows a vertical radio group with three options and a pre-selected value.",
-        "id": "ui-components-radiogroup--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Horizontal",
-        "snippet": "const Horizontal = () => (\n  <RadioGroup defaultValue=\"medium\" className=\"flex flex-row gap-4\">\n    <div className=\"flex items-center space-x-2\">\n      <RadioGroupItem value=\"small\" id=\"h1\" />\n      <Label htmlFor=\"h1\">Small</Label>\n    </div>\n    <div className=\"flex items-center space-x-2\">\n      <RadioGroupItem value=\"medium\" id=\"h2\" />\n      <Label htmlFor=\"h2\">Medium</Label>\n    </div>\n    <div className=\"flex items-center space-x-2\">\n      <RadioGroupItem value=\"large\" id=\"h3\" />\n      <Label htmlFor=\"h3\">Large</Label>\n    </div>\n  </RadioGroup>\n);",
-        "description": "Shows a horizontally laid out radio group.",
-        "id": "ui-components-radiogroup--horizontal",
-        "exportName": "Horizontal",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Label, RadioGroup, RadioGroupItem } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A set of mutually exclusive radio options built on Radix UI RadioGroup primitive. Compose with RadioGroupItem and Label to create accessible radio button groups.",
-    "reactDocgen": {
-      "description": "A set of mutually exclusive radio options built on Radix UI RadioGroup primitive.\nCompose with RadioGroupItem and Label to create accessible radio button groups.",
-      "methods": [],
-      "displayName": "RadioGroup",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/RadioGroup.tsx",
-      "actualName": "RadioGroup",
-      "exportName": "RadioGroup"
-    },
-    "componentPath": "./src/components/ui/RadioGroup.tsx",
-    "title": "UI Components/RadioGroup",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-radiogroup--docs",
-      "title": "UI Components/RadioGroup",
-      "name": "Docs",
-      "importPath": "./src/components/ui/RadioGroup.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-resizable",
-    "name": "ResizablePanelGroup",
-    "path": "./src/components/ui/Resizable.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <ResizablePanelGroup orientation=\"horizontal\" className=\"min-h-[200px] max-w-md rounded-lg border\">\n    <ResizablePanel defaultSize={50}>\n      <div className=\"flex h-full items-center justify-center p-6\">\n        <span className=\"font-semibold\">Panel One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle />\n    <ResizablePanel defaultSize={50}>\n      <div className=\"flex h-full items-center justify-center p-6\">\n        <span className=\"font-semibold\">Panel Two</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n);",
-        "description": "Shows two resizable panels split equally with a minimal divider.",
-        "id": "ui-components-resizable--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithHandle",
-        "snippet": "const WithHandle = () => (\n  <ResizablePanelGroup orientation=\"horizontal\" className=\"min-h-[200px] max-w-md rounded-lg border\">\n    <ResizablePanel defaultSize={30}>\n      <div className=\"flex h-full items-center justify-center p-6\">\n        <span className=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle withHandle />\n    <ResizablePanel defaultSize={70}>\n      <div className=\"flex h-full items-center justify-center p-6\">\n        <span className=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n);",
-        "description": "Shows two panels with a visible grip handle on the divider."
-      },
-      {
-        "name": "ThreePanels",
-        "snippet": "const ThreePanels = () => (\n  <ResizablePanelGroup orientation=\"horizontal\" className=\"min-h-[200px] max-w-lg rounded-lg border\">\n    <ResizablePanel defaultSize={25}>\n      <div className=\"flex h-full items-center justify-center p-6\">\n        <span className=\"font-semibold\">Left</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle withHandle />\n    <ResizablePanel defaultSize={50}>\n      <div className=\"flex h-full items-center justify-center p-6\">\n        <span className=\"font-semibold\">Center</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle withHandle />\n    <ResizablePanel defaultSize={25}>\n      <div className=\"flex h-full items-center justify-center p-6\">\n        <span className=\"font-semibold\">Right</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n);",
-        "description": "Shows three resizable panels with grip handles between them."
-      }
-    ],
-    "import": "import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A container for resizable panels that can be dragged to adjust their sizes. Built on react-resizable-panels. Compose with ResizablePanel and ResizableHandle.",
-    "reactDocgen": {
-      "description": "A container for resizable panels that can be dragged to adjust their sizes.\nBuilt on react-resizable-panels. Compose with ResizablePanel and ResizableHandle.",
-      "methods": [],
-      "displayName": "ResizablePanelGroup",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Resizable.tsx",
-      "actualName": "ResizablePanelGroup",
-      "exportName": "ResizablePanelGroup"
-    },
-    "componentPath": "./src/components/ui/Resizable.tsx",
-    "title": "UI Components/Resizable",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-resizable--docs",
-      "title": "UI Components/Resizable",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Resizable.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-scrollarea",
-    "name": "ScrollArea",
-    "path": "./src/components/ui/ScrollArea.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <ScrollArea className=\"h-72 w-48 rounded-md border\">\n    <div className=\"p-4\">\n      <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n      {tags.map((tag) => (\n        <div key={tag}>\n          <div className=\"text-sm\">{tag}</div>\n          <Separator className=\"my-2\" />\n        </div>\n      ))}\n    </div>\n  </ScrollArea>\n);",
-        "description": "Shows a vertical scroll area with a long list of items.",
-        "id": "ui-components-scrollarea--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Horizontal",
-        "snippet": "const Horizontal = () => (\n  <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n    <div className=\"flex w-max space-x-4 p-4\">\n      {Array.from({ length: 20 }, (_, i) => (\n        <div key={i} className=\"bg-muted flex h-24 w-36 shrink-0 items-center justify-center rounded-md\">\n          <span className=\"text-sm font-medium\">Card {i + 1}</span>\n        </div>\n      ))}\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n);",
-        "description": "Shows a horizontal scroll area with a row of cards.",
-        "id": "ui-components-scrollarea--horizontal",
-        "exportName": "Horizontal",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { ScrollArea, ScrollBar, Separator } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A custom scrollable container with styled scrollbars, built on Radix UI ScrollArea primitive. Replaces native browser scrollbars with consistent cross-platform styled scrollbars.",
-    "reactDocgen": {
-      "description": "A custom scrollable container with styled scrollbars, built on Radix UI ScrollArea primitive.\nReplaces native browser scrollbars with consistent cross-platform styled scrollbars.",
-      "methods": [],
-      "displayName": "ScrollArea",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/ScrollArea.tsx",
-      "actualName": "ScrollArea",
-      "exportName": "ScrollArea"
-    },
-    "componentPath": "./src/components/ui/ScrollArea.tsx",
-    "title": "UI Components/ScrollArea",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-scrollarea--docs",
-      "title": "UI Components/ScrollArea",
-      "name": "Docs",
-      "importPath": "./src/components/ui/ScrollArea.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-select",
-    "name": "Select",
-    "path": "./src/components/ui/Select.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Select>\n    <SelectTrigger className=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectItem value=\"apple\">Apple</SelectItem>\n      <SelectItem value=\"banana\">Banana</SelectItem>\n      <SelectItem value=\"cherry\">Cherry</SelectItem>\n      <SelectItem value=\"grape\">Grape</SelectItem>\n      <SelectItem value=\"orange\">Orange</SelectItem>\n    </SelectContent>\n  </Select>\n);",
-        "description": "Shows a basic select with a list of fruit options.",
-        "id": "ui-components-select--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Grouped",
-        "snippet": "const Grouped = () => (\n  <Select>\n    <SelectTrigger className=\"w-[220px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n        <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n        <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe</SelectLabel>\n        <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n        <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n);",
-        "description": "Shows options organized into labeled groups for categorized selection.",
-        "id": "ui-components-select--grouped",
-        "exportName": "Grouped",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import {\n    Select,\n    SelectContent,\n    SelectGroup,\n    SelectItem,\n    SelectLabel,\n    SelectTrigger,\n    SelectValue,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A custom dropdown select menu built on Radix UI Select primitive. Compose with SelectTrigger, SelectValue, SelectContent, and SelectItem for a fully accessible select experience.",
-    "reactDocgen": {
-      "description": "A custom dropdown select menu built on Radix UI Select primitive.\nCompose with SelectTrigger, SelectValue, SelectContent, and SelectItem for a fully accessible select experience.",
-      "methods": [],
-      "displayName": "Select",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Select.tsx",
-      "actualName": "Select",
-      "exportName": "Select"
-    },
-    "componentPath": "./src/components/ui/Select.tsx",
-    "title": "UI Components/Select",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-select--docs",
-      "title": "UI Components/Select",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Select.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-separator",
-    "name": "Separator",
-    "path": "./src/components/ui/Separator.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <div>\n    <div className=\"space-y-1\">\n      <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n      <p className=\"text-muted-foreground text-sm\">An open-source UI component library.</p>\n    </div>\n    <Separator className=\"my-4\" />\n    <div className=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n);",
-        "description": "Shows both horizontal and vertical separators dividing content sections.",
-        "id": "ui-components-separator--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Vertical",
-        "snippet": "const Vertical = () => (\n  <div className=\"flex h-12 items-center space-x-4 text-sm\">\n    <div>First</div>\n    <Separator orientation=\"vertical\" />\n    <div>Second</div>\n    <Separator orientation=\"vertical\" />\n    <div>Third</div>\n  </div>\n);",
-        "description": "Shows vertical separators between inline text items.",
-        "id": "ui-components-separator--vertical",
-        "exportName": "Vertical",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Separator } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A visual divider between content sections. Renders as horizontal or vertical line. Decorative by default (hidden from screen readers).",
-    "reactDocgen": {
-      "description": "A visual divider between content sections. Renders as horizontal or vertical line. Decorative by default (hidden from screen readers).",
-      "methods": [],
-      "displayName": "Separator",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Separator.tsx",
-      "actualName": "Separator",
-      "exportName": "Separator",
-      "props": {
-        "orientation": {
-          "defaultValue": {
-            "value": "'horizontal'",
-            "computed": false
-          },
-          "required": false
-        },
-        "decorative": {
-          "defaultValue": {
-            "value": "true",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Separator.tsx",
-    "title": "UI Components/Separator",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-separator--docs",
-      "title": "UI Components/Separator",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Separator.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-sheet",
-    "name": "Sheet",
-    "path": "./src/components/ui/Sheet.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Sheet>\n    <SheetTrigger asChild>\n      <Button variant=\"outline\">Open Sheet</Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit Profile</SheetTitle>\n        <SheetDescription>Make changes to your profile here. Click save when you are done.</SheetDescription>\n      </SheetHeader>\n      <div className=\"grid gap-4 px-4 py-4\">\n        <div className=\"grid grid-cols-4 items-center gap-4\">\n          <span className=\"text-right text-sm\">Name</span>\n          <input className=\"border-input col-span-3 h-9 rounded-md border px-3 text-sm\" defaultValue=\"John Doe\" />\n        </div>\n        <div className=\"grid grid-cols-4 items-center gap-4\">\n          <span className=\"text-right text-sm\">Username</span>\n          <input className=\"border-input col-span-3 h-9 rounded-md border px-3 text-sm\" defaultValue=\"@johndoe\" />\n        </div>\n      </div>\n    </SheetContent>\n  </Sheet>\n);",
-        "description": "Shows a sheet sliding in from the right with a profile editing form.",
-        "id": "ui-components-sheet--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "LeftSide",
-        "snippet": "const LeftSide = () => (\n  <Sheet>\n    <SheetTrigger asChild>\n      <Button variant=\"outline\">Open Left Sheet</Button>\n    </SheetTrigger>\n    <SheetContent side=\"left\">\n      <SheetHeader>\n        <SheetTitle>Navigation</SheetTitle>\n        <SheetDescription>Browse through the application.</SheetDescription>\n      </SheetHeader>\n      <nav className=\"grid gap-2 px-4 py-4\">\n        <a href=\"#\" className=\"text-sm hover:underline\">\n          Home\n        </a>\n        <a href=\"#\" className=\"text-sm hover:underline\">\n          About\n        </a>\n        <a href=\"#\" className=\"text-sm hover:underline\">\n          Settings\n        </a>\n        <a href=\"#\" className=\"text-sm hover:underline\">\n          Help\n        </a>\n      </nav>\n    </SheetContent>\n  </Sheet>\n);",
-        "description": "Shows a sheet sliding in from the left with navigation links."
-      }
-    ],
-    "import": "import {\n    Button,\n    Sheet,\n    SheetContent,\n    SheetDescription,\n    SheetHeader,\n    SheetTitle,\n    SheetTrigger,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A panel that slides in from an edge of the screen, built on Radix UI Dialog primitive. Use for secondary content like navigation, filters, or forms that don't warrant a full page. Compose with SheetTrigger, SheetContent, SheetHeader, SheetTitle, and SheetDescription.",
-    "reactDocgen": {
-      "description": "A panel that slides in from an edge of the screen, built on Radix UI Dialog primitive.\nUse for secondary content like navigation, filters, or forms that don't warrant a full page.\nCompose with SheetTrigger, SheetContent, SheetHeader, SheetTitle, and SheetDescription.",
-      "methods": [],
-      "displayName": "Sheet",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Sheet.tsx",
-      "actualName": "Sheet",
-      "exportName": "Sheet"
-    },
-    "componentPath": "./src/components/ui/Sheet.tsx",
-    "title": "UI Components/Sheet",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-sheet--docs",
-      "title": "UI Components/Sheet",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Sheet.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-sidebar",
-    "name": "Sidebar",
-    "path": "./src/components/ui/Sidebar.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <span className=\"px-2 text-lg font-semibold\">My App</span>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n          <SidebarMenu>\n            {menuItems.map((item) => (\n              <SidebarMenuItem key={item.label}>\n                <SidebarMenuButton>\n                  <item.icon />\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <span className=\"px-2 text-xs text-muted-foreground\">v1.0.0</span>\n      </SidebarFooter>\n    </Sidebar>\n    <main className=\"flex-1 p-4\">\n      <SidebarTrigger />\n      <p className=\"mt-4 text-sm text-muted-foreground\">Main content area</p>\n    </main>\n  </SidebarProvider>\n);",
-        "description": "Shows a complete sidebar with header, navigation group, footer, and a toggle trigger in the main area.",
-        "id": "ui-components-sidebar--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithActiveItem",
-        "snippet": "const WithActiveItem = () => (\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <span className=\"px-2 text-lg font-semibold\">My App</span>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n          <SidebarMenu>\n            {menuItems.map((item, index) => (\n              <SidebarMenuItem key={item.label}>\n                <SidebarMenuButton isActive={index === 0}>\n                  <item.icon />\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <main className=\"flex-1 p-4\">\n      <SidebarTrigger />\n      <p className=\"mt-4 text-sm text-muted-foreground\">Main content area</p>\n    </main>\n  </SidebarProvider>\n);",
-        "description": "Shows the sidebar with the first menu item highlighted as the active page."
-      }
-    ],
-    "import": "import {\n    Sidebar,\n    SidebarContent,\n    SidebarFooter,\n    SidebarGroup,\n    SidebarGroupLabel,\n    SidebarHeader,\n    SidebarMenu,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarProvider,\n    SidebarTrigger,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A responsive sidebar navigation panel that collapses on mobile into a Sheet overlay. Supports left/right placement, multiple visual variants (sidebar, floating, inset), and collapsible modes (offcanvas, icon, none).",
-    "reactDocgen": {
-      "description": "A responsive sidebar navigation panel that collapses on mobile into a Sheet overlay.\nSupports left/right placement, multiple visual variants (sidebar, floating, inset), and collapsible modes (offcanvas, icon, none).",
-      "methods": [],
-      "displayName": "Sidebar",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Sidebar.tsx",
-      "actualName": "Sidebar",
-      "exportName": "Sidebar",
-      "props": {
-        "side": {
-          "required": false,
-          "tsType": {
-            "name": "union",
-            "raw": "'left' | 'right'",
-            "elements": [
-              {
-                "name": "literal",
-                "value": "'left'"
-              },
-              {
-                "name": "literal",
-                "value": "'right'"
-              }
-            ]
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "'left'",
-            "computed": false
-          }
-        },
-        "variant": {
-          "required": false,
-          "tsType": {
-            "name": "union",
-            "raw": "'sidebar' | 'floating' | 'inset'",
-            "elements": [
-              {
-                "name": "literal",
-                "value": "'sidebar'"
-              },
-              {
-                "name": "literal",
-                "value": "'floating'"
-              },
-              {
-                "name": "literal",
-                "value": "'inset'"
-              }
-            ]
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "'sidebar'",
-            "computed": false
-          }
-        },
-        "collapsible": {
-          "required": false,
-          "tsType": {
-            "name": "union",
-            "raw": "'offcanvas' | 'icon' | 'none'",
-            "elements": [
-              {
-                "name": "literal",
-                "value": "'offcanvas'"
-              },
-              {
-                "name": "literal",
-                "value": "'icon'"
-              },
-              {
-                "name": "literal",
-                "value": "'none'"
-              }
-            ]
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "'offcanvas'",
-            "computed": false
-          }
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Sidebar.tsx",
-    "title": "UI Components/Sidebar",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-sidebar--docs",
-      "title": "UI Components/Sidebar",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Sidebar.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-skeleton",
-    "name": "Skeleton",
-    "path": "./src/components/ui/Skeleton.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <div className=\"flex items-center space-x-4\">\n    <Skeleton className=\"h-12 w-12 rounded-full\" />\n    <div className=\"space-y-2\">\n      <Skeleton className=\"h-4 w-[250px]\" />\n      <Skeleton className=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n);",
-        "description": "Shows a skeleton mimicking a user profile layout with an avatar circle and two text lines.",
-        "id": "ui-components-skeleton--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "CardSkeleton",
-        "snippet": "const CardSkeleton = () => (\n  <div className=\"w-[300px] space-y-4 rounded-lg border p-4\">\n    <Skeleton className=\"h-40 w-full rounded-md\" />\n    <div className=\"space-y-2\">\n      <Skeleton className=\"h-5 w-3/4\" />\n      <Skeleton className=\"h-4 w-full\" />\n      <Skeleton className=\"h-4 w-5/6\" />\n    </div>\n    <div className=\"flex items-center gap-2 pt-2\">\n      <Skeleton className=\"h-8 w-8 rounded-full\" />\n      <Skeleton className=\"h-4 w-24\" />\n    </div>\n  </div>\n);",
-        "description": "Shows a skeleton mimicking a full card layout with image, text, and avatar placeholders."
-      }
-    ],
-    "import": "import { Skeleton } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A placeholder element that animates with a pulse effect to indicate content is loading. Use to mirror the shape of upcoming content (e.g., text lines, avatars, cards) and reduce perceived load time.",
-    "reactDocgen": {
-      "description": "A placeholder element that animates with a pulse effect to indicate content is loading.\nUse to mirror the shape of upcoming content (e.g., text lines, avatars, cards) and reduce perceived load time.",
-      "methods": [],
-      "displayName": "Skeleton",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Skeleton.tsx",
-      "actualName": "Skeleton",
-      "exportName": "Skeleton"
-    },
-    "componentPath": "./src/components/ui/Skeleton.tsx",
-    "title": "UI Components/Skeleton",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-skeleton--docs",
-      "title": "UI Components/Skeleton",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Skeleton.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-slider",
-    "name": "Slider",
-    "path": "./src/components/ui/Slider.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Slider defaultValue={[50]} max={100} step={1} className=\"w-[60%]\" />;",
-        "description": "Shows a single-thumb slider at 50% of a 0-100 range.",
-        "id": "ui-components-slider--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Range",
-        "snippet": "const Range = () => <Slider defaultValue={[25, 75]} max={100} step={1} className=\"w-[60%]\" />;",
-        "description": "Demonstrates a dual-thumb range slider for selecting a value range between 25 and 75.",
-        "id": "ui-components-slider--range",
-        "exportName": "Range",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithSteps",
-        "snippet": "const WithSteps = () => <Slider defaultValue={[20]} max={100} step={10} className=\"w-[60%]\" />;",
-        "description": "Shows a slider with discrete step increments of 10."
-      }
-    ],
-    "import": "import { Slider } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A draggable range input. Supports single or multiple thumbs (range selection), keyboard navigation, and vertical orientation.",
-    "reactDocgen": {
-      "description": "A draggable range input. Supports single or multiple thumbs (range selection), keyboard navigation, and vertical orientation.",
-      "methods": [],
-      "displayName": "Slider",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Slider.tsx",
-      "actualName": "Slider",
-      "exportName": "Slider",
-      "props": {
-        "min": {
-          "defaultValue": {
-            "value": "0",
-            "computed": false
-          },
-          "required": false
-        },
-        "max": {
-          "defaultValue": {
-            "value": "100",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Slider.tsx",
-    "title": "UI Components/Slider",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-slider--docs",
-      "title": "UI Components/Slider",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Slider.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-sonner",
-    "name": "Toaster",
-    "path": "./src/components/ui/Sonner.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <div>\n    <Toaster />\n    <div className=\"flex flex-wrap gap-2\">\n      <Button variant=\"outline\" onClick={() => toast('Event has been created.')}>\n        Show Toast\n      </Button>\n      <Button variant=\"outline\" onClick={() => toast.success('Successfully saved!')}>\n        Success\n      </Button>\n      <Button variant=\"outline\" onClick={() => toast.error('Something went wrong.')}>\n        Error\n      </Button>\n      <Button variant=\"outline\" onClick={() => toast.warning('Please check your input.')}>\n        Warning\n      </Button>\n      <Button variant=\"outline\" onClick={() => toast.info('Here is some information.')}>\n        Info\n      </Button>\n    </div>\n  </div>\n);",
-        "description": "Demonstrates all toast variants (default, success, error, warning, info) triggered by buttons.",
-        "id": "ui-components-sonner--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Button, Toaster } from \"react-client\";\nimport { ThemeProvider } from \"next-themes\";",
-    "jsDocTags": {},
-    "description": "A pre-configured Sonner toast container that integrates with the app's theme system. Provides styled icons for success, info, warning, error, and loading states. Place once at the app root and trigger toasts via the `toast()` function from sonner.",
-    "reactDocgen": {
-      "description": "A pre-configured Sonner toast container that integrates with the app's theme system.\nProvides styled icons for success, info, warning, error, and loading states. Place once at the app root and trigger toasts via the `toast()` function from sonner.",
-      "methods": [],
-      "displayName": "Toaster",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Sonner.tsx",
-      "actualName": "Toaster",
-      "exportName": "Toaster"
-    },
-    "componentPath": "./src/components/ui/Sonner.tsx",
-    "title": "UI Components/Sonner",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-sonner--docs",
-      "title": "UI Components/Sonner",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Sonner.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-spinner",
-    "name": "Spinner",
-    "path": "./src/components/ui/Spinner.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Spinner />;",
-        "description": "Shows the spinner at its default size (16px).",
-        "id": "ui-components-spinner--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Small",
-        "snippet": "const Small = () => <Spinner className=\"size-3\" />;",
-        "description": "Shows a smaller 12px spinner for inline or compact contexts.",
-        "id": "ui-components-spinner--small",
-        "exportName": "Small",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Large",
-        "snippet": "const Large = () => <Spinner className=\"size-8\" />;",
-        "description": "Shows a larger 32px spinner for full-page or section-level loading states.",
-        "id": "ui-components-spinner--large",
-        "exportName": "Large",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Spinner } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "An animated spinning loader icon that indicates an in-progress operation. Includes role=\"status\" and an aria-label for accessibility. Resize via className (e.g., \"size-8\").",
-    "reactDocgen": {
-      "description": "An animated spinning loader icon that indicates an in-progress operation.\nIncludes role=\"status\" and an aria-label for accessibility. Resize via className (e.g., \"size-8\").",
-      "methods": [],
-      "displayName": "Spinner",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Spinner.tsx",
-      "actualName": "Spinner",
-      "exportName": "Spinner"
-    },
-    "componentPath": "./src/components/ui/Spinner.tsx",
-    "title": "UI Components/Spinner",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-spinner--docs",
-      "title": "UI Components/Spinner",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Spinner.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-switch",
-    "name": "Switch",
-    "path": "./src/components/ui/Switch.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Switch />;",
-        "description": "Shows the switch in its default unchecked state.",
-        "id": "ui-components-switch--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Checked",
-        "snippet": "const Checked = () => <Switch defaultChecked />;",
-        "description": "Shows the switch in its checked (on) state.",
-        "id": "ui-components-switch--checked",
-        "exportName": "Checked",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Disabled",
-        "snippet": "const Disabled = () => <Switch disabled />;",
-        "description": "Shows a disabled switch that cannot be interacted with.",
-        "id": "ui-components-switch--disabled",
-        "exportName": "Disabled",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithLabel",
-        "snippet": "const WithLabel = () => (\n  <div className=\"flex items-center gap-2\">\n    <Switch id=\"airplane-mode\" />\n    <label htmlFor=\"airplane-mode\" className=\"text-sm\">\n      Airplane Mode\n    </label>\n  </div>\n);",
-        "description": "Shows the switch paired with an associated label element for accessible labeling."
-      }
-    ],
-    "import": "import { Switch } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A sliding on/off toggle control with WAI-ARIA switch role and keyboard support.",
-    "reactDocgen": {
-      "description": "A sliding on/off toggle control with WAI-ARIA switch role and keyboard support.",
-      "methods": [],
-      "displayName": "Switch",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Switch.tsx",
-      "actualName": "Switch",
-      "exportName": "Switch",
-      "props": {
-        "size": {
-          "required": false,
-          "tsType": {
-            "name": "union",
-            "raw": "'sm' | 'default'",
-            "elements": [
-              {
-                "name": "literal",
-                "value": "'sm'"
-              },
-              {
-                "name": "literal",
-                "value": "'default'"
-              }
-            ]
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "'default'",
-            "computed": false
-          }
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Switch.tsx",
-    "title": "UI Components/Switch",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-switch--docs",
-      "title": "UI Components/Switch",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Switch.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-table",
-    "name": "Table",
-    "path": "./src/components/ui/Table.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Table>\n    <TableCaption>A list of recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead>Invoice</TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead className=\"text-right\">Amount</TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      {invoices.map((invoice) => (\n        <TableRow key={invoice.invoice}>\n          <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n          <TableCell>{invoice.status}</TableCell>\n          <TableCell>{invoice.method}</TableCell>\n          <TableCell className=\"text-right\">{invoice.amount}</TableCell>\n        </TableRow>\n      ))}\n    </TableBody>\n  </Table>\n);",
-        "description": "Shows a full table with header, body, and caption using invoice data.",
-        "id": "ui-components-table--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Minimal",
-        "snippet": "const Minimal = () => (\n  <Table>\n    <TableHeader>\n      <TableRow>\n        <TableHead>Name</TableHead>\n        <TableHead>Role</TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow>\n        <TableCell>Alice</TableCell>\n        <TableCell>Engineer</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>Bob</TableCell>\n        <TableCell>Designer</TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n);",
-        "description": "Shows a minimal two-column table without caption or footer.",
-        "id": "ui-components-table--minimal",
-        "exportName": "Minimal",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import {\n    Table,\n    TableBody,\n    TableCaption,\n    TableCell,\n    TableHead,\n    TableHeader,\n    TableRow,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A responsive data table with horizontal scroll overflow. Compose with TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption subcomponents.",
-    "reactDocgen": {
-      "description": "A responsive data table with horizontal scroll overflow.\nCompose with TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption subcomponents.",
-      "methods": [],
-      "displayName": "Table",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Table.tsx",
-      "actualName": "Table",
-      "exportName": "Table"
-    },
-    "componentPath": "./src/components/ui/Table.tsx",
-    "title": "UI Components/Table",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-table--docs",
-      "title": "UI Components/Table",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Table.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-tabs",
-    "name": "Tabs",
-    "path": "./src/components/ui/Tabs.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n    <TabsList>\n      <TabsTrigger value=\"account\">Account</TabsTrigger>\n      <TabsTrigger value=\"password\">Password</TabsTrigger>\n      <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <p className=\"text-sm text-muted-foreground p-4\">Make changes to your account here.</p>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <p className=\"text-sm text-muted-foreground p-4\">Change your password here.</p>\n    </TabsContent>\n    <TabsContent value=\"settings\">\n      <p className=\"text-sm text-muted-foreground p-4\">Adjust your settings here.</p>\n    </TabsContent>\n  </Tabs>\n);",
-        "description": "Shows the default pill-style tabs with three panels.",
-        "id": "ui-components-tabs--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "LineVariant",
-        "snippet": "const LineVariant = () => (\n  <Tabs defaultValue=\"overview\" className=\"w-[400px]\">\n    <TabsList variant=\"line\">\n      <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n      <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n      <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"overview\">\n      <p className=\"text-sm text-muted-foreground p-4\">Overview content goes here.</p>\n    </TabsContent>\n    <TabsContent value=\"analytics\">\n      <p className=\"text-sm text-muted-foreground p-4\">Analytics content goes here.</p>\n    </TabsContent>\n    <TabsContent value=\"reports\">\n      <p className=\"text-sm text-muted-foreground p-4\">Reports content goes here.</p>\n    </TabsContent>\n  </Tabs>\n);",
-        "description": "Shows the line variant where the active tab is indicated by an underline rather than a background."
-      }
-    ],
-    "import": "import { Tabs, TabsContent, TabsList, TabsTrigger } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "Layered content panels activated by tab triggers. Supports horizontal and vertical orientations with keyboard navigation.",
-    "reactDocgen": {
-      "description": "Layered content panels activated by tab triggers. Supports horizontal and vertical orientations with keyboard navigation.",
-      "methods": [],
-      "displayName": "Tabs",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Tabs.tsx",
-      "actualName": "Tabs",
-      "exportName": "Tabs",
-      "props": {
-        "orientation": {
-          "defaultValue": {
-            "value": "'horizontal'",
-            "computed": false
-          },
-          "required": false
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/Tabs.tsx",
-    "title": "UI Components/Tabs",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-tabs--docs",
-      "title": "UI Components/Tabs",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Tabs.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-textarea",
-    "name": "Textarea",
-    "path": "./src/components/ui/Textarea.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Textarea />;",
-        "description": "Shows the textarea in its default empty state.",
-        "id": "ui-components-textarea--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithPlaceholder",
-        "snippet": "const WithPlaceholder = () => <Textarea placeholder=\"Type your message here...\" />;",
-        "description": "Shows the textarea with placeholder text."
-      },
-      {
-        "name": "Disabled",
-        "snippet": "const Disabled = () => <Textarea placeholder=\"This textarea is disabled\" disabled />;",
-        "description": "Shows a disabled textarea that cannot receive input.",
-        "id": "ui-components-textarea--disabled",
-        "exportName": "Disabled",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { Textarea } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A multi-line text input that auto-sizes to its content via field-sizing-content. Supports aria-invalid styling for form validation errors.",
-    "reactDocgen": {
-      "description": "A multi-line text input that auto-sizes to its content via field-sizing-content.\nSupports aria-invalid styling for form validation errors.",
-      "methods": [],
-      "displayName": "Textarea",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Textarea.tsx",
-      "actualName": "Textarea",
-      "exportName": "Textarea"
-    },
-    "componentPath": "./src/components/ui/Textarea.tsx",
-    "title": "UI Components/Textarea",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-textarea--docs",
-      "title": "UI Components/Textarea",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Textarea.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-toast",
-    "name": "Toast",
-    "path": "./src/components/ui/Toast.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <ToastDemo />;",
-        "description": "Demonstrates triggering a basic toast notification with a title and description.",
-        "id": "ui-components-toast--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Destructive",
-        "snippet": "const Destructive = () => <ToastDestructiveDemo />;",
-        "description": "Shows a destructive-variant toast for error or warning scenarios.",
-        "id": "ui-components-toast--destructive",
-        "exportName": "Destructive",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithAction",
-        "snippet": "const WithAction = () => <ToastWithActionDemo />;",
-        "description": "Shows a toast with an action button (e.g., \"Undo\") alongside the message."
-      },
-      {
-        "name": "Inline",
-        "snippet": "const Inline = () => (\n  <ToastProvider>\n    <Toast open>\n      <div className=\"grid gap-1\">\n        <ToastTitle>Toast Title</ToastTitle>\n        <ToastDescription>This is a toast description.</ToastDescription>\n      </div>\n      <ToastClose />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n);",
-        "description": "Shows a toast rendered inline (always open) using the primitive subcomponents directly.",
-        "id": "ui-components-toast--inline",
-        "exportName": "Inline",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import {\n    Button,\n    Toast,\n    ToastAction,\n    ToastClose,\n    ToastDescription,\n    Toaster,\n    ToastProvider,\n    ToastTitle,\n    ToastViewport,\n} from \"react-client\";",
-    "jsDocTags": {},
-    "description": "An individual toast notification with default or destructive variant styling.",
-    "reactDocgen": {
-      "description": "An individual toast notification with default or destructive variant styling.",
-      "methods": [],
-      "displayName": "Toast",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Toast.tsx",
-      "actualName": "Toast",
-      "exportName": "Toast"
-    },
-    "componentPath": "./src/components/ui/Toast.tsx",
-    "title": "UI Components/Toast",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-toast--docs",
-      "title": "UI Components/Toast",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Toast.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-toggle",
-    "name": "Toggle",
-    "path": "./src/components/ui/Toggle.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => <Toggle aria-label=\"Toggle bold\"><BoldIcon /></Toggle>;",
-        "description": "Shows a toggle button with a bold icon in the default ghost variant.",
-        "id": "ui-components-toggle--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Outline",
-        "snippet": "const Outline = () => <Toggle variant=\"outline\" aria-label=\"Toggle bold\"><BoldIcon /></Toggle>;",
-        "description": "Shows the outline variant with a visible border.",
-        "id": "ui-components-toggle--outline",
-        "exportName": "Outline",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithText",
-        "snippet": "const WithText = () => <Toggle aria-label=\"Toggle italic\">Italic</Toggle>;",
-        "description": "Shows a toggle with a text label instead of an icon."
-      },
-      {
-        "name": "Pressed",
-        "snippet": "const Pressed = () => <Toggle defaultPressed aria-label=\"Toggle bold\"><BoldIcon /></Toggle>;",
-        "description": "Shows a toggle in its initially pressed (on) state.",
-        "id": "ui-components-toggle--pressed",
-        "exportName": "Pressed",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { BoldIcon } from \"lucide-react\";\nimport { Toggle } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A two-state button for toolbar controls. Has \"default\" (ghost) and \"outline\" variants in sm/default/lg sizes.",
-    "reactDocgen": {
-      "description": "A two-state button for toolbar controls. Has \"default\" (ghost) and \"outline\" variants in sm/default/lg sizes.",
-      "methods": [],
-      "displayName": "Toggle",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Toggle.tsx",
-      "actualName": "Toggle",
-      "exportName": "Toggle"
-    },
-    "componentPath": "./src/components/ui/Toggle.tsx",
-    "title": "UI Components/Toggle",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-toggle--docs",
-      "title": "UI Components/Toggle",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Toggle.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-togglegroup",
-    "name": "ToggleGroup",
-    "path": "./src/components/ui/ToggleGroup.stories.tsx",
-    "stories": [
-      {
-        "name": "Single",
-        "snippet": "const Single = () => (\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <BoldIcon />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <ItalicIcon />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon />\n    </ToggleGroupItem>\n  </ToggleGroup>\n);",
-        "description": "Shows a single-selection toggle group where only one item can be active at a time.",
-        "id": "ui-components-togglegroup--single",
-        "exportName": "Single",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Multiple",
-        "snippet": "const Multiple = () => (\n  <ToggleGroup type=\"multiple\" defaultValue={['bold', 'italic']}>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <BoldIcon />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <ItalicIcon />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon />\n    </ToggleGroupItem>\n  </ToggleGroup>\n);",
-        "description": "Shows a multi-selection toggle group with bold and italic pre-selected.",
-        "id": "ui-components-togglegroup--multiple",
-        "exportName": "Multiple",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "Outline",
-        "snippet": "const Outline = () => (\n  <ToggleGroup type=\"single\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <BoldIcon />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <ItalicIcon />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon />\n    </ToggleGroupItem>\n  </ToggleGroup>\n);",
-        "description": "Shows a toggle group using the outline variant with visible borders.",
-        "id": "ui-components-togglegroup--outline",
-        "exportName": "Outline",
-        "type": "story",
-        "subtype": "story"
-      }
-    ],
-    "import": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "A group of toggles where one (`type=\"single\"`) or multiple (`type=\"multiple\"`) can be active.",
-    "reactDocgen": {
-      "description": "A group of toggles where one (`type=\"single\"`) or multiple (`type=\"multiple\"`) can be active.",
-      "methods": [],
-      "displayName": "ToggleGroup",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/ToggleGroup.tsx",
-      "actualName": "ToggleGroup",
-      "exportName": "ToggleGroup",
-      "props": {
-        "spacing": {
-          "required": false,
-          "tsType": {
-            "name": "number"
-          },
-          "description": "",
-          "defaultValue": {
-            "value": "0",
-            "computed": false
-          }
-        }
-      }
-    },
-    "componentPath": "./src/components/ui/ToggleGroup.tsx",
-    "title": "UI Components/ToggleGroup",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-togglegroup--docs",
-      "title": "UI Components/ToggleGroup",
-      "name": "Docs",
-      "importPath": "./src/components/ui/ToggleGroup.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  },
-  {
-    "id": "ui-components-tooltip",
-    "name": "Tooltip",
-    "path": "./src/components/ui/Tooltip.stories.tsx",
-    "stories": [
-      {
-        "name": "Default",
-        "snippet": "const Default = () => (\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\">Hover me</Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>This is a tooltip</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n);",
-        "description": "Shows a basic tooltip appearing on hover over a button.",
-        "id": "ui-components-tooltip--default",
-        "exportName": "Default",
-        "type": "story",
-        "subtype": "story"
-      },
-      {
-        "name": "WithSideOffset",
-        "snippet": "const WithSideOffset = () => (\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\">With offset</Button>\n      </TooltipTrigger>\n      <TooltipContent sideOffset={8}>\n        <p>Tooltip with side offset</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n);",
-        "description": "Shows a tooltip with additional spacing between the trigger and content via sideOffset."
-      }
-    ],
-    "import": "import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"react-client\";",
-    "jsDocTags": {},
-    "description": "The root component that manages open/close state for a single tooltip.",
-    "reactDocgen": {
-      "description": "The root component that manages open/close state for a single tooltip.",
-      "methods": [],
-      "displayName": "Tooltip",
-      "definedInFile": "/Users/sam/code/auto/1/auto-engineer-1/examples/typical/client/src/components/ui/Tooltip.tsx",
-      "actualName": "Tooltip",
-      "exportName": "Tooltip"
-    },
-    "componentPath": "./src/components/ui/Tooltip.tsx",
-    "title": "UI Components/Tooltip",
-    "tags": [
-      "dev",
-      "test",
-      "manifest",
-      "autodocs"
-    ],
-    "docs": {
-      "id": "ui-components-tooltip--docs",
-      "title": "UI Components/Tooltip",
-      "name": "Docs",
-      "importPath": "./src/components/ui/Tooltip.stories.tsx",
-      "type": "docs",
-      "tags": [
-        "dev",
-        "test",
-        "manifest",
-        "autodocs"
-      ],
-      "storiesImports": []
-    }
-  }
-]