@cueplusplus/ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @cueplusplus/ui
 
+## 0.3.0
+
+### Minor Changes
+
+- 31e3607: Ship the linked RequestPort preset release across tokens, UI, and brand tokens.
+
+  The release adds the typed RequestPort preset and its generated dark, light, and
+  system selectors; system SSR, prepaint, provider, and portal behavior; the
+  `persistPreferences={false}` and authoritative prepaint options contracts; the
+  typed `fontFamilies` provider/portal override; the deterministic package
+  manifest and companion checksums; and the accessible `TableScrollRegion`.
+
+  All three linked tarballs receive the same minor version and changelog entry.
+  The Version Packages path regenerates the package manifest after applying those
+  versions and rejects stale or nondeterministic output before publication.
+
+### Patch Changes
+
+- Updated dependencies [31e3607]
+  - @cueplusplus/tokens@0.3.0
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/brand/_chassis.d.ts

@@ -22,7 +22,7 @@ type BrandSize = "sm" | "md" | "lg";
  *
  * Not a light/dark pair. The source artwork ships two files that hard-code
  * `white`, `black` and `#1E1E1E`; this library ships one component that reads
- * the token layer, so a single element is correct in all eight presets and both
+ * the token layer, so a single element is correct in all ten presets and both
  * modes without anybody choosing a file.
  */
 type BrandTone = "inherit" | "fg" | "accent";

package/dist/brand/cue-mark.d.ts

@@ -8,7 +8,7 @@ interface CueMarkProps extends BrandAssetProps {}
  * Square at every size, drawn from the artwork's own path data, and painted
  * entirely from tokens — the disc takes the tone's ink and the two "+" glyphs
  * take the ground, which is exactly the relationship the two shipped SVGs
- * encode by hand. One element is therefore correct in all eight presets and
+ * encode by hand. One element is therefore correct in all ten presets and
  * both modes, and there is no light/dark variant to pick.
  *
  * The two glyphs are {@link Plussie}'s eyes; both components read one geometry

package/dist/brand/cue-mark.js

@@ -10,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Square at every size, drawn from the artwork's own path data, and painted
 * entirely from tokens — the disc takes the tone's ink and the two "+" glyphs
 * take the ground, which is exactly the relationship the two shipped SVGs
-* encode by hand. One element is therefore correct in all eight presets and
+* encode by hand. One element is therefore correct in all ten presets and
 * both modes, and there is no light/dark variant to pick.
 *
 * The two glyphs are {@link Plussie}'s eyes; both components read one geometry

package/dist/chrome/_edge-scroller.js

@@ -52,9 +52,20 @@ function useEdgeScroll(enabled = true) {
 		el.addEventListener("scroll", sync, { passive: true });
 		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => sync());
 		observer?.observe(el);
-		if (el.firstElementChild !== null) observer?.observe(el.firstElementChild);
+		let observedChildren = /* @__PURE__ */ new Set();
+		const syncObservedChildren = () => {
+			const nextChildren = new Set(el.children);
+			for (const child of observedChildren) if (!nextChildren.has(child)) observer?.unobserve(child);
+			for (const child of nextChildren) if (!observedChildren.has(child)) observer?.observe(child);
+			observedChildren = nextChildren;
+			sync();
+		};
+		syncObservedChildren();
+		const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => syncObservedChildren());
+		mutations?.observe(el, { childList: true });
 		return () => {
 			el.removeEventListener("scroll", sync);
+			mutations?.disconnect();
 			observer?.disconnect();
 		};
 	}, [enabled, sync]);

package/dist/chrome/_tabs-scroll.d.ts

