@logicplanes/kaeso-ui 0.4.1 → 0.4.3

package/ai/component-registry.json

@@ -1,7 +1,121 @@
 {
   "package": "@logicplanes/kaeso-ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "components": [
+    {
+      "entry": "agent-avatar",
+      "kind": "components",
+      "import": "@logicplanes/kaeso-ui/agent-avatar",
+      "components": [
+        {
+          "name": "AgentAttribution",
+          "description": "A person's avatar with the agent that acted for them as a small badge on its corner, for audit rows and activity; it reads as one picture named after both. The badge stays inside the avatar's square, so a table cell never cuts it off.",
+          "props": [
+            {
+              "name": "agent",
+              "type": "{ name: string; model: string; }",
+              "required": true,
+              "default": null,
+              "description": "The agent that acted, with its name and model family id from the API; the family is named in the accessible name only."
+            },
+            {
+              "name": "name",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The name of the person the agent acted for; it starts the accessible name, such as `Ada Okafor via Release helper (Claude)`."
+            },
+            {
+              "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": "size",
+              "type": "24 | 20 | 28 | 32 | 40",
+              "required": false,
+              "default": "24",
+              "description": "The diameter of the person's avatar in pixels; the agent badge is half of it."
+            },
+            {
+              "name": "src",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The person's picture; without one, or when it fails to load, their initials show."
+            }
+          ],
+          "file": "src/components/agent-avatar/agent-avatar.tsx"
+        },
+        {
+          "name": "AgentAvatar",
+          "description": "An agent acting for a person: one bot face on an ink square, the same for every agent; write its model family beside it with useModelName where it matters.",
+          "props": [
+            {
+              "name": "name",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The agent's name, such as `Release helper`; it is the accessible name."
+            },
+            {
+              "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": "decorative",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Hides it from assistive technology when the agent's name is already written next to it."
+            },
+            {
+              "name": "size",
+              "type": "24 | 20 | 28 | 32 | 40",
+              "required": false,
+              "default": "24",
+              "description": "The side of the square in pixels, on the same scale as `Avatar`."
+            }
+          ],
+          "file": "src/components/agent-avatar/agent-avatar.tsx"
+        }
+      ],
+      "variants": {
+        "AGENT_ATTRIBUTION": {
+          "axes": {
+            "size": {
+              "20": "20px person, 10px agent badge",
+              "24": "24px person, 12px agent badge (default)",
+              "28": "28px person, 14px agent badge",
+              "32": "32px person, 16px agent badge",
+              "40": "40px person, 20px agent badge"
+            }
+          },
+          "defaults": {
+            "size": "24"
+          }
+        },
+        "AGENT_AVATAR": {
+          "axes": {
+            "size": {
+              "20": "20px",
+              "24": "24px: rows and lists (default)",
+              "28": "28px",
+              "32": "32px",
+              "40": "40px: an agent's own page, menus"
+            }
+          },
+          "defaults": {
+            "size": "24"
+          }
+        }
+      }
+    },
     {
       "entry": "app-frame",
       "kind": "components",
@@ -696,7 +810,7 @@
             },
             {
               "name": "weekStartsOn",
-              "type": "0 | 4 | 1 | 2 | 3 | 5 | 6",
+              "type": "0 | 2 | 3 | 4 | 1 | 5 | 6",
               "required": false,
               "default": "1",
               "description": "0 = Sunday, 1 = Monday (default)."
@@ -2115,6 +2229,10 @@
           "defaults": {
             "size": "md"
           }
+        },
+        "CHECKBOX_GROUP": {
+          "axes": {},
+          "defaults": {}
         }
       }
     },
@@ -2261,10 +2379,10 @@
             },
             {
               "name": "wrap",
-              "type": "boolean",
+              "type": "boolean | \"phone\"",
               "required": false,
               "default": "false",
-              "description": "Long lines wrap instead of scrolling sideways: code in a narrow column (a model's response)."
+              "description": "Long lines wrap instead of scrolling sideways: code in a narrow column (a model's response). `phone` wraps them only below 640px, with wrapped parts indented, and scrolls from there up."
             }
           ],
           "file": "src/components/code-block/code-block.tsx"
@@ -2359,10 +2477,10 @@
             },
             {
               "name": "wrap",
-              "type": "boolean",
+              "type": "boolean | \"phone\"",
               "required": false,
               "default": "false",
-              "description": "Long lines wrap instead of scrolling sideways: code in a narrow column (a model's response)."
+              "description": "Long lines wrap instead of scrolling sideways: code in a narrow column (a model's response). `phone` wraps them only below 640px, with wrapped parts indented, and scrolls from there up."
             }
           ],
           "file": "src/components/code-block/code-block.tsx"
