@logicplanes/kaeso-ui 0.2.2 → 0.3.1

package/ai/component-registry.json

@@ -1,6 +1,6 @@
 {
   "package": "@logicplanes/kaeso-ui",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "components": [
     {
       "entry": "app-frame",
@@ -832,6 +832,20 @@
               "required": false,
               "default": null,
               "description": "Called when Try again is pressed after `error`; without it, the button doesn't show."
+            },
+            {
+              "name": "partial",
+              "type": "{ first?: boolean; last?: boolean; ongoing?: boolean | undefined; } | undefined",
+              "required": false,
+              "default": null,
+              "description": "Marks the `first` or `last` category as covering only part of its span: its bars are drawn lighter and its tooltip says \"partial\". `ongoing` marks the last one as still counting, such as today, and says \"so far\"."
+            },
+            {
+              "name": "shares",
+              "type": "boolean",
+              "required": false,
+              "default": "true",
+              "description": "Shows each series' share of the category's total in the tooltip (on by default). Turn it off when one series is part of another, such as errors within requests."
             }
           ],
           "file": "src/components/charts/bar.tsx"
@@ -1540,12 +1554,19 @@
               "default": null,
               "description": "The data failed to load: the chart keeps its height, says so quietly and offers Try again. Errors are toasts, so the value isn't shown; toast the message where the request fails."
             },
+            {
+              "name": "formatTick",
+              "type": "((t: Date) => string)",
+              "required": false,
+              "default": null,
+              "description": "Names the times under the axis (\"3 Aug\", \"2026\"). Defaults to calendar ticks in `timeZone`; pass it with `tickAt=\"points\"` for buckets."
+            },
             {
               "name": "formatTime",
               "type": "((t: Date) => string)",
               "required": false,
               "default": null,
-              "description": "Names a point's time in the tooltip, the table and for screen readers, where a point stands for more than its instant: \"Week of 3 Aug\", \"Aug 2026\". The axis keeps its calendar ticks."
+              "description": "Names a point's time in the tooltip, the table and for screen readers, where a point stands for more than its instant: \"Week of 3 Aug\", \"Aug 2026\"."
             },
             {
               "name": "formatValue",
@@ -1596,12 +1617,40 @@
               "default": null,
               "description": "Called when Try again is pressed after `error`; without it, the button doesn't show."
             },
+            {
+              "name": "partial",
+              "type": "{ first?: boolean; last?: boolean; ongoing?: boolean | undefined; } | undefined",
+              "required": false,
+              "default": null,
+              "description": "Marks the `first` or `last` point as covering only part of its span: the line to it is dashed and its tooltip says \"partial\". `ongoing` marks the last one as still counting, such as today, and says \"so far\"."
+            },
+            {
+              "name": "shares",
+              "type": "boolean",
+              "required": false,
+              "default": "true",
+              "description": "Shows each series' share of the point's total in the tooltip (on by default). Turn it off when one series is part of another, such as errors within requests."
+            },
             {
               "name": "threshold",
               "type": "{ value: number; label: string; }",
               "required": false,
               "default": null,
               "description": "A threshold line (a budget) in danger, dashed."
+            },
+            {
+              "name": "tickAt",
+              "type": "\"time\" | \"points\"",
+              "required": false,
+              "default": "time",
+              "description": "`time` labels round times, as many as fit (default). `points` sets each point in the middle of an equal step and labels every nth one, as a bar chart places and labels its categories, so a bar chart of the same days lines up with it."
+            },
+            {
+              "name": "timeZone",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The zone the axis and the default labels read times in, such as \"UTC\" for days counted in UTC. Defaults to the zone set with `setFormatTimeZone`, else the viewer's."
             }
           ],
           "file": "src/components/charts/timeseries.tsx"
@@ -2560,8 +2609,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "id",
@@ -2645,7 +2693,7 @@
         },
         {
           "name": "Combobox",
-          "description": "A pill input with a filtered list: matched characters highlighted, async, chips for many, create.",
+          "description": "A pill input with a filtered list: matched characters highlighted, async, chips for many, create. It shows the first 100 matches and says how many more there are; for lists people scroll through, use `CommandList`.",
           "props": [
             {
               "name": "options",
@@ -2668,6 +2716,13 @@
               "default": null,
               "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
             },
+            {
+              "name": "createLabel",
+              "type": "((label: string) => string)",
+              "required": false,
+              "default": null,
+              "description": "The words of the offer to add what was typed; `Add “…”` by default."
+            },
             {
               "name": "data-force",
               "type": "string",
@@ -2708,8 +2763,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "id",
@@ -2765,7 +2819,7 @@
               "type": "((label: string) => void)",
               "required": false,
               "default": null,
-              "description": "Offers \"Create “…”\" when nothing matches exactly."
+              "description": "Offers \"Add “…”\" when nothing matches exactly."
             },
             {
               "name": "onInputValueChange",
@@ -2802,6 +2856,13 @@
               "default": null,
               "description": "Marks it as required in a form."
             },
+            {
+              "name": "searchDelay",
+              "type": "number",
+              "required": false,
+              "default": null,
+              "description": "Milliseconds of quiet typing before `onInputValueChange` is called, so a server search runs once per pause, not per keystroke."
+            },
             {
               "name": "size",
               "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"",
@@ -2857,6 +2918,331 @@
         }
       }
     },
