@cueplusplus/ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,181 @@
 # @cueplusplus/ui
 
+## 0.10.0
+
+### Minor Changes
+
+- ddce99e: `@cueplusplus/ui/layout` — and the root barrel with it — now exports `Bento`, a grid of unequal
+  tiles whose span is a prop on the tile rather than a class you count out on the container.
+
+  **Nothing to do: it is a new export, and nothing that already compiled changed.** Adopt it where
+  you were writing a bare grid and hand-counting `col-span-*`:
+
+  ```tsx
+  import { Bento } from "@cueplusplus/ui/layout";
+
+  <Bento.Root cols={3} rows={2} gap={5}>
+    <Bento.Tile span={2} rowSpan={2} minHeight="hero" title="Kitchen sink">
+      Every component, on one page.
+    </Bento.Tile>
+    <Bento.Tile href="/docs/components" title="Components">
+      Props, variants and a live example.
+    </Bento.Tile>
+  </Bento.Root>;
+  ```
+
+  `Bento.Root` takes `cols` (2, 3 or 4; defaults to 3), `rows` (1–4), `dense`, and a `gap` off the
+  density space ladder (defaults to `4`). `Bento.Tile` takes a `span` (1–4) and a `rowSpan` (1–2)
+  from closed sets, plus `minHeight`, `eyebrow`, `title` and `meta`. The container clamps every span
+  to its own tracks on the way past — the columns always, and the rows wherever it declared any. The
+  column clamp is per breakpoint, because every bento is two tracks wide between 640 px and 1024 px
+  whatever it was asked for, and CSS Grid answers an over-wide span by growing an implicit track
+  rather than by refusing it.
+
+  Two things a props table cannot show you, both of them compile-time where a compiler can reach:
+
+  - **A tile is one thing or the other, in the type.** Either a **link** — `href`, optionally with
+    `render`, a router's own element which is cloned, keeps its own `href` because `next/link`
+    requires it to declare one, and has its `className` merged with the tile's rather than replaced
+    — whose whole surface is a single `<a>` and whose content is therefore static. Or a **panel**,
+    whose children may be live and whose link or control is a visible sibling in `action`. `href`
+    and `action` are mutually exclusive in the type, and a dev-time `console.error` names any tile
+    that puts an interactive child inside an anchor.
+  - **Static markup throughout** — no hooks and no `"use client"` — so a server component can draw a
+    bento without opening a client boundary. That is why the router escape hatch is an element to
+    clone rather than a render function: a directive is per module, and the hook that reads a render
+    function is a hook.
+
+  `manifest/manifest.json` and the new `manifest/components/bento.json` were regenerated with it.
+
+- 16d2cae: `@cueplusplus/ui/system` now exports `isSafeTokenValue(value: string): boolean` — whether a string
+  may be written into the density stylesheet `ThemeProvider` builds from its `overrides` prop.
+
+  **Nothing to do.** Nothing about that stylesheet changed: this is the rule `overridesCss()` has
+  always applied, exported. Adopt it if you assemble a `TokenOverrides` out of anything a person or
+  an API supplies, so a value is refused at your own input rather than discovered from a
+  `console.warn` one render later, with half of what you built never having reached the sheet:
+
+  ```ts
+  import {
+    isSafeTokenValue,
+    type TokenOverrides,
+  } from "@cueplusplus/ui/system";
+
+  isSafeTokenValue("Iosevka, monospace"); // → true
+  isSafeTokenValue("red;}"); // → false
+  ```
+
+  It lands against `./system`'s standing policy — that the prop's _shape_ is public while
+  `inlineOverrides()`, `overridesCss()` and `OverridesContext` stay internal, because a consumer
+  reaching for those would be writing the custom properties by hand — and it lands on the right side
+  of it: a _writer_ of custom properties is what the policy excludes, and a _reader_ that refuses a
+  value before it is ever written is the opposite of one. `@cueplusplus/ui/configurator`'s
+  `isSafeCssValue` is unchanged and unmoved; it is the same rule behind a subpath that also carries
+  `ThemeConfigurator`, `ExportDialog` and an optional `react-aria-components` peer, and a caller
+  that only wants the question answered should not have to take that graph to ask it.
+
+- 88cf751: The component manifest's `schemaVersion` is now `2`, and every `PropDoc` in it — root props and
+  every compound part's props alike — carries a required `control`: `{ kind, members?, min?, max?,
+nullable?, fixture? }`, where `kind` is one of `boolean`, `enum`, `number`, `string`, `node`,
+  `callback`, `array`, `object` or `opaque`. It answers the question `type` never could: _what edits
+  this prop_.
+
+  **What a reader of `manifest.json` must change: the version pin, and nothing else.** A consumer
+  that asserts `schemaVersion === 1` will reject every document this release publishes and has to
+  move to `2`; a consumer that ignores the field keeps working once the pin moves. Both published
+  manifests (`manifest/manifest.json` and every document under `manifest/components/`) were
+  regenerated, as was `manifest/tokens.json`, whose `schemaVersion` moves with them — so all three
+  have to be read at the same version.
+
+  A `variant` prop's `members` are its `cva` recipe's, in the recipe's order; a numeric literal union
+  carries its own `min`/`max`, and a prop whose JSDoc states a range with `@min`/`@max` carries that;
+  a union with an explicit `| null` is `nullable`.
+
+  ## Migrating
+  - **`type` is unchanged.** It still prints the TypeScript type verbatim, literal unions included,
+    and it is still the field to render when a reader wants to know what a prop _is_. `control` is a
+    new field beside it, not a replacement for it: nothing was renamed and nothing was removed.
+  - **A consumer pinned to `schemaVersion === 1` must move to `2`.** The number changed because
+    `control` is _required_: a consumer that reads it needs to know whether the document it fetched
+    has one, and an optional field could never tell it — absent would mean both "no control" and
+    "an older manifest". A consumer that ignores the field keeps working after changing the pin.
+
+### Patch Changes
+
+- c469f49: `Button` now **declares** `children` in `ButtonProps`, so the published manifest documents it and
+  the props table has a row for it.
+
+  **Nothing to do.** The component did not change — it has always taken children, through
+  `React.ComponentPropsWithoutRef<"button">`. What changed is what the package says about itself:
+  docgen documents a prop only where the library declares it, so the system's most used control
+  published no `children` at all. The page did not list it, and a propSet could not name it, which
+  is how `/play/button` came to preview an unlabelled `<button>` behind a standing accessibility
+  exemption. Declaring it is what lets that exemption expire.
+
+  If you read `manifest/components/button.json` to generate code or to drive a playground,
+  `children` is now in `props` and can be set like any other prop.
+
+- 481e8c5: `manifest/components/ledger.json` said `Ledger` could not fold. It can, and the note now says so.
+
+  **Nothing to do unless you read the manifest.** No API changed, no component moved, and nothing
+  you have written needs editing. The documentation that ships inside the package described the
+  plain bench as having "no disclosure anywhere — the ledger does not collapse", which was true
+  before 0.8.0 and false in it: `collapsible` puts a real
+  `button[aria-expanded aria-controls]` inside the `h2`/`h3` and folds the run of rows below it.
+
+  The corrected note says what shipped — folding is opt-in per heading, and a ledger nobody asks to
+  fold still emits no control and no expansion state at all. The manifest is the only published
+  surface this touches.
+
+- 64b4bab: Every package manifest's `repository` field now names `cueplusplus/cue-ui`, following the
+  repository's rename from an earlier working title.
+
+  **Nothing to do.** No code, no exports, no types, and no package name: the scope is the
+  organisation, not the repository, so every specifier you already import is the one you keep
+  importing. What moves is metadata — GitHub Packages matches a package to a repository through that
+  field, so from this release the "source" link on each package's registry page, and the repository
+  the next publish is attributed to, name `cue-ui`. The `directory` beside it is unchanged, so each
+  link still lands on that package rather than on the monorepo root.
+
+  If you have a bookmark or a script pointing at the old URL, GitHub's rename redirect answers it;
+  updating it to `https://github.com/cueplusplus/cue-ui` is tidiness rather than repair.
+
+- 3471a15: `tokensUsed` in the published component manifest is now scanned from code rather than from bytes,
+  so it stops attributing tokens to components that never resolve them.
+
+  **What to do: re-read the manifest before you trust a `tokensUsed` list you cached.** No API
+  changed and nothing you render moves, but the manifest says something different about 48 of 321
+  components, and the old answer was padded — in thirteen cases wholly wrong. If you read
+  `tokensUsed` to decide which tokens to define when restyling a component, the list you had was
+  too wide. It is narrower now, and true.
+
+  The scanner matched `--cue-*` anywhere in a file's text, comments included. A docblock sentence
+  naming a token published it as one the component uses, and a sentence arguing _against_ one
+  published the opposite of what it said: `forms/_chassis.ts` explains that the ring reads
+  `--cue-focus`, **not** `--cue-accent`, and eleven controls on that chassis published
+  `--cue-accent` because of it.
+
+  What moved, exactly:
+
+  - **Thirty-four components lose one to four tokens they never painted.**
+  - **Thirteen now correctly publish none** — `agent-surface`, `animated-number`,
+    `chart-container` and the ten container icons — because their lists were comment-derived in
+    their entirety: they paint through classes rather than resolving custom properties by name, and
+    the ten icons render no `className` at all. An empty array renders as no Tokens section rather
+    than an empty one, which is what the four components that already shipped one do.
+  - **One gains four.** `MarkdownText` painted `--cue-accent`, `--cue-fg`, `--cue-fg-muted` and
+    `--cue-fg-subtle` and published none of them: the literal pass pairs quotes across the whole
+    file, and the apostrophes in that file's prose desynced the pairing so the class strings below
+    were read as the insides of strings. Blanking the comments re-pairs them.
+  - **Two entries that were never tokens are gone**, `--cue-icon-` and `--cue-space-`: the regex had
+    been stopping at the `*` in `--cue-icon-*` and the `$` in `gap-(--cue-space-${n})`.
+
+- Updated dependencies [64b4bab]
+- Updated dependencies [362cdda]
+- Updated dependencies [c2238cc]
+  - @cueplusplus/tokens@0.10.0
+  - @cueplusplus/theme-base@1.0.1
+
 ## 0.9.0
 
 ### Minor Changes
@@ -289,6 +465,25 @@
 
 ### Patch Changes
 
+- edb938d: `Table.Row interactive` draws a focus ring. The prop supplied the
+  pointer half — the row-hover wash and a pointer cursor — and nothing for
+  focus, while the row-activation reading above tells a caller to put `tabIndex`
+  on the `<tr>` so `activateRowFromKeyDown` has something to fire on. The two
+  together made a row a keyboard user could reach and activate with nothing on
+  screen changing. **This is a WCAG 2.4.7 (Focus Visible, AA) fix you inherit by
+  upgrading.**
+
+  The ring is the one `Row` already draws: 2px solid in `--cue-accent`, pulled
+  inside the row by `-outline-offset-2` rather than floating outside it, because
+  these tables live in clipped panes and scroll regions where an outset ring on
+  the first or last row is cut off by the pane's own rim. It is `focus-visible`,
+  so a pointer press still paints nothing, and it rides on `interactive` alone:
+  a static table of figures is untouched. Nothing to change — and if you drew a
+  ring of your own on a focusable row, the library's is now under it.
+
+  Added after the fact: this shipped in 0.7.0 with no changeset, and a late entry
+  beats a hole in the record.
+
 - @cueplusplus/tokens@0.7.0
 
 ## 0.6.0

package/README.md

@@ -3,11 +3,45 @@
 Components for console software: dense, keyboard-first interfaces where a screen is mostly data.
 Base UI underneath for behaviour and accessibility, Tailwind v4 on top for the paint.
 
+## Install
+
+The `@cueplusplus` scope is served by **GitHub Packages**, not npmjs.com, and GitHub Packages
+authenticates *every* install. That is two settings, in two places, and the split is not
+cosmetic — pnpm ignores an env-expanded credential in a project `.npmrc` and the install fails
+with `401`.
+
+Commit the scope routing, and nothing else, at the root of your project:
+
+```ini
+# .npmrc
+@cueplusplus:registry=https://npm.pkg.github.com
+```
+
+Then write the credential once, at the **user** level, where pnpm reads it from. It is a
+**classic** personal access token with `read:packages` — GitHub Packages accepts neither
+fine-grained PATs nor OIDC:
+
+```sh
+pnpm config set //npm.pkg.github.com/:_authToken ghp_…
+```
+
 ```sh
 pnpm add @cueplusplus/ui @cueplusplus/tokens @cueplusplus/theme-cue @base-ui/react
 ```
 
+Three peers are required and declared: `react` ^19, `react-dom` ^19 and `@base-ui/react` ^1.7.
+`tailwindcss` ^4 is a declared peer too, but an optional one — needed for the default styling
+lane, and without it you own the CSS. Every other peer is optional and scoped to a subpath.
+`@cueplusplus/tokens` arrives as a dependency; installing it by name just makes the token
+constants importable in your own code. The theme package is not a peer at all — see below.
+
+CI, Vercel and the token's expiry are in
+[`docs/CONSUMING.md` §1](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#1-registry-access).
+
+## Quick start
+
 ```css
+/* app/globals.css */
 @import "tailwindcss";
 @import "@cueplusplus/ui/styles.css";
 @import "@cueplusplus/theme-cue/theme.css";
@@ -15,11 +49,16 @@ pnpm add @cueplusplus/ui @cueplusplus/tokens @cueplusplus/theme-cue @base-ui/rea
 
 ```tsx
 import cue from "@cueplusplus/theme-cue";
+import { Button } from "@cueplusplus/ui";
 import { ThemeProvider } from "@cueplusplus/ui/system";
 
-<ThemeProvider themes={[cue]} theme="cue" density="compact" mode="system">
-  <App />
-</ThemeProvider>;
+export default function App() {
+  return (
+    <ThemeProvider themes={[cue]} theme="cue" density="compact" mode="system">
+      <Button variant="primary">Run cue</Button>
+    </ThemeProvider>
+  );
+}
 ```
 
 The order of those three `@import`s is load-bearing, and the `themes` prop is not optional in
@@ -27,23 +66,66 @@ practice: this library contains no palette. Install and register a `@cueplusplus
 or every surface paints `@cueplusplus/theme-base`'s blank base — greys, one desaturated accent,
 the platform monospace — with nothing erroring to tell you.
 
+To stop the defaults flashing on first paint, add `prepaintScript()` beside the provider and hand
+both the same array — [§4 of `CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#4-the-provider)
+is the whole layout.
+
+## What it ships
+
 Common components come from the root entry. Groups that need an optional peer have a subpath of
-their own (`/charts`, `/date`, `/flow`, `/color`, `/agent-runtime`, and the rest), so importing a
-button never pulls a charting library into your bundle.
+their own, so importing a button never pulls a charting library into your bundle.
+
+| Import specifier | What is in it |
+| --- | --- |
+| `@cueplusplus/ui` | the root barrel: every component that costs no optional peer, the brand marks and the container icons included |
+| `@cueplusplus/ui/primitives` | the leaves: buttons, chips, avatars, dots and the two loading shapes |
+| `@cueplusplus/ui/forms` | everything a user types into, toggles, picks from or drags |
+| `@cueplusplus/ui/overlays` | everything that floats: dialogs, sheets, menus, tooltips, the command palette |
+| `@cueplusplus/ui/chrome` | console furniture: panels, rows, bars, tabs and the tree outline |
+| `@cueplusplus/ui/layout` | page structure: cards, stacks, grids, `Bento`, disclosure and the navigation shapes |
+| `@cueplusplus/ui/layout/carousel` | needs `embla-carousel-react` |
+| `@cueplusplus/ui/layout/resizable` | needs `react-resizable-panels` |
+| `@cueplusplus/ui/instruments` | the readouts: meters, sparklines, tables, logs and the two device frames |
+| `@cueplusplus/ui/instruments/data-table` | needs `@tanstack/react-table` |
+| `@cueplusplus/ui/instruments/log-viewer` | needs `@tanstack/react-virtual`, `anser` |
+| `@cueplusplus/ui/charts` | Recharts in this system's tokens, plus the categorical palette and the ramps; needs `recharts` |
+| `@cueplusplus/ui/date` | calendars, pickers and segmented date/time fields; needs `react-day-picker`, `date-fns`, `react-aria-components`, `@internationalized/date` |
+| `@cueplusplus/ui/color` | the picker suite the configurator edits with, hex and oklch; needs `react-aria-components` |
+| `@cueplusplus/ui/configurator` | the floating panel that edits the token layer live and exports what it edited; needs `react-aria-components` |
+| `@cueplusplus/ui/flow` | React Flow wearing the tokens: node cards, handles, signal-carrying wires; needs `@xyflow/react` (+ `./flow.css`) |
+| `@cueplusplus/ui/chat` | the multi-agent transcript: messages, composer, HITL questions, agent colour |
+| `@cueplusplus/ui/agent-runtime` | the streaming layer under Chat; needs `@assistant-ui/react` |
+| `@cueplusplus/ui/elements` | the agent's own surface, vendored from assistant-ui and repainted onto the tokens; needs `lucide-react` and `heat-graph` (+ `./elements.css`) |
+| `@cueplusplus/ui/elements/markdown` | `MarkdownText`; needs `react-markdown`, `rehype-sanitize` |
+| `@cueplusplus/ui/elements/generative` | the generative-UI renderer and its spec (+ `./elements/generative.css`) |
+| `@cueplusplus/ui/elements/replay` | the scripted session-replay frame |
+| `@cueplusplus/ui/dmx` | 512 bytes at wire rate: the bar, the strip, the patch bar, the channel grid |
+| `@cueplusplus/ui/midi` | sequencer instruments: keyboard, musical clock, ruler, analyser, threshold rail |
+| `@cueplusplus/ui/system` | `ThemeProvider`, `prepaintScript`, the `Density` island, the portal frame, `isSafeTokenValue` |
+| `@cueplusplus/ui/theming` | `createTheme()`, `contrastReport()` and the `--cue-*` vocabulary as constants |
+
+Four stylesheet exports. `@cueplusplus/ui/styles.css` is always imported; the other three are
+imported only if you use what they paint — `@cueplusplus/ui/elements.css`,
+`@cueplusplus/ui/flow.css` and `@cueplusplus/ui/elements/generative.css`.
 
 ## The machine-readable half
 
 This package ships its own manifest: `@cueplusplus/ui/manifest.json` is an index of every
 component with a SHA-256 for each companion document, and
 `@cueplusplus/ui/manifest/components/<name>.json` is one component in full — props, variants, the
-tokens it paints with, and the hand-written notes on when it is the wrong choice. An agent or a
-code generator should read that rather than guess a prop name.
+tokens it paints with, and the hand-written notes on when it is the wrong choice. Beside them,
+`@cueplusplus/ui/manifest/tokens.json` is the token vocabulary and
+`@cueplusplus/ui/manifest/fixtures.json` the playground fixture catalogue. An agent or a code
+generator should read those rather than guess a prop name.
 
 The same surfaces are published at <https://ui.cueplusplus.com>, with the docs site, the live
 kitchen sink and the CUE++ agent skills beside them.
 
-## Full documentation
+## Where the rest is
 
-- Installing and using it from another project: [`docs/CONSUMING.md`](https://github.com/cueplusplus/product-design-system/blob/main/docs/CONSUMING.md)
+- Installing and using it from another project: [`docs/CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md)
 - Every component, with props and a live example: <https://ui.cueplusplus.com/docs/components>
 - Theming, density and the `--cue-*` contract: <https://ui.cueplusplus.com/docs/theming>
+- The whole surface on one page: <https://ui.cueplusplus.com/kitchen-sink>
+- Every machine-readable surface, with copy-paste snippets: <https://ui.cueplusplus.com/ai>
+- What changed in the version you have: `node_modules/@cueplusplus/ui/CHANGELOG.md`

package/dist/index.d.ts

@@ -33,7 +33,7 @@ import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityTo
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./chrome/toolbar.js";
 import "./chrome/index.js";
 import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
-import { TokenOverrides } from "./system/overrides.js";
+import { TokenOverrides, isSafeTokenValue } from "./system/overrides.js";
 import { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./system/theme-provider.js";
 import { Autocomplete, AutocompleteProps } from "./forms/autocomplete.js";
 import { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from "./forms/button-group.js";
@@ -86,11 +86,12 @@ import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./instruments/tw
 import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./instruments/usage-chart.js";
 import "./instruments/index.js";
 import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps } from "./layout/accordion.js";
+import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./layout/stack.js";
+import { Bento, BentoColumns, BentoMinHeight, BentoRootProps, BentoRowSpan, BentoRows, BentoSpan, BentoTileProps } from "./layout/bento.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./layout/breadcrumb.js";
 import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./layout/card.js";
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./layout/collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./layout/description-list.js";
-import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./layout/stack.js";
 import { Grid, GridColumns, GridProps } from "./layout/grid.js";
 import { Item, ItemProps, itemVariants } from "./layout/item.js";
 import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./layout/pagination.js";
@@ -128,4 +129,4 @@ import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
 import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
 import { DensityEntry, DensityLevel, FontEntry, FontName, Mode, ThemeManifest, ThemeName } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };

package/dist/index.js

@@ -24,6 +24,7 @@ import { Separator } from "./primitives/separator.js";
 import { AppBar } from "./chrome/app-bar.js";
 import { Sidebar, useSidebar } from "./layout/sidebar.js";
 import { Density } from "./system/density.js";
+import { isSafeTokenValue } from "./system/overrides.js";
 import { DEFAULT_STORAGE_KEY, prepaintScript } from "./system/prepaint.js";
 import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
 import { ThemeProvider } from "./system/theme-provider.js";
@@ -85,11 +86,12 @@ import { TerminalFrame } from "./instruments/terminal-frame.js";
 import { TwoStepButton } from "./instruments/two-step-button.js";
 import { UsageChart } from "./instruments/usage-chart.js";
 import { Accordion } from "./layout/accordion.js";
+import { Stack } from "./layout/stack.js";
+import { Bento } from "./layout/bento.js";
 import { Breadcrumb } from "./layout/breadcrumb.js";
 import { Card } from "./layout/card.js";
 import { Collapsible, Disclosure } from "./layout/collapsible.js";
 import { DescriptionList } from "./layout/description-list.js";
-import { Stack } from "./layout/stack.js";
 import { Grid } from "./layout/grid.js";
 import { Item, itemVariants } from "./layout/item.js";
 import { Pagination, paginationRange } from "./layout/pagination.js";
@@ -113,4 +115,4 @@ import { Kbd } from "./primitives/kbd.js";
 import { Skeleton } from "./primitives/skeleton.js";
 import { useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };

package/dist/instruments/meter.d.ts

@@ -19,7 +19,11 @@ type MeterTone = "ok" | "busy" | "warn" | "danger";
  */
 type MeterProvenance = "vendor" | "estimated" | "unbounded" | "none";
 interface MeterProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
-  /** How full, 0–100. Clamped; a non-finite value reads as 0. */
+  /**
+   * How full, 0–100. Clamped; a non-finite value reads as 0.
+   * @min 0
+   * @max 100
+   */
   percent: number;
   /** Status colour for the fill. Defaults to `"ok"`. */
   tone?: MeterTone;

package/dist/layout/bento.d.ts

@@ -0,0 +1,144 @@
+import { SpaceStep } from "./stack.js";
+import * as React from "react";
+//#region src/layout/bento.d.ts
+/** How many columns the bento resolves to at `lg`. */
+type BentoColumns = 2 | 3 | 4;
+/** How many rows to declare, so a tall tile spans a track that exists. */
+type BentoRows = 1 | 2 | 3 | 4;
+/** How many columns one tile covers, before the container clamps it. */
+type BentoSpan = 1 | 2 | 3 | 4;
+/** How many rows one tile covers. */
+type BentoRowSpan = 1 | 2;
+/** How much height a tile reserves before its content arrives. */
+type BentoMinHeight = "none" | "half" | "hero";
+interface BentoRootProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** How many columns at `lg`. Defaults to `3`. Two from `sm`, one below it. */
+  cols?: BentoColumns;
+  /**
+   * How many rows to declare from `sm` up.
+   *
+   * Only worth setting where a tile spans rows: a `rowSpan` over implicit
+   * tracks sizes itself to the tile's own content, which is not a span.
+   */
+  rows?: BentoRows;
+  /** Pack later tiles into earlier holes instead of leaving them empty. */
+  dense?: boolean;
+  /** Which rung of the density space ladder to spend between tiles. Defaults to `4`. */
+  gap?: SpaceStep;
+  /** The tiles. Declared, so the manifest files it as a documented prop. */
+  children?: React.ReactNode;
+}
+/**
+ * What both tile variants share: the geometry, the four slots and the body.
+ *
+ * An `interface … extends Omit<…>` rather than a type alias over an
+ * intersection, for the same reason `PanelHeaderProps` and `ItemProps` are:
+ * `children` is a documented prop only where a component *declares* it, and a
+ * member of an intersection's object half is attributed to React's own
+ * declaration rather than to this file — so the alias form files every other
+ * slot and silently drops the body.
+ */
+interface BentoTileBase extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
+  /** How many columns to cover. Clamped by the container to its own `cols`. */
+  span?: BentoSpan;
+  /** How many rows to cover. Needs a container that declares them. */
+  rowSpan?: BentoRowSpan;
+  /** How much height to hold before the content arrives. Defaults to `"none"`. */
+  minHeight?: BentoMinHeight;
+  /** The qualifier above the name: an import specifier, a family, a device. */
+  eyebrow?: React.ReactNode;
+  /** The tile's name. Rendered as a `<span>`, never as a heading. */
+  title?: React.ReactNode;
+  /** The count beside the name — by convention a `<Chip variant="outline">`. */
+  meta?: React.ReactNode;
+  /** The summary and anything below it. */
+  children?: React.ReactNode;
+}
+/**
+ * A tile whose whole surface is one `<a>`.
+ *
+ * Its content is static: no control, no second link. HTML's content model for
+ * `<a>` is transparent *but* admits no interactive descendant and no `<a>`
+ * descendant, and `inert` changes focus, hit-testing and the accessibility tree
+ * while changing that content model not at all.
+ */
+type BentoLinkTileProps = BentoTileBase & {
+  /** Where the tile goes. Its presence is what makes the tile a link. */
+  href: string;
+  /**
+   * A router's own link element, cloned to carry the tile's classes and slots.
+   *
+   * The **element** form only, and never a render function: a function would
+   * buy a second calling convention at the price of this component's
+   * server-safety, because the hook that reads one is a hook. The element keeps
+   * its own `href` — `next/link` declares that prop required, so passing the
+   * tile's would make the tile the silent owner of a value the element has to
+   * declare anyway. Its own `className` is **merged** with the tile's rather
+   * than replaced by it, which is the other half of the same bargain: `href` is
+   * a value the element owns outright, and a class is one it adds to.
+   */
+  render?: React.ReactElement;
+  /** Never on a link tile: an `<a>` may not contain a control. */
+  action?: never;
+};
+/** A surface that may hold live children; its link or control is a visible sibling. */
+type BentoPanelTileProps = BentoTileBase & {
+  /** Never on a panel tile: `href` is what selects the link variant. */
+  href?: never;
+  /** Never on a panel tile: `render` belongs to the link variant. */
+  render?: never;
+  /** The tile's own link or control, rendered beside the count rather than around it. */
+  action?: React.ReactNode;
+};
+/** Props for {@link Bento.Tile}: a link tile, or a panel tile with an `action`. */
+type BentoTileProps = BentoLinkTileProps | BentoPanelTileProps;
+/**
+ * A grid of unequal tiles: per-item spans, clamped to the container's columns.
+ *
+ * Where `Grid` lays out cells it never touches, a bento's whole content is
+ * per-item — so the span is a prop on the tile, from a closed set, and the
+ * container clamps it on the way past. One column below `sm`, two from `sm`,
+ * the asked-for count from `lg`; the clamp is per breakpoint and not per
+ * `cols`, because every container is two tracks wide in between whatever it
+ * was asked for.
+ *
+ * **Static markup — no hooks, no `"use client"`, and it must stay that way.**
+ * A directive is per *module*, so a `Bento` built on `useRender` would open a
+ * client boundary in every server page that draws one. That is why the router
+ * escape hatch is `render`, an *element* that is cloned, rather than a render
+ * function; and why {@link Bento.Tile} is a discriminated union rather than a
+ * tile that decides at runtime what it is.
+ *
+ * `BentoTileProps` omits the native `title` from its `<div>` props, the same
+ * omission `PanelHeader` and `Item` make: `React.ComponentPropsWithoutRef<"div">`
+ * already declares `title?: string`, and narrowing it to a `ReactNode` without
+ * the `Omit` is TS2430.
+ *
+ * @example
+ * <Bento.Root cols={3} rows={2} gap={5}>
+ *   <Bento.Tile span={2} rowSpan={2} minHeight="hero" title="Kitchen sink">
+ *     Every component, on one page.
+ *   </Bento.Tile>
+ *   <Bento.Tile title="Themes" meta={<Chip variant="outline">10</Chip>} />
+ *   <Bento.Tile title="Density" meta={<Chip variant="outline">5</Chip>} />
+ * </Bento.Root>
+ * @example
+ * <Bento.Tile
+ *   href="/docs/components/grid"
+ *   render={<NextLink href="/docs/components/grid" />}
+ *   eyebrow="@cueplusplus/ui"
+ *   title="Grid"
+ * >
+ *   Equal columns, or as many as fit.
+ * </Bento.Tile>
+ * @example
+ * <Bento.Tile title="Signal" action={<Button onClick={apply}>Apply</Button>}>
+ *   <ThemeSwatches theme="signal" />
+ * </Bento.Tile>
+ */
+declare const Bento: {
+  Root: React.ForwardRefExoticComponent<BentoRootProps & React.RefAttributes<HTMLDivElement>>;
+  Tile: React.ForwardRefExoticComponent<BentoTileProps & React.RefAttributes<HTMLElement>>;
+};
+//#endregion
+export { Bento, BentoColumns, BentoMinHeight, BentoRootProps, BentoRowSpan, BentoRows, BentoSpan, BentoTileProps };