@cueplusplus/ui 0.9.0 → 0.11.0

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";
@@ -33,7 +34,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";
@@ -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";
@@ -86,14 +88,16 @@ 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";
+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";
@@ -128,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, 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, 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 };

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";
@@ -36,12 +37,13 @@ import { EmptyState } from "./chrome/empty-state.js";
 import { Eyebrow } from "./chrome/eyebrow.js";
 import { Container } from "./layout/container.js";
 import { Footer } from "./chrome/footer.js";
+import { SectionHeader } from "./chrome/section-header.js";
+import { Inspector } from "./chrome/inspector.js";
 import { NavigationMenu } from "./chrome/navigation-menu.js";
 import { PageShell } from "./chrome/page-shell.js";
 import { Panel, PanelHeader } from "./chrome/panel.js";
 import { Row, SeamList, rowVariants } from "./chrome/row.js";
 import { ScrollArea } from "./chrome/scroll-area.js";
-import { SectionHeader } from "./chrome/section-header.js";
 import { SegmentedControl } from "./chrome/segmented-control.js";
 import { StatusBar } from "./chrome/status-bar.js";
 import { ScrollableTabsList, Tabs } from "./chrome/tabs.js";
@@ -71,6 +73,7 @@ import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliT
 import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
 import { AppWindowFrame } from "./instruments/app-window-frame.js";
 import { CopyButton } from "./instruments/copy-button.js";
+import { CodeBlock } from "./instruments/code-block.js";
 import { DataRow } from "./instruments/data-row.js";
 import { DataTree } from "./instruments/data-tree.js";
 import { GroupBar } from "./instruments/group-bar.js";
@@ -85,14 +88,16 @@ 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";
+import { Preview } from "./layout/preview.js";
 import { Stepper } from "./layout/stepper.js";
 import { StatusDot } from "./primitives/status-dot.js";
 import { Timeline } from "./layout/timeline.js";
@@ -113,4 +118,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, CodeBlock, 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, Inspector, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Preview, 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/code-block.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+//#region src/instruments/code-block.d.ts
+interface CodeBlockProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The code. Printed verbatim, already dedented by whoever produced it; the copy button copies exactly this. */
+  code: string;
+  /** What the block is, in the caption strip: a filename, an example's title. Defaults to the language. */
+  label?: string;
+  /**
+   * The fence language, on the `<pre>` as `data-language`. Defaults to `"tsx"`.
+   * `"jsx"` turns on emphasis: tag names, attribute names and punctuation in
+   * three inks the theme already has. Every other value prints plain.
+   */
+  language?: string;
+}
+/**
+ * A block of code with a copy button and no syntax-highlighter palette.
+ *
+ * Every colour a token-driven site paints has to come from the token layer, and
+ * a highlighter theme is a second palette that would need porting to every
+ * preset before it could sit beside them — so there is none. What `language="jsx"`
+ * adds is emphasis in three inks the theme already has: tag names in `--cue-fg`,
+ * attribute names in `--cue-fg-muted`, punctuation in `--cue-fg-subtle`. Mono
+ * type, the sunken ground every input uses, and a copy button that works.
+ *
+ * No directive: the copy button is the only client code, and a server page can
+ * draw the rest.
+ *
+ * @example
+ * <CodeBlock label="install" code="pnpm add @cueplusplus/ui" language="sh" />
+ * @example
+ * <CodeBlock label="JSX" language="jsx" code={'<Button variant="primary">Take cue</Button>'} />
+ */
+declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CodeBlock, CodeBlockProps };

package/dist/instruments/code-block.js