+    {
+      "entry": "command-list",
+      "kind": "components",
+      "import": "@logicplanes/kaeso-ui/command-list",
+      "components": [
+        {
+          "name": "CommandList",
+          "description": "A search field over a long list that stays fast with thousands of rows: fuzzy matches on every row's words, groups with sticky captions, the best matches first, arrows, Home, End and Page keys, Enter to choose. The base of every picker.",
+          "props": [
+            {
+              "name": "aria-label",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The list's accessible name."
+            },
+            {
+              "name": "groups",
+              "type": "CommandListGroup[]",
+              "required": true,
+              "default": null,
+              "description": "The rows, in groups; a group with a label gets a sticky caption with its mark and count, and a loading group keeps its caption while it has no rows yet."
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Focuses the search field when it appears, as in a popover or a dialog step."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
+            },
+            {
+              "name": "data-force",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`."
+            },
+            {
+              "name": "defaultQuery",
+              "type": "string",
+              "required": false,
+              "default": "",
+              "description": "The search text on first render."
+            },
+            {
+              "name": "emptyText",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "What the list says when nothing matches: \"No models match\"."
+            },
+            {
+              "name": "escapeClears",
+              "type": "boolean",
+              "required": false,
+              "default": "true",
+              "description": "Escape first clears the search, and only an empty search lets Escape close what holds the list (true by default)."
+            },
+            {
+              "name": "footer",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "A line under the list, such as key hints."
+            },
+            {
+              "name": "height",
+              "type": "\"fill\" | \"popover\" | \"inline\"",
+              "required": false,
+              "default": null,
+              "description": "How tall it is: bounded in a popover, a fixed raised frame in a dialog, or filling a phone sheet. Inside `PickerPopover` it follows the popover."
+            },
+            {
+              "name": "inputProps",
+              "type": "{ [attribute: `data-${string}`]: string; }",
+              "required": false,
+              "default": null,
+              "description": "Data attributes for the search field, such as a marker other code looks for."
+            },
+            {
+              "name": "loading",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Shows a quiet progress line at the top while more rows load."
+            },
+            {
+              "name": "match",
+              "type": "((item: CommandListItem, query: string) => number)",
+              "required": false,
+              "default": "(item: CommandListItem, query: string) => commandMatch(query, [item.label, ...(item.keywords ?? [])])",
+              "description": "Scores a row against the search: above 0 keeps it, and higher scores come first. Fuzzy matching on the label and keywords by default."
+            },
+            {
+              "name": "multiple",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Rows toggle with a checkbox instead of choosing one."
+            },
+            {
+              "name": "onEscape",
+              "type": "(() => void)",
+              "required": false,
+              "default": null,
+              "description": "Called on Escape when the search field is already empty."
+            },
+            {
+              "name": "onInputKeyDown",
+              "type": "((event: KeyboardEvent<HTMLInputElement>) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called first with every key pressed in the search field; call `preventDefault` to replace the list's own handling."
+            },
+            {
+              "name": "onQueryChange",
+              "type": "((query: string) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called with the search text."
+            },
+            {
+              "name": "onSelect",
+              "type": "((value: string) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called with the value of the row chosen with Enter or a click."
+            },
+            {
+              "name": "placeholder",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The search field's placeholder and accessible name (\"Search\" by default)."
+            },
+            {
+              "name": "query",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The search text, when you control it."
+            },
+            {
+              "name": "searchPrefix",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Something before the search text, such as the page a palette is on."
+            },
+            {
+              "name": "size",
+              "type": "\"md\" | \"lg\"",
+              "required": false,
+              "default": "md",
+              "description": "The search field's and the rows' height: 34px rows, or 40px in the command palette."
+            },
+            {
+              "name": "toolbar",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Controls under the search field: filter chips or a toggle."
+            },
+            {
+              "name": "value",
+              "type": "string | readonly string[] | null",
+              "required": false,
+              "default": null,
+              "description": "The chosen value, or the chosen values with `multiple`."
+            }
+          ],
+          "file": "src/components/command-list/command-list.tsx"
+        },
+        {
+          "name": "PickerPopover",
+          "description": "The frame a picker opens in: a popover under its trigger on wider screens, a full-screen sheet with the search on top on phones.",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": true,
+              "default": null,
+              "description": "The `CommandList`."
+            },
+            {
+              "name": "title",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The popover's accessible name and the sheet's title on phones."
+            },
+            {
+              "name": "trigger",
+              "type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
+              "required": true,
+              "default": null,
+              "description": "The button that opens it, usually a `PickerTrigger`."
+            },
+            {
+              "name": "align",
+              "type": "\"start\" | \"end\"",
+              "required": false,
+              "default": "start",
+              "description": "Which edge of the trigger the popover lines up with."
+            },
+            {
+              "name": "onOpenChange",
+              "type": "((open: boolean) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called when it opens or closes."
+            },
+            {
+              "name": "open",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Whether it is open, when you control it."
+            },
+            {
+              "name": "width",
+              "type": "\"md\" | \"sm\" | \"lg\"",
+              "required": false,
+              "default": "md",
+              "description": "The popover's width on wider screens."
+            }
+          ],
+          "file": "src/components/command-list/picker-popover.tsx"
+        },
+        {
+          "name": "PickerTrigger",
+          "description": "The pill that opens a picker and shows its value, in the same looks and sizes as `Select`.",
+          "props": [
+            {
+              "name": "appearance",
+              "type": "\"ghost\" | \"default\" | \"header\"",
+              "required": false,
+              "default": "default",
+              "description": "A raised pill, quiet in a settings row, or transparent in a column header."
+            },
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "The chosen value as it should read; the placeholder shows without it."
+            },
+            {
+              "name": "data-force",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`."
+            },
+            {
+              "name": "fullWidth",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Fills the container."
+            },
+            {
+              "name": "invalid",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Shows it as invalid; pair it with a message that says what to fix."
+            },
+            {
+              "name": "placeholder",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Text shown while nothing is chosen."
+            },
+            {
+              "name": "size",
+              "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"",
+              "required": false,
+              "default": "md",
+              "description": "The height of the pill."
+            }
+          ],
+          "file": "src/components/command-list/picker-popover.tsx"
+        }
+      ],
+      "variants": {
+        "COMMAND_LIST": {
+          "axes": {
+            "height": {
+              "popover": "At most 480px or 70% of the window, shrinking to its rows: a popover (default)",
+              "inline": "Its rows' height up to 360px in a raised frame, kept while searching: a dialog step",
+              "fill": "Fills its parent: a phone sheet or a command palette"
+            },
+            "size": {
+              "md": "A 44px search over 34px rows (default)",
+              "lg": "A 56px search over 40px rows: the command palette"
+            }
+          },
+          "defaults": {
+            "height": "popover",
+            "size": "md"
+          }
+        },
+        "PICKER_POPOVER": {
+          "axes": {
+            "width": {
+              "sm": "320px: providers and short lists",
+              "md": "400px (default)",
+              "lg": "560px: models with their details"
+            }
+          },
+          "defaults": {
+            "width": "md"
+          }
+        }
+      }
+    },
     {
       "entry": "command-palette",
       "kind": "components",
@@ -3240,6 +3626,13 @@
               "default": null,
               "description": "Sorting happens on the server: the data arrives sorted."
             },
