@logicplanes/kaeso-ui 0.4.0 → 0.4.2

package/ai/component-guides.md

@@ -1,6 +1,6 @@
 # @logicplanes/kaeso-ui component guides
 
-Version 0.4.0. Generated from the showcase's demo modules (apps/showcase/src/demos); do not edit. For each component: what it is for, its import, keyboard, accessibility, do and don't, and every example's code. Props and variants: `component-registry.md`.
+Version 0.4.2. Generated from the showcase's demo modules (apps/showcase/src/demos); do not edit. For each component: what it is for, its import, keyboard, accessibility, do and don't, and every example's code. Props and variants: `component-registry.md`.
 
 ## AlertDialog
 
@@ -1735,6 +1735,27 @@ A label, a control and its help, wired together; an error shows under the contro
 </div>
 ```
 
+## Figure
+
+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.
+
+`import { Figure } from "@logicplanes/kaeso-ui";`
+
+### Accessibility
+
+- The caption names the figure; the label names the region that scrolls, so keyboard users know what they scroll.
+- Put a diagram's longer description in a visually hidden element and point the image's aria-describedby at it.
+
+### Examples
+
+#### A diagram with its caption
+
+```tsx
+<Figure label="Diagram: route of a request" caption="Route of a request" className="w-full">
+  <ThemeImage light="/demos/route.light.svg" dark="/demos/route.dark.svg" alt="Route of a request: app, Kaeso, provider" width={364} height={49} />
+</Figure>
+```
+
 ## FilterChip
 
 A filter as one pill, “Status is 2xx”: property, operator and value, each opening a menu.
@@ -4655,6 +4676,35 @@ Long text and links wrap like prose; the row grows and keeps its padding, and on
 </Table>
 ```
 
+#### Compact
+
+A reference table of five or more columns puts 8px between them, so it fits the column without scrolling.
+
+```tsx
+<Table density="compact" className="w-640">
+  <Table.Head>
+    <Table.Row>
+      <Table.HeaderCell>Variable</Table.HeaderCell>
+      <Table.HeaderCell>TOML key</Table.HeaderCell>
+      <Table.HeaderCell>Type</Table.HeaderCell>
+      <Table.HeaderCell>Default</Table.HeaderCell>
+      <Table.HeaderCell>What it does</Table.HeaderCell>
+    </Table.Row>
+  </Table.Head>
+  <Table.Body>
+    {settings.map((s) => (
+      <Table.Row key={s.variable}>
+        <Table.Cell className="mono text-small">{s.variable}</Table.Cell>
+        <Table.Cell className="mono text-small">{s.key}</Table.Cell>
+        <Table.Cell>{s.type}</Table.Cell>
+        <Table.Cell className="mono text-small whitespace-nowrap">{s.default}</Table.Cell>
+        <Table.Cell>{s.does}</Table.Cell>
+      </Table.Row>
+    ))}
+  </Table.Body>
+</Table>
+```
+
 ## TableOfContents
 
 “On this page”: the heading in view in text color with a 2px ink bar.

package/ai/component-registry.json

@@ -1,6 +1,6 @@
 {
   "package": "@logicplanes/kaeso-ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "components": [
     {
       "entry": "app-frame",
@@ -521,7 +521,7 @@
               "type": "\"danger\" | \"link\" | \"secondary\" | \"primary\" | \"ghost\" | \"quiet\" | \"soft\" | \"danger-secondary\"",
               "required": false,
               "default": null,
-              "description": "`primary` for the one main action of a view, `secondary` for others, `ghost` and `quiet` for toolbars, `danger` for destructive actions."
+              "description": "`primary` for the one main action of a view, `secondary` for others, `ghost` and `quiet` for toolbars and rows, `danger` for destructive actions. A ghost or quiet button at the end of a settings row's control pulls its padding past the row's edge, so its label ends where an outlined button's ring does."
             }
           ],
           "file": "src/components/button/button.tsx"
