@cueplusplus/ui 0.1.0 → 0.3.0

package/dist/chrome/toolbar.d.ts

@@ -1,9 +1,31 @@
+import { BarOverflow } from "./_edge-scroller.js";
 import * as React from "react";
 import { Toolbar } from "@base-ui/react/toolbar";
 //#region src/chrome/toolbar.d.ts
 interface ToolbarRootProps extends Omit<Toolbar.Root.Props, "className"> {
   /** Extra classes for the bar. */
   className?: string;
+  /**
+   * What the bar does when its controls do not fit. Defaults to `"scroll"`.
+   *
+   * `"scroll"` is the library's one overflow behaviour (see
+   * `./_edge-scroller` for why it is scrolling rather than wrapping or a "more"
+   * menu): the bar keeps its single chrome-rung height, the controls scroll
+   * inside it, the overflowing edge is faded and a pager chevron appears there.
+   * A bar whose controls all fit renders exactly as it did before — no mask, no
+   * chevrons, no compositing layer.
+   *
+   * `"clip"` restores the old behaviour and adds no wrapper element, for a bar
+   * that is already inside something which scrolls.
+   *
+   * A vertical toolbar ignores this: the affordance is horizontal, and a
+   * vertical bar overflows on the axis this does not measure.
+   */
+  overflow?: BarOverflow;
+  /** Accessible name for the chevron that reveals controls off the leading edge. */
+  previousLabel?: string;
+  /** Accessible name for the chevron that reveals controls off the trailing edge. */
+  nextLabel?: string;
 }
 interface ToolbarButtonProps extends Omit<Toolbar.Button.Props, "className"> {
   /** Extra classes for the button. */

package/dist/chrome/toolbar.js

@@ -1,5 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
@@ -21,12 +23,31 @@ import { Toolbar } from "@base-ui/react/toolbar";
 * </Toolbar.Root>
 */
 const Toolbar$1 = {
-	Root: React.forwardRef(function ToolbarRoot({ className, ...elementProps }, ref) {
-		return /* @__PURE__ */ jsx(Toolbar.Root, {
-			ref,
+	Root: React.forwardRef(function ToolbarRoot({ className, overflow = "scroll", previousLabel = "Show earlier controls", nextLabel = "Show later controls", ...elementProps }, ref) {
+		const scrolls = overflow === "scroll" && elementProps.orientation !== "vertical";
+		const scroll = useEdgeScroll(scrolls);
+		const barRef = useComposedRefs(ref, scroll.ref);
+		const bar = /* @__PURE__ */ jsx(Toolbar.Root, {
+			ref: barRef,
 			"data-slot": "toolbar",
-			className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-2) border-b border-border bg-surface-1 px-(--cue-pad-row-x) data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-(--cue-chrome-toolbar) data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0", className),
-			...elementProps
+			className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-2) border-b border-border bg-surface-1 px-(--cue-pad-row-x) data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-(--cue-chrome-toolbar) data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0", scrolls ? EDGE_SCROLLER_CLASSES : null, className),
+			...elementProps,
+			style: {
+				...elementProps.style,
+				...scroll.style
+			}
+		});
+		if (!scrolls) return bar;
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "toolbar-frame",
+			className: "relative w-full min-w-0 shrink-0",
+			children: [bar, /* @__PURE__ */ jsx(EdgeChevrons, {
+				edges: scroll.edges,
+				onNudge: scroll.nudge,
+				previousLabel,
+				nextLabel,
+				className: "bottom-px bg-surface-1"
+			})]
 		});
 	}),
 	Button: React.forwardRef(function ToolbarButton({ className, icon: Icon, children, ...elementProps }, ref) {

package/dist/configurator/_overrides.js

@@ -1,5 +1,5 @@
 import { BASE_FONT_STACKS, DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, THEME_COLOR_TOKENS, THEME_PRESETS } from "../theming/_presets.js";
-import { THEME_NAME_PATTERN, assertCssValue, serializeThemeBlock, tokenProperty } from "../theming/serialize.js";
+import { THEME_NAME_PATTERN, assertCssValue, serializeSystemModeAliases, serializeThemeBlock, tokenProperty } from "../theming/serialize.js";
 //#region src/configurator/_overrides.ts
 /**
 * The override model behind the theme configurator: what a user may move, where
@@ -63,8 +63,10 @@ const OVERRIDE_BANNER = "@cueplusplus/ui — theme configurator overrides";
 */
 const DENSITY_FACTOR = {
 	"ultra-compact": .85,
-	"normal": 1,
-	"large": 1.3
+	"compact": 1,
+	"normal": 1.3,
+	"large": 1.6,
+	"ultra-large": 1.9
 };
 /** The authored label tracking, and the value the "reset" arrow returns to. */
 const BASE_TRACKING_LABEL = "0.12em";
@@ -336,17 +338,23 @@ const INLINE_COMMENT = "the provider inlines this one; !important is the only le
 */
 function serializeOverrideCss(overrides, options = {}) {
 	const blocks = [];
+	const aliases = /* @__PURE__ */ new Map();
 	for (const key of Object.keys(overrides.themes).toSorted()) {
 		const scope = parseScopeKey(key);
 		const declarations = orderedDeclarations(overrides.themes[key] ?? {});
 		if (scope === null || declarations.length === 0) continue;
+		const sections = [{
+			comment: blocks.length === 0 ? THEME_COMMENT : void 0,
+			declarations
+		}];
 		blocks.push({
 			selector: overrideSelector(scope.theme, scope.mode),
-			sections: [{
-				comment: blocks.length === 0 ? THEME_COMMENT : void 0,
-				declarations
-			}]
+			sections
 		});
+		aliases.set(scope.theme, [...aliases.get(scope.theme) ?? [], {
+			mode: scope.mode,
+			sections
+		}]);
 	}
 	const global = orderedDeclarations(overrides.global);
 	const scaledDeclarations = global.filter(([property]) => tokenKind(property) === "scaled");
@@ -374,7 +382,13 @@ function serializeOverrideCss(overrides, options = {}) {
 		}]
 	});
 	if (blocks.length === 0) return "";
-	return `${[...options.banner === void 0 ? [] : [`/*! ${options.banner}\n * Written by <ThemeConfigurator>. Paste it, do not edit it.\n */`], ...blocks.map(serializeThemeBlock)].join("\n\n")}\n`;
+	const banner = options.banner === void 0 ? [] : [`/*! ${options.banner}\n * Written by <ThemeConfigurator>. Paste it, do not edit it.\n */`];
+	const systemAliases = [...aliases.entries()].map(([theme, modes]) => serializeSystemModeAliases(theme, modes));
+	return `${[
+		...banner,
+		...blocks.map(serializeThemeBlock),
+		...systemAliases
+	].join("\n\n")}\n`;
 }
 /**
 * The stylesheet the panel applies — and, byte for byte, the one its CSS export

package/dist/configurator/configurator.js

@@ -4,8 +4,8 @@ import { Button } from "../primitives/button.js";
 import { Chip } from "../primitives/chip.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { overlaySurfaceClasses } from "../overlays/_surface.js";
-import { TwoStepButton } from "../instruments/two-step-button.js";
 import { IconButton } from "../primitives/icon-button.js";
+import { TwoStepButton } from "../instruments/two-step-button.js";
 import { useTheme } from "../system/use-theme.js";
 import { DEFAULT_CONFIGURATOR_STORAGE_KEY, EMPTY_OVERRIDES, applyOverrideCss, clearOverride, configuratorCss, defaultSnapshot, isOverridden, overrideCount, readSnapshot, removeOverrideStyles, resolveValue, resolvedTokens, setOverride, writeSnapshot } from "./_overrides.js";
 import { ChevronGlyph, DockGlyph, GripGlyph } from "./_glyphs.js";

package/dist/configurator/panel-sections.js

@@ -39,11 +39,17 @@ const MODE_ITEMS = [
 		label: "System"
 	}
 ];
-/** Short labels for a 19rem panel; the values are the ladder's own names. */
+/**
+* Labels for a 19rem panel. Five rungs will not fit as words — `Ultra-compact`
+* and `Ultra-large` alone are 25 characters — so the segmented control wears
+* the garment sizes and the value it sets is still the ladder's own name.
+*/
 const DENSITY_LABELS = {
-	"ultra-compact": "Ultra",
-	"normal": "Normal",
-	"large": "Large"
+	"ultra-compact": "XS",
+	"compact": "S",
+	"normal": "M",
+	"large": "L",
+	"ultra-large": "XL"
 };
 /** Bounds of the text-scale knob, from spec §6's `fontScale`. */
 const FONT_SCALE = {

package/dist/dmx/channel-matrix.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { usePrefersReducedMotion } from "../instruments/_motion.js";
-import { useComposedRefs } from "../lib/compose.js";
 import { DMX_RAMP_NAMES, activeChannels, dmxPalette, dmxPaletteColor, dmxPaletteInk } from "./_ramp.js";
 import { DmxReadout } from "./_readout.js";
 import * as React from "react";

package/dist/forms/otp-field.js

@@ -37,7 +37,7 @@ const OTPField$1 = React.forwardRef(function OTPField$2({ length = 6, size = "md
 		length,
 		"aria-label": ariaLabel,
 		"data-slot": "otp-field",
-		className: cn("flex items-center gap-(--cue-space-2)", className),
+		className: cn("relative flex items-center gap-(--cue-space-2)", className),
 		...elementProps,
 		children: [ariaLabel === void 0 ? null : /* @__PURE__ */ jsx("label", {
 			htmlFor: fieldId,

package/dist/index.d.ts

@@ -7,9 +7,17 @@ import { Message, MessageProps, MessageRole } from "./chat/message.js";
 import { MessageList, MessageListProps } from "./chat/message-list.js";
 import "./chat/index.js";
 import { ScrollEdges, TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./chrome/_tabs-scroll.js";
+import { BarOverflow } from "./chrome/_edge-scroller.js";
 import { TREE_GUIDE_GLYPHS, TreeGuide, TreeItem, TreeRow, flattenTree } from "./chrome/_tree.js";
+import { Link, LinkProps, linkVariants } from "./layout/link.js";
+import { Separator, SeparatorProps } from "./primitives/separator.js";
+import { AppBar, AppBarActionsProps, AppBarBrandProps, AppBarLinkProps, AppBarNavProps, AppBarRegister, AppBarRootProps, AppBarSeparatorProps } from "./chrome/app-bar.js";
+import { Sidebar, SidebarItemProps, SidebarRailProps, SidebarRootProps, SidebarSectionProps, useSidebar } from "./layout/sidebar.js";
+import { AppShell, AppShellAsideProps, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps } from "./chrome/app-shell.js";
 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 { 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";
@@ -24,7 +32,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 { ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./system/theme-provider.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";
 import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from "./forms/checkbox.js";
@@ -50,6 +58,11 @@ import { Textarea, TextareaProps } from "./forms/textarea.js";
 import { Toggle, ToggleProps } from "./forms/toggle.js";
 import { ToggleGroup, ToggleGroupProps } from "./forms/toggle-group.js";
 import "./forms/index.js";
+import { BrandAssetProps, BrandSize, BrandTone } from "./brand/_chassis.js";
+import { CueLogotype, CueLogotypeProps } from "./brand/cue-logotype.js";
+import { CueMark, CueMarkProps } from "./brand/cue-mark.js";
+import { Plussie, PlussieExpression, PlussieProps } from "./brand/plussie.js";
+import "./brand/index.js";
 import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
 import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
@@ -59,7 +72,7 @@ import { Progress, ProgressProps } from "./instruments/progress.js";
 import { SeamCell, SeamCellProps, SeamGrid, SeamGridProps, SeamGround } from "./instruments/seam-grid.js";
 import { Sparkline, SparklineProps } from "./instruments/sparkline.js";
 import { Stat, StatProps, StatTone } from "./instruments/stat.js";
-import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableSectionProps } from "./instruments/table.js";
+import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
 import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./instruments/terminal-frame.js";
 import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./instruments/two-step-button.js";
 import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./instruments/usage-chart.js";
@@ -68,14 +81,11 @@ import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProp
 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 { Container, ContainerProps, ContainerWidth } from "./layout/container.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 { Link, LinkProps, linkVariants } from "./layout/link.js";
 import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./layout/pagination.js";
-import { Sidebar, SidebarItemProps, SidebarRailProps, SidebarRootProps, SidebarSectionProps, useSidebar } from "./layout/sidebar.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";
@@ -99,14 +109,13 @@ import { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AvatarSize } from "
 import { Chip, ChipProps, chipVariants } from "./primitives/chip.js";
 import { IconButton, IconButtonProps } from "./primitives/icon-button.js";
 import { Kbd, KbdProps } from "./primitives/kbd.js";
-import { Separator, SeparatorProps } from "./primitives/separator.js";
 import { Skeleton, SkeletonProps } from "./primitives/skeleton.js";
 import { Spinner, SpinnerProps } from "./primitives/spinner.js";
 import "./primitives/index.js";
 import { Density, DensityProps } from "./system/density.js";
 import { CuePortalFrame, CuePortalFrameProps, useCuePortalProps } from "./system/portal.js";
-import { DEFAULT_STORAGE_KEY, PersistedPreferences, prepaintScript } from "./system/prepaint.js";
+import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOptions, prepaintScript } from "./system/prepaint.js";
 import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-import { DensityLevel, Mode, 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, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, 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, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, 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, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, 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, 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, Link, type LinkProps, 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, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, 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, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, type StackJustify, type StackProps, Stat, type StatProps, type StatTone, StatusBar, type StatusBarItemProps, 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 TableHeadProps, type TableRootProps, type TableRowProps, 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 ThemeName, ThemeProvider, type ThemeProviderProps, 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, 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, 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, useDensity, useSidebar, useTheme, useToast };
+import { DensityLevel, FontName, Mode, 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 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, 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, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, 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, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, 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, 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, Link, type LinkProps, 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, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, type StackJustify, type StackProps, Stat, type StatProps, type StatTone, StatusBar, type StatusBarItemProps, 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 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 ThemeName, ThemeProvider, type ThemeProviderProps, 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, 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, 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, useDensity, useSidebar, useTheme, useToast };

package/dist/index.js

@@ -1,3 +1,6 @@
+import { CueLogotype } from "./brand/cue-logotype.js";
+import { CueMark } from "./brand/cue-mark.js";
+import { Plussie } from "./brand/plussie.js";
 import { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, agentColor, agentColorStyle } from "./chat/agent-color.js";
 import { AgentPile } from "./chat/agent-pile.js";
 import { Checkbox, CheckboxGroup } from "./forms/checkbox.js";
@@ -16,13 +19,22 @@ import { Message } from "./chat/message.js";
 import { MessageList } from "./chat/message-list.js";
 import { TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./chrome/_tabs-scroll.js";
 import { TREE_GUIDE_GLYPHS, flattenTree } from "./chrome/_tree.js";
-import { EmptyState } from "./chrome/empty-state.js";
-import { Eyebrow } from "./chrome/eyebrow.js";
+import { Link, linkVariants } from "./layout/link.js";
+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 { DEFAULT_STORAGE_KEY, prepaintScript } from "./system/prepaint.js";
 import { ThemeProvider } from "./system/theme-provider.js";
 import { CuePortalFrame, useCuePortalProps } from "./system/portal.js";
 import { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses } from "./overlays/_surface.js";
+import { Drawer } from "./overlays/drawer.js";
+import { IconButton } from "./primitives/icon-button.js";
+import { AppShell } from "./chrome/app-shell.js";
+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 { NavigationMenu } from "./chrome/navigation-menu.js";
 import { PageShell } from "./chrome/page-shell.js";
 import { Panel, PanelHeader } from "./chrome/panel.js";
@@ -62,7 +74,7 @@ import { Progress } from "./instruments/progress.js";
 import { SeamCell, SeamGrid } from "./instruments/seam-grid.js";
 import { Sparkline } from "./instruments/sparkline.js";
 import { Stat } from "./instruments/stat.js";
-import { Table } from "./instruments/table.js";
+import { Table, TableScrollRegion } from "./instruments/table.js";
 import { TerminalFrame } from "./instruments/terminal-frame.js";
 import { TwoStepButton } from "./instruments/two-step-button.js";
 import { UsageChart } from "./instruments/usage-chart.js";
@@ -70,15 +82,11 @@ import { Accordion } from "./layout/accordion.js";
 import { Breadcrumb } from "./layout/breadcrumb.js";
 import { Card } from "./layout/card.js";
 import { Collapsible, Disclosure } from "./layout/collapsible.js";
-import { Container } from "./layout/container.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 { Link, linkVariants } from "./layout/link.js";
-import { IconButton } from "./primitives/icon-button.js";
 import { Pagination, paginationRange } from "./layout/pagination.js";
-import { Sidebar, useSidebar } from "./layout/sidebar.js";
 import { Stepper } from "./layout/stepper.js";
 import { StatusDot } from "./primitives/status-dot.js";
 import { Timeline } from "./layout/timeline.js";
@@ -87,7 +95,6 @@ import { CommandPalette } from "./overlays/command-palette.js";
 import { DropdownMenu } from "./overlays/dropdown-menu.js";
 import { ContextMenu } from "./overlays/context-menu.js";
 import { Dialog } from "./overlays/dialog.js";
-import { Drawer } from "./overlays/drawer.js";
 import { HoverCard } from "./overlays/hover-card.js";
 import { Tooltip } from "./overlays/tooltip.js";
 import { InfoTip } from "./overlays/info-tip.js";
@@ -97,8 +104,7 @@ import { Sheet } from "./overlays/sheet.js";
 import { Toast, useToast } from "./overlays/toast.js";
 import { Avatar, AvatarGroup } from "./primitives/avatar.js";
 import { Kbd } from "./primitives/kbd.js";
-import { Separator } from "./primitives/separator.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, AppWindowFrame, AskBox, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, Chip, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CuePortalFrame, DEFAULT_STORAGE_KEY, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Link, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sparkline, Spinner, Stack, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, 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, useDensity, useSidebar, useTheme, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, Chip, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Link, 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, Slider, Sparkline, Spinner, Stack, 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, 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, useDensity, useSidebar, useTheme, useToast };

package/dist/instruments/data-table.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { IconButton } from "../primitives/icon-button.js";
 import { SearchInput } from "../forms/search-input.js";
 import { ChevronLeftGlyph, ChevronRightGlyph, ChevronsLeftGlyph, ChevronsRightGlyph } from "./_glyphs.js";
-import { IconButton } from "../primitives/icon-button.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { columnFilteringFeature, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_inNumberRange, filterFn_includesString, flexRender, globalFilteringFeature, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";

package/dist/instruments/index.d.ts

@@ -6,8 +6,8 @@ import { Progress, ProgressProps } from "./progress.js";
 import { SeamCell, SeamCellProps, SeamGrid, SeamGridProps, SeamGround } from "./seam-grid.js";
 import { Sparkline, SparklineProps } from "./sparkline.js";
 import { Stat, StatProps, StatTone } from "./stat.js";
-import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableSectionProps } from "./table.js";
+import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./table.js";
 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, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, 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 TableHeadProps, type TableRootProps, type TableRowProps, 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 };
+export { AppWindowFrame, type AppWindowFrameProps, CopyButton, type CopyButtonProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, 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 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 };

package/dist/instruments/index.js

@@ -6,8 +6,8 @@ import { Progress } from "./progress.js";
 import { SeamCell, SeamGrid } from "./seam-grid.js";
 import { Sparkline } from "./sparkline.js";
 import { Stat } from "./stat.js";
-import { Table } from "./table.js";
+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, GroupBar, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TerminalFrame, TwoStepButton, UsageChart };
+export { AppWindowFrame, CopyButton, GroupBar, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TableScrollRegion, TerminalFrame, TwoStepButton, UsageChart };

package/dist/instruments/table.d.ts

@@ -1,5 +1,17 @@
 import * as React from "react";
 //#region src/instruments/table.d.ts
+interface TableScrollRegionProps extends Omit<React.ComponentPropsWithoutRef<"div">, "aria-label" | "role" | "tabIndex"> {
+  /** Accessible name announced for the keyboard-focusable scrolling region. */
+  "aria-label": string;
+}
+/**
+ * A named horizontal viewport for a table wider than its container.
+ *
+ * The region is independently keyboard-focusable so keyboard users can reach
+ * native horizontal scrolling. It adds no table semantics of its own; place a
+ * compound {@link Table} inside it and keep the table's caption.
+ */
+declare const TableScrollRegion: React.ForwardRefExoticComponent<TableScrollRegionProps & React.RefAttributes<HTMLDivElement>>;
 interface TableRootProps extends React.ComponentPropsWithoutRef<"table"> {}
 interface TableSectionProps extends React.ComponentPropsWithoutRef<"tbody"> {}
 interface TableRowProps extends React.ComponentPropsWithoutRef<"tr"> {}
@@ -21,6 +33,7 @@ interface TableCaptionProps extends React.ComponentPropsWithoutRef<"caption"> {}
  * are thicker than the data.
  *
  * Static markup — no `"use client"`. Compose it with `Panel` for the rim.
+ * Use {@link TableScrollRegion} only when the table can exceed its container.
  *
  * @example
  * <Table.Root>
@@ -48,4 +61,4 @@ declare const Table: {
   Caption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
 };
 //#endregion
-export { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableSectionProps };
+export { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps };

package/dist/instruments/table.js

@@ -1,6 +1,24 @@
 import { cn } from "../lib/cn.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+//#region src/instruments/table.tsx
+/**
+* A named horizontal viewport for a table wider than its container.
+*
+* The region is independently keyboard-focusable so keyboard users can reach
+* native horizontal scrolling. It adds no table semantics of its own; place a
+* compound {@link Table} inside it and keep the table's caption.
+*/
+const TableScrollRegion = React.forwardRef(function TableScrollRegion({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...elementProps,
+		role: "region",
+		tabIndex: 0,
+		"data-slot": "table-scroll-region",
+		className: cn("overflow-x-auto outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent", className)
+	});
+});
 /**
 * The canonical console table: hairlines, mono figures, no zebra striping.
 *
@@ -10,6 +28,7 @@ import { jsx } from "react/jsx-runtime";
 * are thicker than the data.
 *
 * Static markup — no `"use client"`. Compose it with `Panel` for the rim.
+* Use {@link TableScrollRegion} only when the table can exceed its container.
 *
 * @example
 * <Table.Root>
@@ -89,4 +108,4 @@ const Table = {
 	})
 };
 //#endregion
-export { Table };
+export { Table, TableScrollRegion };

package/dist/layout/carousel.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
 import { IconButton } from "../primitives/icon-button.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import useEmblaCarousel from "embla-carousel-react";

package/dist/layout/container.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 //#region src/layout/container.d.ts
 /** How wide the content column is allowed to get. */
-type ContainerWidth = "narrow" | "wide" | "full";
+type ContainerWidth = "narrow" | "wide" | "broad" | "full";
 interface ContainerProps extends React.ComponentPropsWithoutRef<"div"> {
   /** Which measure the column takes. Defaults to `"narrow"`. */
   width?: ContainerWidth;

package/dist/layout/container.js

@@ -3,15 +3,18 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/layout/container.tsx
 /**
-* The same two measures `PageShell` uses, plus an uncapped one.
+* The same four measures `PageShell` uses.
 *
 * `narrow` (42rem) is a reading column — settings, forms, prose. `wide` (54rem)
-* is a working column — tables and panel grids. `full` caps nothing, for a
-* console layout that owns the whole viewport and only wants the gutters.
+* is a working column — tables and panel grids. `broad` (84rem) is the
+* application measure, wide enough for a two-column page or a device frame.
+* `full` caps nothing, for a console layout that owns the whole viewport and
+* only wants the gutters.
 */
 const WIDTHS = {
 	narrow: "max-w-[42rem]",
 	wide: "max-w-[54rem]",
+	broad: "max-w-[84rem]",
 	full: ""
 };
 /**

package/dist/layout/index.d.ts

@@ -1,15 +1,15 @@
+import { Link, LinkProps, linkVariants } from "./link.js";
+import { Sidebar, SidebarItemProps, SidebarRailProps, SidebarRootProps, SidebarSectionProps, useSidebar } from "./sidebar.js";
+import { Container, ContainerProps, ContainerWidth } from "./container.js";
 import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps } from "./accordion.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./breadcrumb.js";
 import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./card.js";
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./collapsible.js";
-import { Container, ContainerProps, ContainerWidth } from "./container.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./description-list.js";
 import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./stack.js";
 import { Grid, GridColumns, GridProps } from "./grid.js";
 import { Item, ItemProps, itemVariants } from "./item.js";
-import { Link, LinkProps, linkVariants } from "./link.js";
 import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./pagination.js";
-import { Sidebar, SidebarItemProps, SidebarRailProps, SidebarRootProps, SidebarSectionProps, useSidebar } from "./sidebar.js";
 import { Stepper, StepperProps, StepperState, StepperStep } from "./stepper.js";
 import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./timeline.js";
 export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/index.js

@@ -1,15 +1,15 @@
+import { Link, linkVariants } from "./link.js";
+import { Sidebar, useSidebar } from "./sidebar.js";
+import { Container } from "./container.js";
 import { Accordion } from "./accordion.js";
 import { Breadcrumb } from "./breadcrumb.js";
 import { Card } from "./card.js";
 import { Collapsible, Disclosure } from "./collapsible.js";
-import { Container } from "./container.js";
 import { DescriptionList } from "./description-list.js";
 import { Stack } from "./stack.js";
 import { Grid } from "./grid.js";
 import { Item, itemVariants } from "./item.js";
-import { Link, linkVariants } from "./link.js";
 import { Pagination, paginationRange } from "./pagination.js";
-import { Sidebar, useSidebar } from "./sidebar.js";
 import { Stepper } from "./stepper.js";
 import { Timeline } from "./timeline.js";
 export { Accordion, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Grid, Item, Link, Pagination, Sidebar, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/pagination.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
 import { IconButton } from "../primitives/icon-button.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layout/pagination.tsx