+            {
+              "name": "onHiddenColumnsChange",
+              "type": "((ids: string[]) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called with the ids of the columns left out at the table's width, so a kept column can show what they held."
+            },
             {
               "name": "onLoadMore",
               "type": "(() => void)",
@@ -3413,8 +3806,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "id",
@@ -3554,8 +3946,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "id",
@@ -3695,8 +4086,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "id",
@@ -3995,7 +4385,7 @@
         },
         {
           "name": "Dialog",
-          "description": "A modal dialog: 440 / 560 / 720, radius 20, title, description, body, actions. ⌘Enter submits. It stays centered while its content changes, growing or shrinking 200ms from the size it has; the body scrolls between the header and the footer when the content is taller than the screen. Its content unmounts once it has closed; state kept beside it, like a field, a step or a secret, goes in a component inside a DialogScope.",
+          "description": "A modal dialog: 440 / 560 / 720, radius 20, title, description, body, actions. Enter in a single-line field and ⌘/Ctrl+Enter anywhere submit; Enter in a text area adds a line. It stays centered (or, with `anchor=\"top\"`, keeps its top edge) while its content changes, growing or shrinking 200ms from the size it has; the body scrolls between the header and the footer when the content is taller than the screen. Its content unmounts once it has closed; state kept beside it, like a field, a step or a secret, goes in a component inside a DialogScope.",
           "props": [
             {
               "name": "title",
@@ -4004,12 +4394,19 @@
               "default": null,
               "description": "The dialog's heading, also its accessible name."
             },
+            {
+              "name": "anchor",
+              "type": "\"center\" | \"top\"",
+              "required": false,
+              "default": null,
+              "description": "Where it sits: centered, or with a fixed top edge for content that changes height, so the title never moves."
+            },
             {
               "name": "busy",
               "type": "boolean",
               "required": false,
               "default": null,
-              "description": "Keeps the dialog open while work it started is underway: Escape, a press outside, the close circle, Dialog.Close and ⌘Enter do nothing, so a request is never abandoned or sent twice."
+              "description": "Keeps the dialog open while work it started is underway: Escape, a press outside, the close circle, Dialog.Close, Enter and ⌘Enter do nothing, so a request is never abandoned or sent twice."
             },
             {
               "name": "children",
@@ -4079,7 +4476,7 @@
               "type": "(() => void)",
               "required": false,
               "default": null,
-              "description": "⌘Enter calls this (usually the primary action)."
+              "description": "Enter in a single-line field and ⌘/Ctrl+Enter anywhere call this (usually the primary action); Enter in a text area, a search field, a combobox or a picker, and the Enter that confirms an input method's text, keep their own meaning."
             },
             {
               "name": "open",
@@ -4088,6 +4485,13 @@
               "default": null,
               "description": "Whether it is open, when you control it."
             },
+            {
+              "name": "persistent",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "A press outside doesn't close it, for forms that would lose what was typed; Escape and the close circle still do. Every StepDialog is persistent."
+            },
             {
               "name": "size",
               "type": "\"md\" | \"sm\" | \"lg\"",
@@ -4128,7 +4532,7 @@
         },
         {
           "name": "LayerDialog",
-          "description": "A stacked dialog: a second layer slides over the first (add model → review values); back returns. The layers below stay as they were. Moving to a layer puts the focus on its first field, or its primary action; Back returns it to the control that opened the layer, scrolled where it was. ⌘/Ctrl+Enter calls onSubmit on every layer.",
+          "description": "A stacked dialog: a second layer slides over the first (add model → review values); back returns. The layers below stay as they were. Moving to a layer puts the focus on its first field, or its primary action; Back returns it to the control that opened the layer, scrolled where it was. Enter in a single-line field and ⌘/Ctrl+Enter call onSubmit on every layer.",
           "props": [
             {
               "name": "layers",
@@ -4137,12 +4541,19 @@
               "default": null,
               "description": "The layers, each with its title, content and footer; one shows at a time, and the ones below it stay mounted and hidden."
             },
+            {
+              "name": "anchor",
+              "type": "\"center\" | \"top\"",
+              "required": false,
+              "default": null,
+              "description": "Where it sits: centered, or with a fixed top edge for layers of different heights."
+            },
             {
               "name": "busy",
               "type": "boolean",
               "required": false,
               "default": null,
-              "description": "Keeps the dialog open while work it started is underway: Escape, a press outside, the close circle, Dialog.Close and ⌘Enter do nothing, so a request is never abandoned or sent twice."
+              "description": "Keeps the dialog open while work it started is underway: Escape, a press outside, the close circle, Dialog.Close, Enter and ⌘Enter do nothing, so a request is never abandoned or sent twice."
             },
             {
               "name": "className",
@@ -4198,7 +4609,7 @@
               "type": "(() => void)",
               "required": false,
               "default": null,
-              "description": "⌘/Ctrl+Enter calls this on every layer; pass the action of the layer shown."
+              "description": "Enter in a single-line field and ⌘/Ctrl+Enter call this on every layer; pass the action of the layer shown."
             },
             {
               "name": "open",
@@ -4207,6 +4618,13 @@
               "default": null,
               "description": "Whether it is open, when you control it."
             },
+            {
+              "name": "persistent",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "A press outside doesn't close it, for forms that would lose what was typed; Escape and the close circle still do. Every StepDialog is persistent."
+            },
             {
               "name": "size",
               "type": "\"md\" | \"sm\" | \"lg\"",
@@ -4226,7 +4644,7 @@
         },
         {
           "name": "StepDialog",
-          "description": "A form split into steps, one question at a time, like sign-in: the step's title and fields, Back and Continue, the action on the last step. Enter in a field and ⌘/Ctrl+Enter continue. The dialog takes each step's own height and stays centered: it grows or shrinks 200ms from the size it has as the step changes, and the new step drifts in from the side it comes from. With `result`, what the last step made (a key shown once) takes the steps' place in the same dialog, at its own size. Continue and Back move the focus into the step they show (its first field; without one, the primary action, or Back when the last step destroys), and a screen reader hears which step it is.",
+          "description": "A form split into steps, one question at a time, like sign-in: the step's title and fields, Back and Continue, the action on the last step. Enter in a single-line field and ⌘/Ctrl+Enter continue. The dialog takes each step's own height and keeps its top edge where it opened: it grows or shrinks 200ms downward from the size it has as the step changes, so the title never jumps, and the new step drifts in from the side it comes from. With `result`, what the last step made (a key shown once) takes the steps' place in the same dialog, at its own size. Continue and Back move the focus into the step they show (its first field; without one, the primary action, or Back when the last step destroys), and a screen reader hears which step it is.",
           "props": [
             {
               "name": "onSubmit",
@@ -4335,10 +4753,15 @@
               "sm": "440px: confirmations, short forms",
               "md": "560px: forms (default)",
               "lg": "720px: two columns, previews"
+            },
+            "anchor": {
+              "center": "Centered on the screen (default)",
+              "top": "A fixed top edge, for content that changes height, such as the steps of a StepDialog"
             }
           },
           "defaults": {
-            "size": "md"
+            "size": "md",
+            "anchor": "center"
           }
         },
         "LAYER_DIALOG": {
@@ -4347,10 +4770,15 @@
               "sm": "440px: confirmations, short forms",
               "md": "560px: forms (default)",
               "lg": "720px: two columns, previews"
+            },
+            "anchor": {
+              "center": "Centered on the screen (default)",
+              "top": "A fixed top edge, for content that changes height, such as the steps of a StepDialog"
             }
           },
           "defaults": {
-            "size": "md"
+            "size": "md",
+            "anchor": "center"
           }
         }
       }
@@ -4380,10 +4808,10 @@
             },
             {
               "name": "properties",
-              "type": "{ options: { value: string; label: string; }[]; value: string[]; onChange: (v: string[]) => void; }",
+              "type": "{ options: { value: string; label: string; }[]; value: string[]; onChange: (v: string[]) => void; hidden?: string[]; }",
               "required": false,
               "default": null,
-              "description": "The properties shown for each item."
+              "description": "The properties shown for each item; `hidden` names those that are on but left out because they don't fit, such as table columns at a narrow width."
             },
             {
               "name": "rows",
@@ -4522,7 +4950,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "The error message: it marks the field invalid and is read out with the description, but isn't drawn under the field, so show it in a toast too."
+              "description": "The error message, shown under the control in the danger color: it marks the field invalid and is read out with the description."
             },
             {
               "name": "id",
@@ -4642,6 +5070,13 @@
               "default": null,
               "description": "Open the value menu when the chip appears: a filter just added asks for its value at once."
             },