@@ -50,7 +50,7 @@ declare function computeScrollEdges(scrollLeft: number, scrollWidth: number, cli
  * an overlay would have to re-create that background as an opaque colour and
  * would drift the moment the theme changed. Masking fades the content itself
  * and lets whatever is behind show through, so it matches by construction in
- * all eight themes and both modes.
+ * every theme and both modes.
  *
  * This softens the cut; it is NOT the whole affordance. What sits at an
  * overflowing edge is often the gap between two tabs, and fading empty space is

package/dist/chrome/_tabs-scroll.js

@@ -53,7 +53,7 @@ function computeScrollEdges(scrollLeft, scrollWidth, clientWidth) {
 * an overlay would have to re-create that background as an opaque colour and
 * would drift the moment the theme changed. Masking fades the content itself
 * and lets whatever is behind show through, so it matches by construction in
-* all eight themes and both modes.
+* every theme and both modes.
 *
 * This softens the cut; it is NOT the whole affordance. What sits at an
 * overflowing edge is often the gap between two tabs, and fading empty space is

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
@@ -338,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");
@@ -376,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/index.d.ts

@@ -32,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";
@@ -72,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";
@@ -114,8 +114,8 @@ 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, 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 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, 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 };
+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

@@ -74,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";
@@ -107,4 +107,4 @@ import { Kbd } from "./primitives/kbd.js";
 import { Skeleton } from "./primitives/skeleton.js";
 import { useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, 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, 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/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/primitives/chip.d.ts

@@ -15,7 +15,7 @@ import * as React from "react";
  * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
  */
 declare const chipVariants: (props?: ({
-  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/styles.css

@@ -28,7 +28,17 @@
 @custom-variant density-normal (&:where([data-density="normal"], [data-density="normal"] *));
 @custom-variant density-large (&:where([data-density="large"], [data-density="large"] *));
 @custom-variant density-ultra-large (&:where([data-density="ultra-large"], [data-density="ultra-large"] *));
-@custom-variant mode-light (&:where([data-mode="light"], [data-mode="light"] *));
+@custom-variant mode-light {
+  &:where([data-mode="light"], [data-mode="light"] *) {
+    @slot;
+  }
+
+  @media (prefers-color-scheme: light) {
+    &:where([data-mode="system"], [data-mode="system"] *) {
+      @slot;
+    }
+  }
+}
 
 /* The one keyframe this library's core needs, and the reason it cannot be a
  * utility: `<Plussie idle />` blinks, and Tailwind has no `animate-*` for a

package/dist/system/index.d.ts

@@ -1,8 +1,8 @@
-import { ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./theme-provider.js";
+import { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./theme-provider.js";
 import { Density, DensityProps } from "./density.js";
 import { CuePortalFrame, CuePortalFrameProps, useCuePortalProps } from "./portal.js";
-import { DEFAULT_STORAGE_KEY, PersistedPreferences, prepaintScript } from "./prepaint.js";
+import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOptions, prepaintScript } from "./prepaint.js";
 import { ControlSize, useControlHeight, useDensity } from "./use-density.js";
 import { useTheme } from "./use-theme.js";
 import { Density as DensityLevel, FontName, Mode, ThemeName } from "@cueplusplus/tokens";
-export { type ControlSize, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, Density, type DensityLevel, type DensityProps, type FontName, type Mode, type PersistedPreferences, type ResolvedMode, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, prepaintScript, useControlHeight, useCuePortalProps, useDensity, useTheme };
+export { type ControlSize, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, Density, type DensityLevel, type DensityProps, type FontFamilies, type FontName, type Mode, type PersistedPreferences, type PrepaintDefaults, type PrepaintOptions, type ResolvedMode, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, prepaintScript, useControlHeight, useCuePortalProps, useDensity, useTheme };

package/dist/system/portal.js

@@ -1,15 +1,17 @@
 "use client";
 import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
 import { DensityContext } from "./density.js";
-import { FontScaleContext, ThemeContext } from "./theme-provider.js";
+import { FontFamiliesContext, FontScaleContext, ThemeContext } from "./theme-provider.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { DEFAULT_FONT } from "@cueplusplus/tokens";
 //#region src/system/portal.tsx
 const DEFAULT_THEME = "cue";
-const DEFAULT_RESOLVED_MODE = "dark";
+const DEFAULT_MODE = "dark";
 /** Custom property the density text ladder multiplies by; see `FontScaleContext`. */
 const FONT_SCALE_PROPERTY = "--cue-font-scale";
+const FONT_SANS_PROPERTY = "--cue-font-sans";
+const FONT_MONO_PROPERTY = "--cue-font-mono";
 /**
 * Read the stamp from React context — never from the DOM. A portal is mounted
 * outside its owner's DOM subtree, so `getComputedStyle`-style discovery would
@@ -22,12 +24,14 @@ function usePortalStamp() {
 	const theme = React.useContext(ThemeContext);
 	const island = React.useContext(DensityContext);
 	const fontScale = React.useContext(FontScaleContext);
+	const fontFamilies = React.useContext(FontFamiliesContext);
 	return {
 		theme: theme?.theme ?? DEFAULT_THEME,
 		density: island ?? theme?.density ?? "compact",
+		mode: theme?.mode ?? DEFAULT_MODE,
 		font: theme?.font ?? DEFAULT_FONT,
-		mode: theme?.resolvedMode ?? DEFAULT_RESOLVED_MODE,
-		fontScale
+		fontScale,
+		fontFamilies
 	};
 }
 /**
@@ -79,7 +83,9 @@ function useCuePortalProps() {
 		stamp.density,
 		stamp.font,
 		stamp.mode,
-		stamp.fontScale
+		stamp.fontScale,
+		stamp.fontFamilies?.sans,
+		stamp.fontFamilies?.mono
 	]);
 	return React.useMemo(() => container === null ? {} : { container }, [container]);
 }
@@ -91,6 +97,12 @@ function applyStamp(element, stamp) {
 	element.setAttribute("data-mode", stamp.mode);
 	if (stamp.fontScale === null) element.style.removeProperty(FONT_SCALE_PROPERTY);
 	else element.style.setProperty(FONT_SCALE_PROPERTY, String(stamp.fontScale));
+	setOptionalProperty(element, FONT_SANS_PROPERTY, stamp.fontFamilies?.sans);
+	setOptionalProperty(element, FONT_MONO_PROPERTY, stamp.fontFamilies?.mono);
+}
+function setOptionalProperty(element, property, value) {
+	if (value === void 0) element.style.removeProperty(property);
+	else element.style.setProperty(property, value);
 }
 /**
 * Inline version of the portal contract, for portals whose container cannot be
@@ -110,6 +122,8 @@ function CuePortalFrame({ children, className, style }) {
 	const frameStyle = {
 		display: "contents",
 		...stamp.fontScale === null ? null : { [FONT_SCALE_PROPERTY]: stamp.fontScale },
+		...stamp.fontFamilies?.sans === void 0 ? null : { [FONT_SANS_PROPERTY]: stamp.fontFamilies.sans },
+		...stamp.fontFamilies?.mono === void 0 ? null : { [FONT_MONO_PROPERTY]: stamp.fontFamilies.mono },
 		...style
 	};
 	return /* @__PURE__ */ jsx("div", {

package/dist/system/prepaint.d.ts

@@ -1,4 +1,4 @@
-import { Density, FontName, ThemeName } from "@cueplusplus/tokens";
+import { Density, FontName, Mode, ThemeName } from "@cueplusplus/tokens";
 //#region src/system/prepaint.d.ts
 /** localStorage key the ThemeProvider and the pre-paint script share by default. */
 declare const DEFAULT_STORAGE_KEY = "cue-ui";
@@ -13,6 +13,23 @@ interface PersistedPreferences {
   /** Last font pairing the user picked. */
   font?: string;
 }
+/** Complete server-authoritative fallback stamped when storage is absent or ignored. */
+interface PrepaintDefaults {
+  theme: ThemeName;
+  density: Density;
+  mode: Mode;
+  /** Initial document-wide font pairing. Defaults to the token package's system pairing. */
+  font?: FontName;
+}
+/** Options form for apps whose server projection, not localStorage, owns first paint. */
+interface PrepaintOptions {
+  /** localStorage key shared with ThemeProvider. */
+  storageKey?: string;
+  /** Complete validated fallback triple. */
+  defaults: PrepaintDefaults;
+  /** Whether valid stored axes may override `defaults`. Defaults to `true`. */
+  readStoredPreferences?: boolean;
+}
 /**
  * Build the blocking inline script that stamps `data-theme`, `data-density`,
  * `data-font`, `data-mode` and `color-scheme` on `<html>` from localStorage
@@ -41,5 +58,6 @@ interface PersistedPreferences {
  * prepaintScript(DEFAULT_STORAGE_KEY, "terminal", "normal");
  */
 declare function prepaintScript(storageKey?: string, defaultTheme?: ThemeName, defaultDensity?: Density, defaultFont?: FontName): string;
+declare function prepaintScript(options: PrepaintOptions): string;
 //#endregion
-export { DEFAULT_STORAGE_KEY, PersistedPreferences, prepaintScript };
+export { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOptions, prepaintScript };

package/dist/system/prepaint.js

@@ -1,4 +1,4 @@
-import { DEFAULT_DENSITY, DEFAULT_FONT, DENSITIES, FONTS } from "@cueplusplus/tokens";
+import { DEFAULT_DENSITY, DEFAULT_FONT, DENSITIES, FONTS, MODES, THEMES } from "@cueplusplus/tokens";
 //#region src/system/prepaint.ts
 /**
 * Pre-paint stamping. Server-safe by design: no `"use client"`, no React, no
@@ -16,39 +16,45 @@ const scriptSafe = (json) => json.replace(/</g, "\\u003c").replace(/>/g, "\\u003
 function jsStringLiteral(value) {
 	return scriptSafe(JSON.stringify(value));
 }
-/**
-* Build the blocking inline script that stamps `data-theme`, `data-density`,
-* `data-font`, `data-mode` and `color-scheme` on `<html>` from localStorage
-* before the first paint.
-*
-* Render it as `<script dangerouslySetInnerHTML={{ __html: prepaintScript() }} />`
-* in `<head>`, above everything else. The output never contains `<\/script>` and
-* never throws: private-mode localStorage failures degrade to the dark-first
-* defaults (`cue` / `compact` / `system` / `dark`), which are also what bare
-* `:root` in `@cueplusplus/tokens/theme.css` already paints.
-*
-* @param storageKey - localStorage key to read. Must match the `storageKey`
-*   passed to `<ThemeProvider>`. Defaults to {@link DEFAULT_STORAGE_KEY}.
-* @param defaultTheme - Theme to stamp for a visitor with nothing persisted yet.
-*   Must match the `theme` passed to `<ThemeProvider>`, or the first paint
-*   dresses `<html>` in one preset while the app renders in another. Defaults to
-*   `"cue"`.
-* @param defaultDensity - Density level to stamp for a visitor with nothing
-*   persisted yet. Same rule as `defaultTheme`: it must match the `density`
-*   passed to `<ThemeProvider>` or the first frame is drawn at one rung and
-*   every frame after it at another. Defaults to `"compact"`, the library's own
-*   fallback, which is what an app that passes no `density` renders at.
-* @returns One line of JavaScript, safe to inline verbatim.
-* @example
-* // An app whose provider is <ThemeProvider theme="terminal" density="normal">:
-* prepaintScript(DEFAULT_STORAGE_KEY, "terminal", "normal");
-*/
-function prepaintScript(storageKey = DEFAULT_STORAGE_KEY, defaultTheme = "cue", defaultDensity = DEFAULT_DENSITY, defaultFont = DEFAULT_FONT) {
+function prepaintScript(storageKeyOrOptions = DEFAULT_STORAGE_KEY, defaultTheme = "cue", defaultDensity = DEFAULT_DENSITY, defaultFont = DEFAULT_FONT) {
+	const options = typeof storageKeyOrOptions === "string" ? {
+		storageKey: storageKeyOrOptions,
+		defaults: {
+			theme: defaultTheme,
+			density: defaultDensity,
+			mode: "dark"
+		},
+		readStoredPreferences: true
+	} : storageKeyOrOptions;
+	if (options === null || typeof options !== "object" || options.defaults === void 0) throw new TypeError("prepaintScript options require a complete default triple");
+	const defaults = options.defaults;
+	if (defaults.theme === void 0 || defaults.density === void 0 || defaults.mode === void 0) throw new TypeError("prepaintScript options require a complete default triple");
+	if (!THEMES.includes(defaults.theme)) throw new TypeError("prepaintScript defaults contain an invalid theme");
+	if (!DENSITIES.includes(defaults.density)) throw new TypeError("prepaintScript defaults contain an invalid density");
+	if (!MODES.includes(defaults.mode)) throw new TypeError("prepaintScript defaults contain an invalid mode");
+	if (defaults.font !== void 0 && !FONTS.includes(defaults.font)) throw new TypeError("prepaintScript defaults contain an invalid font");
+	if (options.readStoredPreferences !== void 0 && typeof options.readStoredPreferences !== "boolean") throw new TypeError("prepaintScript readStoredPreferences must be boolean");
+	const storageKey = options.storageKey ?? "cue-ui";
+	if (typeof storageKey !== "string") throw new TypeError("prepaintScript storageKey must be a string");
+	const readStoredPreferences = options.readStoredPreferences ?? true;
 	const key = jsStringLiteral(storageKey);
-	const fallbackTheme = jsStringLiteral(defaultTheme);
-	const fallbackDensity = jsStringLiteral(defaultDensity);
-	const fallbackFont = jsStringLiteral(defaultFont);
-	return `!function(){try{var k=${key},e=document.documentElement,s=null;try{var r=localStorage.getItem(k);s=r?JSON.parse(r):null}catch(_){}s=s&&typeof s=="object"?s:{};var t=typeof s.theme=="string"&&s.theme?s.theme:${fallbackTheme};var d=${scriptSafe(JSON.stringify([...DENSITIES]))}.indexOf(s.density)>-1?s.density:${fallbackDensity};var f=${scriptSafe(JSON.stringify([...FONTS]))}.indexOf(s.font)>-1?s.font:${fallbackFont};var m=["dark","light","system"].indexOf(s.mode)>-1?s.mode:"dark";if(m==="system")m=typeof matchMedia=="function"&&matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";e.setAttribute("data-theme",t);e.setAttribute("data-density",d);e.setAttribute("data-font",f);e.setAttribute("data-mode",m);e.style.colorScheme=m}catch(_){}}()`;
+	const fallbackTheme = jsStringLiteral(defaults.theme);
+	const fallbackDensity = jsStringLiteral(defaults.density);
+	const fallbackMode = jsStringLiteral(defaults.mode);
+	const fallbackFont = jsStringLiteral(defaults.font ?? defaultFont);
+	const themes = scriptSafe(JSON.stringify([...THEMES]));
+	const densities = scriptSafe(JSON.stringify([...DENSITIES]));
+	const modes = scriptSafe(JSON.stringify([...MODES]));
+	/**
+	* The pairings, from the package that authors them, for the same reason.
+	*
+	* This is also the axis where an unvalidated read is worst: a stale or
+	* hand-edited `font` would stamp an attribute the stylesheet has no block
+	* for, `--cue-font-sans` would keep the base stack, and the page would render
+	* in a family the picker says is not selected.
+	*/
+	const pairings = scriptSafe(JSON.stringify([...FONTS]));
+	return `!function(){try{var k=${key},e=document.documentElement,s=null;` + (readStoredPreferences ? "try{var r=localStorage.getItem(k);s=r?JSON.parse(r):null}catch(_){}" : "") + `s=s&&typeof s=="object"?s:{};var t=${themes}.indexOf(s.theme)>-1?s.theme:${fallbackTheme};var d=${densities}.indexOf(s.density)>-1?s.density:${fallbackDensity};var f=${pairings}.indexOf(s.font)>-1?s.font:${fallbackFont};var m=${modes}.indexOf(s.mode)>-1?s.mode:${fallbackMode};e.setAttribute("data-theme",t);e.setAttribute("data-density",d);e.setAttribute("data-font",f);e.setAttribute("data-mode",m);e.style.colorScheme=m==="system"?"light dark":m}catch(_){}}()`;
 }
 //#endregion
 export { DEFAULT_STORAGE_KEY, prepaintScript };

package/dist/system/theme-provider.d.ts

@@ -24,6 +24,13 @@ interface ThemeContextValue {
   /** Switch the font pairing and persist the new preference. */
   setFont: (font: FontName) => void;
 }
+/** Provider-owned font-family overrides that detached portals must republish. */
+interface FontFamilies {
+  /** Value for `--cue-font-sans`. */
+  sans?: string;
+  /** Value for `--cue-font-mono`. */
+  mono?: string;
+}
 interface ThemeProviderProps {
   /** Initial theme preset. Defaults to `"cue"`. Changing it after mount adopts the new value. */
   theme?: ThemeName;
@@ -49,12 +56,16 @@ interface ThemeProviderProps {
   font?: FontName;
   /** Multiplier on every text token, published as `--cue-font-scale`. Defaults to `1`. */
   fontScale?: number;
+  /** Optional app-owned font stacks, published as inline CUE font custom properties. */
+  fontFamilies?: FontFamilies;
   /**
    * localStorage key holding `{ theme, density, font, mode }`. Defaults to `"cue-ui"`.
    * Only the outermost provider reads or writes it — a nested provider is an
    * island whose explicit props are the point, not a second preference store.
    */
   storageKey?: string;
+  /** Restore and write root preferences in localStorage. Defaults to `true`. */
+  persistPreferences?: boolean;
   /** Stamp the single child element instead of rendering a wrapper `<div>`. */
   asChild?: boolean;
   /** Extra classes for the provider root. */
@@ -93,6 +104,6 @@ interface ThemeProviderProps {
  *   <App />
  * </ThemeProvider>
  */
-declare function ThemeProvider({ theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, fontScale, storageKey, asChild, className, style: styleProp, children }: ThemeProviderProps): React.JSX.Element;
+declare function ThemeProvider({ theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, fontScale, fontFamilies, storageKey, persistPreferences, asChild, className, style: styleProp, children }: ThemeProviderProps): React.JSX.Element;
 //#endregion
-export { ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps };
+export { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps };