@cueplusplus/ui 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,200 @@
 # @cueplusplus/ui
 
+## 0.11.1
+
+### Patch Changes
+
+- 8ddd141: The manifest's fixture catalogue grows from 18 entries to 106, and 76 props across 74 components
+  now name one in `control.fixture`. A code generator, playground or agent reading
+  `manifest/components/<name>.json` now finds a named sample for props such as `TodoList.items`,
+  `CodeDiff.lines`, `Combobox.items` and `Breadcrumb.items`, where before it found nothing to fill
+  them with.
+
+  **Nothing to do.** No prop, type or export changed, and apart from the one fix at the end of this
+  note this release touches only the files under `manifest/`. `@cueplusplus/tokens` and `@cueplusplus/brand-tokens` move to 0.11.1 with it,
+  as one fixed family, and neither changes.
+
+  `manifest/fixtures.json` gains 88 entries:
+
+  - **Six short text fixtures** (kind `node`): `text.heading`, `text.count`, `text.total`,
+    `text.detail`, `text.author` and `text.time` — a heading, a figure, the figure it is out of, a
+    qualifier under a figure, an author's name and a clock time. Like `children.label` in 0.11.0,
+    they are for a playground or propSet to pick by hand, and no prop's `control.fixture` names them.
+  - **82 data fixtures** (71 `array`, 11 `opaque`), each a sample taken from its component's own
+    documentation specimen: todo items, diff hunks, trace spans, log lines, chart points, sources,
+    threads, models and the like. 75 of them list the printed type they fit in `accepts` —
+    `agent.todos` accepts `readonly TodoItem[]`, `layout.show-crumbs` accepts
+    `readonly BreadcrumbItem[]` — and every one of those 75 is now the `control.fixture` of at least
+    one prop. The other seven (`agent.subagent-progress`, `agents.window-start`,
+    `agents.window-end`, `chrome.expanded-front`, `composer.model-names`,
+    `knowledge.rig-dashboard`, `knowledge.trait-labels`) claim no type, so they are only ever picked
+    by hand.
+
+  An entry carries an id, a kind, a label and `accepts`, never the value itself. The values live with
+  the tools that render or export them: the docs playground, and the studio, whose bridge
+  `@cueplusplus/studio-mcp` exports each one as code from 0.1.1.
+
+  In `manifest/components/`, every change adds a `control.fixture` to a prop that had none, and no
+  existing one moved. `Combobox.items` and `MultiSelect.items` share `forms.fixture-types`, and
+  `FlowGraph` (`nodes`, `edges`) and `SubagentList` (`agents`, `summaryAgent`) gain two each.
+  `manifest.json` changes only in the SHA-256 of each record that changed.
+
+  Two records also correct the specimen code they embed:
+
+  - `meter.json` passed `paceTick={50}`, but `paceTick` is how far through the window you are, from
+    0 to 1, so the example drew no tick. It now passes `0.6`, labelled "60% of period elapsed".
+  - `math-block.json`, and `frac.json`, `sub.json` and `sup.json`, which embed the same specimen,
+    now write `visibleSteps={3}` instead of `visibleSteps={MATH.length}`. The count is the same, but
+    a tool that reads only literals can now read it.
+
+  One fix: `ScrollAnchor` (`@cueplusplus/ui/elements`) now stops its append timer once every message
+  has landed, where before the timer went on firing every 1.3 seconds for as long as the element was
+  mounted, though nothing on screen changed.
+
+- @cueplusplus/tokens@0.11.1
+
+## 0.11.0
+
+### Minor Changes
+
+- 8a41dcb: Three new components — `Preview`, `Inspector` and `CodeBlock`, each also exported from the root
+  barrel — plus a layout fix to `Bento.Tile` and newly documented `aria-label` and `placeholder`
+  props on the text inputs and `Toggle`.
+
+  **Nothing to do: every addition is a new export, and nothing that already compiled changed.** The
+  snippets below are fragments; each component has a full, copy-paste quick start in the package
+  README (`node_modules/@cueplusplus/ui/README.md`).
+
+  **`Preview`** (`@cueplusplus/ui/layout`) frames one component: a stage that can carry its own
+  theme, a slot for tools at the top right, and a footer. `label` is required, because the frame is
+  a `role="group"` named by it.
+
+  ```tsx
+  import { Chip } from "@cueplusplus/ui";
+  import { Preview } from "@cueplusplus/ui/layout";
+
+  <Preview label="Chip preview" theme="terminal" density="compact" resizable>
+    <Chip tone="accent">Standby</Chip>
+  </Preview>;
+  ```
+
+  - **The stage is a theme island; the chrome is not.** `theme`, `mode`, `density` and `font` land
+    on the stage and nowhere else. `tools`, `footer`, the resize grips and anything they open stay in
+    the page's scope. With none of the four set, the stage carries no attribute at all and inherits
+    the page.
+  - **Naming a theme does not load it.** The stage is scoped with `[data-theme="<name>"]`, so that
+    theme's stylesheet (`@cueplusplus/theme-<name>/theme.css`) must already be on the page.
+  - A stage `mode` with no `theme` restates the page's theme beside it, and a stage `theme` with no
+    `mode` repeats the page's mode, because a theme's light block is one compound selector. A stage
+    `density` names the nearest theme, as `<Density>` does.
+  - Overlays opened on the stage follow its theme, mode and density. A font pairing stops at the
+    stage: portals keep the page's. A stage that sets `theme` or `mode` also keeps the page's
+    `ThemeProvider` `overrides` off those overlays, so a popover matches the stage it opened from.
+    Inside a stage whose `mode` is `"dark"` or `"light"`, `useTheme().resolvedMode` reports that
+    mode; with `"system"` it reports the page's.
+  - Changing `theme`, `mode`, `density` or `font` keeps the specimen mounted, so its uncontrolled
+    state — a typed value, an open disclosure — survives the switch.
+  - The specimen sits centred on a dot grid. One wider than the stage keeps its start edge in view
+    and the frame scrolls to the rest. The stage reserves a minimum height before its specimen
+    loads, and with no `footer` its bottom corners follow the frame's rounded border.
+  - **The tools never cover the specimen.** With `tools`, the stage reserves their corner: it pads
+    its top by the tools' whole depth, measured in the page's density where the tools are drawn,
+    so a stage given a `density` of its own still clears them. The stage reserves this space only
+    when `tools` is set; a Preview without tools draws exactly the same markup.
+
+  `resizable` makes the stage resizable by pointer and keyboard:
+
+  - `resizable` (`true`, or `{ axis, minWidth, maxWidth, minHeight, maxHeight }`) adds a grip on
+    each axis, within 160–1280 × 96–960 px by default; `axis: "x"` or `"y"` keeps one. Each edge grip
+    is a focusable `separator` valued in pixels: arrow keys step 8 px, Shift+arrow 64 px, and
+    Home/End jump to the bounds. A corner grip drags both axes with the pointer, a double-click
+    resets an axis (the corner resets both), and a `W × H` readout shows while dragging.
+  - A resizable Preview fills its container's width. Its width bound in force is the smaller of
+    `maxWidth` and the frame's own width, re-measured with a `ResizeObserver`, so it stays inside a
+    grid track as the viewport changes; a frame narrower than `minWidth` lowers the floor with it,
+    and a width a reader chose comes back when the track widens again. The height is bounded by
+    `maxHeight` alone, and a taller stage grows the frame.
+  - An axis nobody has resized follows the stage's natural size live — a specimen that grows after
+    it loads, a track that widens, a Preview mounted hidden and shown later — and is drawn within the
+    same bounds its grip announces, so the first key press or drag starts from what is on screen.
+  - Without `resizable` there are no grips, and nothing is measured or observed. `Preview` is a
+    client component (`"use client"`).
+
+  **`Inspector`** (`@cueplusplus/ui/chrome`) is the layout of a settings panel, a properties sidebar
+  or a wrench menu: titled sections of label-and-control rows, with a footer. The controls are the
+  library's own.
+
+  ```tsx
+  import { Inspector } from "@cueplusplus/ui/chrome";
+
+  <Inspector.Root>
+    <Inspector.Section label="Variants">
+      <Inspector.Row label="Size">
+        <SegmentedControl items={sizes} />
+      </Inspector.Row>
+      <Inspector.Row label="Label" htmlFor="label">
+        <Input id="label" />
+      </Inspector.Row>
+    </Inspector.Section>
+    <Inspector.Footer note="preset · primary" action={<Button>Reset</Button>} />
+  </Inspector.Root>;
+  ```
+
+  - `Inspector.Section` takes a `label`, drawn as a `SectionHeader` and used as the group's name.
+  - `Inspector.Row` is one column until the Inspector itself is 18rem wide, then label beside
+    control. It is a container query, so a row follows the width of the popover or sidebar it sits
+    in, not the viewport's.
+  - **How a row names its control.** With `htmlFor`, the label is a `<label>` for that id. Without
+    it, the row lays its `label` on the control as `aria-label`, but only when the control is a
+    single element not already named by `aria-label` or `aria-labelledby`; text, lists and fragments
+    are left as they are. The row has no role of its own and never names itself, so a
+    `SegmentedControl`, which is already a group, is not announced twice.
+  - `Inspector.Footer` puts a quiet `note` at the start and one `action` at the end. A lone `action`
+    still sits at the end edge.
+  - Static markup — no hooks, no `"use client"` — so a server component can render it.
+
+  **`CodeBlock`** (`@cueplusplus/ui/instruments`) is a block of code with a caption and a copy
+  button, and no syntax-highlighter palette.
+
+  ```tsx
+  import { CodeBlock } from "@cueplusplus/ui/instruments";
+
+  <CodeBlock
+    label="JSX"
+    language="jsx"
+    code={'<Button variant="primary">Take cue</Button>'}
+  />;
+  ```
+
+  - `code` is printed verbatim, and the copy button copies exactly that. `label` is the caption and
+    defaults to the language. `language` defaults to `"tsx"` and lands on the `<pre>` as
+    `data-language`.
+  - `language="jsx"` adds emphasis in three inks the theme already has: tag names in `--cue-fg`,
+    attribute names in `--cue-fg-muted`, punctuation in `--cue-fg-subtle`. It reads string literals
+    whole, so a brace or a `<` inside a quoted string does not break it, and a `{…}` expression child
+    stays plain. Every other language prints plain.
+  - No directive: the copy button is its only client code, so a server page can render the rest.
+
+  **Changes to existing components:**
+
+  - **`Bento.Tile`**: a long `eyebrow` now truncates on one line instead of running under the tile's
+    `meta` and `action` in a narrow track. This is the only runtime change to an existing component.
+  - **`Input`** (and with it `PasswordInput` and `SearchInput`) and **`Textarea`** now declare
+    `aria-label` and `placeholder` in their props, and **`Toggle`** declares `aria-label`. This is
+    documentation only: all of them were already accepted as inherited HTML attributes and forwarded
+    to the element, so nothing you pass behaves differently. They now have rows in the props table
+    and in the manifest.
+
+  **Manifest.** `manifest/manifest.json` indexes the three new components, and
+  `manifest/components/{preview,inspector,code-block}.json` are new. The records for `input`,
+  `password-input`, `search-input`, `textarea` and `toggle` were regenerated with their new rows.
+  `manifest/fixtures.json` gains `children.label` ("A short label"), a one-word text fixture for a
+  playground or propSet to pick by hand; no prop's `control.fixture` names it.
+
+### Patch Changes
+
+- @cueplusplus/tokens@0.11.0
+
 ## 0.10.0
 
 ### Minor Changes

