@cueplusplus/ui 0.12.0 → 0.14.0

package/dist/layout/preview.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
-import { AmbientThemeContext, DensityContext } from "../system/density.js";
+import { AmbientThemeContext, DensityContext, StyleSetContext } from "../system/density.js";
 import { OverridesContext } from "../system/overrides.js";
 import { ThemeContext } from "../system/theme-provider.js";
 import { GROUND_CLASSES } from "./_ground.js";
@@ -34,7 +34,7 @@ const BENCH_CLASS = "relative flex min-w-0 flex-1 overflow-auto rounded-t-(--rad
 * goes.** `cn` preserves the order it is given, so a ground appended after the
 * padding would emit the dot grid in a different place from the one every
 * caller's markup has today — and `/`'s seventeen bare Previews and the group
-* pages' 325 tooled ones are both measured to the byte. Head, ground, tail, in
+* pages' 326 tooled ones are both measured to the byte. Head, ground, tail, in
 * that order, is today's string.
 */
 const STAGE_HEAD = "grid h-full w-full min-h-[calc(var(--cue-space-8)*3)] place-items-center-safe";
@@ -222,6 +222,11 @@ function effectiveBounds(options, available) {
 *
 * 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.
+*
+* 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.
 */
 function stageAttributes(asked, page) {
 	const attributes = {};
@@ -235,6 +240,7 @@ function stageAttributes(asked, page) {
 		if (nearest !== null) attributes["data-cue-theme"] = nearest;
 	}
 	if (asked.font !== void 0) attributes["data-font"] = asked.font;
+	if (asked.styleSet !== void 0) attributes["data-style"] = asked.styleSet;
 	return attributes;
 }
 /**
@@ -247,12 +253,17 @@ function stageAttributes(asked, page) {
 * 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.
 */
-function StageScope({ theme, mode, density, children }) {
+function StageScope({ theme, mode, density, styleSet, children }) {
 	const outer = React.useContext(ThemeContext);
 	const outerOverrides = React.useContext(OverridesContext);
 	const outerDensity = React.useContext(DensityContext);
 	const outerAmbient = React.useContext(AmbientThemeContext);
+	const outerStyleSet = React.useContext(StyleSetContext);
 	const value = React.useMemo(() => {
 		if (outer === null || theme === void 0 && mode === void 0) return outer;
 		const scoped = theme ?? outer.theme;
@@ -273,11 +284,14 @@ function StageScope({ theme, mode, density, children }) {
 		value: theme ?? outerAmbient,
 		children: /* @__PURE__ */ jsx(DensityContext.Provider, {
 			value: density ?? outerDensity,
-			children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
-				value: stamped ? null : outerOverrides,
-				children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
-					value,
-					children
+			children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
+				value: styleSet ?? outerStyleSet,
+				children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
+					value: stamped ? null : outerOverrides,
+					children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
+						value,
+						children
+					})
 				})
 			})
 		})
