@sakaniui/react 0.11.2 → 0.13.0

package/dist/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 6,
   "name": "@sakaniui/react",
-  "version": "0.11.2",
+  "version": "0.13.0",
   "description": "Machine-readable contract of the SakaniUI React library, generated from its TypeScript source.",
   "docs": "https://www.sakaniui.com",
   "guide": "https://www.sakaniui.com/llms-full.txt",
@@ -24,7 +24,7 @@
     "@sakaniui/react/emoji": "Fluent Emoji (full colour): EmojiName, one module each (1594 emoji, 311 with skin tones)."
   },
   "conventions": {
-    "version": "This manifest describes @sakaniui/react@0.11.2. Each component has `since`, the first release that contained it; a prop added later has its own `since`, and a value added later is listed in the prop's `valuesSince`. If the project has an older version installed, anything newer than that does not exist there.",
+    "version": "This manifest describes @sakaniui/react@0.13.0. Each component has `since`, the first release that contained it; a prop added later has its own `since`, and a value added later is listed in the prop's `valuesSince`. If the project has an older version installed, anything newer than that does not exist there.",
     "acceptsNativeProps": "Components forward native HTML attributes (className, style, aria-*, event handlers) to their root element unless a prop says otherwise; only the props that are specific to SakaniUI are listed here.",
     "accessibleName": "When `contract.requiresAccessibleName` is true, a required prop (aria-label, aria-labelledby or an alt text) is the only thing that names the control or image. Do not omit it.",
     "tokens": "Use only the token names listed under `tokens`. Colour tokens follow the theme (the `.dark` class flips them); do not hard-code colours.",
@@ -195,7 +195,7 @@
     "wrap"
   ],
   "tokens": {
-    "count": 231,
+    "count": 233,
     "groups": {
       "bp": {
         "--bp-sm": "640px",
@@ -341,7 +341,9 @@
         "--space-16": "16px",
         "--space-20": "20px",
         "--space-24": "24px",
+        "--space-28": "28px",
         "--space-32": "32px",
+        "--space-36": "36px",
         "--space-40": "40px",
         "--space-48": "48px",
         "--space-64": "64px",
@@ -459,9 +461,9 @@
     }
   },
   "counts": {
-    "components": 134,
+    "components": 142,
     "blocks": 42,
-    "utilities": 8
+    "utilities": 10
   },
   "components": [
     {
@@ -2174,6 +2176,200 @@
       "since": "0.3.0",
       "example": "import { CartItem } from '@sakaniui/react';\n\n<CartItem image=\"/images/example.jpg\" name=\"Name\" price={49} quantity={1} />"
     },
+    {
+      "name": "ChainOfThought",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "An AI agent's visible work: a header, steps joined by a rail (ChainOfThoughtStep), and a live Working line. `open` / `defaultOpen` toggles it; `status` and `elapsed` or `startedAt` drive the working line.",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The header text, e.g. \"Ran 3 searches\" or \"Thinking\"."
+        },
+        {
+          "name": "icon",
+          "type": "IconComponent",
+          "required": false,
+          "description": "The header icon, drawn at 16px. Defaults to a magnifier."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state. Omit it to let the component keep its own (see defaultOpen)."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": true,
+          "description": "Initial open state when uncontrolled. Defaults to true."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((open: boolean) => void)",
+          "required": false,
+          "description": "Called with the new state when the header is clicked."
+        },
+        {
+          "name": "status",
+          "type": "\"done\" | \"working\"",
+          "required": false,
+          "values": [
+            "done",
+            "working"
+          ],
+          "description": "Adds the working line under the steps: \"working\" (sparkle, shimmer) or \"done\" (\"Worked for 11.2s\")."
+        },
+        {
+          "name": "elapsed",
+          "type": "number",
+          "required": false,
+          "description": "Elapsed seconds for the working line."
+        },
+        {
+          "name": "startedAt",
+          "type": "number",
+          "required": false,
+          "description": "Epoch ms when the work started; the working line then counts up on its own."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "ChainOfThoughtStep elements."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "contract": {
+        "requiredProps": [
+          "title"
+        ],
+        "requiresAccessibleName": false
+      },
+      "since": "0.12.0",
+      "example": "import { ChainOfThought } from '@sakaniui/react';\n\n<ChainOfThought title=\"Title\" />",
+      "recipes": [
+        {
+          "title": "Stream an agent run: steps arrive, the timer ticks, then it finishes",
+          "description": "ChainOfThought is presentational. Keep the steps in state, append one as your agent starts it, mark the previous one `done`, and pass `status=\"working\"` with `startedAt` so the time counts up on its own. When the run ends switch to `status=\"done\"` with the final `elapsed` (seconds) and change the title. The rail stops at the last step by itself.",
+          "code": "import React from 'react';\nimport { ChainOfThought, ChainOfThoughtStep, SourceStack } from '@sakaniui/react';\nimport { IconBrandReddit } from '@sakaniui/react/icons';\n\ntype Step = { id: string; label: string; query?: string; count?: string };\n\nexport const Example = ({ steps, finished, startedAt, elapsed }: { steps: Step[]; finished: boolean; startedAt: number; elapsed?: number }) => (\n  <ChainOfThought\n    title={finished ? `Ran ${steps.length} searches` : 'Researching'}\n    status={finished ? 'done' : 'working'}\n    startedAt={startedAt}\n    elapsed={elapsed}\n  >\n    {steps.map((s, i) => (\n      <ChainOfThoughtStep\n        key={s.id}\n        status={!finished && i === steps.length - 1 ? 'active' : 'done'}\n        icon={IconBrandReddit}\n        label={s.label}\n        query={s.query}\n        count={s.count}\n        sources={<SourceStack sources={[{ label: 'Reddit', icon: IconBrandReddit }]} />}\n      />\n    ))}\n  </ChainOfThought>\n);"
+        }
+      ],
+      "aliases": [
+        "thought chain",
+        "reasoning steps",
+        "reasoning trace",
+        "agent steps",
+        "agent activity",
+        "agent trace",
+        "thinking steps",
+        "tool calls",
+        "tool call log",
+        "activity trace",
+        "ai steps",
+        "research steps"
+      ]
+    },
+    {
+      "name": "ChainOfThoughtStep",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "One step of an agent run: an icon, a label, an optional monospace `query`, a `count` and a `sources` row. `status` is pending, active (read in full) or done (muted).",
+      "props": [
+        {
+          "name": "status",
+          "type": "\"active\" | \"done\" | \"pending\"",
+          "required": false,
+          "values": [
+            "active",
+            "done",
+            "pending"
+          ],
+          "default": "done",
+          "description": "pending (not started), active (in progress, read in full) or done (muted). Defaults to \"done\"."
+        },
+        {
+          "name": "icon",
+          "type": "IconComponent",
+          "required": false,
+          "description": "The step's icon, drawn at 16px. Defaults to a magnifier."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "description": "What happened, e.g. \"Searched X for\"."
+        },
+        {
+          "name": "query",
+          "type": "string",
+          "required": false,
+          "description": "The query or argument, shown in monospace after the label."
+        },
+        {
+          "name": "count",
+          "type": "ReactNode",
+          "required": false,
+          "description": "A result count on the right, e.g. \"7 posts\"."
+        },
+        {
+          "name": "accent",
+          "type": "string",
+          "required": false,
+          "description": "Colour of the spark that runs into the step while it is active. Defaults to the icon's brand colour when it is a logo from `sourceLogo()`.",
+          "since": "0.13.0"
+        },
+        {
+          "name": "sources",
+          "type": "ReactNode",
+          "required": false,
+          "description": "A row under the step, usually a <SourceStack>."
+        },
+        {
+          "name": "sourcesLabel",
+          "type": "string",
+          "required": false,
+          "default": "Sources",
+          "description": "Text before the sources. Defaults to \"Sources\"."
+        },
+        {
+          "name": "onSourcesClick",
+          "type": "(() => void)",
+          "required": false,
+          "description": "Makes the sources row a button with a chevron, so the sources can be opened."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "contract": {
+        "requiredProps": [
+          "label"
+        ],
+        "requiresAccessibleName": false
+      },
+      "since": "0.12.0",
+      "example": "import { ChainOfThoughtStep } from '@sakaniui/react';\n\n<ChainOfThoughtStep label=\"Label\" />",
+      "aliases": [
+        "reasoning step",
+        "thought step",
+        "agent step",
+        "tool call",
+        "search step",
+        "task step"
+      ]
+    },
     {
       "name": "ChatComposer",
       "kind": "component",
@@ -2412,9 +2608,546 @@
           "description": "Defaults to true. False renders a disabled, unclickable swatch."
         },
         {
-          "name": "onSelect",
-          "type": "(() => void)",
-          "required": false
+          "name": "onSelect",
+          "type": "(() => void)",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "contract": {
+        "requiredProps": [
+          "color",
+          "label"
+        ],
+        "requiresAccessibleName": false
+      },
+      "since": "0.3.0",
+      "example": "import { ColorSwatch } from '@sakaniui/react';\n\n<ColorSwatch color=\"var(--color-accent-default)\" label=\"Label\" />"
+    },
+    {
+      "name": "Combobox",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "Searchable select with single or multi-select.",
+      "props": [
+        {
+          "name": "options",
+          "type": "ComboboxOption[]",
+          "required": true,
+          "shape": {
+            "type": "ComboboxOption",
+            "collection": "array",
+            "fields": [
+              {
+                "name": "value",
+                "type": "string",
+                "required": true
+              },
+              {
+                "name": "label",
+                "type": "string",
+                "required": true
+              },
+              {
+                "name": "icon",
+                "type": "ReactNode",
+                "required": false
+              },
+              {
+                "name": "disabled",
+                "type": "boolean",
+                "required": false
+              }
+            ]
+          }
+        },
+        {
+          "name": "mode",
+          "type": "\"single\" | \"multi\"",
+          "required": false,
+          "values": [
+            "single",
+            "multi"
+          ],
+          "default": "single"
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "default": "Select..."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string | string[]",
+          "required": false,
+          "description": "Controlled selected value(s)."
+        },
+        {
+          "name": "onChange",
+          "type": "((value: string | string[]) => void)",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "contract": {
+        "requiredProps": [
+          "options"
+        ],
+        "requiresAccessibleName": false
+      },
+      "since": "0.1.0",
+      "example": "import { Combobox } from '@sakaniui/react';\n\n<Combobox options={[{ value: \"Value\", label: \"Label\" }]} />",
+      "aliases": [
+        "autocomplete",
+        "typeahead",
+        "searchable select",
+        "multi select",
+        "multiselect",
+        "tag input"
+      ]
+    },
+    {
+      "name": "CommandMenu",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "A ⌘K search and command palette: a field, scope tabs, grouped results (the matched letters in the strong weight), a footer of key hints, and loading, no-results and error states. Pass `groups` of `items` and handle `onSelect`; it filters as you type unless `filter={false}`. ⌘K opens it, ↑ ↓ move, ↵ chooses, ⌘↵ asks AI (with `onAskAI`), Tab switches scope, esc clears then closes. `variant=\"simple\"` is just the field, one group and the key hints.",
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Initial open state when uncontrolled."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((open: boolean) => void)",
+          "required": false
+        },
+        {
+          "name": "hotkey",
+          "type": "string | false",
+          "required": false,
+          "default": "k",
+          "description": "The key that opens it with ⌘ / Ctrl. `false` turns the shortcut off. Defaults to \"k\"."
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"simple\"",
+          "required": false,
+          "values": [
+            "default",
+            "simple"
+          ],
+          "default": "default",
+          "description": "\"default\" has scopes and a workspace footer; \"simple\" is just the field, the rows and the key hints."
+        },
+        {
+          "name": "query",
+          "type": "string",
+          "required": false,
+          "description": "The field's text (controlled)."
+        },
+        {
+          "name": "defaultQuery",
+          "type": "string",
+          "required": false,
+          "default": ""
+        },
+        {
+          "name": "onQueryChange",
+          "type": "((query: string) => void)",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "default": "Search or ask anything…"
+        },
+        {
+          "name": "groups",
+          "type": "CommandMenuGroup[]",
+          "required": true,
+          "description": "Results, in groups.",
+          "shape": {
+            "type": "CommandMenuGroup",
+            "collection": "array",
+            "fields": [
+              {
+                "name": "id",
+                "type": "string",
+                "required": true
+              },
+              {
+                "name": "label",
+                "type": "string",
+                "required": false,
+                "description": "The small heading above the items."
+              },
+              {
+                "name": "action",
+                "type": "{ label: string; onClick: () => void; }",
+                "required": false,
+                "description": "A link on the right of the heading, e.g. \"See all\"."
+              },
+              {
+                "name": "items",
+                "type": "CommandMenuItem[]",
+                "required": true
+              }
+            ]
+          }
+        },
+        {
+          "name": "filter",
+          "type": "boolean | ((item: CommandMenuItem, query: string) => boolean)",
+          "required": false,
+          "default": true,
+          "description": "Filter the groups by the query, scope and tokens here. Pass a function to match your own way, or `false` to show `groups` as given. Defaults to true."
+        },
+        {
+          "name": "highlightMatches",
+          "type": "boolean",
+          "required": false,
+          "default": true,
+          "description": "Wrap the matched letters of each label in the strong weight. Defaults to true."
+        },
+        {
+          "name": "state",
+          "type": "\"loading\" | \"ready\" | \"error\"",
+          "required": false,
+          "values": [
+            "loading",
+            "ready",
+            "error"
+          ],
+          "default": "ready",
+          "description": "\"loading\" shows skeleton rows, \"error\" the error message."
+        },
+        {
+          "name": "onSelect",
+          "type": "((item: CommandMenuItem) => void)",
+          "required": false,
+          "description": "Called when an item is chosen (click or ↵)."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "default": true,
+          "description": "Close the menu when an item is chosen. Defaults to true."
+        },
+        {
+          "name": "scopes",
+          "type": "CommandMenuScope[]",
+          "required": false,
+          "description": "Scope tabs under the field (not shown in the simple variant).",
+          "shape": {
+            "type": "CommandMenuScope",
+            "collection": "array",
+            "fields": [
+              {
+                "name": "value",
+                "type": "string",
+                "required": true,
+                "description": "\"all\" is the unfiltered scope."
+              },
+              {
+                "name": "label",
+                "type": "string",
+                "required": true
+              },
+              {
+                "name": "count",
+                "type": "number | null",
+                "required": false,
+                "description": "The count shown on the tab. Computed from the items when you leave it out (and `filter` is on); `null` shows no count."
+              }
+            ]
+          }
+        },
+        {
+          "name": "scope",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "defaultScope",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "onScopeChange",
+          "type": "((scope: string) => void)",
+          "required": false
+        },
+        {
+          "name": "filters",
+          "type": "CommandMenuFilter[]",
+          "required": false,
+          "description": "Filter tokens shown in the field.",
+          "shape": {
+            "type": "CommandMenuFilter",
+            "collection": "array",
+            "fields": [
+              {
+                "name": "id",
+                "type": "string",
+                "required": true
+              },
+              {
+                "name": "label",
+                "type": "string",
+                "required": true,
+                "description": "Shown in the token, e.g. \"People\" or \"team: Design\"."
+              },
+              {
+                "name": "value",
+                "type": "string",
+                "required": false,
+                "description": "What `tags` are matched against. Defaults to the label."
+              },
+              {
+                "name": "icon",
+                "type": "IconComponent",
+                "required": false
+              }
+            ]
+          }
+        },
+        {
+          "name": "onFiltersChange",
+          "type": "((filters: CommandMenuFilter[]) => void)",
+          "required": false
+        },
+        {
+          "name": "filterKeys",
+          "type": "string[]",
+          "required": false,
+          "description": "Typing `key:value` and a space turns it into a token for these keys, e.g. [\"team\", \"status\"]."
+        },
+        {
+          "name": "onAskAI",
+          "type": "((query: string) => void)",
+          "required": false,
+          "description": "Adds ⌘↵ and the \"Ask AI\" hint; called with the current query."
+        },
+        {
+          "name": "answer",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Shown above the results (an answer card, a Chain of Thought)."
+        },
+        {
+          "name": "renderPreview",
+          "type": "((item: CommandMenuItem) => ReactNode)",
+          "required": false,
+          "description": "Shows a preview pane beside the list for the active item. Return null for no pane."
+        },
+        {
+          "name": "previewActions",
+          "type": "ReactNode | ((item: CommandMenuItem) => ReactNode)",
+          "required": false,
+          "description": "Buttons or links pinned to the bottom of the detail pane. They stay put while the content above changes from row to row (only `renderPreview`'s content cross-fades); pass a function to read the previewed row. Hidden when a row has no preview."
+        },
+        {
+          "name": "previewEmpty",
+          "type": "ReactNode",
+          "required": false,
+          "default": "Nothing to preview for this result",
+          "description": "Shown in the detail pane when the active row has nothing to preview (`renderPreview` returned nothing)."
+        },
+        {
+          "name": "emptyTitle",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The \"No results\" message."
+        },
+        {
+          "name": "emptyDescription",
+          "type": "ReactNode",
+          "required": false
+        },
+        {
+          "name": "suggestions",
+          "type": "CommandMenuSuggestion[]",
+          "required": false,
+          "description": "Quick fixes under the empty message, e.g. \"Did you mean invoice?\".",
+          "shape": {
+            "type": "CommandMenuSuggestion",
+            "collection": "array",
+            "fields": [
+              {
+                "name": "label",
+                "type": "string",
+                "required": true
+              },
+              {
+                "name": "icon",
+                "type": "IconComponent",
+                "required": false
+              },
+              {
+                "name": "iconPosition",
+                "type": "\"start\" | \"end\"",
+                "required": false,
+                "description": "Where the icon sits: before the label (default) or after it (e.g. the × on \"Remove the Files filter\")."
+              },
+              {
+                "name": "emphasis",
+                "type": "string",
+                "required": false,
+                "description": "A word inside `label` to set in the strong weight (\"invoice\" in \"Did you mean invoice?\")."
+              },
+              {
+                "name": "onSelect",
+                "type": "() => void",
+                "required": true
+              }
+            ]
+          }
+        },
+        {
+          "name": "fallbackGroups",
+          "type": "CommandMenuGroup[]",
+          "required": false,
+          "description": "Shown under the empty or error message, and navigable like any group (e.g. \"Try instead\").",
+          "shape": {
+            "type": "CommandMenuGroup",
+            "collection": "array",
+            "fields": [
+              {
+                "name": "id",
+                "type": "string",
+                "required": true
+              },
+              {
+                "name": "label",
+                "type": "string",
+                "required": false,
+                "description": "The small heading above the items."
+              },
+              {
+                "name": "action",
+                "type": "{ label: string; onClick: () => void; }",
+                "required": false,
+                "description": "A link on the right of the heading, e.g. \"See all\"."
+              },
+              {
+                "name": "items",
+                "type": "CommandMenuItem[]",
+                "required": true
+              }
+            ]
+          }
+        },
+        {
+          "name": "errorTitle",
+          "type": "ReactNode",
+          "required": false,
+          "default": "Search is unavailable"
+        },
+        {
+          "name": "errorDescription",
+          "type": "ReactNode",
+          "required": false
+        },
+        {
+          "name": "onRetry",
+          "type": "(() => void)",
+          "required": false
+        },
+        {
+          "name": "onReport",
+          "type": "(() => void)",
+          "required": false,
+          "description": "A second, quieter action beside \"Try again\" in the error state (\"Report\")."
+        },
+        {
+          "name": "retryLabel",
+          "type": "ReactNode",
+          "required": false,
+          "default": "Try again"
+        },
+        {
+          "name": "reportLabel",
+          "type": "ReactNode",
+          "required": false,
+          "default": "Report"
+        },
+        {
+          "name": "workspace",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The workspace switcher in the footer (default variant)."
+        },
+        {
+          "name": "hideFooter",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Hide the footer of key hints."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "default": "Command menu",
+          "description": "Accessible name of the dialog. Defaults to \"Command menu\"."
         },
         {
           "name": "className",
@@ -2424,34 +3157,81 @@
       ],
       "contract": {
         "requiredProps": [
-          "color",
-          "label"
+          "groups"
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0",
-      "example": "import { ColorSwatch } from '@sakaniui/react';\n\n<ColorSwatch color=\"var(--color-accent-default)\" label=\"Label\" />"
+      "since": "0.13.0",
+      "example": "import { CommandMenu } from '@sakaniui/react';\n\n<CommandMenu groups={[{ id: \"item-1\", items: [{ id: \"item-1\", label: \"Label\" }] }]} />",
+      "recipes": [
+        {
+          "title": "A ⌘K search over your pages, people and actions",
+          "description": "CommandMenu is controlled by you for what it shows and what happens: pass `groups` of `items`, handle `onSelect`, and give the menu `scopes` for the tabs. It opens on ⌘K by itself (`open` / `onOpenChange` to control it) and filters as you type. For results from a server pass `filter={false}`, set `state=\"loading\"` while you wait, and render the groups you got back. Put a `CommandMenuTrigger` in your top bar. Give every item a `label`; add `shortcut` for key hints and `description` or `meta` for context.",
+          "code": "import React from 'react';\nimport { CommandMenu, CommandMenuTrigger } from '@sakaniui/react';\nimport { IconSettings, IconPlus } from '@sakaniui/react/icons';\n\nconst GROUPS = [\n  {\n    id: 'pages', label: 'Pages',\n    items: [{ id: 'settings', type: 'page' as const, label: 'Settings', description: 'Workspace', icon: IconSettings }],\n  },\n  {\n    id: 'actions', label: 'Actions',\n    items: [{ id: 'new', type: 'action' as const, label: 'Create project', icon: IconPlus, shortcut: ['⌘', 'N'] }],\n  },\n];\n\nexport const Example = () => {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <>\n      <CommandMenuTrigger onClick={() => setOpen(true)} />\n      <CommandMenu\n        open={open}\n        onOpenChange={setOpen}\n        groups={GROUPS}\n        scopes={[{ value: 'all', label: 'All' }, { value: 'pages', label: 'Pages' }, { value: 'actions', label: 'Actions' }]}\n        onSelect={(item) => console.log(item.id)}\n      />\n    </>\n  );\n};"
+        }
+      ],
+      "aliases": [
+        "command palette",
+        "command bar",
+        "cmd k",
+        "cmdk",
+        "search modal",
+        "global search",
+        "spotlight",
+        "quick actions",
+        "omnibar",
+        "search palette",
+        "advanced search",
+        "quick switcher",
+        "command k"
+      ]
     },
     {
-      "name": "Combobox",
+      "name": "CommandMenuAnswer",
       "kind": "component",
       "category": "Composite",
       "import": "@sakaniui/react",
-      "summary": "Searchable select with single or multi-select.",
+      "summary": "An answer card for the CommandMenu's Ask AI state: the answer text, its sources as chips, and a follow-up. Pass it as the menu's `answer`.",
       "props": [
         {
-          "name": "options",
-          "type": "ComboboxOption[]",
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": "SakaniUI AI"
+        },
+        {
+          "name": "status",
+          "type": "string",
+          "required": false,
+          "description": "e.g. \"Thought for 2.4s\". With `stream` it appears once the text has been written."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
           "required": true,
+          "description": "The answer text."
+        },
+        {
+          "name": "stream",
+          "type": "boolean",
+          "required": false,
+          "description": "Writes the answer in word by word, the way a chat reply arrives, and brings in the sources and the follow-up once it is written. Needs `children` to be a plain string; reduced motion shows it at once."
+        },
+        {
+          "name": "onStreamEnd",
+          "type": "(() => void)",
+          "required": false,
+          "description": "Called once when the text has been written (or at once when it is not streamed)."
+        },
+        {
+          "name": "sources",
+          "type": "{ label: string; icon?: IconComponent; }[]",
+          "required": false,
+          "description": "Sources as chips under the answer.",
           "shape": {
-            "type": "ComboboxOption",
+            "type": "{ label: string; icon?: IconComponent | undefined; }",
             "collection": "array",
             "fields": [
-              {
-                "name": "value",
-                "type": "string",
-                "required": true
-              },
               {
                 "name": "label",
                 "type": "string",
@@ -2459,101 +3239,83 @@
               },
               {
                 "name": "icon",
-                "type": "ReactNode",
-                "required": false
-              },
-              {
-                "name": "disabled",
-                "type": "boolean",
+                "type": "IconComponent",
                 "required": false
               }
             ]
           }
         },
         {
-          "name": "mode",
-          "type": "\"single\" | \"multi\"",
+          "name": "onFollowUp",
+          "type": "(() => void)",
           "required": false,
-          "values": [
-            "single",
-            "multi"
-          ],
-          "default": "single"
+          "description": "Adds an \"Ask a follow-up\" button."
         },
         {
-          "name": "size",
-          "type": "\"sm\" | \"md\" | \"lg\"",
+          "name": "onOpenInChat",
+          "type": "(() => void)",
           "required": false,
-          "values": [
-            "sm",
-            "md",
-            "lg"
-          ],
-          "default": "md"
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "required": false
+          "description": "Adds an \"Open in chat\" hint with ⌘↵."
         },
         {
-          "name": "description",
-          "type": "string",
+          "name": "onCopy",
+          "type": "(() => void)",
           "required": false
         },
         {
-          "name": "error",
+          "name": "className",
           "type": "string",
           "required": false
-        },
+        }
+      ],
+      "contract": {
+        "requiredProps": [
+          "children"
+        ],
+        "requiresAccessibleName": false
+      },
+      "since": "0.13.0",
+      "example": "import { CommandMenuAnswer } from '@sakaniui/react';\n\n<CommandMenuAnswer>Label</CommandMenuAnswer>",
+      "aliases": [
+        "ai answer",
+        "answer card",
+        "search answer"
+      ]
+    },
+    {
+      "name": "CommandMenuTrigger",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "The ⌘K pill that opens a CommandMenu, for a top bar or sidebar. A button: give it `onClick`.",
+      "props": [
         {
           "name": "placeholder",
           "type": "string",
           "required": false,
-          "default": "Select..."
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false
-        },
-        {
-          "name": "loading",
-          "type": "boolean",
-          "required": false
+          "default": "Search or ask anything…",
+          "description": "The text in the pill. Defaults to \"Search or jump to…\"."
         },
         {
-          "name": "value",
-          "type": "string | string[]",
+          "name": "shortcut",
+          "type": "string[]",
           "required": false,
-          "description": "Controlled selected value(s)."
-        },
-        {
-          "name": "onChange",
-          "type": "((value: string | string[]) => void)",
-          "required": false
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false
+          "default": "['⌘', 'K']",
+          "description": "The key caps on the right. Defaults to [\"⌘\", \"K\"]."
         }
       ],
       "contract": {
-        "requiredProps": [
-          "options"
-        ],
+        "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0",
-      "example": "import { Combobox } from '@sakaniui/react';\n\n<Combobox options={[{ value: \"Value\", label: \"Label\" }]} />",
+      "since": "0.13.0",
+      "example": "import { CommandMenuTrigger } from '@sakaniui/react';\n\n<CommandMenuTrigger />",
       "aliases": [
-        "autocomplete",
-        "typeahead",
-        "searchable select",
-        "multi select",
-        "multiselect",
-        "tag input"
+        "search button",
+        "cmd k trigger",
+        "search pill",
+        "search trigger",
+        "command trigger"
       ]
     },
     {
@@ -2749,12 +3511,12 @@
       "props": [
         {
           "name": "type",
-          "type": "\"no-data\" | \"no-results\" | \"error\"",
+          "type": "\"error\" | \"no-data\" | \"no-results\"",
           "required": false,
           "values": [
+            "error",
             "no-data",
-            "no-results",
-            "error"
+            "no-results"
           ],
           "default": "no-data"
         },
@@ -4240,13 +5002,13 @@
                 "description": "Returns the item located at the specified index."
               },
               {
-                "name": "__@iterator@12750",
+                "name": "__@iterator@15607",
                 "type": "() => ArrayIterator<number>",
                 "required": true,
                 "description": "Iterator"
               },
               {
-                "name": "__@unscopables@12780",
+                "name": "__@unscopables@15637",
                 "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; }",
                 "required": true,
                 "description": "Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement."
@@ -4822,13 +5584,13 @@
                 "description": "Returns the item located at the specified index."
               },
               {
-                "name": "__@iterator@12750",
+                "name": "__@iterator@15607",
                 "type": "() => ArrayIterator<number>",
                 "required": true,
                 "description": "Iterator"
               },
               {
-                "name": "__@unscopables@12780",
+                "name": "__@unscopables@15637",
                 "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; }",
                 "required": true,
                 "description": "Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement."
@@ -5212,13 +5974,13 @@
                 "description": "Returns the item located at the specified index."
               },
               {
-                "name": "__@iterator@12750",
+                "name": "__@iterator@15607",
                 "type": "() => ArrayIterator<number>",
                 "required": true,
                 "description": "Iterator"
               },
               {
-                "name": "__@unscopables@12780",
+                "name": "__@unscopables@15637",
                 "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; }",
                 "required": true,
                 "description": "Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement."
@@ -5519,13 +6281,13 @@
                 "description": "Returns the item located at the specified index."
               },
               {
-                "name": "__@iterator@12750",
+                "name": "__@iterator@15607",
                 "type": "() => ArrayIterator<number>",
                 "required": true,
                 "description": "Iterator"
               },
               {
-                "name": "__@unscopables@12780",
+                "name": "__@unscopables@15637",
                 "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; }",
                 "required": true,
                 "description": "Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement."
@@ -8047,6 +8809,123 @@
         "range input"
       ]
     },
+    {
+      "name": "SourceLogo",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "The real logo of a site an agent searched or read, in its brand colour: `<SourceLogo name=\"reddit\" />`, or `sourceLogo('reddit')` for any `icon` prop (a step's, a SourceStack chip's). Black brands draw in the text colour so they stay visible in dark mode.",
+      "props": [
+        {
+          "name": "name",
+          "type": "\"x\" | \"google\" | \"reddit\" | \"github\" | \"linkedin\" | \"youtube\" | \"hackernews\" | \"wikipedia\" | \"stackoverflow\" | \"producthunt\" | \"medium\" | \"notion\" | \"substack\" | \"arxiv\" | \"bluesky\" | \"perplexity\" | \"duckduckgo\"",
+          "required": true,
+          "values": [
+            "x",
+            "google",
+            "reddit",
+            "github",
+            "linkedin",
+            "youtube",
+            "hackernews",
+            "wikipedia",
+            "stackoverflow",
+            "producthunt",
+            "medium",
+            "notion",
+            "substack",
+            "arxiv",
+            "bluesky",
+            "perplexity",
+            "duckduckgo"
+          ],
+          "description": "Which site: \"google\", \"x\", \"reddit\", \"github\", \"linkedin\", \"youtube\", \"hackernews\", \"wikipedia\", \"stackoverflow\", \"producthunt\", \"medium\", \"notion\", \"substack\", \"arxiv\", \"bluesky\", \"perplexity\" or \"duckduckgo\"."
+        },
+        {
+          "name": "size",
+          "type": "string | number",
+          "required": false,
+          "default": 16,
+          "description": "Rendered size: px, or any CSS length. Default 16."
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name. Without it the logo is decorative (aria-hidden), which is right next to a text label."
+        }
+      ],
+      "contract": {
+        "requiredProps": [
+          "name"
+        ],
+        "requiresAccessibleName": false
+      },
+      "since": "0.13.0",
+      "example": "import { SourceLogo } from '@sakaniui/react';\n\n<SourceLogo name=\"x\" />",
+      "aliases": [
+        "brand logo",
+        "site logo",
+        "favicon",
+        "website logo",
+        "social logo",
+        "colour logo"
+      ]
+    },
+    {
+      "name": "SourceStack",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "Overlapping site-icon chips for a step's sources: pass `sources` as { label, icon } (three to five read best).",
+      "props": [
+        {
+          "name": "sources",
+          "type": "SourceStackSource[]",
+          "required": true,
+          "description": "The sources, in order. Three to five read best.",
+          "shape": {
+            "type": "SourceStackSource",
+            "collection": "array",
+            "fields": [
+              {
+                "name": "label",
+                "type": "string",
+                "required": true,
+                "description": "The site's name, e.g. \"Reddit\". Read out and shown as a tooltip."
+              },
+              {
+                "name": "icon",
+                "type": "IconComponent",
+                "required": false,
+                "description": "A brand or generic icon, drawn at 10px. Defaults to a globe."
+              }
+            ]
+          }
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "contract": {
+        "requiredProps": [
+          "sources"
+        ],
+        "requiresAccessibleName": false
+      },
+      "since": "0.12.0",
+      "example": "import { SourceStack } from '@sakaniui/react';\n\n<SourceStack sources={[{ label: \"Label\" }]} />",
+      "aliases": [
+        "sources",
+        "favicon stack",
+        "source chips",
+        "citations",
+        "citation chips",
+        "site icons"
+      ]
+    },
     {
       "name": "SpendingBalance",
       "kind": "component",
@@ -9708,6 +10587,63 @@
       "since": "0.3.0",
       "example": "import { WishlistButton } from '@sakaniui/react';\n\n<WishlistButton />"
     },
+    {
+      "name": "WorkingIndicator",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "The live status line under an agent's steps: a sparkle, \"Working\" and the elapsed time (`startedAt` ticks on its own), or a check and \"Worked for 11s\" when done.",
+      "props": [
+        {
+          "name": "status",
+          "type": "\"done\" | \"working\"",
+          "required": false,
+          "values": [
+            "done",
+            "working"
+          ],
+          "default": "working",
+          "description": "\"working\" shows a sparkle and a shimmering label; \"done\" shows a check. Defaults to \"working\"."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "description": "Replaces the default label (\"Working\" / \"Worked for\")."
+        },
+        {
+          "name": "elapsed",
+          "type": "number",
+          "required": false,
+          "description": "Elapsed seconds. Takes precedence over startedAt."
+        },
+        {
+          "name": "startedAt",
+          "type": "number",
+          "required": false,
+          "description": "Epoch ms when the work started; while \"working\" the time ticks on its own."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "contract": {
+        "requiredProps": [],
+        "requiresAccessibleName": false
+      },
+      "since": "0.12.0",
+      "example": "import { WorkingIndicator } from '@sakaniui/react';\n\n<WorkingIndicator />",
+      "aliases": [
+        "thinking indicator",
+        "working status",
+        "agent status",
+        "typing status",
+        "elapsed timer",
+        "shimmer label"
+      ]
+    },
     {
       "name": "XIcon",
       "kind": "component",
@@ -12785,6 +13721,18 @@
       "import": "@sakaniui/react",
       "since": "0.3.0"
     },
+    {
+      "name": "sourceLogo",
+      "kind": "helper",
+      "import": "@sakaniui/react",
+      "since": "0.13.0"
+    },
+    {
+      "name": "sourceLogoNames",
+      "kind": "helper",
+      "import": "@sakaniui/react",
+      "since": "0.13.0"
+    },
     {
       "name": "syncLiquidBackdrop",
       "kind": "helper",