@signalflare-ai/ui 1.1.0 → 1.2.0

package/ai/component-registry.json

@@ -29,8 +29,13 @@
           "optional": true
         }
       },
-      "examples": [],
-      "colors": ["text-sf-default", "text-sf-subtle"]
+      "examples": [
+        "<AiActions>\n      <AiAction tooltip=\"Copy\">\n        <CopyIcon className=\"size-4\" />\n      </AiAction>\n      <AiAction tooltip=\"Retry\">\n        <ArrowCounterClockwiseIcon className=\"size-4\" />\n      </AiAction>\n      <AiAction tooltip=\"Thumbs up\">\n        <ThumbsUpIcon className=\"size-4\" />\n      </AiAction>\n      <AiAction tooltip=\"Thumbs down\">\n        <ThumbsDownIcon className=\"size-4\" />\n      </AiAction>\n    </AiActions>"
+      ],
+      "colors": [
+        "text-sf-default",
+        "text-sf-subtle"
+      ]
     },
     "AiAgentCard": {
       "name": "AiAgentCard",
@@ -52,7 +57,12 @@
           "type": "enum",
           "optional": true,
           "description": "Current status.",
-          "values": ["idle", "running", "completed", "error"],
+          "values": [
+            "idle",
+            "running",
+            "completed",
+            "error"
+          ],
           "descriptions": {
             "idle": "Agent is idle, not yet started",
             "running": "Agent is actively working",
@@ -95,7 +105,10 @@
           "type": "enum",
           "optional": true,
           "description": "Card size.",
-          "values": ["sm", "md"],
+          "values": [
+            "sm",
+            "md"
+          ],
           "descriptions": {
             "sm": "Compact card for dense grids",
             "md": "Default card size"
@@ -109,7 +122,11 @@
         "type": {
           "type": "enum",
           "optional": true,
-          "values": ["submit", "reset", "button"]
+          "values": [
+            "submit",
+            "reset",
+            "button"
+          ]
         },
         "value": {
           "type": "string | string[] | number",
@@ -132,7 +149,12 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex flex-wrap gap-3\">\n      <AiAgentCard\n        name=\"Explore\"\n        agentType=\"explore\"\n        status=\"running\"\n        modelId=\"claude-haiku-3.5\"\n        currentTask=\"Scanning auth files for deprecated patterns...\"\n        duration={4200}\n        toolCallCount={3}\n      />\n      <AiAgentCard\n        name=\"Execute\"\n        agentType=\"execute\"\n        status=\"running\"\n        modelId=\"claude-sonnet-4\"\n        currentTask=\"Rewriting jwt.ts using jose library...\"\n        duration={8700}\n        toolCallCount={1}\n      />\n    </div>",
+        "<div className=\"flex flex-wrap gap-3\">\n      <AiAgentCard\n        name=\"Explore\"\n        agentType=\"explore\"\n        status=\"idle\"\n        modelId=\"claude-haiku-3.5\"\n      />\n      <AiAgentCard\n        name=\"Plan\"\n        agentType=\"plan\"\n        status=\"running\"\n        modelId=\"claude-sonnet-4\"\n        currentTask=\"Drafting migration steps...\"\n        duration={2100}\n        toolCallCount={0}\n      />\n      <AiAgentCard\n        name=\"Execute\"\n        agentType=\"execute\"\n        status=\"completed\"\n        modelId=\"claude-sonnet-4\"\n        currentTask=\"Rewrote 4 files successfully.\"\n        duration={12_400}\n        toolCallCount={7}\n      />\n      <AiAgentCard\n        name=\"Test\"\n        agentType=\"test\"\n        status=\"error\"\n        modelId=\"claude-haiku-3.5\"\n        currentTask=\"3 tests failed: auth.spec.ts\"\n        duration={3200}\n        toolCallCount={2}\n      />\n    </div>",
+        "<div className=\"flex flex-wrap gap-3\">\n      <AiAgentCard\n        name=\"Explore\"\n        agentType=\"explore\"\n        status=\"completed\"\n        modelId=\"claude-haiku-3.5\"\n        duration={4200}\n        toolCallCount={5}\n      />\n      <AiAgentCard\n        name=\"Execute\"\n        agentType=\"execute\"\n        status=\"running\"\n        modelId=\"claude-sonnet-4\"\n        currentTask=\"Patching consumers...\"\n        duration={6100}\n        toolCallCount={3}\n        selected\n      />\n    </div>",
+        "<div className=\"flex flex-wrap gap-2\">\n      {[\n        { name: \"Explore\", agentType: \"explore\", status: \"completed\" as const },\n        { name: \"Plan\", agentType: \"plan\", status: \"completed\" as const },\n        { name: \"Execute\", agentType: \"execute\", status: \"running\" as const },\n        { name: \"Review\", agentType: \"review\", status: \"idle\" as const },\n      ].map((agent) => (\n        <AiAgentCard key={agent.name} size=\"sm\" {...agent} />\n      ))}\n    </div>"
+      ],
       "colors": [
         "bg-sf-brand",
         "bg-sf-danger",
@@ -162,7 +184,10 @@
           "type": "enum",
           "optional": true,
           "description": "Approval kind — `\"tool\"` for individual tool calls, `\"plan\"` for multi-step plans.",
-          "values": ["tool", "plan"],
+          "values": [
+            "tool",
+            "plan"
+          ],
           "descriptions": {
             "tool": "Tool call approval",
             "plan": "Plan approval"
@@ -173,7 +198,11 @@
           "type": "enum",
           "optional": true,
           "description": "Current approval status.",
-          "values": ["pending", "approved", "rejected"],
+          "values": [
+            "pending",
+            "approved",
+            "rejected"
+          ],
           "descriptions": {
             "pending": "Awaiting user decision",
             "approved": "Approved by user",
@@ -233,7 +262,10 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"w-full max-w-md\">\n      <AiApproval\n        kind=\"tool\"\n        status={status}\n        title=\"Execute shell command\"\n        description=\"rm -rf /tmp/cache\"\n        onApprove={() => setStatus(\"approved\")}\n        onReject={() => setStatus(\"rejected\")}\n      />\n    </div>",
+        "<div className=\"w-full max-w-md\">\n      <AiApproval\n        kind=\"plan\"\n        status={status}\n        title=\"Deployment plan\"\n        description=\"The agent proposes the following steps:\"\n        items={[\n          { id: \"1\", label: \"Run test suite\", description: \"All 142 tests\" },\n          { id: \"2\", label: \"Build production bundle\" },\n          { id: \"3\", label: \"Deploy to staging\", description: \"us-east-1\" },\n          { id: \"4\", label: \"Run smoke tests\" },\n          { id: \"5\", label: \"Promote to production\" },\n        ]}\n        showFeedback\n        onApprove={() => setStatus(\"approved\")}\n        onReject={() => setStatus(\"rejected\")}\n      />\n    </div>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-brand",
@@ -291,7 +323,11 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<AiCodeBlock code={CODE} language=\"tsx\">\n      <AiCodeBlockCopyButton />\n    </AiCodeBlock>",
+        "<AiCodeBlock\n      code={`function greet(name: string) {\\n  return \\`Hello, \\${name}!\\`;\\n}`}\n      language=\"ts\"\n      showLineNumbers\n    >\n      <AiCodeBlockCopyButton />\n    </AiCodeBlock>",
+        "<AiCodeBlock code=\"npm install @signalflare-ai/ui\">\n      <AiCodeBlockCopyButton />\n    </AiCodeBlock>"
+      ],
       "colors": [
         "bg-sf-recessed",
         "border-sf-line",
@@ -328,7 +364,9 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"h-80 w-full overflow-hidden rounded-lg border border-sf-line\">\n      <AiConversation>\n        <AiConversationContent>\n          {MESSAGES.map((m) => (\n            <AiMessage key={m.id} from={m.from}>\n              <AiMessageContent>\n                <AiResponse>{m.text}</AiResponse>\n              </AiMessageContent>\n            </AiMessage>\n          ))}\n        </AiConversationContent>\n      </AiConversation>\n    </div>"
+      ],
       "colors": []
     },
     "AiInfoBanner": {
@@ -342,7 +380,11 @@
           "type": "enum",
           "optional": true,
           "description": "Banner level controls icon and color treatment.",
-          "values": ["info", "error", "change"],
+          "values": [
+            "info",
+            "error",
+            "change"
+          ],
           "descriptions": {
             "info": "Informational notice",
             "error": "Error notice",
@@ -376,7 +418,9 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex w-full flex-col gap-3\">\n      <AiInfoBanner level=\"info\">\n        Follow-up message queued — will send after current response completes\n      </AiInfoBanner>\n      <AiInfoBanner level=\"change\">Switched to claude-opus-4-6</AiInfoBanner>\n      <AiInfoBanner level=\"error\">\n        Connection lost. Retrying in 3s…\n      </AiInfoBanner>\n    </div>"
+      ],
       "colors": [
         "border-sf-danger",
         "border-sf-info",
@@ -397,7 +441,11 @@
           "type": "enum",
           "required": true,
           "description": "Message sender role — controls layout and group class.",
-          "values": ["user", "assistant", "system"],
+          "values": [
+            "user",
+            "assistant",
+            "system"
+          ],
           "descriptions": {
             "user": "User message — right-aligned with max width",
             "assistant": "Assistant message — full width left-aligned",
@@ -431,7 +479,11 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex w-full flex-col gap-2 p-4\">\n      <AiMessage from=\"user\">\n        <AiMessageContent>What is the capital of France?</AiMessageContent>\n      </AiMessage>\n      <AiMessage from=\"assistant\">\n        <AiMessageContent>\n          <AiResponse>{\"The capital of France is **Paris**.\"}</AiResponse>\n        </AiMessageContent>\n        <AiMessageToolbar>\n          <AiMessageActions>\n            <AiMessageAction tooltip=\"Copy\">\n              <CopyIcon className=\"size-4\" />\n            </AiMessageAction>\n            <AiMessageAction tooltip=\"Retry\">\n              <ArrowCounterClockwiseIcon className=\"size-4\" />\n            </AiMessageAction>\n          </AiMessageActions>\n        </AiMessageToolbar>\n      </AiMessage>\n    </div>",
+        "<AiMessage from=\"user\">\n      <AiMessageContent>Can you summarise this document?</AiMessageContent>\n    </AiMessage>",
+        "<AiMessage from=\"assistant\">\n      <AiMessageContent>\n        <AiResponse>\n          {\n            \"Here is the summary you requested. The document covers three main topics: **architecture**, **deployment**, and **monitoring**.\"\n          }\n        </AiResponse>\n      </AiMessageContent>\n    </AiMessage>"
+      ],
       "colors": [
         "bg-sf-control",
         "bg-sf-overlay",
@@ -491,7 +543,10 @@
           "type": "enum",
           "optional": true,
           "description": "Display variant.",
-          "values": ["default", "compact"],
+          "values": [
+            "default",
+            "compact"
+          ],
           "descriptions": {
             "default": "Full header with all stats",
             "compact": "Single-row compact header"
@@ -515,7 +570,11 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<AiMissionHeader\n      title=\"Refactor auth module\"\n      taskList={{\n        title: \"Refactor auth module\",\n        tasks: [\n          {\n            id: \"t1\",\n            content: \"Explore authentication codebase\",\n            status: \"completed\",\n            priority: \"high\",\n          },\n          {\n            id: \"t2\",\n            content: \"Identify deprecated patterns\",\n            status: \"completed\",\n            priority: \"high\",\n          },\n          {\n            id: \"t3\",\n            content: \"Write updated auth helpers\",\n            status: \"in_progress\",\n            priority: \"medium\",\n          },\n          {\n            id: \"t4\",\n            content: \"Update all consumers\",\n            status: \"pending\",\n            priority: \"medium\",\n          },\n          {\n            id: \"t5\",\n            content: \"Update tests\",\n            status: \"pending\",\n            priority: \"low\",\n          },\n        ],\n      }}\n      usage={{\n        inputTokens: 12_480,\n        outputTokens: 3256,\n        totalTokens: 15_736,\n        cost: 0.04,\n      }}\n      activeAgentCount={2}\n      totalAgentCount={4}\n      startedAt={startedAt}\n      isRunning\n    />",
+        "<AiMissionHeader\n      title=\"Deploy to production\"\n      taskList={{\n        tasks: [\n          {\n            id: \"t1\",\n            content: \"Run tests\",\n            status: \"completed\",\n            priority: \"high\",\n          },\n          {\n            id: \"t2\",\n            content: \"Build artifacts\",\n            status: \"completed\",\n            priority: \"high\",\n          },\n          {\n            id: \"t3\",\n            content: \"Deploy to staging\",\n            status: \"completed\",\n            priority: \"medium\",\n          },\n          {\n            id: \"t4\",\n            content: \"Smoke test\",\n            status: \"completed\",\n            priority: \"medium\",\n          },\n          {\n            id: \"t5\",\n            content: \"Deploy to production\",\n            status: \"completed\",\n            priority: \"high\",\n          },\n        ],\n      }}\n      usage={{ totalTokens: 28_400, cost: 0.12 }}\n      activeAgentCount={0}\n      totalAgentCount={3}\n      startedAt={startedAt}\n      endedAt={endedAt}\n      isRunning={false}\n    />",
+        "<AiMissionHeader\n      title=\"Analyze codebase\"\n      activeAgentCount={1}\n      totalAgentCount={2}\n      startedAt={startedAt}\n      isRunning\n      variant=\"compact\"\n    />"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-brand",
@@ -569,7 +628,9 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <Text variant=\"secondary\" size=\"sm\">\n          Rolling window of 3 rows while streaming. Collapses to a single frozen\n          line when complete.\n        </Text>\n        <Button\n          onClick={() => setRunId((n) => n + 1)}\n          size=\"sm\"\n          variant=\"ghost\"\n        >\n          Run again\n        </Button>\n      </div>\n      <div className=\"min-h-[6rem] rounded-md border border-sf-line/40 bg-sf-base/40 p-3\">\n        <AiPartGroup\n          complete={complete}\n          groupKey={`activity-demo-${runId}`}\n          max={3}\n          title=\"Investigating failing auth tests\"\n        >\n          {steps.map((s) =>\n            s.kind === \"tool\" ? (\n              <AiToolCall\n                duration={s.duration}\n                key={s.part.toolCallId}\n                part={s.part}\n                variant=\"ephemeral\"\n              />\n            ) : (\n              <AiReasoning\n                duration={s.duration}\n                isStreaming={s.isStreaming}\n                key={s.id}\n                part={{ text: s.text }}\n                variant=\"ephemeral\"\n              />\n            )\n          )}\n        </AiPartGroup>\n      </div>\n    </div>"
+      ],
       "colors": [
         "bg-sf-tint",
         "border-sf-line",
@@ -605,7 +666,10 @@
           "type": "enum",
           "optional": true,
           "description": "Current status.",
-          "values": ["pending", "answered"],
+          "values": [
+            "pending",
+            "answered"
+          ],
           "descriptions": {
             "pending": "Waiting for answer",
             "answered": "User has answered"
@@ -649,7 +713,10 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"w-full max-w-md\">\n      <AiQuestion\n        questionId=\"q-demo-1\"\n        question=\"How should I handle the failing tests?\"\n        header=\"Decision needed\"\n        status={status}\n        answeredWith={answer}\n        options={[\n          {\n            label: \"Fix them\",\n            description: \"Update the test expectations to match new behavior\",\n          },\n          {\n            label: \"Skip them\",\n            description: \"Mark as skipped for now and create a ticket\",\n          },\n          {\n            label: \"Delete them\",\n            description: \"Remove outdated tests entirely\",\n          },\n        ]}\n        allowCustom\n        onAnswer={(_id, ans) => {\n          setAnswer(ans);\n          setStatus(\"answered\");\n        }}\n      />\n    </div>",
+        "<div className=\"w-full max-w-md\">\n      <AiQuestion\n        questionId=\"q-demo-2\"\n        question=\"What should the commit message be for these changes?\"\n        status={status}\n        answeredWith={answer}\n        allowCustom\n        onAnswer={(_id, ans) => {\n          setAnswer(ans);\n          setStatus(\"answered\");\n        }}\n      />\n    </div>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-brand",
@@ -676,7 +743,12 @@
           "type": "enum",
           "optional": true,
           "description": "Display variant.",
-          "values": ["default", "inline", "minimal", "ephemeral"],
+          "values": [
+            "default",
+            "inline",
+            "minimal",
+            "ephemeral"
+          ],
           "descriptions": {
             "default": "Expandable card with collapsible reasoning text and duration",
             "inline": "Compact single-line display with left accent border",
@@ -756,7 +828,15 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<AiReasoning\n      part={{ text: SAMPLE_REASONING }}\n      isStreaming={false}\n      duration={3}\n      defaultExpanded\n    />",
+        "<AiReasoning\n      part={{ text: \"Analysing context and forming a response...\" }}\n      isStreaming\n    />",
+        "<AiReasoning\n      variant=\"inline\"\n      part={{ text: SAMPLE_REASONING }}\n      isStreaming={false}\n    />",
+        "<AiReasoning\n      variant=\"minimal\"\n      part={{ text: SAMPLE_REASONING }}\n      isStreaming={false}\n    />",
+        "<AiReasoning\n      part={{ text: RICH_MARKDOWN_REASONING }}\n      isStreaming={false}\n      duration={5}\n      defaultExpanded\n    />",
+        "<div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <Text variant=\"secondary\" size=\"sm\">\n          Reasoning row evaporates 800ms after streaming ends.\n        </Text>\n        <Button\n          onClick={() => setRunId((n) => n + 1)}\n          size=\"sm\"\n          variant=\"ghost\"\n        >\n          Think again\n        </Button>\n      </div>\n      <div\n        className={\n          \"min-h-[3.5rem] rounded-md border border-sf-line/40 bg-sf-base/40 p-3\"\n        }\n      >\n        <AiReasoning\n          // `key` ensures each replay re-mounts to reset the dismiss state.\n          key={runId}\n          variant=\"ephemeral\"\n          part={{\n            text: \"**Reviewing diff** — checking for breaking changes in the migration.\",\n          }}\n          isStreaming={isStreaming}\n        />\n      </div>\n    </div>",
+        "<AiReasoningGroup\n      parts={[\n        { text: \"**Step 1** — Understood the user intent and context.\" },\n        { text: \"**Step 2** — Reviewed relevant data and constraints.\" },\n        { text: \"**Step 3** — Formulated the final response structure.\" },\n      ]}\n      isStreaming={false}\n      totalDuration={7}\n      defaultExpanded\n    />"
+      ],
       "colors": [
         "bg-sf-tint",
         "border-sf-line",
@@ -780,8 +860,15 @@
           "description": "Child elements"
         }
       },
-      "examples": [],
-      "colors": ["text-sf-default"]
+      "examples": [
+        "<AiResponse>{MARKDOWN_LIKE}</AiResponse>",
+        "<AiResponse>The capital of France is Paris.</AiResponse>",
+        "<AiResponse>{MARKDOWN_WITH_CODE}</AiResponse>",
+        "<AiResponse isAnimating={isAnimating}>{text}</AiResponse>"
+      ],
+      "colors": [
+        "text-sf-default"
+      ]
     },
     "AiShimmer": {
       "name": "AiShimmer",
@@ -816,7 +903,11 @@
           "description": "Shimmer width multiplier relative to text length."
         }
       },
-      "examples": [],
+      "examples": [
+        "<AiShimmer>Thinking...</AiShimmer>",
+        "<p className=\"text-sf-default text-sm\">\n      The AI is{\" \"}\n      <AiShimmer as=\"span\" duration={1.5}>\n        generating a response\n      </AiShimmer>\n      .\n    </p>",
+        "<AiShimmer duration={4}>Analysing your request...</AiShimmer>"
+      ],
       "colors": []
     },
     "AiStatusBadge": {
@@ -840,7 +931,12 @@
           "type": "enum",
           "optional": true,
           "description": "Current status — determines the status icon on the right.",
-          "values": ["idle", "running", "success", "error"],
+          "values": [
+            "idle",
+            "running",
+            "success",
+            "error"
+          ],
           "descriptions": {
             "idle": "Default idle state — no status icon shown",
             "running": "Actively running — spinner icon shown",
@@ -875,7 +971,12 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<AiStatusBadge\n      icon={MagnifyingGlassIcon}\n      label=\"web_search\"\n      status=\"idle\"\n    />",
+        "<div className=\"flex flex-wrap gap-2\">\n      <AiStatusBadge icon={GlobeIcon} label=\"search_web\" status=\"idle\" />\n      <AiStatusBadge icon={GlobeIcon} label=\"search_web\" status=\"running\" />\n      <AiStatusBadge icon={GlobeIcon} label=\"search_web\" status=\"success\" />\n      <AiStatusBadge icon={GlobeIcon} label=\"search_web\" status=\"error\" />\n    </div>",
+        "<div className=\"flex flex-wrap gap-2\">\n      <AiStatusBadge\n        icon={DatabaseIcon}\n        label=\"query_db\"\n        info=\"3/5\"\n        status=\"running\"\n      />\n      <AiStatusBadge\n        icon={BrainIcon}\n        label=\"analyse\"\n        info=\"done\"\n        status=\"success\"\n      />\n    </div>",
+        "<div className=\"flex flex-wrap gap-2\">\n      <AiStatusBadge label=\"processing\" status=\"running\" />\n      <AiStatusBadge label=\"complete\" status=\"success\" />\n    </div>"
+      ],
       "colors": [
         "bg-sf-tint",
         "text-sf-brand",
@@ -900,7 +1001,9 @@
           "description": "Child elements"
         }
       },
-      "examples": [],
+      "examples": [
+        "<p className=\"max-w-sm text-sf-default text-sm\">\n      {displayed}\n      {streaming && (\n        <span className=\"ml-0.5 inline-block h-4 w-0.5 animate-pulse bg-sf-brand\" />\n      )}\n    </p>"
+      ],
       "colors": []
     },
     "AiSubagent": {
@@ -924,7 +1027,11 @@
           "type": "enum",
           "optional": true,
           "description": "Current status.",
-          "values": ["running", "completed", "error"],
+          "values": [
+            "running",
+            "completed",
+            "error"
+          ],
           "descriptions": {
             "running": "Subagent is actively processing",
             "completed": "Subagent finished successfully",
@@ -978,12 +1085,15 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"w-full max-w-lg\">\n      <AiSubagent\n        name=\"Explore\"\n        agentType=\"explore\"\n        status=\"running\"\n        modelId=\"claude-haiku-3.5\"\n        defaultExpanded\n      >\n        <div className=\"flex flex-col gap-1.5 text-sm text-sf-subtle\">\n          <p>Searching codebase for authentication patterns...</p>\n          <div className=\"flex items-center gap-2 border-l-2 border-sf-fill py-1 pl-2 text-xs\">\n            <span className=\"text-sf-brand\">Glob</span>\n            <span className=\"text-sf-subtle\">src/**/*auth*</span>\n          </div>\n          <div className=\"flex items-center gap-2 border-l-2 border-sf-fill py-1 pl-2 text-xs\">\n            <span className=\"text-sf-brand\">Read</span>\n            <span className=\"text-sf-subtle\">src/middleware/auth.ts</span>\n          </div>\n        </div>\n      </AiSubagent>\n    </div>",
+        "<div className=\"w-full max-w-lg\">\n      <AiSubagent\n        name=\"Execute\"\n        agentType=\"execute\"\n        status=\"completed\"\n        modelId=\"claude-sonnet-4\"\n        duration={12400}\n        defaultExpanded={false}\n      >\n        <div className=\"text-sm text-sf-subtle\">\n          <p>Refactored 3 files, added 2 new tests. All tests passing.</p>\n        </div>\n      </AiSubagent>\n    </div>",
+        "<div className=\"w-full max-w-lg\">\n      <AiSubagent\n        name=\"Plan\"\n        agentType=\"plan\"\n        status=\"completed\"\n        modelId=\"claude-sonnet-4\"\n        duration={28000}\n        defaultExpanded\n      >\n        <div className=\"flex flex-col gap-2\">\n          <p className=\"text-sm text-sf-subtle\">\n            Breaking down the migration into subtasks...\n          </p>\n          <AiSubagent\n            name=\"Explore\"\n            agentType=\"explore\"\n            status=\"completed\"\n            modelId=\"claude-haiku-3.5\"\n            duration={4200}\n            defaultExpanded={false}\n          >\n            <p className=\"text-sm text-sf-subtle\">\n              Found 12 files using deprecated API.\n            </p>\n          </AiSubagent>\n          <AiSubagent\n            name=\"Execute\"\n            agentType=\"execute\"\n            status=\"running\"\n            modelId=\"claude-sonnet-4\"\n            defaultExpanded\n          >\n            <p className=\"text-sm text-sf-subtle\">\n              Updating import paths in batch 1/3...\n            </p>\n          </AiSubagent>\n        </div>\n      </AiSubagent>\n    </div>"
+      ],
       "colors": [
         "bg-sf-tint",
         "text-sf-brand",
         "text-sf-danger",
-        "text-sf-default",
         "text-sf-subtle",
         "text-sf-success"
       ]
@@ -1063,7 +1173,10 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"w-full max-w-sm\">\n      <AiTaskList title=\"Agent tasks\" tasks={tasks} />\n    </div>",
+        "<div className=\"w-full max-w-sm\">\n      <AiTaskList title=\"Cleanup tasks\" tasks={tasks} />\n    </div>"
+      ],
       "colors": [
         "bg-sf-brand",
         "bg-sf-danger",
@@ -1106,7 +1219,10 @@
           "type": "enum",
           "optional": true,
           "description": "Lane density variant.",
-          "values": ["comfortable", "compact"],
+          "values": [
+            "comfortable",
+            "compact"
+          ],
           "descriptions": {
             "comfortable": "Taller lanes with more padding",
             "compact": "Tight lanes for dense views"
@@ -1135,7 +1251,11 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<AiTimeline\n      timeOrigin={T0}\n      pixelsPerSecond={25}\n      showNowMarker\n      nowMs={nowMs}\n    >\n      <AiTimelineLane\n        label=\"Main\"\n        agentType=\"main\"\n        status=\"running\"\n        modelId=\"claude-sonnet-4\"\n        blocks={mainBlocks}\n        timeOrigin={T0}\n        nowMs={nowMs}\n        pxPerMs={pxPerMs}\n      />\n      <AiTimelineLane\n        label=\"Explore\"\n        agentType=\"explore\"\n        status=\"completed\"\n        modelId=\"claude-haiku-3.5\"\n        blocks={exploreBlocks}\n        timeOrigin={T0}\n        nowMs={nowMs}\n        pxPerMs={pxPerMs}\n      />\n      <AiTimelineLane\n        label=\"Plan\"\n        agentType=\"plan\"\n        status=\"completed\"\n        modelId=\"claude-sonnet-4\"\n        blocks={planBlocks}\n        timeOrigin={T0}\n        nowMs={nowMs}\n        pxPerMs={pxPerMs}\n      />\n      <AiTimelineLane\n        label=\"Execute\"\n        agentType=\"execute\"\n        status=\"running\"\n        modelId=\"claude-sonnet-4\"\n        blocks={executeBlocks}\n        timeOrigin={T0}\n        nowMs={nowMs}\n        pxPerMs={pxPerMs}\n      />\n    </AiTimeline>",
+        "<AiTimeline\n      timeOrigin={T0}\n      pixelsPerSecond={25}\n      showNowMarker\n      nowMs={nowMs}\n    >\n      <AiTimelineLane\n        label=\"Explore\"\n        agentType=\"explore\"\n        status=\"completed\"\n        blocks={exploreBlocks}\n        timeOrigin={T0}\n        nowMs={nowMs}\n        pxPerMs={pxPerMs}\n        density=\"compact\"\n      />\n      <AiTimelineLane\n        label=\"Execute\"\n        agentType=\"execute\"\n        status=\"running\"\n        blocks={executeBlocks}\n        timeOrigin={T0}\n        nowMs={nowMs}\n        pxPerMs={pxPerMs}\n        density=\"compact\"\n      />\n    </AiTimeline>",
+        "<AiTimeline\n      timeOrigin={t}\n      pixelsPerSecond={30}\n      showNowMarker={false}\n      nowMs={nowMs}\n    >\n      <AiTimelineLane\n        label=\"Agent\"\n        blocks={allTypeBlocks}\n        timeOrigin={t}\n        nowMs={nowMs}\n        pxPerMs={pxPerMs}\n      />\n    </AiTimeline>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-brand",
@@ -1169,7 +1289,12 @@
           "type": "enum",
           "optional": true,
           "description": "Display variant.",
-          "values": ["default", "inline", "minimal", "ephemeral"],
+          "values": [
+            "default",
+            "inline",
+            "minimal",
+            "ephemeral"
+          ],
           "descriptions": {
             "default": "Expandable card with collapsible input/output sections",
             "inline": "Compact single-line display with left accent border",
@@ -1197,7 +1322,11 @@
           "type": "enum",
           "optional": true,
           "description": "Approval state for tools requiring confirmation.",
-          "values": ["awaiting", "approved", "declined"]
+          "values": [
+            "awaiting",
+            "approved",
+            "declined"
+          ]
         },
         "defaultExpanded": {
           "type": "boolean",
@@ -1312,8 +1441,14 @@
           "optional": true
         }
       },
-      "examples": [],
-      "colors": ["text-sf-inactive", "text-sf-subtle"]
+      "examples": [
+        "<div className=\"w-full max-w-md rounded-lg border border-sf-line\">\n      <AiUsageBar\n        inputTokens={12480}\n        outputTokens={3256}\n        cost={0.04}\n        modelId=\"claude-sonnet-4\"\n      />\n    </div>",
+        "<div className=\"w-full max-w-sm rounded-lg border border-sf-line\">\n      <AiUsageBar inputTokens={850} outputTokens={124} />\n    </div>"
+      ],
+      "colors": [
+        "text-sf-inactive",
+        "text-sf-subtle"
+      ]
     },
     "Badge": {
       "name": "Badge",
@@ -1380,7 +1515,10 @@
           "type": "enum",
           "optional": true,
           "description": "Position of the icon relative to the text.",
-          "values": ["left", "right"]
+          "values": [
+            "left",
+            "right"
+          ]
         },
         "loading": {
           "type": "boolean",
@@ -1391,7 +1529,13 @@
           "type": "enum",
           "optional": true,
           "description": "Renders a small colored status dot before the text.",
-          "values": ["green", "red", "yellow", "blue", "gray"]
+          "values": [
+            "green",
+            "red",
+            "yellow",
+            "blue",
+            "gray"
+          ]
         },
         "tooltip": {
           "type": "ReactNode",
@@ -1403,7 +1547,25 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"primary\">Primary</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"destructive\">Destructive</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n      <Badge variant=\"success\">Success</Badge>\n      <Badge variant=\"warning\">Warning</Badge>\n      <Badge variant=\"info\">Info</Badge>\n      <Badge variant=\"ghost\">Ghost</Badge>\n    </div>",
+        "<Badge variant=\"primary\">Primary</Badge>",
+        "<Badge variant=\"secondary\">Secondary</Badge>",
+        "<Badge variant=\"destructive\">Destructive</Badge>",
+        "<Badge variant=\"outline\">Outline</Badge>",
+        "<Badge variant=\"beta\">Beta</Badge>",
+        "<Badge variant=\"success\">Success</Badge>",
+        "<Badge variant=\"warning\">Warning</Badge>",
+        "<Badge variant=\"info\">Info</Badge>",
+        "<Badge variant=\"ghost\">Ghost</Badge>",
+        "<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"beta\">Beta</Badge>\n    </p>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"success\" icon={CheckCircleIcon}>\n        Verified\n      </Badge>\n      <Badge variant=\"secondary\" icon={LightningIcon}>\n        Boosted\n      </Badge>\n      <Badge variant=\"outline\" icon={TagIcon} iconPosition=\"right\">\n        Tagged\n      </Badge>\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      {tags.map((tag) => (\n        <Badge\n          key={tag}\n          variant=\"secondary\"\n          onDismiss={() => setTags((t) => t.filter((v) => v !== tag))}\n        >\n          {tag}\n        </Badge>\n      ))}\n      {tags.length === 0 && (\n        <span className=\"text-sm text-sf-subtle\">All tags removed</span>\n      )}\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"secondary\" loading>\n        Syncing\n      </Badge>\n      <Badge variant=\"info\" loading>\n        Deploying\n      </Badge>\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"outline\" dot=\"green\">\n        Online\n      </Badge>\n      <Badge variant=\"outline\" dot=\"red\">\n        Offline\n      </Badge>\n      <Badge variant=\"outline\" dot=\"yellow\">\n        Degraded\n      </Badge>\n      <Badge variant=\"outline\" dot=\"blue\">\n        Deploying\n      </Badge>\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"secondary\" onClick={handleBadgeClick}>\n        Clickable\n      </Badge>\n      <Badge variant=\"info\" href=\"https://example.com\">\n        Link badge\n      </Badge>\n    </div>",
+        "<TooltipProvider>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Badge variant=\"success\" tooltip=\"Deployed 2 hours ago\" dot=\"green\">\n          Production\n        </Badge>\n        <Badge variant=\"outline\" tooltip=\"3 of 5 tasks complete\">\n          3/5\n        </Badge>\n      </div>\n    </TooltipProvider>"
+      ],
       "colors": [
         "bg-sf-brand",
         "bg-sf-contrast",
@@ -1449,7 +1611,11 @@
           "type": "enum",
           "optional": true,
           "description": "Visual style of the banner.\n- `\"default\"` — Informational blue banner for general messages\n- `\"alert\"` — Warning yellow banner for cautionary messages\n- `\"error\"` — Error red banner for critical issues",
-          "values": ["default", "alert", "error"],
+          "values": [
+            "default",
+            "alert",
+            "error"
+          ],
           "descriptions": {
             "default": "Informational banner for general messages",
             "alert": "Warning banner for cautionary messages",
@@ -1468,7 +1634,14 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"space-y-3\">\n      <Banner>This is an informational banner.</Banner>\n      <Banner variant=\"alert\">This is an alert banner.</Banner>\n      <Banner variant=\"error\">This is an error banner.</Banner>\n    </div>",
+        "<Banner>This is an informational banner.</Banner>",
+        "<Banner variant=\"alert\">Your session will expire soon.</Banner>",
+        "<Banner variant=\"error\">We couldn't save your changes.</Banner>",
+        "<Banner icon={<WarningCircleIcon />} variant=\"alert\">\n      Review your billing information.\n    </Banner>",
+        "<Banner icon={<InfoIcon />}>\n      <Text DANGEROUS_className=\"text-inherit\">\n        This banner supports <strong>custom content</strong> with Text.\n      </Text>\n    </Banner>"
+      ],
       "colors": [
         "bg-sf-danger",
         "bg-sf-danger-tint",
@@ -1496,7 +1669,10 @@
           "type": "enum",
           "optional": true,
           "description": "Size of the breadcrumbs.\n- `\"sm\"` — Compact breadcrumbs for dense UIs\n- `\"base\"` — Default breadcrumbs size",
-          "values": ["sm", "base"],
+          "values": [
+            "sm",
+            "base"
+          ],
           "descriptions": {
             "sm": "Compact breadcrumbs for dense UIs",
             "base": "Default breadcrumbs size"
@@ -1517,8 +1693,18 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [],
-      "colors": ["text-sf-inactive", "text-sf-subtle", "text-sf-success"],
+      "examples": [
+        "<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">Docs</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>\n    </Breadcrumbs>",
+        "<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\" icon={<HouseIcon size={16} />}>\n        Home\n      </Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">Projects</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>Current Project</Breadcrumbs.Current>\n    </Breadcrumbs>",
+        "<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\" icon={<HouseIcon size={16} />}>\n        Home\n      </Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Link href=\"#\">Docs</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current loading />\n    </Breadcrumbs>",
+        "<Breadcrumbs>\n      <Breadcrumbs.Current icon={<HouseIcon size={16} />}>\n        Worker Analytics\n      </Breadcrumbs.Current>\n    </Breadcrumbs>",
+        "<Breadcrumbs>\n      <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n      <Breadcrumbs.Separator />\n      <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>\n      <Breadcrumbs.Clipboard text=\"#\" />\n    </Breadcrumbs>"
+      ],
+      "colors": [
+        "text-sf-inactive",
+        "text-sf-subtle",
+        "text-sf-success"
+      ],
       "subComponents": {
         "Link": {
           "name": "Link",
@@ -1575,7 +1761,11 @@
         "shape": {
           "type": "enum",
           "optional": true,
-          "values": ["base", "square", "circle"],
+          "values": [
+            "base",
+            "square",
+            "circle"
+          ],
           "descriptions": {
             "base": "Default rectangular button shape",
             "square": "Square button for icon-only actions",
@@ -1590,7 +1780,12 @@
         "size": {
           "type": "enum",
           "optional": true,
-          "values": ["xs", "sm", "base", "lg"],
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "xs": "Extra small button for compact UIs",
             "sm": "Small button for secondary actions",
@@ -1698,14 +1893,31 @@
         "type": {
           "type": "enum",
           "optional": true,
-          "values": ["submit", "reset", "button"]
+          "values": [
+            "submit",
+            "reset",
+            "button"
+          ]
         },
         "value": {
           "type": "string | string[] | number",
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Button variant=\"secondary\">Button</Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add\"\n      />\n    </div>",
+        "<Button variant=\"primary\">Primary</Button>",
+        "<Button variant=\"secondary\">Secondary</Button>",
+        "<Button variant=\"ghost\">Ghost</Button>",
+        "<Button variant=\"destructive\">Destructive</Button>",
+        "<Button variant=\"outline\">Outline</Button>",
+        "<Button variant=\"secondary-destructive\">Secondary Destructive</Button>",
+        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button size=\"xs\" variant=\"secondary\">\n        Extra Small\n      </Button>\n      <Button size=\"sm\" variant=\"secondary\">\n        Small\n      </Button>\n      <Button size=\"base\" variant=\"secondary\">\n        Base\n      </Button>\n      <Button size=\"lg\" variant=\"secondary\">\n        Large\n      </Button>\n    </div>",
+        "<Button variant=\"secondary\" icon={PlusIcon}>\n      Create Worker\n    </Button>",
+        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n      <Button\n        variant=\"secondary\"\n        shape=\"circle\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n    </div>",
+        "<Button variant=\"primary\" loading>\n      Loading...\n    </Button>",
+        "<Button variant=\"secondary\" disabled>\n      Disabled\n    </Button>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-brand",
@@ -1731,7 +1943,10 @@
           "type": "enum",
           "optional": true,
           "description": "Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text)",
-          "values": ["default", "error"],
+          "values": [
+            "default",
+            "error"
+          ],
           "descriptions": {
             "default": "Default checkbox appearance",
             "error": "Error state for validation failures"
@@ -1798,7 +2013,17 @@
           "description": "Callback when checkbox value changes"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Checkbox\n      label=\"Accept terms and conditions\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
+        "<Checkbox\n      label=\"Enable notifications\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
+        "<Checkbox label=\"I agree\" checked={checked} onCheckedChange={setChecked} />",
+        "<Checkbox\n      label=\"Select all\"\n      indeterminate={indeterminate}\n      onCheckedChange={setIndeterminate}\n    />",
+        "<Checkbox\n      label=\"Remember me\"\n      controlFirst={false}\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
+        "<Checkbox label=\"Disabled option\" disabled />",
+        "<Checkbox label=\"Invalid option\" variant=\"error\" />",
+        "<Checkbox.Group\n      legend=\"Email preferences\"\n      description=\"Choose how you'd like to receive updates\"\n      value={preferences}\n      onValueChange={setPreferences}\n    >\n      <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n      <Checkbox.Item value=\"push\" label=\"Push notifications\" />\n    </Checkbox.Group>",
+        "<Checkbox.Group\n      legend=\"Required preferences\"\n      error=\"Please select at least one notification method\"\n      value={[]}\n      onValueChange={() => {}}\n    >\n      <Checkbox.Item value=\"email\" label=\"Email\" variant=\"error\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS\" variant=\"error\" />\n    </Checkbox.Group>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-contrast",
@@ -1864,14 +2089,32 @@
       "styling": {
         "dimensions": "h-4 w-4",
         "borderRadius": "rounded-sm",
-        "baseTokens": ["bg-sf-base", "ring-sf-line"],
+        "baseTokens": [
+          "bg-sf-base",
+          "ring-sf-line"
+        ],
         "states": {
-          "checked": ["bg-sf-contrast", "text-sf-inverse"],
-          "indeterminate": ["bg-sf-contrast", "text-sf-inverse"],
-          "error": ["ring-sf-danger"],
-          "hover": ["ring-sf-ring"],
-          "focus": ["ring-sf-ring"],
-          "disabled": ["opacity-50", "cursor-not-allowed"]
+          "checked": [
+            "bg-sf-contrast",
+            "text-sf-inverse"
+          ],
+          "indeterminate": [
+            "bg-sf-contrast",
+            "text-sf-inverse"
+          ],
+          "error": [
+            "ring-sf-danger"
+          ],
+          "hover": [
+            "ring-sf-ring"
+          ],
+          "focus": [
+            "ring-sf-ring"
+          ],
+          "disabled": [
+            "opacity-50",
+            "cursor-not-allowed"
+          ]
         },
         "icons": [
           {
@@ -1898,7 +2141,11 @@
           "type": "enum",
           "optional": true,
           "description": "Size of the clipboard text field.\n- `\"sm\"` — Small clipboard text for compact UIs\n- `\"base\"` — Default clipboard text size\n- `\"lg\"` — Large clipboard text for prominent display",
-          "values": ["sm", "base", "lg"],
+          "values": [
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "sm": "Small clipboard text for compact UIs",
             "base": "Default clipboard text size",
@@ -1932,7 +2179,13 @@
           "description": "Accessible labels for i18n."
         }
       },
-      "examples": [],
+      "examples": [
+        "<ClipboardText text=\"0c239dd2\" />",
+        "<ClipboardText text=\"abc123\" />",
+        "<ClipboardText text=\"sk_live_51H8...\" />",
+        "<ClipboardText text=\"https://example.com/very/long/url/path\" />",
+        "<ClipboardText\n      text=\"npx sf add button\"\n      tooltip={{ copiedText: \"Copied!\", side: \"top\", text: \"Copy\" }}\n    />"
+      ],
       "colors": [
         "bg-sf-base",
         "border-sf-line",
@@ -1947,9 +2200,18 @@
           "border-sf-fill"
         ],
         "states": {
-          "input": ["bg-sf-control", "text-sf-default", "ring-sf-line"],
-          "text": ["bg-sf-base", "font-mono"],
-          "button": ["border-sf-fill"]
+          "input": [
+            "bg-sf-control",
+            "text-sf-default",
+            "ring-sf-line"
+          ],
+          "text": [
+            "bg-sf-base",
+            "font-mono"
+          ],
+          "button": [
+            "border-sf-fill"
+          ]
         },
         "inputStyles": {
           "base": "bg-sf-control text-sf-default ring ring-sf-line",
@@ -2020,7 +2282,13 @@
           "type": "enum",
           "optional": true,
           "description": "Language hint for the code content.\n- `\"ts\"` — TypeScript code\n- `\"tsx\"` — TypeScript JSX code\n- `\"jsonc\"` — JSON with comments\n- `\"bash\"` — Shell/Bash commands\n- `\"css\"` — CSS styles",
-          "values": ["ts", "tsx", "jsonc", "bash", "css"],
+          "values": [
+            "ts",
+            "tsx",
+            "jsonc",
+            "bash",
+            "css"
+          ],
           "descriptions": {
             "ts": "TypeScript code",
             "tsx": "TypeScript JSX code",
@@ -2046,8 +2314,18 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [],
-      "colors": ["bg-sf-recessed", "border-sf-line", "text-sf-default"],
+      "examples": [
+        "<CodeBlock\n      lang=\"tsx\"\n      code={`const greeting = \"Hello, World!\";\nconsole.log(greeting);`}\n    />",
+        "<CodeBlock\n      lang=\"tsx\"\n      code={`interface User {\n  id: string;\n  name: string;\n  email: string;\n}\n\nconst user: User = {\n  id: \"1\",\n  name: \"John Doe\",\n  email: \"john@example.com\"\n};`}\n    />",
+        "<CodeBlock\n      lang=\"bash\"\n      code={`npm install @signalflare-ai/ui\nbun add @signalflare-ai/ui`}\n    />",
+        "<CodeBlock\n      lang=\"jsonc\"\n      code={`{\n  \"name\": \"sf\",\n  \"version\": \"1.0.0\",\n  \"dependencies\": {\n    \"react\": \"^19.0.0\"\n  }\n}`}\n    />",
+        "<Code\n      lang=\"bash\"\n      code=\"export API_KEY={{apiKey}}\"\n      values={{\n        apiKey: { highlight: true, value: \"sk_live_123\" },\n      }}\n    />"
+      ],
+      "colors": [
+        "bg-sf-recessed",
+        "border-sf-line",
+        "text-sf-default"
+      ],
       "subComponents": {
         "Block": {
           "name": "Block",
@@ -2097,8 +2375,15 @@
           "description": "Callback when collapsed state changes"
         }
       },
-      "examples": [],
-      "colors": ["border-sf-fill", "text-sf-link"]
+      "examples": [
+        "<div className=\"w-full\">\n      <Collapsible label=\"What is SF?\" open={isOpen} onOpenChange={setIsOpen}>\n        A minimal, composable component library for building modern interfaces.\n      </Collapsible>\n    </div>",
+        "<div className=\"w-full\">\n      <Collapsible label=\"What is SF?\" open={isOpen} onOpenChange={setIsOpen}>\n        A minimal, composable component library for building modern interfaces.\n      </Collapsible>\n    </div>",
+        "<div className=\"w-full space-y-2\">\n      <Collapsible label=\"What is SF?\" open={open1} onOpenChange={setOpen1}>\n        A minimal, composable component library for building modern interfaces.\n      </Collapsible>\n      <Collapsible\n        label=\"How do I use it?\"\n        open={open2}\n        onOpenChange={setOpen2}\n      >\n        Install the components and import them into your project.\n      </Collapsible>\n      <Collapsible\n        label=\"Is it open source?\"\n        open={open3}\n        onOpenChange={setOpen3}\n      >\n        Check the repository for license information.\n      </Collapsible>\n    </div>"
+      ],
+      "colors": [
+        "border-sf-fill",
+        "text-sf-link"
+      ]
     },
     "Combobox": {
       "name": "Combobox",
@@ -2111,7 +2396,10 @@
           "type": "enum",
           "optional": true,
           "description": "Position of the text input relative to chips in multi-select mode.\n- `\"right\"` — Input inline to the right of chips\n- `\"top\"` — Input above chips",
-          "values": ["right", "top"],
+          "values": [
+            "right",
+            "top"
+          ],
           "descriptions": {
             "right": "Input positioned inline to the right of chips",
             "top": "Input positioned above chips"
@@ -2176,7 +2464,14 @@
           "description": "Custom equality function for comparing items"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={fruits}\n    >\n      <Combobox.TriggerInput placeholder=\"Please select\" />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: string) => (\n            <Combobox.Item key={item} value={item}>\n              {item}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>",
+        "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as Language)}\n      items={languages}\n    >\n      <Combobox.TriggerValue className=\"w-[200px]\" />\n      <Combobox.Content>\n        <Combobox.Input placeholder=\"Search languages\" />\n        <Combobox.Empty />\n        <Combobox.List>\n          {(item: Language) => (\n            <Combobox.Item key={item.value} value={item}>\n              {item.emoji} {item.label}\n            </Combobox.Item>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>",
+        "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as ServerLocation | null)}\n      items={servers}\n    >\n      <Combobox.TriggerInput\n        className=\"w-[200px]\"\n        placeholder=\"Select server\"\n      />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(group: ServerLocationGroup) => (\n            <Combobox.Group key={group.value} items={group.items}>\n              <Combobox.GroupLabel>{group.value}</Combobox.GroupLabel>\n              <Combobox.Collection>\n                {(item: ServerLocation) => (\n                  <Combobox.Item key={item.value} value={item}>\n                    {item.label}\n                  </Combobox.Item>\n                )}\n              </Combobox.Collection>\n            </Combobox.Group>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>",
+        "<div className=\"flex gap-2\">\n      <Combobox\n        value={value}\n        onValueChange={setValue}\n        items={bots}\n        isItemEqualToValue={(bot: BotItem, selected: BotItem) =>\n          bot.value === selected.value\n        }\n        multiple\n      >\n        <Combobox.TriggerMultipleWithInput\n          className=\"w-[400px]\"\n          placeholder=\"Select bots\"\n          renderItem={(selected: BotItem) => (\n            <Combobox.Chip key={selected.value}>{selected.label}</Combobox.Chip>\n          )}\n          inputSide=\"right\"\n        />\n        <Combobox.Content className=\"max-h-[200px] min-w-auto overflow-y-auto\">\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: BotItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                <div className=\"flex gap-2\">\n                  <Text>{item.label}</Text>\n                  <Text variant=\"secondary\">{item.author}</Text>\n                </div>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Button variant=\"primary\">Submit</Button>\n    </div>",
+        "<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        description=\"Select your preferred database\"\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
+        "<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        error={{ match: true, message: \"Please select a database\" }}\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>"
+      ],
       "colors": [
         "bg-sf-control",
         "bg-sf-fill-hover",
@@ -2299,7 +2594,12 @@
           "description": "Child content - typically one or more Panel components"
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-sf-subtle\">\n          Last selected: <span className=\"text-sf-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={sampleGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Type a command or search...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-sf-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-sf-line bg-sf-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-sf-line bg-sf-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>Select</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>",
+        "<div>\n      <Button onClick={() => setOpen(true)}>Open Simple Palette</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={simpleItems}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n        }}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search actions...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SimpleItem) => (\n              <CommandPalette.Item\n                key={item.id}\n                value={item}\n                onClick={() => {\n                  console.log(\"Clicked:\", item.title);\n                  setOpen(false);\n                }}\n              >\n                {item.title}\n              </CommandPalette.Item>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No actions found</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
+        "<div>\n      <Button onClick={handleOpen}>Open with Loading</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={loading ? [] : sampleGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Search...\" />\n        <CommandPalette.List>\n          {loading ? (\n            <CommandPalette.Loading />\n          ) : (\n            <>\n              <CommandPalette.Results>\n                {(group: CommandGroup) => (\n                  <CommandPalette.Group key={group.id}>\n                    <CommandPalette.GroupLabel>\n                      {group.label}\n                    </CommandPalette.GroupLabel>\n                    <CommandPalette.Items>\n                      {(item: CommandItem) => (\n                        <CommandPalette.Item\n                          key={item.id}\n                          value={item}\n                          onClick={() => setOpen(false)}\n                        >\n                          <span className=\"flex items-center gap-3\">\n                            {item.icon && (\n                              <span className=\"text-sf-subtle\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span>{item.title}</span>\n                          </span>\n                        </CommandPalette.Item>\n                      )}\n                    </CommandPalette.Items>\n                  </CommandPalette.Group>\n                )}\n              </CommandPalette.Results>\n              <CommandPalette.Empty>No results found</CommandPalette.Empty>\n            </>\n          )}\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
+        "<div>\n      <Button onClick={() => setOpen(true)}>Open with ResultItem</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={searchResults}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search documentation...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SearchResult) => (\n              <CommandPalette.ResultItem\n                key={item.id}\n                value={item}\n                title={item.title}\n                breadcrumbs={item.breadcrumbs}\n                icon={item.icon}\n                onClick={() => {\n                  console.log(\"Navigate to:\", item.title);\n                  setOpen(false);\n                }}\n              />\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No pages found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-sf-line bg-sf-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-sf-line bg-sf-base px-1.5 py-0.5 text-[10px]\">\n              ⌘↵\n            </kbd>\n            <span>Open in new tab</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>"
+      ],
       "colors": [
         "bg-sf-elevated",
         "bg-sf-overlay",
@@ -2319,7 +2619,10 @@
       "props": {
         "layout": {
           "type": "enum",
-          "values": ["auto", "fixed"],
+          "values": [
+            "auto",
+            "fixed"
+          ],
           "default": "auto",
           "descriptions": {
             "auto": "Auto column sizing - columns resize based on content",
@@ -2335,7 +2638,16 @@
           "description": "Child elements"
         }
       },
-      "examples": [],
+      "examples": [
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <DataGrid data={sampleUsers} columns={columns} enableSorting>\n          <DataGrid.Content />\n        </DataGrid>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <DataGrid\n          data={paginatedData}\n          columns={columns.slice(0, 3)}\n          pageSize={pageSize}\n          pageIndex={pageIndex}\n          onPaginationChange={({ pageIndex: newPage }) => setPageIndex(newPage)}\n          totalCount={totalCount}\n          manualPagination\n        >\n          <DataGrid.Content />\n          <DataGrid.Pagination />\n        </DataGrid>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <DataGrid\n          data={sampleUsers.slice(0, 4)}\n          columns={columns}\n          enableRowSelection\n          rowSelection={rowSelection}\n          onRowSelectionChange={setRowSelection}\n        >\n          <DataGrid.Content />\n        </DataGrid>\n        <div className=\"border-t border-sf-line p-3 text-sm\">\n          <p className=\"text-sf-subtle\">\n            Selected: {Object.keys(rowSelection).length} rows\n          </p>\n        </div>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <DataGrid\n          data={sampleUsers.slice(0, 4)}\n          columns={columns}\n          columnVisibility={columnVisibility}\n          onColumnVisibilityChange={setColumnVisibility}\n        >\n          <DataGrid.Toolbar className=\"p-3\">\n            <DataGrid.ColumnToggle />\n          </DataGrid.Toolbar>\n          <DataGrid.Content />\n        </DataGrid>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <DataGrid data={sampleUsers} columns={columns} enableSorting>\n          <DataGrid.Toolbar className=\"flex items-center justify-between p-3\">\n            <span className=\"text-sm font-medium\">Users</span>\n            <DataGrid.ColumnToggle />\n          </DataGrid.Toolbar>\n          <DataGrid.Content />\n        </DataGrid>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <DataGrid\n          data={[]}\n          columns={columns.slice(0, 3)}\n          emptyState={\n            <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n              <p className=\"text-sf-strong font-medium\">No users found</p>\n              <p className=\"text-sf-subtle mt-1 text-sm\">\n                Try adjusting your filters or add new users\n              </p>\n            </div>\n          }\n        >\n          <DataGrid.Content />\n        </DataGrid>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <DataGrid\n          data={[]}\n          columns={columns.slice(0, 3)}\n          loading\n          loadingRows={3}\n        >\n          <DataGrid.Content />\n        </DataGrid>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <DataGrid\n          data={sampleUsers}\n          columns={resizableColumns}\n          enableSorting\n          enableColumnResizing\n          columnResizeMode=\"onEnd\"\n        >\n          <DataGrid.Content />\n        </DataGrid>\n      </LayerCard.Primary>\n    </LayerCard>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-brand",
@@ -2390,8 +2702,19 @@
           "description": "Child elements"
         }
       },
-      "examples": [],
-      "colors": ["bg-sf-base"]
+      "examples": [
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"single\"\n        selected={date}\n        onChange={(d) => {\n          if (d) {\n            setDate(d);\n          }\n        }}\n      />\n      <p className=\"text-sm text-sf-subtle\">\n        Selected: {date ? date.toLocaleDateString() : \"None\"}\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"multiple\"\n        selected={dates}\n        onChange={setDates}\n        max={5}\n      />\n      <p className=\"text-sm text-sf-subtle\">\n        Selected: {dates?.length ?? 0} date(s)\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        numberOfMonths={2}\n      />\n      <p className=\"text-sm text-sf-subtle\">\n        Range:{\" \"}\n        {range?.from\n          ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? \"...\"}`\n          : \"None\"}\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        min={3}\n        max={7}\n        footer={\n          <span className=\"text-xs text-sf-subtle\">Select 3-7 nights</span>\n        }\n      />\n    </div>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {date ? date.toLocaleDateString() : \"Pick a date\"}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-sf-line p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${\n                    isActive\n                      ? \"bg-sf-bg-inverse text-sf-text-inverse\"\n                      : \"text-sf-strong hover:bg-sf-control\"\n                  }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<DatePicker\n      mode=\"multiple\"\n      selected={dates}\n      onChange={setDates}\n      max={maxDays}\n      disabled={unavailableDates}\n      fixedWeeks\n      footer={\n        <p className=\"text-xs text-sf-subtle pt-2 w-full\">\n          {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.\n        </p>\n      }\n    />"
+      ],
+      "colors": [
+        "bg-sf-base"
+      ]
     },
     "DateRangePicker": {
       "name": "DateRangePicker",
@@ -2404,7 +2727,11 @@
           "type": "enum",
           "optional": true,
           "description": "Calendar size.\n- `\"sm\"` — Compact calendar for tight spaces\n- `\"base\"` — Default calendar size\n- `\"lg\"` — Large calendar for prominent date selection",
-          "values": ["sm", "base", "lg"],
+          "values": [
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "sm": "Compact calendar for tight spaces",
             "base": "Default calendar size",
@@ -2421,7 +2748,10 @@
           "type": "enum",
           "optional": true,
           "description": "Visual variant.\n- `\"default\"` — Standard appearance with overlay background\n- `\"subtle\"` — Minimal background",
-          "values": ["default", "subtle"],
+          "values": [
+            "default",
+            "subtle"
+          ],
           "descriptions": {
             "default": "Default calendar appearance",
             "subtle": "Subtle calendar with minimal background"
@@ -2528,7 +2858,12 @@
           "type": "enum",
           "optional": true,
           "description": "Dialog width.\n- `\"sm\"` — Small (min 288px) for simple confirmations\n- `\"base\"` — Default (min 384px)\n- `\"lg\"` — Large (min 512px) for complex content\n- `\"xl\"` — Extra large (min 768px) for detailed views",
-          "values": ["base", "sm", "lg", "xl"],
+          "values": [
+            "base",
+            "sm",
+            "lg",
+            "xl"
+          ],
           "descriptions": {
             "base": "Default dialog width",
             "sm": "Small dialog for simple confirmations",
@@ -2544,7 +2879,14 @@
           "default": "base"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Click me</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<XIcon />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-sf-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<XIcon />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-sf-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Project\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-sf-danger/20\">\n            <WarningIcon size={20} className=\"text-sf-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Project?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-sf-subtle\">\n          This action cannot be undone. This will permanently delete the project\n          and all associated data.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<XIcon />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-sf-subtle\">\n          Select a region for your new resource.\n        </Dialog.Description>\n        <Select\n          className=\"w-full\"\n          renderValue={(v) =>\n            regions.find((r) => r.value === v)?.label ?? \"Select region...\"\n          }\n        >\n          {regions.map((region) => (\n            <Select.Option key={region.value} value={region.value}>\n              {region.label}\n            </Select.Option>\n          ))}\n        </Select>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<XIcon />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-sf-subtle\">\n          Search and select a region for your new resource.\n        </Dialog.Description>\n        <Combobox value={value} onValueChange={setValue} items={regions}>\n          <Combobox.TriggerInput\n            className=\"w-full\"\n            placeholder=\"Search regions...\"\n          />\n          <Combobox.Content>\n            <Combobox.Empty>No regions found</Combobox.Empty>\n            <Combobox.List>\n              {(item: { value: string; label: string }) => (\n                <Combobox.Item key={item.value} value={item}>\n                  {item.label}\n                </Combobox.Item>\n              )}\n            </Combobox.List>\n          </Combobox.Content>\n        </Combobox>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Resource Actions\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<XIcon />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-sf-subtle\">\n          Choose an action for the selected resource.\n        </Dialog.Description>\n        <DropdownMenu>\n          <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n          <DropdownMenu.Content>\n            <DropdownMenu.Item>Edit</DropdownMenu.Item>\n            <DropdownMenu.Item>Duplicate</DropdownMenu.Item>\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n        <div className=\"mt-8 flex justify-end\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Close\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>"
+      ],
       "colors": [
         "bg-sf-elevated",
         "bg-sf-overlay",
@@ -2661,7 +3003,10 @@
           "type": "enum",
           "optional": true,
           "description": "Visual style of the dropdown item.\n- `\"default\"` — Standard item appearance\n- `\"danger\"` — Destructive action with red text",
-          "values": ["default", "danger"],
+          "values": [
+            "default",
+            "danger"
+          ],
           "descriptions": {
             "default": "Default dropdown item appearance",
             "danger": "Destructive action item"
@@ -2780,7 +3125,11 @@
           "type": "enum",
           "optional": true,
           "description": "Size of the empty state container.\n- `\"sm\"` — Compact empty state for smaller containers\n- `\"base\"` — Default empty state size\n- `\"lg\"` — Large empty state for prominent placement",
-          "values": ["sm", "base", "lg"],
+          "values": [
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "sm": "Compact empty state for smaller containers",
             "base": "Default empty state size",
@@ -2824,7 +3173,14 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [],
+      "examples": [
+        "<Empty\n      icon={<PackageIcon size={48} />}\n      title=\"No packages found\"\n      description=\"Get started by installing your first package.\"\n      commandLine=\"npm install @signalflare-ai/ui\"\n      contents={\n        <div className=\"flex items-center gap-2\">\n          <Button icon={<CodeIcon />}>See examples</Button>\n          <Button icon={<GlobeIcon />} variant=\"primary\">\n            View documentation\n          </Button>\n        </div>\n      }\n    />",
+        "<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sm text-sf-subtle\">Small</p>\n        <Empty\n          size=\"sm\"\n          icon={<DatabaseIcon size={32} className=\"text-sf-inactive\" />}\n          title=\"No data available\"\n          description=\"There is no data to display.\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-sf-subtle\">Base</p>\n        <Empty\n          size=\"base\"\n          icon={<DatabaseIcon size={48} className=\"text-sf-inactive\" />}\n          title=\"No data available\"\n          description=\"There is no data to display.\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-sf-subtle\">Large</p>\n        <Empty\n          size=\"lg\"\n          icon={<DatabaseIcon size={64} className=\"text-sf-inactive\" />}\n          title=\"No data available\"\n          description=\"There is no data to display.\"\n        />\n      </div>\n    </div>",
+        "<Empty\n      icon={<FolderOpenIcon size={48} className=\"text-sf-inactive\" />}\n      title=\"No projects found\"\n      description=\"Get started by creating your first project using the command below.\"\n      commandLine=\"npm create sf-project\"\n    />",
+        "<Empty\n      icon={<CloudSlashIcon size={48} className=\"text-sf-inactive\" />}\n      title=\"No connection\"\n      description=\"Unable to connect to the server. Please check your connection and try again.\"\n      contents={\n        <div className=\"flex gap-2\">\n          <Button variant=\"primary\">Retry</Button>\n          <Button variant=\"secondary\">Go Back</Button>\n        </div>\n      }\n    />",
+        "<Empty title=\"Nothing here\" />",
+        "<Empty\n      title=\"No results found\"\n      description=\"Try adjusting your search or filter to find what you're looking for.\"\n    />"
+      ],
       "colors": [
         "bg-sf-control",
         "bg-sf-overlay",
@@ -2881,7 +3237,11 @@
         }
       },
       "examples": [],
-      "colors": ["text-sf-danger", "text-sf-default", "text-sf-subtle"]
+      "colors": [
+        "text-sf-danger",
+        "text-sf-default",
+        "text-sf-subtle"
+      ]
     },
     "Filters": {
       "name": "Filters",
@@ -2904,7 +3264,11 @@
           "type": "enum",
           "optional": true,
           "description": "Size variant for filter pills",
-          "values": ["sm", "default", "lg"],
+          "values": [
+            "sm",
+            "default",
+            "lg"
+          ],
           "descriptions": {
             "sm": "Small filter items",
             "default": "Default filter items",
@@ -2963,7 +3327,13 @@
           "description": "CSS classes for the filter menu popup"
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"w-full rounded-lg border border-sf-line bg-sf-base p-4\">\n      <Filters filters={filters} fields={filterFields} onChange={setFilters} />\n      <div className=\"mt-4 rounded bg-sf-elevated p-3 font-mono text-xs\">\n        <p className=\"text-sf-subtle mb-1\">Active filters:</p>\n        <pre className=\"text-sf-strong overflow-x-auto\">\n          {JSON.stringify(filters, null, 2)}\n        </pre>\n      </div>\n    </div>",
+        "<div className=\"w-full rounded-lg border border-sf-line bg-sf-base p-4\">\n      <Filters\n        filters={filters}\n        fields={filterFields.slice(0, 3)}\n        onChange={setFilters}\n        size=\"sm\"\n      />\n    </div>",
+        "<div className=\"w-full rounded-lg border border-sf-line bg-sf-base p-4\">\n      <Filters\n        filters={filters}\n        fields={filterFields}\n        onChange={setFilters}\n        size=\"lg\"\n      />\n    </div>",
+        "<div className=\"w-full rounded-lg border border-sf-line bg-sf-base p-4\">\n      <Filters\n        filters={filters}\n        fields={filterFields}\n        onChange={setFilters}\n        showSearchInput\n      />\n      <p className=\"text-sf-subtle mt-3 text-xs\">\n        Open the \"Add Filter\" menu to see grouped fields (General, User Details)\n      </p>\n    </div>",
+        "<div className=\"w-full rounded-lg border border-sf-line bg-sf-base p-4\">\n      <Filters\n        filters={filters}\n        fields={filterFields.slice(0, 3)}\n        onChange={setFilters}\n        enableShortcut\n        shortcutKey=\"k\"\n        shortcutLabel=\"Cmd+K\"\n      />\n      <p className=\"text-sf-subtle mt-3 text-xs\">\n        Press Cmd+K (or Ctrl+K) to quickly open the add filter menu\n      </p>\n    </div>"
+      ],
       "colors": [
         "bg-sf-fill",
         "bg-sf-line",
@@ -3015,7 +3385,12 @@
           "type": "enum",
           "optional": true,
           "description": "Gap size between grid items.\n- `\"none\"` — No gap\n- `\"sm\"` — 12px gap\n- `\"base\"` — Responsive gap (8px → 24px → 32px)\n- `\"lg\"` — 32px gap",
-          "values": ["none", "sm", "base", "lg"],
+          "values": [
+            "none",
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "none": "No gap between grid items",
             "sm": "Small gap between grid items",
@@ -3069,8 +3444,16 @@
           }
         }
       },
-      "examples": [],
-      "colors": ["border-sf-line"]
+      "examples": [
+        "<Grid variant=\"2up\" gap=\"base\">\n      <GridItem>\n        <Tile>\n          <div>Item 1</div>\n          <div className=\"mt-1\">First grid item</div>\n        </Tile>\n      </GridItem>\n      <GridItem>\n        <Tile>\n          <div>Item 2</div>\n          <div className=\"mt-1\">Second grid item</div>\n        </Tile>\n      </GridItem>\n    </Grid>",
+        "<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">variant=\"2up\"</p>\n        <Grid variant=\"2up\" gap=\"sm\">\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">1</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">2</span>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">variant=\"3up\"</p>\n        <Grid variant=\"3up\" gap=\"sm\">\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">1</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">2</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">3</span>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">variant=\"4up\"</p>\n        <Grid variant=\"4up\" gap=\"sm\">\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">1</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">2</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">3</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">4</span>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>",
+        "<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">variant=\"2-1\" (66% / 33%)</p>\n        <Grid variant=\"2-1\" gap=\"sm\">\n          <GridItem>\n            <Tile>\n              <div>Main Content</div>\n              <div className=\"mt-1\">Two-thirds width</div>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <div>Sidebar</div>\n              <div className=\"mt-1\">One-third width</div>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">variant=\"1-2\" (33% / 66%)</p>\n        <Grid variant=\"1-2\" gap=\"sm\">\n          <GridItem>\n            <Tile>\n              <div>Sidebar</div>\n              <div className=\"mt-1\">One-third width</div>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <div>Main Content</div>\n              <div className=\"mt-1\">Two-thirds width</div>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>",
+        "<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">gap=\"none\"</p>\n        <Grid variant=\"side-by-side\" gap=\"none\">\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">1</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">2</span>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">gap=\"sm\"</p>\n        <Grid variant=\"side-by-side\" gap=\"sm\">\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">1</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">2</span>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">gap=\"base\" (default, responsive)</p>\n        <Grid variant=\"side-by-side\" gap=\"base\">\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">1</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">2</span>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sf-subtle\">gap=\"lg\"</p>\n        <Grid variant=\"side-by-side\" gap=\"lg\">\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">1</span>\n            </Tile>\n          </GridItem>\n          <GridItem>\n            <Tile>\n              <span className=\"block text-center\">2</span>\n            </Tile>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>",
+        "<Grid variant=\"4up\" gap=\"base\" mobileDivider>\n      <GridItem>\n        <Tile>\n          <div>Item 1</div>\n          <div className=\"mt-1\">Has divider on mobile</div>\n        </Tile>\n      </GridItem>\n      <GridItem>\n        <Tile>\n          <div>Item 2</div>\n          <div className=\"mt-1\">Has divider on mobile</div>\n        </Tile>\n      </GridItem>\n      <GridItem>\n        <Tile>\n          <div>Item 3</div>\n          <div className=\"mt-1\">Has divider on mobile</div>\n        </Tile>\n      </GridItem>\n      <GridItem>\n        <Tile>\n          <div>Item 4</div>\n          <div className=\"mt-1\">Has divider on mobile</div>\n        </Tile>\n      </GridItem>\n    </Grid>"
+      ],
+      "colors": [
+        "border-sf-line"
+      ]
     },
     "Input": {
       "name": "Input",
@@ -3103,7 +3486,12 @@
           "type": "enum",
           "optional": true,
           "description": "Input size.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary fields\n- `\"base\"` — Default size\n- `\"lg\"` — Large for prominent fields",
-          "values": ["xs", "sm", "base", "lg"],
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "xs": "Extra small input for compact UIs",
             "sm": "Small input for secondary fields",
@@ -3122,7 +3510,10 @@
           "type": "enum",
           "optional": true,
           "description": "Visual variant.\n- `\"default\"` — Standard input\n- `\"error\"` — Error state for validation failures",
-          "values": ["default", "error"],
+          "values": [
+            "default",
+            "error"
+          ],
           "descriptions": {
             "default": "Default input appearance",
             "error": "Error state for validation failures"
@@ -3142,7 +3533,19 @@
           "default": "default"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      description=\"We'll never share your email\"\n    />",
+        "<Input\n      label=\"Username\"\n      placeholder=\"Choose a username\"\n      description=\"3-20 characters, alphanumeric only\"\n    />",
+        "<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      value=\"invalid-email\"\n      variant=\"error\"\n      error=\"Please enter a valid email address\"\n    />",
+        "<Input\n      label=\"Password\"\n      type=\"password\"\n      value=\"short\"\n      variant=\"error\"\n      error={{\n        match: \"tooShort\",\n        message: \"Password must be at least 8 characters\",\n      }}\n      minLength={8}\n    />",
+        "<div className=\"flex flex-col gap-4\">\n      <Input size=\"xs\" label=\"Extra Small\" placeholder=\"Extra small input\" />\n      <Input size=\"sm\" label=\"Small\" placeholder=\"Small input\" />\n      <Input label=\"Base\" placeholder=\"Base input (default)\" />\n      <Input size=\"lg\" label=\"Large\" placeholder=\"Large input\" />\n    </div>",
+        "<Input label=\"Disabled field\" placeholder=\"Cannot edit\" disabled />",
+        "<Input placeholder=\"Search...\" aria-label=\"Search products\" />",
+        "<div className=\"flex flex-col gap-4\">\n      <Input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n      <Input type=\"password\" label=\"Password\" placeholder=\"••••••••\" />\n      <Input type=\"number\" label=\"Age\" placeholder=\"18\" />\n      <Input type=\"tel\" label=\"Phone\" placeholder=\"+1 (555) 000-0000\" />\n    </div>",
+        "<Input\n      label=\"Phone Number\"\n      required={false}\n      placeholder=\"+1 (555) 000-0000\"\n    />",
+        "<Input\n      label=\"API Key\"\n      labelTooltip=\"Find this in your dashboard under Settings > API Keys\"\n      placeholder=\"sk_live_...\"\n    />",
+        "<Input\n      label={\n        <span>\n          Email for <strong>billing</strong>\n        </span>\n      }\n      required\n      placeholder=\"billing@company.com\"\n      type=\"email\"\n    />"
+      ],
       "colors": [
         "bg-sf-control",
         "ring-sf-danger",
@@ -3240,8 +3643,18 @@
           "description": "When true, only renders the inline content (indicators, tooltip) without the outer label element with font styling. Useful when composed inside another label element that already provides the text styling."
         }
       },
-      "examples": [],
-      "colors": ["text-sf-default", "text-sf-strong"]
+      "examples": [
+        "<div className=\"flex flex-col gap-4\">\n      <Label>Default Label</Label>\n      <Label showOptional>Optional Label</Label>\n      <Label tooltip=\"More information about this field\">\n        Label with Tooltip\n      </Label>\n    </div>",
+        "<Input label=\"Phone Number\" required={false} placeholder=\"+1 555-0000\" />",
+        "<Input\n      label=\"API Key\"\n      labelTooltip=\"Find this in your dashboard settings under API > Keys\"\n      placeholder=\"sk_live_...\"\n    />",
+        "<Checkbox\n      label={\n        <span>\n          I agree to the <strong>Terms of Service</strong>\n        </span>\n      }\n    />",
+        "<div className=\"flex max-w-md flex-col gap-4\">\n      <Input label=\"Full Name\" placeholder=\"John Doe\" />\n      <Input\n        label=\"Email\"\n        labelTooltip=\"We'll send your receipt here\"\n        placeholder=\"john@example.com\"\n        type=\"email\"\n      />\n      <Input label=\"Company\" required={false} placeholder=\"Acme Inc.\" />\n      <Select label=\"Country\" hideLabel={false} placeholder=\"Select a country\">\n        <Select.Option value=\"us\">United States</Select.Option>\n        <Select.Option value=\"uk\">United Kingdom</Select.Option>\n        <Select.Option value=\"ca\">Canada</Select.Option>\n      </Select>\n    </div>",
+        "<div className=\"flex flex-col gap-3\">\n      <Label>Default</Label>\n      <Label showOptional>Optional</Label>\n      <Label tooltip=\"Important field\">With Tooltip</Label>\n    </div>"
+      ],
+      "colors": [
+        "text-sf-default",
+        "text-sf-strong"
+      ]
     },
     "LayerCard": {
       "name": "LayerCard",
@@ -3260,7 +3673,11 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [],
+      "examples": [
+        "<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          shape=\"square\"\n          aria-label=\"Go to next steps\"\n        >\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with SF</LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <p className=\"text-sm text-sf-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<div className=\"flex gap-4\">\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Components</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">Browse all components</p>\n        </LayerCard.Primary>\n      </LayerCard>\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Examples</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">View code examples</p>\n        </LayerCard.Primary>\n      </LayerCard>\n    </div>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-elevated",
@@ -3314,7 +3731,11 @@
           "type": "enum",
           "optional": true,
           "description": "Visual style of the link.\n- `\"inline\"` — Inline text link that flows with content\n- `\"current\"` — Link that inherits color from parent text\n- `\"plain\"` — Link without underline decoration",
-          "values": ["inline", "current", "plain"],
+          "values": [
+            "inline",
+            "current",
+            "plain"
+          ],
           "descriptions": {
             "inline": "Inline text link that flows with content",
             "current": "Link that inherits color from parent text",
@@ -3405,7 +3826,13 @@
           "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"grid gap-x-6 gap-y-4 text-base md:grid-cols-3\">\n      <Link href=\"#\">Default inline link</Link>\n      <Link href=\"#\" variant=\"current\">\n        Current color link\n      </Link>\n      <Link href=\"#\" variant=\"plain\">\n        Plain inline link\n      </Link>\n    </div>",
+        "<p className=\"mx-auto max-w-md text-base leading-relaxed text-sf-default\">\n      This is a paragraph with an <Link href=\"#\">inline link</Link> that flows\n      naturally with the surrounding text. Links maintain proper underline\n      offset for readability.\n    </p>",
+        "<Link\n      href=\"https://cloudflare.com\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"text-base\"\n    >\n      Visit Cloudflare <Link.ExternalIcon />\n    </Link>",
+        "<p className=\"text-base text-sf-danger\">\n      This error message contains a{\" \"}\n      <Link href=\"#\" variant=\"current\">\n        link\n      </Link>{\" \"}\n      that inherits the red color from its parent.\n    </p>",
+        "<div className=\"flex flex-col gap-x-6 gap-y-4 text-base md:flex-row\">\n      <Link render={<CustomRouterLink href=\"/dashboard\" />} variant=\"inline\">\n        Dashboard (via render)\n      </Link>\n      <Link\n        render={\n          <CustomRouterLink\n            href=\"https://developers.cloudflare.com\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          />\n        }\n        variant=\"inline\"\n      >\n        Cloudflare Docs <Link.ExternalIcon />\n      </Link>\n    </div>"
+      ],
       "colors": [],
       "subComponents": {
         "ExternalIcon": {
@@ -3431,7 +3858,11 @@
           "type": "enum",
           "optional": true,
           "description": "Size of the spinner. Use a preset name or a custom pixel number.\n- `\"sm\"` — 16px, for inline use\n- `\"base\"` — 24px, default size\n- `\"lg\"` — 32px, for prominent loading states",
-          "values": ["sm", "base", "lg"],
+          "values": [
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "sm": "Small loader for inline use",
             "base": "Default loader size",
@@ -3440,7 +3871,11 @@
           "default": "base"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Loader />",
+        "<div className=\"flex items-center gap-4\">\n      <Loader size=\"sm\" />\n      <Loader size=\"base\" />\n      <Loader size=\"lg\" />\n    </div>",
+        "<Loader size={24} />"
+      ],
       "colors": []
     },
     "MenuBar": {
@@ -3471,8 +3906,16 @@
           "description": "When true, each option's `id` field is used for matching instead of its array index."
         }
       },
-      "examples": [],
-      "colors": ["bg-sf-base", "bg-sf-fill", "border-sf-fill"],
+      "examples": [
+        "<MenuBar\n      isActive=\"bold\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          onClick: () => {},\n          tooltip: \"Bold\",\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          onClick: () => {},\n          tooltip: \"Italic\",\n        },\n      ]}\n    />",
+        "<MenuBar\n      isActive=\"bold\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          onClick: () => {},\n          tooltip: \"Bold\",\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          onClick: () => {},\n          tooltip: \"Italic\",\n        },\n      ]}\n    />",
+        "<MenuBar\n      isActive=\"\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          onClick: () => {},\n          tooltip: \"Bold\",\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          onClick: () => {},\n          tooltip: \"Italic\",\n        },\n      ]}\n    />"
+      ],
+      "colors": [
+        "bg-sf-base",
+        "bg-sf-fill",
+        "border-sf-fill"
+      ],
       "styling": {
         "container": {
           "height": 32,
@@ -3532,8 +3975,19 @@
           "description": "Minimum value of the meter (default: 0)"
         }
       },
-      "examples": [],
-      "colors": ["bg-sf-fill", "text-sf-default", "text-sf-strong"]
+      "examples": [
+        "<Meter label=\"Storage used\" value={65} />",
+        "<Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />",
+        "<Meter label=\"Progress\" value={40} showValue={false} />",
+        "<Meter label=\"Quota reached\" value={100} />",
+        "<Meter label=\"Memory usage\" value={15} />",
+        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-green-500 via-green-500 to-green-500\"\n    />"
+      ],
+      "colors": [
+        "bg-sf-fill",
+        "text-sf-default",
+        "text-sf-strong"
+      ]
     },
     "Pagination": {
       "name": "Pagination",
@@ -3545,7 +3999,10 @@
         "controls": {
           "type": "enum",
           "optional": true,
-          "values": ["full", "simple"],
+          "values": [
+            "full",
+            "simple"
+          ],
           "descriptions": {
             "full": "Full pagination controls with first, previous, page input, next, and last buttons",
             "simple": "Simple pagination controls with only previous and next buttons"
@@ -3578,8 +4035,17 @@
           "description": "Method to provide custom pagination text"
         }
       },
-      "examples": [],
-      "colors": ["text-sf-strong"],
+      "examples": [
+        "<Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"simple\"\n    />",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"full\"\n    />",
+        "<Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />",
+        "<Pagination page={page} setPage={setPage} perPage={25} totalCount={1250} />",
+        "<Pagination\n      text={({ perPage }) => `Page ${page} - showing ${perPage} per page`}\n      page={page}\n      setPage={setPage}\n      perPage={25}\n      totalCount={100}\n    />"
+      ],
+      "colors": [
+        "text-sf-strong"
+      ],
       "styling": {
         "layout": {
           "height": 36,
@@ -3602,7 +4068,12 @@
           "type": "enum",
           "optional": true,
           "description": "Which side of the trigger the popover appears on.\n- `\"top\"` — Above the trigger\n- `\"bottom\"` — Below the trigger\n- `\"left\"` — Left of the trigger\n- `\"right\"` — Right of the trigger",
-          "values": ["top", "bottom", "left", "right"],
+          "values": [
+            "top",
+            "bottom",
+            "left",
+            "right"
+          ],
           "descriptions": {
             "top": "Popover appears above the trigger",
             "bottom": "Popover appears below the trigger",
@@ -3612,7 +4083,14 @@
           "default": "bottom"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button shape=\"square\" icon={BellIcon} aria-label=\"Notifications\" />\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Popover</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Popover Title</Popover.Title>\n        <Popover.Description>\n          This is a basic popover with a title and description.\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Settings</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Settings</Popover.Title>\n        <Popover.Description>\n          Configure your preferences below.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close asChild>\n            <Button variant=\"secondary\" size=\"sm\">\n              Close\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<div className=\"flex flex-wrap gap-4\">\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Bottom</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"bottom\">\n          <Popover.Title>Bottom</Popover.Title>\n          <Popover.Description>\n            Popover on bottom (default).\n          </Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Top</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"top\">\n          <Popover.Title>Top</Popover.Title>\n          <Popover.Description>Popover on top.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Left</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"left\">\n          <Popover.Title>Left</Popover.Title>\n          <Popover.Description>Popover on left.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Right</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\">\n          <Popover.Title>Right</Popover.Title>\n          <Popover.Description>Popover on right.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n    </div>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>User Profile</Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"w-64\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"size-10 rounded-full bg-sf-recessed\" />\n          <div>\n            <Popover.Title>Jane Doe</Popover.Title>\n            <p className=\"text-sm text-sf-subtle\">jane@example.com</p>\n          </div>\n        </div>\n        <div className=\"mt-3 flex gap-2 border-t border-sf-line pt-3\">\n          <Button variant=\"secondary\" size=\"sm\" className=\"flex-1\">\n            Profile\n          </Button>\n          <Popover.Close asChild>\n            <Button variant=\"ghost\" size=\"sm\" className=\"flex-1\">\n              Sign Out\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger openOnHover delay={200} asChild>\n        <Button variant=\"secondary\">Hover Me</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Hover Triggered</Popover.Title>\n        <Popover.Description>\n          This popover opens on hover with a 200ms delay. It can still contain\n          interactive content like buttons and links.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close asChild>\n            <Button variant=\"secondary\" size=\"sm\">\n              Got it\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>"
+      ],
       "colors": [
         "bg-sf-elevated",
         "fill-sf-elevated",
@@ -3678,9 +4156,19 @@
           "description": "Content rendered in the collapsible back layer (e.g. HITL approvals, task lists). When provided the prompt input is wrapped in a LayerCard shell with a header row containing a chevron toggle. Use `PromptInputBackLayer` to compose structured content for this slot."
         },
         "backLayerTitle": {
-          "type": "string",
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Header content shown in the back layer header row. Strings render as plain text; pass JSX to compose with icons/spinners/badges. Defaults to `\"Context\"`."
+        },
+        "backLayerStatus": {
+          "type": "enum",
           "optional": true,
-          "description": "Title shown in the back layer header row. Defaults to `\"Context\"`."
+          "description": "Optional status indicator rendered next to the title. `\"running\"` shows a small spinner; `\"error\"` shows an inline error icon. Use this instead of composing JSX into `backLayerTitle` for the common case of an agent doing work.",
+          "values": [
+            "idle",
+            "running",
+            "error"
+          ]
         },
         "backLayerOpen": {
           "type": "boolean",
@@ -3725,6 +4213,7 @@
         "ring-sf-line",
         "ring-sf-ring",
         "text-sf-brand",
+        "text-sf-danger",
         "text-sf-default",
         "text-sf-inactive",
         "text-sf-strong",
@@ -3819,7 +4308,10 @@
           "type": "enum",
           "optional": true,
           "description": "Layout direction of the radio items",
-          "values": ["vertical", "horizontal"]
+          "values": [
+            "vertical",
+            "horizontal"
+          ]
         },
         "error": {
           "type": "string",
@@ -3845,7 +4337,10 @@
           "type": "enum",
           "optional": true,
           "description": "Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio",
-          "values": ["start", "end"]
+          "values": [
+            "start",
+            "end"
+          ]
         },
         "name": {
           "type": "string",
@@ -3858,7 +4353,15 @@
           "description": "Additional CSS classes"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Radio.Group\n      legend=\"Notification preference\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item label=\"Email\" value=\"email\" />\n      <Radio.Item label=\"SMS\" value=\"sms\" />\n      <Radio.Item label=\"Push notification\" value=\"push\" />\n    </Radio.Group>",
+        "<Radio.Group legend=\"Account type\" value={value} onValueChange={setValue}>\n      <Radio.Item label=\"Personal\" value=\"personal\" />\n      <Radio.Item label=\"Business\" value=\"business\" />\n      <Radio.Item label=\"Enterprise\" value=\"enterprise\" />\n    </Radio.Group>",
+        "<Radio.Group\n      legend=\"Size\"\n      orientation=\"horizontal\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item label=\"Small\" value=\"sm\" />\n      <Radio.Item label=\"Medium\" value=\"md\" />\n      <Radio.Item label=\"Large\" value=\"lg\" />\n    </Radio.Group>",
+        "<Radio.Group\n      legend=\"Shipping method\"\n      description=\"Choose how you'd like to receive your order\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item label=\"Standard (5-7 days)\" value=\"standard\" />\n      <Radio.Item label=\"Express (2-3 days)\" value=\"express\" />\n      <Radio.Item label=\"Overnight\" value=\"overnight\" />\n    </Radio.Group>",
+        "<Radio.Group\n      legend=\"Payment method\"\n      error=\"Please select a payment method to continue\"\n    >\n      <Radio.Item label=\"Credit Card\" value=\"card\" variant=\"error\" />\n      <Radio.Item label=\"PayPal\" value=\"paypal\" variant=\"error\" />\n      <Radio.Item label=\"Bank Transfer\" value=\"bank\" variant=\"error\" />\n    </Radio.Group>",
+        "<div className=\"flex flex-col gap-6\">\n      <Radio.Group legend=\"Disabled group\" disabled defaultValue=\"a\">\n        <Radio.Item label=\"Option A\" value=\"a\" />\n        <Radio.Item label=\"Option B\" value=\"b\" />\n      </Radio.Group>\n      <Radio.Group legend=\"Individual disabled\" defaultValue=\"available\">\n        <Radio.Item label=\"Available\" value=\"available\" />\n        <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n      </Radio.Group>\n    </div>",
+        "<Radio.Group legend=\"Preferences\" controlPosition=\"end\" defaultValue=\"a\">\n      <Radio.Item label=\"Label before radio\" value=\"a\" />\n      <Radio.Item label=\"Another option\" value=\"b\" />\n    </Radio.Group>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-contrast",
@@ -3947,7 +4450,16 @@
           "description": "Initial value for uncontrolled mode"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    >\n      <Select.Option value=\"apple\">Apple</Select.Option>\n      <Select.Option value=\"banana\">Banana</Select.Option>\n      <Select.Option value=\"cherry\">Cherry</Select.Option>\n    </Select>",
+        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    >\n      <Select.Option value=\"bug\">Bug</Select.Option>\n      <Select.Option value=\"documentation\">Documentation</Select.Option>\n      <Select.Option value=\"feature\">Feature</Select.Option>\n    </Select>",
+        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={[\n        { label: \"Please select\", value: null },\n        { label: \"Bug\", value: \"bug\" },\n        { label: \"Documentation\", value: \"documentation\" },\n        { label: \"Feature\", value: \"feature\" },\n      ]}\n    >\n      <Select.Option value=\"bug\">Bug</Select.Option>\n      <Select.Option value=\"documentation\">Documentation</Select.Option>\n      <Select.Option value=\"feature\">Feature</Select.Option>\n    </Select>",
+        "<Select\n      className=\"w-[200px]\"\n      renderValue={(v) => (\n        <span>\n          {v.emoji} {v.label}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as (typeof languages)[0])}\n    >\n      {languages.map((language) => (\n        <Select.Option key={language.value} value={language}>\n          {language.emoji} {language.label}\n        </Select.Option>\n      ))}\n    </Select>",
+        "<Select className=\"w-[200px]\" loading />",
+        "<Select\n      className=\"w-[200px]\"\n      loading={loading}\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      placeholder=\"Please select\"\n    >\n      {data?.map((item) => (\n        <Select.Option key={item} value={item}>\n          {item}\n        </Select.Option>\n      ))}\n    </Select>",
+        "<Select\n      className=\"w-[250px]\"\n      multiple\n      renderValue={(value) => {\n        if (value.length > 3) {\n          return (\n            <span className=\"line-clamp-1\">\n              {value.slice(2).join(\", \") + ` and ${value.length - 2} more`}\n            </span>\n          );\n        }\n        return <span>{value.join(\", \")}</span>;\n      }}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"Name\">Name</Select.Option>\n      <Select.Option value=\"Location\">Location</Select.Option>\n      <Select.Option value=\"Size\">Size</Select.Option>\n      <Select.Option value=\"Read\">Read</Select.Option>\n      <Select.Option value=\"Write\">Write</Select.Option>\n      <Select.Option value=\"CreatedAt\">Created At</Select.Option>\n    </Select>",
+        "<Select\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => author?.name ?? \"Please select author\"}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>"
+      ],
       "colors": [
         "bg-sf-control",
         "bg-sf-overlay",
@@ -4077,14 +4589,22 @@
           "type": "enum",
           "optional": true,
           "description": "Size of the input.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary fields\n- `\"base\"` — Default input size\n- `\"lg\"` — Large for prominent fields",
-          "values": ["xs", "sm", "base", "lg"],
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
           "default": "base"
         },
         "variant": {
           "type": "enum",
           "optional": true,
           "description": "Style variant of the input.\n- `\"default\"` — Default input appearance\n- `\"error\"` — Error state for validation failures",
-          "values": ["default", "error"],
+          "values": [
+            "default",
+            "error"
+          ],
           "default": "default"
         },
         "label": {
@@ -4108,7 +4628,12 @@
           "description": "Error message or validation error object"
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"w-80\">\n      <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      {sizes.map((size) => (\n        <div key={size} className=\"flex items-center gap-2\">\n          <span className=\"w-12 text-sm text-sf-subtle\">{size}</span>\n          <SensitiveInput\n            label={`${size} size`}\n            size={size}\n            defaultValue=\"secret-api-key-123\"\n          />\n        </div>\n      ))}\n    </div>",
+        "<div className=\"flex w-80 flex-col gap-4\">\n      <SensitiveInput\n        label=\"Controlled Secret\"\n        value={value}\n        onValueChange={setValue}\n      />\n      <div className=\"text-sm text-sf-subtle\">\n        Current value: <code className=\"text-sf-default\">{value}</code>\n      </div>\n      <div className=\"flex gap-2\">\n        <Button\n          onClick={() => setValue(\"new-secret-\" + Date.now())}\n          variant=\"primary\"\n          size=\"sm\"\n        >\n          Change value\n        </Button>\n        <Button onClick={() => setValue(\"\")} variant=\"secondary\" size=\"sm\">\n          Clear\n        </Button>\n      </div>\n    </div>",
+        "<div className=\"flex w-80 flex-col gap-4\">\n      <SensitiveInput\n        label=\"Error State\"\n        variant=\"error\"\n        defaultValue=\"invalid-key\"\n        error=\"This API key is not valid\"\n      />\n      <SensitiveInput label=\"Disabled\" defaultValue=\"cannot-edit\" disabled />\n      <SensitiveInput\n        label=\"Read-only\"\n        defaultValue=\"view-only-secret-key\"\n        readOnly\n      />\n      <SensitiveInput\n        label=\"With Description\"\n        defaultValue=\"my-secret-value\"\n        description=\"Keep this value secure and don't share it\"\n      />\n    </div>"
+      ],
       "colors": [
         "bg-sf-brand",
         "bg-sf-control",
@@ -4138,7 +4663,11 @@
           "type": "enum",
           "optional": true,
           "description": "Sidebar layout variant.",
-          "values": ["sidebar", "floating", "inset"],
+          "values": [
+            "sidebar",
+            "floating",
+            "inset"
+          ],
           "descriptions": {
             "sidebar": "Standard sidebar with border separator",
             "floating": "Floating sidebar with shadow and rounded corners",
@@ -4150,7 +4679,10 @@
           "type": "enum",
           "optional": true,
           "description": "Which side the sidebar is on.",
-          "values": ["left", "right"],
+          "values": [
+            "left",
+            "right"
+          ],
           "descriptions": {
             "left": "Left-aligned sidebar",
             "right": "Right-aligned sidebar"
@@ -4160,7 +4692,11 @@
         "collapsible": {
           "type": "enum",
           "optional": true,
-          "values": ["icon", "offcanvas", "none"],
+          "values": [
+            "icon",
+            "offcanvas",
+            "none"
+          ],
           "descriptions": {
             "icon": "Collapses to show icons only",
             "offcanvas": "Slides off screen when collapsed",
@@ -4199,7 +4735,14 @@
           "description": "Additional CSS classes for the wrapper div."
         }
       },
-      "examples": [],
+      "examples": [
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible defaultOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Compute\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>Workers</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\n                        </Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group collapsible defaultOpen>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={HouseIcon} active>\n                    Home\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={ChartBarIcon}>\n                    Analytics\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={GlobeIcon}>\n                    Domains\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n\n            <Sidebar.Group collapsible defaultOpen={false}>\n              <Sidebar.GroupLabel>Settings</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                    Security\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={LockIcon}>\n                    Access Control\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} tooltip=\"Home\" active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon} tooltip=\"Analytics\">\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={CodeIcon} tooltip=\"Compute\">\n                  Compute\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon} tooltip=\"Storage\">\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <ToggleButton />\n          <p className=\"text-sm\">\n            Click the button or the sidebar trigger to toggle\n          </p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n\n          <Sidebar.Content>\n            <div className=\"px-1 pb-2\">\n              <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" />\n            </div>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Separator />\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible defaultOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Compute\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>Workers</Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Containers\n                          <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                        </Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Security</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                  Firewall\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={LockIcon}>\n                  Access\n                  <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={BellIcon}>\n                  Notifications\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n\n          <Sidebar.Footer>\n            <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider\n        defaultOpen\n        resizable\n        defaultWidth={240}\n        minWidth={180}\n        maxWidth={400}\n        className=\"min-h-0! h-full\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.ResizeHandle />\n        </Sidebar>\n        <DemoMain>\n          <p className=\"text-sm\">Drag the sidebar edge to resize</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen side=\"right\" className=\"min-h-0! h-full\">\n        <DemoMain>\n          <p className=\"text-sm\">Sidebar on the right</p>\n        </DemoMain>\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Details</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={GearIcon} active>\n                  Properties\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Metrics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={BellIcon}>Alerts</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n      </Sidebar.Provider>\n    </DemoContainer>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-brand",
@@ -4449,12 +4992,18 @@
         "accumulate": {
           "type": "enum",
           "optional": true,
-          "values": ["none", "sum"]
+          "values": [
+            "none",
+            "sum"
+          ]
         },
         "additive": {
           "type": "enum",
           "optional": true,
-          "values": ["replace", "sum"]
+          "values": [
+            "replace",
+            "sum"
+          ]
         },
         "alignmentBaseline": {
           "type": "enum",
@@ -4478,7 +5027,10 @@
         "allowReorder": {
           "type": "enum",
           "optional": true,
-          "values": ["no", "yes"]
+          "values": [
+            "no",
+            "yes"
+          ]
         },
         "alphabetic": {
           "type": "number | string",
@@ -4491,7 +5043,12 @@
         "arabicForm": {
           "type": "enum",
           "optional": true,
-          "values": ["initial", "medial", "terminal", "isolated"]
+          "values": [
+            "initial",
+            "medial",
+            "terminal",
+            "isolated"
+          ]
         },
         "ascent": {
           "type": "number | string",
@@ -4572,7 +5129,12 @@
         "colorInterpolationFilters": {
           "type": "enum",
           "optional": true,
-          "values": ["auto", "sRGB", "linearRGB", "inherit"]
+          "values": [
+            "auto",
+            "sRGB",
+            "linearRGB",
+            "inherit"
+          ]
         },
         "colorProfile": {
           "type": "number | string",
@@ -4696,7 +5258,11 @@
         "fillRule": {
           "type": "enum",
           "optional": true,
-          "values": ["nonzero", "evenodd", "inherit"]
+          "values": [
+            "nonzero",
+            "evenodd",
+            "inherit"
+          ]
         },
         "filter": {
           "type": "string",
@@ -5197,12 +5763,22 @@
         "strokeLinecap": {
           "type": "enum",
           "optional": true,
-          "values": ["butt", "round", "square", "inherit"]
+          "values": [
+            "butt",
+            "round",
+            "square",
+            "inherit"
+          ]
         },
         "strokeLinejoin": {
           "type": "enum",
           "optional": true,
-          "values": ["miter", "round", "bevel", "inherit"]
+          "values": [
+            "miter",
+            "round",
+            "bevel",
+            "inherit"
+          ]
         },
         "strokeMiterlimit": {
           "type": "number | string",
@@ -5239,7 +5815,12 @@
         "textAnchor": {
           "type": "enum",
           "optional": true,
-          "values": ["start", "middle", "end", "inherit"]
+          "values": [
+            "start",
+            "middle",
+            "end",
+            "inherit"
+          ]
         },
         "textDecoration": {
           "type": "number | string",
@@ -5453,7 +6034,10 @@
           "type": "enum",
           "optional": true,
           "description": "Logo variant\n- `glyph`: Map pin icon only\n- `full`: Full logo with wordmark and decorative element",
-          "values": ["glyph", "full"],
+          "values": [
+            "glyph",
+            "full"
+          ],
           "descriptions": {
             "glyph": "Map pin icon only (logomark)",
             "full": "Full logo with icon, wordmark, and decorative element"
@@ -5461,8 +6045,24 @@
           "default": "full"
         }
       },
-      "examples": [],
-      "colors": ["bg-sf-base", "ring-sf-line", "text-sf-default"]
+      "examples": [
+        "<SignalFlareAILogo className=\"w-72\" />",
+        "<SignalFlareAILogo variant=\"glyph\" className=\"w-16\" />",
+        "<div className=\"flex flex-wrap items-center gap-8\">\n      <SignalFlareAILogo className=\"w-32\" color=\"brand\" />\n      <SignalFlareAILogo className=\"w-32\" color=\"mono\" />\n      <div className=\"rounded-lg bg-white p-4\">\n        <SignalFlareAILogo className=\"w-32\" color=\"black\" />\n      </div>\n      <div className=\"rounded-lg bg-black p-4\">\n        <SignalFlareAILogo className=\"w-32\" color=\"white\" />\n      </div>\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-8\">\n      <SignalFlareAILogo variant=\"glyph\" className=\"w-10\" color=\"brand\" />\n      <SignalFlareAILogo variant=\"glyph\" className=\"w-10\" color=\"mono\" />\n      <div className=\"rounded-lg bg-white p-4\">\n        <SignalFlareAILogo variant=\"glyph\" className=\"w-10\" color=\"black\" />\n      </div>\n      <div className=\"rounded-lg bg-black p-4\">\n        <SignalFlareAILogo variant=\"glyph\" className=\"w-10\" color=\"white\" />\n      </div>\n    </div>",
+        "<div className=\"flex flex-wrap items-end gap-6\">\n      <SignalFlareAILogo className=\"w-24\" />\n      <SignalFlareAILogo className=\"w-36\" />\n      <SignalFlareAILogo className=\"w-52\" />\n    </div>",
+        "<div className=\"flex items-center gap-4\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2 rounded-lg bg-[#4188ff] px-4 py-3 text-white transition-opacity hover:opacity-80\"\n          >\n            <SignalFlareAILogo variant=\"glyph\" color=\"white\" className=\"w-6\" />\n            <span className=\"font-medium\">Logo</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={MapPinIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateSignalFlareAILogoSvg({ variant: \"glyph\" }),\n                \"glyph\"\n              )\n            }\n          >\n            {copied === \"glyph\" ? \"Copied!\" : \"Copy icon as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={CodeIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateSignalFlareAILogoSvg({ variant: \"full\" }),\n                \"full\"\n              )\n            }\n          >\n            {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={ArrowSquareOutIcon}\n            onSelect={() =>\n              window.open(\"https://signalflare.ai\", \"_blank\", \"noopener\")\n            }\n          >\n            Visit SignalFlare AI\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <span className=\"text-sm text-sf-subtle\">\n        Click to open the brand assets menu\n      </span>\n    </div>",
+        "<PoweredBySignalFlareAI />",
+        "<div className=\"flex flex-wrap items-center gap-4\">\n      <PoweredBySignalFlareAI color=\"brand\" />\n      <PoweredBySignalFlareAI color=\"mono\" />\n      <PoweredBySignalFlareAI color=\"black\" />\n      <div className=\"rounded-lg bg-black p-3\">\n        <PoweredBySignalFlareAI color=\"white\" />\n      </div>\n    </div>",
+        "<footer className=\"flex w-full items-center justify-between rounded-lg border border-sf-line bg-sf-elevated px-6 py-4\">\n      <span className=\"text-sm text-sf-subtle\">\n        &copy; 2026 Your Company. All rights reserved.\n      </span>\n      <PoweredBySignalFlareAI />\n    </footer>",
+        "<PoweredByNavigator />",
+        "<div className=\"flex flex-wrap items-center gap-4\">\n      <PoweredByNavigator color=\"brand\" />\n      <PoweredByNavigator color=\"mono\" />\n      <PoweredByNavigator color=\"black\" />\n      <div className=\"rounded-lg bg-black p-3\">\n        <PoweredByNavigator color=\"white\" />\n      </div>\n    </div>"
+      ],
+      "colors": [
+        "bg-sf-base",
+        "ring-sf-line",
+        "text-sf-default"
+      ]
     },
     "Sparkline": {
       "name": "Sparkline",
@@ -5480,13 +6080,17 @@
           "description": "Child elements"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Sparkline echarts={echarts} data={sample} isDarkMode={isDarkMode} />",
+        "<Sparkline\n      echarts={echarts}\n      data={sample}\n      variant=\"area\"\n      isDarkMode={isDarkMode}\n    />",
+        "<Sparkline\n      echarts={echarts}\n      data={sample}\n      variant=\"bars\"\n      isDarkMode={isDarkMode}\n    />"
+      ],
       "colors": []
     },
     "StatCard": {
       "name": "StatCard",
       "type": "component",
-      "description": "StatCard — compact KPI tile displaying a label, a primary value, and an optional delta + trend sparkline.",
+      "description": "StatCard — compact KPI tile displaying a label, a primary value, and an optional delta + trend sparkline.  Uses pretext-driven `Text` for consistent spacing and wrapping: - Labels use `wrap=\"balance\"` for even multiline breaks - Values use `wrap=\"shrink\"` so sparklines tuck tight against numbers - Hints use `wrap=\"natural\"` (numeric content rarely wraps)",
       "importPath": "@signalflare-ai/ui",
       "category": "Other",
       "props": {
@@ -5494,7 +6098,10 @@
           "type": "enum",
           "optional": true,
           "description": "Size of the card. Defaults to `\"base\"`.",
-          "values": ["sm", "base"],
+          "values": [
+            "sm",
+            "base"
+          ],
           "default": "base"
         },
         "label": {
@@ -5533,7 +6140,12 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [],
+      "examples": [
+        "<StatCard\n      label=\"Active users\"\n      value=\"12,384\"\n      delta={{ value: 0.12, label: \"vs last week\" }}\n    />",
+        "<StatCard\n      label=\"Error rate\"\n      value=\"2.1%\"\n      delta={{ value: -0.08, label: \"vs last week\", positiveDirection: \"down\" }}\n    />",
+        "<StatCard size=\"sm\" label=\"MRR\" value=\"$128,420\" hint=\"30-day avg\" />",
+        "<StatCard label=\"Signups\" value=\"—\" loading />"
+      ],
       "colors": [
         "bg-sf-elevated",
         "bg-sf-fill",
@@ -5567,8 +6179,15 @@
           "description": "Content rendered inside the surface."
         }
       },
-      "examples": [],
-      "colors": ["bg-sf-base", "ring-sf-line"]
+      "examples": [
+        "<Surface className=\"rounded-lg p-6\">\n      <Text size=\"lg\" bold>\n        Surface Component\n      </Text>\n      <div className=\"mt-2\">\n        <Text variant=\"secondary\">\n          A container with consistent elevation and border styling.\n        </Text>\n      </div>\n    </Surface>",
+        "<div className=\"flex flex-col gap-4\">\n      <Surface as=\"section\" className=\"rounded-lg p-4\">\n        <Text bold>As section element</Text>\n      </Surface>\n      <Surface as=\"article\" className=\"rounded-lg p-4\">\n        <Text bold>As article element</Text>\n      </Surface>\n      <Surface as=\"aside\" className=\"rounded-lg p-4\">\n        <Text bold>As aside element</Text>\n      </Surface>\n    </div>",
+        "<Surface className=\"rounded-lg p-6\">\n      <Text bold>Outer Surface</Text>\n      <Surface className=\"mt-4 rounded-md bg-sf-elevated p-4\">\n        <Text variant=\"secondary\">Nested Surface</Text>\n      </Surface>\n    </Surface>"
+      ],
+      "colors": [
+        "bg-sf-base",
+        "ring-sf-line"
+      ]
     },
     "Switch": {
       "name": "Switch",
@@ -5581,7 +6200,10 @@
           "type": "enum",
           "optional": true,
           "description": "Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text)",
-          "values": ["default", "error"],
+          "values": [
+            "default",
+            "error"
+          ],
           "descriptions": {
             "default": "Default switch appearance",
             "error": "Error state for validation failures"
@@ -5614,7 +6236,11 @@
         "size": {
           "type": "enum",
           "optional": true,
-          "values": ["sm", "base", "lg"],
+          "values": [
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "sm": "Small switch for compact UIs",
             "base": "Default switch size",
@@ -5646,7 +6272,11 @@
         "type": {
           "type": "enum",
           "optional": true,
-          "values": ["submit", "reset", "button"]
+          "values": [
+            "submit",
+            "reset",
+            "button"
+          ]
         },
         "value": {
           "type": "string | string[] | number",
@@ -5674,7 +6304,12 @@
           "description": "Callback when switch is clicked"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Switch label=\"Switch\" checked={checked} onCheckedChange={setChecked} />",
+        "<Switch label=\"Switch\" checked={false} onCheckedChange={() => {}} />",
+        "<Switch label=\"Switch\" checked={true} onCheckedChange={() => {}} />",
+        "<Switch label=\"Disabled\" checked={false} disabled />"
+      ],
       "colors": [
         "bg-sf-brand",
         "bg-sf-brand-hover",
@@ -5738,7 +6373,10 @@
       "props": {
         "layout": {
           "type": "enum",
-          "values": ["auto", "fixed"],
+          "values": [
+            "auto",
+            "fixed"
+          ],
           "default": "auto",
           "descriptions": {
             "auto": "Auto table layout - columns resize based on content",
@@ -5747,7 +6385,10 @@
         },
         "variant": {
           "type": "enum",
-          "values": ["default", "selected"],
+          "values": [
+            "default",
+            "selected"
+          ],
           "default": "default",
           "descriptions": {
             "default": "Default row variant",
@@ -5763,7 +6404,13 @@
           "description": "Child elements"
         }
       },
-      "examples": [],
+      "examples": [
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />\n            <col className=\"w-[150px]\" />\n            <col className=\"w-[150px]\" />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"w-full overflow-x-auto p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />{\" \"}\n            {/* Checkbox column - width handled by Table.CheckHead/CheckCell */}\n            <col />\n            <col style={{ width: \"150px\" }} />\n            <col style={{ width: \"120px\" }} />\n            <col style={{ width: \"50px\" }} />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === emailData.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < emailData.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n              <Table.Head />\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>\n                  <div className=\"flex items-center gap-2\">\n                    <EnvelopeSimpleIcon size={16} />\n                    <span className=\"truncate\">{row.subject}</span>\n                    {row.tags && (\n                      <div className=\"ml-2 inline-flex gap-1\">\n                        {row.tags.map((tag) => (\n                          <Badge key={tag}>{tag}</Badge>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.from}</span>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.date}</span>\n                </Table.Cell>\n                <Table.Cell className=\"text-right\">\n                  <DropdownMenu>\n                    <DropdownMenu.Trigger\n                      render={\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          shape=\"square\"\n                          aria-label=\"More options\"\n                        >\n                          <DotsThreeIcon weight=\"bold\" size={16} />\n                        </Button>\n                      }\n                    />\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Item icon={EyeIcon}>View</DropdownMenu.Item>\n                      <DropdownMenu.Item icon={PencilSimpleIcon}>\n                        Edit\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Separator />\n                      <DropdownMenu.Item icon={TrashIcon} variant=\"danger\">\n                        Delete\n                      </DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                  </DropdownMenu>\n                </Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-ring",
@@ -5865,7 +6512,11 @@
           "type": "enum",
           "optional": true,
           "description": "Tab style.\n- `\"segmented\"` — Pill-shaped indicator on a filled track\n- `\"underline\"` — Underline indicator below tab text\n- `\"pill\"` — Fully rounded tabs, only selected has background",
-          "values": ["segmented", "underline", "pill"],
+          "values": [
+            "segmented",
+            "underline",
+            "pill"
+          ],
           "default": "segmented"
         },
         "onValueChange": {
@@ -5873,7 +6524,15 @@
           "description": "Callback when active tab changes"
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex flex-col gap-6\">\n      <div>\n        <p className=\"mb-2 text-sm text-sf-subtle\">Segmented (default)</p>\n        <Tabs\n          variant=\"segmented\"\n          tabs={[\n            { label: \"Tab 1\", value: \"tab1\" },\n            { label: \"Tab 2\", value: \"tab2\" },\n            { label: \"Tab 3\", value: \"tab3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-sf-subtle\">Underline</p>\n        <Tabs\n          variant=\"underline\"\n          tabs={[\n            { label: \"Tab 1\", value: \"tab1\" },\n            { label: \"Tab 2\", value: \"tab2\" },\n            { label: \"Tab 3\", value: \"tab3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-sf-subtle\">Pill</p>\n        <Tabs\n          variant=\"pill\"\n          tabs={[\n            { label: \"Tab 1\", value: \"tab1\" },\n            { label: \"Tab 2\", value: \"tab2\" },\n            { label: \"Tab 3\", value: \"tab3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n    </div>",
+        "<Tabs\n      variant=\"segmented\"\n      tabs={[\n        { label: \"Tab 1\", value: \"tab1\" },\n        { label: \"Tab 2\", value: \"tab2\" },\n        { label: \"Tab 3\", value: \"tab3\" },\n      ]}\n      selectedValue=\"tab1\"\n    />",
+        "<Tabs\n      variant=\"underline\"\n      tabs={[\n        { label: \"Tab 1\", value: \"tab1\" },\n        { label: \"Tab 2\", value: \"tab2\" },\n        { label: \"Tab 3\", value: \"tab3\" },\n      ]}\n      selectedValue=\"tab1\"\n    />",
+        "<div className=\"space-y-4\">\n      <Tabs\n        tabs={[\n          { label: \"Tab 1\", value: \"tab1\" },\n          { label: \"Tab 2\", value: \"tab2\" },\n          { label: \"Tab 3\", value: \"tab3\" },\n        ]}\n        value={activeTab}\n        onValueChange={setActiveTab}\n      />\n      <p className=\"text-sm text-sf-subtle\">\n        Active tab: <code className=\"text-sm\">{activeTab}</code>\n      </p>\n    </div>",
+        "<Tabs\n      tabs={[\n        { label: \"Overview\", value: \"overview\" },\n        { label: \"Analytics\", value: \"analytics\" },\n        { label: \"Reports\", value: \"reports\" },\n        { label: \"Notifications\", value: \"notifications\" },\n        { label: \"Settings\", value: \"settings\" },\n        { label: \"Billing\", value: \"billing\" },\n      ]}\n      selectedValue=\"overview\"\n    />",
+        "<Tabs\n      tabs={[\n        {\n          label: \"Regular Tab\",\n          value: \"tab1\",\n        },\n        {\n          label: \"Link Tab\",\n          render: (props) => <a {...props} href=\"#tab2\" />,\n          value: \"tab2\",\n        },\n        {\n          label: \"Another Link\",\n          render: (props) => <a {...props} href=\"#tab3\" />,\n          value: \"tab3\",\n        },\n      ]}\n      selectedValue=\"tab1\"\n    />",
+        "<Tabs\n      variant=\"pill\"\n      tabs={[\n        { label: \"Overview\", value: \"overview\" },\n        { label: \"Analytics\", value: \"analytics\" },\n        { label: \"Reports\", value: \"reports\" },\n      ]}\n      selectedValue=\"overview\"\n    />"
+      ],
       "colors": [
         "bg-sf-brand",
         "bg-sf-overlay",
@@ -5960,7 +6619,12 @@
           "type": "enum",
           "optional": true,
           "description": "Text size (only applies to body/secondary/success/error variants).\n- `\"xs\"` — 12px\n- `\"sm\"` — 14px\n- `\"base\"` — 16px\n- `\"lg\"` — 18px",
-          "values": ["xs", "sm", "base", "lg"],
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
           "descriptions": {
             "xs": "Extra small text",
             "sm": "Small text",
@@ -5989,9 +6653,21 @@
           "type": "ReactNode",
           "optional": true,
           "description": "Text content."
+        },
+        "wrap": {
+          "type": "MeasuredTextMode | boolean",
+          "optional": true,
+          "description": "Text layout strategy using pretext-driven measurement.\n- `\"natural\"` — No measurement, normal browser wrapping (default for body).\n- `\"balance\"` — Even wrapping, smallest maxWidth without adding lines (default for headings).\n- `\"shrink\"` — Hug widest natural line (maxWidth = line width). Good for chat bubbles.\n- `\"reserve\"` — Reserve height based on line count. Good for streaming text."
+        },
+        "reserveLines": {
+          "type": "number",
+          "optional": true,
+          "description": "For `wrap=\"reserve\"`: reserve this many lines of height. If omitted, measures current content to determine line count."
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"heading1\">Heading 1</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-3xl (30px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"heading2\">Heading 2</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-2xl (24px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"heading3\">Heading 3</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-lg (16px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text>Body</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text bold>Body bold</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text size=\"lg\">Body lg</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-lg (16px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text size=\"sm\">Body sm</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text size=\"xs\">Body xs</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-xs (12px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"secondary\">Body secondary</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"mono\">Monospace</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"mono\" size=\"lg\">\n          Monospace lg\n        </Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"mono-secondary\">Monospace secondary</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"success\">Success</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-sf-line bg-sf-base p-4\">\n        <Text variant=\"error\">Error</Text>\n        <p className=\"font-mono text-xs text-sf-subtle\">text-base (14px)</p>\n      </div>\n    </div>"
+      ],
       "colors": [
         "text-sf-danger",
         "text-sf-default",
@@ -6087,7 +6763,11 @@
           "type": "enum",
           "optional": true,
           "description": "Controlled mode. When provided the component acts as a controlled input — pair with `onModeChange`.",
-          "values": ["light", "dark", "system"],
+          "values": [
+            "light",
+            "dark",
+            "system"
+          ],
           "descriptions": {
             "light": "Light mode",
             "dark": "Dark mode",
@@ -6107,7 +6787,10 @@
         }
       },
       "examples": [],
-      "colors": ["text-sf-default", "text-sf-subtle"]
+      "colors": [
+        "text-sf-default",
+        "text-sf-subtle"
+      ]
     },
     "Toasty": {
       "name": "Toasty",
@@ -6118,7 +6801,11 @@
       "props": {
         "variant": {
           "type": "enum",
-          "values": ["default", "error", "warning"],
+          "values": [
+            "default",
+            "error",
+            "warning"
+          ],
           "default": "default",
           "descriptions": {
             "default": "Default toast style",
@@ -6185,7 +6872,12 @@
       "props": {
         "side": {
           "type": "enum",
-          "values": ["top", "bottom", "left", "right"],
+          "values": [
+            "top",
+            "bottom",
+            "left",
+            "right"
+          ],
           "default": "top",
           "descriptions": {
             "top": "Tooltip appears above the trigger",
@@ -6208,7 +6900,11 @@
           "description": "Content to display in the tooltip"
         }
       },
-      "examples": [],
+      "examples": [
+        "<TooltipProvider>\n      <Tooltip content=\"Add new item\">\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <Tooltip content=\"Add\">\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip content=\"Add\">\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n        </Tooltip>\n        <Tooltip content=\"Change language\">\n          <Button\n            shape=\"square\"\n            icon={TranslateIcon}\n            aria-label=\"Change language\"\n          />\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
+      ],
       "colors": [
         "bg-sf-elevated",
         "fill-sf-elevated",
@@ -6291,7 +6987,11 @@
           "type": "enum",
           "optional": true,
           "description": "Placement for interactive HITL elements (approvals, questions, plans).",
-          "values": ["inline", "back-layer", "both"],
+          "values": [
+            "inline",
+            "back-layer",
+            "both"
+          ],
           "descriptions": {
             "inline": "Render approval/question cards inline in the conversation stream",
             "back-layer": "Render approval/question cards in the PromptInput back layer",
@@ -6368,16 +7068,25 @@
           "type": "enum",
           "optional": true,
           "description": "Rendering style for the mode picker.\n- `\"select\"` (default): compact dropdown\n- `\"cycle\"`: single click-to-cycle button",
-          "values": ["select", "cycle"]
+          "values": [
+            "select",
+            "cycle"
+          ]
         },
         "modelVariant": {
           "type": "enum",
           "optional": true,
           "description": "Rendering style for the model picker.\n- `\"select\"` (default): compact dropdown\n- `\"cycle\"`: single click-to-cycle button",
-          "values": ["select", "cycle"]
+          "values": [
+            "select",
+            "cycle"
+          ]
         }
       },
-      "examples": [],
+      "examples": [
+        "<div className=\"flex flex-col gap-3 w-full\">\n      {/* Controls */}\n      <div className=\"flex flex-wrap items-center gap-x-4 gap-y-2\">\n        <div className=\"flex items-center gap-1.5\">\n          <span className=\"text-xs font-medium text-sf-subtle\">Scenario:</span>\n          {([\"full\", \"question\", \"plan\"] as Scenario[]).map((s) => (\n            <button\n              key={s}\n              type=\"button\"\n              onClick={() => handleScenario(s)}\n              className={[\n                \"rounded-full px-2.5 py-1 text-xs font-medium transition-colors border\",\n                scenario === s\n                  ? \"bg-sf-brand text-white border-sf-brand\"\n                  : \"border-sf-line bg-sf-elevated text-sf-strong hover:bg-sf-tint\",\n              ].join(\" \")}\n            >\n              {SCENARIO_LABELS[s]}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"flex items-center gap-1.5\">\n          <span className=\"text-xs font-medium text-sf-subtle\">HITL:</span>\n          {([\"inline\", \"back-layer\"] as Placement[]).map((p) => (\n            <button\n              key={p}\n              type=\"button\"\n              onClick={() => handlePlacement(p)}\n              className={[\n                \"rounded-full px-2.5 py-1 text-xs font-medium transition-colors border\",\n                placement === p\n                  ? \"bg-sf-brand text-white border-sf-brand\"\n                  : \"border-sf-line bg-sf-elevated text-sf-strong hover:bg-sf-tint\",\n              ].join(\" \")}\n            >\n              {PLACEMENT_LABELS[p]}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"flex items-center gap-1.5\">\n          <span className=\"text-xs font-medium text-sf-subtle\">Activity:</span>\n          {(\n            [\n              { value: false, label: \"Stacked\" },\n              { value: true, label: \"Grouped\" },\n            ] as const\n          ).map((opt) => (\n            <button\n              key={opt.label}\n              type=\"button\"\n              onClick={() => handleGroupActivity(opt.value)}\n              className={[\n                \"rounded-full px-2.5 py-1 text-xs font-medium transition-colors border\",\n                groupActivity === opt.value\n                  ? \"bg-sf-brand text-white border-sf-brand\"\n                  : \"border-sf-line bg-sf-elevated text-sf-strong hover:bg-sf-tint\",\n              ].join(\" \")}\n            >\n              {opt.label}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"flex items-center gap-1.5\">\n          <span className=\"text-xs font-medium text-sf-subtle\">Pickers:</span>\n          {([\"select\", \"cycle\"] as const).map((v) => (\n            <button\n              key={v}\n              type=\"button\"\n              onClick={() => setPickerVariant(v)}\n              className={[\n                \"rounded-full px-2.5 py-1 text-xs font-medium transition-colors border\",\n                pickerVariant === v\n                  ? \"bg-sf-brand text-white border-sf-brand\"\n                  : \"border-sf-line bg-sf-elevated text-sf-strong hover:bg-sf-tint\",\n              ].join(\" \")}\n            >\n              {v === \"select\" ? \"Dropdown\" : \"Cycle\"}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* The block — key forces remount + clean state on every scenario/placement change */}\n      <div style={{ height: 560 }}>\n        <AgentHarness\n          key={runKey}\n          adapter={adapter}\n          hitlPlacement={placement}\n          groupActivity={groupActivity}\n          showUsage\n          showTaskList\n          availableModes={[\n            { modeId: \"build\", modeName: \"Build\" },\n            { modeId: \"plan\", modeName: \"Plan\" },\n            { modeId: \"research\", modeName: \"Research\" },\n          ]}\n          availableModels={[\n            { value: \"anthropic/claude-sonnet-4\", label: \"Claude Sonnet 4\" },\n            { value: \"anthropic/claude-opus-4\", label: \"Claude Opus 4\" },\n            { value: \"openai/gpt-4o\", label: \"GPT-4o\" },\n          ]}\n          modeVariant={pickerVariant}\n          modelVariant={pickerVariant}\n          placeholder=\"Type a message…\"\n          suggestions={[\n            \"Refactor the auth module\",\n            \"Explain the JWT flow\",\n            \"Add refresh token rotation\",\n          ]}\n          footer=\"AI can make mistakes. Review changes before applying.\"\n        />\n      </div>\n    </div>",
+        "<div style={{ height: 400 }}>\n      <AgentHarness\n        adapter={adapter}\n        hitlPlacement=\"inline\"\n        showUsage={false}\n        showTaskList={false}\n        placeholder=\"Send a message…\"\n        emptyState={\n          <div className=\"flex flex-col items-center gap-2\">\n            <span className=\"text-3xl\">🤖</span>\n            <p className=\"text-sm text-sf-subtle\">Ready when you are.</p>\n          </div>\n        }\n      />\n    </div>"
+      ],
       "colors": [
         "bg-sf-base",
         "bg-sf-elevated",
@@ -6440,7 +7149,11 @@
           "type": "enum",
           "optional": true,
           "description": "Layout variant.",
-          "values": ["timeline-cards", "timeline-only", "cards-only"],
+          "values": [
+            "timeline-cards",
+            "timeline-only",
+            "cards-only"
+          ],
           "descriptions": {
             "timeline-cards": "Mission header + timeline + agent card grid",
             "timeline-only": "Mission header + timeline, no agent cards grid",
@@ -6469,9 +7182,20 @@
           "description": "Empty state shown when no agents have run yet."
         }
       },
-      "examples": [],
-      "colors": ["bg-sf-base", "border-sf-line", "text-sf-subtle"],
-      "files": ["commander/commander.tsx", "commander/commander.stories.tsx"],
+      "examples": [
+        "<div className=\"flex flex-col gap-3 w-full\">\n      <div className=\"flex items-center gap-2\">\n        <span className=\"text-xs text-sf-subtle\">\n          Simulated multi-agent mission\n        </span>\n        <button\n          type=\"button\"\n          onClick={replay}\n          className=\"rounded-full border border-sf-line bg-sf-elevated px-2.5 py-1 text-xs text-sf-strong hover:bg-sf-tint transition-colors\"\n        >\n          ↺ Replay\n        </button>\n      </div>\n      <div style={{ height: 520 }}>\n        <Commander\n          key={runKey}\n          adapter={adapter}\n          title=\"Refactor auth module\"\n          pixelsPerSecond={20}\n          layout=\"timeline-cards\"\n        />\n      </div>\n    </div>",
+        "<div style={{ height: 300 }}>\n      <Commander\n        adapter={adapter}\n        title=\"Refactor auth module\"\n        pixelsPerSecond={20}\n        layout=\"timeline-only\"\n      />\n    </div>",
+        "<div style={{ height: 280 }}>\n      <Commander\n        adapter={adapter}\n        title=\"Refactor auth module\"\n        pixelsPerSecond={20}\n        layout=\"cards-only\"\n      />\n    </div>"
+      ],
+      "colors": [
+        "bg-sf-base",
+        "border-sf-line",
+        "text-sf-subtle"
+      ],
+      "files": [
+        "commander/commander.tsx",
+        "commander/commander.stories.tsx"
+      ],
       "dependencies": []
     },
     "DashboardGrid": {
@@ -6504,7 +7228,9 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<DashboardGrid>\n      <DashboardGrid.Cell span={3}>\n        <StatCard\n          label=\"Active users\"\n          value=\"12,384\"\n          delta={{ value: 0.12, label: \"vs last week\" }}\n        />\n      </DashboardGrid.Cell>\n      <DashboardGrid.Cell span={3}>\n        <StatCard\n          label=\"MRR\"\n          value=\"$128,420\"\n          delta={{ value: 0.04, label: \"vs last month\" }}\n        />\n      </DashboardGrid.Cell>\n      <DashboardGrid.Cell span={3}>\n        <StatCard\n          label=\"Error rate\"\n          value=\"2.1%\"\n          delta={{\n            value: -0.08,\n            label: \"vs last week\",\n            positiveDirection: \"down\",\n          }}\n        />\n      </DashboardGrid.Cell>\n      <DashboardGrid.Cell span={3}>\n        <StatCard label=\"Signups\" value=\"1,284\" hint=\"30-day total\" />\n      </DashboardGrid.Cell>\n      <DashboardGrid.Cell span={8}>\n        <Surface className=\"flex h-48 items-center justify-center p-4 text-sm text-sf-subtle\">\n          Primary chart area (span=8)\n        </Surface>\n      </DashboardGrid.Cell>\n      <DashboardGrid.Cell span={4}>\n        <Surface className=\"flex h-48 items-center justify-center p-4 text-sm text-sf-subtle\">\n          Secondary (span=4)\n        </Surface>\n      </DashboardGrid.Cell>\n    </DashboardGrid>"
+      ],
       "colors": [],
       "subComponents": {
         "Row": {
@@ -6556,7 +7282,10 @@
         "size": {
           "type": "enum",
           "optional": true,
-          "values": ["sm", "base"],
+          "values": [
+            "sm",
+            "base"
+          ],
           "descriptions": {
             "sm": "Small dialog for simple delete confirmations",
             "base": "Default delete confirmation dialog size"
@@ -6604,7 +7333,11 @@
           "description": "Error message to display if the delete action fails"
         }
       },
-      "examples": [],
+      "examples": [
+        "<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Zone\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Zone\"\n        resourceName=\"example.com\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n      />\n    </>",
+        "<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Worker\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Worker\"\n        resourceName=\"api-gateway-worker\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n      />\n    </>",
+        "<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Zone\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Zone\"\n        resourceName=\"example.com\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n        errorMessage={errorMsg}\n      />\n    </>"
+      ],
       "colors": [
         "bg-sf-fill",
         "bg-sf-tint",
@@ -6651,8 +7384,16 @@
         "text-sf-default",
         "text-sf-subtle"
       ],
-      "files": ["map-block/map-block.tsx", "map-block/map-block.stories.tsx"],
-      "dependencies": ["Badge", "Button", "Loader", "Tooltip"]
+      "files": [
+        "map-block/map-block.tsx",
+        "map-block/map-block.stories.tsx"
+      ],
+      "dependencies": [
+        "Badge",
+        "Button",
+        "Loader",
+        "Tooltip"
+      ]
     },
     "MetricsOverview": {
       "name": "MetricsOverview",
@@ -6702,13 +7443,22 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [],
-      "colors": ["bg-sf-elevated", "text-sf-strong", "text-sf-subtle"],
+      "examples": [
+        "<MetricsOverview\n      title=\"Revenue overview\"\n      description=\"Last 72 hours · hourly granularity\"\n      kpis={[\n        {\n          id: \"mrr\",\n          label: \"MRR\",\n          value: \"$128,420\",\n          delta: { value: 0.12, label: \"vs last month\" },\n          trend: (\n            <Sparkline\n              echarts={echarts}\n              data={sparkData}\n              variant=\"area\"\n              isDarkMode={isDarkMode}\n            />\n          ),\n        },\n        {\n          id: \"arpu\",\n          label: \"ARPU\",\n          value: \"$42.10\",\n          delta: { value: 0.03, label: \"vs last month\" },\n        },\n        {\n          id: \"churn\",\n          label: \"Churn\",\n          value: \"1.4%\",\n          delta: {\n            value: -0.01,\n            label: \"vs last month\",\n            positiveDirection: \"down\",\n          },\n        },\n        {\n          id: \"users\",\n          label: \"Active users\",\n          value: \"12,384\",\n          delta: { value: 0.08, label: \"vs last week\" },\n        },\n      ]}\n      chart={\n        <TimeseriesChart\n          echarts={echarts}\n          data={[\n            series(\"Revenue\", 0, ChartPalette.semantic(\"Neutral\", isDarkMode)),\n            series(\"Cost\", 20, ChartPalette.semantic(\"Attention\", isDarkMode)),\n          ]}\n          height={260}\n          gradient\n          isDarkMode={isDarkMode}\n        />\n      }\n    />",
+        "<MetricsOverview\n      title=\"Revenue overview\"\n      loading\n      kpis={[\n        { id: \"mrr\", label: \"MRR\", value: \"—\" },\n        { id: \"arpu\", label: \"ARPU\", value: \"—\" },\n        { id: \"churn\", label: \"Churn\", value: \"—\" },\n        { id: \"users\", label: \"Active users\", value: \"—\" },\n      ]}\n    />"
+      ],
+      "colors": [
+        "bg-sf-elevated",
+        "text-sf-strong",
+        "text-sf-subtle"
+      ],
       "files": [
         "metrics-overview/metrics-overview.tsx",
         "metrics-overview/metrics-overview.stories.tsx"
       ],
-      "dependencies": ["StatCard"]
+      "dependencies": [
+        "StatCard"
+      ]
     },
     "PageHeader": {
       "name": "PageHeader",
@@ -6720,7 +7470,11 @@
         "spacing": {
           "type": "enum",
           "optional": true,
-          "values": ["compact", "base", "relaxed"],
+          "values": [
+            "compact",
+            "base",
+            "relaxed"
+          ],
           "descriptions": {
             "compact": "Compact spacing between header elements",
             "base": "Default spacing between header elements",
@@ -6762,13 +7516,28 @@
           "optional": true
         }
       },
-      "examples": [],
-      "colors": ["border-sf-line", "text-sf-default", "text-sf-subtle"],
+      "examples": [
+        "<PageHeader\n      className=\"w-full\"\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href=\"#\">\n            Workers & Pages\n          </Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>cloudflare-dev-platform</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"Overview\", value: \"overview\" },\n        { label: \"Metrics\", value: \"metrics\" },\n        { label: \"Deployments\", value: \"deployments\" },\n        { label: \"Bindings\", value: \"bindings\" },\n        { label: \"Observability\", value: \"observability\" },\n        { label: \"Settings\", value: \"settings\" },\n      ]}\n      defaultTab=\"overview\"\n      onValueChange={(v) => console.log(v)}\n    >\n      <Button icon={<CodeIcon />} className=\"h-8\">\n        Edit code\n      </Button>\n      <Button icon={<GlobeIcon />} variant=\"primary\" className=\"h-8\">\n        Visit\n      </Button>\n    </PageHeader>",
+        "<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n    />",
+        "<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href=\"#\">\n            Home\n          </Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current icon={<GearIcon size={16} />}>\n            Settings\n          </Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n    />",
+        "<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Settings</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"General\", value: \"general\" },\n        { label: \"Security\", value: \"security\" },\n        { label: \"Notifications\", value: \"notifications\" },\n      ]}\n      defaultTab=\"general\"\n    />",
+        "<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">Projects</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>My Project</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      tabs={[\n        { label: \"Overview\", value: \"overview\" },\n        { label: \"Settings\", value: \"settings\" },\n      ]}\n      defaultTab=\"overview\"\n    >\n      <Button variant=\"primary\" size=\"base\">\n        Deploy\n      </Button>\n    </PageHeader>",
+        "<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">Products</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      title=\"Page title\"\n    />",
+        "<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">Products</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      title=\"Page title\"\n      description=\"Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites.\"\n    />",
+        "<PageHeader\n      breadcrumbs={\n        <Breadcrumbs>\n          <Breadcrumbs.Link href=\"#\">Home</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Link href=\"#\">Products</Breadcrumbs.Link>\n          <Breadcrumbs.Separator />\n          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>\n        </Breadcrumbs>\n      }\n      title=\"Page title\"\n      description=\"Action-led, value-oriented description of what this page does.\"\n      tabs={[\n        { label: \"Overview\", value: \"overview\" },\n        { label: \"Analytics\", value: \"analytics\" },\n        { label: \"Settings\", value: \"settings\" },\n      ]}\n      defaultTab=\"overview\"\n    >\n      <Button variant=\"outline\" size=\"sm\">\n        Export\n      </Button>\n      <Button variant=\"primary\" size=\"sm\" icon={<PlusIcon size={16} />}>\n        New Item\n      </Button>\n    </PageHeader>"
+      ],
+      "colors": [
+        "border-sf-line",
+        "text-sf-default",
+        "text-sf-subtle"
+      ],
       "files": [
         "page-header/page-header.tsx",
         "page-header/page-header.stories.tsx"
       ],
-      "dependencies": ["Tabs"]
+      "dependencies": [
+        "Tabs"
+      ]
     },
     "ResourceListPage": {
       "name": "ResourceListPage",
@@ -6807,7 +7576,10 @@
         }
       },
       "examples": [],
-      "colors": ["bg-sf-overlay", "text-sf-strong"],
+      "colors": [
+        "bg-sf-overlay",
+        "text-sf-strong"
+      ],
       "files": [
         "resource-list/resource-list.tsx",
         "resource-list/resource-list.stories.tsx",
@@ -6871,8 +7643,15 @@
         "Meter",
         "Text"
       ],
-      "Feedback": ["Banner", "Loader", "Toasty"],
-      "Action": ["Button", "ClipboardText"],
+      "Feedback": [
+        "Banner",
+        "Loader",
+        "Toasty"
+      ],
+      "Action": [
+        "Button",
+        "ClipboardText"
+      ],
       "Input": [
         "Checkbox",
         "Combobox",
@@ -6883,9 +7662,24 @@
         "Select",
         "Switch"
       ],
-      "Navigation": ["CommandPalette", "MenuBar", "Pagination", "Tabs"],
-      "Overlay": ["Dialog", "DropdownMenu", "Popover", "Tooltip"],
-      "Layout": ["Grid", "Surface", "PageHeader", "ResourceListPage"]
+      "Navigation": [
+        "CommandPalette",
+        "MenuBar",
+        "Pagination",
+        "Tabs"
+      ],
+      "Overlay": [
+        "Dialog",
+        "DropdownMenu",
+        "Popover",
+        "Tooltip"
+      ],
+      "Layout": [
+        "Grid",
+        "Surface",
+        "PageHeader",
+        "ResourceListPage"
+      ]
     },
     "byName": [
       "AgentHarness",
@@ -7044,4 +7838,4 @@
       ]
     }
   }
-}
+}