@logicplanes/kaeso-ui 0.4.2 → 0.4.3

package/ai/component-registry.md

@@ -1,6 +1,36 @@
 # @logicplanes/kaeso-ui component registry
 
-Version 0.4.2. Generated from the component types, their descriptions and variants; do not edit.
+Version 0.4.3. Generated from the component types, their descriptions and variants; do not edit.
+
+## agent-avatar
+
+`import { AgentAttribution, AgentAvatar } from "@logicplanes/kaeso-ui/agent-avatar";`
+
+- **size** (agent_attribution): `20` — 20px person, 10px agent badge; `24` (default) — 24px person, 12px agent badge (default); `28` — 28px person, 14px agent badge; `32` — 32px person, 16px agent badge; `40` — 40px person, 20px agent badge
+- **size** (agent_avatar): `20` — 20px; `24` (default) — 24px: rows and lists (default); `28` — 28px; `32` — 32px; `40` — 40px: an agent's own page, menus
+
+### AgentAttribution
+
+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.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `agent` * | `{ name: string; model: string; }` |  | The agent that acted, with its name and model family id from the API; the family is named in the accessible name only. |
+| `name` * | `string` |  | The name of the person the agent acted for; it starts the accessible name, such as `Ada Okafor via Release helper (Claude)`. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `size` | `24 \| 20 \| 28 \| 32 \| 40` | `24` | The diameter of the person's avatar in pixels; the agent badge is half of it. |
+| `src` | `string` |  | The person's picture; without one, or when it fails to load, their initials show. |
+
+### AgentAvatar
+
+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.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `name` * | `string` |  | The agent's name, such as `Release helper`; it is the accessible name. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `decorative` | `boolean` |  | Hides it from assistive technology when the agent's name is already written next to it. |
+| `size` | `24 \| 20 \| 28 \| 32 \| 40` | `24` | The side of the square in pixels, on the same scale as `Avatar`. |
 
 ## app-frame
 
@@ -176,7 +206,7 @@ The calendar: 36px day circles, today ringed, ranges as a continuous strip with
 | `onMonthChange` | `((month: Date) => void)` |  | Called when the month shown changes. |
 | `onSelect` | `((value: Date \| DateRange) => void)` |  | Called with the new day or range. |
 | `selected` | `Date \| DateRange` |  | The selected day or range. |
-| `weekStartsOn` | `0 \| 4 \| 1 \| 2 \| 3 \| 5 \| 6` | `1` | 0 = Sunday, 1 = Monday (default). |
+| `weekStartsOn` | `0 \| 2 \| 3 \| 4 \| 1 \| 5 \| 6` | `1` | 0 = Sunday, 1 = Monday (default). |
 
 ## charts
 
@@ -592,6 +622,7 @@ A disclosure row: a chevron that rotates in 180ms, a measured height animation.
 
 `import { Autocomplete, Combobox, Highlight } from "@logicplanes/kaeso-ui/combobox";`
 
+- **size** (autocomplete): `sm` — 32px; `md` (default) — 36px (default); `lg` — 40px; `xl` — 48px
 - **size** (combobox): `sm` — 32px; `md` (default) — 36px (default); `lg` — 40px; `xl` — 48px
 
 ### Autocomplete
@@ -817,6 +848,7 @@ A table for many rows: sorting, selection, loading and empty states, more rows o
 | `columns` * | `ColumnDef<T, any>[]` |  | The columns, as TanStack Table column definitions. |
 | `data` * | `T[]` |  | The rows. |
 | `activeRowId` | `string` |  | The id of a row to show as active (open in a sheet). |
+| `canSelectRow` | `((row: T) => boolean)` |  | Whether a row can be selected; a row that can't keeps a disabled checkbox, and select all skips it. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
 | `density` | `"default" \| "compact" \| "comfortable"` |  | How much room each row gets. |
 | `empty` | `ReactNode` |  | What to show when there are no rows, usually an `Empty`. |
@@ -872,7 +904,7 @@ A pill showing the date; a popover with the calendar and a typed ISO field.
 | `required` | `boolean` |  | Marks it as required in a form. |
 | `size` | `"md" \| "sm" \| "lg"` |  | The height of the field. |
 | `value` | `Date \| null` |  | The chosen day, when you control it. |
-| `weekStartsOn` | `0 \| 4 \| 1 \| 2 \| 3 \| 5 \| 6` |  | The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default. |
+| `weekStartsOn` | `0 \| 2 \| 3 \| 4 \| 1 \| 5 \| 6` |  | The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default. |
 
 ### DateRangePicker
 
@@ -900,7 +932,7 @@ A pill showing the range ("Oct 1 – Oct 12") or its preset ("Last 30 days"); pr
 | `required` | `boolean` |  | Marks it as required in a form. |
 | `size` | `"md" \| "sm" \| "lg"` |  | The height of the field. |
 | `value` | `DateRange \| null` |  | The chosen range, when you control it. |
-| `weekStartsOn` | `0 \| 4 \| 1 \| 2 \| 3 \| 5 \| 6` |  | The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default. |
+| `weekStartsOn` | `0 \| 2 \| 3 \| 4 \| 1 \| 5 \| 6` |  | The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default. |
 
 ### TimeInput
 
@@ -957,6 +989,8 @@ Confirms deleting a resource: names the object and the consequence, asks for its
 - **anchor** (dialog): `center` (default) — Centered on the screen (default); `top` — A fixed top edge, for content that changes height, such as the steps of a StepDialog
 - **size** (layer_dialog): `sm` — 440px: confirmations, short forms; `md` (default) — 560px: forms (default); `lg` — 720px: two columns, previews
 - **anchor** (layer_dialog): `center` (default) — Centered on the screen (default); `top` — A fixed top edge, for content that changes height, such as the steps of a StepDialog