@@ -0,0 +1,173 @@
+import { cn } from "../lib/cn.js";
+import { Panel } from "../chrome/panel.js";
+import { CopyButton } from "./copy-button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/code-block.tsx
+/** The three inks, and nothing else: a highlighter theme would be a second palette. */
+const INK = {
+	tag: "text-fg",
+	attr: "text-fg-muted",
+	punct: "text-fg-subtle"
+};
+/**
+* The end of a `{…}` expression starting at `start`, braces balanced; the
+* code's end if unclosed.
+*
+* A JS string literal inside the expression (`"…"`, `'…'`, `` `…` ``,
+* backslash escapes honoured) is skipped whole rather than scanned for
+* braces: `{"a { b"}` has a real `{` and a stray one sitting inside a string,
+* and only the first is the expression's own. Treating the string as opaque
+* is also what keeps `{"<b>hi</b>"}` a single span for the caller that uses
+* this to find where a JSX child expression ends — the `<b>` inside never
+* gets a chance to look like a tag.
+*/
+function expressionEnd(code, start) {
+	let depth = 0;
+	let index = start;
+	while (index < code.length) {
+		const ch = code[index];
+		if (ch === "\"" || ch === "'" || ch === "`") {
+			const quote = ch;
+			index += 1;
+			while (index < code.length && code[index] !== quote) index += code[index] === "\\" ? 2 : 1;
+			index += 1;
+			continue;
+		}
+		if (ch === "{") depth += 1;
+		else if (ch === "}") {
+			depth -= 1;
+			if (depth === 0) return index + 1;
+		}
+		index += 1;
+	}
+	return code.length;
+}
+/**
+* JSX, cut into the four kinds this block paints.
+*
+* A tag opens at `<` or `</` followed by a letter — so `a < b` is text — and
+* runs to `>` or `/>`. Inside it, a name is an attribute, `=` is punctuation,
+* and a quoted string or a balanced `{…}` is text. Outside a tag everything is
+* text, comments included — and a `{…}` expression child (`{"<b>hi</b>"}`, the
+* shape `JSON.stringify` produces) stays opaque too, found with the same
+* brace-and-string-aware scan as an attribute's expression value, so a `<`
+* sitting inside its string can never be mistaken for a tag opening. The
+* pieces concatenate back to the input exactly, which the suite asserts and
+* the copy button depends on.
+*/
+function jsxTokens(code) {
+	const tokens = [];
+	const push = (kind, from, to) => {
+		if (to <= from) return;
+		const last = tokens.at(-1);
+		if (kind === "text" && last?.kind === "text") last.text += code.slice(from, to);
+		else tokens.push({
+			kind,
+			text: code.slice(from, to),
+			at: from
+		});
+	};
+	let index = 0;
+	while (index < code.length) {
+		const open = /^<\/?(?=[A-Za-z])/.exec(code.slice(index));
+		if (open === null) {
+			let cursor = code[index] === "{" ? expressionEnd(code, index) : index + 1;
+			while (cursor < code.length) {
+				const ch = code[cursor];
+				if (ch === "{") {
+					cursor = expressionEnd(code, cursor);
+					continue;
+				}
+				if (ch === "<") break;
+				cursor += 1;
+			}
+			push("text", index, cursor);
+			index = cursor;
+			continue;
+		}
+		push("punct", index, index + open[0].length);
+		index += open[0].length;
+		const name = /^[A-Za-z][\w.]*/.exec(code.slice(index))[0];
+		push("tag", index, index + name.length);
+		index += name.length;
+		while (index < code.length) {
+			const rest = code.slice(index);
+			const space = /^\s+/.exec(rest);
+			const close = /^\/?>/.exec(rest);
+			const attribute = /^[^\s=>/"{]+/.exec(rest);
+			if (space !== null) {
+				push("text", index, index + space[0].length);
+				index += space[0].length;
+			} else if (close !== null) {
+				push("punct", index, index + close[0].length);
+				index += close[0].length;
+				break;
+			} else if (rest.startsWith("=")) {
+				push("punct", index, index + 1);
+				index += 1;
+			} else if (rest.startsWith("\"")) {
+				const quote = code.indexOf("\"", index + 1);
+				const end = quote === -1 ? code.length : quote + 1;
+				push("text", index, end);
+				index = end;
+			} else if (rest.startsWith("{")) {
+				const end = expressionEnd(code, index);
+				push("text", index, end);
+				index = end;
+			} else if (attribute !== null) {
+				push("attr", index, index + attribute[0].length);
+				index += attribute[0].length;
+			} else {
+				push("text", index, index + 1);
+				index += 1;
+			}
+		}
+	}
+	return tokens;
+}
+/**
+* A block of code with a copy button and no syntax-highlighter palette.
+*
+* Every colour a token-driven site paints has to come from the token layer, and
+* a highlighter theme is a second palette that would need porting to every
+* preset before it could sit beside them — so there is none. What `language="jsx"`
+* adds is emphasis in three inks the theme already has: tag names in `--cue-fg`,
+* attribute names in `--cue-fg-muted`, punctuation in `--cue-fg-subtle`. Mono
+* type, the sunken ground every input uses, and a copy button that works.
+*
+* No directive: the copy button is the only client code, and a server page can
+* draw the rest.
+*
+* @example
+* <CodeBlock label="install" code="pnpm add @cueplusplus/ui" language="sh" />
+* @example
+* <CodeBlock label="JSX" language="jsx" code={'<Button variant="primary">Take cue</Button>'} />
+*/
+const CodeBlock = React.forwardRef(function CodeBlock({ code, label, language = "tsx", className, ...elementProps }, ref) {
+	const body = language === "jsx" ? jsxTokens(code).map((token) => token.kind === "text" ? token.text : /* @__PURE__ */ jsx("span", {
+		"data-token": token.kind,
+		className: INK[token.kind],
+		children: token.text
+	}, token.at)) : code;
+	return /* @__PURE__ */ jsxs(Panel, {
+		...elementProps,
+		ref,
+		"data-slot": "code-block",
+		className: cn("bg-sunken", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-(--cue-space-4) border-b border-border px-(--cue-pad-row-x) py-(--cue-pad-row-y)",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "code-block-label",
+				className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase",
+				children: label ?? language
+			}), /* @__PURE__ */ jsx(CopyButton, { value: code })]
+		}), /* @__PURE__ */ jsx("pre", {
+			"data-language": language,
+			className: "overflow-x-auto p-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-relaxed text-fg",
+			children: /* @__PURE__ */ jsx("code", { children: body })
+		})]
+	});
+});
+//#endregion
+export { CodeBlock };

package/dist/instruments/index.d.ts

@@ -1,5 +1,6 @@
 import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
 import { AppWindowFrame, AppWindowFrameProps } from "./app-window-frame.js";
+import { CodeBlock, CodeBlockProps } from "./code-block.js";
 import { CopyButton, CopyButtonProps } from "./copy-button.js";
 import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./data-row.js";
 import { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState } from "./data-tree.js";
@@ -14,4 +15,4 @@ import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHead
 import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./terminal-frame.js";
 import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./two-step-button.js";
 import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./usage-chart.js";
-export { AppWindowFrame, type AppWindowFrameProps, CopyButton, type CopyButtonProps, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Meter, type MeterProps, type MeterProvenance, type MeterTone, Progress, type ProgressProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, Sparkline, type SparklineProps, Stat, type StatProps, type StatTone, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown };
+export { AppWindowFrame, type AppWindowFrameProps, CodeBlock, type CodeBlockProps, CopyButton, type CopyButtonProps, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Meter, type MeterProps, type MeterProvenance, type MeterTone, Progress, type ProgressProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, Sparkline, type SparklineProps, Stat, type StatProps, type StatTone, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown };

package/dist/instruments/index.js

@@ -1,6 +1,7 @@
 import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
 import { AppWindowFrame } from "./app-window-frame.js";
 import { CopyButton } from "./copy-button.js";
+import { CodeBlock } from "./code-block.js";
 import { DataRow } from "./data-row.js";
 import { DataTree } from "./data-tree.js";
 import { GroupBar } from "./group-bar.js";
@@ -14,4 +15,4 @@ import { Table, TableScrollRegion } from "./table.js";
 import { TerminalFrame } from "./terminal-frame.js";
 import { TwoStepButton } from "./two-step-button.js";
 import { UsageChart } from "./usage-chart.js";
-export { AppWindowFrame, CopyButton, DataRow, DataTree, GroupBar, Ledger, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TableScrollRegion, TerminalFrame, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown };
+export { AppWindowFrame, CodeBlock, CopyButton, DataRow, DataTree, GroupBar, Ledger, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TableScrollRegion, TerminalFrame, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown };

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;