@@ -2903,6 +3021,19 @@
         }
       ],
       "variants": {
+        "AUTOCOMPLETE": {
+          "axes": {
+            "size": {
+              "sm": "32px",
+              "md": "36px (default)",
+              "lg": "40px",
+              "xl": "48px"
+            }
+          },
+          "defaults": {
+            "size": "md"
+          }
+        },
         "COMBOBOX": {
           "axes": {
             "size": {
@@ -2955,6 +3086,13 @@
               "default": null,
               "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
             },
+            {
+              "name": "counts",
+              "type": "boolean",
+              "required": false,
+              "default": "true",
+              "description": "Shows each group's count beside its caption; false leaves them out, for a site whose house style has no result counters."
+            },
             {
               "name": "data-force",
               "type": "string",
@@ -3266,6 +3404,13 @@
               "default": null,
               "description": "The commands, in groups with a heading each."
             },
+            {
+              "name": "counts",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Shows each group's count beside its caption; false leaves them out, for a site whose house style has no result counters."
+            },
             {
               "name": "defaultQuery",
               "type": "string",
@@ -3563,6 +3708,13 @@
               "default": null,
               "description": "The id of a row to show as active (open in a sheet)."
             },
+            {
+              "name": "canSelectRow",
+              "type": "((row: T) => boolean)",
+              "required": false,
+              "default": null,
+              "description": "Whether a row can be selected; a row that can't keeps a disabled checkbox, and select all skips it."
+            },
             {
               "name": "className",
               "type": "string",
@@ -3880,7 +4032,7 @@
             },
             {
               "name": "weekStartsOn",
-              "type": "0 | 4 | 1 | 2 | 3 | 5 | 6",
+              "type": "0 | 2 | 3 | 4 | 1 | 5 | 6",
               "required": false,
               "default": null,
               "description": "The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default."
@@ -4034,7 +4186,7 @@
             },
             {
               "name": "weekStartsOn",
-              "type": "0 | 4 | 1 | 2 | 3 | 5 | 6",
+              "type": "0 | 2 | 3 | 4 | 1 | 5 | 6",
               "required": false,
               "default": null,
               "description": "The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default."
@@ -4450,6 +4602,13 @@
               "default": null,
               "description": "Right-aligned actions: Cancel (secondary) then the primary."
             },
+            {
+              "name": "footerStart",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "A quiet action at the footer's start, such as a link to another way of doing the task."
+            },
             {
               "name": "headerStart",
               "type": "ReactNode",
@@ -4506,6 +4665,13 @@
               "default": null,
               "description": "The dialog's width."
             },
+            {
+              "name": "toolbar",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Controls that stay under the title while the body scrolls, such as a search over the list below; a hairline shows once the body is scrolled."
+            },
             {
               "name": "trigger",
               "type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
@@ -4546,7 +4712,7 @@
               "type": "DialogLayer[]",
               "required": true,
               "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."
+              "description": "The layers, each with its title, content and footer, and optionally a toolbar and a footer start; one shows at a time, and the ones below it stay mounted and hidden."
             },
             {
               "name": "anchor",
@@ -4651,7 +4817,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 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.",
+          "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. Inside a step, `useStepDialog()?.advance()` continues as Continue would, once the step is no longer blocked: a choice that answers the step, like a provider tile, moves on in one press.",
           "props": [
             {
               "name": "onSubmit",
@@ -4665,7 +4831,7 @@
               "type": "DialogStep[]",
               "required": true,
               "default": null,
-              "description": "The steps, each with its title, content and whether it can be continued."
+              "description": "The steps, each with its title, content and whether it can be continued; `onContinue` checks a step before the next opens, such as asking a server, and `continueLabel` names that check: \"Detect settings\"."
             },
             {
               "name": "submitLabel",
@@ -4771,6 +4937,10 @@
             "anchor": "center"
           }
         },
+        "DIALOG_SCOPE": {
+          "axes": {},
+          "defaults": {}
+        },
         "LAYER_DIALOG": {
           "axes": {
             "size": {
@@ -4787,6 +4957,23 @@
             "size": "md",
             "anchor": "center"
           }
+        },
+        "STEP_DIALOG": {
+          "axes": {
+            "size": {
+              "sm": "440px: most tasks in a few steps (default)",
+              "md": "560px: steps with longer forms",
+              "lg": "720px: steps with two columns or previews"
+            },
+            "tone": {
+              "default": "The last step's button is primary (default)",
+              "danger": "The last step's button is a danger button, for a task that ends in deletion"
+            }
+          },
+          "defaults": {
+            "size": "sm",
+            "tone": "default"
+          }
         }
       }
     },
@@ -5026,6 +5213,75 @@
         }
       }
     },
