@cueplusplus/ui 0.18.2 → 0.19.0

package/dist/dmx/dmx-strip.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { mulberry32, usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { toRem } from "../instruments/_rem.js";
-import { mulberry32, usePrefersReducedMotion } from "../instruments/_motion.js";
 import { dmxPalette, dmxPaletteColor } from "./_ramp.js";
 import { DmxReadout } from "./_readout.js";
 import * as React from "react";
@@ -54,8 +55,9 @@ const DmxStrip = React.forwardRef(function DmxStrip({ className, cells = DEFAULT
 	const valueElementRef = React.useRef(null);
 	const [hover, setHover] = React.useState(null);
 	const portal = useCuePortalProps();
-	const reduced = usePrefersReducedMotion();
-	const animating = simulate && !reduced;
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const animating = simulate && !(prefersReduced || held);
 	useIsomorphicLayoutEffect(() => {
 		const context = canvasRef.current?.getContext("2d");
 		if (!context) return;

package/dist/elements/animated-number.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/elements/animated-number.tsx
@@ -71,7 +72,9 @@ const GROUPED = (value) => value.toLocaleString("en-US");
 */
 const AnimatedNumber = React.forwardRef(function AnimatedNumber({ value, duration = 400, format = GROUPED, className, ...elementProps }, ref) {
 	const target = Number.isFinite(value) ? value : 0;
-	const reduced = usePrefersReducedMotion();
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const reduced = prefersReduced || held;
 	const [shown, setShown] = React.useState(target);
 	const painted = React.useRef(target);
 	React.useEffect(() => {

package/dist/elements/replay.d.ts

@@ -84,7 +84,7 @@ interface ReplayTransport {
   state: ReplayState;
   /** Whether the clock is running. Always `false` under reduced motion. */
   playing: boolean;
-  /** Whether the reader asked for reduced motion, in which case nothing is ever scheduled. */
+  /** Whether the reader asked for reduced motion, or the subtree is held still (`StillProvider`): either way nothing is ever scheduled. */
   reduced: boolean;
   /** The current rate multiplier. */
   rate: number;

package/dist/elements/replay.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import { Chip } from "../primitives/chip.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { Slider } from "../forms/slider.js";
-import { usePrefersReducedMotion } from "../instruments/_motion.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/elements/replay.tsx
@@ -119,7 +120,9 @@ function useReplay(script, options = {}) {
 	const last = count - 1;
 	const starts = React.useMemo(() => startsOf(frames), [frames]);
 	const duration = starts[Math.max(0, last)] ?? 0;
-	const reduced = usePrefersReducedMotion();
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const reduced = prefersReduced || held;
 	const seat = clamp(startAt ?? 0, last);
 	const playable = count > 1 && duration > 0;
 	const [index, setIndex] = React.useState(() => seat);

package/dist/elements/scroll-anchor.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import { field, paper } from "./surfaces.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,7 +23,9 @@ const APPEND_MS = 1300;
 * />
 */
 function ScrollAnchor({ messages, paused = false, onSettled, className, ...props }) {
-	const reduced = usePrefersReducedMotion();
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const reduced = prefersReduced || held;
 	const viewportRef = useRef(null);
 	const [count, setCount] = useState(INITIAL_COUNT);
 	const [pinned, setPinned] = useState(true);

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,6 +1,12 @@
 import { CueLogotype } from "./brand/cue-logotype.js";
 import { CueMark } from "./brand/cue-mark.js";
 import { Plussie } from "./brand/plussie.js";
+import { GlossObject } from "./brand/gloss-object.js";
+import { Halftone } from "./brand/halftone.js";
+import { StillProvider, useStill } from "./system/still.js";
+import { ParticleMark } from "./brand/particle-mark.js";
+import { Ribbon } from "./brand/ribbon.js";
+import { Motif } from "./brand/motif.js";
 import { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, agentColor, agentColorStyle } from "./chat/agent-color.js";
 import { AgentPile } from "./chat/agent-pile.js";
 import { Checkbox, CheckboxGroup } from "./forms/checkbox.js";
@@ -51,6 +57,12 @@ import { ScrollableTabsList, Tabs } from "./chrome/tabs.js";
 import { TitleBar } from "./chrome/title-bar.js";
 import { Tree, TreeVisibilityToggle } from "./chrome/tree.js";
 import { Toolbar } from "./chrome/toolbar.js";
+import { AnnouncementBar } from "./chrome/announcement-bar.js";
+import { Hero } from "./chrome/hero.js";
+import { Keyword } from "./chrome/keyword.js";
+import { LogoStrip } from "./chrome/logo-strip.js";
+import { Stat } from "./instruments/stat.js";
+import { StatBand } from "./chrome/stat-band.js";
 import { Autocomplete } from "./forms/autocomplete.js";
 import { ButtonGroup } from "./forms/button-group.js";
 import { Combobox } from "./forms/combobox.js";
@@ -83,7 +95,6 @@ import { Meter } from "./instruments/meter.js";
 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, TableScrollRegion } from "./instruments/table.js";
 import { TerminalFrame } from "./instruments/terminal-frame.js";
 import { TwoStepButton } from "./instruments/two-step-button.js";
@@ -120,5 +131,6 @@ 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";
+import { FontScope } from "./system/font-scope.js";
 import { DEFAULT_PAINT, DEFAULT_STYLE_SET, PAINTS, STYLE_SETS } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, CodeBlock, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Frames, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Inspector, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, Row, STYLE_SETS, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AnnouncementBar, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, CodeBlock, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, FontScope, Footer, Frames, GlossObject, Grid, GroupBar, Halftone, Hero, HoverCard, IconButton, InfoTip, Input, InputGroup, Inspector, Item, Kbd, Keyword, Ledger, Link, LogoStrip, McpServerIcon, Menubar, Message, MessageList, Meter, Motif, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, Pagination, Panel, PanelHeader, ParticleMark, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, Ribbon, Row, STYLE_SETS, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatBand, StatusBar, StatusDot, Stepper, StillProvider, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useStill, useTheme, useThemes, useToast };

package/dist/instruments/index.js

@@ -1,3 +1,4 @@
+import { Stat } from "./stat.js";
 import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
 import { AppWindowFrame } from "./app-window-frame.js";
 import { CopyButton } from "./copy-button.js";
@@ -10,7 +11,6 @@ import { Meter } from "./meter.js";
 import { Progress } from "./progress.js";
 import { SeamCell, SeamGrid } from "./seam-grid.js";
 import { Sparkline } from "./sparkline.js";
-import { Stat } from "./stat.js";
 import { Table, TableScrollRegion } from "./table.js";
 import { TerminalFrame } from "./terminal-frame.js";
 import { TwoStepButton } from "./two-step-button.js";

package/dist/instruments/stat.js

@@ -12,7 +12,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/stat.tsx
 const VALUE_TONE_CLASSES = {
-	neutral: "text-fg",
+	neutral: "text-[color:var(--cue-style-stat-numeral-ink,var(--cue-fg))]",
 	accent: "text-accent",
 	ok: "text-ok",
 	busy: "text-busy",

package/dist/instruments/terminal-frame.js

@@ -1,10 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { mulberry32, usePrefersReducedMotion } from "./_motion.js";
+import { useStill } from "../system/still.js";
 import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
 import { LABEL_SIZE } from "../system/_style-label-size.js";
 import { CopyButton } from "./copy-button.js";
 import { toRem } from "./_rem.js";
-import { mulberry32, usePrefersReducedMotion } from "./_motion.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/terminal-frame.tsx
@@ -76,7 +77,9 @@ function finalLines(script) {
 * <TerminalFrame simulate={SCRIPT} />
 */
 const TerminalFrame = React.forwardRef(function TerminalFrame({ className, title, lines, prompt = "$", copy = false, copyValue, simulate, height, children, ...elementProps }, ref) {
-	const reduced = usePrefersReducedMotion();
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const reduced = prefersReduced || held;
 	const [transcript, setTranscript] = React.useState(IDLE);
 	React.useEffect(() => {
 		if (simulate === void 0) {

package/dist/layout/grid.js

@@ -15,9 +15,11 @@ const COLUMN_CLASSES = {
 /**
 * The auto-filling track. The measure travels as a custom property rather than
 * as an arbitrary value, so the track definition is one static class the
-* scanner always sees instead of a fresh one per call site.
+* scanner always sees instead of a fresh one per call site. The minimum is
+* capped at the grid's own width, so a column narrower than `minItemWidth` (a
+* phone) gets one full-width track instead of one that overflows it.
 */
-const AUTO_FILL_CLASS = "grid-cols-[repeat(auto-fill,minmax(var(--cue-grid-min),1fr))]";
+const AUTO_FILL_CLASS = "grid-cols-[repeat(auto-fill,minmax(min(var(--cue-grid-min),100%),1fr))]";
 /**
 * Two-dimensional layout: equal columns, or as many as fit.
 *

package/dist/layout/preview.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
-import { usePublish, useRead } from "../system/published.js";
-import { AmbientThemeContext, DensityContext, PaintContext, RootAxesContext, StyleSetContext, rootAxes, useFollowedAxes, useRestateReady } from "../system/density.js";
-import { OverridesContext } from "../system/overrides.js";
-import { NO_PAIRING_SEED, PairingSeedContext, ThemeContext } from "../system/theme-provider.js";
+import { useRead } from "../system/published.js";
+import { DensityContext, PaintContext, StyleSetContext, useFollowedAxes, useRestateReady } from "../system/density.js";
+import { ThemeContext } from "../system/theme-provider.js";
 import { GROUND_CLASSES } from "./_ground.js";
 import { STAGE_MARKS } from "../system/_style-stage-marks.js";
+import { StageScope, stageAttributes } from "../system/_stage-scope.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/layout/preview.tsx
@@ -212,190 +212,6 @@ function effectiveBounds(options, available) {
 	};
 }
 /**
-* The attributes the stage carries — and, when nothing is asked, none at all.
-*
-* Inheriting is the *absence* of attributes, which is why every branch below
-* is conditional. Three branches add a second attribute, each for a reason in
-* the stylesheets rather than in taste.
-*
-* A theme's light block is the compound selector
-* `[data-theme="t"][data-mode="light"]`, so a mode with no theme restates the
-* page's theme on the same element. Read the other way, a theme with no mode
-* repeats the page's mode. Otherwise the stage would match the theme's dark
-* block under a light page, while every popup opened on it came up light:
-* popups are stamped from the context `StageScope` publishes, which carries
-* the page's mode.
-*
-* A theme's density overrides are addressed through `data-cue-theme`, the
-* stamp `<Density>` writes, so a density names the nearest theme the same way.
-*
-* A stage that ends up naming a theme and no rung — its own theme, or the
-* page's restated beside a mode (`scoped`, below) — restates the rung in force
-* around it, as `data-density` with the theme as `data-cue-theme` (spec
-* 2026-09-26-looks-fidelity §4.1.1). A theme's rung retunes are keyed on the
-* theme and the rung on one element, or a rung below the theme, so a stage that
-* re-themes with no `data-density` of its own inherits the rung already
-* resolved against the PAGE's theme, and its own theme's retune of that rung
-* never applies. `/looks` opens every stage this way: a theme and no rung. It
-* is what a nested `ThemeProvider` that names a theme already does — theme,
-* rung and mode together. The rung is the one `DensityContext` carries: `null`
-* outside every provider, where nothing is restated, and never `useDensity()`'s
-* `compact` fallback, which would invent one.
-*
-* The style set adds no second attribute, and that is the difference worth
-* writing down beside the three that do: a `[data-style]` block is a single
-* attribute selector naming no other axis, so a set stamped alone matches on
-* its own.
-*
-* But a stage that re-themes, re-modes or re-faces restates the set and the pack
-* in force around it (`around`), for a reason in custom properties rather than
-* in selectors. Their blocks declare names whose values read those axes — a
-* pack's stroke stops are the theme's borders, a set's band rule and ground are
-* the theme's border and surface — and a custom property's `var()`s are
-* substituted where it is declared. Declared only on the page, they arrive at
-* the stage already resolved against the page's theme and pairing; restated on
-* the stage, beside its own `data-theme` or `data-font`, they resolve against
-* those. A rung alone changes no ink and restates nothing. `around` is `null`
-* until the stage may restate: under a root that persists, not before the stage
-* has mounted, when the set and pack in force are the root's props rather than
-* the visitor's (see `useRestateReady`).
-*
-* The page's mode and rung, restated beside a stage theme — and the page's
-* theme, restated beside a stage mode or as a stage rung's `data-cue-theme` —
-* wait for the same mount on the same terms (tracking plan F13): under a
-* persisting root each is the root's, whose value on the server is its prop
-* while `<html>` carries the visitor's. So until then `followed` holds it back,
-* and `data-cue-follows` names it instead — the theme stylesheets' blocks each
-* have a twin keyed on `<html>`'s value and that marker (a followed rung
-* included: the base rung's twin in `axes.css`, and each theme's retune of it
-* keyed on the stage's own `data-theme`), and a rung node with no
-* `data-cue-theme` is reached by the rung rules' structural form, so the stage
-* paints the visitor's theme, mode and rung from the first frame (see
-* `useFollowedAxes`). A theme, mode or rung the stage names, or one named
-* between it and the root, is stamped as it always was. A followed rung takes
-* its `data-cue-theme` with it: the stamp addresses a `data-density` on the
-* same element, and there is none to address until the rung is stamped.
-*/
-function stageAttributes(asked, page, around, aroundDensity, followed) {
-	const attributes = {};
-	const scoped = asked.theme ?? (asked.mode === void 0 ? null : page?.theme ?? null);
-	if (scoped !== null && (asked.theme !== void 0 || !followed.theme)) attributes["data-theme"] = scoped;
-	const moded = asked.mode ?? (asked.theme === void 0 ? void 0 : page?.mode);
-	if (moded !== void 0 && !followed.mode) attributes["data-mode"] = moded;
-	if (asked.density !== void 0) {
-		attributes["data-density"] = asked.density;
-		const nearest = asked.theme ?? page?.theme ?? null;
-		if (nearest !== null && (asked.theme !== void 0 || !followed.theme)) attributes["data-cue-theme"] = nearest;
-	} else if (scoped !== null && aroundDensity !== null && !followed.density) {
-		attributes["data-density"] = aroundDensity;
-		if (asked.theme !== void 0 || !followed.theme) attributes["data-cue-theme"] = scoped;
-	}
-	if (followed.marker !== null) attributes["data-cue-follows"] = followed.marker;
-	if (asked.font !== void 0) attributes["data-font"] = asked.font;
-	if (asked.styleSet !== void 0) attributes["data-style"] = asked.styleSet;
-	if (asked.paint !== void 0) attributes["data-paint"] = asked.paint;
-	const restates = around !== null && (scoped !== null || moded !== void 0 || asked.font !== void 0);
-	if (restates && asked.styleSet === void 0 && around.styleSet !== null) attributes["data-style"] = around.styleSet;
-	if (restates && asked.paint === void 0 && around.paint !== null) attributes["data-paint"] = around.paint;
-	return attributes;
-}
-/**
-* The contexts the stage republishes, so an overlay opened on it follows it.
-*
-* `useCuePortalProps()` stamps a portal container from `ThemeContext` and
-* `DensityContext`; a popup mounts on `<body>` and inherits nothing from the
-* stage's DOM. So the stage's subtree reads a theme context with the stage's
-* theme and mode, and a density context with the stage's rung. The tools and
-* footer are outside this subtree, so what they open follows the page. A theme
-* the provider did not register leaves `manifest` null, which is what
-* `useTheme()` already reports for a name nobody registered.
-*
-* The style set travels with the density for the same reason and by the same
-* route: `useCuePortalProps()` stamps a portal container from `StyleSetContext`,
-* and a popup opened on the stage inherits nothing from the stage's DOM.
-*
-* And the pairing travels in the theme context, because that is where the
-* portal stamp reads `data-font` from (`theme?.font`). It used not to: the
-* stage stamped `data-font` on its own element and republished nothing, so a
-* popover opened on a `plex` stage came up in the root's pairing — a limit the
-* `font` prop's docblock stated rather than a rule anybody chose. A pairing on
-* the stage is the stage's, exactly as its theme is; `setFont` read here still
-* drives the root, because the pairing's setter has no island form.
-*/
-function StageScope({ theme, mode, density, font, styleSet, paint, children }) {
-	const outer = useRead(ThemeContext);
-	const outerOverrides = useRead(OverridesContext);
-	const outerDensity = useRead(DensityContext);
-	const outerAmbient = useRead(AmbientThemeContext);
-	const outerStyleSet = useRead(StyleSetContext);
-	const outerPaint = useRead(PaintContext);
-	const value = React.useMemo(() => {
-		if (outer === null || theme === void 0 && mode === void 0 && font === void 0) return outer;
-		const scoped = theme ?? outer.theme;
-		return {
-			...outer,
-			theme: scoped,
-			manifest: scoped === outer.theme ? outer.manifest : null,
-			mode: mode ?? outer.mode,
-			font: font ?? outer.font,
-			resolvedMode: mode === "dark" || mode === "light" ? mode : outer.resolvedMode
-		};
-	}, [
-		outer,
-		theme,
-		mode,
-		font
-	]);
-	const stamped = theme !== void 0 || mode !== void 0;
-	const inputs = [
-		theme,
-		mode,
-		density,
-		font,
-		styleSet,
-		paint,
-		React.useContext(ThemeContext),
-		React.useContext(OverridesContext),
-		React.useContext(DensityContext),
-		React.useContext(AmbientThemeContext),
-		React.useContext(StyleSetContext),
-		React.useContext(PaintContext)
-	];
-	const publishedAmbient = usePublish(theme ?? outerAmbient, inputs);
-	const publishedDensity = usePublish(density ?? outerDensity, inputs);
-	const publishedStyleSet = usePublish(styleSet ?? outerStyleSet, inputs);
-	const publishedPaint = usePublish(paint ?? outerPaint, inputs);
-	const publishedOverrides = usePublish(stamped ? null : outerOverrides, inputs);
-	const publishedValue = usePublish(value, inputs);
-	const outerPairingSeed = React.useContext(PairingSeedContext);
-	const outerRootAxes = React.useContext(RootAxesContext);
-	return /* @__PURE__ */ jsx(RootAxesContext.Provider, {
-		value: rootAxes(outerRootAxes.theme && theme === void 0, outerRootAxes.mode && mode === void 0, outerRootAxes.density && density === void 0),
-		children: /* @__PURE__ */ jsx(AmbientThemeContext.Provider, {
-			value: publishedAmbient,
-			children: /* @__PURE__ */ jsx(DensityContext.Provider, {
-				value: publishedDensity,
-				children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
-					value: publishedStyleSet,
-					children: /* @__PURE__ */ jsx(PaintContext.Provider, {
-						value: publishedPaint,
-						children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
-							value: publishedOverrides,
-							children: /* @__PURE__ */ jsx(PairingSeedContext.Provider, {
-								value: font === void 0 ? outerPairingSeed : NO_PAIRING_SEED,
-								children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
-									value: publishedValue,
-									children
-								})
-							})
-						})
-					})
-				})
-			})
-		})
-	});
-}
-/**
 * The stage's size: explicit per axis once a reader has moved it, and the size
 * the layout gives it before that — `null` on an axis, which is also what a
 * double-click returns an axis to.