+            {
+              "name": "groups",
+              "type": "CommandListGroup[]",
+              "required": false,
+              "default": null,
+              "description": "Choices as ready-made searchable list groups, in place of `values`: rows with marks and details and headings with logos, such as `useModelGroups` or `useProviderGroups` build."
+            },
             {
               "name": "multiple",
               "type": "boolean",
@@ -4670,6 +5105,13 @@
               "default": null,
               "description": "Called with the chosen values."
             },
+            {
+              "name": "onValuesOpenChange",
+              "type": "((open: boolean) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called when the value menu opens or closes, so a filter just added can go away when it closes without a value."
+            },
             {
               "name": "operators",
               "type": "string[]",
@@ -4684,6 +5126,13 @@
               "default": null,
               "description": "The icon of the property the filter applies to."
             },
+            {
+              "name": "searchable",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Gives the value menu a search field however few choices it has."
+            },
             {
               "name": "selected",
               "type": "string[]",
@@ -4696,7 +5145,14 @@
               "type": "FilterChipChoice[]",
               "required": false,
               "default": null,
-              "description": "Choices for the value menu."
+              "description": "Choices for the value menu: past 8 it gets a search field, past 50 it opens a fast searchable list grouped by each choice's `group`, such as models by provider."
+            },
+            {
+              "name": "width",
+              "type": "\"md\" | \"sm\" | \"lg\"",
+              "required": false,
+              "default": null,
+              "description": "How wide the searchable list opens: `sm` for providers, `lg` for models with their details."
             }
           ],
           "file": "src/components/filter-chip/filter-chip.tsx"
@@ -5099,8 +5555,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "invalid",
@@ -5268,8 +5723,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "hideStepper",
@@ -5278,6 +5732,13 @@
               "default": null,
               "description": "Hide the stepper circles."
             },
