@cueplusplus/ui 0.8.0 → 0.9.0

package/dist/configurator/panel-sections.js

@@ -1,22 +1,20 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Input } from "../forms/input.js";
-import { DENSITY_LEVELS } from "../system/density.js";
+import { useDensities, useThemes } from "../system/theme-registry.js";
 import { SectionHeader } from "../chrome/section-header.js";
 import { SegmentedControl } from "../chrome/segmented-control.js";
 import { Field, FieldLabel } from "../forms/field.js";
 import { Slider } from "../forms/slider.js";
 import { Kbd } from "../primitives/kbd.js";
 import { useTheme } from "../system/use-theme.js";
-import { THEME_PRESETS } from "../theming/_presets.js";
 import { tokenProperty } from "../theming/serialize.js";
 import { COLOR_TOKENS, FONT_TOKENS, isSafeCssValue } from "./_overrides.js";
 import { TokenEditor } from "./token-editor.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { resolve } from "@cueplusplus/theme-base";
 //#region src/configurator/panel-sections.tsx
-/** The presets, in menu order, with the palette each one is announced by. */
-const PRESETS = Object.keys(THEME_PRESETS);
 /** The five colours a preset is recognisable from, in reading order. */
 const SWATCH_TOKENS = [
 	"bg",
@@ -44,13 +42,25 @@ const MODE_ITEMS = [
 * and `Ultra-large` alone are 25 characters — so the segmented control wears
 * the garment sizes and the value it sets is still the ladder's own name.
 */
-const DENSITY_LABELS = {
+const BASE_DENSITY_LABELS = {
 	"ultra-compact": "XS",
 	"compact": "S",
 	"normal": "M",
 	"large": "L",
 	"ultra-large": "XL"
 };
+/**
+* What a rung is called in the panel.
+*
+* A lookup rather than a table, because the ladder is open now: a theme may add
+* a rung, and this package has no garment size to give it. Its own name is the
+* only label that is certainly true — longer than a letter, and honest about
+* being the theme's rather than the ladder's. The base five keep their sizes,
+* so nothing a user has learned moves.
+*/
+function densityLabel(rung) {
+	return BASE_DENSITY_LABELS[rung] ?? rung;
+}
 /** Bounds of the text-scale knob, from spec §6's `fontScale`. */
 const FONT_SCALE = {
 	min: .8,
@@ -77,7 +87,16 @@ const FONT_LABELS = {
 };
 /** Base UI hands a range slider an array; every slider here has one thumb. */
 const single = (value) => Array.isArray(value) ? value[0] ?? 0 : value;
-/** A number knob wired to one token, live on drag and persisted on release. */
+/**
+* A number knob wired to one token, live on drag and persisted on release.
+*
+* The three it is used for are `--cue-radius-scale` and `--cue-density`, both
+* crossed with the density ladder when they are written, and `--cue-font-scale`,
+* which the provider publishes inline. Naming them here is not decoration: the
+* package manifest's token list is scraped for literal `--cue-*` spellings, and
+* a token whose only spelling in this file is the bare `token="radius-scale"`
+* prop is a token the docs page for this section does not list.
+*/
 function ScaleSlider({ label, token, edits, bounds }) {
 	const value = Number(edits.value(token));
 	return /* @__PURE__ */ jsx(Slider, {
@@ -147,16 +166,27 @@ function TextTokenField({ label, token, edits, placeholder }) {
 */
 function PresetSection({ edits, zoom, className }) {
 	const { theme, density, mode, resolvedMode, setTheme, setDensity, setMode } = useTheme();
+	const themes = useThemes();
+	const densities = useDensities();
 	return /* @__PURE__ */ jsxs(SectionHeader, {
 		label: "Preset",
 		collapsible: true,
 		className,
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			themes.length === 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "text-fg-muted text-ui",
+				children: [
+					"No themes registered — pass ",
+					/* @__PURE__ */ jsx("code", { children: "themes" }),
+					" to ",
+					/* @__PURE__ */ jsx("code", { children: "ThemeProvider" }),
+					"."
+				]
+			}) : /* @__PURE__ */ jsx("div", {
 				className: "grid grid-cols-2 gap-(--cue-space-2)",
-				children: PRESETS.map((name) => {
-					const preset = THEME_PRESETS[name];
-					const palette = (resolvedMode === "light" ? preset.light : preset.dark) ?? preset.dark;
+				children: themes.map((manifest) => {
+					const name = manifest.name;
+					const palette = resolve(manifest, { mode: resolvedMode }).colors;
 					const active = name === theme;
 					return /* @__PURE__ */ jsxs("button", {
 						type: "button",
@@ -197,9 +227,9 @@ function PresetSection({ edits, zoom, className }) {
 				itemClassName: "flex-1",
 				value: density,
 				onValueChange: (next) => setDensity(next),
-				items: DENSITY_LEVELS.map((level) => ({
-					value: level,
-					label: DENSITY_LABELS[level]
+				items: densities.map((rung) => ({
+					value: rung.name,
+					label: densityLabel(rung.name)
 				}))
 			}),
 			/* @__PURE__ */ jsx(ScaleSlider, {

package/dist/elements/command-palette.js

@@ -32,7 +32,7 @@ function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onAc
 		if (next) onActiveChange?.(next.id);
 	};
 	useEffect(() => {
-		document.getElementById(optionId(activeId))?.scrollIntoView({ block: "nearest" });
+		document.getElementById(`${listId}-${activeId}`)?.scrollIntoView({ block: "nearest" });
 	}, [activeId, listId]);
 	const onKeyDown = (event) => {
 		if (event.nativeEvent.isComposing) return;

package/dist/elements/flow-graph.js

@@ -47,7 +47,7 @@ function FlowGraph({ nodes, edges, visibleCount, className, ...props }) {
 					const from = nodes.find((node) => node.id === edge.from);
 					const to = nodes.find((node) => node.id === edge.to);
 					if (!from || !to) return null;
-					shownIds.has(edge.from) && shownIds.has(edge.to);
+					const live = shownIds.has(edge.from) && shownIds.has(edge.to);
 					const a = center(from);
 					const b = center(to);
 					const midX = (a.x + b.x) / 2;
@@ -55,7 +55,7 @@ function FlowGraph({ nodes, edges, visibleCount, className, ...props }) {
 						d: `M ${a.x + NODE_W / 2} ${a.y} C ${midX} ${a.y}, ${midX} ${b.y}, ${b.x - NODE_W / 2} ${b.y}`,
 						fill: "none",
 						strokeWidth: "1.5",
-						className: cn("transition-opacity duration-500 motion-reduce:transition-none", "stroke-fg-subtle")
+						className: cn("transition-opacity duration-500 motion-reduce:transition-none", "stroke-fg-subtle", live ? "opacity-100" : "opacity-30")
 					}, `${edge.from}-${edge.to}`);
 				})
 			}), shown.map((node) => /* @__PURE__ */ jsx("div", {

package/dist/elements/markdown.js

@@ -130,7 +130,7 @@ function safeUrl(value) {
 const FENCE = /^ {0,3}(`{3,}|~{3,})/;
 /** Whether a character can sit next to a delimiter run without closing a word. */
 function isBoundary(char) {
-	return char === "" || /[\s!-\/:-@[-`{-~]/.test(char);
+	return char === "" || /[\s!-/:-@[-`{-~]/.test(char);
 }
 /**
 * Where the last block of `source` begins: after the final blank line that is

package/dist/elements/surfaces.js

@@ -80,10 +80,11 @@ function ShimmerLabel({ active = true, className, ...props }) {
 * announced nor copied into a selection.
 */
 function SwapLabel({ active, children, className }) {
-	const layers = [useRef(null), useRef(null)];
+	const restingRef = useRef(null);
+	const activeRef = useRef(null);
 	const [width, setWidth] = useState(null);
 	useLayoutEffect(() => {
-		const target = layers[active]?.current;
+		const target = (active === 0 ? restingRef : activeRef).current;
 		if (!target) return void 0;
 		const measure = () => setWidth(Math.ceil(target.getBoundingClientRect().width));
 		measure();
@@ -96,7 +97,7 @@ function SwapLabel({ active, children, className }) {
 		style: width === null ? void 0 : { width },
 		className: cn("grid overflow-x-clip transition-[width] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", className),
 		children: children.map((layer, index) => /* @__PURE__ */ jsx("span", {
-			ref: layers[index],
+			ref: index === 0 ? restingRef : activeRef,
 			"aria-hidden": active !== index,
 			className: cn(labelSwap, active === index ? labelSwapIn : labelSwapOut),
 			children: layer

package/dist/index.d.ts

@@ -33,6 +33,7 @@ import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityTo
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./chrome/toolbar.js";
 import "./chrome/index.js";
 import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
+import { TokenOverrides } from "./system/overrides.js";
 import { 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";
@@ -122,7 +123,9 @@ import "./primitives/index.js";
 import { Density, DensityProps } from "./system/density.js";
 import { CuePortalFrame, CuePortalFrameProps, useCuePortalProps } from "./system/portal.js";
 import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOptions, prepaintScript } from "./system/prepaint.js";
+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 { 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 AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type 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 FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type 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, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
+import { DensityEntry, DensityLevel, FontEntry, FontName, Mode, ThemeManifest, ThemeName } from "./system/index.js";
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };

package/dist/index.js

@@ -25,6 +25,7 @@ import { AppBar } from "./chrome/app-bar.js";
 import { Sidebar, useSidebar } from "./layout/sidebar.js";
 import { Density } from "./system/density.js";
 import { DEFAULT_STORAGE_KEY, prepaintScript } from "./system/prepaint.js";
+import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
 import { ThemeProvider } from "./system/theme-provider.js";
 import { CuePortalFrame, useCuePortalProps } from "./system/portal.js";
 import { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses } from "./overlays/_surface.js";
@@ -112,4 +113,4 @@ import { Kbd } from "./primitives/kbd.js";
 import { Skeleton } from "./primitives/skeleton.js";
 import { useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };

package/dist/midi/piano-keyboard.js

@@ -49,7 +49,11 @@ const PianoKeyboard = React.forwardRef(function PianoKeyboard({ className, range
 	const [drag, setDrag] = React.useState(null);
 	const settled = React.useMemo(() => keyboardWindow(range, octaves), [range, octaves]);
 	const view = drag?.window ?? settled;
-	const layout = React.useMemo(() => keyboardLayout(view), [view.start, view.end]);
+	const { start: viewStart, end: viewEnd } = view;
+	const layout = React.useMemo(() => keyboardLayout({
+		start: viewStart,
+		end: viewEnd
+	}), [viewStart, viewEnd]);
 	const lit = React.useMemo(() => new Set(highlight ?? []), [highlight]);
 	const setEdge = (edge, note) => {
 		const next = edge === "start" ? {

package/dist/primitives/chip.d.ts

@@ -30,7 +30,7 @@ import * as React from "react";
  * <span className={chipVariants({ variant: "tag" })}>mcp</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" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/styles.css

@@ -3,13 +3,35 @@
  * Consumer app CSS:
  *   @import "tailwindcss";
  *   @import "@cueplusplus/ui/styles.css";
+ *   @import "@cueplusplus/theme-cue/theme.css";   (or any theme package)
  *
  * Tailwind v4 does not scan node_modules, so the library registers its own
  * sources: `@source "./"` resolves relative to THIS file, i.e. the shipped
  * dist/, which is where the class strings live after the build.
  */
 
-@import "@cueplusplus/tokens/theme.css";
+/* Two lines, and the first one is the release's whole behaviour change.
+ *
+ * It used to be `@cueplusplus/tokens/theme.css`, which carried ten palettes and
+ * painted `cue` on a bare `:root`. A palette is a package now, so what this
+ * library ships is the *blank* base: `theme-base/base.css` declares every colour
+ * token at a neutral default and imports `@cueplusplus/tokens/axes.css` for the
+ * geometry and type axes. That is why there is no third line — `base.css`
+ * carries the axes with it, and `tailwind.css` maps utilities onto token names
+ * and pulls nothing.
+ *
+ * An app that imports this and registers no theme therefore paints greys and one
+ * desaturated accent, rather than somebody's brand. To get a palette back:
+ * install a theme package, import its stylesheet after this one, and pass its
+ * manifest to the provider —
+ *
+ *   @import "@cueplusplus/ui/styles.css";
+ *   @import "@cueplusplus/theme-cue/theme.css";
+ *
+ * with `<ThemeProvider themes={[cue]} theme="cue">`. Order matters and is not an
+ * accident: `[data-theme]` and `:root` tie at (0,1,0), so a theme's block wins
+ * by being declared later. */
+@import "@cueplusplus/theme-base/base.css";
 @import "@cueplusplus/tokens/tailwind.css";
 
 @source "./";

package/dist/system/density.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Density } from "@cueplusplus/tokens";
+import { Density } from "@cueplusplus/theme-base";
 //#region src/system/density.d.ts
 interface DensityProps {
   /**
@@ -17,14 +17,23 @@ interface DensityProps {
 /**
  * Re-scope any subtree to a different density level.
  *
- * Renders a plain `<div data-density="…">`: the geometry custom properties are
- * re-declared by the attribute selector and inherit down, so nesting is free and
- * needs no JS. The matching React context is published alongside for the rare
- * JS reads (`useDensity()`, `useControlHeight()`, portal stamping) — the DOM
- * attribute, not the context, is what actually restyles the tree.
+ * Renders a plain `<div data-density="…" data-cue-theme="…">`: the geometry
+ * custom properties are re-declared by the attribute selector and inherit
+ * down, so nesting is free and needs no JS. The matching React context is
+ * published alongside for the rare JS reads (`useDensity()`,
+ * `useControlHeight()`, portal stamping) — the DOM attributes, not the
+ * context, are what actually restyle the tree.
  *
- * Theme and mode are deliberately *not* re-scoped here: density is the only axis
- * an island may override (spec §6).
+ * `data-cue-theme` carries the nearest `<ThemeProvider>`'s name, or is
+ * omitted where there is none. It is read by nothing this island does —
+ * theme and mode are deliberately *not* re-scoped here, density is the only
+ * axis an island may override (spec §6) — it exists so a theme's own
+ * generated CSS can address exactly this island regardless of how many
+ * *other* themed providers sit between it and the one it belongs to. A CSS
+ * ancestor selector can only ask "does some ancestor carry theme `x`", never
+ * "is `x` the *nearest* one"; this stamp answers that question the way
+ * `useContext` already does, at render time, and hands the answer to CSS as
+ * an attribute rather than leaving it unanswerable there.
  *
  * @example
  * <Density density="ultra-compact">

package/dist/system/density.js

@@ -10,14 +10,6 @@ import { jsx } from "react/jsx-runtime";
 * but the level a screen gets when nobody chose is the dense one.
 */
 const DEFAULT_DENSITY = "compact";
-/** The five levels, as a runtime array for validating persisted input. */
-const DENSITY_LEVELS = [
-	"ultra-compact",
-	"compact",
-	"normal",
-	"large",
-	"ultra-large"
-];
 /**
 * Nearest ambient density. `null` means "nothing has stamped a level yet", which
 * `useDensity()` reports as {@link DEFAULT_DENSITY}.
@@ -26,16 +18,45 @@ const DENSITY_LEVELS = [
 */
 const DensityContext = React.createContext(null);
 /**
+* Nearest ambient theme's name, published for exactly one reader: `Density`
+* below, which stamps it onto its island as `data-cue-theme` so a theme's
+* CSS can tell *nearest* theme from *any* theme in the ancestor chain (see
+* `densityRules`/`themeSelector`'s comment). `use-density.ts`'s measuring
+* probe stamps the same attribute from the identical value, read through
+* `ThemeContext` there instead, because it already imports that module with
+* no cycle.
+*
+* Defined here, not in `theme-provider.tsx`, and re-exported from nowhere
+* else. `theme-provider.tsx` already imports `DensityContext` from this
+* module; a context this small living over there and imported back here
+* would cycle the two modules. `null` outside a provider, the same as
+* `ThemeContext`'s own theme field would be if it existed with no provider
+* to require — `Density` used bare, with nothing above it, stamps nothing.
+*
+* Internal: `Density` is the only reader. Not `useTheme()` — that throws
+* outside a provider, and this island has no reason to.
+*/
+const AmbientThemeContext = React.createContext(null);
+/**
 * Re-scope any subtree to a different density level.
 *
-* Renders a plain `<div data-density="…">`: the geometry custom properties are
-* re-declared by the attribute selector and inherit down, so nesting is free and
-* needs no JS. The matching React context is published alongside for the rare
-* JS reads (`useDensity()`, `useControlHeight()`, portal stamping) — the DOM
-* attribute, not the context, is what actually restyles the tree.
+* Renders a plain `<div data-density="…" data-cue-theme="…">`: the geometry
+* custom properties are re-declared by the attribute selector and inherit
+* down, so nesting is free and needs no JS. The matching React context is
+* published alongside for the rare JS reads (`useDensity()`,
+* `useControlHeight()`, portal stamping) — the DOM attributes, not the
+* context, are what actually restyle the tree.
 *
-* Theme and mode are deliberately *not* re-scoped here: density is the only axis
-* an island may override (spec §6).
+* `data-cue-theme` carries the nearest `<ThemeProvider>`'s name, or is
+* omitted where there is none. It is read by nothing this island does —
+* theme and mode are deliberately *not* re-scoped here, density is the only
+* axis an island may override (spec §6) — it exists so a theme's own
+* generated CSS can address exactly this island regardless of how many
+* *other* themed providers sit between it and the one it belongs to. A CSS
+* ancestor selector can only ask "does some ancestor carry theme `x`", never
+* "is `x` the *nearest* one"; this stamp answers that question the way
+* `useContext` already does, at render time, and hands the answer to CSS as
+* an attribute rather than leaving it unanswerable there.
 *
 * @example
 * <Density density="ultra-compact">
@@ -43,10 +64,12 @@ const DensityContext = React.createContext(null);
 * </Density>
 */
 function Density({ density, children, className, style }) {
+	const theme = React.useContext(AmbientThemeContext);
 	return /* @__PURE__ */ jsx(DensityContext.Provider, {
 		value: density,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-density": density,
+			"data-cue-theme": theme ?? void 0,
 			className,
 			style,
 			children
@@ -54,4 +77,4 @@ function Density({ density, children, className, style }) {
 	});
 }
 //#endregion
-export { DEFAULT_DENSITY, DENSITY_LEVELS, Density, DensityContext };
+export { AmbientThemeContext, DEFAULT_DENSITY, Density, DensityContext };

package/dist/system/index.d.ts

@@ -1,8 +1,11 @@
+import { TokenOverrides } from "./overrides.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, PrepaintDefaults, PrepaintOptions, prepaintScript } from "./prepaint.js";
+import { ThemeRegistry } from "./vocabulary.js";
+import { useDensities, useFonts, useThemes } from "./theme-registry.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 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 };
+import { Density as DensityLevel, DensityEntry, FontEntry, FontName, Mode, ThemeManifest, ThemeName } from "@cueplusplus/theme-base";
+export { type ControlSize, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, Density, type DensityEntry, type DensityLevel, type DensityProps, type FontEntry, type FontFamilies, type FontName, type Mode, type PersistedPreferences, type PrepaintDefaults, type PrepaintOptions, type ResolvedMode, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, type TokenOverrides, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useTheme, useThemes };

package/dist/system/index.js

@@ -1,7 +1,8 @@
 import { Density } from "./density.js";
 import { DEFAULT_STORAGE_KEY, prepaintScript } from "./prepaint.js";
+import { useDensities, useFonts, useThemes } from "./theme-registry.js";
 import { ThemeProvider } from "./theme-provider.js";
 import { CuePortalFrame, useCuePortalProps } from "./portal.js";
 import { useControlHeight, useDensity } from "./use-density.js";
 import { useTheme } from "./use-theme.js";
-export { CuePortalFrame, DEFAULT_STORAGE_KEY, Density, ThemeProvider, prepaintScript, useControlHeight, useCuePortalProps, useDensity, useTheme };
+export { CuePortalFrame, DEFAULT_STORAGE_KEY, Density, ThemeProvider, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useTheme, useThemes };

package/dist/system/overrides.d.ts

@@ -0,0 +1,43 @@
+import "react";
+import { ColorToken, GeometryToken, ThemeManifest } from "@cueplusplus/theme-base";
+//#region src/system/overrides.d.ts
+/**
+ * A typed edit over the active theme.
+ *
+ * Not `ThemeOverrides`: `@cueplusplus/ui/configurator` already exports a type
+ * by that name — the serialised edit snapshot its panel writes — and the root
+ * barrel re-exports `./system` wholesale, so two public types under one name in
+ * one package would be an alias every consumer of both subpaths has to write.
+ * This one overrides *tokens*, which is what it is named for.
+ *
+ * Every key is checked against the token contracts, so a typo is a compile
+ * error rather than a custom property nothing reads.
+ */
+interface TokenOverrides {
+  /**
+   * Colour tokens, per block. Only the block the resolved mode is in is
+   * emitted, so a provider under `mode="light"` never publishes the dark edit —
+   * which is what makes the two independent rather than a merge.
+   */
+  colors?: {
+    dark?: Partial<Record<ColorToken, string>>;
+    light?: Partial<Record<ColorToken, string>>;
+  };
+  /**
+   * Geometry, per rung. The key is a rung name — one of the base five, or one a
+   * registered theme adds — and the value only the tokens that move.
+   */
+  densities?: Partial<Record<string, Partial<Record<GeometryToken, string>>>>;
+  /**
+   * Font stacks. These write `--cue-font-sans` / `--cue-font-mono` /
+   * `--cue-font-display` directly, and so shadow the pairing on `data-font` for
+   * the subtree — see `ThemeProviderProps.overrides`.
+   */
+  fonts?: Partial<{
+    sans: string;
+    mono: string;
+    display: string;
+  }>;
+}
+//#endregion
+export { TokenOverrides };