package/README.md

@@ -81,11 +81,11 @@ their own, so importing a button never pulls a charting library into your bundle
 | `@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/chrome` | console furniture: panels, rows, bars, tabs, the tree outline and the `Inspector` layout |
+| `@cueplusplus/ui/layout` | page structure: cards, stacks, grids, `Bento`, the `Preview` frame, 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` | the readouts: meters, sparklines, tables, logs, `CodeBlock` 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` |
@@ -108,6 +108,112 @@ Four stylesheet exports. `@cueplusplus/ui/styles.css` is always imported; the ot
 imported only if you use what they paint — `@cueplusplus/ui/elements.css`,
 `@cueplusplus/ui/flow.css` and `@cueplusplus/ui/elements/generative.css`.
 
+## Showing a component: `Preview`, `Inspector`, `CodeBlock`
+
+Three pieces for a page that shows components rather than only using them — a docs page, a design
+review, a settings screen with a live sample. Each is exported from the root barrel as well as from
+its group's subpath, and none needs an optional peer.
+
+### `Preview` — one component on a stage
+
+From `@cueplusplus/ui/layout`. A frame with a stage for the specimen, a `tools` slot at the top
+right and a `footer`. `label` is required, because the frame is a `role="group"` named by it. The
+stage can carry its own `theme`, `mode`, `density` and `font`; with none of them set it carries no
+attribute and inherits the page.
+
+**A stage `theme` needs that theme's stylesheet on the page.** Naming a theme does not load it: the
+stage is scoped with `[data-theme="<name>"]`, so `@cueplusplus/theme-<name>/theme.css` has to be
+imported like any other palette, or the stage paints the blank base with nothing erroring. The
+example below shows `terminal` on a `cue` page, so both are imported and both are registered:
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@cueplusplus/ui/styles.css";
+@import "@cueplusplus/theme-cue/theme.css";
+@import "@cueplusplus/theme-terminal/theme.css";
+```
+
+```tsx
+import cue from "@cueplusplus/theme-cue";
+import terminal from "@cueplusplus/theme-terminal";
+import { Chip } from "@cueplusplus/ui";
+import { Preview } from "@cueplusplus/ui/layout";
+import { ThemeProvider } from "@cueplusplus/ui/system";
+
+export default function ChipPage() {
+  return (
+    <ThemeProvider themes={[cue, terminal]} theme="cue" density="compact" mode="system">
+      <Preview label="Chip preview" theme="terminal" resizable footer="terminal · compact">
+        <Chip tone="accent">Standby</Chip>
+      </Preview>
+    </ThemeProvider>
+  );
+}
+```
+
+- Only the stage changes theme. `tools`, `footer`, the resize grips and anything they open stay in
+  the page's theme, so the controls that drive a specimen always look like the page around them.
+- `resizable` adds a grip per axis, 160–1280 × 96–960 px by default, that works by pointer and by
+  keyboard (arrows step 8 px, Shift+arrow 64 px). Pass `{ axis, minWidth, maxWidth, minHeight,
+  maxHeight }` to narrow it. A resizable Preview fills its container's width.
+- It is a client component (`"use client"`).
+
+### `Inspector` — the layout of a settings panel
+
+From `@cueplusplus/ui/chrome`. Titled sections of label-and-control rows, then a footer — the shape
+of a properties sidebar or a wrench menu. The controls are the library's own.
+
+```tsx
+import { Button, Input, SegmentedControl } from "@cueplusplus/ui";
+import { Inspector } from "@cueplusplus/ui/chrome";
+
+const sizes = [
+  { value: "sm", label: "Small" },
+  { value: "md", label: "Medium" },
+  { value: "lg", label: "Large" },
+];
+
+export function ButtonInspector() {
+  return (
+    <Inspector.Root>
+      <Inspector.Section label="Variants">
+        <Inspector.Row label="Size">
+          <SegmentedControl items={sizes} defaultValue="md" />
+        </Inspector.Row>
+        <Inspector.Row label="Label" htmlFor="button-label">
+          <Input id="button-label" defaultValue="Run cue" />
+        </Inspector.Row>
+      </Inspector.Section>
+      <Inspector.Footer note="preset · primary" action={<Button size="sm">Reset</Button>} />
+    </Inspector.Root>
+  );
+}
+```
+
+- A row names its control. With `htmlFor` the label is a `<label>` for that id; without it the row
+  lays `label` on the control as `aria-label`, unless the control already names itself.
+- A row is one column until the Inspector is 18rem wide, then label beside control. It is a
+  container query, so it follows the popover or sidebar the Inspector sits in, not the viewport.
+- `Inspector` itself has no hooks and no `"use client"`, so a server component can render it.
+
+### `CodeBlock` — code with a caption and a copy button
+
+From `@cueplusplus/ui/instruments`.
+
+```tsx
+import { CodeBlock } from "@cueplusplus/ui/instruments";
+
+export function ButtonSource() {
+  return <CodeBlock label="button.tsx" language="jsx" code={'<Button variant="primary">Run cue</Button>'} />;
+}
+```
+
+- `code` is printed verbatim, and the copy button copies exactly that. `label` is the caption and
+  defaults to the language; `language` defaults to `"tsx"`.
+- There is no syntax-highlighter palette. `language="jsx"` picks out tag names, attribute names and
+  punctuation in three inks the theme already has; every other language prints plain.
+
 ## The machine-readable half
 
 This package ships its own manifest: `@cueplusplus/ui/manifest.json` is an index of every

package/dist/chrome/index.d.ts

@@ -6,6 +6,7 @@ import { AppShell, AppShellAsideProps, AppShellBarProps, AppShellBodyProps, AppS
 import { EmptyState, EmptyStateProps } from "./empty-state.js";
 import { Eyebrow, EyebrowProps } from "./eyebrow.js";
 import { Footer, FooterProps } from "./footer.js";
+import { Inspector, InspectorFooterProps, InspectorRootProps, InspectorRowProps, InspectorSectionProps } from "./inspector.js";
 import { NavigationMenu, NavigationMenuContentProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuListProps, NavigationMenuRootProps, NavigationMenuTriggerProps, NavigationMenuViewportProps } from "./navigation-menu.js";
 import { PageShell, PageShellProps, PageWidth } from "./page-shell.js";
 import { Panel, PanelHeader, PanelHeaderProps, PanelProps } from "./panel.js";
@@ -19,4 +20,4 @@ import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsP
 import { TitleBar, TitleBarProps } from "./title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./tree.js";
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./toolbar.js";
-export { 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, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };
+export { 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, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/index.js

@@ -5,16 +5,17 @@ import { AppShell } from "./app-shell.js";
 import { EmptyState } from "./empty-state.js";
 import { Eyebrow } from "./eyebrow.js";
 import { Footer } from "./footer.js";
+import { SectionHeader } from "./section-header.js";
+import { Inspector } from "./inspector.js";
 import { NavigationMenu } from "./navigation-menu.js";
 import { PageShell } from "./page-shell.js";
 import { Panel, PanelHeader } from "./panel.js";
 import { Row, SeamList, rowVariants } from "./row.js";
 import { ScrollArea } from "./scroll-area.js";
-import { SectionHeader } from "./section-header.js";
 import { SegmentedControl } from "./segmented-control.js";
 import { StatusBar } from "./status-bar.js";
 import { ScrollableTabsList, Tabs } from "./tabs.js";
 import { TitleBar } from "./title-bar.js";
 import { Tree, TreeVisibilityToggle } from "./tree.js";
 import { Toolbar } from "./toolbar.js";
-export { AppBar, AppShell, EmptyState, Eyebrow, Footer, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };
+export { AppBar, AppShell, EmptyState, Eyebrow, Footer, Inspector, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/inspector.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+//#region src/chrome/inspector.d.ts
+interface InspectorRootProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The sections, then the footer. */
+  children?: React.ReactNode;
+}
+interface InspectorSectionProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The section's title — "Variants", "Stage". Drawn by a `SectionHeader` and read as the group's name. */
+  label: string;
+  /** The section's rows. */
+  children?: React.ReactNode;
+}
+interface InspectorRowProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * What the control sets — "Size", "Theme". Drawn before it, and read as its
+   * name: a `<label>` for it when `htmlFor` is given, and otherwise laid on
+   * the control as `aria-label`, unless the control already names itself.
+   */
+  label: string;
+  /** The control's `id`, when it takes one: the label then becomes a `<label>` for it. */
+  htmlFor?: string;
+  /** The control — one element, any of the library's own. A row names a single control. */
+  children?: React.ReactNode;
+}
+interface InspectorFooterProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** A quiet line on the left: which preset this is, or that none matches. */
+  note?: React.ReactNode;
+  /** The footer's one action, on the right — by convention a small `Button`. */
+  action?: React.ReactNode;
+}
+/**
+ * The shape a settings panel, a properties sidebar and a wrench menu share:
+ * titled sections of label-and-control rows, with a footer.
+ *
+ * Layout and nothing else — the controls are the library's own. A section is
+ * a group headed by a `SectionHeader`; a row is a label then its control, one
+ * column in a narrow container and two from 18rem; the footer holds a quiet
+ * note and one action.
+ *
+ * **Static markup — no hooks, no `"use client"`**, so a server page can draw
+ * one. Labels are strings for the same reason: a row with no `htmlFor` lays its
+ * label on its control as `aria-label`, rather than pointing at an id nobody
+ * has generated. The row itself carries no role.
+ *
+ * @example
+ * <Inspector.Root>
+ *   <Inspector.Section label="Variants">
+ *     <Inspector.Row label="Size"><SegmentedControl items={sizes} /></Inspector.Row>
+ *     <Inspector.Row label="Label" htmlFor="label"><Input id="label" /></Inspector.Row>
+ *   </Inspector.Section>
+ *   <Inspector.Footer note="preset · button-hero" action={<Button size="sm">Reset</Button>} />
+ * </Inspector.Root>
+ */
+declare const Inspector: {
+  Root: React.ForwardRefExoticComponent<InspectorRootProps & React.RefAttributes<HTMLDivElement>>;
+  Section: React.ForwardRefExoticComponent<InspectorSectionProps & React.RefAttributes<HTMLDivElement>>;
+  Row: React.ForwardRefExoticComponent<InspectorRowProps & React.RefAttributes<HTMLDivElement>>;
+  Footer: React.ForwardRefExoticComponent<InspectorFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Inspector, InspectorFooterProps, InspectorRootProps, InspectorRowProps, InspectorSectionProps };

package/dist/chrome/inspector.js

@@ -0,0 +1,121 @@
+import { cn } from "../lib/cn.js";
+import { SectionHeader } from "./section-header.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/inspector.tsx
+/** A size container, so a row's two columns depend on the inspector's width and not the page's. */
+const ROOT_CLASS = "@container flex min-w-0 flex-col";
+const SECTION_CLASS = "flex flex-col gap-(--cue-space-3) border-t border-border px-(--cue-space-4) py-(--cue-space-3) first:border-t-0";
+/** Static literals: Tailwind scans source text, not computed strings. */
+const ROW_CLASS = "grid grid-cols-1 gap-(--cue-space-2) @min-[18rem]:grid-cols-[6rem_minmax(0,1fr)] @min-[18rem]:items-center";
+const LABEL_CLASS = "text-(length:--cue-text-ui) text-fg-muted";
+const FOOTER_CLASS = "flex items-center justify-between gap-(--cue-space-3) border-t border-border px-(--cue-space-4) py-(--cue-space-3)";
+const NOTE_CLASS = "min-w-0 truncate font-mono text-(length:--cue-text-label) text-fg-subtle";
+/** `ms-auto` so a lone action still sits at the end edge: `space-between` alone puts a single flex child at the start. */
+const FOOTER_ACTION_CLASS = "ms-auto";
+/**
+* A row's words, laid on its control as the control's own name.
+*
+* A row with no `htmlFor` has no id to point a `<label>` at, and generating one
+* would take `useId` — a hook, and with it this module's place in a server
+* component. So the control is cloned with `aria-label={label}`: cloning is not
+* a hook, which is why `Bento.Tile` clones its `render` link the same way. A
+* control that already names itself keeps its name. Anything that is not one
+* element — text, a list, a fragment — is left as it is, because an
+* `aria-label` on a fragment is an attribute on nothing.
+*
+* The row itself carries no role. A `SegmentedControl` is already a group, and
+* a row that named itself a group with the same words would be two groups with
+* one name, announced twice.
+*/
+function nameControl(control, label) {
+	if (!React.isValidElement(control) || control.type === React.Fragment) return control;
+	if (control.props["aria-label"] !== void 0 || control.props["aria-labelledby"] !== void 0) return control;
+	return React.cloneElement(control, { "aria-label": label });
+}
+/**
+* The shape a settings panel, a properties sidebar and a wrench menu share:
+* titled sections of label-and-control rows, with a footer.
+*
+* Layout and nothing else — the controls are the library's own. A section is
+* a group headed by a `SectionHeader`; a row is a label then its control, one
+* column in a narrow container and two from 18rem; the footer holds a quiet
+* note and one action.
+*
+* **Static markup — no hooks, no `"use client"`**, so a server page can draw
+* one. Labels are strings for the same reason: a row with no `htmlFor` lays its
+* label on its control as `aria-label`, rather than pointing at an id nobody
+* has generated. The row itself carries no role.
+*
+* @example
+* <Inspector.Root>
+*   <Inspector.Section label="Variants">
+*     <Inspector.Row label="Size"><SegmentedControl items={sizes} /></Inspector.Row>
+*     <Inspector.Row label="Label" htmlFor="label"><Input id="label" /></Inspector.Row>
+*   </Inspector.Section>
+*   <Inspector.Footer note="preset · button-hero" action={<Button size="sm">Reset</Button>} />
+* </Inspector.Root>
+*/
+const Inspector = {
+	Root: React.forwardRef(function InspectorRoot({ className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			...elementProps,
+			ref,
+			"data-slot": "inspector",
+			className: cn(ROOT_CLASS, className),
+			children
+		});
+	}),
+	Section: React.forwardRef(function InspectorSection({ label, className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			...elementProps,
+			ref,
+			role: "group",
+			"aria-label": label,
+			"data-slot": "inspector-section",
+			className: cn(SECTION_CLASS, className),
+			children: [/* @__PURE__ */ jsx(SectionHeader, { label }), children]
+		});
+	}),
+	Row: React.forwardRef(function InspectorRow({ label, htmlFor, className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			...elementProps,
+			ref,
+			"data-slot": "inspector-row",
+			className: cn(ROW_CLASS, className),
+			children: [htmlFor === void 0 ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "inspector-row-label",
+				className: LABEL_CLASS,
+				children: label
+			}) : /* @__PURE__ */ jsx("label", {
+				"data-slot": "inspector-row-label",
+				htmlFor,
+				className: LABEL_CLASS,
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				"data-slot": "inspector-row-control",
+				className: "min-w-0",
+				children: htmlFor === void 0 ? nameControl(children, label) : children
+			})]
+		});
+	}),
+	Footer: React.forwardRef(function InspectorFooter({ note, action, className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			...elementProps,
+			ref,
+			"data-slot": "inspector-footer",
+			className: cn(FOOTER_CLASS, className),
+			children: [note === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "inspector-footer-note",
+				className: NOTE_CLASS,
+				children: note
+			}), action === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "inspector-footer-action",
+				className: FOOTER_ACTION_CLASS,
+				children: action
+			})]
+		});
+	})
+};
+//#endregion
+export { Inspector };

package/dist/elements/scroll-anchor.js

@@ -27,8 +27,9 @@ function ScrollAnchor({ messages, paused = false, onSettled, className, ...props
 	const [count, setCount] = useState(INITIAL_COUNT);
 	const [pinned, setPinned] = useState(true);
 	const [seenCount, setSeenCount] = useState(INITIAL_COUNT);
+	const settled = count >= messages.length;
 	useEffect(() => {
-		if (paused) return;
+		if (paused || settled) return;
 		if (reduced) {
 			setCount(messages.length);
 			return;
@@ -42,8 +43,9 @@ function ScrollAnchor({ messages, paused = false, onSettled, className, ...props
 		return () => clearInterval(id);
 	}, [
 		messages.length,
+		reduced,
 		paused,
-		reduced
+		settled
 	]);
 	useEffect(() => {
 		if (count >= messages.length && pinned) onSettled?.();

package/dist/forms/input.d.ts

@@ -10,6 +10,18 @@ interface InputProps extends Omit<Input.Props, "className" | "size"> {
    * attribute (a character count), which nothing in a token-driven layout wants.
    */
   size?: FormControlSize;
+  /**
+   * Accessible name for the input, when no `FieldLabel` names it. Declared here
+   * rather than left to the inherited attribute so the props table carries the
+   * row: a bare input outside a `Field` has no other way to be named.
+   */
+  "aria-label"?: string;
+  /**
+   * An example of what goes in the field, shown while it is empty. Not a name:
+   * it disappears on the first keystroke, so pair it with `aria-label` or a
+   * `FieldLabel`. Declared for the props-table row, as `aria-label` is above.
+   */
+  placeholder?: string;
 }
 /**
  * The single-line text control.

package/dist/forms/textarea.d.ts

@@ -5,6 +5,18 @@ interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
   className?: string;
   /** Visible rows before the box starts scrolling. Defaults to `3`. */
   rows?: number;
+  /**
+   * Accessible name for the textarea, when no `FieldLabel` names it. Declared
+   * here rather than left to the inherited attribute so the props table carries
+   * the row: a bare textarea outside a `Field` has no other way to be named.
+   */
+  "aria-label"?: string;
+  /**
+   * An example of what goes in the box, shown while it is empty. Not a name:
+   * it disappears on the first keystroke, so pair it with `aria-label` or a
+   * `FieldLabel`. Declared for the props-table row, as `aria-label` is above.
+   */
+  placeholder?: string;
 }
 /**
  * The multi-line text control.

package/dist/forms/toggle.d.ts

@@ -18,6 +18,12 @@ interface ToggleProps extends Omit<Toggle.Props, "className"> {
   icon?: React.ElementType;
   /** The label. Leave it off for an icon-only toggle — and then pass `aria-label`. */
   children?: React.ReactNode;
+  /**
+   * Accessible name. An icon-only toggle has no text to be named by, so this is
+   * its name; declared here rather than left to the inherited attribute so the
+   * props table carries the row the sentence above tells a caller to pass.
+   */
+  "aria-label"?: string;
 }
 /**
  * A two-state button: solo, mute, snap-to-grid, "show hidden".