cssints 0.11.0 → 0.12.0

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-DtEALNIY.mjs";
-import { n as valueOf, t as together } from "./contrast-Dw6gXoO3.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 { n as parseColor } from "./color-BB8ipynT.mjs";
 import { Formatter, Predicate } from "effect";
 import { clampRgb, formatHex } from "culori/fn";

package/dist/{contrast-Dw6gXoO3.mjs → contrast-B1QrUfME.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-qCuMvyUo.mjs";
+import { l as layerStatements } from "./sheet-BVksF2ST.mjs";
 import { Effect } from "effect";
 // src/contrast.ts
 const VAR = /var\((--[^\s,)]+)\)/g;

package/dist/index.mjs

@@ -1,8 +1,8 @@
 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-DtEALNIY.mjs";
-import { D as relation, S as addRuntime, _ as addKernel, i as byOrder, n as addGlobal, r as addLayers, y as kernelWarnings } from "./sheet-qCuMvyUo.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 { 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-D68RkfDU.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";
 import { lackingOf, messageOf } from "@cssints/css-grammar/support";
 import { CSS, CSSColorValue, CSSImageValue, CSSStyleValue, CSSStyleValue as CSSStyleValue$1, CSSUnitValue } from "@cssints/css-grammar/values";

package/dist/{instrument-D68RkfDU.mjs → instrument-QGVM1E1B.mjs}

@@ -3637,6 +3637,7 @@ const groups = {
 };
 // src/instrument.ts
 const RUNTIME = "cssints";
+const LIBRARY = "cssints/eval";
 const CV_CALL = "__cv(";
 const SCV_CALL = "__scv(";
 const CX_CALL = "__cx(";
@@ -3946,9 +3947,9 @@ const instrument = Effect.fn("cssints.instrument")(function* (code, id, client =
 		const bind = ns ? ns.local.name : `{ ${d.specifiers.map((x) => `${Formatter.formatJson(importedName(x))}: ${x.local.name}`).join(", ")} }`;
 		const id = from.slice(8);
 		const source = id && id !== "limited-availability" ? `__group${i}(${Formatter.formatJson(id)})` : `__css${i}`;
-		ms.overwrite(d.start, d.end, `import { css as __css${i}, __group as __group${i} } from ${Formatter.formatJson(RUNTIME)}; const ${bind} = ${source};`);
+		ms.overwrite(d.start, d.end, `import { css as __css${i}, __group as __group${i} } from ${Formatter.formatJson(LIBRARY)}; const ${bind} = ${source};`);
 	});
-	ms.prepend(`import { __at, __cnGroup, __nocn, __site, __unseen } from ${Formatter.formatJson(RUNTIME)};\n`);
+	ms.prepend(`import { __at, __cnGroup, __nocn, __site, __unseen } from ${Formatter.formatJson(LIBRARY)};\n`);
 	if (hoisted.length) ms.append(`\nexport function __cssints_hoisted() {\n${hoisted.join("\n")}\n}\n`);
 	return {
 		code: ms.toString(),

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

@@ -170,10 +170,13 @@ const KERNEL = "@kernel	";
 /** The support warnings of the declarations of a kernel written as styles (scope-engine.ts), weighed by `addKernel`. */
 const kernelWarnings = /* @__PURE__ */ new WeakMap();
 const VARS = /(--[\w-]+)\s*:|@property\s+(--[\w-]+)/g;
+const scopeOf = (key) => key.slice(0, key.indexOf("."));
+const owns = (scope, property) => property.startsWith(`--${scope}-`);
 /**
 * Registers a kernel by key, on first use (a global rule with atProperty: its css in _.k, its atProperty at the top
-* of the sheet, both once however many styles use it). The same key with other css, another key that declares one of
-* its custom properties, and another key for a marker it prints are build errors at `at`; a `requires` that a target
+* of the sheet, both once however many styles use it). The same key with other css, another key of the same scope that
+* declares one of its names, another scope's key that declares a name neither owns, and another key for a marker it
+* prints are build errors at `at`; a `requires` that a target
 * lacks is a support warning, unless one of `runtimes` (those of the style) polyfills it and reaches that target
 * (`uncovered`); so is a declaration of a kernel written as styles that a target lacks (`kernelWarnings`), by the same rule.
 */
@@ -193,7 +196,9 @@ const addKernel = Effect.fnUntraced(function* (kernel, markers, at, runtimes = [
 		const vars = key.startsWith("@") ? [] : [...`${kernel.css}\n${kernel.atProperty ?? ""}`.matchAll(VARS)].map((m) => m[1] ?? m[2]);
 		for (const [other, e] of kernels) {
 			const v = vars.find((x) => e.vars.includes(x));
-			if (v) return yield* fail(`kernels ${other} and ${key} both declare ${v}: a plugin picks its own short custom-property names`);
+			if (!v) continue;
+			const [here, there] = [scopeOf(key), scopeOf(other)];
+			if (here === there ? owns(here, v) : ![here, there].some((scope) => owns(scope, v))) return yield* fail(`kernels ${other} and ${key} both declare ${v}: ${here === there ? "two kernels of one scope may not share one of its custom-property names" : "a plugin picks its own short custom-property names"}`);
 		}
 		kernels.set(key, entry = {
 			kernel,

package/dist/{theme-DtEALNIY.mjs → theme-Le0IAI8N.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-qCuMvyUo.mjs";
+import { D as relation, E as covers, d as requireLayer, p as standIn } from "./sheet-BVksF2ST.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-DtEALNIY.mjs";
-import { g as evaluate, h as css } from "./sheet-qCuMvyUo.mjs";
-import { n as valueOf, t as together } from "./contrast-Dw6gXoO3.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 { n as parseColor } from "./color-BB8ipynT.mjs";
 import { Formatter } from "effect";
 import { clampRgb, formatHex, formatHex8 } from "culori/fn";

package/dist/vite.d.mts

@@ -105,7 +105,7 @@ export declare const renderSheet: (entries: Iterable<string>) => Effect.Effect<s
 export declare const targets: import("lightningcss").Targets;
 /** `build: { cssTarget }`, the browserslist query of `targets`, so a minified build keeps `firstThatWorks` fallbacks. */
 export declare const cssTarget: string[];
-export default function cssints({ inner, exclude, devtools, opencode }?: {
+export default function cssints({ inner, exclude, devtools, opencode, evaluation }?: {
   inner?: boolean;
   /**
    * Files the plugin leaves alone, in Vite's filter style (`createFilter`: a picomatch glob, a RegExp or an array of them;
@@ -124,5 +124,15 @@ export default function cssints({ inner, exclude, devtools, opencode }?: {
    * and tokens plus the instruction. Needs `@opencode/client` installed. Off by default; a build has none of it.
    */
   opencode?: boolean | OpenCodeOptions;
+  /**
+   * The server that evaluates sites, when the app's own ssr environment cannot: a runner that sets `browser` for it (vitest's
+   * browser mode) serves every dependency as ESM — its CJS ones fail — and resolves the library to the browser entry. The plugin
+   * then starts its own server with the app's aliases, conditions and `noExternal`. When that environment inlines everything
+   * (`ssr.noExternal: true`), the list cannot be copied (CJS would break), so `inline` names what a framework needs inlined to
+   * resolve its own builds: `["solid-js", "@solidjs/web"]` for Solid.
+   */
+  evaluation?: {
+    readonly inline?: ReadonlyArray<string | RegExp>;
+  };
 }): Plugin[];
 export type { DevTable, OpenCodeOptions };

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-qCuMvyUo.mjs";
-import { a as instrument, c as writeSite, o as runtimeImport, s as tagged } from "./instrument-D68RkfDU.mjs";
-import { r as verifyChecks } from "./contrast-Dw6gXoO3.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 { 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 { 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";
@@ -652,16 +652,20 @@ const locate = Effect.fn("cssints.locate")(function* (e, code, id) {
 	}
 	return yield* e;
 });
-function cssints({ inner = false, exclude, devtools = false, opencode = false } = {}) {
+function cssints({ inner = false, exclude, devtools = false, opencode = false, evaluation } = {}) {
 	const excluded = [exclude ?? []].flat().length ? createFilter(exclude) : () => false;
 	let server;
-	let ownServer = false;
 	let runner;
 	let build = false;
 	let root = process.cwd();
 	let rootTargets;
 	let cssPlugins = [];
 	let resolveOf = {};
+	const evaluator = {
+		server: void 0,
+		own: false,
+		needed: false
+	};
 	const usedBy = /* @__PURE__ */ new Map();
 	const depsOf = /* @__PURE__ */ new Map();
 	const inflight = /* @__PURE__ */ new Set();
@@ -809,7 +813,7 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
 		if (inner) return void 0;
 		const parsed = yield* instrument(code, id, true, !!devtools && !build);
 		if (!parsed) return void 0;
-		const env = server.environments.ssr;
+		const env = evaluator.server.environments.ssr;
 		if (!runner || runner.isClosed()) runner = createServerModuleRunner(env, {
 			hmr: false,
 			sourcemapInterceptor: "prepareStackTrace",
@@ -820,7 +824,7 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
 		return yield* clientTransform(code, id, parsed, env, (w) => ctx.warn(w), watch).pipe(Effect.ensuring(Effect.sync(() => inflight.delete(id))));
 	});
 	const startServer = Effect.fn("cssints.buildStart")(function* () {
-		server = yield* Effect.tryPromise({
+		const started = yield* Effect.tryPromise({
 			try: () => createServer({
 				configFile: false,
 				root,
@@ -843,11 +847,13 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
 				cause
 			})
 		});
-		ownServer = true;
+		evaluator.own = true;
+		evaluator.server = started;
+		server ??= started;
 	});
 	const stopServer = Effect.fn("cssints.closeBundle")(function* () {
-		if (!ownServer || !server) return;
-		const s = server;
+		if (!evaluator.own || !evaluator.server) return;
+		const s = evaluator.server;
 		yield* Effect.tryPromise({
 			try: () => s.close(),
 			catch: (cause) => new HookError({
@@ -856,8 +862,10 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
 				cause
 			})
 		});
-		server = runner = void 0;
-		ownServer = false;
+		if (server === s) server = void 0;
+		evaluator.server = void 0;
+		evaluator.own = false;
+		runner = void 0;
 	});
 	const renderChunk = Effect.fn("cssints.renderChunk")(function* (ctx, chunk) {
 		if (inner || !Object.hasOwn(chunk.modules, SHEET)) return null;
@@ -931,12 +939,18 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
 			buildMap = build && !inner && config.build.sourcemap;
 			root = config.root;
 			if (!inner) rootTargets = Effect.runSync(targets$1(void 0, root));
+			evaluator.needed = config.environments.ssr?.resolve?.conditions?.includes("browser") === true;
 			const ssr = config.environments.ssr?.resolve;
 			resolveOf = {
-				resolve: { alias: config.resolve.alias },
+				resolve: {
+					alias: config.resolve.alias,
+					dedupe: config.resolve.dedupe
+				},
 				...ssr && { environments: { ssr: { resolve: {
 					conditions: ssr.conditions,
-					externalConditions: ssr.externalConditions
+					externalConditions: ssr.externalConditions,
+					noExternal: [...Array.isArray(ssr.noExternal) ? ssr.noExternal : [], ...evaluation?.inline ?? []],
+					...ssr.external !== void 0 && { external: ssr.external }
 				} } } }
 			};
 			cssPlugins = ["vite:css", "vite:css-post"].map((n) => config.plugins.find((p) => p.name === n));
@@ -944,6 +958,7 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
 		configureServer(s) {
 			server = s;
 			if (inner) return;
+			evaluator.server = evaluator.needed ? void 0 : s;
 			s.environments.client.hot.on("cssints:sheet", (v) => {
 				if (!s.environments.client.moduleGraph.getModuleById(SHEET)?.transformResult?.code.includes(v)) Effect.runSync(reloadSheet());
 			});
@@ -951,7 +966,7 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false }
 		buildStart() {
 			if (inner) return;
 			if (build) forgetWarnings();
-			if (server) return;
+			if (evaluator.server) return;
 			return run(hook("vite.buildStart", root, startServer()));
 		},
 		buildEnd() {

package/docs/API.md

@@ -881,7 +881,7 @@ export const hidden = ring().core; // error: no such method
 - **Namespaces.** Everything a scope declares is the scope's own. In the CSS of a kernel, a runtime or a global, and in what `emit` and `build` return, `--_x` is the custom property `--<scope>-x`; in a kernel or a runtime `&` is the class the engine mints for the kernel (`_<scope>-<entry>`, `_ring-core`) and `&(mod.key)` that of the kernel `key` of an embedded scope. A runtime or conflicts entry takes the class of the first kernel in the `uses` of the member. Scope names are lowercase letters, digits and `-`; `cssints` and `derived` are the engine's.
 - **`uses`** lists what a member needs, by key: kernels, globals, layers, runtimes and conflicts of the scope, or `mod.key` of an embedded one (the types reject a name that is none of these, or a private one). A call member may add more in what `build` returns.
 - **`group: true`** on a chain or call member makes every style of the member carry the group marker `_g-<scope>`, after the markers of its kernels: `sticky: { uses: ["core"], group: true, chain: {...} }` in scope `stuck` gives `_stuck-core _g-stuck _x`, and `within(attr("data-stuck", "top", "~="), "stuck")(...)` reads that ancestor (2026-10-08, cssints-sbs8). The group's name is the scope's, unique in the process, so two plugins never share one; a user's `group("stuck")` is the same group, so do not name your own groups after a scope you use. It is a marker like a kernel's: a condition around the member with no declaration of its own is a build error (see "Conditions and layers").
-- **Kernels** are global CSS, registered once per scope entry (key `<scope>.<entry>`) on first use: the CSS goes into layer `_.k`, below every class layer, and `atProperty` (the `@property` rules) at the top of the sheet. So a kernel cannot be conditional per site: a condition around a member that has only its marker is a build error (see "Conditions and layers"); give the member a method or arguments that set custom properties, which a condition can wrap. A kernel can also be written as styles, `css: (css) => [css.outline("var(--_w)", "solid", "var(--_c)"), css.outlineOffset("2px")]`, which prints the declarations under the kernel's class: they are checked like a user's (grammar, prose rules), conditions, `nest()`, `vars()` and `keyframes()` names are allowed (see below), `firstThatWorks()` and a member's marker are not. Build errors, at the call site: two keys that declare one custom property, two keys that print one marker, and two kernels written as styles in one member's `uses` that set properties of the element that meet (the same property, a shorthand and its longhand, a logical and a physical side, as in `cn()`): `cssints: x: kernels run and view both set animation, animation-timeline (they are one element's styles and print in no set order): write those in one kernel`. Kernels are printed in `_.k` sorted by key (`<scope>.<entry>`), whatever the order of `uses` or of the modules, so two of one member never decide between themselves; in one kernel the sheet's order holds (a shorthand before its longhands). A raw kernel derives no properties and is not compared (2026-10-08, cssints-life). A kernel's `requires` (BCD keys) is a build warning for a target that lacks one, never an error. A key that is also in the `polyfills` of a runtime in the member's `uses` is covered: it warns only for the targets that runtime does not reach (a `parentVars` runtime below `@property`, see below), and a fallback of CSS or a `script` covers it everywhere. The support warning of a declaration in a kernel written as styles is covered by the same rule, by its BCD key (the one in parentheses at the end of the warning): `core: { css: (css) => [css.borderRadius("var(--_r)"), css.cornerShape("squircle")] }` beside `mask: { polyfills: ["css.properties.corner-shape"], css: "..." }` in `uses` warns for nobody, so a plugin keeps derived conflicts without a raw kernel (2026-10-08, cssints-rp0e); a warning or an error of such a declaration prints its value as the sheet does, `var(--squircle-r)`, not `var(--_r)`. As in every support warning, a BCD `partial_implementation` counts as support, because most partial entries are edge cases; an entry `{ key, exact: true }` counts it as lacking, for a feature whose partial form gives other results (`surface()` asks for `{ key: "css.types.color.oklch.relative_syntax", exact: true }`), and the warning says so: `(a partial implementation counts as lacking)`.
+- **Kernels** are global CSS, registered once per scope entry (key `<scope>.<entry>`) on first use: the CSS goes into layer `_.k`, below every class layer, and `atProperty` (the `@property` rules) at the top of the sheet. So a kernel cannot be conditional per site: a condition around a member that has only its marker is a build error (see "Conditions and layers"); give the member a method or arguments that set custom properties, which a condition can wrap. A kernel can also be written as styles, `css: (css) => [css.outline("var(--_w)", "solid", "var(--_c)"), css.outlineOffset("2px")]`, which prints the declarations under the kernel's class: they are checked like a user's (grammar, prose rules), conditions, `nest()`, `vars()` and `keyframes()` names are allowed (see below), `firstThatWorks()` and a member's marker are not. Build errors, at the call site: two kernels of one scope that declare one of its own custom properties (`--reveal-k`), two kernels of different scopes that declare a custom property neither of them owns (`--bx-w`), two keys that print one marker, and two kernels written as styles in one member's `uses` that set properties of the element that meet (the same property, a shorthand and its longhand, a logical and a physical side, as in `cn()`): `cssints: x: kernels run and view both set animation, animation-timeline (they are one element's styles and print in no set order): write those in one kernel`. Kernels are printed in `_.k` sorted by key (`<scope>.<entry>`), whatever the order of `uses` or of the modules, so two of one member never decide between themselves; in one kernel the sheet's order holds (a shorthand before its longhands). A scope **may** declare a custom property another scope owns (`reveal()`'s kernel sets motion's `--motion-*`): that is reuse, and the two can sit on one page, while two of one scope may not share a short name of their own. A raw kernel derives no properties and is not compared (2026-10-08, cssints-life). A kernel's `requires` (BCD keys) is a build warning for a target that lacks one, never an error. A key that is also in the `polyfills` of a runtime in the member's `uses` is covered: it warns only for the targets that runtime does not reach (a `parentVars` runtime below `@property`, see below), and a fallback of CSS or a `script` covers it everywhere. The support warning of a declaration in a kernel written as styles is covered by the same rule, by its BCD key (the one in parentheses at the end of the warning): `core: { css: (css) => [css.borderRadius("var(--_r)"), css.cornerShape("squircle")] }` beside `mask: { polyfills: ["css.properties.corner-shape"], css: "..." }` in `uses` warns for nobody, so a plugin keeps derived conflicts without a raw kernel (2026-10-08, cssints-rp0e); a warning or an error of such a declaration prints its value as the sheet does, `var(--squircle-r)`, not `var(--_r)`. As in every support warning, a BCD `partial_implementation` counts as support, because most partial entries are edge cases; an entry `{ key, exact: true }` counts it as lacking, for a feature whose partial form gives other results (`surface()` asks for `{ key: "css.types.color.oklch.relative_syntax", exact: true }`), and the warning says so: `(a partial implementation counts as lacking)`.
 - **Chain members** (`chain: { method: { args, spacing?, excludes?, emit } }`) give `() => chain`. `args` is the grammar of the method's parts, checked in the types (the error is on the bad argument and says `ring.width: unexpected "red" ...`) and again at build time. `spacing` makes a lone number a step of the spacing scale (0.25rem), as in `padding`. `emit` returns declarations; a custom property is allowed and its value is not checked, any other property is checked like a `css.*` one. A method is used once: the chain leaves it out. `excludes: ["darken"]` leaves other methods out after this one too, and `args: ""` makes a method that takes no value (`ink()`). A grammar must be a literal type (a `const` variable is fine; if TypeScript has widened it to `string`, the method says so: write `as const`).
 - **Call members** (`{ args, uses? }` and a function in `build()`) take their arguments by `args`: a grammar (the parts, joined by a space, as a property takes them: `args: "small | large"`), `arg<T>()` (one value of a TypeScript type, which TypeScript checks and `build` gets as it is: `arg<"home" | "star">()`), or a **tuple of positional arguments**, each a grammar (one part), `"$tokens"` (a token set from `createTokens`), `"$overrides"` (values by path for the tokens of the `$tokens` before it, checked in the types against that token set), `"$selector"` (a CSS selector list, checked in the types for brackets and quotes and at build time as a whole), `arg<T>()`, or at the end one object of named leaves (`{ "size?": "<width>", on: "<color>" }`, a key ending in `?` is optional). `build` gets them as written, grammar parts as checked text. The positional form type-checks within the per-call budget; its cost is that an error lands on the call, with the position and the reason in the message, not on the argument. `build` returns `{ decls?, uses?, globals?, themes?, layers? }`.
 - **`globals`** are global rules that are not classes (`{ rule, layer? }` in the table, or `{ css, layer? }[]` from `build`). A global is identified by its content, not by a name: the same rule from two styles is one, and editing a value replaces it. It is in the sheet of the modules whose styles carry it (as kernels are), and leaves it with them. `layer` sends a rule to a top-level layer of that name (`@layer app`); it must be declared by a `layers` entry (or `layers` from `build`: a list, or `{ layers: [...], before: true }` for layers below the engine's), or by `layers()` in a module imported before. No layer puts it in `_.k`. Unlike a kernel, two globals **may** declare the same custom property; that is what lets a look set the same `--color-*` in several source layers.
@@ -1221,26 +1221,26 @@ export const typo = mdi("clos"); // error: not an icon of mdi
 
 More plugins on `scope()`, each a package of its own with its rules and limits in its README. Import them with the attribute, like `cssints`.
 
-| Package                                                     | Members                                                                                        | What it does                                                                                                                                                              |
-| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`@cssints/fluid`](../packages/fluid/README.md)             | `fluid(min, max, { from?, to?, zoom? })`, `fluid.container(...)`                               | A `clamp()` that grows between two widths, computed at build time; a range that fails WCAG 1.4.4 is a build error                                                         |
-| [`@cssints/layout`](../packages/layout/README.md)           | `stack()`, `cluster()`, `sidebar()`, `switcher()`, `cover()`, `autoGrid()`                     | Every Layout primitives as chain members                                                                                                                                  |
-| [`@cssints/fonts`](../packages/fonts/README.md)             | `font(family, { provider, ... })` → `.family()`, `.trim()`                                     | `@font-face` and a metric-matched fallback face; cap-height trimming by `text-box`, else capsize's margins                                                                |
-| [`@cssints/reset`](../packages/reset/README.md)             | `reset({ media?, prose? })`                                                                    | A modern reset in a top-level `@layer reset` declared before the engine's, below every style; `@cssints/reset/<baseline group>` keeps only the declarations of that group |
-| [`@cssints/tokens`](../packages/tokens/README.md)           | `/open-props`, `/radix`, `/flexoki`, `/reasonable-colors`, `/madoromi`                         | DTCG data for `createTokens`                                                                                                                                              |
-| [`@cssints/gradient`](../packages/gradient/README.md)       | `gradient(kind, direction, from, to, easing?, stops?)`                                         | Eased colour stops mixed in oklab at build time                                                                                                                           |
-| [`@cssints/gradient-2d`](../packages/gradient-2d/README.md) | `meshGradient(mesh)`, `freeformGradient(points)`                                               | `mesh-gradient()` / `freeform-gradient()` where the browser has them, else a runtime's canvas (this package's algorithms; lines and shapes not yet)                       |
-| [`@cssints/color-names`](../packages/color-names/README.md) | `named(name)`, `colorNames.<sector>(name)`, `/nearest`                                         | The Color Name List (31,939 names) as hex colours; the ten sector members keep an editor's completion short, `nearest()` is the build-time reverse lookup                 |
-| [`@cssints/motion`](../packages/motion/README.md)           | `motion().preset().duration().delay().easing()`                                                | Animation presets over `keyframes()`, with reduced motion                                                                                                                 |
-| [`@cssints/squircle`](../packages/squircle/README.md)       | `squircle().radius()`                                                                          | `corner-shape: squircle`, else a CSS `mask` of the same shape                                                                                                             |
-| [`@cssints/reveal`](../packages/reveal/README.md)           | `reveal().preset().range().duration().easing()`                                                | motion's entrance presets on `animation-timeline: view()`; for other targets a script plays it once on entry (delivered by the runtime)                                   |
-| [`@cssints/stuck`](../packages/stuck/README.md)             | `sticky().top()`, `stuck(styles)`, `stuck("bottom")(styles)`                                   | Styles inside a sticky element while it is stuck, by `@container scroll-state()`; for other targets an `IntersectionObserver` (delivered by the runtime)                  |
-| [`@cssints/balance`](../packages/balance/README.md)         | `balance()`, `pretty()`                                                                        | `text-wrap: balance` / `pretty`; for targets without balance a script balances the lines (delivered by the runtime)                                                       |
-| [`@cssints/masonry`](../packages/masonry/README.md)         | `masonry().columns().gap()`                                                                    | `display: grid-lanes`, else CSS `columns` (top to bottom per column)                                                                                                      |
-| [`@cssints/placeholder`](../packages/placeholder/README.md) | `placeholder(path, { mode? })`                                                                 | An `<image>` from a JPEG or PNG read at build time: a gradient of its colours laid out as the image, or a tiny thumbhash PNG                                              |
-| [`@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                                                        |
+| Package                                                     | Members                                                                                                  | What it does                                                                                                                                                                                             |
+| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@cssints/fluid`](../packages/fluid/README.md)             | `fluid(min, max, { from?, to?, zoom? })`, `fluid.container(...)`                                         | A `clamp()` that grows between two widths, computed at build time; a range that fails WCAG 1.4.4 is a build error                                                                                        |
+| [`@cssints/layout`](../packages/layout/README.md)           | `stack()`, `cluster()`, `sidebar()`, `switcher()`, `cover()`, `autoGrid()`                               | Every Layout primitives as chain members                                                                                                                                                                 |
+| [`@cssints/fonts`](../packages/fonts/README.md)             | `font(family, { provider, ... })` → `.family()`, `.trim()`                                               | `@font-face` and a metric-matched fallback face; cap-height trimming by `text-box`, else capsize's margins                                                                                               |
+| [`@cssints/reset`](../packages/reset/README.md)             | `reset({ media?, prose? })`                                                                              | A modern reset in a top-level `@layer reset` declared before the engine's, below every style; `@cssints/reset/<baseline group>` keeps only the declarations of that group                                |
+| [`@cssints/tokens`](../packages/tokens/README.md)           | `/open-props`, `/radix`, `/flexoki`, `/reasonable-colors`, `/madoromi`                                   | DTCG data for `createTokens`                                                                                                                                                                             |
+| [`@cssints/gradient`](../packages/gradient/README.md)       | `gradient(kind, direction, from, to, easing?, stops?)`                                                   | Eased colour stops mixed in oklab at build time                                                                                                                                                          |
+| [`@cssints/gradient-2d`](../packages/gradient-2d/README.md) | `meshGradient(mesh)`, `freeformGradient(points)`                                                         | `mesh-gradient()` / `freeform-gradient()` where the browser has them, else a runtime's canvas (this package's algorithms; lines and shapes not yet)                                                      |
+| [`@cssints/color-names`](../packages/color-names/README.md) | `named(name)`, `colorNames.<sector>(name)`, `/nearest`                                                   | The Color Name List (31,939 names) as hex colours; the ten sector members keep an editor's completion short, `nearest()` is the build-time reverse lookup                                                |
+| [`@cssints/motion`](../packages/motion/README.md)           | `motion().preset().duration().delay().easing()`                                                          | Animation presets over `keyframes()`, with reduced motion                                                                                                                                                |
+| [`@cssints/squircle`](../packages/squircle/README.md)       | `squircle().radius()`                                                                                    | `corner-shape: squircle`, else a CSS `mask` of the same shape                                                                                                                                            |
+| [`@cssints/reveal`](../packages/reveal/README.md)           | `reveal().preset().range().duration().easing()`, `appear().preset().range().duration().easing().inOut()` | motion's entrance presets on `animation-timeline: view()` (reveal) or on `timeline-trigger` + `animation-trigger` (appear); for other targets a script plays it once on entry (delivered by the runtime) |
+| [`@cssints/stuck`](../packages/stuck/README.md)             | `sticky().top()`, `stuck(styles)`, `stuck("bottom")(styles)`                                             | Styles inside a sticky element while it is stuck, by `@container scroll-state()`; for other targets an `IntersectionObserver` (delivered by the runtime)                                                 |
+| [`@cssints/balance`](../packages/balance/README.md)         | `balance()`, `pretty()`                                                                                  | `text-wrap: balance` / `pretty`; for targets without balance a script balances the lines (delivered by the runtime)                                                                                      |
+| [`@cssints/masonry`](../packages/masonry/README.md)         | `masonry().columns().gap()`                                                                              | `display: grid-lanes`, else CSS `columns` (top to bottom per column)                                                                                                                                     |
+| [`@cssints/placeholder`](../packages/placeholder/README.md) | `placeholder(path, { mode? })`                                                                           | An `<image>` from a JPEG or PNG read at build time: a gradient of its colours laid out as the image, or a tiny thumbhash PNG                                                                             |
+| [`@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                                                                                       |
 
 ### Headless: `createField` and `createConfirm` (`@cssints/headless`)
 

package/package.json

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