cssints 0.20.0 → 0.21.0

package/README.md

@@ -223,7 +223,7 @@ cssints is MIT. It stands on other people's work; this is what we took, from who
 
 No code is copied from these; each package README says which part follows which.
 
-- **Plugin packages.** [Every Layout](https://every-layout.dev) and [smolcss](https://smolcss.dev) (layout), [nytimes/text-balancer](https://github.com/nytimes/text-balancer) and [react-wrap-balancer](https://github.com/shuding/react-wrap-balancer) (balance), [fluid-tailwind](https://github.com/barvian/fluid-tailwind) (fluid), [postcss-easing-gradients](https://github.com/larsenwork/postcss-easing-gradients) (gradient), [tailwindcss-motion](https://github.com/romboHQ/tailwindcss-motion) and [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) (motion), [the supersonic plugin](https://github.com/the-illarionov/the-supersonic-plugin-for-scroll-based-animation) and [lax.js](https://github.com/alexfoxy/lax.js) (reveal), [sync-skeleton](https://github.com/crutchcorn/sync-skeleton) (skeleton), [bramus/sticky-observer](https://github.com/bramus/sticky-observer) (stuck), [unpic-placeholder](https://github.com/ascorbic/unpic-placeholder) and [ThumbHash](https://github.com/evanw/thumbhash) (placeholder), [nutelch](https://github.com/meodai/nutelch) and [Leonardo](https://github.com/adobe/leonardo) (ramp), the resets of Josh Comeau, Jake Lazaroff, Vale and Andy Bell (reset), [Mise en Mode](https://standard.mode.place) and its Mode Contract (mise-en-mode), [brendonovich/vite-plugin-opencode](https://github.com/Brendonovich/vite-plugin-opencode) (the prompt box of devtools).
+- **Plugin packages.** [Every Layout](https://every-layout.dev) and [smolcss](https://smolcss.dev) (layout), [nytimes/text-balancer](https://github.com/nytimes/text-balancer) and [react-wrap-balancer](https://github.com/shuding/react-wrap-balancer) (balance), [fluid-tailwind](https://github.com/barvian/fluid-tailwind) (fluid), [postcss-easing-gradients](https://github.com/larsenwork/postcss-easing-gradients) (gradient), [tailwindcss-motion](https://github.com/romboHQ/tailwindcss-motion) and [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) (motion), [the supersonic plugin](https://github.com/the-illarionov/the-supersonic-plugin-for-scroll-based-animation) and [lax.js](https://github.com/alexfoxy/lax.js) (reveal), [sync-skeleton](https://github.com/crutchcorn/sync-skeleton) (skeleton), [bramus/sticky-observer](https://github.com/bramus/sticky-observer) (stuck), [unpic-placeholder](https://github.com/ascorbic/unpic-placeholder) and [ThumbHash](https://github.com/evanw/thumbhash) (placeholder), [nutelch](https://github.com/meodai/nutelch) and [Leonardo](https://github.com/adobe/leonardo) (ramp), the resets of Josh Comeau, Jake Lazaroff, Vale and Andy Bell (reset), [Mise en Mode](https://standard.mode.place) and its Mode Contract (mise-en-mode), [Reactive CSS](https://reactivecss.com) (reactive), [brendonovich/vite-plugin-opencode](https://github.com/Brendonovich/vite-plugin-opencode) (the prompt box of devtools).
 - **The engine.** The comparisons in [docs/research](docs/research) record what we took from [StyleX](https://stylexjs.com), [vanilla-extract](https://vanilla-extract.style), [Tailwind CSS](https://tailwindcss.com), [Tokenami](https://tokenami.com), [SugarCube](https://sugarcube.sh) and the [React Spectrum](https://react-spectrum.adobe.com) style macros; the first spark was [Haz's post](https://bsky.app/profile/haz.dev/post/3mebm2mx6jk27) on a CSS framework in TypeScript. Tokens follow the [Design Tokens Community Group](https://www.designtokens.org) format.
 - **apps/csssky** follows the look of Mu and the hue slider of Witchsky.
 

package/dist/{author-types-D9IjEXwn.d.mts → author-types-X4zGpNpU.d.mts}

@@ -70,9 +70,19 @@ interface Runtime {
   /** The plugin's browser script, a module specifier the app resolves (`"@cssints/balance/runtime"`): imported, never evaluated at build time. */
   script?: string;
 }
+/**
+ * A value a site ships as a JavaScript object of its own: `ship({ owner, open })` (`@cssints/reactive`'s `state()`, whose
+ * owner is a style and whose sources are data). Each `Style` becomes its class string, an array or an object keeps its
+ * shape, and anything else is its JSON.
+ */
+interface Ship {
+  readonly "~ship": {
+    readonly [key: string]: unknown;
+  };
+}
 /** A build error when one `cn()` holds the member's marker and a property listed here (a name, or a pattern). */
 interface Conflict {
   props: (string | RegExp)[];
   message: string;
 }
-export { Kernel as a, GlobalRule as i, Conflict as n, Runtime as o, Decl as r, ThemeRule as s, BcdKey as t };
+export { Kernel as a, ThemeRule as c, GlobalRule as i, Conflict as n, Runtime as o, Decl as r, Ship as s, BcdKey as t };

package/dist/clay.mjs

@@ -1,6 +1,6 @@
 import { a as registry } from "./registry-8sYvlzyn.mjs";
-import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-Le0IAI8N.mjs";
-import { n as valueOf, t as together } from "./contrast-B1QrUfME.mjs";
+import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-ClgusumY.mjs";
+import { n as valueOf, t as together } from "./contrast-BB0wimFI.mjs";
 import { n as parseColor } from "./color-BB8ipynT.mjs";
 import { Formatter, Predicate } from "effect";
 import { clampRgb, formatHex } from "culori/fn";

package/dist/{contrast-B1QrUfME.mjs → contrast-BB0wimFI.mjs}

@@ -1,5 +1,5 @@
 import { a as registry, d as MacroError, o as warn } from "./registry-8sYvlzyn.mjs";
-import { l as layerStatements } from "./sheet-BVksF2ST.mjs";
+import { l as layerStatements } from "./sheet-rwl57DmD.mjs";
 import { Effect } from "effect";
 // src/contrast.ts
 const VAR = /var\((--[^\s,)]+)\)/g;

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-import { a as Kernel } from "./author-types-D9IjEXwn.mjs";
+import { a as Kernel } from "./author-types-X4zGpNpU.mjs";
 import { n as _cv, r as _cx } from "./runtime-Cv7hGrWf.mjs";
-import { n as At, t as CssNode } from "./node-CnkQisiV.mjs";
+import { n as At, t as CssNode } from "./node-CWwn8PaX.mjs";
 import { CSS, CSSColorValue, CSSImageValue, CSSStyleValue, CSSUnitValue } from "@cssints/css-grammar/values";
 import { Effect } from "effect";
 /** What firstThatWorks() builds: its values as text, the wanted one first. */

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { a as registry, d as MacroError, f as MemberError, o as warn, r as forgetKernels, t as Registry } from "./registry-8sYvlzyn.mjs";
-import { A as camel, C as hashClass, D as settled, E as minWidth, F as probed, M as failIn, N as isNode, O as toDecls, P as node, S as edge, T as merged, _ as PSEUDOS, a as createTokens, b as checkVars, c as tokensOf, d as style, f as token, g as PROPS, h as LAYER, i as createGlobalTheme, j as fail, k as VAR, l as CSSTokenValue, m as FUNCTIONS, n as addTheme, o as isDone, p as CONTEXTS, r as check$1, t as DONE, u as isStyle, v as carried, w as isFallback, x as dropsOf, y as chainDecl } from "./theme-Le0IAI8N.mjs";
-import { D as relation, S as addRuntime, _ as addKernel, i as byOrder, n as addGlobal, r as addLayers, y as kernelWarnings } from "./sheet-BVksF2ST.mjs";
+import { A as camel, C as hashClass, D as settled, E as minWidth, F as probed, M as failIn, N as isNode, O as toDecls, P as node, S as edge, T as merged, _ as PSEUDOS, a as createTokens, b as checkVars, c as tokensOf, d as style, f as token, g as PROPS, h as LAYER, i as createGlobalTheme, j as fail, k as VAR, l as CSSTokenValue, m as FUNCTIONS, n as addTheme, o as isDone, p as CONTEXTS, r as check$1, t as DONE, u as isStyle, v as carried, w as isFallback, x as dropsOf, y as chainDecl } from "./theme-ClgusumY.mjs";
+import { D as relation, S as addRuntime, _ as addKernel, i as byOrder, n as addGlobal, r as addLayers, y as kernelWarnings } from "./sheet-rwl57DmD.mjs";
 import { n as loweredOf } from "./lowered-DOJEDRFM.mjs";
 import { i as SCV_CALL, l as groups$1, n as CX_CALL, t as CV_CALL } from "./instrument-QGVM1E1B.mjs";
 import { checkDeclarationNow, checkQuery, checkSelector, checkValueNow, isDeclarationError } from "@cssints/css-grammar/check";
@@ -1285,11 +1285,27 @@ const inlineOf = Effect.fnUntraced(function* ({ __style: { sets, decls } }) {
 	});
 });
 const isPluginValue = Predicate.isObjectKeyword;
+const isShip = (v) => Predicate.hasProperty(v, "~ship");
+const shippedOf = Effect.fnUntraced(function* (value, at) {
+	if (isNode(value)) return Formatter.formatJson(yield* classesOf(value, at));
+	if (Array.isArray(value)) {
+		const parts = [];
+		for (const v of value) parts.push(yield* shippedOf(v, at));
+		return `[${parts.join(",")}]`;
+	}
+	if (Predicate.isObject(value) && !(value instanceof CSSStyleValue)) {
+		const parts = [];
+		for (const [k, v] of Object.entries(value)) parts.push(`${Formatter.formatJson(k)}:${yield* shippedOf(v, at)}`);
+		return `{${parts.join(",")}}`;
+	}
+	return Formatter.formatJson(value);
+});
 const replacementOf = Effect.fnUntraced(function* (at, value) {
 	if (isNode(value)) return Formatter.formatJson(yield* classesOf(value, at));
 	if (isCv(value)) return `${CV_CALL}${yield* cvOf(value.__cv, at)})`;
 	if (isScv(value)) return `${SCV_CALL}${yield* scvOf(value.__scv, at)})`;
 	if (isGroup(value)) return yield* headOf(value, at);
+	if (isShip(value)) return yield* shippedOf(value["~ship"], at);
 	if (isStyle(value)) return yield* inlineOf(value);
 	const tokens = tokensOf(value);
 	if (tokens !== void 0) return tokens;

package/dist/{node-CnkQisiV.d.mts → node-CWwn8PaX.d.mts}

@@ -1,4 +1,4 @@
-import { a as Kernel, i as GlobalRule, n as Conflict, o as Runtime, s as ThemeRule } from "./author-types-D9IjEXwn.mjs";
+import { a as Kernel, c as ThemeRule, i as GlobalRule, n as Conflict, o as Runtime } from "./author-types-X4zGpNpU.mjs";
 import { Warning } from "@cssints/css-grammar/support";
 import { Context } from "effect";
 import { TokenType } from "@cssints/css-grammar/token";

package/dist/plugin-types.d.mts

@@ -74,6 +74,16 @@ interface Runtime {
   /** The plugin's browser script, a module specifier the app resolves (`"@cssints/balance/runtime"`): imported, never evaluated at build time. */
   script?: string;
 }
+/**
+ * A value a site ships as a JavaScript object of its own: `ship({ owner, open })` (`@cssints/reactive`'s `state()`, whose
+ * owner is a style and whose sources are data). Each `Style` becomes its class string, an array or an object keeps its
+ * shape, and anything else is its JSON.
+ */
+interface Ship {
+  readonly "~ship": {
+    readonly [key: string]: unknown;
+  };
+}
 /** A build error when one `cn()` holds the member's marker and a property listed here (a name, or a pattern). */
 interface Conflict {
   props: (string | RegExp)[];
@@ -129,12 +139,19 @@ interface ParentVar {
   write: `--_${string}`;
   watch?: `--_${string}`;
 }
-/** The browser half, delivered when a target lacks a polyfilled feature (`virtual:cssints/runtime/<scope>.<entry>`); `&` is the marker of the member's first kernel. */
+/**
+ * The browser half, delivered when a target lacks a polyfilled feature (`virtual:cssints/runtime/<scope>.<entry>`); `&` is
+ * the marker of the member's first kernel. A runtime with a `script` (or `css`) and no `polyfills` is the plugin's own
+ * face, not a fallback: every target gets it.
+ */
 interface RuntimeDef {
   polyfills: BcdKey[];
   parentVars?: ParentVar[];
   css?: string;
-  /** A module specifier the app resolves (a package subpath, `"@cssints/balance/runtime"`): imported when a target lacks a polyfilled feature. */
+  /**
+   * A module specifier the app resolves (a package subpath, `"@cssints/balance/runtime"`): imported when a target lacks a
+   * polyfilled feature, and by every target when `polyfills` is empty.
+   */
   script?: string;
 }
 /** A build error when one `cn()` holds the member's marker and a property listed here (a name, or a pattern). */
@@ -377,4 +394,13 @@ export declare const dependsOn: (path: string) => void;
  * `scope()`; an unknown group is an error.
  */
 export declare const inGroup: (group: string, property: string, value: string) => boolean;
-export type { ArgsDef, Chain, Conflict, Css, Decl, Entry, GlobalRule, Impl, Kernel, KernelDef, Made, Members, Part, Pending, Runtime, Scope, Style, Table, ThemeRule, Typed };
+/**
+ * `ship({ owner, open })`: what a member returns when a site has more to give than a class string — `@cssints/reactive`'s
+ * `state()`, whose `owner` is a style and whose sources are data. The client module gets an object literal: each style is
+ * its class string, an array or an object keeps its shape, and anything else is its JSON. At build time the object is the
+ * entries themselves. Build time, like `scope()`.
+ */
+export declare const ship: (entries: {
+  readonly [key: string]: unknown;
+}) => Ship;
+export type { ArgsDef, Chain, Conflict, Css, Decl, Entry, GlobalRule, Impl, Kernel, KernelDef, Made, Members, Part, Pending, Runtime, Scope, Ship, Style, Table, ThemeRule, Typed };

package/dist/plugin.d.mts

@@ -1,3 +1,3 @@
-import { _ as inGroup, a as Entry, b as Part, c as Made, d as Scope, f as Table, g as fn, h as dependsOn, i as Css, l as Members, m as arg, n as ArgsDef, o as Impl, p as Typed, r as Chain, s as KernelDef, u as Pending, v as lacking, x as Style, y as scope } from "./scope-CYtpn6RD.mjs";
-import { a as Kernel, i as GlobalRule, n as Conflict, o as Runtime, r as Decl, s as ThemeRule } from "./author-types-D9IjEXwn.mjs";
-export { type ArgsDef, type Chain, type Conflict, type Css, type Decl, type Entry, type GlobalRule, type Impl, type Kernel, type KernelDef, type Made, type Members, type Part, type Pending, type Runtime, type Scope, type Style, type Table, type ThemeRule, type Typed, arg, dependsOn, fn, inGroup, lacking, scope };
+import { S as Style, _ as inGroup, a as Entry, b as ship, c as Made, d as Scope, f as Table, g as fn, h as dependsOn, i as Css, l as Members, m as arg, n as ArgsDef, o as Impl, p as Typed, r as Chain, s as KernelDef, u as Pending, v as lacking, x as Part, y as scope } from "./scope-Oxd_stwQ.mjs";
+import { a as Kernel, c as ThemeRule, i as GlobalRule, n as Conflict, o as Runtime, r as Decl, s as Ship } from "./author-types-X4zGpNpU.mjs";
+export { type ArgsDef, type Chain, type Conflict, type Css, type Decl, type Entry, type GlobalRule, type Impl, type Kernel, type KernelDef, type Made, type Members, type Part, type Pending, type Runtime, type Scope, type Ship, type Style, type Table, type ThemeRule, type Typed, arg, dependsOn, fn, inGroup, lacking, scope, ship };

package/dist/plugin.mjs

@@ -33,4 +33,17 @@ const dependsOn = (path) => engine().dependsOn(path);
 * `scope()`; an unknown group is an error.
 */
 const inGroup = (group, property, value) => engine().inGroup(group, property, value);
-export { arg, dependsOn, fn, inGroup, lacking, scope };
+/**
+* `ship({ owner, open })`: what a member returns when a site has more to give than a class string — `@cssints/reactive`'s
+* `state()`, whose `owner` is a style and whose sources are data. The client module gets an object literal: each style is
+* its class string, an array or an object keeps its shape, and anything else is its JSON. At build time the object is the
+* entries themselves. Build time, like `scope()`.
+*/
+const ship = (entries) => {
+	Object.defineProperty(entries, "~ship", {
+		value: entries,
+		enumerable: false
+	});
+	return entries;
+};
+export { arg, dependsOn, fn, inGroup, lacking, scope, ship };

package/dist/{scope-CYtpn6RD.d.mts → scope-Oxd_stwQ.d.mts}

@@ -1,4 +1,4 @@
-import { r as Decl, t as BcdKey } from "./author-types-D9IjEXwn.mjs";
+import { r as Decl, s as Ship, t as BcdKey } from "./author-types-X4zGpNpU.mjs";
 import { t as ClassValue } from "./runtime-Cv7hGrWf.mjs";
 import { createRequire } from "node:module";
 import { CSS, CSS as CSS$1, CSSColorValue, CSSColorValue as CSSColorValue$1, CSSImageValue, CSSImageValue as CSSImageValue$1, CSSStyleValue, CSSStyleValue as CSSStyleValue$1, CSSUnitValue, CSSUnitValue as CSSUnitValue$1 } from "@cssints/css-grammar/values";
@@ -3546,12 +3546,19 @@ interface ParentVar {
   write: `--_${string}`;
   watch?: `--_${string}`;
 }
-/** The browser half, delivered when a target lacks a polyfilled feature (`virtual:cssints/runtime/<scope>.<entry>`); `&` is the marker of the member's first kernel. */
+/**
+ * The browser half, delivered when a target lacks a polyfilled feature (`virtual:cssints/runtime/<scope>.<entry>`); `&` is
+ * the marker of the member's first kernel. A runtime with a `script` (or `css`) and no `polyfills` is the plugin's own
+ * face, not a fallback: every target gets it.
+ */
 interface RuntimeDef {
   polyfills: BcdKey[];
   parentVars?: ParentVar[];
   css?: string;
-  /** A module specifier the app resolves (a package subpath, `"@cssints/balance/runtime"`): imported when a target lacks a polyfilled feature. */
+  /**
+   * A module specifier the app resolves (a package subpath, `"@cssints/balance/runtime"`): imported when a target lacks a
+   * polyfilled feature, and by every target when `polyfills` is empty.
+   */
   script?: string;
 }
 /** A build error when one `cn()` holds the member's marker and a property listed here (a name, or a pattern). */
@@ -3794,4 +3801,13 @@ declare const dependsOn: (path: string) => void;
  * `scope()`; an unknown group is an error.
  */
 declare const inGroup: (group: string, property: string, value: string) => boolean;
-export { inGroup as _, Entry as a, Part as b, Made as c, Scope as d, Table as f, fn as g, dependsOn as h, Css as i, Members as l, arg as m, ArgsDef as n, Impl as o, Typed as p, Chain as r, KernelDef as s, AliasesOf as t, Pending as u, lacking as v, Style as x, scope as y };
+/**
+ * `ship({ owner, open })`: what a member returns when a site has more to give than a class string — `@cssints/reactive`'s
+ * `state()`, whose `owner` is a style and whose sources are data. The client module gets an object literal: each style is
+ * its class string, an array or an object keeps its shape, and anything else is its JSON. At build time the object is the
+ * entries themselves. Build time, like `scope()`.
+ */
+declare const ship: (entries: {
+  readonly [key: string]: unknown;
+}) => Ship;
+export { Style as S, inGroup as _, Entry as a, ship as b, Made as c, Scope as d, Table as f, fn as g, dependsOn as h, Css as i, Members as l, arg as m, ArgsDef as n, Impl as o, Typed as p, Chain as r, KernelDef as s, AliasesOf as t, Pending as u, lacking as v, Part as x, scope as y };

package/dist/{sheet-BVksF2ST.mjs → sheet-rwl57DmD.mjs}

@@ -130,8 +130,13 @@ const uncovered = Effect.fnUntraced(function* (feature, off, runtimes) {
 	const beyond = yield* unreached(fallback);
 	return off.filter((t) => beyond.has(t));
 });
-/** Whether a target needs the runtime: it lacks a feature in `polyfills` and the runtime reaches it (`unreached`). */
+/**
+* Whether a target needs the runtime: it lacks a feature in `polyfills` and the runtime reaches it (`unreached`). A
+* runtime with a `script` (or `css`) and no `polyfills` is the plugin's own face, not a fallback: no target can decide it,
+* so every target needs it.
+*/
 const needed = Effect.fnUntraced(function* (runtime, ts) {
+	if (!runtime.polyfills.length && (runtime.script || runtime.css)) return true;
 	const off = yield* unreached(runtime, ts);
 	for (const key of runtime.polyfills) for (const t of yield* lacking(key, ts)) if (!off.has(t.join(" "))) return true;
 	return false;

package/dist/surface.d.mts

@@ -1,4 +1,4 @@
-import { t as AliasesOf } from "./scope-CYtpn6RD.mjs";
+import { t as AliasesOf } from "./scope-Oxd_stwQ.mjs";
 /**
  * `surface().color(t.color.canvas).lighten(0.06).ink()`: a background that follows from the surface around it, however
  * many plain wrappers sit between. `color(<color>)` is an absolute base (default: the parent surface); `lighten(step)`,

package/dist/{theme-Le0IAI8N.mjs → theme-ClgusumY.mjs}

@@ -1,5 +1,5 @@
 import { a as registry, d as MacroError, f as MemberError, o as warn } from "./registry-8sYvlzyn.mjs";
-import { D as relation, E as covers, d as requireLayer, p as standIn } from "./sheet-BVksF2ST.mjs";
+import { D as relation, E as covers, d as requireLayer, p as standIn } from "./sheet-rwl57DmD.mjs";
 import { t as fallbackOf } from "./lowered-DOJEDRFM.mjs";
 import { createRequire } from "node:module";
 import { checkSelector } from "@cssints/css-grammar/check";

package/dist/tui.mjs

@@ -1,7 +1,7 @@
 import { a as registry } from "./registry-8sYvlzyn.mjs";
-import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-Le0IAI8N.mjs";
-import { g as evaluate, h as css } from "./sheet-BVksF2ST.mjs";
-import { n as valueOf, t as together } from "./contrast-B1QrUfME.mjs";
+import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-ClgusumY.mjs";
+import { g as evaluate, h as css } from "./sheet-rwl57DmD.mjs";
+import { n as valueOf, t as together } from "./contrast-BB0wimFI.mjs";
 import { n as parseColor } from "./color-BB8ipynT.mjs";
 import { Formatter } from "effect";
 import { clampRgb, formatHex, formatHex8 } from "culori/fn";

package/dist/vite.d.mts

@@ -1,6 +1,6 @@
-import { i as GlobalRule } from "./author-types-D9IjEXwn.mjs";
+import { i as GlobalRule } from "./author-types-X4zGpNpU.mjs";
 import { n as ImportError, r as MacroError } from "./errors-jNEiB3ye.mjs";
-import { i as RegistryState, n as At, r as LayersDecl } from "./node-CnkQisiV.mjs";
+import { i as RegistryState, n as At, r as LayersDecl } from "./node-CWwn8PaX.mjs";
 import { Effect } from "effect";
 import { ImportDeclaration } from "oxc-parser";
 import MagicString from "magic-string";

package/dist/vite.mjs

@@ -1,7 +1,7 @@
 import { c as EvalError, d as MacroError, f as MemberError, i as forgetWarnings, l as HookError, n as forget, p as SiteMissingError, t as Registry } from "./registry-8sYvlzyn.mjs";
-import { C as fallbackEntries, T as runtimeNames, a as closeNames, b as DERIVED, c as layerEntries, f as themedEntries, l as layerStatements, m as usesDerived, n as addGlobal, o as globalEntries, r as addLayers, s as globalNames, t as LAYERS, u as renderSheet, v as kernelEntries, w as runtimeModule, x as RUNTIME_ID } from "./sheet-BVksF2ST.mjs";
+import { C as fallbackEntries, T as runtimeNames, a as closeNames, b as DERIVED, c as layerEntries, f as themedEntries, l as layerStatements, m as usesDerived, n as addGlobal, o as globalEntries, r as addLayers, s as globalNames, t as LAYERS, u as renderSheet, v as kernelEntries, w as runtimeModule, x as RUNTIME_ID } from "./sheet-rwl57DmD.mjs";
 import { a as instrument, c as writeSite, o as runtimeImport, s as tagged } from "./instrument-QGVM1E1B.mjs";
-import { r as verifyChecks } from "./contrast-B1QrUfME.mjs";
+import { r as verifyChecks } from "./contrast-BB0wimFI.mjs";
 import { i as serverId, n as gitRoot, o as sessionOf, r as register } from "./devtools-link-DN91p7g5.mjs";
 import { createRequire } from "node:module";
 import { targets as targets$1, useTargets } from "@cssints/css-grammar/support";

package/docs/API.md

@@ -954,8 +954,9 @@ export const a = cn(row().gap("2rem"), margin(0), flexGrow(1)); // fine: the mar
 - **`conflicts: { props, message }`**: one `cn()` that holds the marker and one of the listed properties (a name, or a RegExp) is a build error with the plugin's message and the call site: `cssints: ring: ring() sets the outline: use its methods (this style also sets outline)`. Conditions count. The message is prefixed with the scope's name.
 - **Derived conflicts.** A kernel written as styles needs no `conflicts` entry: a member that uses it conflicts with every property that meets one the kernel sets, as `cn()` decides overlap: the property itself, its longhands, a shorthand over it, and a logical or physical sibling of the same side. `core: { css: (css) => [css.outline(...), css.outlineOffset("2px")] }` stops `outline`, `outlineColor`, `outlineWidth` and `outlineOffset` in the same `cn()`, under any condition, and lets `color` through: `cssints: ring: kernel core sets outline, outline-offset (this style also sets outline-color)`. The message names the scope, the kernel and the property that was set. A `conflicts` entry among the member's `uses` **replaces** what its kernels derive (a list that allows `outline-color` while the kernel sets `outline`: `{ props: ["outline"], message }`; `props: []` allows everything), and so does a raw kernel, which has nothing to derive from (`frame()` and `surface()` are raw CSS with custom properties and `@container` rules, and `frame()` lets `border-color` through). The check reads every declaration of the style, those a member emits itself included: a member that emits a property its kernel sets lists its own `conflicts`.
 
-- **`runtime: { polyfills, parentVars?, css?, script? }`** is the part for browsers that lack a feature. `polyfills` are BCD keys. A client module that holds a site with the member imports `virtual:cssints/runtime/<scope>.<entry>`, and the module is empty (`export {};`, nothing ships) unless a browserslist target lacks one of the keys and the runtime reaches it. A runtime with `parentVars` is a script that stands on `@property`, so it reaches only the targets that have it; `css` and `script` stand on nothing and reach every target (`@cssints/fonts`' capsize trim in Firefox 120). When it is needed, `parentVars` (`{ marker: "&", read, write, watch? }`, custom properties written `--_x`) configure `cssints/parent-vars`, one shared script and one `MutationObserver` for all plugins, `css` (the fallback rules) is added to the sheet in layer `_.k`, only then, and the module imports `script`.
-- **`script`** (decided 2026-10-08, cssints-kuki) is the plugin's own browser code, a module specifier: `"#io": { polyfills: ["css.properties.animation-timeline"], script: "@cssints/reveal/runtime", css: "..." }`. It is a string the engine never evaluates (the script stays out of the build-time graph) and writes into the runtime module as `import "@cssints/reveal/runtime";`, which Vite resolves as the app's own imports are, in dev and in `vite build`. Write a subpath of the plugin's package, with a `development` condition for the source and a default for `dist/` (`exports: { "./runtime": { development: "./src/runtime.ts", default: "./dist/runtime.mjs" } }`): the package's own tests resolve it by its name too. A script reaches every target, so it is not gated: it ships to every browser of a build whose targets lack a key, and probes the feature itself (`CSS.supports`) to stay off where it is native; with `parentVars` beside it the two are decided apart. A script is a module, so the browser runs it once, however many sites, files or runtime entries import it. The plugin's subpath stays public: an app can still import it by hand, which is harmless. Derived tokens are not members; the engine registers their runtime (`cssints/derived`) on this same delivery (see "Themes").
+- **`runtime: { polyfills, parentVars?, css?, script? }`** is the part for browsers that lack a feature. `polyfills` are BCD keys. A client module that holds a site with the member imports `virtual:cssints/runtime/<scope>.<entry>`, and the module is empty (`export {};`, nothing ships) unless a browserslist target lacks one of the keys and the runtime reaches it. A runtime with `parentVars` is a script that stands on `@property`, so it reaches only the targets that have it; `css` and `script` stand on nothing and reach every target (`@cssints/fonts`' capsize trim in Firefox 120). A runtime with `css` or `script` and **no** `polyfills` is not a fallback at all: it is the plugin's own face, so every target gets it (`@cssints/reactive`'s DOM runtime, 2026-10-31, cssints-zrt2). When it is needed, `parentVars` (`{ marker: "&", read, write, watch? }`, custom properties written `--_x`) configure `cssints/parent-vars`, one shared script and one `MutationObserver` for all plugins, `css` (the fallback rules) is added to the sheet in layer `_.k`, only then, and the module imports `script`.
+- **`ship({ owner, open })`** (decided 2026-10-31, cssints-zrt2) is what a member returns when a site has more to give than a class string: `@cssints/reactive`'s `state()` returns its owner style and the sources beside it. The client module gets an object literal — each style is its class string, an array or an object keeps its shape, anything else its JSON — so the owner is a string in the browser and the data is there (`const ui = state({ open: false }); cn(ui.owner, p(4))`). At build time the object is the entries themselves, so `ui.owner` is the style and `ui.open` the source. A value a member returns at a site that is neither a style, a condition, a Typed OM value nor a `ship()` is a build error, unless the member is only ever called from a build-time module (nothing of an `icons()` definition module is in the client graph).
+- **`script`** (decided 2026-10-08, cssints-kuki) is the plugin's own browser code, a module specifier: `"#io": { polyfills: ["css.properties.animation-timeline"], script: "@cssints/reveal/runtime", css: "..." }`. It is a string the engine never evaluates (the script stays out of the build-time graph) and writes into the runtime module as `import "@cssints/reveal/runtime";`, which Vite resolves as the app's own imports are, in dev and in `vite build`. Write a subpath of the plugin's package, with a `development` condition for the source and a default for `dist/` (`exports: { "./runtime": { development: "./src/runtime.ts", default: "./dist/runtime.mjs" } }`): the package's own tests resolve it by its name too. A script reaches every target, so it is not gated: it ships to every browser of a build whose targets lack a key — with no `polyfills` at all it ships to every build — and probes the feature itself (`CSS.supports`) to stay off where it is native; with `parentVars` beside it the two are decided apart. A script is a module, so the browser runs it once, however many sites, files or runtime entries import it. The plugin's subpath stays public: an app can still import it by hand, which is harmless. Derived tokens are not members; the engine registers their runtime (`cssints/derived`) on this same delivery (see "Themes").
 - **Identity.** A scope name is unique in the process, and a scope is its content (the table, the source of its functions, the scopes it embeds), hashed. A module that runs again with the same content is nothing (every client module that uses a plugin runs it again). Another content under the same name replaces the old one, as an edit does in dev: the files that imported the edited module are forgotten when Vite reports it and run again. It is a build error, `scope "x" is defined twice with different content`, while a file that was not affected still uses the old one: two modules that define one name. `icons()` runs its scope once per collection, with the same table and the same code: one scope, and the collection is the closure of `build`, which the hash does not see.
 - **Errors** are `MemberError` values (`Data.TaggedError`) with `pluginName` (the scope) and the file, site and offset of the call, so the Vite overlay points at it. What `build`, `value`, a chain's `emit` or a kernel's styles throw is a `MemberError` at the call. A plain function the plugin exports (one that wraps styles, say) may throw an `Error`: while a site runs, anything thrown is located at that site, with its message (2026-10-08, cssints-rf3k).
 - **`lacking(...keys)`** gives the build's targets that lack one of the BCD keys, as browserslist names them, by the rules of the support warnings (`partial_implementation` lacks), and `[]` when every target has them all: a plugin emits fallback rules only when some target needs them (2026-10-08, cssints-rf3k). It runs at build time, in a member's functions or in the plugin's own:
@@ -1241,6 +1242,7 @@ More plugins on `scope()`, each a package of its own with its rules and limits i
 | [`@cssints/ramp`](../packages/ramp/README.md)               | `ramp(base, { mode, steps \| ratios, background })`, `overrides(ramp)`                                   | An OKLCH palette as DTCG data for `createTokens`; the contrast mode meets each ratio against its background                                                                                              |
 | [`@cssints/rybitten`](../packages/rybitten/README.md)       | `color(hue, { cube })`, `wheel(steps, { cube })`, `shades(hue, lightness)`, `overrides(group)`           | RYBitten's red-yellow-blue colours (36 historical cubes) as DTCG data for `createTokens`: a hue, a wheel of hues, a hue at several lightnesses                                                           |
 | [`@cssints/skeleton`](../packages/skeleton/README.md)       | `skeleton().radius().color().highlight()`                                                                | Loading placeholders whose shimmer is in phase across the page (one clock on `:root`), static under reduced motion                                                                                       |
+| [`@cssints/reactive`](../packages/reactive/README.md)       | `state()`, `toggle()`, `set()`, `on()`, `bind()`, `when()`, `inside()`                                   | State as custom properties, events as data on the element: writes only in events, conditions and DOM output in plain CSS, wired by a 0.9 kB runtime shipped to every target (2026-10-31, cssints-zrt2)   |
 
 ### Headless: `createField` and `createConfirm` (`@cssints/headless`)
 
@@ -1667,6 +1669,42 @@ createMenu(options: {
 
 **The open state is a request/commit pair**, like every other controlled primitive: `open` (+ `onOpenChange`) makes the host own it, `defaultOpen` starts it. Every intent that opens or closes — the trigger's click and its keys, Escape, an item's activation, Tab, an outside click in a kit, the programmatic `openMenu` / `closeMenu` — is a request, so a host that holds `open` keeps the menu open and the focus where it was; `menu-button.qnt` reverts the whole transition of a rejected request, focus included. A write the host makes on its own is not a request: it takes the focus to the first item when it opens and to the trigger when it closes, and a write of the value it already has moves nothing (no widget can observe it).
 
+### Headless: `createCombobox` (`@cssints/headless`)
+
+The APG combobox as state and attribute objects: the select-only variant of `specs/apg/combobox-select-only.qnt`, with a listbox popup; `filter: true` turns typing into the autocomplete variant's prefix filter. The grid, tree and dialog popups the other combobox specs model are not this primitive (their models are walked against themselves). Its behaviour is `packages/headless/test/combobox.browser.test.tsx`: DOM focus never leaves the combobox, the popup's active option is announced through `aria-activedescendant`, and navigating never commits — Enter, Space, Tab, blur, Alt+ArrowUp, an option click or `setValue` do.
+
+```ts skip
+createCombobox(options: {
+  options: ReadonlyArray<ComboboxOption | string>; // `{ value, label }`, or a string that is both
+  value?: string | null | undefined; // controlled selection
+  defaultSelectedValue?: string | null; // uncontrolled start (`defaultValue` is its alias)
+  open?: boolean | undefined; // controlled popup
+  defaultOpen?: boolean;
+  autoComplete?: "none" | "list" | "both"; // "list"
+  filter?: boolean; // false: single-letter typeahead; true: a prefix filter
+  disabled?: boolean; // aria-disabled on the combobox and the trigger; a key, click, typed character, filter input and option click change nothing, no popup opens
+  placeholder?: string;
+  id?: string; // base of `<id>-input`, `-trigger`, `-listbox`, `-option-<i>`
+  onOpenChange?(open: boolean): void; // a request the host may ignore
+  onValueChange?(value: string | null): void; // a request the host may ignore
+  onFocusRelease?(): void; // Tab: the host may blur its own DOM
+}): {
+  open(): boolean;
+  activeIndex(): number; // index into `options()`; -1 = the visual focus on the combobox
+  value(): string | null;
+  focused(): boolean;
+  query(): string; // the typeahead / filter text
+  options(): ReadonlyArray<{ value; label; selected; id; props }>;
+  setOpen(open: boolean): void; // a request
+  setValue(value: string | null): void;
+  comboboxProps: { id; role: "combobox"; value; "aria-autocomplete"; "aria-haspopup"; "aria-expanded"; "aria-controls"; "aria-activedescendant"; "aria-disabled"; onInput; onKeyDown; onFocus; onBlur; onClick };
+  triggerProps: { id; type: "button"; tabindex: -1; "aria-haspopup"; "aria-expanded"; "aria-controls"; "aria-disabled"; onClick; onMouseDown };
+  listboxProps: { id; role: "listbox"; hidden };
+};
+```
+
+**`disabled` is a widget-level extension** (`combobox-select-only.qnt` lists it under its deliberate omissions and has no `disabled` var, so the DOM test is its oracle): a key, a click, a typeahead character, a filter input and an option click are dropped before they become a request, and no popup opens. It announces `aria-disabled` — not the native `disabled` — because the pattern puts the state on a `role="combobox"` element that is a button in the select-only example; the combobox keeps its tab stop (the pattern's focus contract), as `createButton` and `createSlider`'s thumb do. The trigger announces `aria-disabled` too. `setOpen` / `setValue` stay host requests, so a programmatic write still applies.
+
 ### Headless: `createCheckboxGroup` (`@cssints/headless`)
 
 The APG Checkbox pattern's tri-state group controller: exactly three child values, a controller whose `aria-checked` is derived from them (all / none / mixed) with the optional "remember the last mixed combination" cycle, checked against `specs/apg/checkbox-group.qnt`. Its name, description and error are `createField`'s contract on the `role="group"` element, which the model leaves out on purpose (its header omits labelling), so `packages/headless/test/checkbox-group.browser.test.tsx` is their oracle.
@@ -1678,7 +1716,7 @@ createCheckboxGroup(options: {
   defaultValue?: ReadonlyArray<T>;
   parent?: boolean; // the "all" controller is a focus stop
   remember?: boolean; // the third activation restores the last mixed combination
-  id?: string | undefined; // base of `<id>-control` (the group element) and `<id>-error`
+  id?: string | undefined; // base of `<id>-control` (the group element), `<id>-0`..`-2` (the children) and `<id>-error`
   label?: string | undefined; // the group's name, as aria-label
   labelledby?: string | undefined; // the id of the host's own label element; wins over `label`
   describedby?: string | undefined; // host-owned description ids, after the error
@@ -1695,7 +1733,7 @@ createCheckboxGroup(options: {
 };
 ```
 
-The group is not a `<label for>` target: pass `labelledby` naming the host's own label element, or `label` without one. The error id is in `aria-describedby` only while the error is shown, `aria-invalid` only while the group is invalid, and the group element's own id is there for a controller that names it with `aria-controls`. The checked set is unchanged by all of this: the request/commit split and the spec stay as they were.
+The group is not a `<label for>` target: pass `labelledby` naming the host's own label element, or `label` without one. The error id is in `aria-describedby` only while the error is shown, `aria-invalid` only while the group is invalid, and the group element's own id is there for a controller that names it with `aria-controls`. The children's ids follow the same base (`<base>-0`..`-2`), so two groups on one page do not collide (the model omits ids). The checked set is unchanged by all of this: the request/commit split and the spec stay as they were.
 
 ### Headless: `createSlider` and `createSpinbutton` (`@cssints/headless`)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssints",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "CSS in TypeScript: typed css.* calls compiled to atomic CSS at build time (a Vite plugin)",
   "license": "MIT",
   "repository": {
@@ -72,7 +72,7 @@
     }
   },
   "dependencies": {
-    "@cssints/css-grammar": "^0.20.0",
+    "@cssints/css-grammar": "^0.21.0",
     "culori": "^4.0.2",
     "effect": "4.0.6",
     "happy-dom": "^20.14.5",