@@ -456,13 +470,14 @@ function Grips({ label, options, size }) {
 * whatever canvas the frame sits on shows through. Everything below holds in
 * both.
 *
-* **The stage is the island; the chrome is not.** `theme`, `mode`, `density`
-* and `font` land on the stage element only, and the stage republishes the
-* theme and density contexts so an overlay opened on it follows it. The tools,
-* the footer, the grips and anything they open stay in the scope around the
-* Preview — a `terminal` preview's own controls do not turn cyan. With none of
-* the four set, the stage carries no attribute and costs what a `<div>` costs.
-* A stage `theme` with no `mode` repeats the page's mode beside it.
+* **The stage is the island; the chrome is not.** `theme`, `mode`, `density`,
+* `font` and `styleSet` land on the stage element only, and the stage
+* republishes the theme, density and style-set contexts so an overlay opened on
+* it follows it. The tools, the footer, the grips and anything they open stay
+* in the scope around the Preview — a `terminal` preview's own controls do not
+* turn cyan. With none of the five set, the stage carries no attribute and
+* costs what a `<div>` costs. A stage `theme` with no `mode` repeats the page's
+* mode beside it.
 *
 * **`resizable` is handles of its own**, both axes by default: an edge grip per
 * axis that is a keyboard-operable `separator` valued in pixels, and a corner
@@ -485,8 +500,12 @@ function Grips({ label, options, size }) {
 * <Preview label="Button" presentation="frame" count={3}>
 *   <Button variant="primary">Take cue</Button>
 * </Preview>
+* @example
+* <Preview label="Editorial band" styleSet="editorial" presentation="frame">
+*   <Container className="max-w-(--cue-measure-prose)">…</Container>
+* </Preview>
 */
-const Preview = React.forwardRef(function Preview({ children, label, theme, mode, density, font, resizable, tools, footer, presentation = "panel", name, count, ground, captions = true, className, ...elementProps }, ref) {
+const Preview = React.forwardRef(function Preview({ children, label, theme, mode, density, font, styleSet, resizable, tools, footer, presentation = "panel", name, count, ground, captions = true, className, ...elementProps }, ref) {
 	const outer = React.useContext(ThemeContext);
 	const bench = React.useRef(null);
 	const given = resolveResize(resizable);
@@ -497,7 +516,8 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 		theme,
 		mode,
 		density,
-		font
+		font,
+		styleSet
 	}, outer);
 	const framed = presentation === "frame";
 	const stage = /* @__PURE__ */ jsx("div", {
@@ -509,6 +529,7 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 			theme,
 			mode,
 			density,
+			styleSet,
 			children
 		})
 	});

package/dist/overlays/_surface.d.ts

@@ -49,7 +49,7 @@ declare const overlayTextClasses = "font-mono text-(length:--cue-text-ui) text-f
 /** The heading line of a dialog, an alert dialog or a popover. */
 declare const overlayTitleClasses = "font-mono text-(length:--cue-text-emphasis) font-medium text-fg";
 /** The supporting line under an overlay title. */
-declare const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-relaxed text-fg-muted";
+declare const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
 /** The action strip at the foot of a modal surface. */
 declare const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3) pt-(--cue-space-2)";
 /**

package/dist/overlays/_surface.js

@@ -49,7 +49,7 @@ const overlayTextClasses = "font-mono text-(length:--cue-text-ui) text-fg";
 /** The heading line of a dialog, an alert dialog or a popover. */
 const overlayTitleClasses = "font-mono text-(length:--cue-text-emphasis) font-medium text-fg";
 /** The supporting line under an overlay title. */
-const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-relaxed text-fg-muted";
+const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
 /** The action strip at the foot of a modal surface. */
 const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3) pt-(--cue-space-2)";
 /**

package/dist/overlays/toast.js

@@ -83,7 +83,7 @@ function ToastItem({ toast, className, closeLabel }) {
 			}),
 			/* @__PURE__ */ jsx(Toast.Description, {
 				"data-slot": "toast-description",
-				className: "font-mono text-(length:--cue-text-label) leading-relaxed text-fg-muted"
+				className: "font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg-muted"
 			}),
 			/* @__PURE__ */ jsx(Toast.Action, {
 				"data-slot": "toast-action",

package/dist/overlays/tooltip.js

@@ -83,7 +83,7 @@ const Tooltip$1 = {
 					id,
 					role: "tooltip",
 					"data-slot": "tooltip-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "max-w-[16rem] px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-label) leading-relaxed text-fg", className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "max-w-[16rem] px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg", className),
 					...popupProps,
 					children
 				})

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/system/density.d.ts

@@ -1,12 +1,33 @@
 import * as React from "react";
-import { Density } from "@cueplusplus/theme-base";
+import { StyleSet } from "@cueplusplus/tokens";
+import { Density as Density$1 } from "@cueplusplus/theme-base";
 //#region src/system/density.d.ts
 interface DensityProps {
   /**
    * Level to apply to this subtree: `ultra-compact`, `compact`, `normal`,
    * `large` or `ultra-large`.
    */
-  density: Density;
+  density: Density$1;
+  /**
+   * A style set for this subtree: `console`, `editorial` or `marketing`.
+   *
+   * Optional, and **absent means inherit** — an island that names none stamps no
+   * `data-style` and passes the ambient set straight through, exactly as a bare
+   * `<Density>` does today. Naming one is what makes this the library's island
+   * form of the fourth axis, and there are two reasons to reach for it:
+   *
+   * - `console` inside a page that is not console. That is the whole job of the
+   *   default set: it restates the `:root` defaults, so a subtree stamped with
+   *   it renders the ordinary look inside an editorial or marketing page.
+   * - Moving the band rhythm with the rung. `--cue-band-y` is
+   *   `calc(var(--cue-space-7) * 2)` declared on the `[data-style]` element, and
+   *   a custom property's `var()` references are substituted where they are
+   *   declared — so a nested density island moves `--cue-space-*` but inherits
+   *   the rhythm already resolved above it. Restating the set here re-resolves
+   *   it against this island's rung, which is how a denser island gets a
+   *   proportionally tighter band instead of the outer one's.
+   */
+  styleSet?: StyleSet;
   /** Subtree that should render at `density`. */
   children: React.ReactNode;
   /** Extra classes for the island element. It is an ordinary `<div>` — style it like one. */
@@ -26,8 +47,9 @@ interface DensityProps {
  *
  * `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
+ * theme and mode are deliberately *not* re-scoped here; density was for a long
+ * time the only axis an island could override (spec §6), and a named
+ * `styleSet` is the second and last — 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
@@ -35,11 +57,17 @@ interface DensityProps {
  * `useContext` already does, at render time, and hands the answer to CSS as
  * an attribute rather than leaving it unanswerable there.
  *
+ * `data-style` joins them when — and only when — a `styleSet` is named. Absence
+ * is how the axis inherits: custom properties inherit down the DOM, so an island
+ * that stamped the ambient set would be restating an answer it already had, and
+ * an island that stamped a *default* set would silently re-point the rhythm of
+ * every page that nested one.
+ *
  * @example
  * <Density density="ultra-compact">
  *   <Toolbar />
  * </Density>
  */
-declare function Density$1({ density, children, className, style }: DensityProps): React.JSX.Element;
+declare function Density$2({ density, styleSet, children, className, style }: DensityProps): React.JSX.Element;
 //#endregion
-export { Density$1 as Density, DensityProps };
+export { Density$2 as Density, DensityProps };

package/dist/system/density.js

@@ -38,6 +38,25 @@ const DensityContext = React.createContext(null);
 */
 const AmbientThemeContext = React.createContext(null);
 /**
+* Nearest ambient style set. `null` means "nothing has stamped a set", which
+* every reader reports as "no style set" rather than as the default one.
+*
+* Defined here, not in `theme-provider.tsx`, for the reason `AmbientThemeContext`
+* above is: `theme-provider.tsx` already imports `DensityContext` from this
+* module, and a context this small living over there and imported back here
+* would cycle the two modules. Its readers are the provider, `Density` below,
+* `Preview`'s `StageScope` and the portal stamp.
+*
+* Internal, and read directly rather than through `useTheme().styleSet`. A
+* provider publishes this and its `ThemeContext.styleSet` from one value, so
+* inside a provider the two agree; a `<Density styleSet>` island re-scopes this
+* context without a `ThemeContext` of its own, so only this one answers "what
+* set is stamped around me" everywhere. That is the question `Preview`'s stage
+* and the portal stamp have to ask, because both leave the DOM they were
+* written in and have to carry the answer with them.
+*/
+const StyleSetContext = React.createContext(null);
+/**
 * Re-scope any subtree to a different density level.
 *
 * Renders a plain `<div data-density="…" data-cue-theme="…">`: the geometry
@@ -49,8 +68,9 @@ const AmbientThemeContext = React.createContext(null);
 *
 * `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
+* theme and mode are deliberately *not* re-scoped here; density was for a long
+* time the only axis an island could override (spec §6), and a named
+* `styleSet` is the second and last — 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
@@ -58,23 +78,34 @@ const AmbientThemeContext = React.createContext(null);
 * `useContext` already does, at render time, and hands the answer to CSS as
 * an attribute rather than leaving it unanswerable there.
 *
+* `data-style` joins them when — and only when — a `styleSet` is named. Absence
+* is how the axis inherits: custom properties inherit down the DOM, so an island
+* that stamped the ambient set would be restating an answer it already had, and
+* an island that stamped a *default* set would silently re-point the rhythm of
+* every page that nested one.
+*
 * @example
 * <Density density="ultra-compact">
 *   <Toolbar />
 * </Density>
 */
-function Density({ density, children, className, style }) {
+function Density({ density, styleSet, children, className, style }) {
 	const theme = React.useContext(AmbientThemeContext);
+	const ambientStyleSet = React.useContext(StyleSetContext);
 	return /* @__PURE__ */ jsx(DensityContext.Provider, {
 		value: density,
-		children: /* @__PURE__ */ jsx("div", {
-			"data-density": density,
-			"data-cue-theme": theme ?? void 0,
-			className,
-			style,
-			children
+		children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
+			value: styleSet ?? ambientStyleSet,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-density": density,
+				"data-cue-theme": theme ?? void 0,
+				"data-style": styleSet ?? void 0,
+				className,
+				style,
+				children
+			})
 		})
 	});
 }
 //#endregion
-export { AmbientThemeContext, DEFAULT_DENSITY, Density, DensityContext };
+export { AmbientThemeContext, DEFAULT_DENSITY, Density, DensityContext, StyleSetContext };

package/dist/system/index.d.ts

@@ -7,5 +7,6 @@ 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 { DEFAULT_STYLE_SET, STYLE_SETS, StyleSet } from "@cueplusplus/tokens";
 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, isSafeTokenValue, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useTheme, useThemes };
