@cueplusplus/ui 0.3.0 → 0.6.0

package/dist/primitives/chip.d.ts

@@ -2,21 +2,36 @@ import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
 /**
- * The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`.
+ * The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`, and the
+ * two quieter readings of it — `outline`, which drops the fill, and `tag`,
+ * which drops the fill and the voice with it.
  *
- * Tone and fill are split across `variants` and `compoundVariants` on purpose.
- * Emitting `bg-<tone>/10` from the tone map and then cancelling it with
- * `bg-transparent` for the outline variant would leave two competing background
- * utilities in the class string and lean on `tailwind-merge` to pick a winner —
- * which it cannot do reliably for token-named colours. Compound variants emit
- * exactly one fill, always.
+ * Every property that varies is emitted from exactly one place: one rim, one
+ * ink, one fill, one gutter, one type size, always. Emitting `bg-<tone>/10`
+ * from the tone map and then cancelling it with `bg-transparent` would leave
+ * two competing utilities in the class string, and `chipVariants` is exported —
+ * a caller who uses it without `cn` gets a raw string where the winner is
+ * decided by stylesheet order rather than by which utility was written last.
+ * `h-chip h-4` proves the point at the other end: `tailwind-merge` cannot even
+ * see that as a conflict, because `chip` is a token name and not a scale step.
+ * So nothing here cancels anything. What varies moves into `variants` or
+ * `compoundVariants` until only one of it is ever emitted.
+ *
+ * That is why `neutral` carries no rim of its own. The other six tones rim
+ * themselves at `/35` in all three variants, but the neutral line has two
+ * weights in this system: `--cue-border` is a box edge, and a chip is a box;
+ * `--cue-hair-strong` is the rule between things, and a tag is a mark on the
+ * page rather than a container. The rim is therefore a compound of tone and
+ * variant, exactly as the fill is.
  *
  * @example
  * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
+ * @example
+ * <span className={chipVariants({ variant: "tag" })}>mcp</span>
  */
 declare const chipVariants: (props?: ({
-  tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
-  variant?: "outline" | "tinted" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof chipVariants> {
@@ -37,10 +52,21 @@ interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<type
  * plus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always
  * agree on what "warn" looks like.
  *
+ * `variant` sets how loudly it says it. `tinted` is the chip proper — a tone
+ * tint behind tone ink. `outline` drops the fill and keeps the voice, for a
+ * chip on an already-busy ground. `tag` drops both: a hairline rim, micro type
+ * and closed tracking, for the facts that sit *beside* a row's name — a kind, a
+ * lifecycle, a scope — where a row full of tinted chips would read as a row of
+ * buttons. All three keep `h-chip`, so a mixed row still has one baseline.
+ *
  * @example
  * <Chip tone="ok">online</Chip>
  * @example
  * <Chip tone="accent" variant="outline" interactive onClick={toggle}>dimmer</Chip>
+ * @example
+ * <Chip variant="tag">mcp</Chip>
+ * @example
+ * <Chip tone="danger" variant="tag">needs auth</Chip>
  */
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement>>;
 //#endregion

package/dist/primitives/chip.js

@@ -5,22 +5,37 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/chip.tsx
 /**
-* The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`.
+* The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`, and the
+* two quieter readings of it — `outline`, which drops the fill, and `tag`,
+* which drops the fill and the voice with it.
 *
-* Tone and fill are split across `variants` and `compoundVariants` on purpose.
-* Emitting `bg-<tone>/10` from the tone map and then cancelling it with
-* `bg-transparent` for the outline variant would leave two competing background
-* utilities in the class string and lean on `tailwind-merge` to pick a winner —
-* which it cannot do reliably for token-named colours. Compound variants emit
-* exactly one fill, always.
+* Every property that varies is emitted from exactly one place: one rim, one
+* ink, one fill, one gutter, one type size, always. Emitting `bg-<tone>/10`
+* from the tone map and then cancelling it with `bg-transparent` would leave
+* two competing utilities in the class string, and `chipVariants` is exported —
+* a caller who uses it without `cn` gets a raw string where the winner is
+* decided by stylesheet order rather than by which utility was written last.
+* `h-chip h-4` proves the point at the other end: `tailwind-merge` cannot even
+* see that as a conflict, because `chip` is a token name and not a scale step.
+* So nothing here cancels anything. What varies moves into `variants` or
+* `compoundVariants` until only one of it is ever emitted.
+*
+* That is why `neutral` carries no rim of its own. The other six tones rim
+* themselves at `/35` in all three variants, but the neutral line has two
+* weights in this system: `--cue-border` is a box edge, and a chip is a box;
+* `--cue-hair-strong` is the rule between things, and a tag is a mark on the
+* page rather than a container. The rim is therefore a compound of tone and
+* variant, exactly as the fill is.
 *
 * @example
 * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
+* @example
+* <span className={chipVariants({ variant: "tag" })}>mcp</span>
 */
-const chipVariants = cva("inline-flex h-chip select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap rounded-(--radius-control) border px-(--cue-space-3) font-mono text-(length:--cue-text-label) leading-none uppercase tracking-[0.15em] outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", {
+const chipVariants = cva("inline-flex h-chip select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap rounded-(--radius-control) border font-mono leading-none uppercase outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", {
 	variants: {
 		tone: {
-			neutral: "border-border text-fg-muted",
+			neutral: "text-fg-muted",
 			accent: "border-accent/35 text-accent",
 			ok: "border-ok/35 text-ok",
 			busy: "border-busy/35 text-busy",
@@ -29,8 +44,9 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 			info: "border-info/35 text-info"
 		},
 		variant: {
-			tinted: "",
-			outline: "bg-transparent"
+			tinted: "px-(--cue-space-3) text-(length:--cue-text-label) tracking-[0.15em]",
+			outline: "bg-transparent px-(--cue-space-3) text-(length:--cue-text-label) tracking-[0.15em]",
+			tag: "bg-transparent px-(--cue-space-2) text-(length:--cue-text-micro) tracking-[0.06em]"
 		},
 		interactive: {
 			true: "cursor-pointer disabled:pointer-events-none disabled:opacity-40",
@@ -38,6 +54,16 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 		}
 	},
 	compoundVariants: [
+		{
+			tone: "neutral",
+			variant: ["tinted", "outline"],
+			class: "border-border"
+		},
+		{
+			tone: "neutral",
+			variant: "tag",
+			class: "border-(--cue-hair-strong)"
+		},
 		{
 			tone: "neutral",
 			variant: "tinted",
@@ -75,38 +101,87 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 		},
 		{
 			tone: "neutral",
+			variant: ["tinted", "outline"],
 			interactive: true,
 			class: "hover:border-border-strong hover:text-fg"
 		},
+		{
+			tone: "neutral",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-border hover:text-fg"
+		},
 		{
 			tone: "accent",
+			variant: ["tinted", "outline"],
 			interactive: true,
 			class: "hover:border-accent/60 hover:bg-accent/20"
 		},
+		{
+			tone: "accent",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-accent/60"
+		},
 		{
 			tone: "ok",
+			variant: ["tinted", "outline"],
 			interactive: true,
 			class: "hover:border-ok/60 hover:bg-ok/20"
 		},
+		{
+			tone: "ok",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-ok/60"
+		},
 		{
 			tone: "busy",
+			variant: ["tinted", "outline"],
 			interactive: true,
 			class: "hover:border-busy/60 hover:bg-busy/20"
 		},
+		{
+			tone: "busy",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-busy/60"
+		},
 		{
 			tone: "warn",
+			variant: ["tinted", "outline"],
 			interactive: true,
 			class: "hover:border-warn/60 hover:bg-warn/20"
 		},
+		{
+			tone: "warn",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-warn/60"
+		},
 		{
 			tone: "danger",
+			variant: ["tinted", "outline"],
 			interactive: true,
 			class: "hover:border-danger/60 hover:bg-danger/20"
 		},
+		{
+			tone: "danger",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-danger/60"
+		},
 		{
 			tone: "info",
+			variant: ["tinted", "outline"],
 			interactive: true,
 			class: "hover:border-info/60 hover:bg-info/20"
+		},
+		{
+			tone: "info",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-info/60"
 		}
 	],
 	defaultVariants: {
@@ -122,10 +197,21 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 * plus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always
 * agree on what "warn" looks like.
 *
+* `variant` sets how loudly it says it. `tinted` is the chip proper — a tone
+* tint behind tone ink. `outline` drops the fill and keeps the voice, for a
+* chip on an already-busy ground. `tag` drops both: a hairline rim, micro type
+* and closed tracking, for the facts that sit *beside* a row's name — a kind, a
+* lifecycle, a scope — where a row full of tinted chips would read as a row of
+* buttons. All three keep `h-chip`, so a mixed row still has one baseline.
+*
 * @example
 * <Chip tone="ok">online</Chip>
 * @example
 * <Chip tone="accent" variant="outline" interactive onClick={toggle}>dimmer</Chip>
+* @example
+* <Chip variant="tag">mcp</Chip>
+* @example
+* <Chip tone="danger" variant="tag">needs auth</Chip>
 */
 const Chip = React.forwardRef(function Chip({ className, tone, variant, interactive = false, disabled, children, ...elementProps }, ref) {
 	const classes = cn(chipVariants({

package/dist/system/agent-skin.d.ts

@@ -0,0 +1,27 @@
+import "react";
+//#region src/system/agent-skin.d.ts
+/**
+ * Which value-set paints the elements family inside this subtree.
+ *
+ * - `cue` — the default, and the one that needs no stylesheet: the vendored
+ *   elements were rewritten onto `--cue-*` tokens, so they are already this
+ *   system's components.
+ * - `aui` — supersede mode. `@cueplusplus/ui/elements.css` re-points those same
+ *   tokens to assistant-ui's own values under `[data-cue-skin="aui"]`, so one
+ *   DOM paints two ways with no branching in any component.
+ */
+type AgentSkin = "cue" | "aui";
+/**
+ * How far the supersede island goes: colour only, or colour and geometry.
+ *
+ * - `cue-metrics` — the default. Colour is re-pointed; cue's type scale, radius
+ *   ladder and density ladder still apply, so an island tracks the density of
+ *   the console around it.
+ * - `upstream` — assistant-ui's metrics too: their radii, their literal 13.5 /
+ *   12 / 11 px type, `--spacing` pinned at Tailwind's default. Density stops at
+ *   the island edge, which is the point — this is the mode for showing an
+ *   element exactly as its authors drew it.
+ */
+type AgentFidelity = "upstream" | "cue-metrics";
+//#endregion
+export { AgentFidelity, AgentSkin };

package/dist/system/agent-skin.js

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+//#region src/system/agent-skin.ts
+/**
+* Nearest ambient skin island. `null` means there is none, which is the case
+* for almost every tree — and is why the portal stamp *removes* these two
+* attributes rather than defaulting them.
+*
+* It lives in `system/` rather than beside `AgentSurface` for one reason: the
+* portal stamp reads its axes from React context, never from the DOM (a portal
+* is mounted outside its owner's subtree, so DOM discovery would read the
+* body's values). `system/portal.tsx` is in the core barrel's import graph and
+* `elements/` is behind an optional peer, so the context has to sit on the side
+* that both can reach.
+*
+* @internal Consumers use `<AgentSurface>` from `@cueplusplus/ui/elements`.
+*/
+const AgentSkinContext = React.createContext(null);
+//#endregion
+export { AgentSkinContext };

package/dist/system/portal.d.ts

@@ -6,7 +6,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`) copied from the nearest provider and density island. The container is
+ * `--cue-font-scale`) copied from the nearest provider and density island, 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
  * `<body>`.
@@ -38,8 +40,8 @@ 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` stamp and
- * `--cue-font-scale` as {@link useCuePortalProps}. Prefer the hook — a stamped container costs one
+ * `data-theme` / `data-density` / `data-font` / `data-mode` / `data-cue-skin` /
+ * `data-cue-fidelity` stamp and `--cue-font-scale` 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.
  *

package/dist/system/portal.js

@@ -1,5 +1,6 @@
 "use client";
 import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+import { AgentSkinContext } from "./agent-skin.js";
 import { DensityContext } from "./density.js";
 import { FontFamiliesContext, FontScaleContext, ThemeContext } from "./theme-provider.js";
 import * as React from "react";
@@ -25,13 +26,16 @@ function usePortalStamp() {
 	const island = React.useContext(DensityContext);
 	const fontScale = React.useContext(FontScaleContext);
 	const fontFamilies = React.useContext(FontFamiliesContext);
+	const skin = React.useContext(AgentSkinContext);
 	return {
 		theme: theme?.theme ?? DEFAULT_THEME,
 		density: island ?? theme?.density ?? "compact",
 		mode: theme?.mode ?? DEFAULT_MODE,
 		font: theme?.font ?? DEFAULT_FONT,
 		fontScale,
-		fontFamilies
+		fontFamilies,
+		skin: skin?.skin ?? null,
+		fidelity: skin?.fidelity ?? null
 	};
 }
 /**
@@ -40,7 +44,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`) copied from the nearest provider and density island. The container is
+* `--cue-font-scale`) copied from the nearest provider and density island, 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
 * `<body>`.
@@ -85,7 +91,9 @@ function useCuePortalProps() {
 		stamp.mode,
 		stamp.fontScale,
 		stamp.fontFamilies?.sans,
-		stamp.fontFamilies?.mono
+		stamp.fontFamilies?.mono,
+		stamp.skin,
+		stamp.fidelity
 	]);
 	return React.useMemo(() => container === null ? {} : { container }, [container]);
 }
@@ -95,6 +103,10 @@ function applyStamp(element, stamp) {
 	element.setAttribute("data-density", stamp.density);
 	element.setAttribute("data-font", stamp.font);
 	element.setAttribute("data-mode", stamp.mode);
+	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");
+	else element.setAttribute("data-cue-fidelity", stamp.fidelity);
 	if (stamp.fontScale === null) element.style.removeProperty(FONT_SCALE_PROPERTY);
 	else element.style.setProperty(FONT_SCALE_PROPERTY, String(stamp.fontScale));
 	setOptionalProperty(element, FONT_SANS_PROPERTY, stamp.fontFamilies?.sans);
@@ -109,8 +121,8 @@ 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` stamp and
-* `--cue-font-scale` as {@link useCuePortalProps}. Prefer the hook — a stamped container costs one
+* `data-theme` / `data-density` / `data-font` / `data-mode` / `data-cue-skin` /
+* `data-cue-fidelity` stamp and `--cue-font-scale` 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.
 *
@@ -132,6 +144,8 @@ function CuePortalFrame({ children, className, style }) {
 		"data-density": stamp.density,
 		"data-font": stamp.font,
 		"data-mode": stamp.mode,
+		"data-cue-skin": stamp.skin ?? void 0,
+		"data-cue-fidelity": stamp.fidelity ?? void 0,
 		className,
 		style: frameStyle,
 		children

package/dist/system/theme-provider.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+import { useIsomorphicInsertionEffect, useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
 import { DEFAULT_DENSITY as DEFAULT_DENSITY$1, DENSITY_LEVELS, DensityContext } from "./density.js";
 import { DEFAULT_STORAGE_KEY } from "./prepaint.js";
 import * as React from "react";
@@ -51,6 +51,30 @@ function readPreferences(storageKey) {
 		return {};
 	}
 }
+/** Resolve `"system"` the way {@link prepaintScript} resolves it: against the media query. */
+function resolveMode(mode) {
+	if (mode !== "system") return mode;
+	if (typeof matchMedia !== "function") return DEFAULT_RESOLVED_MODE;
+	return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+/**
+* The stamp {@link prepaintScript} put on `<html>`, recomputed from the storage
+* it read.
+*
+* Not read back off the element, because by the time anything here runs it is
+* no longer there — see the `<html>` stamp below. Same key, same validation,
+* same fallbacks, so this returns what the script decided rather than a second
+* opinion about it.
+*/
+function prepaintStamp(storageKey, fallback) {
+	const stored = readPreferences(storageKey);
+	return {
+		theme: typeof stored.theme === "string" && stored.theme.length > 0 ? stored.theme : fallback.theme,
+		density: isOneOf(DENSITY_LEVELS, stored.density) ? stored.density : fallback.density,
+		font: isOneOf(FONT_NAMES, stored.font) ? stored.font : fallback.font,
+		mode: resolveMode(isOneOf(MODES$1, stored.mode) ? stored.mode : fallback.mode)
+	};
+}
 function writePreferences(storageKey, preferences) {
 	if (typeof localStorage === "undefined") return;
 	try {
@@ -199,9 +223,20 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 	/** Nested providers hand the axis straight up: one document, one pairing. */
 	const setFont = isRoot ? rootSetFont : ambient.setFont;
 	const originalStamp = React.useRef(null);
-	useIsomorphicLayoutEffect(() => {
-		if (!isRoot || !restored || typeof document === "undefined") return;
+	useIsomorphicInsertionEffect(() => {
+		if (!isRoot || typeof document === "undefined") return;
 		const root = document.documentElement;
+		const next = restored || !persistPreferences ? {
+			theme,
+			density,
+			font,
+			mode
+		} : prepaintStamp(storageKey, {
+			theme: themeProp,
+			density: densityProp,
+			font: fontProp,
+			mode: modeProp
+		});
 		originalStamp.current ??= {
 			theme: root.getAttribute("data-theme"),
 			density: root.getAttribute("data-density"),
@@ -209,18 +244,28 @@ function ThemeProvider({ theme: themeProp = DEFAULT_THEME, density: densityProp
 			mode: root.getAttribute("data-mode"),
 			colorScheme: root.style.colorScheme
 		};
-		root.setAttribute("data-theme", theme);
-		root.setAttribute("data-density", density);
-		root.setAttribute("data-font", font);
-		root.setAttribute("data-mode", mode);
-		root.style.colorScheme = mode === "system" ? "light dark" : mode;
+		const write = (name, value) => {
+			if (root.getAttribute(name) !== value) root.setAttribute(name, value);
+		};
+		write("data-theme", next.theme);
+		write("data-density", next.density);
+		write("data-font", next.font);
+		write("data-mode", next.mode);
+		const scheme = next.mode === "system" ? "light dark" : next.mode;
+		if (root.style.colorScheme !== scheme) root.style.colorScheme = scheme;
 	}, [
 		isRoot,
 		restored,
+		persistPreferences,
+		storageKey,
 		theme,
 		density,
 		font,
-		mode
+		mode,
+		themeProp,
+		densityProp,
+		fontProp,
+		modeProp
 	]);
 	React.useEffect(() => () => {
 		const original = originalStamp.current;

package/dist/system/use-density.d.ts

@@ -11,6 +11,15 @@ type ControlSize = "sm" | "md" | "lg";
  * per-rung variants (`density-ultra-compact:` … `density-ultra-large:`) instead.
  *
  * @returns The applicable density level.
+ * @example
+ * const density = useDensity();
+ * const rowHeight = useControlHeight("sm");
+ * // Shorter rows mean more of them on screen, so the reserve moves with the level.
+ * useVirtualizer({
+ *   count: rows.length,
+ *   estimateSize: () => rowHeight,
+ *   overscan: density === "ultra-compact" ? 12 : 6,
+ * });
  */
 declare function useDensity(): Density;
 /**

package/dist/system/use-density.js

@@ -63,6 +63,15 @@ function measureControlHeight(density, size) {
 * per-rung variants (`density-ultra-compact:` … `density-ultra-large:`) instead.
 *
 * @returns The applicable density level.
+* @example
+* const density = useDensity();
+* const rowHeight = useControlHeight("sm");
+* // Shorter rows mean more of them on screen, so the reserve moves with the level.
+* useVirtualizer({
+*   count: rows.length,
+*   estimateSize: () => rowHeight,
+*   overscan: density === "ultra-compact" ? 12 : 6,
+* });
 */
 function useDensity() {
 	return React.useContext(DensityContext) ?? "compact";

package/dist/system/use-isomorphic-layout-effect.js

@@ -11,5 +11,23 @@ import * as React from "react";
 * (never-invoked) passive variant instead.
 */
 const useIsomorphicLayoutEffect = typeof document === "undefined" ? React.useEffect : React.useLayoutEffect;
+/**
+* `useInsertionEffect` in the browser, `useEffect` on the server.
+*
+* One step earlier than the layout variant above, and the difference is the
+* whole reason it exists. React runs **every** insertion effect in the tree
+* during the mutation phase, before **any** layout effect runs; layout effects
+* then run child-first, so a provider near the root is the last thing in the
+* commit to get one. Anything a descendant's layout effect measures — Base UI
+* calls `getComputedStyle` in several — is measured against whatever the
+* document element is wearing at that moment.
+*
+* That matters exactly once: putting back what React 19 takes off `<html>` when
+* it hydrates the document element. See the `<html>` stamp in
+* `theme-provider.tsx`.
+*
+* Write only. An insertion effect must not read layout or schedule state.
+*/
+const useIsomorphicInsertionEffect = typeof document === "undefined" ? React.useEffect : React.useInsertionEffect;
 //#endregion
-export { useIsomorphicLayoutEffect };
+export { useIsomorphicInsertionEffect, useIsomorphicLayoutEffect };

package/dist/theming/_presets.d.ts

@@ -4,7 +4,7 @@ import { Density, ThemeName } from "@cueplusplus/tokens";
  * The colour tokens every theme block declares, in the order the tokens build
  * emits them. A generated theme is complete exactly when it covers this list.
  */
-declare const THEME_COLOR_TOKENS: readonly ["bg", "sunken", "surface-1", "surface-2", "surface-3", "fg", "fg-muted", "fg-subtle", "border", "border-strong", "border-overlay", "accent", "accent-hover", "accent-fg", "ok", "busy", "warn", "danger", "info", "selection", "focus", "data-ground", "scrim"];
+declare const THEME_COLOR_TOKENS: readonly ["bg", "sunken", "surface-1", "surface-2", "surface-3", "fg", "fg-muted", "fg-subtle", "border", "border-strong", "border-overlay", "accent", "accent-hover", "accent-fg", "ok", "busy", "warn", "warn-fg", "danger", "danger-fg", "info", "stream", "selection", "focus", "data-ground", "scrim"];
 /** One of the colour tokens a theme block owns. */
 type ThemeColorToken = (typeof THEME_COLOR_TOKENS)[number];
 //#endregion