+- **size** (step_dialog): `sm` (default) — 440px: most tasks in a few steps (default); `md` — 560px: steps with longer forms; `lg` — 720px: steps with two columns or previews
+- **tone** (step_dialog): `default` (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
 
 ### AlertDialog
 
@@ -992,6 +1026,7 @@ A modal dialog: 440 / 560 / 720, radius 20, title, description, body, actions. E
 | `defaultOpen` | `boolean` |  | Whether it starts open, when the component keeps its own state. |
 | `description` | `ReactNode` |  | One sentence under the title. |
 | `footer` | `ReactNode` |  | Right-aligned actions: Cancel (secondary) then the primary. |
+| `footerStart` | `ReactNode` |  | A quiet action at the footer's start, such as a link to another way of doing the task. |
 | `headerStart` | `ReactNode` |  | A top bar above the title, with this at its start and the close circle at its end (LayerDialog's back button). The title, description and content keep one left edge; `null` keeps the bar with an empty start. |
 | `hideClose` | `boolean` |  | Hide the close circle (rare). |
 | `inline` | `boolean` |  | Render without a portal and backdrop, for documentation and state matrices. |
@@ -1000,6 +1035,7 @@ A modal dialog: 440 / 560 / 720, radius 20, title, description, body, actions. E
 | `open` | `boolean` |  | Whether it is open, when you control it. |
 | `persistent` | `boolean` |  | 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. |
 | `size` | `"md" \| "sm" \| "lg"` |  | The dialog's width. |
+| `toolbar` | `ReactNode` |  | 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. |
 | `trigger` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | The trigger, a single element. |
 
 ### DialogScope
@@ -1017,7 +1053,7 @@ A stacked dialog: a second layer slides over the first (add model → review val
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `layers` * | `DialogLayer[]` |  | The layers, each with its title, content and footer; one shows at a time, and the ones below it stay mounted and hidden. |
+| `layers` * | `DialogLayer[]` |  | 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. |
 | `anchor` | `"center" \| "top"` |  | Where it sits: centered, or with a fixed top edge for layers of different heights. |
 | `busy` | `boolean` |  | 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. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
@@ -1035,12 +1071,12 @@ A stacked dialog: a second layer slides over the first (add model → review val
 
 ### StepDialog
 
-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.
+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.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `onSubmit` * | `() => void` |  | Called when the last step is submitted. |
-| `steps` * | `DialogStep[]` |  | The steps, each with its title, content and whether it can be continued. |
+| `steps` * | `DialogStep[]` |  | 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". |
 | `submitLabel` * | `string` |  | The last step's button: "Create key". |
 | `title` * | `ReactNode` |  | What the whole dialog does: "Create key". |
 | `defaultStep` | `number` | `0` | Start on this step (state matrices). |
@@ -1218,7 +1254,7 @@ Heading levels map to the title tokens (4.3).
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `balance` | `boolean` | `true` | Balances the lines of a heading that wraps. |
-| `level` | `4 \| 1 \| 2 \| 3 \| 5 \| 6` |  | The heading level in the document, independent of its size. |
+| `level` | `2 \| 3 \| 4 \| 1 \| 5 \| 6` |  | The heading level in the document, independent of its size. |
 | `size` | `"title" \| "display" \| "title-sm" \| "title-lg"` | `title-sm` | The type style, from `title-sm` to `display`. |
 
 ## icon
@@ -1270,6 +1306,7 @@ A circle with an icon, a required name, and a tooltip that says it.
 - **size** (input_group): `sm` — 32px: toolbars and compact forms; `md` (default) — 36px: the default; `lg` — 40px; `xl` — 48px: sign-in and setup forms
 - **align** (number_input): `end` (default) — Right-aligned tabular digits (default); `start` — Left-aligned
 - **size** (otp_input): `md` (default) — 48px cells (default); `sm` — 40px cells
+- **size** (search_input): `sm` (default) — 32px: toolbars (default); `md` — 36px: a search at the top of a page or dialog; `lg` — 40px; `xl` — 48px
 - **kind** (sensitive_input): `secret` (default) — Provider keys and tokens: never autocompleted (default); `password` — Passwords: browser password managers allowed, Caps Lock hint
 - **size** (tag_input): `md` (default) — 36px at one row; grows as tags wrap (default)
 - **resize** (textarea): `auto` (default) — Grows with its content to 8 lines, then scrolls (default); `vertical` — People can drag it taller
@@ -1442,13 +1479,13 @@ A multi-line field: radius 14 (multi-line text cannot be a pill), the same mater
 
 ## kaeso
 
-`import { CapabilityIcons, ConversationView, EffectiveAccess, EnvironmentSnippet, KeyDisplay, LimitMeter, ModelLabel, ProviderBadge, ProviderCard, ProviderPicker, RequestTimeline, RightsMatrix, RolePicker, SecretReveal, StatusCode, UsageBreakdown } from "@logicplanes/kaeso-ui/kaeso";`
+`import { CapabilityIcons, ClientButton, ConversationView, EffectiveAccess, EnvironmentSnippet, GrantSummary, KeyDisplay, LimitMeter, ModelLabel, ProviderBadge, ProviderCard, ProviderPicker, RequestTimeline, RightsMatrix, RolePicker, SecretReveal, StatusCode, UsageBreakdown } from "@logicplanes/kaeso-ui/kaeso";`
 
 - **density** (conversation): `default` (default) — 24px between turns (default); `compact` — 16px, inside sheets
 - **layout** (effective_access): `rows` (default) — A row per group: its name, what is granted in words, and how many (default)
 - **provider** (identity): `sm` — 16px, inside table cells; `md` (default) — 20px (default); `lg` — 28px; `xl` — 40px: a provider's own page or card
 - **secret** (moments): `md` (default) — The one-time secret on a well
-- **appearance** (provider_picker): `list` (default) — A search field over every provider, always open: a dialog step (default); `select` — A pill that opens the searchable list: forms and toolbars
+- **appearance** (provider_picker): `list` (default) — A search field over every provider, always open: a dialog step (default); `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
 - **origin** (rights_matrix): `preset` — Comes from the role; `added` — Added on top of the role; `removed` — Removed from the role; `none` (default) — Not granted
 - **mode** (rights_matrix): `edit` (default) — Checkboxes, group toggles and requirement hints (default); `readOnly` — A mark per right and, under it, the roles that grant it
 - **appearance** (role_picker): `list` (default) — Every role as a row with its description, built-in then custom (default): invites and role changes; `select` — A pill that opens the roles: filters, table rows and tight forms
@@ -1463,6 +1500,17 @@ A model's capabilities as small icons, each named in a tooltip and read as one l
 | `capabilities` | `Capability[]` | `[]` | The capabilities: tools, reasoning, vision, pdf, structuredOutput. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
 
+### ClientButton
+
+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.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `aria-label` * | `string` |  | The client's name; also the tooltip. |
+| `client` * | `"cursor" \| "claude" \| "github-copilot"` |  | Which client's mark it shows. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `onClick` | `(() => void)` |  | Opens how to connect the client. |
+
 ### ConversationView
 
 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.
@@ -1498,6 +1546,18 @@ The gateway's base URL and a key placeholder to copy, with snippets per SDK.
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
 | `model` | `string` |  | A model id for the snippet. |
 
+### GrantSummary
+
+What an agent or a key may do, one short line each after a check mark, on a group surface.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `aria-label` * | `string` |  | The list's accessible name ("What it can do"). |
+| `items` * | `readonly ReactNode[]` |  | The lines, short and without a final period. |
+| `action` | `ReactNode` |  | A small button after the note, such as Customize. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `footer` | `ReactNode` |  | A quiet note under the lines, such as how long it lasts. |
+
 ### KeyDisplay
 
 A redacted key: mono 13 with its state dot, copy of the redacted form, and its access.
@@ -1577,7 +1637,7 @@ Choosing a provider from any number of them: a search field over every provider,
 |---|---|---|---|
 | `providers` * | `ProviderPickerOption[]` |  | The providers: id, name, whether the organization has connected it, and a short hint such as its key count. |
 | `allLabel` | `string` |  | Select only: a first option for no provider in particular, such as "All providers"; choosing it reports `null`. |
-| `appearance` | `"list" \| "select"` |  | An always-open list for a dialog step, or a pill that opens it. |
+| `appearance` | `"list" \| "grid" \| "select"` |  | 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. |
 | `aria-label` | `string` |  | What the picker is for, when there is no visible label: it names the list, and the pill, named by the provider it shows, reads it as its description. |
 | `autoFocus` | `boolean` |  | List only: focuses the search field when it appears. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
@@ -1587,6 +1647,7 @@ Choosing a provider from any number of them: a search field over every provider,
 | `error` | `ReactNode` |  | Deprecated. 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. |
 | `label` | `ReactNode` |  | The visible label. |
 | `layout` | `"horizontal" \| "vertical"` |  | The label above the control (`vertical`) or beside it (`horizontal`). |
+| `onChoose` | `((id: string) => void)` |  | 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. |
 | `onValueChange` | `((id: string \| null) => void)` |  | Called with the chosen provider's id, or `null` for `allLabel`. |
 | `optional` | `boolean` |  | Adds “Optional” to the label, for forms where most fields are required. |
 | `placeholder` | `string` |  | The search field's placeholder; in a pill without `allLabel`, also the text shown while nothing is chosen. |
@@ -1711,7 +1772,7 @@ Label and value pairs (13 secondary label, 14 value), copyable values. Side by s
 |---|---|---|---|
 | `items` * | `KeyValueItem[]` |  | The pairs to show. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
-| `columns` | `4 \| 2 \| 3` | `2` | The grid layout's items to a row, from 480px of its container's width. |
+| `columns` | `2 \| 3 \| 4` | `2` | The grid layout's items to a row, from 480px of its container's width. |
 | `layout` | `"grid" \| "stacked" \| "columns"` | `columns` | Keys beside values in columns, in a grid, or stacked above them. |
 
 ## label
@@ -1746,8 +1807,8 @@ A responsive grid.
 |---|---|---|---|
 | `align` | `"start" \| "end" \| "center" \| "baseline" \| "stretch"` | `center` | How items line up within their cells. |
 | `as` | `ElementType` |  | The element or component to render as, such as `section` or `ul`. |
-| `columns` | `4 \| 1 \| 2 \| 3 \| 6` | `2` | The number of columns. |
-| `gap` | `0 \| 24 \| 20 \| 32 \| 40 \| 4 \| 2 \| 6 \| 8 \| 12 \| 16 \| 48 \| 64` | `16` | The space between items, in pixels on the spacing scale. |
+| `columns` | `2 \| 3 \| 4 \| 1 \| 6` | `2` | The number of columns. |
+| `gap` | `0 \| 2 \| 24 \| 20 \| 32 \| 40 \| 4 \| 6 \| 8 \| 12 \| 16 \| 48 \| 64` | `16` | The space between items, in pixels on the spacing scale. |
 
 ### Inline
 
@@ -1757,7 +1818,7 @@ A horizontal row that wraps.
 |---|---|---|---|
 | `align` | `"start" \| "end" \| "center" \| "baseline" \| "stretch"` | `center` | How items line up across the row. |
 | `as` | `ElementType` |  | The element or component to render as, such as `section` or `ul`. |
-| `gap` | `0 \| 24 \| 20 \| 32 \| 40 \| 4 \| 2 \| 6 \| 8 \| 12 \| 16 \| 48 \| 64` | `16` | The space between items, in pixels on the spacing scale. |
+| `gap` | `0 \| 2 \| 24 \| 20 \| 32 \| 40 \| 4 \| 6 \| 8 \| 12 \| 16 \| 48 \| 64` | `16` | The space between items, in pixels on the spacing scale. |
 | `justify` | `"start" \| "end" \| "center" \| "between"` |  | How items are spread along the main axis. |
 | `wrap` | `boolean` | `true` | Lets items wrap onto the next line. |
 
@@ -1769,7 +1830,7 @@ A vertical stack.
 |---|---|---|---|
 | `align` | `"start" \| "end" \| "center" \| "baseline" \| "stretch"` | `center` | How items line up across the column. |
 | `as` | `ElementType` |  | The element or component to render as, such as `section` or `ul`. |
-| `gap` | `0 \| 24 \| 20 \| 32 \| 40 \| 4 \| 2 \| 6 \| 8 \| 12 \| 16 \| 48 \| 64` | `16` | The space between items, in pixels on the spacing scale. |
+| `gap` | `0 \| 2 \| 24 \| 20 \| 32 \| 40 \| 4 \| 6 \| 8 \| 12 \| 16 \| 48 \| 64` | `16` | The space between items, in pixels on the spacing scale. |
 | `justify` | `"start" \| "end" \| "center" \| "between"` |  | How items are spread along the main axis. |
 
 ## link
@@ -1946,7 +2007,7 @@ Markdown, safely: headings, paragraphs, lists, tasks, code fences (CodeBlock), i
 | `text` * | `string` |  | The Markdown source. Raw HTML in it stays text. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
 | `collapseAfter` | `number` | `24000` | Texts longer than this many characters show their start and "Show all" (24,000 by default; 0 never collapses). |
-| `headingLevel` | `4 \| 1 \| 2 \| 3 \| 5 \| 6` | `3` | The heading level `#` becomes (3 by default: below a page's and a section's own headings). |
+| `headingLevel` | `2 \| 3 \| 4 \| 1 \| 5 \| 6` | `3` | The heading level `#` becomes (3 by default: below a page's and a section's own headings). |
 | `size` | `"lg" \| "body" \| "small"` | `body` | The text size: `small`, `body` or `lg`. |
 | `streaming` | `boolean` | `false` | The text is still arriving: nothing collapses, and the tokens aren't cached. |
 | `tone` | `"secondary" \| "default"` | `default` | Primary text (`default`) or secondary text (`secondary`). |
@@ -1955,7 +2016,7 @@ Markdown, safely: headings, paragraphs, lists, tasks, code fences (CodeBlock), i
 
 ## menu
 
-`import { ContextMenu, Menubar } from "@logicplanes/kaeso-ui/menu";`
+`import { ContextMenu, Menu, Menubar } from "@logicplanes/kaeso-ui/menu";`
 
 - **item** (menu): `default` (default) — An action; `danger` — A destructive action: red text, a red tint on highlight
 - **width** (menu): `auto` (default) — 220–360px, from its content (default); `trigger` — As wide as its trigger
@@ -1963,11 +2024,20 @@ Markdown, safely: headings, paragraphs, lists, tasks, code fences (CodeBlock), i
 
 ### ContextMenu
 
-A dropdown menu: 16px radius, 34px rows, typeahead, Home/End, loops.
+The same menu, opened by a right click, a long press or the context-menu key on the area it wraps.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `children` * | `ReactNode` |  | The area that opens the menu on a right click or long press. |
+| `onOpenChange` | `((open: boolean) => void)` |  | Called when it opens or closes. |
+
+### Menu
+
+A dropdown menu: 16px radius, 34px rows, typeahead, Home/End, loops.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` * | `ReactNode` |  | The trigger and the menu's content. |
 | `defaultOpen` | `boolean` |  | Whether it starts open, when the component keeps its own state. |
 | `modal` | `boolean` |  | Blocks the rest of the page while the menu is open. |
 | `onOpenChange` | `((open: boolean) => void)` |  | Called when it opens or closes. |
@@ -1980,7 +2050,8 @@ A row of menus, as in a desktop app's title bar.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `children` * | `ReactNode` |  | The menus. |
-| `onOpenChange` | `((o: boolean) => void)` |  | Called when a menu opens or closes. |
+| `aria-label` | `string` |  | The accessible name, for when there is no visible label. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
 
 ## meter
 
@@ -2329,7 +2400,7 @@ A person's turn: their prompt as quiet text that opens the turn, no bubble. A lo
 | `children` * | `ReactNode` |  | The prompt as it was written: plain text, line breaks kept. |
 | `aria-label` | `string` |  | The message's accessible name. Defaults to "Prompt" in the provider's language. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
-| `maxLines` | `0 \| 4 \| 2 \| 3 \| 6` | `4` | Lines shown before "Show all" (4 by default; 0 shows everything). |
+| `maxLines` | `0 \| 2 \| 3 \| 4 \| 6` | `4` | Lines shown before "Show all" (4 by default; 0 shows everything). |
 
 ## popover
 
@@ -2392,7 +2463,7 @@ A QR code drawn as one SVG path: dark modules on white in both themes, with a qu
 
 ## radio
 
-`import { Radio, RadioCards } from "@logicplanes/kaeso-ui/radio";`
+`import { Radio, RadioCards, RadioGroup } from "@logicplanes/kaeso-ui/radio";`
 
 - **variant** (radio): `default` (default) — A list of radios with labels (default); `cards` — Rows inside a settings group with the radio at the end, for choices with descriptions
 
@@ -2447,6 +2518,24 @@ Choices with descriptions as rows in a settings group.
 | `orientation` | `"horizontal" \| "vertical"` | `vertical` | Lays the items out in a row (`horizontal`) or a column (`vertical`). |
 | `value` | `string` |  | The chosen option, when you control it. |
 
+### RadioGroup
+
+The group a set of radios belongs to: one of them is chosen, and the arrow keys move between them.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` * | `ReactNode` |  | The radios, one per option. |
+| `aria-label` | `string` |  | The accessible name, for when there is no visible label. |
+| `aria-labelledby` | `string` |  | The id of the element that names it, when its label is elsewhere on the page. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `defaultValue` | `string` |  | The chosen option on first render. |
+| `disabled` | `boolean` |  | Turns off every radio. |
+| `name` | `string` |  | The field name the value is sent under in a form. |
+| `onValueChange` | `((value: string) => void)` |  | Called with the chosen option. |
+| `orientation` | `"horizontal" \| "vertical"` | `vertical` | Lays the items out in a row (`horizontal`) or a column (`vertical`). |
+| `value` | `string` |  | The chosen option, when you control it. |
+| `variant` | `"default" \| "cards"` | `default` | A plain list of radios, or rows inside a settings group with the radio at the end (`cards`). |
+
 ## release-art
 
 `import { ReleaseArt } from "@logicplanes/kaeso-ui/release-art";`
@@ -2940,6 +3029,7 @@ A plain table for small amounts of data; use `DataTable` for sorting, selection
 
 `import { PillTabs, Tabs } from "@logicplanes/kaeso-ui/tabs";`
 
+- **variant** (pill_tabs): `underline` — Underline tabs for detail pages: 40px, a 2px ink indicator that slides; `pill` (default) — Header tabs: separate 32px pills, the active one filled
 - **variant** (tabs): `underline` (default) — Underline tabs for detail pages: 40px, a 2px ink indicator that slides; `pill` — Header tabs: separate 32px pills, the active one filled
 
 ### PillTabs
@@ -3064,6 +3154,9 @@ System, light or dark, stored as `kaeso:theme`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
+| `align` | `"start" \| "end"` | `end` | Which edge of the button the menu lines up with: its end (`end`) or its start (`start`), for a button at the left edge. |
+| `data-force` | `string` |  | Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`. |
+| `side` | `"top" \| "bottom"` | `bottom` | Where the menu opens: below the button (`bottom`), or above it (`top`) when the button sits at the foot of a sidebar. |
 | `size` | `"md" \| "sm"` | `sm` | The button's height. |
 | `variant` | `"secondary" \| "ghost"` | `ghost` | A filled button (`secondary`) or a quiet one (`ghost`). |
 
@@ -3086,6 +3179,23 @@ A select for system, light or dark, stored as `kaeso:theme`, with its label in t
 | `fullWidth` | `boolean` |  | Width of the trigger follows its content (default) or fills the container, as in a sidebar's footer. |
 | `size` | `"md" \| "sm"` | `sm` | The height of the field. |
 
+## thumbnail
+
+`import { Thumbnail } from "@logicplanes/kaeso-ui/thumbnail";`
+
+- **size** (thumbnail): `sm` — 64px: a row or a compact list; `md` (default) — 120px: an image inside a message (default); `lg` — 160px: an image a page is about
+
+### Thumbnail
+
+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.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `alt` * | `string` |  | What the image shows, read by screen readers and shown in its place when it can't load. |
+| `src` * | `string` |  | The image's address, including a data: URL. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `size` | `"md" \| "sm" \| "lg"` | `md` | The width and height: 64, 120 or 160 pixels. |
+
 ## timeline
 
 `import { Timeline } from "@logicplanes/kaeso-ui/timeline";`
@@ -3113,8 +3223,8 @@ Events down a 1px line (the audit log): each event marks the line with a short 3
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `limit` | `number` |  | How many toasts show at once. |
-| `timeout` | `number` |  | How long a toast stays, in milliseconds. |
+| `limit` | `number` | `3` | How many toasts show at once. |
+| `timeout` | `number` | `5000` | How long a toast stays, in milliseconds. |
 
 ### ToastCapsule
 
@@ -3190,7 +3300,7 @@ A short label for a control, shown on hover and focus. Never on disabled element
 | `disabled` | `boolean` |  | Never shows the tooltip. |
 | `onOpenChange` | `((open: boolean) => void)` |  | Called when it opens or closes. |
 | `open` | `boolean` |  | Whether it is open, when you control it. |
-| `shape` | `"pill" \| "multiline"` |  | A pill for a short label, or a box for several lines. |
+| `shape` | `"pill" \| "multiline"` | `pill` | A pill for a short label, or a box for several lines. |
 | `shortcut` | `string[] \| string[][]` |  | A shortcut shown after the text: `["mod", "k"]` or `[["g"], ["m"]]`. |
 | `side` | `"top" \| "bottom" \| "left" \| "right"` |  | The side it opens on. |
 | `sideOffset` | `number` |  | Distance from the trigger in px. |

package/ai/icons.md

@@ -1,10 +1,10 @@
 # Icon vocabulary
 
-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`.
+Version 0.4.3. 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
 
-`key`, `providerKey`, `project`, `organization`, `model`, `playground`, `alias`, `limit`, `budget`, `requestLog`, `usage`, `member`, `members`, `serviceAccount`, `settings`, `audit`, `instance`, `provider`, `route`, `gateway`, `database`, `update`, `security`, `session`, `overview`, `chart`, `home`
+`key`, `providerKey`, `project`, `organization`, `model`, `playground`, `alias`, `limit`, `budget`, `requestLog`, `usage`, `member`, `members`, `serviceAccount`, `agent`, `settings`, `audit`, `instance`, `provider`, `route`, `gateway`, `database`, `update`, `security`, `session`, `overview`, `chart`, `home`
 
 ## Capabilities
 
@@ -24,5 +24,5 @@ Version 0.4.2. Generated from `src/icons/vocabulary.ts`; do not edit. Use the na
 
 ## Misc
 
-`calendar`, `time`, `code`, `mail`, `keyboard`, `help`, `github`, `themeLight`, `themeDark`, `themeSystem`
+`calendar`, `time`, `code`, `mail`, `keyboard`, `help`, `github`, `themeLight`, `themeDark`, `themeSystem`, `language`, `legal`
 

package/ai/tokens.md

@@ -1,6 +1,6 @@
 # @logicplanes/kaeso-ui tokens
 
-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`.
+Version 0.4.3. 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
 

package/dist/blocks/delete-resource.js

@@ -1,23 +1,24 @@
 "use client";
 import { i as e } from "../chunks/context-BELWW79w.js";
-import { t } from "../chunks/dialog-DQ9vZ7vr.js";
-import { jsx as n } from "react/jsx-runtime";
+import { t } from "../chunks/dialog-Cg9A_6SF.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/blocks/delete-resource/delete-resource.tsx
-var r = { confirm: {
+var i = { confirm: {
 	typed: { classes: "" },
 	simple: { classes: "" }
-} }, i = { confirm: "typed" };
-function a({ kind: r, name: i, consequence: a, verb: o, confirm: s = "typed", onConfirm: c, trigger: l, open: u, onOpenChange: d, inline: f }) {
-	let p = e();
-	return /* @__PURE__ */ n(t, {
-		title: o === void 0 ? p("deleteResource.deleteTitle", "Delete this {kind}?", { kind: r }) : p("deleteResource.title", "{verb} this {kind}?", {
+} }, a = { confirm: "typed" }, o = /* @__PURE__ */ n(function({ kind: n, name: i, consequence: a, verb: o, confirm: s = "typed", onConfirm: c, trigger: l, open: u, onOpenChange: d, inline: f }, p) {
+	let m = e();
+	return /* @__PURE__ */ r(t, {
+		ref: p,
+		title: o === void 0 ? m("deleteResource.deleteTitle", "Delete this {kind}?", { kind: n }) : m("deleteResource.title", "{verb} this {kind}?", {
 			verb: o,
-			kind: r
+			kind: n
 		}),
 		description: a,
-		confirmLabel: o === void 0 ? p("deleteResource.deleteConfirm", "Delete {kind}", { kind: r }) : p("deleteResource.confirm", "{verb} {kind}", {
+		confirmLabel: o === void 0 ? m("deleteResource.deleteConfirm", "Delete {kind}", { kind: n }) : m("deleteResource.confirm", "{verb} {kind}", {
 			verb: o,
-			kind: r
+			kind: n
 		}),
 		onConfirm: c,
 		tone: "danger",
@@ -27,9 +28,9 @@ function a({ kind: r, name: i, consequence: a, verb: o, confirm: s = "typed", on
 		...d ? { onOpenChange: d } : {},
 		...f ? { inline: f } : {}
 	});
-}
-process.env.NODE_ENV !== "production" && (a.displayName = "DeleteResource");
+});
+process.env.NODE_ENV !== "production" && (o.displayName = "DeleteResource");
 //#endregion
-export { a as DeleteResource, i as KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS, r as KAESO_DELETE_RESOURCE_VARIANTS };
+export { o as DeleteResource, a as KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS, i as KAESO_DELETE_RESOURCE_VARIANTS };
 
 //# sourceMappingURL=delete-resource.js.map

package/dist/blocks/delete-resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"delete-resource.js","names":["useUiText","KAESO_DELETE_RESOURCE_VARIANTS","KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS","DeleteResource","t","AlertDialog","verb","consequence","confirm","name","trigger","open","onOpenChange","inline"],"sources":["../../src/blocks/delete-resource/delete-resource.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { AlertDialog } from \"../../components/dialog/dialog.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_DELETE_RESOURCE_VARIANTS = {\n  confirm: {\n    typed: { classes: \"\" },\n    simple: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS = { confirm: \"typed\" } as const;\n\nexport interface DeleteResourceProps {\n  kind: string;\n  name: string;\n  consequence: ReactNode;\n  verb?: string | undefined;\n  confirm?: keyof typeof KAESO_DELETE_RESOURCE_VARIANTS.confirm | undefined;\n  onConfirm: () => void | Promise<void>;\n  trigger?: ReactElement | undefined;\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  inline?: boolean | undefined;\n}\n\nexport function DeleteResource({ kind, name, consequence, verb, confirm = \"typed\", onConfirm, trigger, open, onOpenChange, inline }: DeleteResourceProps) {\n  const t = useUiText();\n  return (\n    <AlertDialog\n      title={\n        verb === undefined ? t(\"deleteResource.deleteTitle\", \"Delete this {kind}?\", { kind }) : t(\"deleteResource.title\", \"{verb} this {kind}?\", { verb, kind })\n      }\n      description={consequence}\n      confirmLabel={\n        verb === undefined ? t(\"deleteResource.deleteConfirm\", \"Delete {kind}\", { kind }) : t(\"deleteResource.confirm\", \"{verb} {kind}\", { verb, kind })\n      }\n      onConfirm={onConfirm}\n      tone=\"danger\"\n      {...(confirm === \"typed\" ? { confirmText: name } : {})}\n      {...(trigger ? { trigger } : {})}\n      {...(open !== undefined ? { open } : {})}\n      {...(onOpenChange ? { onOpenChange } : {})}\n      {...(inline ? { inline } : {})}\n    />\n  );\n}\nif (process.env.NODE_ENV !== \"production\") DeleteResource.displayName = \"DeleteResource\";\n"],"mappings":";;;;;AAIA,IAAaC,IAAiC,EAC5C,SAAS;CACP,OAAO,EAAE,SAAS,GAAG;CACrB,QAAQ,EAAE,SAAS,GAAG;AACxB,EACF,GACaC,IAAyC,EAAE,SAAS,QAAQ;AAezE,SAAgBC,EAAe,EAAE,SAAM,SAAM,gBAAa,SAAM,aAAU,SAAS,cAAW,YAAS,SAAM,iBAAc,aAA+B;CACxJ,IAAMC,IAAIJ,EAAU;CACpB,OACE,kBAACK,GAAD;EACE,OACEC,MAAS,KAAA,IAAYF,EAAE,8BAA8B,uBAAuB,EAAE,QAAK,CAAC,IAAIA,EAAE,wBAAwB,uBAAuB;GAAE;GAAM;EAAK,CAAC;EAEzJ,aAAaG;EACb,cACED,MAAS,KAAA,IAAYF,EAAE,gCAAgC,iBAAiB,EAAE,QAAK,CAAC,IAAIA,EAAE,0BAA0B,iBAAiB;GAAE;GAAM;EAAK,CAAC;EAEtI;EACX,MAAK;EACL,GAAKI,MAAY,UAAU,EAAE,aAAaC,EAAK,IAAI,CAAC;EACpD,GAAKC,IAAU,EAAE,WAAQ,IAAI,CAAC;EAC9B,GAAKC,MAAS,KAAA,IAAuB,CAAC,IAAZ,EAAE,QAAK;EACjC,GAAKC,IAAe,EAAE,gBAAa,IAAI,CAAC;EACxC,GAAKC,IAAS,EAAE,UAAO,IAAI,CAAC;CAC7B,CAAA;AAEL;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAe,cAAc"}
+{"version":3,"file":"delete-resource.js","names":["useUiText","KAESO_DELETE_RESOURCE_VARIANTS","KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS","DeleteResource","t","AlertDialog","verb","consequence","confirm","name","trigger","open","onOpenChange","inline"],"sources":["../../src/blocks/delete-resource/delete-resource.tsx"],"sourcesContent":["import { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport { AlertDialog } from \"../../components/dialog/dialog.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_DELETE_RESOURCE_VARIANTS = {\n  confirm: {\n    typed: { classes: \"\" },\n    simple: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS = { confirm: \"typed\" } as const;\n\nexport interface DeleteResourceProps {\n  kind: string;\n  name: string;\n  consequence: ReactNode;\n  verb?: string | undefined;\n  confirm?: keyof typeof KAESO_DELETE_RESOURCE_VARIANTS.confirm | undefined;\n  onConfirm: () => void | Promise<void>;\n  trigger?: ReactElement | undefined;\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  inline?: boolean | undefined;\n}\n\nexport const DeleteResource = /* @__PURE__ */ forwardRef<HTMLDivElement, DeleteResourceProps>(function DeleteResource(\n  { kind, name, consequence, verb, confirm = \"typed\", onConfirm, trigger, open, onOpenChange, inline },\n  ref,\n) {\n  const t = useUiText();\n  return (\n    <AlertDialog\n      ref={ref}\n      title={\n        verb === undefined ? t(\"deleteResource.deleteTitle\", \"Delete this {kind}?\", { kind }) : t(\"deleteResource.title\", \"{verb} this {kind}?\", { verb, kind })\n      }\n      description={consequence}\n      confirmLabel={\n        verb === undefined ? t(\"deleteResource.deleteConfirm\", \"Delete {kind}\", { kind }) : t(\"deleteResource.confirm\", \"{verb} {kind}\", { verb, kind })\n      }\n      onConfirm={onConfirm}\n      tone=\"danger\"\n      {...(confirm === \"typed\" ? { confirmText: name } : {})}\n      {...(trigger ? { trigger } : {})}\n      {...(open !== undefined ? { open } : {})}\n      {...(onOpenChange ? { onOpenChange } : {})}\n      {...(inline ? { inline } : {})}\n    />\n  );\n});\nif (process.env.NODE_ENV !== \"production\") DeleteResource.displayName = \"DeleteResource\";\n"],"mappings":";;;;;;AAIA,IAAaC,IAAiC,EAC5C,SAAS;CACP,OAAO,EAAE,SAAS,GAAG;CACrB,QAAQ,EAAE,SAAS,GAAG;AACxB,EACF,GACaC,IAAyC,EAAE,SAAS,QAAQ,GAe5DC,IAAiC,kBAAgD,SAC5F,EAAE,SAAM,SAAM,gBAAa,SAAM,aAAU,SAAS,cAAW,YAAS,SAAM,iBAAc,aAC5F,GACA;CACA,IAAMC,IAAIJ,EAAU;CACpB,OACE,kBAACK,GAAD;EACO;EACL,OACEC,MAAS,KAAA,IAAYF,EAAE,8BAA8B,uBAAuB,EAAE,QAAK,CAAC,IAAIA,EAAE,wBAAwB,uBAAuB;GAAE;GAAM;EAAK,CAAC;EAEzJ,aAAaG;EACb,cACED,MAAS,KAAA,IAAYF,EAAE,gCAAgC,iBAAiB,EAAE,QAAK,CAAC,IAAIA,EAAE,0BAA0B,iBAAiB;GAAE;GAAM;EAAK,CAAC;EAEtI;EACX,MAAK;EACL,GAAKI,MAAY,UAAU,EAAE,aAAaC,EAAK,IAAI,CAAC;EACpD,GAAKC,IAAU,EAAE,WAAQ,IAAI,CAAC;EAC9B,GAAKC,MAAS,KAAA,IAAuB,CAAC,IAAZ,EAAE,QAAK;EACjC,GAAKC,IAAe,EAAE,gBAAa,IAAI,CAAC;EACxC,GAAKC,IAAS,EAAE,UAAO,IAAI,CAAC;CAC7B,CAAA;AAEL,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAe,cAAc"}

package/dist/blocks/pages.js

@@ -1,7 +1,7 @@
 "use client";
 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 } from "../chunks/app-frame-DogGRmsu.js";
+import { r as n } from "../chunks/page-header-DL2y2iZp.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";

package/dist/blocks/resource-list.js

@@ -1,68 +1,69 @@
 "use client";
 import { i as e } from "../chunks/context-BELWW79w.js";
-import { i as t } from "../chunks/input-TyLIaQ5k.js";
-import { r as n } from "../chunks/toolbar-DL6zVrzU.js";
+import { o as t } from "../chunks/input-2VJuj_M4.js";
+import { r as n } from "../chunks/toolbar-WA_oZgu-.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";
+import { i, o as a } from "../chunks/list-M1csq-d4.js";
+import { forwardRef as o, useMemo as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/blocks/resource-list/resource-list.tsx
-var u = { grouping: {
+var d = { grouping: {
 	grouped: { classes: "" },
 	flat: { classes: "" }
-} }, d = { grouping: "grouped" };
-function f(e) {
+} }, f = { grouping: "grouped" };
+function p(e) {
 	return `${e.textValue ?? (typeof e.title == "string" ? e.title : "")} ${e.displayId ?? ""}`.toLowerCase();
 }
-function p({ groups: u, onOpen: d, bulkActions: p = [], toolbar: m, emptyTitle: h, emptyDescription: g, emptyAction: _, "aria-label": v }) {
-	let y = e(), [b, x] = s(""), [S, C] = s(/* @__PURE__ */ new Set()), w = b.trim().toLowerCase(), T = o(() => u.map((e) => ({
+var m = /* @__PURE__ */ o(function({ groups: o, onOpen: d, bulkActions: f = [], toolbar: m, emptyTitle: h, emptyDescription: g, emptyAction: _, "aria-label": v }, y) {
+	let b = e(), [x, S] = c(""), [C, w] = c(/* @__PURE__ */ new Set()), T = x.trim().toLowerCase(), E = s(() => o.map((e) => ({
 		...e,
-		items: e.items.filter((e) => !w || f(e).includes(w))
-	})).filter((e) => e.items.length > 0), [u, w]), E = o(() => {
-		let e = new Set(T.flatMap((e) => e.items.map((e) => e.id)));
-		return new Set([...S].filter((t) => e.has(t)));
-	}, [T, S]);
-	return /* @__PURE__ */ l("div", {
+		items: e.items.filter((e) => !T || p(e).includes(T))
+	})).filter((e) => e.items.length > 0), [o, T]), D = s(() => {
+		let e = new Set(E.flatMap((e) => e.items.map((e) => e.id)));
+		return new Set([...C].filter((t) => e.has(t)));
+	}, [E, C]);
+	return /* @__PURE__ */ u("div", {
+		ref: y,
 		className: "flex flex-col",
-		children: [/* @__PURE__ */ l(n, {
-			"aria-label": y("resourceList.filters", "Filters"),
+		children: [/* @__PURE__ */ u(n, {
+			"aria-label": b("resourceList.filters", "Filters"),
 			children: [
 				m,
-				/* @__PURE__ */ c(n.Spacer, {}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ l(n.Spacer, {}),
+				/* @__PURE__ */ l("div", {
 					className: "w-240",
-					children: /* @__PURE__ */ c(t, {
-						"aria-label": y("resourceList.search", "Search"),
-						placeholder: y("resourceList.search", "Search"),
-						value: b,
-						onChange: (e) => x(e.target.value),
-						onClear: () => x(""),
+					children: /* @__PURE__ */ l(t, {
+						"aria-label": b("resourceList.search", "Search"),
+						placeholder: b("resourceList.search", "Search"),
+						value: x,
+						onChange: (e) => S(e.target.value),
+						onClear: () => S(""),
 						shortcut: ["/"]
 					})
 				})
 			]
-		}), T.length === 0 ? /* @__PURE__ */ c(r, {
+		}), E.length === 0 ? /* @__PURE__ */ l(r, {
 			size: "md",
-			title: w ? y("resourceList.noMatches", "No matches") : h ?? y("resourceList.nothingHereYet", "Nothing here yet"),
-			...w ? { description: y("resourceList.tryShorterSearch", "Try a shorter search.") } : g ? { description: g } : {},
-			...!w && _ ? { actions: _ } : {}
-		}) : /* @__PURE__ */ c(i, {
+			title: T ? b("resourceList.noMatches", "No matches") : h ?? b("resourceList.nothingHereYet", "Nothing here yet"),
+			...T ? { description: b("resourceList.tryShorterSearch", "Try a shorter search.") } : g ? { description: g } : {},
+			...!T && _ ? { actions: _ } : {}
+		}) : /* @__PURE__ */ l(i, {
 			"aria-label": v,
-			groups: T,
-			selectable: p.length > 0,
-			selected: E,
-			onSelectedChange: C,
+			groups: E,
+			selectable: f.length > 0,
+			selected: D,
+			onSelectedChange: w,
 			...d ? { onOpen: d } : {},
-			selectionActions: p.map((e) => /* @__PURE__ */ c(a, {
+			selectionActions: f.map((e) => /* @__PURE__ */ l(a, {
 				...e.icon ? { icon: e.icon } : {},
-				onClick: () => e.onClick([...E]),
+				onClick: () => e.onClick([...D]),
 				children: e.label
 			}, e.label))
 		})]
 	});
-}
-process.env.NODE_ENV !== "production" && (p.displayName = "ResourceList");
+});
+process.env.NODE_ENV !== "production" && (m.displayName = "ResourceList");
 //#endregion
-export { d as KAESO_RESOURCE_LIST_DEFAULT_VARIANTS, u as KAESO_RESOURCE_LIST_VARIANTS, p as ResourceList };
+export { f as KAESO_RESOURCE_LIST_DEFAULT_VARIANTS, d as KAESO_RESOURCE_LIST_VARIANTS, m as ResourceList };
 
 //# sourceMappingURL=resource-list.js.map