@ramme-io/ui 3.0.0 → 4.0.0

package/src/wizardManifest.ts

@@ -235,6 +235,200 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -313,6 +507,83 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -529,6 +800,25 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -680,7 +970,7 @@ export const wizardManifest: WizardManifest = {
     {
       "id": "status-badge",
       "name": "StatusBadge",
-      "version": "1.0.0",
+      "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",
@@ -694,7 +984,12 @@ export const wizardManifest: WizardManifest = {
         {
           "name": "status",
           "type": "'online' | 'offline' | 'error' | 'warning' | 'active'",
-          "description": "The state to represent. Determines the color of the dot."
+          "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",
@@ -863,6 +1158,31 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -1241,6 +1561,115 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -1493,22 +1922,267 @@ export const wizardManifest: WizardManifest = {
       "humanDescription": "A theme-aware toggle switch component, offering a boolean input alternative to a checkbox."
     },
     {
-      "id": "page-header",
-      "name": "PageHeader",
+      "id": "circular-dial",
+      "name": "CircularDial",
       "version": "1.0.0",
-      "description": "Displays the main header section of a page, including a title, optional description, and a slot for action buttons.",
+      "description": "A 270-degree arc gauge for a single live telemetry value, styled like a physical instrument dial.",
       "tags": [
-        "layout",
-        "typography",
-        "header",
-        "ui",
-        "template"
+        "hardware",
+        "gauge",
+        "dial",
+        "telemetry",
+        "iot"
       ],
-      "category": "templates-patterns",
+      "category": "hardware",
       "props": [
         {
-          "name": "title",
-          "type": "string",
+          "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."
         },
         {
@@ -1568,6 +2242,110 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -1976,6 +2754,42 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -2148,6 +2962,26 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -2262,16 +3096,88 @@ export const wizardManifest: WizardManifest = {
       "humanDescription": "A persistent bar, typically at the bottom of a form or page, used to group primary actions like 'Save' and 'Cancel'."
     },
     {
-      "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).",
+      "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",
-        "ui",
-        "container",
-        "box",
-        "composition"
+        "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": [
@@ -2382,6 +3288,37 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -2442,6 +3379,135 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -2503,6 +3569,68 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -2701,6 +3829,88 @@ export const wizardManifest: WizardManifest = {
       "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",
@@ -2781,6 +3991,141 @@ export const wizardManifest: WizardManifest = {
       "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": [],