+export { type ControlSize, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, Density, type DensityEntry, type DensityLevel, type DensityProps, type FontEntry, type FontFamilies, type FontName, type Mode, type PersistedPreferences, type PrepaintDefaults, type PrepaintOptions, type ResolvedMode, STYLE_SETS, type StyleSet, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, type TokenOverrides, isSafeTokenValue, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useTheme, useThemes };

package/dist/system/index.js

@@ -6,4 +6,5 @@ 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, isSafeTokenValue, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useTheme, useThemes };
+import { DEFAULT_STYLE_SET, STYLE_SETS } from "@cueplusplus/tokens";
+export { CuePortalFrame, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, Density, STYLE_SETS, ThemeProvider, isSafeTokenValue, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useTheme, useThemes };

package/dist/system/portal.d.ts

@@ -7,8 +7,9 @@ import * as React from "react";
  * Returns a `container` element appended to `document.body` and stamped with
  * `data-theme` / `data-density` / `data-font` / `data-mode` (plus
  * `--cue-font-scale` and any `ThemeProvider` `overrides` colour or font
- * property) copied from the nearest provider and density island, and
- * with `data-cue-skin` / `data-cue-fidelity` when the caller sits inside an
+ * property) copied from the nearest provider and density island, with
+ * `data-style` when the caller is inside a style set, and with
+ * `data-cue-skin` / `data-cue-fidelity` when the caller sits inside an
  * `AgentSurface` island. The container is
  * `display: contents`, so it changes no layout and creates no containing block —
  * fixed-position overlay content behaves exactly as if it were a direct child of
@@ -41,11 +42,11 @@ interface CuePortalFrameProps {
  * chosen (a third-party overlay, or content already portaled by something else).
  *
  * Wraps `children` in a `display: contents` element carrying the same
- * `data-theme` / `data-density` / `data-font` / `data-mode` / `data-cue-skin` /
- * `data-cue-fidelity` stamp, `--cue-font-scale` and `overrides` properties as
- * {@link useCuePortalProps}. Prefer the hook — a stamped container costs one
- * element per overlay instead of one per render tree — and reach for this only
- * when the container prop is not available.
+ * `data-theme` / `data-density` / `data-font` / `data-mode` / `data-style` /
+ * `data-cue-skin` / `data-cue-fidelity` stamp, `--cue-font-scale` and
+ * `overrides` properties as {@link useCuePortalProps}. Prefer the hook — a
+ * stamped container costs one element per overlay instead of one per render
+ * tree — and reach for this only when the container prop is not available.
  *
  * @example
  * <SomeThirdPartyPortal><CuePortalFrame>{content}</CuePortalFrame></SomeThirdPartyPortal>

package/dist/system/portal.js

@@ -1,7 +1,7 @@
 "use client";
 import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
 import { AgentSkinContext } from "./agent-skin.js";
-import { DensityContext } from "./density.js";
+import { DensityContext, StyleSetContext } from "./density.js";
 import { OverridesContext } from "./overrides.js";
 import { FontFamiliesContext, FontScaleContext, ThemeContext } from "./theme-provider.js";
 import * as React from "react";
@@ -30,6 +30,7 @@ function usePortalStamp() {
 	const fontFamilies = React.useContext(FontFamiliesContext);
 	const overrides = React.useContext(OverridesContext);
 	const skin = React.useContext(AgentSkinContext);
+	const styleSet = React.useContext(StyleSetContext);
 	return {
 		theme: theme?.theme ?? DEFAULT_THEME,
 		density: island ?? theme?.density ?? "compact",
@@ -39,7 +40,8 @@ function usePortalStamp() {
 		fontFamilies,
 		overrides,
 		skin: skin?.skin ?? null,
-		fidelity: skin?.fidelity ?? null
+		fidelity: skin?.fidelity ?? null,
+		styleSet
 	};
 }
 /**
@@ -49,8 +51,9 @@ function usePortalStamp() {
 * Returns a `container` element appended to `document.body` and stamped with
 * `data-theme` / `data-density` / `data-font` / `data-mode` (plus
 * `--cue-font-scale` and any `ThemeProvider` `overrides` colour or font
-* property) copied from the nearest provider and density island, and
-* with `data-cue-skin` / `data-cue-fidelity` when the caller sits inside an
+* property) copied from the nearest provider and density island, with
+* `data-style` when the caller is inside a style set, and with
+* `data-cue-skin` / `data-cue-fidelity` when the caller sits inside an
 * `AgentSurface` island. The container is
 * `display: contents`, so it changes no layout and creates no containing block —
 * fixed-position overlay content behaves exactly as if it were a direct child of
@@ -93,6 +96,7 @@ function useCuePortalProps() {
 		stamp.theme,
 		stamp.density,
 		stamp.font,
+		stamp.styleSet,
 		stamp.mode,
 		stamp.fontScale,
 		stamp.fontFamilies?.sans,
@@ -126,6 +130,8 @@ function applyStamp(element, stamp) {
 	element.setAttribute("data-density", stamp.density);
 	element.setAttribute("data-font", stamp.font);
 	element.setAttribute("data-mode", stamp.mode);
+	if (stamp.styleSet === null) element.removeAttribute("data-style");
+	else element.setAttribute("data-style", stamp.styleSet);
 	if (stamp.skin === null) element.removeAttribute("data-cue-skin");
 	else element.setAttribute("data-cue-skin", stamp.skin);
 	if (stamp.fidelity === null) element.removeAttribute("data-cue-fidelity");
@@ -150,11 +156,11 @@ function setOptionalProperty(element, property, value) {
 * chosen (a third-party overlay, or content already portaled by something else).
 *
 * Wraps `children` in a `display: contents` element carrying the same
-* `data-theme` / `data-density` / `data-font` / `data-mode` / `data-cue-skin` /
-* `data-cue-fidelity` stamp, `--cue-font-scale` and `overrides` properties as
-* {@link useCuePortalProps}. Prefer the hook — a stamped container costs one
-* element per overlay instead of one per render tree — and reach for this only
-* when the container prop is not available.
+* `data-theme` / `data-density` / `data-font` / `data-mode` / `data-style` /
+* `data-cue-skin` / `data-cue-fidelity` stamp, `--cue-font-scale` and
+* `overrides` properties as {@link useCuePortalProps}. Prefer the hook — a
+* stamped container costs one element per overlay instead of one per render
+* tree — and reach for this only when the container prop is not available.
 *
 * @example
 * <SomeThirdPartyPortal><CuePortalFrame>{content}</CuePortalFrame></SomeThirdPartyPortal>
@@ -175,6 +181,7 @@ function CuePortalFrame({ children, className, style }) {
 		"data-density": stamp.density,
 		"data-font": stamp.font,
 		"data-mode": stamp.mode,
+		"data-style": stamp.styleSet ?? void 0,
 		"data-cue-skin": stamp.skin ?? void 0,
 		"data-cue-fidelity": stamp.fidelity ?? void 0,
 		className,

package/dist/system/prepaint.d.ts

@@ -1,4 +1,5 @@
-import { Density, FontName, Mode, ThemeManifest, ThemeName } from "@cueplusplus/theme-base";
+import { StyleSet } from "@cueplusplus/tokens";
+import { Density as Density$1, FontName, Mode, ThemeManifest, ThemeName } from "@cueplusplus/theme-base";
 //#region src/system/prepaint.d.ts
 /** localStorage key the ThemeProvider and the pre-paint script share by default. */
 declare const DEFAULT_STORAGE_KEY = "cue-ui";
@@ -12,6 +13,14 @@ interface PersistedPreferences {
   mode?: string;
   /** Last font pairing the user picked. */
   font?: string;
+  /**
+   * Last style set the user picked, or absent — which is what "no style set"
+   * looks like in storage. Absent rather than `null`, because the key is written
+   * only when there is a set: an application that never touches the axis stores
+   * the four-key object it always stored, and the pre-paint script has no fifth
+   * value to hold an opinion about.
+   */
+  style?: string;
 }
 /**
  * The server-authoritative fallback stamped when storage is absent or ignored.
@@ -29,10 +38,20 @@ interface PersistedPreferences {
 interface PrepaintDefaults {
   theme: ThemeName;
   /** Initial density rung. Omitted, the theme's own `densities.default` decides. */
-  density?: Density;
+  density?: Density$1;
   mode: Mode;
   /** Initial document-wide font pairing. Omitted, the theme's own `fontPairings.default` decides. */
   font?: FontName;
+  /**
+   * Initial style set. Omitted — and it is omitted by every app that has not
+   * asked for page composition — the script stamps no `data-style` at all, which
+   * is exactly what `<ThemeProvider>` does with no `styleSet` prop.
+   *
+   * Unlike `density` and `font` there is no per-theme preference behind it: no
+   * manifest can declare a style set, so the fall-through is two tiers deep
+   * (stored, then this) rather than four.
+   */
+  styleSet?: StyleSet;
 }
 /** Options form for apps whose server projection, not localStorage, owns first paint. */
 interface PrepaintOptions {
@@ -59,8 +78,9 @@ interface PrepaintOptions {
 }
 /**
  * Build the blocking inline script that stamps `data-theme`, `data-density`,
- * `data-font`, `data-mode` and `color-scheme` on `<html>` from localStorage
- * before the first paint.
+ * `data-font`, `data-mode`, `data-style` and `color-scheme` on `<html>` from
+ * localStorage before the first paint, and removes `data-style` when nothing
+ * chose one.
  *
  * Render it as `<script dangerouslySetInnerHTML={{ __html: prepaintScript() }} />`
  * in `<head>`, above everything else. The output never contains `</script>` and
@@ -108,7 +128,7 @@ interface PrepaintOptions {
  * // An app whose provider is <ThemeProvider theme="terminal" density="normal">:
  * prepaintScript(DEFAULT_STORAGE_KEY, "terminal", "normal");
  */
-declare function prepaintScript(storageKey?: string, defaultTheme?: ThemeName, defaultDensity?: Density, defaultFont?: FontName): string;
+declare function prepaintScript(storageKey?: string, defaultTheme?: ThemeName, defaultDensity?: Density$1, defaultFont?: FontName): string;
 declare function prepaintScript(options: PrepaintOptions): string;
 //#endregion
 export { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOptions, prepaintScript };

package/dist/system/prepaint.js

@@ -1,5 +1,5 @@
 import { vocabulary } from "./vocabulary.js";
-import { DEFAULT_DENSITY, DEFAULT_FONT } from "@cueplusplus/tokens";
+import { DEFAULT_DENSITY, DEFAULT_FONT, STYLE_SETS } from "@cueplusplus/tokens";
 import { MODES } from "@cueplusplus/theme-base";
 //#region src/system/prepaint.ts
 /**
@@ -106,7 +106,15 @@ function prepaintScript(storageKeyOrOptions = DEFAULT_STORAGE_KEY, defaultTheme
 		}];
 	}))));
 	const modes = scriptSafe(JSON.stringify([...MODES]));
-	return `!function(){try{var k=${key},e=document.documentElement,s=null;` + (readStoredPreferences ? "try{var r=localStorage.getItem(k);s=r?JSON.parse(r):null}catch(_){}" : "") + `s=s&&typeof s=="object"?s:{};var T=${themes},A=${axes},P=/^[a-z][a-z0-9-]*$/i;var t=T?(T.indexOf(s.theme)>-1?s.theme:${fallbackTheme}):(typeof s.theme=="string"&&P.test(s.theme)?s.theme:${fallbackTheme});var a=A[T?t:""]||A[""]||{d:[],f:[]};var d=a.d.indexOf(s.density)>-1?s.density:(a.d.indexOf(${fallbackDensity})>-1?${fallbackDensity}:(a.p&&a.d.indexOf(a.p)>-1?a.p:${baseDensity}));var f=a.f.indexOf(s.font)>-1?s.font:(a.f.indexOf(${fallbackFont})>-1?${fallbackFont}:(a.q&&a.f.indexOf(a.q)>-1?a.q:${baseFont}));var m=${modes}.indexOf(s.mode)>-1?s.mode:${fallbackMode};e.setAttribute("data-theme",t);e.setAttribute("data-density",d);e.setAttribute("data-font",f);e.setAttribute("data-mode",m);e.style.colorScheme=a.l===false?"dark":(m==="system"?"light dark":m)}catch(_){}}()`;
+	/**
+	* The three sets, and the app's own, inlined for the same reason the rungs and
+	* pairings are: this script runs before any module does and cannot import a
+	* list. `null` is a legal fallback here and means "no set" — the one axis
+	* whose absence is a value.
+	*/
+	const styleSets = scriptSafe(JSON.stringify([...STYLE_SETS]));
+	const fallbackStyleSet = defaults.styleSet === void 0 ? "null" : jsStringLiteral(defaults.styleSet);
+	return `!function(){try{var k=${key},e=document.documentElement,s=null;` + (readStoredPreferences ? "try{var r=localStorage.getItem(k);s=r?JSON.parse(r):null}catch(_){}" : "") + `s=s&&typeof s=="object"?s:{};var T=${themes},A=${axes},P=/^[a-z][a-z0-9-]*$/i;var t=T?(T.indexOf(s.theme)>-1?s.theme:${fallbackTheme}):(typeof s.theme=="string"&&P.test(s.theme)?s.theme:${fallbackTheme});var a=A[T?t:""]||A[""]||{d:[],f:[]};var d=a.d.indexOf(s.density)>-1?s.density:(a.d.indexOf(${fallbackDensity})>-1?${fallbackDensity}:(a.p&&a.d.indexOf(a.p)>-1?a.p:${baseDensity}));var f=a.f.indexOf(s.font)>-1?s.font:(a.f.indexOf(${fallbackFont})>-1?${fallbackFont}:(a.q&&a.f.indexOf(a.q)>-1?a.q:${baseFont}));var m=${modes}.indexOf(s.mode)>-1?s.mode:${fallbackMode};var S=${styleSets},y=S.indexOf(s.style)>-1?s.style:${fallbackStyleSet};e.setAttribute("data-theme",t);e.setAttribute("data-density",d);e.setAttribute("data-font",f);e.setAttribute("data-mode",m);y?e.setAttribute("data-style",y):e.removeAttribute("data-style");e.style.colorScheme=a.l===false?"dark":(m==="system"?"light dark":m)}catch(_){}}()`;
 }
 //#endregion
 export { DEFAULT_STORAGE_KEY, prepaintScript };