+    {
+      "entry": "figure",
+      "kind": "components",
+      "import": "@logicplanes/kaeso-ui/figure",
+      "components": [
+        {
+          "name": "Figure",
+          "description": "A diagram or image set apart from the text: centred on a well, with a caption, scrolling sideways only when it can't shrink to fit.",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": true,
+              "default": null,
+              "description": "What the figure shows, usually a ThemeImage."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The name of the figure's scrolling region, read by screen readers."
+            },
+            {
+              "name": "caption",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "A few words under the figure that say what it shows, such as a diagram's title."
+            },
+            {
+              "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": "focus",
+              "type": "number",
+              "required": false,
+              "default": "0.5",
+              "description": "Where a figure wider than its column starts, as a share of its width: 0.5, the middle, by default."
+            },
+            {
+              "name": "surface",
+              "type": "\"well\" | \"plain\"",
+              "required": false,
+              "default": "well",
+              "description": "The figure's background: a well like a code block's, or none."
+            }
+          ],
+          "file": "src/components/figure/figure.tsx"
+        }
+      ],
+      "variants": {
+        "FIGURE": {
+          "axes": {
+            "surface": {
+              "well": "A well like a code block's: radius 14, fill, no ring (default)",
+              "plain": "No surface, for a figure that brings its own"
+            }
+          },
+          "defaults": {
+            "surface": "well"
+          }
+        }
+      }
+    },
     {
       "entry": "filter-chip",
       "kind": "components",
@@ -5320,7 +5576,7 @@
             },
             {
               "name": "level",
-              "type": "4 | 1 | 2 | 3 | 5 | 6",
+              "type": "2 | 3 | 4 | 1 | 5 | 6",
               "required": false,
               "default": null,
               "description": "The heading level in the document, independent of its size."
@@ -6401,6 +6657,19 @@
             "size": "md"
           }
         },
+        "SEARCH_INPUT": {
+          "axes": {
+            "size": {
+              "sm": "32px: toolbars (default)",
+              "md": "36px: a search at the top of a page or dialog",
+              "lg": "40px",
+              "xl": "48px"
+            }
+          },
+          "defaults": {
+            "size": "sm"
+          }
+        },
         "SENSITIVE_INPUT": {
           "axes": {
             "kind": {
@@ -6461,6 +6730,41 @@
           ],
           "file": "src/components/kaeso/identity.tsx"
         },
+        {
+          "name": "ClientButton",
+          "description": "An agent client's mark, such as Claude, Cursor or GitHub Copilot, on a raised tile, as a button that opens how to connect it.",
+          "props": [
+            {
+              "name": "aria-label",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The client's name; also the tooltip."
+            },
+            {
+              "name": "client",
+              "type": "\"cursor\" | \"claude\" | \"github-copilot\"",
+              "required": true,
+              "default": null,
+              "description": "Which client's mark it shows."
+            },
+            {
+              "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": "onClick",
+              "type": "(() => void)",
+              "required": false,
+              "default": null,
+              "description": "Opens how to connect the client."
+            }
+          ],
+          "file": "src/components/kaeso/client-button.tsx"
+        },
         {
           "name": "ConversationView",
           "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.",
@@ -6580,6 +6884,48 @@
           ],
           "file": "src/components/kaeso/moments.tsx"
         },
+        {
+          "name": "GrantSummary",
+          "description": "What an agent or a key may do, one short line each after a check mark, on a group surface.",
+          "props": [
+            {
+              "name": "aria-label",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The list's accessible name (\"What it can do\")."
+            },
+            {
+              "name": "items",
+              "type": "readonly ReactNode[]",
+              "required": true,
+              "default": null,
+              "description": "The lines, short and without a final period."
+            },
+            {
+              "name": "action",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "A small button after the note, such as Customize."
+            },
+            {
+              "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": "footer",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "A quiet note under the lines, such as how long it lasts."
+            }
+          ],
+          "file": "src/components/kaeso/grant-summary.tsx"
+        },
         {
           "name": "KeyDisplay",
           "description": "A redacted key: mono 13 with its state dot, copy of the redacted form, and its access.",
@@ -6887,10 +7233,10 @@
             },
             {
               "name": "appearance",
-              "type": "\"list\" | \"select\"",
+              "type": "\"list\" | \"grid\" | \"select\"",
               "required": false,
               "default": null,
-              "description": "An always-open list for a dialog step, or a pill that opens it."
+              "description": "An always-open list for a dialog step, tiles with each provider's mark for a dialog's first step, or a pill that opens the list."
             },
             {
               "name": "aria-label",
@@ -6956,6 +7302,13 @@
               "default": null,
               "description": "The label above the control (`vertical`) or beside it (`horizontal`)."
             },