+            {
+              "name": "integer",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Whole numbers only, such as a count of days: a numeric keypad on phones and no thousands separators in the field."
+            },
             {
               "name": "invalid",
               "type": "boolean",
@@ -5486,8 +5947,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "invalid",
@@ -5599,8 +6059,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "invalid",
@@ -5719,8 +6178,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "id",
@@ -5750,6 +6208,13 @@
               "default": null,
               "description": "The field name the value is sent under in a form."
             },
+            {
+              "name": "onInputValueChange",
+              "type": "((draft: string) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called with the text typed but not added as a tag yet, so a form can count it before it is added."
+            },
             {
               "name": "onValueChange",
               "type": "((value: string[]) => void)",
@@ -5783,14 +6248,14 @@
               "type": "string[]",
               "required": false,
               "default": null,
-              "description": "Characters that end a tag, besides Enter."
+              "description": "Characters that end a tag, besides Enter; pasted text also splits at line breaks and tabs."
             },
             {
               "name": "validate",
               "type": "((tag: string) => string | true)",
               "required": false,
               "default": null,
-              "description": "Return true for a valid tag, or a message saying what is wrong. Invalid tags stay, marked with a danger ring, and show the message as their tooltip (and to a screen reader); errors are never drawn under the field, so toast it too when someone submits."
+              "description": "Return true for a valid tag, or a message saying what is wrong. Invalid tags stay, marked with a danger ring, and show the message as their tooltip; the first one also shows under the field."
             },
             {
               "name": "value",
@@ -5825,8 +6290,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "invalid",
@@ -5969,9 +6433,30 @@
       "kind": "components",
       "import": "@logicplanes/kaeso-ui/kaeso",
       "components": [
+        {
+          "name": "CapabilityIcons",
+          "description": "A model's capabilities as small icons, each named in a tooltip and read as one list by screen readers.",
+          "props": [
+            {
+              "name": "capabilities",
+              "type": "Capability[]",
+              "required": false,
+              "default": "[]",
+              "description": "The capabilities: tools, reasoning, vision, pdf, structuredOutput."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
+            }
+          ],
+          "file": "src/components/kaeso/identity.tsx"
+        },
         {
           "name": "ConversationView",
-          "description": "A model conversation from a request log: role captions, prose, tool calls and results, reasoning, images, refusals.",
+          "description": "A model conversation from a request log: role captions, prose, tool calls and results, reasoning, images, refusals. Inline images show; remote ones are links, so viewing a log never fetches them.",
           "props": [
             {
               "name": "messages",
@@ -6126,6 +6611,13 @@
               "required": false,
               "default": "active",
               "description": "The key's state; disabled, expired and archived keys are shown dimmed."
+            },
+            {
+              "name": "stateBadge",
+              "type": "boolean",
+              "required": false,
+              "default": "true",
+              "description": "Shows the state's badge beside a key that isn't active (on by default); turn it off where a heading already names the state."
             }
           ],
           "file": "src/components/kaeso/identity.tsx"
@@ -6239,19 +6731,33 @@
               "default": null,
               "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
             },
+            {
+              "name": "mark",
+              "type": "boolean",
+              "required": false,
+              "default": "true",
+              "description": "Shows the provider's mark first (default); turn it off in a list grouped under each provider's mark."
+            },
             {
               "name": "name",
               "type": "string",
               "required": false,
               "default": null,
               "description": "The display name, first."
+            },
+            {
+              "name": "providerName",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The provider's name from the gateway's provider list, which names its mark for screen readers; the id without it."
             }
           ],
           "file": "src/components/kaeso/identity.tsx"
         },
         {
           "name": "ProviderBadge",
-          "description": "A provider's mark on a quiet tile, in the text color so it follows the theme; a letter for providers without one.",
+          "description": "A provider's mark on a quiet tile, in the provider's own one-colour version for the theme; for providers without one, the first letter of their name.",
           "props": [
             {
               "name": "provider",
@@ -6267,6 +6773,13 @@
               "default": null,
               "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
             },
+            {
+              "name": "name",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The provider's name from the gateway's provider list: the badge's accessible name, the text `withName` writes and the source of the letter; the id without it."
+            },
             {
               "name": "size",
               "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"",
@@ -6293,52 +6806,193 @@
               "type": "boolean",
               "required": true,
               "default": null,
-              "description": "Whether requests can reach the provider."
+              "description": "Whether requests can reach the provider."
+            },
+            {
+              "name": "provider",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The provider id, such as `openai` or `anthropic`."
+            },
+            {
+              "name": "status",
+              "type": "ReactNode",
+              "required": true,
+              "default": null,
+              "description": "Where the key comes from, or what's missing: \"The organization's key\", \"No key yet\"."
+            },
+            {
+              "name": "actions",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Buttons: one primary at most."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
+            },
+            {
+              "name": "detail",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "A line under the provider's name, such as how many keys it has."
+            },
+            {
+              "name": "keyLabel",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "The key: its name and last four characters, and when it was last used."
+            },
+            {
+              "name": "name",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The provider's name from the gateway's provider list, as the card's title; the id without it."
+            }
+          ],
+          "file": "src/components/kaeso/identity.tsx"
+        },
+        {
+          "name": "ProviderPicker",
+          "description": "Choosing a provider from any number of them: a search field over every provider, connected ones first with their key counts, then the rest from A to Z, each with its mark. Always open in a dialog step, or a pill that opens it in forms and toolbars.",
+          "props": [
+            {
+              "name": "providers",
+              "type": "ProviderPickerOption[]",
+              "required": true,
+              "default": null,
+              "description": "The providers: id, name, whether the organization has connected it, and a short hint such as its key count."
+            },
+            {
+              "name": "allLabel",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Select only: a first option for no provider in particular, such as \"All providers\"; choosing it reports `null`."
+            },
+            {
+              "name": "appearance",
+              "type": "\"list\" | \"select\"",
+              "required": false,
+              "default": null,
+              "description": "An always-open list for a dialog step, or a pill that opens it."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The accessible name, for when there is no visible label."
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "List only: focuses the search field when it appears."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
+            },
+            {
+              "name": "data-force",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`."
+            },
+            {
+              "name": "description",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "One sentence of help under the label."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Turns it off: it can't be used, and it looks dimmed."
+            },
+            {
+              "name": "error",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
+              "deprecated": true
+            },
+            {
+              "name": "label",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "The visible label."
+            },
+            {
+              "name": "layout",
+              "type": "\"horizontal\" | \"vertical\"",
+              "required": false,
+              "default": null,
+              "description": "The label above the control (`vertical`) or beside it (`horizontal`)."
             },
             {
-              "name": "provider",
-              "type": "string",
-              "required": true,
+              "name": "onValueChange",
+              "type": "((id: string | null) => void)",
+              "required": false,
               "default": null,
-              "description": "The provider id, such as `openai` or `anthropic`."
+              "description": "Called with the chosen provider's id, or `null` for `allLabel`."
             },
             {
-              "name": "status",
-              "type": "ReactNode",
-              "required": true,
+              "name": "optional",
+              "type": "boolean",
+              "required": false,
               "default": null,
-              "description": "Where the key comes from, or what's missing: \"The organization's key\", \"No key yet\"."
+              "description": "Adds “Optional” to the label, for forms where most fields are required."
             },
             {
-              "name": "actions",
-              "type": "ReactNode",
+              "name": "placeholder",
+              "type": "string",
               "required": false,
               "default": null,
-              "description": "Buttons: one primary at most."
+              "description": "The search field's placeholder; in a pill without `allLabel`, also the text shown while nothing is chosen."
             },
             {
-              "name": "className",
-              "type": "string",
+              "name": "required",
+              "type": "boolean",
               "required": false,
               "default": null,
-              "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
+              "description": "Marks it as required in a form."
             },
             {
-              "name": "detail",
-              "type": "ReactNode",
+              "name": "size",
+              "type": "\"md\" | \"sm\"",
               "required": false,
               "default": null,
-              "description": "A line under the provider's name, such as how many keys it has."
+              "description": "Select only: the height of the pill."
             },
             {
-              "name": "keyLabel",
-              "type": "ReactNode",
+              "name": "value",
+              "type": "string | null",
               "required": false,
               "default": null,
-              "description": "The key: its name and last four characters, and when it was last used."
+              "description": "The chosen provider's id, when you control it."
             }
           ],
-          "file": "src/components/kaeso/identity.tsx"
+          "file": "src/components/kaeso/provider-picker.tsx"
         },
         {
           "name": "RequestTimeline",
@@ -6622,7 +7276,7 @@
               "type": "Partial<Record<\"input\" | \"output\" | \"cacheRead\" | \"cacheWrite\" | \"reasoning\", number>>",
               "required": true,
               "default": null,
-              "description": "Tokens by kind: input, output, cache reads and writes, reasoning."
+              "description": "Tokens by kind: input, output, cache reads and writes, reasoning. A kind left out isn't listed, for kinds that can't apply, such as output for embeddings; pass 0 to list it."
             },
             {
               "name": "className",
@@ -6680,6 +7334,17 @@
             "secret": "md"
           }
         },
+        "PROVIDER_PICKER": {
+          "axes": {
+            "appearance": {
+              "list": "A search field over every provider, always open: a dialog step (default)",
+              "select": "A pill that opens the searchable list: forms and toolbars"
+            }
+          },
+          "defaults": {
+            "appearance": "list"
+          }
+        },
         "RIGHTS_MATRIX": {
           "axes": {
             "origin": {
@@ -6905,7 +7570,7 @@
           "props": [
             {
               "name": "align",
-              "type": "\"start\" | \"end\" | \"baseline\" | \"stretch\" | \"center\"",
+              "type": "\"start\" | \"end\" | \"center\" | \"baseline\" | \"stretch\"",
               "required": false,
               "default": "center",
               "description": "How items line up within their cells."
@@ -6940,7 +7605,7 @@
           "props": [
             {
               "name": "align",
-              "type": "\"start\" | \"end\" | \"baseline\" | \"stretch\" | \"center\"",
+              "type": "\"start\" | \"end\" | \"center\" | \"baseline\" | \"stretch\"",
               "required": false,
               "default": "center",
               "description": "How items line up across the row."
@@ -6982,7 +7647,7 @@
           "props": [
             {
               "name": "align",
-              "type": "\"start\" | \"end\" | \"baseline\" | \"stretch\" | \"center\"",
+              "type": "\"start\" | \"end\" | \"center\" | \"baseline\" | \"stretch\"",
               "required": false,
               "default": "center",
               "description": "How items line up across the column."
@@ -7313,6 +7978,13 @@
               "required": false,
               "default": "100",
               "description": "Virtualize above this many rows (100)."
+            },
+            {
+              "name": "wrapSubtitle",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "Lets a subtitle under its title wrap instead of ending with an ellipsis, for descriptions people read in full."
             }
           ],
           "file": "src/components/list/list.tsx"
@@ -7425,6 +8097,13 @@
               "required": false,
               "default": null,
               "description": "Shows checkboxes on every row while some are selected."
+            },
+            {
+              "name": "wrapSubtitle",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "Lets a subtitle under its title wrap. Set by `List`."
             }
           ],
           "file": "src/components/list/list.tsx"
@@ -8617,20 +9296,27 @@
         },
         {
           "name": "ModelPicker",
-          "description": "A model, picked from the project's catalogue: the provider mark, name and id (ModelLabel), grouped by provider.",
+          "description": "A model from a catalogue of any size: a pill showing the chosen model that opens a searchable list, grouped by provider under sticky captions with marks and counts, connected providers first and recent models on top, with a Provider filter that lists only the providers whose models match the search. Each row shows the name, the id, capabilities, context and price; deprecated models wait behind a toggle.",
           "props": [
             {
               "name": "options",
               "type": "ModelPickerOption[]",
               "required": true,
               "default": null,
-              "description": "The models to choose from."
+              "description": "The models: value, provider, id, name, capabilities, context window, a formatted price, a short note such as why it is disabled, and whether it is deprecated."
+            },
+            {
+              "name": "allLabel",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Single only: a first option for no model in particular, such as \"All models\"; choosing it reports an empty string."
             },
             {
               "name": "appearance",
               "type": "\"ghost\" | \"default\"",
               "required": false,
-              "default": "ghost",
+              "default": null,
               "description": "A quiet button (`ghost`) or a filled one (`default`)."
             },
             {
@@ -8656,10 +9342,17 @@
             },
             {
               "name": "defaultValue",
-              "type": "string | null",
+              "type": "string | string[] | null",
+              "required": false,
+              "default": null,
+              "description": "The chosen model, or models with `multiple`, on first render."
+            },
+            {
+              "name": "description",
+              "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "The chosen model on first render."
+              "description": "One sentence of help under the label."
             },
             {
               "name": "disabled",
@@ -8668,6 +9361,21 @@
               "default": null,
               "description": "Turns it off: it can't be used, and it looks dimmed."
             },
+            {
+              "name": "error",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
+              "deprecated": true
+            },
+            {
+              "name": "fullWidth",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Fills the container."
+            },
             {
               "name": "groupByProvider",
               "type": "boolean",
@@ -8675,12 +9383,61 @@
               "default": null,
               "description": "Groups the list by provider (true by default when there are several)."
             },
+            {
+              "name": "invalid",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Shows it as invalid; pair it with a message that says what to fix."
+            },
+            {
+              "name": "label",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "The visible label."
+            },
+            {
+              "name": "layout",
+              "type": "\"horizontal\" | \"vertical\"",
+              "required": false,
+              "default": null,
+              "description": "The label above the control (`vertical`) or beside it (`horizontal`)."
+            },
+            {
+              "name": "multiple",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Allows choosing several models; `value` is then a list."
+            },
+            {
+              "name": "onOpenChange",
+              "type": "((open: boolean) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called when the list opens or closes."
+            },
             {
               "name": "onValueChange",
-              "type": "((value: string) => void)",
+              "type": "((value: string) => void) | ((value: string[]) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called with the chosen model, or the list of models with `multiple`."
+            },
+            {
+              "name": "open",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Whether the list is open, when you control it."
+            },
+            {
+              "name": "optional",
+              "type": "boolean",
               "required": false,
               "default": null,
-              "description": "Called with the chosen model."
+              "description": "Adds “Optional” to the label, for forms where most fields are required."
             },
             {
               "name": "placeholder",
@@ -8689,19 +9446,40 @@
               "default": null,
               "description": "Text shown while there is no value."
             },
+            {
+              "name": "providers",
+              "type": "ModelPickerProvider[]",
+              "required": false,
+              "default": null,
+              "description": "The providers' names and whether each is connected; connected providers come first."
+            },
+            {
+              "name": "recent",
+              "type": "readonly string[]",
+              "required": false,
+              "default": null,
+              "description": "Values of recently used models, shown first while the search is empty."
+            },
+            {
+              "name": "required",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Marks it as required in a form."
+            },
             {
               "name": "size",
               "type": "\"md\" | \"sm\"",
               "required": false,
-              "default": "sm",
+              "default": null,
               "description": "The button's height."
             },
             {
               "name": "value",
-              "type": "string | null",
+              "type": "string | string[] | null",
               "required": false,
               "default": null,
-              "description": "The chosen model, when you control it."
+              "description": "The chosen model, or models with `multiple`, when you control it."
             }
           ],
           "file": "src/components/playground/model-picker.tsx"
@@ -8937,9 +9715,86 @@
           ],
           "file": "src/components/playground/prompt-suggestions.tsx"
         },
+        {
+          "name": "Reasoning",
+          "description": "A model's reasoning behind a quiet disclosure, closed by default: “Thought for 4.2 s” when it is done, “Thinking” with the latest line beside it while it streams. Opened, the reasoning reads in small secondary text beside a line. The Playground and the request log show reasoning with it.",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "What the open disclosure shows in place of `text`, such as why the reasoning can't be shown."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
+            },
+            {
+              "name": "defaultOpen",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Whether it starts open."
+            },
+            {
+              "name": "duration",
+              "type": "number",
+              "required": false,
+              "default": null,
+              "description": "How long the model reasoned, in milliseconds: “Thought for 4.2 s”."
+            },
+            {
+              "name": "hint",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "A short note beside the title, such as “Redacted by the provider”; while `live`, the latest line of the reasoning shows there instead."
+            },
+            {
+              "name": "live",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "The reasoning is still arriving: “Thinking” pulses quietly and its latest line shows beside it."
+            },
+            {
+              "name": "onOpenChange",
+              "type": "((open: boolean) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called when it opens or closes."
+            },
+            {
+              "name": "open",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Whether it is open, when you control it."
+            },
+            {
+              "name": "text",
+              "type": "string",
+              "required": false,
+              "default": "",
+              "description": "The reasoning, as Markdown."
+            },
+            {
+              "name": "title",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "The title in place of “Thinking” or “Thought for …”, such as “Reasoning” in a request log."
+            }
+          ],
+          "file": "src/components/playground/reasoning.tsx"
+        },
         {
           "name": "ResponseMetrics",
-          "description": "A response's numbers on one line: time to first token, total time, tokens in → out (and reasoning), cost. Tabular figures, labels in tertiary text. While `live`, values not known yet show \"—\" in the room they will take; before any response the line is empty, its height kept.",
+          "description": "A response's numbers on one line: time to first token, total time, tokens (\"412 in · 168 out\", and reasoning), cost to the millionth of a dollar, as request logs show it. Tabular figures, labels in tertiary text. While `live`, values not known yet show \"—\" in the room they will take; before any response the line is empty, its height kept.",
           "props": [
             {
               "name": "className",
@@ -8953,7 +9808,7 @@
               "type": "string | null",
               "required": false,
               "default": null,
-              "description": "USD as a decimal string: \"0.004213\"."
+              "description": "USD as a decimal string: \"0.004213\" reads \"$0.004213\", and zero reads \"$0\"."
             },
             {
               "name": "duration",
@@ -9023,7 +9878,7 @@
         },
         {
           "name": "ResponseView",
-          "description": "A model's response as it arrives: Markdown text for reading (15/22), the reasoning summary in a \"Thinking\" disclosure (closed by default, live while it streams), and calm states for a stop or a failure. Errors themselves are toasts; the response says only that there is none.",
+          "description": "A model's response as it arrives: Markdown text for reading (15/22), the reasoning summary in a \"Thinking\" disclosure (closed by default, live while it streams), and calm states for a stop, a cut-off reply or a failure, which shows its error in place.",
           "props": [
             {
               "name": "aria-label",
@@ -9046,6 +9901,13 @@
               "default": null,
               "description": "Whether the reasoning starts expanded."
             },
+            {
+              "name": "error",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Why the reply failed, shown under \"No response\" with status \"error\": the gateway's message in the reader's language; `code` spans render as code."
+            },
             {
               "name": "footer",
               "type": "ReactNode",
@@ -9053,6 +9915,13 @@
               "default": null,
               "description": "Under the response: its metrics, actions."
             },
+            {
+              "name": "incompleteReason",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Why the model cut the reply off, with status \"incomplete\": `max_output_tokens` reads \"Stopped at the output limit\", `content_filter` names the filter."
+            },
             {
               "name": "onReasoningOpenChange",
               "type": "((open: boolean) => void)",
@@ -9065,7 +9934,7 @@
               "type": "(() => void)",
               "required": false,
               "default": null,
-              "description": "Sends the turn again; shown with an error or a stop."
+              "description": "Sends the turn again; shown with an error, a stop or a cut-off reply."
             },
             {
               "name": "reasoning",
@@ -9090,10 +9959,10 @@
             },
             {
               "name": "status",
-              "type": "\"done\" | \"error\" | \"streaming\" | \"pending\" | \"stopped\"",
+              "type": "\"done\" | \"error\" | \"streaming\" | \"pending\" | \"stopped\" | \"incomplete\"",
               "required": false,
               "default": "done",
-              "description": "Where the reply stands: waiting, streaming, done, stopped or failed."
+              "description": "Where the reply stands: waiting, streaming, done, stopped, cut off by the model (incomplete) or failed."
             },
             {
               "name": "text",
@@ -9218,6 +10087,17 @@
             "align": "start"
           }
         },
+        "REASONING": {
+          "axes": {
+            "state": {
+              "done": "Finished: “Thought for 4.2 s”, closed until opened (default)",
+              "live": "Still reasoning: “Thinking” pulses quietly and the latest line shows beside it"
+            }
+          },
+          "defaults": {
+            "state": "done"
+          }
+        },
         "RESPONSE_METRICS": {
           "axes": {
             "size": {
@@ -9236,7 +10116,8 @@
               "streaming": "Arriving: the text grows, earlier lines never re-wrap; Thinking is live",
               "done": "Complete (default)",
               "stopped": "Stopped by the person: the text so far and “Stopped”",
-              "error": "Failed: “No response” and Retry. The error itself is a toast"
+              "incomplete": "Cut off by the model: the text so far and why, such as “Stopped at the output limit”",
+              "error": "Failed: the error in place of the response, and Retry"
             }
           },
           "defaults": {
@@ -9697,14 +10578,14 @@
               "type": "string",
               "required": true,
               "default": null,
-              "description": "What the picture shows, read by screen readers: \"Kaeso 0.3.0\"."
+              "description": "What the picture shows, read by screen readers: \"Kaeso 0.1.0\"."
             },
             {
               "name": "seed",
               "type": "string",
               "required": true,
               "default": null,
-              "description": "What the artwork is drawn from when there is no `art`, e.g. `0.3.0`; the same seed always draws the same picture."
+              "description": "What the artwork is drawn from when there is no `art`, e.g. `0.1.0`; the same seed always draws the same picture."
             },
             {
               "name": "art",
@@ -9734,6 +10615,13 @@
               "default": "banner",
               "description": "The artwork's aspect ratio."
             },
+            {
+              "name": "src",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "An image of the release's stored artwork, e.g. `https://update.kaeso.app/art/0.1.0.svg`, shown in the frame instead of the drawn picture, which takes its place if the image doesn't load."
+            },
             {
               "name": "title",
               "type": "ReactNode",
@@ -10211,8 +11099,7 @@
               "type": "ReactNode",
               "required": false,
               "default": null,
-              "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.",
-              "deprecated": true
+              "description": "The error message, shown under the control in the danger color; it marks the control invalid and is read out with its description."
             },
             {
               "name": "fullWidth",
@@ -10586,7 +11473,7 @@
       "components": [
         {
           "name": "Sheet",
-          "description": "A panel that slides in from the edge of the screen, for details and longer forms.",
+          "description": "A panel that slides in from the edge of the screen, for details and longer forms. While it slides out it keeps showing what it showed when it was open, so a page can let go of the row as soon as it closes.",
           "props": [
             {
               "name": "children",
@@ -11098,6 +11985,13 @@
               "default": null,
               "description": "A quiet line under the number: \"vs. the previous 30 days\", \"0.4% of requests\"."
             },
+            {
+              "name": "loading",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "While the numbers load: the value, the change and the trend show their shape at the tile's final height."
+            },
             {
               "name": "trend",
               "type": "number[]",