@cueplusplus/ui 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,147 @@
 # @cueplusplus/ui
 
+## 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/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".

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import { EmptyState, EmptyStateProps } from "./chrome/empty-state.js";
 import { Eyebrow, EyebrowProps } from "./chrome/eyebrow.js";
 import { Container, ContainerProps, ContainerWidth } from "./layout/container.js";
 import { Footer, FooterProps } from "./chrome/footer.js";
+import { Inspector, InspectorFooterProps, InspectorRootProps, InspectorRowProps, InspectorSectionProps } from "./chrome/inspector.js";
 import { NavigationMenu, NavigationMenuContentProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuListProps, NavigationMenuRootProps, NavigationMenuTriggerProps, NavigationMenuViewportProps } from "./chrome/navigation-menu.js";
 import { PageShell, PageShellProps, PageWidth } from "./chrome/page-shell.js";
 import { Panel, PanelHeader, PanelHeaderProps, PanelProps } from "./chrome/panel.js";
@@ -69,6 +70,7 @@ import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliT
 import "./icons/index.js";
 import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
 import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
+import { CodeBlock, CodeBlockProps } from "./instruments/code-block.js";
 import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
 import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./instruments/data-row.js";
@@ -95,6 +97,7 @@ import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, Des
 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";
+import { Preview, PreviewAxis, PreviewProps, PreviewResizeOptions } from "./layout/preview.js";
 import { Stepper, StepperProps, StepperState, StepperStep } from "./layout/stepper.js";
 import { StatusDot, StatusDotProps, StatusTone } from "./primitives/status-dot.js";
 import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./layout/timeline.js";
@@ -129,4 +132,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, 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 };
+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, CodeBlock, type CodeBlockProps, 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, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, 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, Preview, type PreviewAxis, type PreviewProps, type PreviewResizeOptions, 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 };