+            {
+              "name": "onChoose",
+              "type": "((id: string) => void)",
+              "required": false,
+              "default": null,
+              "description": "With `grid`: called when a tile is pressed or clicked, not when the arrow keys move the choice, so a dialog step can continue at once."
+            },
             {
               "name": "onValueChange",
               "type": "((id: string | null) => void)",
@@ -7297,6 +7650,10 @@
         }
       ],
       "variants": {
+        "CLIENT_BUTTON": {
+          "axes": {},
+          "defaults": {}
+        },
         "CONVERSATION": {
           "axes": {
             "density": {
@@ -7318,6 +7675,10 @@
             "layout": "rows"
           }
         },
+        "GRANT_SUMMARY": {
+          "axes": {},
+          "defaults": {}
+        },
         "IDENTITY": {
           "axes": {
             "provider": {
@@ -7331,6 +7692,10 @@
             "provider": "md"
           }
         },
+        "KEY_DISPLAY": {
+          "axes": {},
+          "defaults": {}
+        },
         "MOMENTS": {
           "axes": {
             "secret": {
@@ -7345,7 +7710,8 @@
           "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"
+              "select": "A pill that opens the searchable list: forms and toolbars",
+              "grid": "Tiles with each provider's mark, connected ones first: the first step of a dialog"
             }
           },
           "defaults": {
@@ -7381,6 +7747,10 @@
             "appearance": "list"
           }
         },
+        "USAGE_BREAKDOWN": {
+          "axes": {},
+          "defaults": {}
+        },
         "USAGE": {
           "axes": {
             "limit": {
@@ -7481,7 +7851,7 @@
             },
             {
               "name": "columns",
-              "type": "4 | 2 | 3",
+              "type": "2 | 3 | 4",
               "required": false,
               "default": "2",
               "description": "The grid layout's items to a row, from 480px of its container's width."
@@ -7591,14 +7961,14 @@
             },
             {
               "name": "columns",
-              "type": "4 | 1 | 2 | 3 | 6",
+              "type": "2 | 3 | 4 | 1 | 6",
               "required": false,
               "default": "2",
               "description": "The number of columns."
             },
             {
               "name": "gap",
-              "type": "0 | 24 | 20 | 32 | 40 | 4 | 2 | 6 | 8 | 12 | 16 | 48 | 64",
+              "type": "0 | 2 | 24 | 20 | 32 | 40 | 4 | 6 | 8 | 12 | 16 | 48 | 64",
               "required": false,
               "default": "16",
               "description": "The space between items, in pixels on the spacing scale."
@@ -7626,7 +7996,7 @@
             },
             {
               "name": "gap",
-              "type": "0 | 24 | 20 | 32 | 40 | 4 | 2 | 6 | 8 | 12 | 16 | 48 | 64",
+              "type": "0 | 2 | 24 | 20 | 32 | 40 | 4 | 6 | 8 | 12 | 16 | 48 | 64",
               "required": false,
               "default": "16",
               "description": "The space between items, in pixels on the spacing scale."
@@ -7668,7 +8038,7 @@
             },
             {
               "name": "gap",
-              "type": "0 | 24 | 20 | 32 | 40 | 4 | 2 | 6 | 8 | 12 | 16 | 48 | 64",
+              "type": "0 | 2 | 24 | 20 | 32 | 40 | 4 | 6 | 8 | 12 | 16 | 48 | 64",
               "required": false,
               "default": "16",
               "description": "The space between items, in pixels on the spacing scale."
@@ -8401,7 +8771,7 @@
             },
             {
               "name": "headingLevel",
-              "type": "4 | 1 | 2 | 3 | 5 | 6",
+              "type": "2 | 3 | 4 | 1 | 5 | 6",
               "required": false,
               "default": "3",
               "description": "The heading level `#` becomes (3 by default: below a page's and a section's own headings)."
@@ -8472,7 +8842,7 @@
       "components": [
         {
           "name": "ContextMenu",
-          "description": "A dropdown menu: 16px radius, 34px rows, typeahead, Home/End, loops.",
+          "description": "The same menu, opened by a right click, a long press or the context-menu key on the area it wraps.",
           "props": [
             {
               "name": "children",
@@ -8481,6 +8851,27 @@
               "default": null,
               "description": "The area that opens the menu on a right click or long press."
             },
+            {
+              "name": "onOpenChange",
+              "type": "((open: boolean) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called when it opens or closes."
+            }
+          ],
+          "file": "src/components/menu/menu.tsx"
+        },
+        {
+          "name": "Menu",
+          "description": "A dropdown menu: 16px radius, 34px rows, typeahead, Home/End, loops.",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": true,
+              "default": null,
+              "description": "The trigger and the menu's content."
+            },
             {
               "name": "defaultOpen",
               "type": "boolean",
@@ -8524,17 +8915,32 @@
               "description": "The menus."
             },
             {
-              "name": "onOpenChange",
-              "type": "((o: boolean) => void)",
+              "name": "aria-label",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The accessible name, for when there is no visible label."
+            },
+            {
+              "name": "className",
+              "type": "string",
               "required": false,
               "default": null,
-              "description": "Called when a menu opens or closes."
+              "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
             }
           ],
           "file": "src/components/menu/menu.tsx"
         }
       ],
       "variants": {
+        "CONTEXT_MENU": {
+          "axes": {},
+          "defaults": {}
+        },
+        "MENUBAR": {
+          "axes": {},
+          "defaults": {}
+        },
         "MENU": {
           "axes": {
             "item": {
@@ -10029,7 +10435,7 @@
             },
             {
               "name": "maxLines",
-              "type": "0 | 4 | 2 | 3 | 6",
+              "type": "0 | 2 | 3 | 4 | 6",
               "required": false,
               "default": "4",
               "description": "Lines shown before \"Show all\" (4 by default; 0 shows everything)."
@@ -10217,6 +10623,10 @@
         }
       ],
       "variants": {
+        "HOVER_CARD": {
+          "axes": {},
+          "defaults": {}
+        },
         "POPOVER": {
           "axes": {
             "padding": {
@@ -10555,6 +10965,90 @@
             }
           ],
           "file": "src/components/radio/radio.tsx"
+        },
+        {
+          "name": "RadioGroup",
+          "description": "The group a set of radios belongs to: one of them is chosen, and the arrow keys move between them.",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": true,
+              "default": null,
+              "description": "The radios, one per option."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The accessible name, for when there is no visible label."
+            },
+            {
+              "name": "aria-labelledby",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The id of the element that names it, when its label is elsewhere on the page."
+            },
+            {
+              "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": "defaultValue",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The chosen option on first render."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "required": false,
+              "default": null,
+              "description": "Turns off every radio."
+            },
+            {
+              "name": "name",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The field name the value is sent under in a form."
+            },
+            {
+              "name": "onValueChange",
+              "type": "((value: string) => void)",
+              "required": false,
+              "default": null,
+              "description": "Called with the chosen option."
+            },
+            {
+              "name": "orientation",
+              "type": "\"horizontal\" | \"vertical\"",
+              "required": false,
+              "default": "vertical",
+              "description": "Lays the items out in a row (`horizontal`) or a column (`vertical`)."
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The chosen option, when you control it."
+            },
+            {
+              "name": "variant",
+              "type": "\"default\" | \"cards\"",
+              "required": false,
+              "default": "default",
+              "description": "A plain list of radios, or rows inside a settings group with the radio at the end (`cards`)."
+            }
+          ],
+          "file": "src/components/radio/radio.tsx"
         }
       ],
       "variants": {
@@ -11470,6 +11964,10 @@
           "defaults": {
             "row": "default"
           }
+        },
+        "SETTINGS_SECTION": {
+          "axes": {},
+          "defaults": {}
         }
       }
     },
@@ -12374,7 +12872,15 @@
         {
           "name": "Table",
           "description": "A plain table for small amounts of data; use `DataTable` for sorting, selection and many rows.",
-          "props": [],
+          "props": [
+            {
+              "name": "density",
+              "type": "\"default\" | \"compact\"",
+              "required": false,
+              "default": "default",
+              "description": "12px between columns (`default`), or 8px (`compact`) for reference tables of five or more columns."
+            }
+          ],
           "file": "src/components/table/table.tsx"
         }
       ],
@@ -12384,10 +12890,15 @@
             "align": {
               "start": "Text (default)",
               "end": "Numbers"
+            },
+            "density": {
+              "default": "12px between columns (default)",
+              "compact": "8px between columns, for reference tables of five or more columns"
             }
           },
           "defaults": {
-            "align": "start"
+            "align": "start",
+            "density": "default"
           }
         }
       }
