@signalflare-ai/ui 1.2.0 → 1.4.0

package/ai/component-registry.json

@@ -32,10 +32,7 @@
       "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"
-      ]
+      "colors": ["text-sf-default", "text-sf-subtle"]
     },
     "AiAgentCard": {
       "name": "AiAgentCard",
@@ -57,12 +54,7 @@
           "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",
@@ -105,10 +97,7 @@
           "type": "enum",
           "optional": true,
           "description": "Card size.",
-          "values": [
-            "sm",
-            "md"
-          ],
+          "values": ["sm", "md"],
           "descriptions": {
             "sm": "Compact card for dense grids",
             "md": "Default card size"
@@ -122,11 +111,7 @@
         "type": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "submit",
-            "reset",
-            "button"
-          ]
+          "values": ["submit", "reset", "button"]
         },
         "value": {
           "type": "string | string[] | number",
@@ -184,10 +169,7 @@
           "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"
@@ -198,11 +180,7 @@
           "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",
@@ -283,7 +261,7 @@
     "AiCodeBlock": {
       "name": "AiCodeBlock",
       "type": "component",
-      "description": "Displays a code block with monospace formatting and an optional copy button. Does not include a syntax highlighter — avoids the heavy `react-syntax-highlighter` dependency. Wrap with `AiCodeBlockCopyButton` for clipboard support.",
+      "description": "AiCodeBlock component",
       "importPath": "@signalflare-ai/ui",
       "category": "Other",
       "props": {
@@ -334,7 +312,19 @@
         "text-sf-default",
         "text-sf-inactive",
         "text-sf-subtle"
-      ]
+      ],
+      "subComponents": {
+        "CopyButton": {
+          "name": "CopyButton",
+          "description": "CopyButton sub-component",
+          "props": {
+            "timeout": {
+              "type": "number",
+              "optional": true
+            }
+          }
+        }
+      }
     },
     "AiConversation": {
       "name": "AiConversation",
@@ -380,11 +370,7 @@
           "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",
@@ -441,11 +427,7 @@
           "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",
@@ -543,10 +525,7 @@
           "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"
@@ -666,10 +645,7 @@
           "type": "enum",
           "optional": true,
           "description": "Current status.",
-          "values": [
-            "pending",
-            "answered"
-          ],
+          "values": ["pending", "answered"],
           "descriptions": {
             "pending": "Waiting for answer",
             "answered": "User has answered"
@@ -743,12 +719,7 @@
           "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",
@@ -864,11 +835,10 @@
         "<AiResponse>{MARKDOWN_LIKE}</AiResponse>",
         "<AiResponse>The capital of France is Paris.</AiResponse>",
         "<AiResponse>{MARKDOWN_WITH_CODE}</AiResponse>",
-        "<AiResponse isAnimating={isAnimating}>{text}</AiResponse>"
+        "<AiResponse isAnimating={isAnimating}>{text}</AiResponse>",
+        "<div className=\"flex w-full flex-col gap-4\">\n      <AiResponse\n        components={{ a: LinkComponent } as Components}\n        linkSafety={{ enabled: false }}\n      >\n        {DEEP_LINK_MARKDOWN}\n      </AiResponse>\n      {activeFile && (\n        <div className=\"rounded-lg border border-sf-brand/30 bg-sf-brand/10 px-3 py-2 text-sm text-sf-default\">\n          <span className=\"text-sf-subtle\">Opened file:</span>{\" \"}\n          <code className=\"font-mono text-sf-brand\">{activeFile}</code>\n          <button\n            onClick={() => setActiveFile(null)}\n            className=\"ml-3 text-xs text-sf-subtle hover:text-sf-default\"\n          >\n            Dismiss\n          </button>\n        </div>\n      )}\n    </div>"
       ],
-      "colors": [
-        "text-sf-default"
-      ]
+      "colors": ["text-sf-default"]
     },
     "AiShimmer": {
       "name": "AiShimmer",
@@ -931,12 +901,7 @@
           "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",
@@ -1027,11 +992,7 @@
           "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",
@@ -1219,10 +1180,7 @@
           "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"
@@ -1289,12 +1247,7 @@
           "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",
@@ -1322,11 +1275,7 @@
           "type": "enum",
           "optional": true,
           "description": "Approval state for tools requiring confirmation.",
-          "values": [
-            "awaiting",
-            "approved",
-            "declined"
-          ]
+          "values": ["awaiting", "approved", "declined"]
         },
         "defaultExpanded": {
           "type": "boolean",
@@ -1445,10 +1394,7 @@
         "<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"
-      ]
+      "colors": ["text-sf-inactive", "text-sf-subtle"]
     },
     "Badge": {
       "name": "Badge",
@@ -1515,10 +1461,7 @@
           "type": "enum",
           "optional": true,
           "description": "Position of the icon relative to the text.",
-          "values": [
-            "left",
-            "right"
-          ]
+          "values": ["left", "right"]
         },
         "loading": {
           "type": "boolean",
@@ -1529,13 +1472,7 @@
           "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",
@@ -1611,11 +1548,7 @@
           "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",
@@ -1669,10 +1602,7 @@
           "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"
@@ -1700,11 +1630,7 @@
         "<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"
-      ],
+      "colors": ["text-sf-inactive", "text-sf-subtle", "text-sf-success"],
       "subComponents": {
         "Link": {
           "name": "Link",
@@ -1761,11 +1687,7 @@
         "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",
@@ -1780,12 +1702,7 @@
         "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",
@@ -1893,11 +1810,7 @@
         "type": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "submit",
-            "reset",
-            "button"
-          ]
+          "values": ["submit", "reset", "button"]
         },
         "value": {
           "type": "string | string[] | number",
@@ -1943,10 +1856,7 @@
           "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"
@@ -2089,32 +1999,14 @@
       "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": [
           {
@@ -2141,11 +2033,7 @@
           "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",
@@ -2200,18 +2088,9 @@
           "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",
@@ -2282,13 +2161,7 @@
           "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",
@@ -2321,11 +2194,7 @@
         "<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"
-      ],
+      "colors": ["bg-sf-recessed", "border-sf-line", "text-sf-default"],
       "subComponents": {
         "Block": {
           "name": "Block",
@@ -2380,10 +2249,7 @@
         "<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"
-      ]
+      "colors": ["border-sf-fill", "text-sf-link"]
     },
     "Combobox": {
       "name": "Combobox",
@@ -2396,10 +2262,7 @@
           "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"
@@ -2619,10 +2482,7 @@
       "props": {
         "layout": {
           "type": "enum",
-          "values": [
-            "auto",
-            "fixed"
-          ],
+          "values": ["auto", "fixed"],
           "default": "auto",
           "descriptions": {
             "auto": "Auto column sizing - columns resize based on content",
@@ -2712,9 +2572,7 @@
         "<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"
-      ]
+      "colors": ["bg-sf-base"]
     },
     "DateRangePicker": {
       "name": "DateRangePicker",
@@ -2727,11 +2585,7 @@
           "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",
@@ -2748,10 +2602,7 @@
           "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"
@@ -2858,12 +2709,7 @@
           "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",
@@ -3003,10 +2849,7 @@
           "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"
@@ -3125,11 +2968,7 @@
           "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",
@@ -3237,11 +3076,7 @@
         }
       },
       "examples": [],
-      "colors": [
-        "text-sf-danger",
-        "text-sf-default",
-        "text-sf-subtle"
-      ]
+      "colors": ["text-sf-danger", "text-sf-default", "text-sf-subtle"]
     },
     "Filters": {
       "name": "Filters",
@@ -3264,11 +3099,7 @@
           "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",
@@ -3385,12 +3216,7 @@
           "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",
@@ -3451,9 +3277,7 @@
         "<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"
-      ]
+      "colors": ["border-sf-line"]
     },
     "Input": {
       "name": "Input",
@@ -3486,12 +3310,7 @@
           "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",
@@ -3510,10 +3329,7 @@
           "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"
@@ -3651,10 +3467,7 @@
         "<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"
-      ]
+      "colors": ["text-sf-default", "text-sf-strong"]
     },
     "LayerCard": {
       "name": "LayerCard",
@@ -3689,12 +3502,22 @@
         "Primary": {
           "name": "Primary",
           "description": "Primary sub-component",
-          "props": {}
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "Secondary": {
           "name": "Secondary",
           "description": "Secondary sub-component",
-          "props": {}
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         }
       },
       "styling": {
@@ -3731,11 +3554,7 @@
           "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",
@@ -3858,11 +3677,7 @@
           "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",
@@ -3911,11 +3726,7 @@
         "<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"
-      ],
+      "colors": ["bg-sf-base", "bg-sf-fill", "border-sf-fill"],
       "styling": {
         "container": {
           "height": 32,
@@ -3983,11 +3794,7 @@
         "<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"
-      ]
+      "colors": ["bg-sf-fill", "text-sf-default", "text-sf-strong"]
     },
     "Pagination": {
       "name": "Pagination",
@@ -3999,10 +3806,7 @@
         "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"
@@ -4043,9 +3847,7 @@
         "<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"
-      ],
+      "colors": ["text-sf-strong"],
       "styling": {
         "layout": {
           "height": 36,
@@ -4068,12 +3870,7 @@
           "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",
@@ -4104,12 +3901,38 @@
         "Trigger": {
           "name": "Trigger",
           "description": "Trigger sub-component",
-          "props": {}
+          "props": {
+            "asChild": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "Content": {
           "name": "Content",
           "description": "Content sub-component",
-          "props": {}
+          "props": {
+            "align": {
+              "type": "PopoverAlign",
+              "optional": true
+            },
+            "sideOffset": {
+              "type": "number",
+              "optional": true
+            },
+            "alignOffset": {
+              "type": "number",
+              "optional": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            },
+            "children": {
+              "type": "ReactNode",
+              "optional": true
+            }
+          }
         },
         "Title": {
           "name": "Title",
@@ -4124,7 +3947,12 @@
         "Close": {
           "name": "Close",
           "description": "Close sub-component",
-          "props": {}
+          "props": {
+            "asChild": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         }
       }
     },
@@ -4164,11 +3992,7 @@
           "type": "enum",
           "optional": true,
           "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"
-          ]
+          "values": ["idle", "running", "error"]
         },
         "backLayerOpen": {
           "type": "boolean",
@@ -4223,7 +4047,12 @@
         "BackLayer": {
           "name": "BackLayer",
           "description": "BackLayer sub-component",
-          "props": {}
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "Textarea": {
           "name": "Textarea",
@@ -4263,12 +4092,22 @@
         "Tags": {
           "name": "Tags",
           "description": "Tags sub-component",
-          "props": {}
+          "props": {
+            "children": {
+              "type": "(tag: PromptInputTagData) => ReactNode",
+              "required": true
+            }
+          }
         },
         "Tag": {
           "name": "Tag",
           "description": "Tag sub-component",
-          "props": {}
+          "props": {
+            "data": {
+              "type": "PromptInputTagData",
+              "required": true
+            }
+          }
         },
         "AttachButton": {
           "name": "AttachButton",
@@ -4278,12 +4117,22 @@
         "Attachments": {
           "name": "Attachments",
           "description": "Attachments sub-component",
-          "props": {}
+          "props": {
+            "children": {
+              "type": "(attachment: AttachmentFile) => ReactNode",
+              "required": true
+            }
+          }
         },
         "Attachment": {
           "name": "Attachment",
           "description": "Attachment sub-component",
-          "props": {}
+          "props": {
+            "data": {
+              "type": "AttachmentFile",
+              "required": true
+            }
+          }
         }
       }
     },
@@ -4308,10 +4157,7 @@
           "type": "enum",
           "optional": true,
           "description": "Layout direction of the radio items",
-          "values": [
-            "vertical",
-            "horizontal"
-          ]
+          "values": ["vertical", "horizontal"]
         },
         "error": {
           "type": "string",
@@ -4337,10 +4183,7 @@
           "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",
@@ -4589,22 +4432,14 @@
           "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": {
@@ -4663,11 +4498,7 @@
           "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",
@@ -4679,10 +4510,7 @@
           "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"
@@ -4692,11 +4520,7 @@
         "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",
@@ -4992,18 +4816,12 @@
         "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",
@@ -5027,10 +4845,7 @@
         "allowReorder": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "no",
-            "yes"
-          ]
+          "values": ["no", "yes"]
         },
         "alphabetic": {
           "type": "number | string",
@@ -5043,12 +4858,7 @@
         "arabicForm": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "initial",
-            "medial",
-            "terminal",
-            "isolated"
-          ]
+          "values": ["initial", "medial", "terminal", "isolated"]
         },
         "ascent": {
           "type": "number | string",
@@ -5129,12 +4939,7 @@
         "colorInterpolationFilters": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "auto",
-            "sRGB",
-            "linearRGB",
-            "inherit"
-          ]
+          "values": ["auto", "sRGB", "linearRGB", "inherit"]
         },
         "colorProfile": {
           "type": "number | string",
@@ -5258,11 +5063,7 @@
         "fillRule": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "nonzero",
-            "evenodd",
-            "inherit"
-          ]
+          "values": ["nonzero", "evenodd", "inherit"]
         },
         "filter": {
           "type": "string",
@@ -5763,22 +5564,12 @@
         "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",
@@ -5815,12 +5606,7 @@
         "textAnchor": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "start",
-            "middle",
-            "end",
-            "inherit"
-          ]
+          "values": ["start", "middle", "end", "inherit"]
         },
         "textDecoration": {
           "type": "number | string",
@@ -6034,10 +5820,7 @@
           "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"
@@ -6058,11 +5841,7 @@
         "<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"
-      ]
+      "colors": ["bg-sf-base", "ring-sf-line", "text-sf-default"]
     },
     "Sparkline": {
       "name": "Sparkline",
@@ -6098,10 +5877,7 @@
           "type": "enum",
           "optional": true,
           "description": "Size of the card. Defaults to `\"base\"`.",
-          "values": [
-            "sm",
-            "base"
-          ],
+          "values": ["sm", "base"],
           "default": "base"
         },
         "label": {
@@ -6184,10 +5960,7 @@
         "<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"
-      ]
+      "colors": ["bg-sf-base", "ring-sf-line"]
     },
     "Switch": {
       "name": "Switch",
@@ -6200,10 +5973,7 @@
           "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"
@@ -6236,11 +6006,7 @@
         "size": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "sm",
-            "base",
-            "lg"
-          ],
+          "values": ["sm", "base", "lg"],
           "descriptions": {
             "sm": "Small switch for compact UIs",
             "base": "Default switch size",
@@ -6272,11 +6038,7 @@
         "type": {
           "type": "enum",
           "optional": true,
-          "values": [
-            "submit",
-            "reset",
-            "button"
-          ]
+          "values": ["submit", "reset", "button"]
         },
         "value": {
           "type": "string | string[] | number",
@@ -6373,10 +6135,7 @@
       "props": {
         "layout": {
           "type": "enum",
-          "values": [
-            "auto",
-            "fixed"
-          ],
+          "values": ["auto", "fixed"],
           "default": "auto",
           "descriptions": {
             "auto": "Auto table layout - columns resize based on content",
@@ -6385,10 +6144,7 @@
         },
         "variant": {
           "type": "enum",
-          "values": [
-            "default",
-            "selected"
-          ],
+          "values": ["default", "selected"],
           "default": "default",
           "descriptions": {
             "default": "Default row variant",
@@ -6512,11 +6268,7 @@
           "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": {
@@ -6619,12 +6371,7 @@
           "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",
@@ -6763,11 +6510,7 @@
           "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",
@@ -6787,10 +6530,7 @@
         }
       },
       "examples": [],
-      "colors": [
-        "text-sf-default",
-        "text-sf-subtle"
-      ]
+      "colors": ["text-sf-default", "text-sf-subtle"]
     },
     "Toasty": {
       "name": "Toasty",
@@ -6801,11 +6541,7 @@
       "props": {
         "variant": {
           "type": "enum",
-          "values": [
-            "default",
-            "error",
-            "warning"
-          ],
+          "values": ["default", "error", "warning"],
           "default": "default",
           "descriptions": {
             "default": "Default toast style",
@@ -6872,12 +6608,7 @@
       "props": {
         "side": {
           "type": "enum",
-          "values": [
-            "top",
-            "bottom",
-            "left",
-            "right"
-          ],
+          "values": ["top", "bottom", "left", "right"],
           "default": "top",
           "descriptions": {
             "top": "Tooltip appears above the trigger",
@@ -6987,11 +6718,7 @@
           "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",
@@ -7068,19 +6795,13 @@
           "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": [
@@ -7149,11 +6870,7 @@
           "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",
@@ -7187,15 +6904,8 @@
         "<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"
-      ],
+      "colors": ["bg-sf-base", "border-sf-line", "text-sf-subtle"],
+      "files": ["commander/commander.tsx", "commander/commander.stories.tsx"],
       "dependencies": []
     },
     "DashboardGrid": {
@@ -7282,10 +6992,7 @@
         "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"
@@ -7384,16 +7091,8 @@
         "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",
@@ -7447,18 +7146,12 @@
         "<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"
-      ],
+      "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",
@@ -7470,11 +7163,7 @@
         "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",
@@ -7526,18 +7215,12 @@
         "<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"
-      ],
+      "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",
@@ -7576,10 +7259,7 @@
         }
       },
       "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",
@@ -7643,15 +7323,8 @@
         "Meter",
         "Text"
       ],
-      "Feedback": [
-        "Banner",
-        "Loader",
-        "Toasty"
-      ],
-      "Action": [
-        "Button",
-        "ClipboardText"
-      ],
+      "Feedback": ["Banner", "Loader", "Toasty"],
+      "Action": ["Button", "ClipboardText"],
       "Input": [
         "Checkbox",
         "Combobox",
@@ -7662,24 +7335,9 @@
         "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",
@@ -7838,4 +7496,4 @@
       ]
     }
   }
-}
+}