@cueplusplus/ui 0.12.0 → 0.14.0

package/dist/elements/score-breakdown.js

@@ -70,7 +70,7 @@ function ScoreBreakdown({ verdict, total, outOf, criteria, visibleCount, classNa
 						})
 					}),
 					criterion.note && /* @__PURE__ */ jsx("span", {
-						className: "text-fg-subtle text-(length:--cue-text-ui) leading-relaxed break-words",
+						className: "text-fg-subtle text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words",
 						children: criterion.note
 					})
 				]

package/dist/elements/scroll-anchor.js

@@ -97,7 +97,7 @@ function ScrollAnchor({ messages, paused = false, onSettled, className, ...props
 				ref: viewportRef,
 				className: "flex h-full flex-col gap-2.5 overflow-y-hidden scroll-smooth motion-reduce:scroll-auto p-4",
 				children: messages.slice(0, count).map((message, i) => /* @__PURE__ */ jsx("div", {
-					className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in max-w-[85%] text-(length:--cue-text-ui) leading-relaxed duration-300 motion-reduce:animate-none", message.role === "user" ? cn(field, "self-end rounded-(--radius-overlay) px-3 py-1.5") : "text-fg-muted self-start"),
+					className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in max-w-[85%] text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300 motion-reduce:animate-none", message.role === "user" ? cn(field, "self-end rounded-(--radius-overlay) px-3 py-1.5") : "text-fg-muted self-start"),
 					children: message.text
 				}, i))
 			}),

package/dist/elements/settings-panel.js

@@ -51,7 +51,7 @@ function SettingsPanel({ model, models, systemPrompt, temperature, toggles, onMo
 					onChange: (event) => onSystemPromptChange?.(event.target.value),
 					rows: 3,
 					"aria-label": "System prompt",
-					className: cn(field, "text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent resize-none rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-ui) leading-relaxed outline-none")
+					className: cn(field, "text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent resize-none rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) outline-none")
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/shared-conversation.js

@@ -45,7 +45,7 @@ function SharedConversation({ title, sharedBy, sharedAt, turns, onContinue, clas
 			/* @__PURE__ */ jsx("div", {
 				className: "border-border flex flex-col gap-2.5 border-t px-4 py-3.5",
 				children: turns.map((turn) => /* @__PURE__ */ jsx("div", {
-					className: cn("text-(length:--cue-text-body) leading-relaxed", turn.role === "user" ? "bg-surface-1 ms-auto max-w-[85%] rounded-(--radius-overlay) px-3 py-2" : "text-fg-muted"),
+					className: cn("text-(length:--cue-text-body) leading-(--cue-leading-ui)", turn.role === "user" ? "bg-surface-1 ms-auto max-w-[85%] rounded-(--radius-overlay) px-3 py-2" : "text-fg-muted"),
 					children: turn.text
 				}, turn.id))
 			}),

package/dist/elements/speaker-identity.js

@@ -40,7 +40,7 @@ function SpeakerIdentity({ turns, className, ...props }) {
 						children: turn.detail
 					})]
 				}), /* @__PURE__ */ jsx("span", {
-					className: "text-fg-muted text-(length:--cue-text-body) leading-relaxed break-words",
+					className: "text-fg-muted text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words",
 					children: turn.text
 				})]
 			})]

package/dist/elements/stopped-run.js