@@ -12497,6 +13008,17 @@
         }
       ],
       "variants": {
+        "PILL_TABS": {
+          "axes": {
+            "variant": {
+              "underline": "Underline tabs for detail pages: 40px, a 2px ink indicator that slides",
+              "pill": "Header tabs: separate 32px pills, the active one filled"
+            }
+          },
+          "defaults": {
+            "variant": "pill"
+          }
+        },
         "TABS": {
           "axes": {
             "variant": {
@@ -12743,7 +13265,7 @@
             },
             {
               "name": "variant",
-              "type": "\"title\" | \"display\" | \"title-sm\" | \"title-lg\" | \"body\" | \"caption\" | \"small\" | \"micro\" | \"body-lg\" | \"metric\"",
+              "type": "\"title\" | \"display\" | \"caption\" | \"title-sm\" | \"title-lg\" | \"body\" | \"small\" | \"micro\" | \"body-lg\" | \"metric\"",
               "required": false,
               "default": "body",
               "description": "The type style, from `micro` to `display`."
@@ -12880,6 +13402,27 @@
           "name": "ThemeMenu",
           "description": "System, light or dark, stored as `kaeso:theme`.",
           "props": [
+            {
+              "name": "align",
+              "type": "\"start\" | \"end\"",
+              "required": false,
+              "default": "end",
+              "description": "Which edge of the button the menu lines up with: its end (`end`) or its start (`start`), for a button at the left edge."
+            },
+            {
+              "name": "data-force",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`."
+            },
+            {
+              "name": "side",
+              "type": "\"top\" | \"bottom\"",
+              "required": false,
+              "default": "bottom",
+              "description": "Where the menu opens: below the button (`bottom`), or above it (`top`) when the button sits at the foot of a sidebar."
+            },
             {
               "name": "size",
               "type": "\"md\" | \"sm\"",
@@ -12979,6 +13522,62 @@
         }
       }
     },
+    {
+      "entry": "thumbnail",
+      "kind": "components",
+      "import": "@logicplanes/kaeso-ui/thumbnail",
+      "components": [
+        {
+          "name": "Thumbnail",
+          "description": "A square image someone sent, such as a photo in a conversation: cropped to fill, on a well with radius 14; when it can't load, its text alternative shows instead.",
+          "props": [
+            {
+              "name": "alt",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "What the image shows, read by screen readers and shown in its place when it can't load."
+            },
+            {
+              "name": "src",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "The image's address, including a data: URL."
+            },
+            {
+              "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": "size",
+              "type": "\"md\" | \"sm\" | \"lg\"",
+              "required": false,
+              "default": "md",
+              "description": "The width and height: 64, 120 or 160 pixels."
+            }
+          ],
+          "file": "src/components/thumbnail/thumbnail.tsx"
+        }
+      ],
+      "variants": {
+        "THUMBNAIL": {
+          "axes": {
+            "size": {
+              "sm": "64px: a row or a compact list",
+              "md": "120px: an image inside a message (default)",
+              "lg": "160px: an image a page is about"
+            }
+          },
+          "defaults": {
+            "size": "md"
+          }
+        }
+      }
+    },
     {
       "entry": "timeline",
       "kind": "components",
@@ -13036,14 +13635,14 @@
               "name": "limit",
               "type": "number",
               "required": false,
-              "default": null,
+              "default": "3",
               "description": "How many toasts show at once."
             },
             {
               "name": "timeout",
               "type": "number",
               "required": false,
-              "default": null,
+              "default": "5000",
               "description": "How long a toast stays, in milliseconds."
             }
           ],
@@ -13296,7 +13895,7 @@
               "name": "shape",
               "type": "\"pill\" | \"multiline\"",
               "required": false,
-              "default": null,
+              "default": "pill",
               "description": "A pill for a short label, or a box for several lines."
             },
             {