@@ -852,7 +852,7 @@
         },
         {
           "name": "ChartFrame",
-          "description": "The frame every chart draws in: a hidden data table for assistive technology, a \"View as table\" toggle, and the empty, loading and error states. Use it to build a chart of your own that behaves like the others.",
+          "description": "The frame every chart draws in: a hidden data table for assistive technology, a \"View as table\" toggle, and the empty, loading and error states. The toggle sits at the right end of the last line of the legend; when the frame is narrower than 480px (the `chart-legend` container size, a phone), it moves to its own line under the legend, so it never reads as one of the series. Use it to build a chart of your own that behaves like the others.",
           "props": [
             {
               "name": "children",
@@ -2173,7 +2173,7 @@
       "components": [
         {
           "name": "CodeBlock",
-          "description": "Highlighted code on a well: Kaeso's monochrome theme, copy on hover, tabs, line numbers, collapse.",
+          "description": "Highlighted code on a well: Kaeso's monochrome theme, copy on hover, tabs, line numbers, collapse. Long lines scroll sideways inside 16px of padding at both ends, and the code fades out at an edge with more to scroll to.",
           "props": [
             {
               "name": "className",
@@ -2261,10 +2261,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 +2359,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"
@@ -2955,6 +2955,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 +3273,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",
@@ -3451,7 +3465,7 @@
         },
         {
           "name": "InlineCopyText",
-          "description": "Inline mono text that copies itself on click, with a hover affordance. Never wider than its container: a long value (a user agent, an id) ends in an ellipsis, and its tooltip shows the whole of it until it is copied.",
+          "description": "Inline mono text that copies itself on click. On hover and keyboard focus a copy icon appears after it. When nothing follows it on its line and its row's padding has room that no cell clips, the icon takes no space, so the text ends on the same edge as the values around it; otherwise the icon keeps its own space. Touch screens always show the icon in its own space. Never wider than its container: a long value (a user agent, an id) ends in an ellipsis, and its tooltip shows the whole of it until it is copied.",
           "props": [
             {
               "name": "value",
@@ -5026,6 +5040,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",
@@ -10065,7 +10148,7 @@
           "axes": {
             "appearance": {
               "ghost": "Transparent until hovered: a column header (default)",
-              "default": "A raised pill with a ring: a form or toolbar"
+              "default": "A pill with a text input's ring: a form or toolbar"
             }
           },
           "defaults": {
@@ -11228,7 +11311,7 @@
         "SELECT": {
           "axes": {
             "appearance": {
-              "default": "A raised pill with a ring (default)",
+              "default": "A pill with the same ring, hover and focus as a text input (default)",
               "ghost": "Inline in settings rows: “GPT-5 mini (default) ⌄”",
               "header": "Transparent until hovered, in full text colour: a column header's model"
             },
@@ -11334,7 +11417,7 @@
         },
         {
           "name": "SettingsRow",
-          "description": "One setting: title 15/500 and description 13 on the left, the control on the right. When the row is too narrow to keep 140px of text beside the control (a phone, a sheet), the control moves under the text.",
+          "description": "One setting: title 15/500 and description 13 on the left, the control on the right. The row is its own size container: narrower than 480px inside its padding (the `settings-row` container size, a phone), every row's control moves under its text, so the rows of a group line up the same way whatever their control's width. A ghost or quiet button that ends the control keeps its label on the row's edge, where an outlined button's ring ends; under the text it starts on the text's edge.",
           "props": [
             {
               "name": "title",
@@ -11586,8 +11669,8 @@
               "lg": "800px"
             },
             "side": {
-              "right": "From the right (default)",
-              "left": "From the left: the mobile sidebar",
+              "right": "From the right (default); fills a phone's screen",
+              "left": "From the left: the mobile sidebar; fills a phone's screen",
               "bottom": "From the bottom: mobile menus"
             }
           },
@@ -12374,7 +12457,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 +12475,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"
           }
         }
       }
@@ -12743,7 +12839,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`."

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # @logicplanes/kaeso-ui component registry
 
-Version 0.4.0. Generated from the component types, their descriptions and variants; do not edit.
+Version 0.4.2. Generated from the component types, their descriptions and variants; do not edit.
 
 ## app-frame
 
@@ -135,7 +135,7 @@ The button. Every one is a pill; icon-only buttons are circles (see `IconButton`
 | `size` | `"md" \| "xs" \| "sm" \| "lg" \| "xl"` |  | The height, from `xs` (24px) to `xl` (44px). |
 | `target` | `string` |  | Where the link opens, as on an `a` element. |
 | `trailingIcon` | `IconSvgElement` |  | An icon after the text. |
-| `variant` | `"danger" \| "link" \| "secondary" \| "primary" \| "ghost" \| "quiet" \| "soft" \| "danger-secondary"` |  | `primary` for the one main action of a view, `secondary` for others, `ghost` and `quiet` for toolbars, `danger` for destructive actions. |
+| `variant` | `"danger" \| "link" \| "secondary" \| "primary" \| "ghost" \| "quiet" \| "soft" \| "danger-secondary"` |  | `primary` for the one main action of a view, `secondary` for others, `ghost` and `quiet` for toolbars and rows, `danger` for destructive actions. A ghost or quiet button at the end of a settings row's control pulls its padding past the row's edge, so its label ends where an outlined button's ring does. |
 
 ## button-group
 
@@ -218,7 +218,7 @@ Bars for comparing values across categories: grouped, stacked, or horizontal for
 
 ### ChartFrame
 
-The frame every chart draws in: a hidden data table for assistive technology, a "View as table" toggle, and the empty, loading and error states. Use it to build a chart of your own that behaves like the others.
+The frame every chart draws in: a hidden data table for assistive technology, a "View as table" toggle, and the empty, loading and error states. The toggle sits at the right end of the last line of the legend; when the frame is narrower than 480px (the `chart-legend` container size, a phone), it moves to its own line under the legend, so it never reads as one of the series. Use it to build a chart of your own that behaves like the others.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -507,7 +507,7 @@ Inline code: Geist Mono 13 on fill-1.
 
 ### CodeBlock
 
-Highlighted code on a well: Kaeso's monochrome theme, copy on hover, tabs, line numbers, collapse.
+Highlighted code on a well: Kaeso's monochrome theme, copy on hover, tabs, line numbers, collapse. Long lines scroll sideways inside 16px of padding at both ends, and the code fades out at an edge with more to scroll to.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -523,7 +523,7 @@ Highlighted code on a well: Kaeso's monochrome theme, copy on hover, tabs, line
 | `tab` | `string` |  | The label of the tab to show, such as a language the reader chose before. A label the block lacks leaves its own choice. |
 | `tabs` | `CodeTab[]` |  | Several versions: "Python · Node · curl", shown as pill tabs. |
 | `title` | `ReactNode` |  | A file name in the title bar. |
-| `wrap` | `boolean` | `false` | Long lines wrap instead of scrolling sideways: code in a narrow column (a model's response). |
+| `wrap` | `boolean \| "phone"` | `false` | 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. |
 
 ### CodeHighlighted
 
@@ -543,7 +543,7 @@ The same component as `CodeBlock`, under another name.
 | `tab` | `string` |  | The label of the tab to show, such as a language the reader chose before. A label the block lacks leaves its own choice. |
 | `tabs` | `CodeTab[]` |  | Several versions: "Python · Node · curl", shown as pill tabs. |
 | `title` | `ReactNode` |  | A file name in the title bar. |
-| `wrap` | `boolean` | `false` | Long lines wrap instead of scrolling sideways: code in a narrow column (a model's response). |
+| `wrap` | `boolean \| "phone"` | `false` | 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. |
 
 ### JsonView
 
@@ -680,6 +680,7 @@ A search field over a long list that stays fast with thousands of rows: fuzzy ma
 | `groups` * | `CommandListGroup[]` |  | 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. |
 | `autoFocus` | `boolean` |  | Focuses the search field when it appears, as in a popover or a dialog step. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `counts` | `boolean` | `true` | Shows each group's count beside its caption; false leaves them out, for a site whose house style has no result counters. |
 | `data-force` | `string` |  | Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`. |
 | `defaultQuery` | `string` |  | The search text on first render. |
 | `emptyText` | `ReactNode` |  | What the list says when nothing matches: "No models match". |
@@ -743,6 +744,7 @@ The pill that opens a picker and shows its value, in the same looks and sizes as
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `groups` * | `CommandGroup[]` |  | The commands, in groups with a heading each. |
+| `counts` | `boolean` |  | Shows each group's count beside its caption; false leaves them out, for a site whose house style has no result counters. |
 | `defaultQuery` | `string` |  | Start with this query (documentation). |
 | `emptyText` | `ReactNode` |  | Defaults to "No results" in the provider's language. |
 | `hotkey` | `boolean` |  | Open with ⌘K / Ctrl+K anywhere (default true). |
@@ -789,7 +791,7 @@ A circle that copies a value: a check and "Copied" for 1.2s.
 
 ### InlineCopyText
 
-Inline mono text that copies itself on click, with a hover affordance. Never wider than its container: a long value (a user agent, an id) ends in an ellipsis, and its tooltip shows the whole of it until it is copied.
+Inline mono text that copies itself on click. On hover and keyboard focus a copy icon appears after it. When nothing follows it on its line and its row's padding has room that no cell clips, the icon takes no space, so the text ends on the same edge as the values around it; otherwise the icon keeps its own space. Touch screens always show the icon in its own space. Never wider than its container: a long value (a user agent, an id) ends in an ellipsis, and its tooltip shows the whole of it until it is copied.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -1117,6 +1119,25 @@ A group of fields under one legend.
 | `legend` * | `ReactNode` |  | The heading of the group of fields. |
 | `description` | `ReactNode` |  | One sentence of help under the heading. |
 
+## figure
+
+`import { Figure } from "@logicplanes/kaeso-ui/figure";`
+
+- **surface** (figure): `well` (default) — A well like a code block's: radius 14, fill, no ring (default); `plain` — No surface, for a figure that brings its own
+
+### Figure
+
+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.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` * | `ReactNode` |  | What the figure shows, usually a ThemeImage. |
+| `label` * | `string` |  | The name of the figure's scrolling region, read by screen readers. |
+| `caption` | `ReactNode` |  | A few words under the figure that say what it shows, such as a diagram's title. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `focus` | `number` | `0.5` | Where a figure wider than its column starts, as a share of its width: 0.5, the middle, by default. |
+| `surface` | `"well" \| "plain"` | `well` | The figure's background: a well like a code block's, or none. |
+
 ## filter-chip
 
 `import { FilterChip } from "@logicplanes/kaeso-ui/filter-chip";`
@@ -2100,7 +2121,7 @@ Moves through long lists by pages, by cursor, or with a Load more button.
 
 - **divider** (compare_grid): `hairline` (default) — Columns separated by a hairline, edge to edge (default); `none` — No line between columns: columns that sit in panels of their own
 - **size** (composer): `md` (default) — Text 14/20, 8px around the buttons; the outline concentric with them (16 + 8) (default); `sm` — The same box starting one line tall: a follow-up field under a thread
-- **appearance** (model_picker): `ghost` (default) — Transparent until hovered: a column header (default); `default` — A raised pill with a ring: a form or toolbar
+- **appearance** (model_picker): `ghost` (default) — Transparent until hovered: a column header (default); `default` — A pill with a text input's ring: a form or toolbar
 - **layout** (parameter_panel): `popover` (default) — Inside a 320px popover (ParameterPopover) (default); `panel` — A side panel or sheet: a little more room between groups
 - **align** (prompt_suggestions): `start` (default) — Rows the composer's width, their text on its text (default); `center` — Centered under an empty thread's title
 - **state** (reasoning): `done` (default) — Finished: “Thought for 4.2 s”, closed until opened (default); `live` — Still reasoning: “Thinking” pulses quietly and the latest line shows beside it
@@ -2554,7 +2575,7 @@ Two to five mutually exclusive options: 24h/7d/30d, List/Board, providers.
 
 `import { Select } from "@logicplanes/kaeso-ui/select";`
 
-- **appearance** (select): `default` (default) — A raised pill with a ring (default); `ghost` — Inline in settings rows: “GPT-5 mini (default) ⌄”; `header` — Transparent until hovered, in full text colour: a column header's model
+- **appearance** (select): `default` (default) — A pill with the same ring, hover and focus as a text input (default); `ghost` — Inline in settings rows: “GPT-5 mini (default) ⌄”; `header` — Transparent until hovered, in full text colour: a column header's model
 - **size** (select): `sm` — 32px: settings rows and toolbars; `md` (default) — 36px (default); `lg` — 40px; `xl` — 48px: sign-in and setup forms
 
 ### Select
@@ -2624,7 +2645,7 @@ A group of settings rows: radius 14, raised, ring and a whisper of shadow; hairl
 
 ### SettingsRow
 
-One setting: title 15/500 and description 13 on the left, the control on the right. When the row is too narrow to keep 140px of text beside the control (a phone, a sheet), the control moves under the text.
+One setting: title 15/500 and description 13 on the left, the control on the right. The row is its own size container: narrower than 480px inside its padding (the `settings-row` container size, a phone), every row's control moves under its text, so the rows of a group line up the same way whatever their control's width. A ghost or quiet button that ends the control keeps its label on the row's edge, where an outlined button's ring ends; under the text it starts on the text's edge.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -2657,7 +2678,7 @@ A settings section: a title-sm heading 48px above, 12px below; usually one Setti
 `import { Sheet } from "@logicplanes/kaeso-ui/sheet";`
 
 - **size** (sheet): `sm` (default) — 480px (default); `md` — 640px: the request inspector; `lg` — 800px
-- **side** (sheet): `right` (default) — From the right (default); `left` — From the left: the mobile sidebar; `bottom` — From the bottom: mobile menus
+- **side** (sheet): `right` (default) — From the right (default); fills a phone's screen; `left` — From the left: the mobile sidebar; fills a phone's screen; `bottom` — From the bottom: mobile menus
 
 ### Sheet
 
@@ -2905,11 +2926,16 @@ A pill track and a round thumb that travels in 180ms.
 `import { Table } from "@logicplanes/kaeso-ui/table";`
 
 - **align** (table): `start` (default) — Text (default); `end` — Numbers
+- **density** (table): `default` (default) — 12px between columns (default); `compact` — 8px between columns, for reference tables of five or more columns
 
 ### Table
 
 A plain table for small amounts of data; use `DataTable` for sorting, selection and many rows.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `density` | `"default" \| "compact"` | `default` | 12px between columns (`default`), or 8px (`compact`) for reference tables of five or more columns. |
+
 ## tabs
 
 `import { PillTabs, Tabs } from "@logicplanes/kaeso-ui/tabs";`
@@ -3003,7 +3029,7 @@ Text in the type scale.
 | `tabular` | `boolean` |  | Tabular numerals. On by default for `metric`. |
 | `tone` | `"success" \| "warning" \| "danger" \| "info" \| "inherit" \| "secondary" \| "default" \| "tertiary"` | `default` | The text color role; status tones go next to words that say the same. |
 | `truncate` | `boolean` |  | One line with an ellipsis; the full text appears in a tooltip when it is cut. |
-| `variant` | `"title" \| "display" \| "title-sm" \| "title-lg" \| "body" \| "caption" \| "small" \| "micro" \| "body-lg" \| "metric"` | `body` | The type style, from `micro` to `display`. |
+| `variant` | `"title" \| "display" \| "caption" \| "title-sm" \| "title-lg" \| "body" \| "small" \| "micro" \| "body-lg" \| "metric"` | `body` | The type style, from `micro` to `display`. |
 | `weight` | `"medium" \| "regular" \| "semibold"` |  | The weight, when it differs from the type style's. |
 
 ## theme-image

package/ai/icons.md

@@ -1,6 +1,6 @@
 # Icon vocabulary
 
-Version 0.4.0. Generated from `src/icons/vocabulary.ts`; do not edit. Use the name, never an icon picked by look: `icons.key` always means a key. Hugeicons, Stroke Rounded. Rules: `foundations/icons.md`.
+Version 0.4.2. Generated from `src/icons/vocabulary.ts`; do not edit. Use the name, never an icon picked by look: `icons.key` always means a key. Hugeicons, Stroke Rounded. Rules: `foundations/icons.md`.
 
 ## Kaeso objects
 

package/ai/tokens.md

@@ -1,6 +1,6 @@
 # @logicplanes/kaeso-ui tokens
 
-Version 0.4.0. Generated from `@logicplanes/kaeso-tokens`; do not edit. Components use these through role names (`bg-panel`, `text-fg-secondary`, `h-36`, `rounded-pill`); a raw value never appears in a component. How to use them: `foundations/*.md`.
+Version 0.4.2. Generated from `@logicplanes/kaeso-tokens`; do not edit. Components use these through role names (`bg-panel`, `text-fg-secondary`, `h-36`, `rounded-pill`); a raw value never appears in a component. How to use them: `foundations/*.md`.
 
 ## Neutrals
 
@@ -17,6 +17,7 @@ Version 0.4.0. Generated from `@logicplanes/kaeso-tokens`; do not edit. Componen
 | `--k-line-strong` | #d4d4d4 | #333333 |
 | `--k-line-field` | #858585 | #757575 |
 | `--k-line-field-hover` | #707070 | #858585 |
+| `--k-switch-thumb` | #ffffff | #c7c7c7 |
 | `--k-text` | #0a0a0a | #fafafa |
 | `--k-text-secondary` | #666666 | #a3a3a3 |
 | `--k-text-tertiary` | #707070 | #858585 |

package/dist/blocks/delete-resource.js

@@ -1,6 +1,6 @@
 "use client";
 import { i as e } from "../chunks/context-BELWW79w.js";
-import { t } from "../chunks/dialog-BLcP7v24.js";
+import { t } from "../chunks/dialog-DQ9vZ7vr.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/blocks/delete-resource/delete-resource.tsx
 var r = { confirm: {

package/dist/blocks/pages.js

@@ -1,9 +1,9 @@
 "use client";
-import { t as e } from "../chunks/cn-DUDmdLpZ.js";
-import { t } from "../chunks/app-frame-Cj_gCbmu.js";
-import { r as n } from "../chunks/page-header-B3tV8Wog.js";
-import { t as r } from "../chunks/empty-YXmSkKzR.js";
-import { a as i, t as a } from "../chunks/section-BsET7Fo-.js";
+import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t } from "../chunks/app-frame-C8csevkL.js";
+import { r as n } from "../chunks/page-header-DjUMDG69.js";
+import { t as r } from "../chunks/empty-DvhyMXQq.js";
+import { a as i, t as a } from "../chunks/section-Ce1efbsP.js";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/blocks/pages/pages.tsx
 var l = { page: {

package/dist/blocks/resource-list.js

@@ -1,9 +1,9 @@
 "use client";
 import { i as e } from "../chunks/context-BELWW79w.js";
-import { i as t } from "../chunks/input-9y3afoiq.js";
-import { r as n } from "../chunks/toolbar-nVLFWH2i.js";
-import { t as r } from "../chunks/empty-YXmSkKzR.js";
-import { i, o as a } from "../chunks/list-7VARol_x.js";
+import { i as t } from "../chunks/input-TyLIaQ5k.js";
+import { r as n } from "../chunks/toolbar-DL6zVrzU.js";
+import { t as r } from "../chunks/empty-DvhyMXQq.js";
+import { i, o as a } from "../chunks/list-CkOozrVY.js";
 import { useMemo as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/blocks/resource-list/resource-list.tsx

package/dist/chunks/{app-frame-Cj_gCbmu.js → app-frame-C8csevkL.js}

@@ -1,11 +1,11 @@
 "use client";
-import { t as e } from "./cn-DUDmdLpZ.js";
+import { t as e } from "./cn-Dj6sRgkF.js";
 import { n as t, t as n } from "./inset-BnBj8NJV.js";
 import { i as r } from "./context-BELWW79w.js";
-import { l as i, s as a } from "./tooltip-CTBnfiDH.js";
-import { a as o } from "./button-h2IFCER2.js";
-import { t as s } from "./icon-button-DmKFxQbP.js";
-import { l as c, t as l } from "./sidebar-ZSTPK9Jn.js";
+import { l as i, s as a } from "./tooltip-BMQ9BtPp.js";
+import { a as o } from "./button-Dzu7_csE.js";
+import { t as s } from "./icon-button-CPYR21Sz.js";
+import { l as c, t as l } from "./sidebar-DtFlejU7.js";
 import { t as u } from "./when-idle-Cy3pinqO.js";
 import { createContext as d, forwardRef as f, useCallback as p, useContext as m, useEffect as h, useId as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
@@ -103,7 +103,7 @@ function A({ banner: e, href: t, label: n, actions: i, open: a, onToggle: o, tog
 	});
 }
 process.env.NODE_ENV !== "production" && (A.displayName = "AppFrame.PhoneBar");
-var j = 750, M = /* @__PURE__ */ a(() => import("./nav-sheet-D7wIF_OU.js").then((e) => e.n), { base: () => import.meta.url });
+var j = 750, M = /* @__PURE__ */ a(() => import("./nav-sheet-B2rNb8GB.js").then((e) => e.n), { base: () => import.meta.url });
 function N({ navOpen: e, setNavOpen: t, toggle: n, ready: r, children: a }) {
 	let { peeking: o, setPeeking: s } = c(), [l, d] = b(!1);
 	h(() => u(() => d(!0)), []);
@@ -189,12 +189,12 @@ var z = /* @__PURE__ */ f(function({ title: r, description: i, actions: a, class
 			children: [/* @__PURE__ */ S("header", {
 				className: "flex flex-col gap-8",
 				children: [/* @__PURE__ */ S("div", {
-					className: "flex items-start justify-between gap-16",
+					className: "flex flex-wrap items-start justify-between gap-x-16 gap-y-8",
 					children: [/* @__PURE__ */ x("h1", {
 						className: "min-w-0 text-title-lg font-semibold text-fg text-balance",
 						children: r
 					}), a && /* @__PURE__ */ x("div", {
-						className: "flex h-34 shrink-0 items-center gap-8",
+						className: "ml-auto flex h-34 shrink-0 items-center gap-8",
 						children: a
 					})]
 				}), i && /* @__PURE__ */ x("p", {
@@ -217,4 +217,4 @@ var B = /* @__PURE__ */ Object.assign(O, {
 //#endregion
 export { w as a, T as i, L as n, j as o, I as r, D as s, B as t };
 
-//# sourceMappingURL=app-frame-Cj_gCbmu.js.map
+//# sourceMappingURL=app-frame-C8csevkL.js.map