@@ -18,7 +18,7 @@ function StoppedRun({ words, reason, onContinue, onDiscard, className, ...props
 		className: cn("flex w-full max-w-sm flex-col gap-3", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("p", {
-			className: "text-fg-muted text-(length:--cue-text-body) leading-relaxed",
+			className: "text-fg-muted text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 			children: [words.join(" "), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
 				className: "bg-surface-3 ms-1 inline-block h-[1em] w-[2px] translate-y-[0.15em] rounded-full"

package/dist/elements/streaming-text.js

@@ -24,7 +24,7 @@ function StreamingText({ segments, count, streaming, className, ...props }) {
 	const shown = take(words, count);
 	return /* @__PURE__ */ jsxs("p", {
 		"data-slot": "streaming-text",
-		className: cn("min-h-[8.5rem] max-w-sm text-(length:--cue-text-body) leading-relaxed text-pretty", className),
+		className: cn("min-h-[8.5rem] max-w-sm text-(length:--cue-text-body) leading-(--cue-leading-ui) text-pretty", className),
 		...props,
 		children: [shown.map(({ word, mono: isMono }, i) => {
 			const fresh = streaming && shown.length - 1 - i < 2;

package/dist/elements/timeline.js

@@ -34,7 +34,7 @@ function ElementsTimeline({ events, visibleCount, className, ...props }) {
 						className: cn("text-(length:--cue-text-body) break-words", event.when === "future" ? "text-fg-subtle" : "text-fg", event.when === "now" && "font-medium"),
 						children: event.title
 					}), event.detail && /* @__PURE__ */ jsx("span", {
-						className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed break-words",
+						className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words",
 						children: event.detail
 					})]
 				})

package/dist/elements/tool-error.js

@@ -50,7 +50,7 @@ function ToolError({ name, target, message, attempt, maxAttempts, retrying, onRe
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn(field, "rounded-(--radius-surface) px-3 py-2 font-mono text-(length:--cue-text-label) leading-relaxed text-danger"),
+				className: cn(field, "rounded-(--radius-surface) px-3 py-2 font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-danger"),
 				children: message
 			}),
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/voice-conversation.js

@@ -87,7 +87,7 @@ function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, o
 			/* @__PURE__ */ jsx("div", {
 				className: "flex min-h-[4.5rem] w-full flex-col gap-1.5",
 				children: transcript.map((turn) => /* @__PURE__ */ jsxs("div", {
-					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex gap-2 text-(length:--cue-text-ui) leading-relaxed duration-300",
+					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex gap-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: cn(mono, "w-8 shrink-0", turn.role === "user" ? "text-fg-subtle" : "text-stream/70"),
 						children: turn.role === "user" ? "you" : "ai"

package/dist/forms/textarea.js

@@ -29,7 +29,7 @@ const Textarea = React.forwardRef(function Textarea({ className, rows = 3, ...el
 			rows
 		}),
 		"data-slot": "textarea",
-		className: cn(controlSurface, "resize-y px-(--cue-space-4) py-(--cue-space-3) text-(length:--cue-text-ui) leading-relaxed", className),
+		className: cn(controlSurface, "resize-y px-(--cue-space-4) py-(--cue-space-3) text-(length:--cue-text-ui) leading-(--cue-leading-ui)", className),
 		...controlProps
 	});
 });

package/dist/index.d.ts

@@ -14,9 +14,10 @@ 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, AppShellBarProps, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps } from "./chrome/app-shell.js";
+import { Container, ContainerProps, ContainerWidth } from "./layout/container.js";
+import { Band, BandProps, BandSeparation, BandWidth } from "./chrome/band.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 { Inspector, InspectorFooterProps, InspectorRootProps, InspectorRowProps, InspectorSectionProps } from "./chrome/inspector.js";
 import { NavigationMenu, NavigationMenuContentProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuListProps, NavigationMenuRootProps, NavigationMenuTriggerProps, NavigationMenuViewportProps } from "./chrome/navigation-menu.js";
@@ -95,7 +96,7 @@ import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHead
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./layout/collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./layout/description-list.js";
 import { PreviewGround } from "./layout/_ground.js";
-import { Frames, FramesHeight, FramesItemProps, FramesRootProps } from "./layout/frames.js";
+import { Frames, FramesHeight, FramesItemProps, FramesLayout, FramesRootProps } from "./layout/frames.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";
@@ -133,5 +134,5 @@ import { ThemeRegistry } from "./system/vocabulary.js";
 import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
 import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-import { DensityEntry, DensityLevel, FontEntry, FontName, Mode, ThemeManifest, ThemeName } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, 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, Frames, type FramesHeight, type FramesItemProps, type FramesRootProps, 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 PreviewGround, type PreviewPresentation, 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 };
+import { DEFAULT_STYLE_SET, DensityEntry, DensityLevel, FontEntry, FontName, Mode, STYLE_SETS, StyleSet, 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, Band, type BandProps, type BandSeparation, type BandWidth, 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, DEFAULT_STYLE_SET, 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, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, 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 PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, STYLE_SETS, 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, type StyleSet, 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

@@ -33,9 +33,10 @@ import { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasse
 import { Drawer } from "./overlays/drawer.js";
 import { IconButton } from "./primitives/icon-button.js";
 import { AppShell } from "./chrome/app-shell.js";
+import { Container } from "./layout/container.js";
+import { Band } from "./chrome/band.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 { SectionHeader } from "./chrome/section-header.js";
 import { Inspector } from "./chrome/inspector.js";
@@ -119,4 +120,5 @@ 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, 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, Frames, 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 };
+import { DEFAULT_STYLE_SET, STYLE_SETS } from "./system/index.js";
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, 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, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Frames, 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, STYLE_SETS, 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.js

@@ -164,7 +164,7 @@ const CodeBlock = React.forwardRef(function CodeBlock({ code, 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",
+			className: "overflow-x-auto p-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg",
 			children: /* @__PURE__ */ jsx("code", { children: body })
 		})]
 	});

package/dist/instruments/progress.d.ts

@@ -9,8 +9,11 @@ interface ProgressProps extends Omit<Progress.Root.Props, "className"> {
   /** Extra classes for the fill. */
   indicatorClassName?: string;
   /**
-   * Caption above the bar. Rendered as Base UI's `Progress.Label`, so it also
-   * becomes the bar's accessible name — pass one, or an `aria-label`.
+   * Caption above the bar, and the bar's accessible name: this layer points the
+   * `role="progressbar"` at it with `aria-labelledby` **at render**, so the name
+   * is in the markup a server sends. Pass one, or an `aria-label` — a root that
+   * already carries `aria-label` or `aria-labelledby` keeps the name it was
+   * given.
    */
   label?: React.ReactNode;
   /** Show the formatted value opposite the label. Defaults to `false`. */
@@ -33,7 +36,20 @@ interface ProgressProps extends Omit<Progress.Root.Props, "className"> {
  * Use `Meter` instead for a *level* (how full something is); a progress bar is
  * for a *task* (how far along something is).
  *
- * Static markup — no `"use client"`.
+ * **Named in the markup, not on hydration.** Base UI names the bar from the
+ * caption by having `Progress.Label` report its id to the root, and it reports
+ * it from a `useIsoLayoutEffect` (`@base-ui/react/utils/useRegisteredLabelId`),
+ * which the root keeps in `useState`. A render that runs no effects — SSR
+ * before hydration, `renderToStaticMarkup`, a page that never hydrates — emitted
+ * the caption with its id and a `role="progressbar"` that pointed at nothing, so
+ * the delivered HTML had a progressbar with no accessible name. Both ends are
+ * given the same `useId` here instead, so the first render is already correct
+ * and Base UI's effect later resolves the label to the id it was handed.
+ *
+ * Static markup — no `"use client"`. `useId` is the one hook it calls, and it
+ * is one a Server Component may call: React's Flight server implements `useId`
+ * in its hooks dispatcher, where the hooks a Server Component may not call are
+ * `unsupportedHook`.
  *
  * @example
  * <Progress value={40} label="Rendering" showValue />

package/dist/instruments/progress.js

@@ -21,7 +21,20 @@ const DEFAULT_HEIGHT_PX = 5;
 * Use `Meter` instead for a *level* (how full something is); a progress bar is
 * for a *task* (how far along something is).
 *
-* Static markup — no `"use client"`.
+* **Named in the markup, not on hydration.** Base UI names the bar from the
+* caption by having `Progress.Label` report its id to the root, and it reports
+* it from a `useIsoLayoutEffect` (`@base-ui/react/utils/useRegisteredLabelId`),
+* which the root keeps in `useState`. A render that runs no effects — SSR
+* before hydration, `renderToStaticMarkup`, a page that never hydrates — emitted
+* the caption with its id and a `role="progressbar"` that pointed at nothing, so
+* the delivered HTML had a progressbar with no accessible name. Both ends are
+* given the same `useId` here instead, so the first render is already correct
+* and Base UI's effect later resolves the label to the id it was handed.
+*
+* Static markup — no `"use client"`. `useId` is the one hook it calls, and it
+* is one a Server Component may call: React's Flight server implements `useId`
+* in its hooks dispatcher, where the hooks a Server Component may not call are
+* `unsupportedHook`.
 *
 * @example
 * <Progress value={40} label="Rendering" showValue />
@@ -30,15 +43,20 @@ const DEFAULT_HEIGHT_PX = 5;
 */
 const Progress$1 = React.forwardRef(function Progress$2({ className, trackClassName, indicatorClassName, label, showValue = false, height = DEFAULT_HEIGHT_PX, ...rootProps }, ref) {
 	const hasHeader = label !== void 0 || showValue;
+	const captionId = React.useId();
+	const namedByCaller = rootProps["aria-label"] !== void 0 || rootProps["aria-labelledby"] !== void 0;
+	const namedByCaption = label !== void 0 && !namedByCaller;
 	return /* @__PURE__ */ jsxs(Progress.Root, {
 		ref,
 		"data-slot": "progress",
+		"aria-labelledby": namedByCaption ? captionId : void 0,
 		className: cn("flex w-full flex-col gap-(--cue-space-2)", className),
 		...rootProps,
 		children: [hasHeader ? /* @__PURE__ */ jsxs("div", {
 			"data-slot": "progress-header",
 			className: "flex items-baseline gap-(--cue-space-3) font-mono text-(length:--cue-text-label)",
 			children: [label === void 0 ? null : /* @__PURE__ */ jsx(Progress.Label, {
+				id: namedByCaption ? captionId : void 0,
 				"data-slot": "progress-label",
 				className: "truncate tracking-[0.15em] text-fg-subtle uppercase",
 				children: label

package/dist/instruments/terminal-frame.js

@@ -205,7 +205,7 @@ const TerminalFrame = React.forwardRef(function TerminalFrame({ className, title
 			}) : null]
 		}), /* @__PURE__ */ jsxs("div", {
 			"data-slot": "terminal-frame-body",
-			className: "min-w-0 flex-1 overflow-auto p-(--cue-space-5) leading-relaxed whitespace-pre-wrap",
+			className: "min-w-0 flex-1 overflow-auto p-(--cue-space-5) leading-(--cue-leading-ui) whitespace-pre-wrap",
 			style: height === void 0 ? void 0 : { height: toRem(height) },
 			children: [
 				rendered.map((line, index) => /* @__PURE__ */ jsxs("div", {

package/dist/layout/_collapse.js

@@ -41,6 +41,6 @@ const accordionPanelClasses = `${PANEL_MOTION} h-(--accordion-panel-height)`;
 /** {@link PANEL_MOTION} against the collapsible's measured height. */
 const collapsiblePanelClasses = `${PANEL_MOTION} h-(--collapsible-panel-height)`;
 /** The padded body inside a panel: aligned to the summary row's gutters. */
-const collapsePanelBodyClasses = "px-(--cue-pad-row-x) pt-(--cue-space-1) pb-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-relaxed text-fg-muted";
+const collapsePanelBodyClasses = "px-(--cue-pad-row-x) pt-(--cue-space-1) pb-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
 //#endregion
 export { accordionPanelClasses, collapseCaretClasses, collapseLabelClasses, collapsePanelBodyClasses, collapseTriggerClasses, collapsiblePanelClasses };

package/dist/layout/card.js

@@ -51,7 +51,7 @@ const Card = {
 		return /* @__PURE__ */ jsx("p", {
 			ref,
 			"data-slot": "card-description",
-			className: cn("font-mono text-(length:--cue-text-ui) leading-relaxed text-fg-muted", className),
+			className: cn("font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted", className),
 			...elementProps
 		});
 	}),

package/dist/layout/container.js

@@ -12,9 +12,9 @@ import { jsx } from "react/jsx-runtime";
 * only wants the gutters.
 */
 const WIDTHS = {
-	narrow: "max-w-[42rem]",
-	wide: "max-w-[54rem]",
-	broad: "max-w-[84rem]",
+	narrow: "max-w-(--cue-measure-narrow)",
+	wide: "max-w-(--cue-measure-wide)",
+	broad: "max-w-(--cue-measure-broad)",
 	full: ""
 };
 /**

package/dist/layout/frames.d.ts

@@ -29,7 +29,25 @@ interface FramesRootProps extends Omit<React.ComponentPropsWithoutRef<"div">, "c
    * listener at all; and the keyboard scrolls the canvas either way.
    */
   pan?: boolean;
+  /**
+   * How the frames are arranged. Defaults to `"board"`.
+   *
+   * `"board"` is the original: a short, wide, sideways scroller a reader drags
+   * through — right where the frames are a set you *browse*, on a homepage wall
+   * or a design surface.
+   *
+   * `"column"` stacks them one under the next, each at the full width it is
+   * given, and the canvas grows to whatever it holds. It exists for the page
+   * that *reads*: a documentation page scrolls vertically already, and asking a
+   * reader to pan a second axis to reach the fifth variant of a component —
+   * with that fifth variant clipped at the board's edge until they do — hides
+   * the examples behind an interaction. A column has no fixed height, so
+   * `height` is ignored, and nothing pans, so `pan` and `hint` are moot.
+   */
+  layout?: FramesLayout;
 }
+/** Whether a canvas browses sideways or reads downwards. */
+type FramesLayout = "board" | "column";
 interface FramesItemProps extends React.ComponentPropsWithoutRef<"div"> {
   /** The specimen. */
   children: React.ReactNode;
@@ -67,4 +85,4 @@ declare const Frames: {
   Item: React.ForwardRefExoticComponent<FramesItemProps & React.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Frames, FramesHeight, FramesItemProps, FramesRootProps };
+export { Frames, FramesHeight, FramesItemProps, FramesLayout, FramesRootProps };

package/dist/layout/frames.js

@@ -118,6 +118,18 @@ const ROOT_CLASS = "relative min-w-0 overflow-hidden rounded-(--radius-surface)
 * must not be.
 */
 const CANVAS_CLASS = "flex h-full min-w-0 items-start gap-(--cue-space-8) overflow-x-auto overflow-y-hidden scroll-smooth p-(--cue-space-6) outline-none motion-reduce:scroll-auto focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+/**
+* The column: the same frames, stacked, sized by what they hold.
+*
+* `overflow-visible` on both axes is the point — the box grows instead of
+* clipping, which is the one thing the board deliberately does not do. No
+* scroller of its own, so the page's scroller is the only one a reader meets.
+* It keeps the focus ring and the keyboard handler: the region is still
+* focusable, and arrow keys still scroll it, they just scroll the page.
+*/
+const COLUMN_CLASS = "flex min-w-0 flex-col gap-(--cue-space-6) p-(--cue-space-6) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+/** A column is sized by its contents, so the box must not hold a height. */
+const COLUMN_ROOT_CLASS = "h-auto";
 /** The affordance, and only where there is something to afford. */
 const PANNABLE_CLASS = "cursor-grab";
 /**
@@ -143,18 +155,20 @@ const HINT_CLASS = "pointer-events-none absolute right-(--cue-space-4) bottom-(-
 *   <Preview presentation="frame" label="Tone" count={4}>…</Preview>
 * </Frames.Root>
 */
-const FramesRoot = React.forwardRef(function FramesRoot({ children, label, height = "short", ground = "dots", hint, pan = true, className, ...elementProps }, ref) {
+const FramesRoot = React.forwardRef(function FramesRoot({ children, label, height = "short", ground = "dots", hint, pan = true, layout = "board", className, ...elementProps }, ref) {
 	const drag = React.useRef(null);
 	const canvasRef = React.useRef(null);
 	const [panning, setPanning] = React.useState(false);
+	const column = layout === "column";
+	const pans = pan && !column;
 	React.useEffect(() => {
-		if (pan) return;
+		if (pans) return;
 		const started = drag.current;
 		if (started === null) return;
 		canvasRef.current?.releasePointerCapture?.(started.id);
 		drag.current = null;
 		setPanning(false);
-	}, [pan]);
+	}, [pans]);
 	const scroll = (event) => {
 		if (event.defaultPrevented || event.target !== event.currentTarget) return;
 		const canvas = event.currentTarget;
@@ -203,7 +217,7 @@ const FramesRoot = React.forwardRef(function FramesRoot({ children, label, heigh
 		...elementProps,
 		ref,
 		"data-slot": "frames",
-		className: cn(ROOT_CLASS, HEIGHT_CLASSES[height], GROUND_CLASSES[ground], className),
+		className: cn(ROOT_CLASS, column ? COLUMN_ROOT_CLASS : HEIGHT_CLASSES[height], GROUND_CLASSES[ground], className),
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: canvasRef,
 			role: "region",
@@ -211,11 +225,11 @@ const FramesRoot = React.forwardRef(function FramesRoot({ children, label, heigh
 			"aria-label": label,
 			"data-slot": "frames-canvas",
 			"data-panning": panning ? "true" : void 0,
-			className: cn(CANVAS_CLASS, pan && PANNABLE_CLASS, panning && PANNING_CLASS),
+			className: column ? COLUMN_CLASS : cn(CANVAS_CLASS, pans && PANNABLE_CLASS, panning && PANNING_CLASS),
 			onKeyDown: scroll,
-			...pan ? pointer : {},
+			...pans ? pointer : {},
 			children
-		}), hint === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		}), hint === void 0 || column ? null : /* @__PURE__ */ jsx("span", {
 			"data-slot": "frames-hint",
 			className: HINT_CLASS,
 			children: hint

package/dist/layout/index.d.ts

@@ -9,11 +9,11 @@ import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHead
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./description-list.js";
 import { PreviewGround } from "./_ground.js";
-import { Frames, FramesHeight, FramesItemProps, FramesRootProps } from "./frames.js";
+import { Frames, FramesHeight, FramesItemProps, FramesLayout, FramesRootProps } from "./frames.js";
 import { Grid, GridColumns, GridProps } from "./grid.js";
 import { Item, ItemProps, itemVariants } from "./item.js";
 import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./pagination.js";
 import { Preview, PreviewAxis, PreviewPresentation, PreviewProps, PreviewResizeOptions } from "./preview.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, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, 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, Frames, type FramesHeight, type FramesItemProps, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, 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 };
+export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, 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, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, 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/preview.d.ts

@@ -1,6 +1,7 @@
 import { PreviewGround } from "./_ground.js";
 import * as React from "react";
-import { Density, FontName, Mode, ThemeName } from "@cueplusplus/theme-base";
+import { StyleSet } from "@cueplusplus/tokens";
+import { Density as Density$1, FontName, Mode, ThemeName } from "@cueplusplus/theme-base";
 //#region src/layout/preview.d.ts
 /** Where the chrome sits and what the stage's ground is. */
 type PreviewPresentation = "panel" | "frame";
@@ -53,9 +54,23 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
    */
   mode?: Mode;
   /** A rung of the density ladder for the stage only, as a `<Density>` island would set it. */
-  density?: Density;
+  density?: Density$1;
   /** A font pairing for the stage only, as `data-font`. Portals still follow the root's pairing. */
   font?: FontName;
+  /**
+   * A style set for the stage only: `console`, `editorial` or `marketing`.
+   *
+   * Unset, the stage inherits and **no attribute is emitted at all** — the same
+   * rule the other four follow here. Unlike `theme`, naming one loads nothing
+   * and needs nothing: the three sets are emitted by `@cueplusplus/tokens` into
+   * the stylesheet every consumer already imports, so a stage is scoped to
+   * `[data-style="<name>"]` and the block is on the page by construction.
+   *
+   * The set is republished to React as well as stamped, so a popover opened on
+   * the stage follows the stage rather than the page — a portal mounts on
+   * `<body>` and inherits nothing from the stage's DOM.
+   */
+  styleSet?: StyleSet;
   /**
    * Resize the stage by dragging or with the keyboard. `true` gives both axes
    * inside the default bounds (160–1280 px wide, 96–960 px tall); an object
@@ -122,13 +137,14 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
  * whatever canvas the frame sits on shows through. Everything below holds in
  * both.
  *
- * **The stage is the island; the chrome is not.** `theme`, `mode`, `density`
- * and `font` land on the stage element only, and the stage republishes the
- * theme and density contexts so an overlay opened on it follows it. The tools,
- * the footer, the grips and anything they open stay in the scope around the
- * Preview — a `terminal` preview's own controls do not turn cyan. With none of
- * the four set, the stage carries no attribute and costs what a `<div>` costs.
- * A stage `theme` with no `mode` repeats the page's mode beside it.
+ * **The stage is the island; the chrome is not.** `theme`, `mode`, `density`,
+ * `font` and `styleSet` land on the stage element only, and the stage
+ * republishes the theme, density and style-set contexts so an overlay opened on
+ * it follows it. The tools, the footer, the grips and anything they open stay
+ * in the scope around the Preview — a `terminal` preview's own controls do not
+ * turn cyan. With none of the five set, the stage carries no attribute and
+ * costs what a `<div>` costs. A stage `theme` with no `mode` repeats the page's
+ * mode beside it.
  *
  * **`resizable` is handles of its own**, both axes by default: an edge grip per
  * axis that is a keyboard-operable `separator` valued in pixels, and a corner
@@ -151,6 +167,10 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
  * <Preview label="Button" presentation="frame" count={3}>
  *   <Button variant="primary">Take cue</Button>
  * </Preview>
+ * @example
+ * <Preview label="Editorial band" styleSet="editorial" presentation="frame">
+ *   <Container className="max-w-(--cue-measure-prose)">…</Container>
+ * </Preview>
  */
 declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion