@ramme-io/ui 3.0.0 → 4.0.0

package/dist/wizardManifest.js

@@ -0,0 +1,4170 @@
+const e = {
+  components: [
+    {
+      id: "suggestion",
+      name: "Suggestion",
+      version: "1.0.0",
+      description: "A small, pill-shaped button that offers a quick, suggested reply or follow-up question to the user.",
+      tags: [
+        "ui",
+        "ai",
+        "button",
+        "suggestion",
+        "actions"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "onClick",
+          type: "() => void",
+          description: "Function to call when the suggestion is clicked."
+        }
+      ],
+      importPath: "./blocks/ai/Actions",
+      filePath: "src/blocks/ai/Actions.tsx",
+      sku: "@molecule/ai/suggestion",
+      humanLabel: "Suggestion",
+      humanDescription: "A small, pill-shaped button that offers a quick, suggested reply or follow-up question to the user."
+    },
+    {
+      id: "actions",
+      name: "Actions",
+      version: "1.0.0",
+      description: "A container for displaying a list of suggested, clickable actions that the user can take next.",
+      tags: [
+        "ui",
+        "ai",
+        "layout",
+        "actions",
+        "suggestion"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./blocks/ai/Actions",
+      filePath: "src/blocks/ai/Actions.tsx",
+      sku: "@molecule/ai/actions",
+      humanLabel: "Actions",
+      humanDescription: "A container for displaying a list of suggested, clickable actions that the user can take next."
+    },
+    {
+      id: "chat-fab",
+      name: "ChatFAB",
+      version: "1.0.0",
+      description: "A floating action button (FAB) specifically for opening a chat interface, with a tooltip and icon.",
+      tags: [
+        "ui",
+        "button",
+        "chat",
+        "fab",
+        "ai"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "onClick",
+          type: "() => void",
+          description: "Function to call when the button is clicked."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling."
+        },
+        {
+          name: "tooltipContent",
+          type: "string",
+          description: "The text content for the button's tooltip.",
+          default: "'Open AI Assistant'"
+        }
+      ],
+      importPath: "./blocks/ai/ChatFAB",
+      filePath: "src/blocks/ai/ChatFAB.tsx",
+      sku: "@atom/primitive/chat-fab",
+      humanLabel: "ChatFAB",
+      humanDescription: "A floating action button (FAB) specifically for opening a chat interface, with a tooltip and icon."
+    },
+    {
+      id: "conversation",
+      name: "Conversation",
+      version: "1.0.0",
+      description: "A container component that holds a series of Message components and manages the layout and scrolling of the chat history.",
+      tags: [
+        "ui",
+        "ai",
+        "layout",
+        "chat"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./blocks/ai/Conversation",
+      filePath: "src/blocks/ai/Conversation.tsx",
+      sku: "@molecule/ai/conversation",
+      humanLabel: "Conversation",
+      humanDescription: "A container component that holds a series of Message components and manages the layout and scrolling of the chat history."
+    },
+    {
+      id: "loader",
+      name: "Loader",
+      version: "1.0.0",
+      description: "A compact, theme-aware animation for indicating AI processing states. Optimized for chat interfaces.",
+      tags: [
+        "ui",
+        "ai",
+        "feedback",
+        "loading",
+        "chat"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "variant",
+          type: `"'bubble' | 'sparkle' | 'bar'"`,
+          description: "The visual style. 'bubble' is standard for chat. 'sparkle' is for creative generation.",
+          default: "'bubble'"
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "Optional text displayed next to the animation."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Custom classes for the container."
+        }
+      ],
+      importPath: "./blocks/ai/Loader",
+      filePath: "src/blocks/ai/Loader.tsx",
+      sku: "@molecule/ai/loader",
+      humanLabel: "Loader",
+      humanDescription: "A compact, theme-aware animation for indicating AI processing states. Optimized for chat interfaces."
+    },
+    {
+      id: "message",
+      name: "Message",
+      version: "1.0.0",
+      description: "Displays a single message in a conversation, including an avatar, author, content, and optional suggestions.",
+      tags: [
+        "ui",
+        "ai",
+        "chat",
+        "display"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "author",
+          type: "string",
+          description: `"The name of the message author (e.g., 'User' or 'AI Assistant')."`
+        },
+        {
+          name: "content",
+          type: "string",
+          description: "The text content of the message."
+        },
+        {
+          name: "isUser",
+          type: "boolean",
+          description: "If true, styles the message as from the user."
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "If true, displays the Loader component instead of content."
+        },
+        {
+          name: "suggestions",
+          type: "string[]",
+          description: "An array of strings to display as suggested actions."
+        },
+        {
+          name: "onSuggestionClick",
+          type: "(suggestion: string) => void",
+          description: "Callback for when a suggestion is clicked."
+        }
+      ],
+      importPath: "./blocks/ai/Message",
+      filePath: "src/blocks/ai/Message.tsx",
+      sku: "@molecule/ai/message",
+      humanLabel: "Message",
+      humanDescription: "Displays a single message in a conversation, including an avatar, author, content, and optional suggestions."
+    },
+    {
+      id: "prompt-input",
+      name: "PromptInput",
+      version: "1.0.0",
+      description: "A specialized input field for users to type and submit prompts, including a send button.",
+      tags: [
+        "ui",
+        "ai",
+        "form",
+        "input",
+        "chat"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "value",
+          type: "string",
+          description: "The current value of the input field."
+        },
+        {
+          name: "onChange",
+          type: "(e: React.ChangeEvent<HTMLInputElement>) => void",
+          description: "Callback fired when the input value changes."
+        },
+        {
+          name: "onSubmit",
+          type: "(e: React.FormEvent) => void",
+          description: "Callback fired when the form is submitted."
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          description: "Placeholder text for the input field.",
+          default: '"Type your message..."'
+        }
+      ],
+      importPath: "./blocks/ai/PromptInput",
+      filePath: "src/blocks/ai/PromptInput.tsx",
+      sku: "@molecule/ai/prompt-input",
+      humanLabel: "PromptInput",
+      humanDescription: "A specialized input field for users to type and submit prompts, including a send button."
+    },
+    {
+      id: "watchlist-engine",
+      name: "WatchlistEngine",
+      version: "1.0.0",
+      description: "A self-contained financial watchlist showing tickers with live price, day change, market cap, and a risk grade. Strategic purpose: a worked reference for a schema-validated data block — rows are parsed through FinancialAssetSchema before render, so malformed feed data is rejected at the boundary rather than crashing the table.",
+      tags: [
+        "engines",
+        "finance",
+        "watchlist",
+        "table",
+        "market",
+        "block"
+      ],
+      category: "blocks",
+      props: [],
+      importPath: "./blocks/engines/WatchlistEngine",
+      filePath: "src/blocks/engines/WatchlistEngine.tsx",
+      sku: "@molecule/block/watchlist-engine",
+      humanLabel: "WatchlistEngine",
+      humanDescription: "A self-contained financial watchlist showing tickers with live price, day change, market cap, and a risk grade. Strategic purpose: a worked reference for a schema-validated data block — rows are parsed through FinancialAssetSchema before render, so malformed feed data is rejected at the boundary rather than crashing the table."
+    },
+    {
+      id: "telemetry-log",
+      name: "TelemetryLog",
+      version: "1.0.0",
+      description: "A scrolling, newest-first table of raw sensor readings with a bounded row count. Strategic purpose: the debugging companion to a device dashboard — shows exactly what arrived and when, while `maxRows` caps memory so a high-frequency feed can run indefinitely without growing without limit.",
+      tags: [
+        "iot",
+        "telemetry",
+        "log",
+        "table",
+        "sensor",
+        "debug"
+      ],
+      category: "iot",
+      props: [
+        {
+          name: "rowData",
+          type: "Array<TelemetryLogRow>",
+          description: "Readings, each `{ timestamp, soilMoisture?, ambientLight?, temperature? }`."
+        },
+        {
+          name: "maxRows",
+          type: "number",
+          description: "Cap on retained rows; oldest are dropped past this."
+        },
+        {
+          name: "height",
+          type: "string",
+          description: "CSS height for the scroll viewport."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./blocks/iot/TelemetryLog",
+      filePath: "src/blocks/iot/TelemetryLog.tsx",
+      sku: "@molecule/iot/telemetry-log",
+      humanLabel: "TelemetryLog",
+      humanDescription: "A scrolling, newest-first table of raw sensor readings with a bounded row count. Strategic purpose: the debugging companion to a device dashboard — shows exactly what arrived and when, while `maxRows` caps memory so a high-frequency feed can run indefinitely without growing without limit."
+    },
+    {
+      id: "water-pump-control",
+      name: "WaterPumpControl",
+      version: "1.0.0",
+      description: "An irrigation control block: choose automatic or manual operation and set the soil-moisture target the controller should hold. Strategic purpose: a worked example of the command half of an edge loop — it emits a typed payload for you to publish, and never talks to the broker itself, so it stays testable and transport-agnostic.",
+      tags: [
+        "iot",
+        "control",
+        "pump",
+        "irrigation",
+        "hardware",
+        "command"
+      ],
+      category: "iot",
+      props: [
+        {
+          name: "pumpMode",
+          type: "string",
+          description: "Current mode: 'AUTO', 'MANUAL_ON', or 'MANUAL_OFF'."
+        },
+        {
+          name: "targetMoisture",
+          type: "number",
+          description: "Moisture set-point the controller should maintain."
+        },
+        {
+          name: "onCommand",
+          type: "function",
+          description: "Called with `{ pumpMode, targetMoisture }` when the operator commits a change. Publish this via useMqtt()."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./blocks/iot/WaterPumpControl",
+      filePath: "src/blocks/iot/WaterPumpControl.tsx",
+      sku: "@molecule/iot/water-pump-control",
+      humanLabel: "WaterPumpControl",
+      humanDescription: "An irrigation control block: choose automatic or manual operation and set the soil-moisture target the controller should hold. Strategic purpose: a worked example of the command half of an edge loop — it emits a typed payload for you to publish, and never talks to the broker itself, so it stays testable and transport-agnostic."
+    },
+    {
+      id: "aichat-thread",
+      name: "AIChatThread",
+      version: "1.0.0",
+      description: "A complete chat surface — message history, streaming indicator, error banner, provider/model attribution, and the composer. Strategic purpose: the presentational half of a chat feature, driven entirely by props from kernel's useRammeAI(). It holds no transport of its own, and takes a `renderMessage` override so products can add markdown or rich rendering without pulling those deps into @ramme-io/ui.",
+      tags: [
+        "ai",
+        "chat",
+        "thread",
+        "conversation",
+        "streaming",
+        "llm"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "messages",
+          type: "Array<ChatMessage>",
+          description: "Conversation history from useRammeAI()."
+        },
+        {
+          name: "isStreaming",
+          type: "boolean",
+          description: "True while the model is actively responding."
+        },
+        {
+          name: "onSubmit",
+          type: "function",
+          description: "Called with the trimmed user message on submit."
+        },
+        {
+          name: "error",
+          type: "string",
+          description: "Error text shown as a banner above the composer."
+        },
+        {
+          name: "activeProvider",
+          type: "string",
+          description: "Provider name for the attribution bar."
+        },
+        {
+          name: "activeModel",
+          type: "string",
+          description: "Model name for the attribution bar."
+        },
+        {
+          name: "connectionStatus",
+          type: "string",
+          description: "Status dot state: 'idle', 'streaming', or 'error'."
+        },
+        {
+          name: "renderMessage",
+          type: "function",
+          description: "Custom content renderer, receives (content, role). Use for markdown at the product layer."
+        }
+      ],
+      importPath: "./components/ai/AIChatThread/AIChatThread",
+      filePath: "src/components/ai/AIChatThread/AIChatThread.tsx",
+      sku: "@molecule/ai/aichat-thread",
+      humanLabel: "AIChatThread",
+      humanDescription: "A complete chat surface — message history, streaming indicator, error banner, provider/model attribution, and the composer. Strategic purpose: the presentational half of a chat feature, driven entirely by props from kernel's useRammeAI(). It holds no transport of its own, and takes a `renderMessage` override so products can add markdown or rich rendering without pulling those deps into @ramme-io/ui."
+    },
+    {
+      id: "company-profile-card",
+      name: "CompanyProfileCard",
+      version: "1.0.0",
+      description: "A company summary for a ticker — sector, industry, and description — fetched on demand and cached. Strategic purpose: a generative-UI block an AI tool call can render directly into a chat thread. Surfaces its own provenance, distinguishing a live fetch from a cached or stale answer instead of presenting all three as equally fresh.",
+      tags: [
+        "ai",
+        "finance",
+        "company",
+        "profile",
+        "card",
+        "generative-ui"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "ticker",
+          type: "string",
+          description: "The symbol to profile, e.g. 'AAPL'."
+        }
+      ],
+      importPath: "./components/ai/CompanyProfileCard/CompanyProfileCard",
+      filePath: "src/components/ai/CompanyProfileCard/CompanyProfileCard.tsx",
+      sku: "@molecule/ai/company-profile-card",
+      humanLabel: "CompanyProfileCard",
+      humanDescription: "A company summary for a ticker — sector, industry, and description — fetched on demand and cached. Strategic purpose: a generative-UI block an AI tool call can render directly into a chat thread. Surfaces its own provenance, distinguishing a live fetch from a cached or stale answer instead of presenting all three as equally fresh."
+    },
+    {
+      id: "live-quote-card",
+      name: "LiveQuoteCard",
+      version: "1.0.0",
+      description: "AI-generated live stock quote card with real-time price data",
+      tags: [
+        "ai",
+        "stocks",
+        "quote",
+        "real-time",
+        "generative-ui"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./components/ai/LiveQuoteCard/LiveQuoteCard",
+      filePath: "src/components/ai/LiveQuoteCard/LiveQuoteCard.tsx",
+      sku: "@molecule/ai/live-quote-card",
+      humanLabel: "LiveQuoteCard",
+      humanDescription: "AI-generated live stock quote card with real-time price data"
+    },
+    {
+      id: "news-summary-card",
+      name: "NewsSummaryCard",
+      version: "1.0.0",
+      description: "AI-generated news summary card with recent headlines",
+      tags: [
+        "ai",
+        "news",
+        "sentiment",
+        "generative-ui"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./components/ai/NewsSummaryCard/NewsSummaryCard",
+      filePath: "src/components/ai/NewsSummaryCard/NewsSummaryCard.tsx",
+      sku: "@molecule/ai/news-summary-card",
+      humanLabel: "NewsSummaryCard",
+      humanDescription: "AI-generated news summary card with recent headlines"
+    },
+    {
+      id: "stock-chart",
+      name: "StockChart",
+      version: "1.0.0",
+      description: "AI-generated financial chart component with Bloomberg-style theming",
+      tags: [
+        "ai",
+        "charts",
+        "finance",
+        "stocks",
+        "generative-ui"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./components/ai/StockChart/StockChart",
+      filePath: "src/components/ai/StockChart/StockChart.tsx",
+      sku: "@molecule/ai/stock-chart",
+      humanLabel: "StockChart",
+      humanDescription: "AI-generated financial chart component with Bloomberg-style theming"
+    },
+    {
+      id: "telemetry-graph",
+      name: "TelemetryGraph",
+      version: "1.0.0",
+      description: "AI-generated telemetry visualization component",
+      tags: [
+        "ai",
+        "charts",
+        "telemetry",
+        "generative-ui"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./components/ai/TelemetryGraph/TelemetryGraph",
+      filePath: "src/components/ai/TelemetryGraph/TelemetryGraph.tsx",
+      sku: "@molecule/ai/telemetry-graph",
+      humanLabel: "TelemetryGraph",
+      humanDescription: "AI-generated telemetry visualization component"
+    },
+    {
+      id: "login-page",
+      name: "LoginPage",
+      version: "1.0.0",
+      description: "The standard sign-in screen — email and password, with inline error and loading states already wired. Strategic purpose: a drop-in credential form so products don't rebuild one; `quickProfiles` adds one-click demo personas, which is what makes a prototype instantly explorable without real accounts.",
+      tags: [
+        "auth",
+        "login",
+        "form",
+        "signin",
+        "page"
+      ],
+      category: "auth",
+      props: [
+        {
+          name: "onLogin",
+          type: "function",
+          description: "Called with (email, password) on submit."
+        },
+        {
+          name: "error",
+          type: "string",
+          description: "Message shown above the form when sign-in fails."
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "Disables the form and shows progress while authenticating."
+        },
+        {
+          name: "quickProfiles",
+          type: "Array<QuickProfile>",
+          description: "Optional one-click demo identities, each `{ name, email, role }`."
+        }
+      ],
+      importPath: "./components/auth/LoginPage",
+      filePath: "src/components/auth/LoginPage.tsx",
+      sku: "@atom/auth/login-page",
+      humanLabel: "LoginPage",
+      humanDescription: "The standard sign-in screen — email and password, with inline error and loading states already wired. Strategic purpose: a drop-in credential form so products don't rebuild one; `quickProfiles` adds one-click demo personas, which is what makes a prototype instantly explorable without real accounts."
+    },
+    {
+      id: "signup-page",
+      name: "SignupPage",
+      version: "1.0.0",
+      description: "The standard account-creation screen — name, email, and password with inline error and loading states. Strategic purpose: the companion to LoginPage so both halves of the auth flow look and behave identically without either being hand-rolled.",
+      tags: [
+        "auth",
+        "signup",
+        "register",
+        "form",
+        "page"
+      ],
+      category: "auth",
+      props: [
+        {
+          name: "onSignup",
+          type: "function",
+          description: "Called with (name, email, password) on submit."
+        },
+        {
+          name: "error",
+          type: "string",
+          description: "Message shown above the form when sign-up fails."
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "Disables the form and shows progress while submitting."
+        }
+      ],
+      importPath: "./components/auth/SignupPage",
+      filePath: "src/components/auth/SignupPage.tsx",
+      sku: "@atom/auth/signup-page",
+      humanLabel: "SignupPage",
+      humanDescription: "The standard account-creation screen — name, email, and password with inline error and loading states. Strategic purpose: the companion to LoginPage so both halves of the auth flow look and behave identically without either being hand-rolled."
+    },
+    {
+      id: "activity-feed",
+      name: "ActivityFeed",
+      version: "1.0.0",
+      description: "Displays a chronological list of recent activities, typically with a timeline indicator.",
+      tags: [
+        "templates",
+        "patterns",
+        "feed",
+        "timeline",
+        "data-display"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "items",
+          type: "ActivityItemData[]",
+          description: "An array of activity items to display in the feed."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "An optional title for the activity feed card.",
+          default: '"Activity Feed"'
+        },
+        {
+          name: "changelogUrl",
+          type: "string",
+          description: 'An optional URL for a "View changelog" link.'
+        }
+      ],
+      importPath: "./components/data-display/ActivityFeed",
+      filePath: "src/components/data-display/ActivityFeed.tsx",
+      sku: "@atom/templates-patterns/activity-feed",
+      humanLabel: "ActivityFeed",
+      humanDescription: "Displays a chronological list of recent activities, typically with a timeline indicator."
+    },
+    {
+      id: "area-chart",
+      name: "AreaChart",
+      version: "1.0.0",
+      description: "A theme-aware area chart component powered by Recharts, ideal for showing trends and volume over time. Supports multi-series and stacked mode.",
+      tags: [
+        "charts",
+        "data-visualization",
+        "rechart",
+        "trend",
+        "timeseries"
+      ],
+      category: "charts",
+      props: [
+        {
+          name: "data",
+          type: "any[]",
+          description: "The dataset for the chart."
+        },
+        {
+          name: "dataKeyX",
+          type: "string",
+          description: "The key used for the X-axis (e.g., 'day', 'month')."
+        },
+        {
+          name: "areaKeys",
+          type: "string[]",
+          description: "One or more data keys to render as filled area series."
+        },
+        {
+          name: "colors",
+          type: "string[]",
+          description: "Optional override colors per series. Falls back to theme palette."
+        },
+        {
+          name: "stacked",
+          type: "boolean",
+          description: "Stack area series on top of each other. Default false."
+        },
+        {
+          name: "fillOpacity",
+          type: "number",
+          description: "Opacity of the area fill. Default 0.2."
+        }
+      ],
+      importPath: "./components/data-display/AreaChart",
+      filePath: "src/components/data-display/AreaChart.tsx",
+      sku: "@atom/charts/area-chart",
+      humanLabel: "AreaChart",
+      humanDescription: "A theme-aware area chart component powered by Recharts, ideal for showing trends and volume over time. Supports multi-series and stacked mode."
+    },
+    {
+      id: "bar-chart",
+      name: "BarChart",
+      version: "1.0.0",
+      description: "A theme-aware bar chart component powered by Recharts, for comparing categorical data.",
+      tags: [
+        "charts",
+        "data-visualization",
+        "rechart"
+      ],
+      category: "charts",
+      props: [
+        {
+          name: "data",
+          type: "any[]",
+          description: "The dataset for the chart. Each object in the array represents a category."
+        },
+        {
+          name: "dataKeyX",
+          type: "string",
+          description: "The key from your data objects to be used for the X-axis (e.g., 'name', 'category')."
+        },
+        {
+          name: "barKeys",
+          type: "{ key: string; color: string }[]",
+          description: "An array of objects, each specifying a data key for a bar series and its color (e.g., `[{ key: 'pv', color: '#8884d8' }]`)."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "An optional title to display above the chart."
+        }
+      ],
+      importPath: "./components/data-display/BarChart",
+      filePath: "src/components/data-display/BarChart.tsx",
+      sku: "@atom/charts/bar-chart",
+      humanLabel: "BarChart",
+      humanDescription: "A theme-aware bar chart component powered by Recharts, for comparing categorical data."
+    },
+    {
+      id: "chart-with-table",
+      name: "ChartWithTable",
+      version: "1.0.0",
+      description: "A wrapper component that combines a chart with an option to view its underlying data in a table within a drawer.",
+      tags: [
+        "templates",
+        "charts",
+        "data-display",
+        "pattern",
+        "dashboard"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The title displayed at the top of the chart card."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The chart component itself (e.g., <BarChart />, <LineChart />)."
+        },
+        {
+          name: "data",
+          type: "any[]",
+          description: "The raw data array used to render the chart and the table view."
+        },
+        {
+          name: "tableHeaders",
+          type: "TableHeader[]",
+          description: "The column definitions for the table view."
+        }
+      ],
+      importPath: "./components/data-display/ChartWithTable",
+      filePath: "src/components/data-display/ChartWithTable.tsx",
+      sku: "@atom/templates-patterns/chart-with-table",
+      humanLabel: "ChartWithTable",
+      humanDescription: "A wrapper component that combines a chart with an option to view its underlying data in a table within a drawer."
+    },
+    {
+      id: "code-block",
+      name: "CodeBlock",
+      version: "1.0.0",
+      description: "A component for displaying formatted and syntax-highlighted code snippets.",
+      tags: [
+        "ui",
+        "data-display",
+        "code"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "code",
+          type: "string",
+          description: "The string of code to display."
+        },
+        {
+          name: "language",
+          type: "string",
+          description: "The programming language for syntax highlighting (e.g., 'tsx', 'css', 'javascript')."
+        }
+      ],
+      importPath: "./components/data-display/CodeBlock",
+      filePath: "src/components/data-display/CodeBlock.tsx",
+      sku: "@atom/primitive/code-block",
+      humanLabel: "CodeBlock",
+      humanDescription: "A component for displaying formatted and syntax-highlighted code snippets."
+    },
+    {
+      id: "data-table",
+      name: "DataTable",
+      version: "1.0.0",
+      description: 'A "Smart" data grid that renders data based on a simple JSON schema.',
+      tags: [
+        "data-display",
+        "grid",
+        "table",
+        "smart-component"
+      ],
+      category: "data-display",
+      props: [],
+      importPath: "./components/data-display/DataTable",
+      filePath: "src/components/data-display/DataTable.tsx",
+      sku: "@molecule/data/data-table",
+      humanLabel: "DataTable",
+      humanDescription: 'A "Smart" data grid that renders data based on a simple JSON schema.'
+    },
+    {
+      id: "kpi-grid",
+      name: "KpiGrid",
+      version: "1.0.0",
+      description: "A framework-level abstraction that takes raw data and metric configurations to auto-calculate values and render a grid of StatCards.",
+      tags: [
+        "data-display",
+        "metrics",
+        "grid",
+        "templates"
+      ],
+      category: "templates-patterns",
+      props: [],
+      importPath: "./components/data-display/KpiGrid",
+      filePath: "src/components/data-display/KpiGrid.tsx",
+      sku: "@atom/templates-patterns/kpi-grid",
+      humanLabel: "KpiGrid",
+      humanDescription: "A framework-level abstraction that takes raw data and metric configurations to auto-calculate values and render a grid of StatCards."
+    },
+    {
+      id: "line-chart",
+      name: "LineChart",
+      version: "1.0.0",
+      description: "A theme-aware line chart component...",
+      tags: [
+        "charts",
+        "data-visualization",
+        "rechart"
+      ],
+      category: "charts",
+      props: [],
+      importPath: "./components/data-display/LineChart",
+      filePath: "src/components/data-display/LineChart.tsx",
+      sku: "@atom/charts/line-chart",
+      humanLabel: "LineChart",
+      humanDescription: "A theme-aware line chart component..."
+    },
+    {
+      id: "pie-chart",
+      name: "PieChart",
+      version: "1.0.0",
+      description: "A theme-aware pie chart component powered by Recharts, for showing proportional relationships of parts to a whole.",
+      tags: [
+        "charts",
+        "data-visualization",
+        "rechart"
+      ],
+      category: "charts",
+      props: [],
+      importPath: "./components/data-display/PieChart",
+      filePath: "src/components/data-display/PieChart.tsx",
+      sku: "@atom/charts/pie-chart",
+      humanLabel: "PieChart",
+      humanDescription: "A theme-aware pie chart component powered by Recharts, for showing proportional relationships of parts to a whole."
+    },
+    {
+      id: "scatter-chart",
+      name: "ScatterChart",
+      version: "1.0.0",
+      description: "A theme-aware scatter plot for visualising correlations and distributions between two numeric variables.",
+      tags: [
+        "charts",
+        "data-visualization",
+        "rechart",
+        "scatter",
+        "correlation"
+      ],
+      category: "charts",
+      props: [
+        {
+          name: "data",
+          type: "any[]",
+          description: "Dataset. Each object must have numeric values at dataKeyX and dataKeyY."
+        },
+        {
+          name: "dataKeyX",
+          type: "string",
+          description: "Key for the X-axis values."
+        },
+        {
+          name: "dataKeyY",
+          type: "string",
+          description: "Key for the Y-axis values."
+        },
+        {
+          name: "dataKeyZ",
+          type: "string",
+          description: "Optional key for bubble size (Z-axis). Omit for uniform dot size."
+        },
+        {
+          name: "xLabel",
+          type: "string",
+          description: "Optional label shown below the X-axis."
+        },
+        {
+          name: "yLabel",
+          type: "string",
+          description: "Optional label shown beside the Y-axis."
+        },
+        {
+          name: "colors",
+          type: "string[]",
+          description: "Optional override colors. Falls back to theme palette."
+        }
+      ],
+      importPath: "./components/data-display/ScatterChart",
+      filePath: "src/components/data-display/ScatterChart.tsx",
+      sku: "@atom/charts/scatter-chart",
+      humanLabel: "ScatterChart",
+      humanDescription: "A theme-aware scatter plot for visualising correlations and distributions between two numeric variables."
+    },
+    {
+      id: "stat-card",
+      name: "StatCard",
+      version: "1.0.0",
+      description: "A specialized card for prominently displaying a key statistic, including an icon and optional trend indicator.",
+      tags: [
+        "templates",
+        "data-display",
+        "metrics",
+        "dashboard",
+        "ui"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The label for the displayed metric."
+        },
+        {
+          name: "value",
+          type: "string",
+          description: "The main value of the statistic."
+        },
+        {
+          name: "icon",
+          type: "IconName",
+          description: "The name of a Lucide icon to represent the metric."
+        },
+        {
+          name: "changeText",
+          type: "string",
+          description: "Text describing the change in the metric (e.g., '10% since last month')."
+        },
+        {
+          name: "changeDirection",
+          type: `"'positive' | 'negative'"`,
+          description: "The direction of change, which determines the color of the badge."
+        },
+        {
+          name: "footerText",
+          type: "string",
+          description: "Optional text displayed at the bottom of the card for context."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling."
+        }
+      ],
+      importPath: "./components/data-display/StatCard",
+      filePath: "src/components/data-display/StatCard.tsx",
+      sku: "@atom/templates-patterns/stat-card",
+      humanLabel: "StatCard",
+      humanDescription: "A specialized card for prominently displaying a key statistic, including an icon and optional trend indicator."
+    },
+    {
+      id: "status-badge",
+      name: "StatusBadge",
+      version: "1.0.1",
+      description: "A consistent status indicator featuring a color-coded dot and an optional text label. Essential for IoT devices and system states.",
+      tags: [
+        "status",
+        "badge",
+        "iot",
+        "indicator",
+        "dot"
+      ],
+      category: "data-display",
+      props: [
+        {
+          name: "status",
+          type: "'online' | 'offline' | 'error' | 'warning' | 'active'",
+          description: "One of the 5 built-in presets. Determines the color of the dot. Omit and use `color`+`label` for a status outside this set."
+        },
+        {
+          name: "color",
+          type: "string",
+          description: "Tailwind background class for the dot (e.g. 'bg-emerald-500'). Overrides the `status` preset's color when both are given."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: 'Custom text to display next to the dot. If omitted, displays the status name (e.g., "Online").'
+        },
+        {
+          name: "showDot",
+          type: "boolean",
+          description: "Whether to show the colored indicator dot.",
+          default: "true"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/data-display/StatusBadge",
+      filePath: "src/components/data-display/StatusBadge.tsx",
+      sku: "@molecule/data/status-badge",
+      humanLabel: "StatusBadge",
+      humanDescription: "A consistent status indicator featuring a color-coded dot and an optional text label. Essential for IoT devices and system states."
+    },
+    {
+      id: "table",
+      name: "Table",
+      version: "1.0.0",
+      description: "A simple, theme-aware HTML table component for displaying tabular data, with support for custom cell rendering and empty states.",
+      tags: [
+        "data-display",
+        "table",
+        "ui"
+      ],
+      category: "data-display",
+      props: [
+        {
+          name: "headers",
+          type: '"{ key: string; label: string; render?: (value: any, row: Record<string, any>) => React.ReactNode; }[]"',
+          description: "An array defining the table columns, including a `key`, `label`, and optional `render` function for custom cell content."
+        },
+        {
+          name: "data",
+          type: '"Record<string, any>[]"',
+          description: "An array of objects, where each object represents a row of data for the table."
+        },
+        {
+          name: "caption",
+          type: "string",
+          description: "An optional caption for the table, providing a title or summary."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the table container."
+        }
+      ],
+      importPath: "./components/data-display/Table",
+      filePath: "src/components/data-display/Table.tsx",
+      sku: "@molecule/data/table",
+      humanLabel: "Table",
+      humanDescription: "A simple, theme-aware HTML table component for displaying tabular data, with support for custom cell rendering and empty states."
+    },
+    {
+      id: "alert",
+      name: "Alert",
+      version: "1.0.0",
+      description: "Displays static, in-page messages to convey important information like success, warnings, or errors.",
+      tags: [
+        "feedback",
+        "message",
+        "notification",
+        "ui"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The main heading or concise summary of the alert message."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "Optional additional content or a longer description for the alert."
+        },
+        {
+          name: "variant",
+          type: "'info' | 'success' | 'warning' | 'danger'",
+          description: "Defines the color scheme, icon, and semantic meaning of the alert.",
+          default: "'info'"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the alert container."
+        }
+      ],
+      importPath: "./components/feedback/Alert",
+      filePath: "src/components/feedback/Alert.tsx",
+      sku: "@molecule/feedback/alert",
+      humanLabel: "Alert",
+      humanDescription: "Displays static, in-page messages to convey important information like success, warnings, or errors."
+    },
+    {
+      id: "empty-state",
+      name: "EmptyState",
+      version: "1.0.0",
+      description: "A component for displaying a message when there is no data or content to show.",
+      tags: [
+        "ui",
+        "feedback",
+        "empty",
+        "placeholder"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "icon",
+          type: "React.ComponentProps<typeof Icon>['name']",
+          description: "The name of a Lucide icon to visually represent the empty state."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "The main heading or title for the empty state message."
+        },
+        {
+          name: "description",
+          type: "string",
+          description: "A longer, descriptive text explaining the empty state or next steps."
+        },
+        {
+          name: "actionButton",
+          type: "React.ReactNode",
+          description: "An optional React node, typically a Button, to provide a primary action."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes for custom styling of the container."
+        }
+      ],
+      importPath: "./components/feedback/EmptyState",
+      filePath: "src/components/feedback/EmptyState.tsx",
+      sku: "@molecule/feedback/empty-state",
+      humanLabel: "EmptyState",
+      humanDescription: "A component for displaying a message when there is no data or content to show."
+    },
+    {
+      id: "plan",
+      name: "Plan",
+      version: "1.0.0",
+      description: "A strategic component for displaying roadmaps, checklists, or step-by-step plans.",
+      tags: [
+        "feedback",
+        "list",
+        "roadmap",
+        "plan"
+      ],
+      category: "feedback",
+      props: [],
+      importPath: "./components/feedback/Plan",
+      filePath: "src/components/feedback/Plan.tsx",
+      sku: "@molecule/feedback/plan",
+      humanLabel: "Plan",
+      humanDescription: "A strategic component for displaying roadmaps, checklists, or step-by-step plans."
+    },
+    {
+      id: "skeleton",
+      name: "Skeleton",
+      version: "1.0.0",
+      description: "A pulsing placeholder block for content that hasn't loaded yet. Size and shape it via className (e.g. 'h-16 w-full', 'h-3 w-24 rounded-full') to match the real content it stands in for.",
+      tags: [
+        "feedback",
+        "loading",
+        "skeleton",
+        "placeholder"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Sizing/shape classes applied on top of the base pulse + rounded-corner styling."
+        }
+      ],
+      importPath: "./components/feedback/Skeleton",
+      filePath: "src/components/feedback/Skeleton.tsx",
+      sku: "@molecule/feedback/skeleton",
+      humanLabel: "Skeleton",
+      humanDescription: "A pulsing placeholder block for content that hasn't loaded yet. Size and shape it via className (e.g. 'h-16 w-full', 'h-3 w-24 rounded-full') to match the real content it stands in for."
+    },
+    {
+      id: "tippy-tooltip",
+      name: "TippyTooltip",
+      version: "1.0.0",
+      description: "A flexible and theme-aware tooltip component that displays additional information on hover.",
+      tags: [
+        "ui",
+        "feedback",
+        "tooltip",
+        "overlay"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The element that triggers the tooltip when hovered over (or clicked, etc.)."
+        },
+        {
+          name: "content",
+          type: "React.ReactNode",
+          description: "The content to be displayed inside the tooltip."
+        },
+        {
+          name: "placement",
+          type: "TippyProps['placement']",
+          description: "The position of the tooltip relative to its trigger element (e.g., 'top', 'bottom', 'left', 'right').",
+          default: "'top'"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the tooltip content."
+        }
+      ],
+      importPath: "./components/feedback/TippyTooltip",
+      filePath: "src/components/feedback/TippyTooltip.tsx",
+      sku: "@molecule/feedback/tippy-tooltip",
+      humanLabel: "TippyTooltip",
+      humanDescription: "A flexible and theme-aware tooltip component that displays additional information on hover."
+    },
+    {
+      id: "toast",
+      name: "Toast",
+      version: "1.0.0",
+      description: "A single, transient notification message that appears briefly to provide feedback.",
+      tags: [
+        "feedback",
+        "notification",
+        "message",
+        "ui"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "id",
+          type: "string",
+          description: "A unique identifier for this specific toast instance."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "An optional title for the toast notification."
+        },
+        {
+          name: "message",
+          type: "string",
+          description: "The main text content of the toast notification."
+        },
+        {
+          name: "type",
+          type: `"'success' | 'error' | 'info' | 'warning'"`,
+          description: "Defines the visual style and semantic meaning of the toast.",
+          default: "'info'"
+        },
+        {
+          name: "duration",
+          type: "number",
+          description: "How long the toast should remain visible in milliseconds. Set to `0` for a sticky toast.",
+          default: "5000"
+        },
+        {
+          name: "onDismiss",
+          type: "(id: string) => void",
+          description: "Callback function triggered when the toast is dismissed."
+        }
+      ],
+      importPath: "./components/feedback/Toast",
+      filePath: "src/components/feedback/Toast.tsx",
+      sku: "@molecule/feedback/toast",
+      humanLabel: "Toast",
+      humanDescription: "A single, transient notification message that appears briefly to provide feedback."
+    },
+    {
+      id: "use-toast",
+      name: "useToast",
+      version: "1.0.0",
+      description: "A React hook to easily add and dismiss toast notifications anywhere within a `ToastProvider`.",
+      tags: [
+        "hook",
+        "feedback",
+        "notification"
+      ],
+      category: "feedback",
+      props: [],
+      importPath: "./components/feedback/ToastProvider",
+      filePath: "src/components/feedback/ToastProvider.tsx",
+      sku: "@molecule/feedback/use-toast",
+      humanLabel: "useToast",
+      humanDescription: "A React hook to easily add and dismiss toast notifications anywhere within a `ToastProvider`."
+    },
+    {
+      id: "toast-provider",
+      name: "ToastProvider",
+      version: "1.0.0",
+      description: "Provides a context for displaying transient notifications (toasts). Wrap your application with this component.",
+      tags: [
+        "feedback",
+        "notification",
+        "context",
+        "provider"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The React nodes that will have access to the `useToast` hook. Typically wraps the entire application."
+        }
+      ],
+      importPath: "./components/feedback/ToastProvider",
+      filePath: "src/components/feedback/ToastProvider.tsx",
+      sku: "@molecule/feedback/toast-provider",
+      humanLabel: "ToastProvider",
+      humanDescription: "Provides a context for displaying transient notifications (toasts). Wrap your application with this component."
+    },
+    {
+      id: "button-group",
+      name: "ButtonGroup",
+      version: "1.0.0",
+      description: "Groups multiple Button components visually and can function as a segmented control (radio group).",
+      tags: [
+        "ui",
+        "form",
+        "action",
+        "group"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The `Button` components to be grouped together."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes to apply to the container."
+        },
+        {
+          name: "value",
+          type: "string | number",
+          description: "For segmented controls, the value of the currently selected button."
+        },
+        {
+          name: "onValueChange",
+          type: "(value: string | number) => void",
+          description: "Callback function for segmented controls, called when the selected value changes."
+        }
+      ],
+      importPath: "./components/forms/ButtonGroup",
+      filePath: "src/components/forms/ButtonGroup.tsx",
+      sku: "@atom/form/button-group",
+      humanLabel: "ButtonGroup",
+      humanDescription: "Groups multiple Button components visually and can function as a segmented control (radio group)."
+    },
+    {
+      id: "checkbox",
+      name: "Checkbox",
+      version: "1.0.0",
+      description: "A standard checkbox input for selecting one or more options from a set.",
+      tags: [
+        "form",
+        "input",
+        "selection",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "React.ReactNode",
+          description: "The visible label associated with the checkbox. Can be text or JSX."
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "A unique HTML `id` for the input element. Automatically generated if not provided."
+        },
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Controls whether the checkbox is currently checked."
+        },
+        {
+          name: "onChange",
+          type: "(event: React.ChangeEvent<HTMLInputElement>) => void",
+          description: "Callback function triggered when the checkbox's checked state changes."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "If true, the checkbox is unclickable and styled as disabled."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the input element."
+        }
+      ],
+      importPath: "./components/forms/Checkbox",
+      filePath: "src/components/forms/Checkbox.tsx",
+      sku: "@atom/form/checkbox",
+      humanLabel: "Checkbox",
+      humanDescription: "A standard checkbox input for selecting one or more options from a set."
+    },
+    {
+      id: "combo-box",
+      name: "ComboBox",
+      version: "1.0.0",
+      description: "A text input with an integrated dropdown list of selectable options, allowing both typing and selection.",
+      tags: [
+        "form",
+        "input",
+        "select",
+        "dropdown",
+        "autocomplete",
+        "ui"
+      ],
+      category: "form",
+      props: [],
+      importPath: "./components/forms/ComboBox",
+      filePath: "src/components/forms/ComboBox.tsx",
+      sku: "@atom/form/combo-box",
+      humanLabel: "ComboBox",
+      humanDescription: "A text input with an integrated dropdown list of selectable options, allowing both typing and selection."
+    },
+    {
+      id: "date-picker",
+      name: "DatePicker",
+      version: "1.0.0",
+      description: 'A theme-aware calendar input for selecting dates. Wraps react-datepicker to ensure consistent styling and "Zero Jank" layout stability.',
+      tags: [
+        "form",
+        "input",
+        "date",
+        "calendar",
+        "ui"
+      ],
+      category: "form",
+      props: [],
+      importPath: "./components/forms/DatePicker",
+      filePath: "src/components/forms/DatePicker.tsx",
+      sku: "@atom/form/date-picker",
+      humanLabel: "DatePicker",
+      humanDescription: 'A theme-aware calendar input for selecting dates. Wraps react-datepicker to ensure consistent styling and "Zero Jank" layout stability.'
+    },
+    {
+      id: "file-upload",
+      name: "FileUpload",
+      version: "1.0.0",
+      description: "A modern drag-and-drop file upload area with visual feedback and file listing.",
+      tags: [
+        "form",
+        "input",
+        "upload",
+        "files",
+        "ui"
+      ],
+      category: "form",
+      props: [],
+      importPath: "./components/forms/FileUpload",
+      filePath: "src/components/forms/FileUpload.tsx",
+      sku: "@atom/form/file-upload",
+      humanLabel: "FileUpload",
+      humanDescription: "A modern drag-and-drop file upload area with visual feedback and file listing."
+    },
+    {
+      id: "form-template",
+      name: "FormTemplate",
+      version: "1.0.0",
+      description: "A data-driven form builder that renders a grid of input fields from a configuration array. Now supports File Uploads and Segmented Controls.",
+      tags: [
+        "form",
+        "template",
+        "builder",
+        "input",
+        "layout"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "fields",
+          type: "FormField[]",
+          description: "An array of field definition objects."
+        },
+        {
+          name: "onSubmit",
+          type: "(formData: Record<string, any>) => void",
+          description: "Callback function triggered when the form is submitted."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the form container."
+        }
+      ],
+      importPath: "./components/forms/FormTemplate",
+      filePath: "src/components/forms/FormTemplate.tsx",
+      sku: "@atom/form/form-template",
+      humanLabel: "FormTemplate",
+      humanDescription: "A data-driven form builder that renders a grid of input fields from a configuration array. Now supports File Uploads and Segmented Controls."
+    },
+    {
+      id: "input",
+      name: "Input",
+      version: "1.0.1",
+      description: "A theme-aware text input with label, icon, helper text, and validation state support. Strategic purpose: single controlled input atom for all text-based data entry across Ramme apps. Forwards all standard HTML input attributes via spread.",
+      tags: [
+        "form",
+        "input",
+        "ui",
+        "text"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "string",
+          description: "Optional label displayed above the input field."
+        },
+        {
+          name: "icon",
+          type: "string",
+          description: "Optional Lucide icon name displayed inside the leading edge of the input."
+        },
+        {
+          name: "helperText",
+          type: "string",
+          description: "Supporting text rendered below the input. Appears in destructive color when error is true."
+        },
+        {
+          name: "error",
+          type: "boolean",
+          description: "If true, applies destructive border styling to indicate a validation error. Defaults to false."
+        },
+        {
+          name: "required",
+          type: "boolean",
+          description: "If true, appends a required (*) indicator next to the label. Defaults to false."
+        },
+        {
+          name: "showOptionalLabel",
+          type: "boolean",
+          description: "If true, appends an (optional) label when the field is not required. Defaults to false."
+        },
+        {
+          name: "containerClassName",
+          type: "string",
+          description: "Additional CSS classes applied to the outer container div."
+        }
+      ],
+      importPath: "./components/forms/Input",
+      filePath: "src/components/forms/Input.tsx",
+      sku: "@atom/form/input",
+      humanLabel: "Input",
+      humanDescription: "A theme-aware text input with label, icon, helper text, and validation state support. Strategic purpose: single controlled input atom for all text-based data entry across Ramme apps. Forwards all standard HTML input attributes via spread."
+    },
+    {
+      id: "label",
+      name: "Label",
+      version: "1.0.0",
+      description: "The accessible caption for a form control. Strategic purpose: pairs a field with its name so clicking the label focuses the input, and so screen readers announce the two together. Built on Radix's Label primitive — set `htmlFor` to the input's `id`, or nest the input inside. Dims automatically when the paired control is disabled (via `peer-disabled`).",
+      tags: [
+        "forms",
+        "label",
+        "caption",
+        "accessibility",
+        "field"
+      ],
+      category: "forms",
+      props: [
+        {
+          name: "htmlFor",
+          type: "string",
+          description: "The `id` of the form control this labels. Required for the click-to-focus and screen-reader association unless the control is nested inside."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The label text."
+        }
+      ],
+      importPath: "./components/forms/Label",
+      filePath: "src/components/forms/Label.tsx",
+      sku: "@molecule/form/label",
+      humanLabel: "Label",
+      humanDescription: "The accessible caption for a form control. Strategic purpose: pairs a field with its name so clicking the label focuses the input, and so screen readers announce the two together. Built on Radix's Label primitive — set `htmlFor` to the input's `id`, or nest the input inside. Dims automatically when the paired control is disabled (via `peer-disabled`)."
+    },
+    {
+      id: "multi-select",
+      name: "MultiSelect",
+      version: "1.0.0",
+      description: "A searchable dropdown for picking several options at once, rendering selections as removable chips. Strategic purpose: the canonical multi-value picker — use it for tag, category, and filter inputs rather than a native multiple-select or a hand-rolled checkbox list. For a single value use Select; for a free-text-plus-suggestions field use ComboBox.",
+      tags: [
+        "forms",
+        "select",
+        "multiselect",
+        "dropdown",
+        "tags",
+        "filter",
+        "input"
+      ],
+      category: "forms",
+      props: [
+        {
+          name: "options",
+          type: "Array<MultiSelectOption>",
+          description: "Selectable options, each `{ value, label }`."
+        },
+        {
+          name: "value",
+          type: "Array<MultiSelectOption>",
+          description: "Currently selected options. Controlled — pass null or [] for empty."
+        },
+        {
+          name: "onChange",
+          type: "function",
+          description: "Called with the new selection array (or null when cleared)."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "Caption rendered above the control."
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          description: "Text shown when nothing is selected."
+        },
+        {
+          name: "isSearchable",
+          type: "boolean",
+          description: "Allows typing to filter the options. Defaults to true."
+        },
+        {
+          name: "isClearable",
+          type: "boolean",
+          description: "Shows a control to clear the whole selection."
+        },
+        {
+          name: "isLoading",
+          type: "boolean",
+          description: "Shows a loading indicator inside the control."
+        },
+        {
+          name: "isDisabled",
+          type: "boolean",
+          description: "Disables interaction."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/forms/MultiSelect",
+      filePath: "src/components/forms/MultiSelect.tsx",
+      sku: "@molecule/form/multi-select",
+      humanLabel: "MultiSelect",
+      humanDescription: "A searchable dropdown for picking several options at once, rendering selections as removable chips. Strategic purpose: the canonical multi-value picker — use it for tag, category, and filter inputs rather than a native multiple-select or a hand-rolled checkbox list. For a single value use Select; for a free-text-plus-suggestions field use ComboBox."
+    },
+    {
+      id: "radio",
+      name: "Radio",
+      version: "1.0.0",
+      description: "A single radio button input, typically used within a group where only one option can be selected.",
+      tags: [
+        "form",
+        "input",
+        "selection",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "React.ReactNode",
+          description: "The visible label associated with the radio button. Can be text or JSX."
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "A unique HTML `id` for the input element. Automatically generated if not provided."
+        },
+        {
+          name: "name",
+          type: "string",
+          description: "The HTML `name` attribute, crucial for grouping radio buttons so only one can be selected."
+        },
+        {
+          name: "value",
+          type: "string | number | readonly string[]",
+          description: "The value associated with this radio button when it is selected."
+        },
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Controls whether the radio button is currently selected."
+        },
+        {
+          name: "onChange",
+          type: "(event: React.ChangeEvent<HTMLInputElement>) => void",
+          description: "Callback function triggered when the radio button's checked state changes."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "If true, the radio button is unclickable and styled as disabled."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the input element."
+        }
+      ],
+      importPath: "./components/forms/Radio",
+      filePath: "src/components/forms/Radio.tsx",
+      sku: "@atom/form/radio",
+      humanLabel: "Radio",
+      humanDescription: "A single radio button input, typically used within a group where only one option can be selected."
+    },
+    {
+      id: "search-input",
+      name: "SearchInput",
+      version: "1.0.0",
+      description: "A specialized input for search functionality, using the base Input component with a search icon.",
+      tags: [
+        "form",
+        "input",
+        "search",
+        "ui"
+      ],
+      category: "form",
+      props: [],
+      importPath: "./components/forms/SearchInput",
+      filePath: "src/components/forms/SearchInput.tsx",
+      sku: "@atom/form/search-input",
+      humanLabel: "SearchInput",
+      humanDescription: "A specialized input for search functionality, using the base Input component with a search icon."
+    },
+    {
+      id: "segmented-control",
+      name: "SegmentedControl",
+      version: "1.0.0",
+      description: 'A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List").',
+      tags: [
+        "input",
+        "toggle",
+        "switch",
+        "radio",
+        "control"
+      ],
+      category: "form",
+      props: [],
+      importPath: "./components/forms/SegmentedControl",
+      filePath: "src/components/forms/SegmentedControl.tsx",
+      sku: "@atom/form/segmented-control",
+      humanLabel: "SegmentedControl",
+      humanDescription: 'A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List").'
+    },
+    {
+      id: "select",
+      name: "Select",
+      version: "1.0.0",
+      description: "A fully theme-aware single-value dropdown selector built on react-select. Strategic purpose: replaces the native select element with a searchable, clearable atom that stays visually consistent across all Ramme themes via CSS variables, requiring no additional styling from the consumer.",
+      tags: [
+        "form",
+        "input",
+        "dropdown",
+        "select",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "options",
+          type: "Array",
+          description: "Array of selectable options. Each option requires a value (string or number) and a label (string)."
+        },
+        {
+          name: "value",
+          type: "object",
+          description: "The currently selected option object. Pass null to show the placeholder."
+        },
+        {
+          name: "onChange",
+          type: "function",
+          description: "Callback fired when the selection changes. Receives the selected option or null when cleared."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "Optional label rendered above the select control."
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          description: "Placeholder text shown when no option is selected. Defaults to Select..."
+        },
+        {
+          name: "isDisabled",
+          type: "boolean",
+          description: "If true, the select is non-interactive. Defaults to false."
+        },
+        {
+          name: "isLoading",
+          type: "boolean",
+          description: "If true, shows a loading spinner inside the control. Defaults to false."
+        },
+        {
+          name: "isClearable",
+          type: "boolean",
+          description: "If true, displays a clear button to reset the selection. Defaults to true."
+        },
+        {
+          name: "isSearchable",
+          type: "boolean",
+          description: "If true, allows the user to type to filter options. Defaults to true."
+        },
+        {
+          name: "error",
+          type: "boolean",
+          description: "If true, applies destructive border styling to indicate a validation error."
+        },
+        {
+          name: "helperText",
+          type: "string",
+          description: "Supporting text rendered below the control. Appears in destructive color when error is true."
+        }
+      ],
+      importPath: "./components/forms/Select",
+      filePath: "src/components/forms/Select.tsx",
+      sku: "@atom/form/select",
+      humanLabel: "Select",
+      humanDescription: "A fully theme-aware single-value dropdown selector built on react-select. Strategic purpose: replaces the native select element with a searchable, clearable atom that stays visually consistent across all Ramme themes via CSS variables, requiring no additional styling from the consumer."
+    },
+    {
+      id: "textarea",
+      name: "Textarea",
+      version: "1.0.0",
+      description: "A theme-aware textarea component for multi-line text input.",
+      tags: [
+        "form",
+        "input",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "string",
+          description: "An optional label to display above the textarea."
+        },
+        {
+          name: "containerClassName",
+          type: "string",
+          description: "Optional additional CSS classes for the container div."
+        }
+      ],
+      importPath: "./components/forms/Textarea",
+      filePath: "src/components/forms/Textarea.tsx",
+      sku: "@atom/form/textarea",
+      humanLabel: "Textarea",
+      humanDescription: "A theme-aware textarea component for multi-line text input."
+    },
+    {
+      id: "toggle-switch",
+      name: "ToggleSwitch",
+      version: "1.0.0",
+      description: "A theme-aware toggle switch component, offering a boolean input alternative to a checkbox.",
+      tags: [
+        "form",
+        "ui",
+        "toggle",
+        "switch",
+        "input"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Controls whether the toggle is in the 'on' (checked) or 'off' (unchecked) state."
+        },
+        {
+          name: "onChange",
+          type: "(checked: boolean) => void",
+          description: "Callback function triggered when the toggle state changes."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "An accessible text label displayed next to the toggle switch."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the toggle switch container."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "If true, the toggle will be unclickable and styled as disabled.",
+          default: "false"
+        }
+      ],
+      importPath: "./components/forms/ToggleSwitch",
+      filePath: "src/components/forms/ToggleSwitch.tsx",
+      sku: "@atom/form/toggle-switch",
+      humanLabel: "ToggleSwitch",
+      humanDescription: "A theme-aware toggle switch component, offering a boolean input alternative to a checkbox."
+    },
+    {
+      id: "circular-dial",
+      name: "CircularDial",
+      version: "1.0.0",
+      description: "A 270-degree arc gauge for a single live telemetry value, styled like a physical instrument dial.",
+      tags: [
+        "hardware",
+        "gauge",
+        "dial",
+        "telemetry",
+        "iot"
+      ],
+      category: "hardware",
+      props: [
+        {
+          name: "value",
+          type: "number",
+          description: "The current value to display and plot on the arc."
+        },
+        {
+          name: "min",
+          type: "number",
+          description: "The value at the start of the arc.",
+          default: "0"
+        },
+        {
+          name: "max",
+          type: "number",
+          description: "The value at the end of the arc.",
+          default: "100"
+        },
+        {
+          name: "label",
+          type: "string",
+          description: 'The caption shown beneath the dial (e.g., "CPU TEMP").'
+        },
+        {
+          name: "unit",
+          type: "string",
+          description: 'The unit suffix shown beneath the readout (e.g., "°C").'
+        },
+        {
+          name: "size",
+          type: "number",
+          description: "The width/height of the dial in pixels.",
+          default: "160"
+        },
+        {
+          name: "strokeWidth",
+          type: "number",
+          description: "The thickness of the arc track and indicator.",
+          default: "12"
+        },
+        {
+          name: "colorClass",
+          type: "string",
+          description: "A Tailwind text-color class applied to the live indicator arc.",
+          default: "'text-emerald-500'"
+        }
+      ],
+      importPath: "./components/hardware/CircularDial",
+      filePath: "src/components/hardware/CircularDial.tsx",
+      sku: "@atom/hardware/circular-dial",
+      humanLabel: "CircularDial",
+      humanDescription: "A 270-degree arc gauge for a single live telemetry value, styled like a physical instrument dial."
+    },
+    {
+      id: "edge-insight-terminal",
+      name: "EdgeInsightTerminal",
+      version: "1.0.0",
+      description: "A terminal-styled panel that streams an AI analysis of live edge telemetry as it arrives. Strategic purpose: pairs a device dashboard with a plain-language read of what the numbers mean, rendered progressively so the operator sees tokens as they land rather than waiting for a complete answer.",
+      tags: [
+        "hardware",
+        "ai",
+        "terminal",
+        "insight",
+        "telemetry",
+        "streaming"
+      ],
+      category: "hardware",
+      props: [
+        {
+          name: "isAnalyzing",
+          type: "boolean",
+          description: "True while a response is streaming; drives the busy affordance."
+        },
+        {
+          name: "insightStream",
+          type: "string",
+          description: "The accumulated response text so far."
+        },
+        {
+          name: "triggerAnalysis",
+          type: "function",
+          description: "Starts an analysis run."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/hardware/EdgeInsightTerminal",
+      filePath: "src/components/hardware/EdgeInsightTerminal.tsx",
+      sku: "@atom/hardware/edge-insight-terminal",
+      humanLabel: "EdgeInsightTerminal",
+      humanDescription: "A terminal-styled panel that streams an AI analysis of live edge telemetry as it arrives. Strategic purpose: pairs a device dashboard with a plain-language read of what the numbers mean, rendered progressively so the operator sees tokens as they land rather than waiting for a complete answer."
+    },
+    {
+      id: "hardware-command-button",
+      name: "HardwareCommandButton",
+      version: "1.0.0",
+      description: "A command trigger that shows the full round trip to a physical device — transmitting, awaiting acknowledgement, then success or failure. Strategic purpose: edge commands are not instant and can fail silently; this makes the in-flight and unacknowledged states visible instead of leaving the operator guessing. Drive `status` from your MQTT publish/ack cycle.",
+      tags: [
+        "hardware",
+        "button",
+        "command",
+        "iot",
+        "mqtt",
+        "control",
+        "telemetry"
+      ],
+      category: "hardware",
+      props: [
+        {
+          name: "label",
+          type: "string",
+          description: "The command's name."
+        },
+        {
+          name: "status",
+          type: "string",
+          description: "Lifecycle state: 'idle', 'transmitting', 'awaiting_ack', 'success', or 'error'."
+        },
+        {
+          name: "onClick",
+          type: "function",
+          description: "Fires the command."
+        },
+        {
+          name: "icon",
+          type: "ReactNode",
+          description: "Optional leading icon."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "Disables the trigger."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/hardware/HardwareCommandButton",
+      filePath: "src/components/hardware/HardwareCommandButton.tsx",
+      sku: "@atom/hardware/hardware-command-button",
+      humanLabel: "HardwareCommandButton",
+      humanDescription: "A command trigger that shows the full round trip to a physical device — transmitting, awaiting acknowledgement, then success or failure. Strategic purpose: edge commands are not instant and can fail silently; this makes the in-flight and unacknowledged states visible instead of leaving the operator guessing. Drive `status` from your MQTT publish/ack cycle."
+    },
+    {
+      id: "sparkline",
+      name: "Sparkline",
+      version: "1.0.0",
+      description: "A compact, axis-less trend line for showing the shape of a series inline — in a table cell, a stat tile, or next to a live value. Strategic purpose: conveys direction and volatility in the space of a word, where a full chart would not fit. Auto-scales to the data's own min/max with 10% vertical padding so peaks are never clipped. For a full chart with axes and tooltips, use LineChart instead.",
+      tags: [
+        "data-display",
+        "chart",
+        "trend",
+        "sparkline",
+        "inline",
+        "telemetry"
+      ],
+      category: "hardware",
+      props: [
+        {
+          name: "data",
+          type: "Array<number>",
+          description: "The series to plot, oldest first. A single point renders a flat mid-line; an empty array renders nothing."
+        },
+        {
+          name: "width",
+          type: "number",
+          description: "SVG width in px. Defaults to 100."
+        },
+        {
+          name: "height",
+          type: "number",
+          description: "SVG height in px. Defaults to 24."
+        },
+        {
+          name: "colorClass",
+          type: "string",
+          description: "Semantic text-color utility driving the stroke via currentColor. Defaults to text-success. Use a semantic token (text-success, text-destructive, text-primary) — never a numeric palette shade, which will not adapt across themes."
+        },
+        {
+          name: "strokeWidth",
+          type: "number",
+          description: "Line thickness in px. Defaults to 2."
+        }
+      ],
+      importPath: "./components/hardware/Sparkline",
+      filePath: "src/components/hardware/Sparkline.tsx",
+      sku: "@atom/hardware/sparkline",
+      humanLabel: "Sparkline",
+      humanDescription: "A compact, axis-less trend line for showing the shape of a series inline — in a table cell, a stat tile, or next to a live value. Strategic purpose: conveys direction and volatility in the space of a word, where a full chart would not fit. Auto-scales to the data's own min/max with 10% vertical padding so peaks are never clipped. For a full chart with axes and tooltips, use LineChart instead."
+    },
+    {
+      id: "dense-metric-ribbon",
+      name: "DenseMetricRibbon",
+      version: "1.0.0",
+      description: "A compact horizontal strip of KPIs with optional trend arrows. Strategic purpose: summary numbers above a collection, where a row of StatCards would eat too much vertical space. Pairs with CollectionLayout's `metricsRibbon` slot. Use StatCard or KpiGrid when the metrics are the page's main subject.",
+      tags: [
+        "data-display",
+        "metrics",
+        "kpi",
+        "ribbon",
+        "summary",
+        "dashboard"
+      ],
+      category: "data-display",
+      props: [
+        {
+          name: "metrics",
+          type: "Array<MetricItem>",
+          description: "The metrics to show. Each is `{ id, label, value, trend?, trendValue?, icon?, intent? }`."
+        },
+        {
+          name: "bordered",
+          type: "boolean",
+          description: "Draws a border around the ribbon."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/layout/DenseMetricRibbon",
+      filePath: "src/components/layout/DenseMetricRibbon.tsx",
+      sku: "@molecule/data/dense-metric-ribbon",
+      humanLabel: "DenseMetricRibbon",
+      humanDescription: "A compact horizontal strip of KPIs with optional trend arrows. Strategic purpose: summary numbers above a collection, where a row of StatCards would eat too much vertical space. Pairs with CollectionLayout's `metricsRibbon` slot. Use StatCard or KpiGrid when the metrics are the page's main subject."
+    },
+    {
+      id: "page-header",
+      name: "PageHeader",
+      version: "1.0.0",
+      description: "Displays the main header section of a page, including a title, optional description, and a slot for action buttons.",
+      tags: [
+        "layout",
+        "typography",
+        "header",
+        "ui",
+        "template"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The main title of the page."
+        },
+        {
+          name: "description",
+          type: "string",
+          description: "A brief descriptive subtitle displayed below the main title."
+        },
+        {
+          name: "actions",
+          type: "React.ReactNode",
+          description: "A slot for action buttons or other controls, typically aligned to the right of the header."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the page header container."
+        }
+      ],
+      importPath: "./components/layout/PageHeader",
+      filePath: "src/components/layout/PageHeader.tsx",
+      sku: "@atom/templates-patterns/page-header",
+      humanLabel: "PageHeader",
+      humanDescription: "Displays the main header section of a page, including a title, optional description, and a slot for action buttons."
+    },
+    {
+      id: "section-header",
+      name: "SectionHeader",
+      version: "1.0.1",
+      description: "A simple, consistent header for organizing sections of content within a page.",
+      tags: [
+        "layout",
+        "typography",
+        "header",
+        "ui"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The main title for the content section."
+        },
+        {
+          name: "description",
+          type: "string",
+          description: "Optional additional descriptive text below the title."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling."
+        }
+      ],
+      importPath: "./components/layout/SectionHeader",
+      filePath: "src/components/layout/SectionHeader.tsx",
+      sku: "@atom/templates-patterns/section-header",
+      humanLabel: "SectionHeader",
+      humanDescription: "A simple, consistent header for organizing sections of content within a page."
+    },
+    {
+      id: "data-card",
+      name: "DataCard",
+      version: "1.0.0",
+      description: "A Card that owns its own loading, error, and content states. Strategic purpose: the default wrapper for anything fetched — pass `loading` and `error` straight from your data hook and it renders a skeleton or an error message without the page branching on them. Use this instead of hand-rolling `{loading ? <Skeleton/> : error ? <Error/> : <Content/>}` around a plain Card.",
+      tags: [
+        "data-display",
+        "card",
+        "container",
+        "loading",
+        "error",
+        "async"
+      ],
+      category: "data-display",
+      props: [
+        {
+          name: "title",
+          type: "ReactNode",
+          description: "Card heading. Header block is omitted entirely when both title and description are absent."
+        },
+        {
+          name: "description",
+          type: "ReactNode",
+          description: "Sub-heading under the title."
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "Renders a pulsing skeleton overlay above the content."
+        },
+        {
+          name: "error",
+          type: "Error | string",
+          description: "Replaces the content with an error message. Accepts an Error or a plain string."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The content, rendered when not in an error state."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/molecular/DataCard",
+      filePath: "src/components/molecular/DataCard.tsx",
+      sku: "@molecule/data/data-card",
+      humanLabel: "DataCard",
+      humanDescription: "A Card that owns its own loading, error, and content states. Strategic purpose: the default wrapper for anything fetched — pass `loading` and `error` straight from your data hook and it renders a skeleton or an error message without the page branching on them. Use this instead of hand-rolling `{loading ? <Skeleton/> : error ? <Error/> : <Content/>}` around a plain Card."
+    },
+    {
+      id: "state-matrix",
+      name: "StateMatrix",
+      version: "1.0.0",
+      description: "A compact grid for cross-referencing entities against attributes, where each cell is a clickable state rather than free text. Strategic purpose: permission matrices, feature-by-plan grids, device-by-status boards — cases where DataTable's row model is the wrong shape. Handles its own loading and empty states.",
+      tags: [
+        "data-display",
+        "matrix",
+        "grid",
+        "table",
+        "state",
+        "permissions"
+      ],
+      category: "data-display",
+      props: [
+        {
+          name: "data",
+          type: "Array<any>",
+          description: "Rows to render."
+        },
+        {
+          name: "columns",
+          type: "Array<object>",
+          description: "Column definitions, each `{ key, label }`."
+        },
+        {
+          name: "onCellClick",
+          type: "function",
+          description: "Called with (row, columnKey) when a cell is activated."
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "Renders a loading state instead of rows."
+        },
+        {
+          name: "emptyMessage",
+          type: "string",
+          description: "Shown when data is empty."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/molecular/StateMatrix",
+      filePath: "src/components/molecular/StateMatrix.tsx",
+      sku: "@molecule/data/state-matrix",
+      humanLabel: "StateMatrix",
+      humanDescription: "A compact grid for cross-referencing entities against attributes, where each cell is a clickable state rather than free text. Strategic purpose: permission matrices, feature-by-plan grids, device-by-status boards — cases where DataTable's row model is the wrong shape. Handles its own loading and empty states."
+    },
+    {
+      id: "breadcrumb-item",
+      name: "BreadcrumbItem",
+      version: "1.0.0",
+      description: "Represents a single step or link within a `Breadcrumbs` navigation path.",
+      tags: [
+        "navigation",
+        "ui",
+        "link"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "label",
+          type: "React.ReactNode",
+          description: "The text or content displayed for this breadcrumb item."
+        },
+        {
+          name: "to",
+          type: "string",
+          description: "The URL path for this item to navigate to. If not provided, it's just text."
+        },
+        {
+          name: "isCurrent",
+          type: "boolean",
+          description: "If true, indicates this is the current page and will not be a clickable link."
+        },
+        {
+          name: "icon",
+          type: "React.ReactNode",
+          description: "An optional icon to display next to the breadcrumb label."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes for custom styling of the individual item."
+        }
+      ],
+      importPath: "./components/navigation/Breadcrumbs",
+      filePath: "src/components/navigation/Breadcrumbs.tsx",
+      sku: "@molecule/nav/breadcrumb-item",
+      humanLabel: "BreadcrumbItem",
+      humanDescription: "Represents a single step or link within a `Breadcrumbs` navigation path."
+    },
+    {
+      id: "breadcrumbs",
+      name: "Breadcrumbs",
+      version: "1.0.0",
+      description: "A navigation component that shows the user's current location within a hierarchy of pages.",
+      tags: [
+        "navigation",
+        "ui",
+        "path"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactElement<BreadcrumbItemProps>[]",
+          description: "A collection of `BreadcrumbItem` components representing the path."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes for custom styling of the breadcrumbs container."
+        }
+      ],
+      importPath: "./components/navigation/Breadcrumbs",
+      filePath: "src/components/navigation/Breadcrumbs.tsx",
+      sku: "@molecule/nav/breadcrumbs",
+      humanLabel: "Breadcrumbs",
+      humanDescription: "A navigation component that shows the user's current location within a hierarchy of pages."
+    },
+    {
+      id: "menu-divider",
+      name: "MenuDivider",
+      version: "1.0.0",
+      description: "A visual separator for grouping MenuItems within a Menu.",
+      tags: [],
+      category: "",
+      props: [],
+      importPath: "./components/navigation/Menu",
+      filePath: "src/components/navigation/Menu.tsx",
+      sku: "@atom/primitive/menu-divider",
+      humanLabel: "MenuDivider",
+      humanDescription: "A visual separator for grouping MenuItems within a Menu."
+    },
+    {
+      id: "menu-item",
+      name: "MenuItem",
+      version: "1.0.0",
+      description: "An individual selectable item within a Menu component.",
+      tags: [],
+      category: "",
+      props: [],
+      importPath: "./components/navigation/Menu",
+      filePath: "src/components/navigation/Menu.tsx",
+      sku: "@atom/primitive/menu-item",
+      humanLabel: "MenuItem",
+      humanDescription: "An individual selectable item within a Menu component."
+    },
+    {
+      id: "menu",
+      name: "Menu",
+      version: "1.0.0",
+      description: "A dropdown menu component, useful for navigation or contextual actions.",
+      tags: [],
+      category: "",
+      props: [],
+      importPath: "./components/navigation/Menu",
+      filePath: "src/components/navigation/Menu.tsx",
+      sku: "@atom/primitive/menu",
+      humanLabel: "Menu",
+      humanDescription: "A dropdown menu component, useful for navigation or contextual actions."
+    },
+    {
+      id: "mobile-nav",
+      name: "MobileNav",
+      version: "1.0.0",
+      description: 'A fixed bottom tab bar for mobile screens, providing native-feeling navigation with primary icon+label tabs and a "More" drawer for secondary links. Hidden on md: and up via Tailwind. Designed as the mobile counterpart to the desktop Sidebar.',
+      tags: [
+        "navigation",
+        "mobile",
+        "bottom-bar",
+        "shell",
+        "ui"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "tabs",
+          type: "Array",
+          description: "Primary navigation tabs displayed in the bottom bar. Each: { id, label, icon, href?, onClick? }. Recommend 4-5 max."
+        },
+        {
+          name: "secondaryItems",
+          type: "Array",
+          description: 'Secondary links shown inside the "More" drawer. Same shape as tabs.'
+        },
+        {
+          name: "activeTabId",
+          type: "string",
+          description: "The id of the currently active tab or secondary item."
+        },
+        {
+          name: "onNavigate",
+          type: "function",
+          description: "Callback fired when any tab or drawer item is tapped."
+        },
+        {
+          name: "drawerTitle",
+          type: "string",
+          description: 'Title for the "More" drawer panel. Defaults to "Menu".'
+        },
+        {
+          name: "drawerHeader",
+          type: "ReactNode",
+          description: "Optional slot rendered at the top of the drawer body."
+        },
+        {
+          name: "drawerFooter",
+          type: "ReactNode",
+          description: "Optional slot rendered in the sticky drawer footer (e.g. Logout button)."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes on the root nav bar."
+        }
+      ],
+      importPath: "./components/navigation/MobileNav",
+      filePath: "src/components/navigation/MobileNav.tsx",
+      sku: "@molecule/nav/mobile-nav",
+      humanLabel: "MobileNav",
+      humanDescription: 'A fixed bottom tab bar for mobile screens, providing native-feeling navigation with primary icon+label tabs and a "More" drawer for secondary links. Hidden on md: and up via Tailwind. Designed as the mobile counterpart to the desktop Sidebar.'
+    },
+    {
+      id: "pagination",
+      name: "Pagination",
+      version: "1.0.0",
+      description: "A navigation control for moving between pages of content.",
+      tags: [
+        "navigation",
+        "ui",
+        "data-display"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "currentPage",
+          type: "number",
+          description: "The currently active page number (1-based index)."
+        },
+        {
+          name: "totalPages",
+          type: "number",
+          description: "The total number of pages available."
+        },
+        {
+          name: "onPageChange",
+          type: "(page: number) => void",
+          description: "Callback function invoked when the user selects a new page."
+        },
+        {
+          name: "maxPageButtons",
+          type: "number",
+          description: "The maximum number of visible page number buttons.",
+          default: "5"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the container."
+        }
+      ],
+      importPath: "./components/navigation/Pagination",
+      filePath: "src/components/navigation/Pagination.tsx",
+      sku: "@molecule/nav/pagination",
+      humanLabel: "Pagination",
+      humanDescription: "A navigation control for moving between pages of content."
+    },
+    {
+      id: "stepper",
+      name: "Stepper",
+      version: "1.0.0",
+      description: "Guides users through a sequence of discrete steps, ideal for multi-step forms or onboarding flows.",
+      tags: [
+        "navigation",
+        "progress",
+        "wizard",
+        "ui"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "steps",
+          type: "{ label: string; summary?: string; }[]",
+          description: "An array of step objects, each with a `label` and optional `summary`."
+        },
+        {
+          name: "currentStep",
+          type: "number",
+          description: "The 0-based index of the currently active step."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the stepper container."
+        }
+      ],
+      importPath: "./components/navigation/Stepper",
+      filePath: "src/components/navigation/Stepper.tsx",
+      sku: "@molecule/nav/stepper",
+      humanLabel: "Stepper",
+      humanDescription: "Guides users through a sequence of discrete steps, ideal for multi-step forms or onboarding flows."
+    },
+    {
+      id: "tab-panel",
+      name: "TabPanel",
+      version: "1.0.0",
+      description: "Represents a single tab and its associated content panel within a `Tabs` component.",
+      tags: [
+        "navigation",
+        "ui",
+        "content"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "id",
+          type: "string",
+          description: "A unique identifier for this tab panel, used to link it to its header."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "The text label displayed on the tab header."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content to be displayed when this tab is active."
+        },
+        {
+          name: "icon",
+          type: "React.ReactNode",
+          description: "An optional icon to display next to the tab label in the header."
+        }
+      ],
+      importPath: "./components/navigation/Tabs",
+      filePath: "src/components/navigation/Tabs.tsx",
+      sku: "@molecule/nav/tab-panel",
+      humanLabel: "TabPanel",
+      humanDescription: "Represents a single tab and its associated content panel within a `Tabs` component."
+    },
+    {
+      id: "tabs",
+      name: "Tabs",
+      version: "1.0.1",
+      description: "A navigation component that allows users to switch between different content panels within the same area.",
+      tags: [
+        "navigation",
+        "ui",
+        "content-switcher"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactElement<TabPanelProps>[]",
+          description: "A collection of `TabPanel` components that define the tabs and their content."
+        },
+        {
+          name: "defaultActiveTab",
+          type: "string",
+          description: "The `id` of the tab that should be active by default when the component mounts."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes for custom styling of the tabs container."
+        },
+        {
+          name: "size",
+          type: "'sm' | 'md'",
+          description: "The size of the tabs. Defaults to 'md'."
+        }
+      ],
+      importPath: "./components/navigation/Tabs",
+      filePath: "src/components/navigation/Tabs.tsx",
+      sku: "@molecule/nav/tabs",
+      humanLabel: "Tabs",
+      humanDescription: "A navigation component that allows users to switch between different content panels within the same area."
+    },
+    {
+      id: "avatar",
+      name: "Avatar",
+      version: "1.0.0",
+      description: "Displays a user's profile picture or initials as a fallback, with different size options.",
+      tags: [
+        "ui",
+        "profile",
+        "user"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "name",
+          type: "string",
+          description: "The name of the user, used for generating initials if no `src` is provided."
+        },
+        {
+          name: "src",
+          type: "string",
+          description: "The URL of the image to display as the avatar. If not provided, initials are shown."
+        },
+        {
+          name: "size",
+          type: "'sm' | 'md' | 'lg'",
+          description: "Controls the dimensions and font size of the avatar.",
+          default: "'md'"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling."
+        }
+      ],
+      importPath: "./components/ui/Avatar",
+      filePath: "src/components/ui/Avatar.tsx",
+      sku: "@atom/primitive/avatar",
+      humanLabel: "Avatar",
+      humanDescription: "Displays a user's profile picture or initials as a fallback, with different size options."
+    },
+    {
+      id: "badge",
+      name: "Badge",
+      version: "1.0.0",
+      description: "A small component to display a status, count, or label.",
+      tags: [
+        "ui",
+        "label",
+        "indicator"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "variant",
+          type: `"'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'outline'"`,
+          description: "The visual style of the badge."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content to display inside the badge."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes."
+        }
+      ],
+      importPath: "./components/ui/Badge",
+      filePath: "src/components/ui/Badge.tsx",
+      sku: "@atom/primitive/badge",
+      humanLabel: "Badge",
+      humanDescription: "A small component to display a status, count, or label."
+    },
+    {
+      id: "brand-logo",
+      name: "BrandLogo",
+      version: "1.0.0",
+      description: "The application's brand mark, theme-aware and sized by a single prop. Strategic purpose: one place to swap the logo across every surface (sidebar, auth screens, header) instead of scattering an <img> or inline SVG. Inherits colour from the current theme, so it adapts across all five without per-theme assets.",
+      tags: [
+        "ui",
+        "brand",
+        "logo",
+        "identity",
+        "icon"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "logoName",
+          type: "string",
+          description: "Which mark to render: 'ramme' for the default, or any Lucide IconName to stand in for a product mark."
+        },
+        {
+          name: "size",
+          type: "number",
+          description: "Rendered size in px (or any CSS length as a string)."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/ui/BrandLogo",
+      filePath: "src/components/ui/BrandLogo.tsx",
+      sku: "@atom/primitive/brand-logo",
+      humanLabel: "BrandLogo",
+      humanDescription: "The application's brand mark, theme-aware and sized by a single prop. Strategic purpose: one place to swap the logo across every surface (sidebar, auth screens, header) instead of scattering an <img> or inline SVG. Inherits colour from the current theme, so it adapts across all five without per-theme assets."
+    },
+    {
+      id: "button",
+      name: "Button",
+      version: "1.0.0",
+      description: "The primary interactive trigger for all user actions in the Ramme design system. Strategic purpose: unifies every click target under a single theme-aware atom with built-in loading state, icon slots, and polymorphism via `asChild`. Use `variant` to communicate intent and `size` to match the surrounding layout context.",
+      tags: [
+        "ui",
+        "action",
+        "button",
+        "interactive",
+        "form"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "variant",
+          type: "string",
+          description: "Visual style of the button. One of: primary, secondary, outline, ghost, danger, link, accent. Defaults to primary."
+        },
+        {
+          name: "size",
+          type: "string",
+          description: "Size of the button. One of: sm, md, lg, icon. Defaults to md."
+        },
+        {
+          name: "asChild",
+          type: "boolean",
+          description: "If true, renders as a Radix Slot, delegating the root element to the direct child. Use this to wrap router Link components."
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "If true, replaces the left icon with an animated spinner and disables the button."
+        },
+        {
+          name: "iconLeft",
+          type: "string",
+          description: "Lucide icon name rendered to the left of the label."
+        },
+        {
+          name: "iconRight",
+          type: "string",
+          description: "Lucide icon name rendered to the right of the label."
+        },
+        {
+          name: "iconBefore",
+          type: "string",
+          description: "Alias for iconLeft. Supports common icon naming conventions."
+        },
+        {
+          name: "iconAfter",
+          type: "string",
+          description: "Alias for iconRight. Supports common icon naming conventions."
+        }
+      ],
+      importPath: "./components/ui/Button",
+      filePath: "src/components/ui/Button.tsx",
+      sku: "@atom/primitive/button",
+      humanLabel: "Button",
+      humanDescription: "The primary interactive trigger for all user actions in the Ramme design system. Strategic purpose: unifies every click target under a single theme-aware atom with built-in loading state, icon slots, and polymorphism via `asChild`. Use `variant` to communicate intent and `size` to match the surrounding layout context."
+    },
+    {
+      id: "icon",
+      name: "Icon",
+      version: "1.0.0",
+      description: "A dynamic component that renders scalable vector icons from the Lucide library.",
+      tags: [
+        "ui",
+        "graphics",
+        "svg",
+        "symbol"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "name",
+          type: "IconName",
+          description: "The specific name of the Lucide icon to display (e.g., 'user', 'settings', 'check')."
+        },
+        {
+          name: "size",
+          type: "number | string",
+          description: "The width and height of the icon in pixels or CSS units.",
+          default: "24 (implicit from Lucide default)"
+        },
+        {
+          name: "color",
+          type: "string",
+          description: "The color of the icon."
+        },
+        {
+          name: "strokeWidth",
+          type: "number | string",
+          description: "The width of the icon's stroke.",
+          default: "2 (implicit from Lucide default)"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for styling the SVG element."
+        }
+      ],
+      importPath: "./components/ui/Icon",
+      filePath: "src/components/ui/Icon.tsx",
+      sku: "@atom/primitive/icon",
+      humanLabel: "Icon",
+      humanDescription: "A dynamic component that renders scalable vector icons from the Lucide library."
+    }
+  ],
+  layouts: [
+    {
+      id: "device-card",
+      name: "DeviceCard",
+      version: "1.0.0",
+      description: "A specialized card designed to represent a physical device or a digital entity with live state. Features slots for status, live values, and interactive controls.",
+      tags: [
+        "layout",
+        "iot",
+        "device",
+        "card",
+        "dashboard"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: 'The name of the device or entity (e.g., "Living Room Thermostat").'
+        },
+        {
+          name: "description",
+          type: "string",
+          description: 'A subtitle, often used for location or ID (e.g., "Floor 2 • ID: #442").'
+        },
+        {
+          name: "icon",
+          type: "IconName",
+          description: "The icon representing the device type."
+        },
+        {
+          name: "status",
+          type: "'online' | 'offline' | 'error' | 'warning' | 'active'",
+          description: "The current operational state of the device. Changes the badge color.",
+          default: "'offline'"
+        },
+        {
+          name: "value",
+          type: "string | number",
+          description: 'The primary "live" metric to display (e.g., "72°", "1,240 rpm").'
+        },
+        {
+          name: "trend",
+          type: "string",
+          description: 'Optional secondary metric to show change (e.g., "+2%").'
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "Interactive controls to place at the bottom of the card (e.g., a ToggleSwitch or Button)."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes."
+        }
+      ],
+      importPath: "./blocks/iot/DeviceCard",
+      filePath: "src/blocks/iot/DeviceCard.tsx",
+      sku: "@chassis/layout/device-card",
+      humanLabel: "DeviceCard",
+      humanDescription: "A specialized card designed to represent a physical device or a digital entity with live state. Features slots for status, live values, and interactive controls."
+    },
+    {
+      id: "auth-layout",
+      name: "AuthLayout",
+      version: "1.0.0",
+      description: "The centred, chrome-free frame for unauthenticated screens, rendering the matched child route via an Outlet. Strategic purpose: sign-in and sign-up must not show the app shell's sidebar or header — wrap those routes in this instead of conditionally hiding chrome inside AppShell.",
+      tags: [
+        "layout",
+        "auth",
+        "login",
+        "shell",
+        "route"
+      ],
+      category: "layout",
+      props: [],
+      importPath: "./components/auth/AuthLayout",
+      filePath: "src/components/auth/AuthLayout.tsx",
+      sku: "@chassis/layout/auth-layout",
+      humanLabel: "AuthLayout",
+      humanDescription: "The centred, chrome-free frame for unauthenticated screens, rendering the matched child route via an Outlet. Strategic purpose: sign-in and sign-up must not show the app shell's sidebar or header — wrap those routes in this instead of conditionally hiding chrome inside AppShell."
+    },
+    {
+      id: "accordion-item",
+      name: "AccordionItem",
+      version: "1.0.0",
+      description: "A single, collapsible section within an `Accordion` component, consisting of a header and a hidden content body.",
+      tags: [
+        "layout",
+        "ui",
+        "collapsible",
+        "expandable"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "id",
+          type: "string",
+          description: "A unique identifier for this accordion item. Essential for `singleOpen` behavior."
+        },
+        {
+          name: "header",
+          type: "React.ReactNode",
+          description: "The content displayed in the clickable header of the accordion item."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content that will be revealed or hidden when the accordion item is toggled."
+        },
+        {
+          name: "isOpen",
+          type: "boolean",
+          description: "Controls the open/closed state for this specific item (when used in a controlled `Accordion`)."
+        },
+        {
+          name: "onToggle",
+          type: "(id: string, isOpen: boolean) => void",
+          description: "Callback triggered when the item is toggled, providing its `id` and new `isOpen` state."
+        }
+      ],
+      importPath: "./components/layout/Accordion",
+      filePath: "src/components/layout/Accordion.tsx",
+      sku: "@chassis/layout/accordion-item",
+      humanLabel: "AccordionItem",
+      humanDescription: "A single, collapsible section within an `Accordion` component, consisting of a header and a hidden content body."
+    },
+    {
+      id: "accordion",
+      name: "Accordion",
+      version: "1.0.0",
+      description: "A container for multiple collapsible sections (`AccordionItem`s), useful for organizing content.",
+      tags: [
+        "layout",
+        "ui",
+        "collapsible",
+        "expandable"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactElement<AccordionItemProps>[]",
+          description: "A collection of `AccordionItem` components to be managed by this Accordion."
+        },
+        {
+          name: "singleOpen",
+          type: "boolean",
+          description: "If true, only one `AccordionItem` can be open at a time. Opening one closes others.",
+          default: "false"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the Accordion container."
+        }
+      ],
+      importPath: "./components/layout/Accordion",
+      filePath: "src/components/layout/Accordion.tsx",
+      sku: "@chassis/layout/accordion",
+      humanLabel: "Accordion",
+      humanDescription: "A container for multiple collapsible sections (`AccordionItem`s), useful for organizing content."
+    },
+    {
+      id: "action-bar",
+      name: "ActionBar",
+      version: "1.0.0",
+      description: "A persistent bar, typically at the bottom of a form or page, used to group primary actions like 'Save' and 'Cancel'.",
+      tags: [
+        "layout",
+        "form",
+        "actions",
+        "buttons",
+        "ui",
+        "pattern"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content of the action bar, typically `Button` components."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the action bar container."
+        }
+      ],
+      importPath: "./components/layout/ActionBar",
+      filePath: "src/components/layout/ActionBar.tsx",
+      sku: "@chassis/layout/action-bar",
+      humanLabel: "ActionBar",
+      humanDescription: "A persistent bar, typically at the bottom of a form or page, used to group primary actions like 'Save' and 'Cancel'."
+    },
+    {
+      id: "app-shell",
+      name: "AppShell",
+      version: "1.0.0",
+      description: "The viewport orchestrator — the outermost frame that owns the sidebar, header, toolbar, statusbar, and inspector slots and decides how they compose. Strategic purpose: this is the only component allowed to control full-viewport geometry. Page components render inside it and must never set `h-screen` or `overflow-hidden` themselves. Pick a `layoutPreset` rather than rearranging slots by hand.",
+      tags: [
+        "layout",
+        "shell",
+        "chassis",
+        "viewport",
+        "scaffold",
+        "application"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "layoutPreset",
+          type: "string",
+          description: "Arrangement of the slots: 'dashboard' (default), 'explorer', 'studio', or 'focus'."
+        },
+        {
+          name: "sidebarSlot",
+          type: "ReactNode",
+          description: "Primary navigation region."
+        },
+        {
+          name: "headerSlot",
+          type: "ReactNode",
+          description: "Top bar, above the content canvas."
+        },
+        {
+          name: "toolbarSlot",
+          type: "ReactNode",
+          description: "Secondary action strip beneath the header."
+        },
+        {
+          name: "statusbarSlot",
+          type: "ReactNode",
+          description: "Persistent strip pinned to the bottom."
+        },
+        {
+          name: "inspectorSlot",
+          type: "ReactNode",
+          description: "Right-hand detail panel."
+        },
+        {
+          name: "isInspectorOpen",
+          type: "boolean",
+          description: "Controls inspector visibility."
+        },
+        {
+          name: "setInspectorOpen",
+          type: "function",
+          description: "Setter paired with isInspectorOpen."
+        },
+        {
+          name: "inspectorWidth",
+          type: "number",
+          description: "Inspector width in px."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The page content, rendered into the main canvas."
+        }
+      ],
+      importPath: "./components/layout/AppShell",
+      filePath: "src/components/layout/AppShell.tsx",
+      sku: "@chassis/layout/app-shell",
+      humanLabel: "AppShell",
+      humanDescription: "The viewport orchestrator — the outermost frame that owns the sidebar, header, toolbar, statusbar, and inspector slots and decides how they compose. Strategic purpose: this is the only component allowed to control full-viewport geometry. Page components render inside it and must never set `h-screen` or `overflow-hidden` themselves. Pick a `layoutPreset` rather than rearranging slots by hand."
+    },
+    {
+      id: "card",
+      name: "Card",
+      version: "1.0.1",
+      description: "The primary container atom for grouping related content. Strategic purpose: the AI's default layout wrapper. Composes with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter for structured multi-zone layouts. For simple single-zone cards, apply padding directly via className (e.g. p-4 or p-6).",
+      tags: [
+        "layout",
+        "ui",
+        "container",
+        "box",
+        "composition"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes. Apply padding here for flat single-zone cards (e.g. p-4)."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Card body. Use CardHeader + CardContent + CardFooter sub-components for structured layouts, or any content for flat layouts."
+        }
+      ],
+      importPath: "./components/layout/Card",
+      filePath: "src/components/layout/Card.tsx",
+      sku: "@chassis/layout/card",
+      humanLabel: "Card",
+      humanDescription: "The primary container atom for grouping related content. Strategic purpose: the AI's default layout wrapper. Composes with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter for structured multi-zone layouts. For simple single-zone cards, apply padding directly via className (e.g. p-4 or p-6)."
+    },
+    {
+      id: "card-header",
+      name: "CardHeader",
+      version: "1.0.1",
+      description: "The top zone of a Card. Renders children in a vertical flex column with fluid padding. Use with CardTitle and CardDescription to build a consistent card head.",
+      tags: [
+        "layout",
+        "ui",
+        "card",
+        "composition"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Typically a CardTitle and optionally a CardDescription."
+        }
+      ],
+      importPath: "./components/layout/Card",
+      filePath: "src/components/layout/Card.tsx",
+      sku: "@chassis/layout/card-header",
+      humanLabel: "CardHeader",
+      humanDescription: "The top zone of a Card. Renders children in a vertical flex column with fluid padding. Use with CardTitle and CardDescription to build a consistent card head."
+    },
+    {
+      id: "card-title",
+      name: "CardTitle",
+      version: "1.0.1",
+      description: "The primary heading inside a CardHeader. Renders as an h3 with semibold weight and tight letter-spacing. Uses fluid typography.",
+      tags: [
+        "layout",
+        "ui",
+        "card",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The title text content."
+        }
+      ],
+      importPath: "./components/layout/Card",
+      filePath: "src/components/layout/Card.tsx",
+      sku: "@chassis/layout/card-title",
+      humanLabel: "CardTitle",
+      humanDescription: "The primary heading inside a CardHeader. Renders as an h3 with semibold weight and tight letter-spacing. Uses fluid typography."
+    },
+    {
+      id: "card-description",
+      name: "CardDescription",
+      version: "1.0.1",
+      description: "A muted subtitle rendered below CardTitle inside a CardHeader. Uses muted-foreground color and fluid sm text size.",
+      tags: [
+        "layout",
+        "ui",
+        "card",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The description text content."
+        }
+      ],
+      importPath: "./components/layout/Card",
+      filePath: "src/components/layout/Card.tsx",
+      sku: "@chassis/layout/card-description",
+      humanLabel: "CardDescription",
+      humanDescription: "A muted subtitle rendered below CardTitle inside a CardHeader. Uses muted-foreground color and fluid sm text size."
+    },
+    {
+      id: "card-label",
+      name: "CardLabel",
+      version: "1.0.0",
+      description: `A compact uppercase-tracking eyebrow label for a Card's header, optionally preceded by an icon. Renders as an h2 with a small flex row layout — the "small panel label" convention used by dashboard/data panels, distinct from CardTitle's larger heading style used for content-heavy cards.`,
+      tags: [
+        "layout",
+        "ui",
+        "card",
+        "typography",
+        "label"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: 'Label text, optionally preceded by an Icon element as a sibling child (e.g. `<Icon name="git-branch" className="h-3.5 w-3.5" />Corporate Structure`).'
+        }
+      ],
+      importPath: "./components/layout/Card",
+      filePath: "src/components/layout/Card.tsx",
+      sku: "@chassis/layout/card-label",
+      humanLabel: "CardLabel",
+      humanDescription: `A compact uppercase-tracking eyebrow label for a Card's header, optionally preceded by an icon. Renders as an h2 with a small flex row layout — the "small panel label" convention used by dashboard/data panels, distinct from CardTitle's larger heading style used for content-heavy cards.`
+    },
+    {
+      id: "card-content",
+      name: "CardContent",
+      version: "1.0.1",
+      description: "The main body zone of a Card. Applies fluid padding by default so it sits flush below a CardHeader.",
+      tags: [
+        "layout",
+        "ui",
+        "card",
+        "composition"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The primary content of the card (charts, tables, form fields, etc.)."
+        }
+      ],
+      importPath: "./components/layout/Card",
+      filePath: "src/components/layout/Card.tsx",
+      sku: "@chassis/layout/card-content",
+      humanLabel: "CardContent",
+      humanDescription: "The main body zone of a Card. Applies fluid padding by default so it sits flush below a CardHeader."
+    },
+    {
+      id: "card-footer",
+      name: "CardFooter",
+      version: "1.0.1",
+      description: "The bottom action zone of a Card. Renders children in a horizontal flex row with fluid padding. Typically contains primary and secondary action buttons.",
+      tags: [
+        "layout",
+        "ui",
+        "card",
+        "composition"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Typically Button components for card-level actions (e.g. Save, Cancel, View All)."
+        }
+      ],
+      importPath: "./components/layout/Card",
+      filePath: "src/components/layout/Card.tsx",
+      sku: "@chassis/layout/card-footer",
+      humanLabel: "CardFooter",
+      humanDescription: "The bottom action zone of a Card. Renders children in a horizontal flex row with fluid padding. Typically contains primary and secondary action buttons."
+    },
+    {
+      id: "collection-layout",
+      name: "CollectionLayout",
+      version: "1.0.0",
+      description: "The standard page arrangement for any list of records — title, description, header actions, an optional metrics ribbon, an optional filter sidebar, and a bulk-action bar. Strategic purpose: every index/browse page in the app should look the same; reach for this instead of assembling a header and filter rail by hand.",
+      tags: [
+        "layout",
+        "collection",
+        "list",
+        "index",
+        "page",
+        "browse"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "Page title."
+        },
+        {
+          name: "description",
+          type: "string",
+          description: "Sub-heading beneath the title."
+        },
+        {
+          name: "headerActions",
+          type: "ReactNode",
+          description: 'Primary actions, top-right (e.g. a "New" Button).'
+        },
+        {
+          name: "metricsRibbon",
+          type: "ReactNode",
+          description: "Summary strip above the collection — pairs with DenseMetricRibbon."
+        },
+        {
+          name: "sidebar",
+          type: "ReactNode",
+          description: "Filter/facet rail beside the collection — pairs with FilterPanel."
+        },
+        {
+          name: "bulkActions",
+          type: "ReactNode",
+          description: "Action bar shown when rows are selected."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The collection itself, typically a DataTable."
+        }
+      ],
+      importPath: "./components/layout/CollectionLayout",
+      filePath: "src/components/layout/CollectionLayout.tsx",
+      sku: "@chassis/layout/collection-layout",
+      humanLabel: "CollectionLayout",
+      humanDescription: "The standard page arrangement for any list of records — title, description, header actions, an optional metrics ribbon, an optional filter sidebar, and a bulk-action bar. Strategic purpose: every index/browse page in the app should look the same; reach for this instead of assembling a header and filter rail by hand."
+    },
+    {
+      id: "detail-drawer",
+      name: "DetailDrawer",
+      version: "1.0.0",
+      description: 'A resizable side panel for inspecting one record without leaving the list. Strategic purpose: the master-detail companion — `push` compresses its siblings in a flex layout so the list stays visible and usable, while `overlay` floats above the page like a classic drawer. Use this for "click a row, see the detail" flows; use Modal when the task must block everything else.',
+      tags: [
+        "layout",
+        "drawer",
+        "panel",
+        "detail",
+        "master-detail",
+        "inspector"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "isOpen",
+          type: "boolean",
+          description: "Whether the drawer is showing."
+        },
+        {
+          name: "onClose",
+          type: "function",
+          description: "Called when the drawer requests dismissal."
+        },
+        {
+          name: "variant",
+          type: "string",
+          description: "'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to push."
+        },
+        {
+          name: "side",
+          type: "string",
+          description: "Which edge it docks to: 'left' or 'right'. Defaults to right."
+        },
+        {
+          name: "resizable",
+          type: "boolean",
+          description: "Enables the draggable handle on the inner border."
+        },
+        {
+          name: "width",
+          type: "number",
+          description: "Current width in px. Controlled — pair with onWidthChange."
+        },
+        {
+          name: "onWidthChange",
+          type: "function",
+          description: "Called with the new width while dragging."
+        },
+        {
+          name: "minWidth",
+          type: "number",
+          description: "Lower bound for resizing. Defaults to 320."
+        },
+        {
+          name: "maxWidth",
+          type: "number",
+          description: "Upper bound for resizing. Defaults to 60% of the window width."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The detail content."
+        }
+      ],
+      importPath: "./components/layout/DetailDrawer",
+      filePath: "src/components/layout/DetailDrawer.tsx",
+      sku: "@chassis/layout/detail-drawer",
+      humanLabel: "DetailDrawer",
+      humanDescription: 'A resizable side panel for inspecting one record without leaving the list. Strategic purpose: the master-detail companion — `push` compresses its siblings in a flex layout so the list stays visible and usable, while `overlay` floats above the page like a classic drawer. Use this for "click a row, see the detail" flows; use Modal when the task must block everything else.'
+    },
+    {
+      id: "drawer",
+      name: "Drawer",
+      version: "1.0.0",
+      description: "A slide-in panel that overlays the page from any edge. Strategic purpose: contextual detail views, settings panels, and secondary workflows that don't require full page navigation. Supports portal rendering, Escape key dismissal, overlay click-to-close, and body scroll lock while open.",
+      tags: [
+        "layout",
+        "overlay",
+        "panel",
+        "drawer",
+        "ui"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "isOpen",
+          type: "boolean",
+          description: "Controls the open/closed state of the drawer. Required."
+        },
+        {
+          name: "onClose",
+          type: "function",
+          description: "Callback fired when the drawer requests to close (Escape key, overlay click, or header X button). Required."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "Optional title rendered in the sticky drawer header bar."
+        },
+        {
+          name: "position",
+          type: "string",
+          description: "Edge the drawer slides in from. One of: left, right, top, bottom. Defaults to right."
+        },
+        {
+          name: "size",
+          type: "string",
+          description: "Width (for left/right) or height (for top/bottom) of the panel. Presets: sm (320px), md (480px), lg (640px), xl (80vw), full (100vw). Accepts any CSS length string. Defaults to md."
+        },
+        {
+          name: "footer",
+          type: "ReactNode",
+          description: "Optional content rendered in a sticky footer bar at the bottom of the panel. Use for primary action buttons."
+        },
+        {
+          name: "overlayDismiss",
+          type: "boolean",
+          description: "If true, clicking the dimmed background overlay closes the drawer. Defaults to true."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes applied to the drawer panel element."
+        }
+      ],
+      importPath: "./components/layout/Drawer",
+      filePath: "src/components/layout/Drawer.tsx",
+      sku: "@chassis/layout/drawer",
+      humanLabel: "Drawer",
+      humanDescription: "A slide-in panel that overlays the page from any edge. Strategic purpose: contextual detail views, settings panels, and secondary workflows that don't require full page navigation. Supports portal rendering, Escape key dismissal, overlay click-to-close, and body scroll lock while open."
+    },
+    {
+      id: "filter-panel",
+      name: "FilterPanel",
+      version: "1.0.0",
+      description: "A bordered card container for a row of filter fields (selects, inputs, date ranges), laid out as a wrapping flex row with fields aligned to their bottom edge — the standard filter-bar shape used above a data table or grid.",
+      tags: [
+        "layout",
+        "ui",
+        "filter",
+        "form",
+        "panel"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes applied to the inner flex row (not the outer card)."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Filter field elements (Select, Input, MultiSelect, etc.), typically each wrapped in its own width-constrained div."
+        }
+      ],
+      importPath: "./components/layout/FilterPanel",
+      filePath: "src/components/layout/FilterPanel.tsx",
+      sku: "@chassis/layout/filter-panel",
+      humanLabel: "FilterPanel",
+      humanDescription: "A bordered card container for a row of filter fields (selects, inputs, date ranges), laid out as a wrapping flex row with fields aligned to their bottom edge — the standard filter-bar shape used above a data table or grid."
+    },
+    {
+      id: "header",
+      name: "Header",
+      version: "1.0.0",
+      description: "The top bar region of the app shell. Strategic purpose: a semantic, theme-aware slot for branding, page title, and global actions — pass it to AppShell's `headerSlot` rather than positioning a bar yourself. For a per-page title block inside the content area, use PageHeader instead.",
+      tags: [
+        "layout",
+        "header",
+        "chrome",
+        "navigation",
+        "appbar"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Header content."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/layout/Header",
+      filePath: "src/components/layout/Header.tsx",
+      sku: "@chassis/layout/header",
+      humanLabel: "Header",
+      humanDescription: "The top bar region of the app shell. Strategic purpose: a semantic, theme-aware slot for branding, page title, and global actions — pass it to AppShell's `headerSlot` rather than positioning a bar yourself. For a per-page title block inside the content area, use PageHeader instead."
+    },
+    {
+      id: "list-item",
+      name: "ListItem",
+      version: "1.0.0",
+      description: "Represents a single item within a `List` component.",
+      tags: [
+        "ui",
+        "layout",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content of the list item."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the list item (`<li>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx",
+      sku: "@chassis/layout/list-item",
+      humanLabel: "ListItem",
+      humanDescription: "Represents a single item within a `List` component."
+    },
+    {
+      id: "list",
+      name: "List",
+      version: "1.0.0",
+      description: "A component for displaying either ordered or unordered lists of `ListItem`s.",
+      tags: [
+        "ui",
+        "layout",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "type",
+          type: "'ul' | 'ol'",
+          description: "Specifies whether the list should be unordered ('ul') or ordered ('ol').",
+          default: "'ul'"
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The list items, typically `ListItem` components."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the list container (`<ul>` or `<ol>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx",
+      sku: "@chassis/layout/list",
+      humanLabel: "List",
+      humanDescription: "A component for displaying either ordered or unordered lists of `ListItem`s."
+    },
+    {
+      id: "definition-term",
+      name: "DefinitionTerm",
+      version: "1.0.0",
+      description: "Represents a term within a `DefinitionList`.",
+      tags: [
+        "ui",
+        "layout",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content of the definition term."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the definition term (`<dt>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx",
+      sku: "@chassis/layout/definition-term",
+      humanLabel: "DefinitionTerm",
+      humanDescription: "Represents a term within a `DefinitionList`."
+    },
+    {
+      id: "definition-description",
+      name: "DefinitionDescription",
+      version: "1.0.0",
+      description: "Represents the description for a term within a `DefinitionList`.",
+      tags: [
+        "ui",
+        "layout",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content of the definition description."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the definition description (`<dd>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx",
+      sku: "@chassis/layout/definition-description",
+      humanLabel: "DefinitionDescription",
+      humanDescription: "Represents the description for a term within a `DefinitionList`."
+    },
+    {
+      id: "definition-list",
+      name: "DefinitionList",
+      version: "1.0.0",
+      description: "Displays a list of terms and their corresponding definitions.",
+      tags: [
+        "ui",
+        "layout",
+        "typography",
+        "data-display"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "A collection of `DefinitionTerm` and `DefinitionDescription` components."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the definition list container (`<dl>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx",
+      sku: "@chassis/layout/definition-list",
+      humanLabel: "DefinitionList",
+      humanDescription: "Displays a list of terms and their corresponding definitions."
+    },
+    {
+      id: "modal",
+      name: "Modal",
+      version: "1.0.1",
+      description: "A centered dialog that blocks interaction with the page until dismissed. Strategic purpose: confirmations, focused forms, and tasks requiring full user attention. Supports portal rendering, Escape key dismissal, and an optional sticky footer row for action buttons.",
+      tags: [
+        "ui",
+        "overlay",
+        "dialog",
+        "popup",
+        "layout"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "isOpen",
+          type: "boolean",
+          description: "Controls the visible state of the modal. Required."
+        },
+        {
+          name: "onClose",
+          type: "function",
+          description: "Callback fired when the modal requests to close via the Escape key or the header X button. Required."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "Optional title rendered in the modal header bar."
+        },
+        {
+          name: "footer",
+          type: "ReactNode",
+          description: "Optional content rendered in a sticky bottom row. Typically contains Cancel and Confirm action buttons."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes applied to the modal panel element."
+        }
+      ],
+      importPath: "./components/layout/Modal",
+      filePath: "src/components/layout/Modal.tsx",
+      sku: "@chassis/layout/modal",
+      humanLabel: "Modal",
+      humanDescription: "A centered dialog that blocks interaction with the page until dismissed. Strategic purpose: confirmations, focused forms, and tasks requiring full user attention. Supports portal rendering, Escape key dismissal, and an optional sticky footer row for action buttons."
+    },
+    {
+      id: "page-container",
+      name: "PageContainer",
+      version: "1.0.0",
+      description: "Standard responsive padding wrapper for the content inside a page. Strategic purpose: lets a page opt in to canonical spacing without the layout template imposing it, so page components stay free of layout chrome. Use this instead of hand-rolling `p-4 md:p-8` on every page. Never add `h-screen` or `overflow-hidden` here — the app shell owns the viewport.",
+      tags: [
+        "layout",
+        "container",
+        "page",
+        "spacing",
+        "padding"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The page content."
+        },
+        {
+          name: "constrained",
+          type: "boolean",
+          description: "Caps width at a readable maximum and centres it. Defaults to false (full width)."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/layout/PageContainer",
+      filePath: "src/components/layout/PageContainer.tsx",
+      sku: "@chassis/layout/page-container",
+      humanLabel: "PageContainer",
+      humanDescription: "Standard responsive padding wrapper for the content inside a page. Strategic purpose: lets a page opt in to canonical spacing without the layout template imposing it, so page components stay free of layout chrome. Use this instead of hand-rolling `p-4 md:p-8` on every page. Never add `h-screen` or `overflow-hidden` here — the app shell owns the viewport."
+    },
+    {
+      id: "settings-container",
+      name: "SettingsContainer",
+      version: "1.0.0",
+      description: "The canonical settings page arrangement, with a fixed slot per section so every app's settings read the same way. Strategic purpose: settings sprawl fast — this pins the section order and navigation so General, AI Gateway, Theme Lab, and About always live in the same place.",
+      tags: [
+        "layout",
+        "settings",
+        "preferences",
+        "configuration",
+        "page"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "generalSlot",
+          type: "ReactNode",
+          description: "General application settings."
+        },
+        {
+          name: "aiGatewaySlot",
+          type: "ReactNode",
+          description: "AI provider and key configuration — pairs with kernel's AiSettingsPanel."
+        },
+        {
+          name: "themeLabSlot",
+          type: "ReactNode",
+          description: "Theme customisation."
+        },
+        {
+          name: "aboutSlot",
+          type: "ReactNode",
+          description: "Version and attribution."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/layout/SettingsContainer",
+      filePath: "src/components/layout/SettingsContainer.tsx",
+      sku: "@chassis/layout/settings-container",
+      humanLabel: "SettingsContainer",
+      humanDescription: "The canonical settings page arrangement, with a fixed slot per section so every app's settings read the same way. Strategic purpose: settings sprawl fast — this pins the section order and navigation so General, AI Gateway, Theme Lab, and About always live in the same place."
+    },
+    {
+      id: "sidebar",
+      name: "Sidebar",
+      version: "1.0.0",
+      description: "A collapsible, theme-aware application navigation rail. Strategic purpose: the primary structural shell atom for multi-page apps. Renders a vertical nav item list, an optional branded header, a footer slot for secondary actions, and a user menu. Collapses automatically below 768px.",
+      tags: [
+        "layout",
+        "navigation",
+        "shell",
+        "sidebar",
+        "ui"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "items",
+          type: "Array",
+          description: "Navigation item array. Each item shape: { id: string, label?: string, icon?: IconName, href?: string, onClick?: function, badge?: string|number, type?: 'item'|'divider', variant?: 'default'|'ghost'|'primary'|'destructive', subItems?: SidebarItem[] }."
+        },
+        {
+          name: "user",
+          type: "object",
+          description: "Optional user object for the bottom user menu. Shape: { name: string, email: string, avatarUrl?: string }."
+        },
+        {
+          name: "activeItemId",
+          type: "string",
+          description: "The id of the currently active navigation item. Drives the highlighted state."
+        },
+        {
+          name: "onNavigate",
+          type: "function",
+          description: "Callback fired when a nav item is clicked. Receives the full SidebarItem object."
+        },
+        {
+          name: "logo",
+          type: "ReactNode",
+          description: "Node rendered in the expanded header slot (e.g. a logo image or branded wordmark)."
+        },
+        {
+          name: "collapsedLogo",
+          type: "ReactNode",
+          description: "Node rendered in the collapsed header slot. Falls back to the first letter of title."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "Text title used in the header when no logo node is provided."
+        },
+        {
+          name: "footerSlot",
+          type: "ReactNode",
+          description: "ReactNode injected above the user menu in the footer. Use for secondary actions like Settings or Help."
+        },
+        {
+          name: "defaultCollapsed",
+          type: "boolean",
+          description: "If true, the sidebar starts in collapsed (icon-only) state. Defaults to false."
+        },
+        {
+          name: "onLogout",
+          type: "function",
+          description: "Callback fired when the user selects Logout from the user dropdown menu."
+        },
+        {
+          name: "userMenuChildren",
+          type: "ReactNode",
+          description: "Additional items injected into the user dropdown menu."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes applied to the sidebar root aside element."
+        }
+      ],
+      importPath: "./components/layout/Sidebar",
+      filePath: "src/components/layout/Sidebar.tsx",
+      sku: "@chassis/layout/sidebar",
+      humanLabel: "Sidebar",
+      humanDescription: "A collapsible, theme-aware application navigation rail. Strategic purpose: the primary structural shell atom for multi-page apps. Renders a vertical nav item list, an optional branded header, a footer slot for secondary actions, and a user menu. Collapses automatically below 768px."
+    },
+    {
+      id: "statusbar",
+      name: "Statusbar",
+      version: "1.0.0",
+      description: "The persistent strip pinned to the bottom of the app shell. Strategic purpose: ambient state that should always be visible but never demand attention — connection status, record counts, sync state, build version. Pass to AppShell's `statusbarSlot`. Use Toast for things the user must acknowledge.",
+      tags: [
+        "layout",
+        "statusbar",
+        "chrome",
+        "status",
+        "ambient"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Statusbar content."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/layout/Statusbar",
+      filePath: "src/components/layout/Statusbar.tsx",
+      sku: "@chassis/layout/statusbar",
+      humanLabel: "Statusbar",
+      humanDescription: "The persistent strip pinned to the bottom of the app shell. Strategic purpose: ambient state that should always be visible but never demand attention — connection status, record counts, sync state, build version. Pass to AppShell's `statusbarSlot`. Use Toast for things the user must acknowledge."
+    },
+    {
+      id: "toolbar",
+      name: "Toolbar",
+      version: "1.0.0",
+      description: "The secondary action strip that sits beneath the header. Strategic purpose: the canonical home for filters, view switches, and bulk actions that apply to the whole page — keeps them out of the header and off the content canvas. Pass to AppShell's `toolbarSlot`.",
+      tags: [
+        "layout",
+        "toolbar",
+        "actions",
+        "filters",
+        "chrome"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Toolbar content, typically Buttons or a SegmentedControl."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/layout/Toolbar",
+      filePath: "src/components/layout/Toolbar.tsx",
+      sku: "@chassis/layout/toolbar",
+      humanLabel: "Toolbar",
+      humanDescription: "The secondary action strip that sits beneath the header. Strategic purpose: the canonical home for filters, view switches, and bulk actions that apply to the whole page — keeps them out of the header and off the content canvas. Pass to AppShell's `toolbarSlot`."
+    },
+    {
+      id: "user-nav",
+      name: "UserNav",
+      version: "1.0.0",
+      description: "The signed-in user's avatar menu — identity plus account actions. Strategic purpose: the standard account affordance for the app shell's header, with logout, settings, profile, and an optional theme toggle already wired. Compose extra entries with ButtonItem rather than rebuilding the menu.",
+      tags: [
+        "layout",
+        "navigation",
+        "user",
+        "account",
+        "menu",
+        "avatar",
+        "auth"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "user",
+          type: "object",
+          description: "The signed-in user: `{ name, email, avatarUrl? }`. Falls back to initials when no avatar is given."
+        },
+        {
+          name: "onLogout",
+          type: "function",
+          description: "Called when the user chooses sign out."
+        },
+        {
+          name: "onSettings",
+          type: "function",
+          description: "Called when the user chooses settings."
+        },
+        {
+          name: "onProfile",
+          type: "function",
+          description: "Called when the user chooses profile."
+        },
+        {
+          name: "showThemeToggle",
+          type: "boolean",
+          description: "Adds a theme switcher inside the menu."
+        },
+        {
+          name: "trigger",
+          type: "ReactNode",
+          description: "Replaces the default avatar trigger."
+        },
+        {
+          name: "align",
+          type: "string",
+          description: "Menu alignment against the trigger: 'start', 'center', or 'end'."
+        },
+        {
+          name: "side",
+          type: "string",
+          description: "Which side the menu opens on: 'top', 'bottom', 'left', or 'right'."
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Extra menu entries, typically ButtonItem."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/layout/UserNav",
+      filePath: "src/components/layout/UserNav.tsx",
+      sku: "@chassis/layout/user-nav",
+      humanLabel: "UserNav",
+      humanDescription: "The signed-in user's avatar menu — identity plus account actions. Strategic purpose: the standard account affordance for the app shell's header, with logout, settings, profile, and an optional theme toggle already wired. Compose extra entries with ButtonItem rather than rebuilding the menu."
+    }
+  ],
+  utils: [],
+  hooks: [],
+  data: [
+    {
+      id: "mock-chart-data",
+      name: "mockChartData",
+      version: "1.0.0",
+      description: "Pre-defined datasets for prototyping charts and other data-driven components.",
+      tags: [
+        "data",
+        "mock",
+        "example"
+      ],
+      category: "data",
+      props: [],
+      importPath: "./data/mockData",
+      filePath: "src/data/mockData.ts",
+      sku: "@data/mock/mock-chart-data",
+      humanLabel: "mockChartData",
+      humanDescription: "Pre-defined datasets for prototyping charts and other data-driven components."
+    },
+    {
+      id: "mock-table-data",
+      name: "mockTableData",
+      version: "1.0.0",
+      description: "Pre-defined datasets for prototyping tables and other data-driven components.",
+      tags: [
+        "data",
+        "mock",
+        "example"
+      ],
+      category: "data",
+      props: [],
+      importPath: "./data/mockData",
+      filePath: "src/data/mockData.ts",
+      sku: "@data/mock/mock-table-data",
+      humanLabel: "mockTableData",
+      humanDescription: "Pre-defined datasets for prototyping tables and other data-driven components."
+    }
+  ]
+};
+export {
+  e as wizardManifest
+};