cssints 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexei Accio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,189 @@
-# Temporary Holding Version
+# CSS-in-TS
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<img src="https://cssints.dev/logo.svg" alt="" width="96" height="96">
+
+cssints is compile-time CSS-in-TypeScript. You write calls such as `css.flex().alignItems("center")`. A Vite plugin runs them at build time and replaces each one with atomic, content-hashed class names in `@layer`s. Nothing of the styling code ships to the browser except a few lines that join class names: for a `cn()` with runtime arguments and for `cv`.
+
+- Values are checked against the spec grammars (mdn-data) in the types and again at build time. A typo is an error in the editor and in the build.
+- Conditions (`media`, `container`, `supports`, `hover`), variants (`cv`), design tokens and themes (`createTokens`, `createGlobalTheme`, `check.contrast`) are all build-time, and all typed.
+- LightningCSS optimizes the output. Browser support (`@mdn/browser-compat-data` against your browserslist) is reported as warnings, except for what LightningCSS lowers for those targets.
+
+> **Alpha.** cssints is on npm at 0.x. The API can still change between minor versions, the plugin packages
+> may move, and some browsers and frameworks are checked less than others (docs/API.md, "Browser support and what 0.1
+> does not have"). Pin the version, and report what breaks.
+
+Decisions and findings are in [docs/wayfinder.md](docs/wayfinder.md); the API reference is [docs/API.md](docs/API.md). Both are also a site with search and type hovers: [apps/docs](apps/docs) (`cd apps/docs && bun run dev`); deployed to Cloudflare with Alchemy: <https://cssints.dev>.
+
+## Install
+
+```bash
+npm install --save-dev cssints vite@8   # or: bun add -d cssints vite@8, pnpm add -D cssints vite@8
+```
+
+cssints needs Vite 8 (Vite+ works too) and Node 22.18 or later (the plugin runs your modules with type stripping). It is a
+dev dependency: nothing of it ships except the few lines behind `cn` with runtime arguments and `cv`. The plugin packages are installed the same
+way, each beside `cssints` (`npm install --save-dev @cssints/fluid`); the list is on the
+[plugin packages](docs/API.md#plugin-packages-cssints-dk1q) page. In this repository `cssints` is a workspace package
+(`"cssints": "workspace:*"`).
+
+```ts
+// vite.config.ts
+import cssints, { cssTarget, targets } from "cssints/vite";
+
+export default {
+	plugins: [cssints()],
+	css: { transformer: "lightningcss", lightningcss: { targets } },
+	build: { cssMinify: "lightningcss", cssTarget },
+};
+```
+
+```ts
+// the entry, once
+import "virtual:cssints.css";
+```
+
+`targets` and `cssTarget` come from the browserslist query of the support warnings: the `BROWSERSLIST` variable, else the standard config (`"browserslist"` in `package.json` or `.browserslistrc`, with the `BROWSERSLIST_ENV`, `NODE_ENV` or `production` section), else `defaults`. The exports are computed when `vite.config.ts` is imported, before Vite's root is known, so they look the config up from `process.cwd()` and upward; the support warnings look it up from Vite's `root` (2026-10-09, cssints-p3d2). They are the same when Vite runs from the app's directory; with `vite <dir>` from elsewhere, give `targets` and `cssTarget` the app's config yourself. Vite's CSS minify reads `cssTarget`, not `targets`: without it the minifier merges the declarations of a `firstThatWorks` into the last one. Add `"types": ["vite/client"]` to `tsconfig.json` for the `virtual:` import.
+
+### Frameworks
+
+Any framework that builds JSX through a Vite plugin works; the engine evaluates your modules itself, so it does not care what the plugin makes of JSX, nor in which order the plugins are listed. `apps/sky` is the Solid 2 app (`solid-js` and `@solidjs/web` 2.0.0-rc.13, `@solidjs/vite-plugin` 3.0.0-next.47):
+
+```ts skip
+// vite.config.ts
+import solid from "@solidjs/vite-plugin";
+import cssints, { cssTarget, targets } from "cssints/vite";
+
+export default {
+	plugins: [cssints(), solid()],
+	css: { transformer: "lightningcss", lightningcss: { targets } },
+	build: { cssMinify: "lightningcss", cssTarget },
+};
+```
+
+`tsconfig.json` is Solid's: `"jsx": "preserve"`, `"jsxImportSource": "@solidjs/web"`, `"types": ["vite/client"]`. Solid's `class` takes a string, an object or an array, so `cn` is not needed for the join: `class={[card, on() && p(4)]}` and `class={badge({ tone: tone() })}` work as in React. A site's arguments are still build-time values, so a signal goes in the condition or in a `cv` variant, not in `p(n())`. Under `vite dev` an edit of a component replaces it and resets its state below it (Solid's refresh); an edit of a style changes the class strings and the sheet with no reload.
+
+```tsx
+import { bg, color, cn, cv, flex, hover, media, p, style, token } from "cssints" with { type: "cssints" };
+
+const md = media("(width >= 40rem)");
+const accent = token.color("#2563eb", "accent");
+
+const button = cv({
+	base: cn(p(2), color("white"), bg(accent), hover(bg("#1d4ed8"))),
+	variants: { wide: { true: md(p(4)) } },
+});
+
+export const Row = ({ wide, on }: { wide?: boolean; on?: boolean }) => (
+	<div className={cn(flex().alignItems("center").gap(2), on && p(1))} style={style(token.set(accent, "#dc2626"))}>
+		<button className={button({ wide })}>Save</button>
+	</div>
+);
+```
+
+`with { type: "cssints" }` marks what runs at build time. The plugin replaces each call with a class string, so the browser gets `__cx([], "_1s47490 _1ob5z5m _g2iyum", on && "_lqk467")` and `button` is a call of the runtime with `{ base: "_1t8gqy5 ...", ... }`, so it never sees `flex()`. `virtual:cssints.css` is one sheet with every rule once, sorted by layer, then condition, then shorthand before longhand, then class name:
+
+```css
+@layer _.k, _.a, _.b, _.c, _.d, _.e;
+@property --accent{syntax:"<color>";inherits:true;initial-value:#2563eb}
+@layer _.a {
+  ._1t8gqy5{padding:0.5rem}
+  ._lqk467{padding:0.25rem}
+  ._g2iyum{gap:0.5rem}
+  ._17xzvrh{background-color:var(--accent)}
+  ._1binn6n{color:white}
+  ._1ob5z5m{align-items:center}
+  ._1s47490{display:flex}
+}
+@layer _.b {
+  ._1tsjws2:hover{background-color:#1d4ed8}
+  @media (width >= 40rem) {
+    ._tdcza3{padding:1rem}
+  }
+}
+```
+
+### In a terminal
+
+`import * as css from "cssints/tui" with { type: "cssints" }` gives the members a terminal has (cells, colours, borders, flex, states, `cursor`), and the plugin compiles them to prop objects for [OpenTUI](https://opentui.com) renderables instead of classes; `@cssints/tui` applies their states and themes: [packages/tui](packages/tui/README.md), docs/API.md "TUI".
+
+More in [docs/API.md](docs/API.md): property names and short names, `flex()` and `grid()` chains, conditions and layers, tokens and themes, `cn` and `cv`, and the errors you can get.
+
+## Debugging
+
+`CSSINTS_TRACE=otlp bun run build` (or `dev`) sends a trace of every Vite hook, with the file of each module, to a local OpenTelemetry backend; unset, it costs nothing. How to start the backend in one `docker run`, and the spans: [docs/API.md](docs/API.md#debugging-traces-of-the-engine-cssints_trace-cssints-r2qq).
+
+## For agents
+
+`cssints` ships two [agent skills](https://agentskills.io) in its package, `skills/cssints` (writing styles: setup,
+`cn`/`cv`, conditions, tokens and themes, the plugin packages, build errors) and `skills/cssints-plugin` (writing
+a plugin on `scope()`, with its tests). Install them into your agent's skills folder:
+
+```bash
+npx skills-npm                                # links the skills of every installed package that ships some
+npx skills add ./node_modules/cssints/skills  # or the skills CLI, for opencode, Claude Code, Codex, Cursor, ...
+```
+
+Agents working on this repository get `.agents/skills/cssints-contributor` (also `.claude/skills`) with no install.
+
+`@cssints/mcp` is an MCP server with the build's own checks (`check_declaration`, `check_support`, `check_contrast`,
+`compile`, `search_docs`, `list_plugins`), in [packages/mcp](packages/mcp) with the config for opencode, Claude Code
+and Cursor. The skills use it when it is configured and work without it.
+
+## Layout
+
+| Path | What |
+|---|---|
+| `packages/cssints` | Vite plugin (`cssints/vite`) on the Vite Module Runner, and the `cssints` library |
+| `packages/css-grammar` | Type-level recognizer and its runtime twin over mdn-data grammars, Typed OM values, browser support and prose rules |
+| `packages/icons` | `@cssints/icons`: icons from iconify JSON collections or SVG folders, a mask style with no runtime |
+| `packages/mise-en-mode` | `@cssints/mise-en-mode`: looks as themes in the layers app < author < viewer, on `data-mode` scopes, checked against the tokens and by `check.contrast` |
+| `apps/demo` | React demo of every 0.1 feature |
+| `apps/docs` | The documentation site: this file and `docs/API.md` as pages, with search and type hovers (`cd apps/docs && bun run dev`) |
+| `docs/research`, `docs/archive` | Comparisons with other libraries; outdated plans |
+
+## Development
+
+```bash
+bun install
+bun run test    # all packages (vp run -r test, cached where possible); includes the type-check of the code in docs/API.md and this file
+bun run bench   # type instantiation budgets (tsc and tsgo)
+bun run check   # format, lint, type-check (vp check), then the Effect diagnostics (bun run typecheck)
+bun run diff:check   # the added lines against master: anti-slop rules, key-file changes (tools/ai-automation)
+cd apps/demo && bun run dev
+cd apps/docs && bun run dev   # the documentation site, on the pages of README.md and docs/API.md
+```
+
+See [AGENTS.md](AGENTS.md) for the layout, commands and code style.
+
+## Credits
+
+cssints is MIT. It stands on other people's work; this is what we took, from whom, and under which license. A package that copies data or code carries the upstream notice (a Credits or Licenses section of its README, or `THIRD_PARTY_NOTICES.md`).
+
+### Data and code that ships
+
+| Where | What | From | License |
+|---|---|---|---|
+| [@cssints/tokens](packages/tokens/README.md) | the Open Props, Radix Colors, Flexoki and Reasonable Colors sets | [Open Props](https://github.com/argyleink/open-props) (Adam Argyle), [Radix Colors](https://github.com/radix-ui/colors), [Flexoki](https://github.com/kepano/flexoki) (Steph Ango), [Reasonable Colors](https://github.com/matthewhowell/reasonable-colors) (Matthew Howell) | MIT, notices in its README |
+| [@cssints/css-grammar](packages/css-grammar/THIRD_PARTY_NOTICES.md) | the CSS syntax strings (`src/mdn.ts`, `keywords.ts`, `functions.ts`), also in the types of `cssints` | [mdn-data](https://github.com/mdn/data); the numeric ranges it omits from [@webref/css](https://github.com/w3c/webref) | CC0-1.0; MIT (W3C) |
+| @cssints/css-grammar | browser support warnings, read from the package (not copied) | [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) | CC0-1.0 |
+| [@cssints/fonts](packages/fonts/README.md) | the latin character weights and the metrics of Arial, Times New Roman and Courier New | [Capsize](https://github.com/seek-oss/capsize) (SEEK) | MIT, notice in its README |
+| [@cssints/icons](packages/icons/README.md) | nothing: the collections are your dependency | [Iconify](https://iconify.design) `@iconify-json/*` | each collection's own |
+| `tools/ai-automation/vendor` | lint rules, not published | [dmmulroy/anti-slop](https://github.com/dmmulroy/anti-slop) (Dillon Mulroy) | MIT, `LICENSE` and `UPSTREAM.md` |
+| [apps/sky](apps/sky/NOTICE.md) | layout and token values; Inter; Phosphor icons | Mu and `@bsky.app/alf` (Bluesky Social PBC), [Inter](https://github.com/rsms/inter), [Phosphor](https://phosphoricons.com) | MIT; OFL-1.1; MIT |
+| apps/demo | Material Design Icons (`@iconify-json/mdi`) | Pictogrammers | Apache-2.0 |
+
+### Ideas and designs
+
+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).
+- **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/sky** follows the look of Mu and the hue slider of Witchsky.
+
+### Built on
+
+[Effect](https://effect.website), [Vite](https://vite.dev) and Vite+, [OXC](https://oxc.rs), [LightningCSS](https://lightningcss.dev) (MPL-2.0; its wasm build runs in the playground), [culori](https://culorijs.org), [TypeScript](https://www.typescriptlang.org) and TypeScript Go, [Bun](https://bun.sh), [Solid](https://www.solidjs.com), [OpenTUI](https://opentui.com), [Shiki](https://shiki.style), [Monaco Editor](https://microsoft.github.io/monaco-editor/), [Playwright](https://playwright.dev), [fast-check](https://fast-check.dev), [Quint](https://quint-lang.org), [atcute](https://github.com/mary-ext/atcute), and [Beans](https://github.com/hmans/beans) for the tickets. Phosphor icons (MIT) are on this site through `@iconify-json/ph`. Every dependency keeps its own license; none is copied into the repository.
+
+## License
+
+MIT

package/dist/author-types-C1AhsnrT.d.mts

@@ -0,0 +1,80 @@
+//#region src/author-types.d.ts
+/** A declaration a member emits: property and value (a custom property, `--_r`, is allowed). */
+type Decl = readonly [prop: string, value: string];
+/** A feature of `@mdn/browser-compat-data`: `css.at-rules.container.style_queries_for_custom_properties`. */
+type BcdKey = `css.${string}`;
+/**
+ * Global rules, registered once by `key` (`name@version`) in layer `_.k`; `atProperty` (the `@property` rules of its
+ * custom properties) goes at the top of the sheet. A target lacking a `requires` feature gets a support warning, never an
+ * error; `{ key, exact: true }` also counts a partial implementation as lacking (relative colour, whose channel scales
+ * differ in Chrome 119-121 and Safari 16.4-17.6). Two members share a kernel by pointing at the same object; the same key with other CSS is a build error, as is
+ * a custom property or a marker that two keys share.
+ */
+interface Kernel {
+  key: string;
+  css: string;
+  atProperty?: string;
+  requires?: (BcdKey | {
+    key: BcdKey;
+    exact: true;
+  })[];
+}
+/**
+ * A global rule a member contributes. It is identified by its content (`layer` and `css`): the same rule from two
+ * styles is one, an edit of it replaces the old one, and it is in the sheet of the modules whose styles carry it, until
+ * they stop. It goes to layer `_.k` with the kernels. Unlike a kernel, two globals **may** declare the same custom
+ * property: a look sets the same `--color-*` in several source layers, which is the point of fill-through. Use it for a
+ * rule that is not a class.
+ */
+interface GlobalRule {
+  css: string;
+  /**
+   * A top-level `@layer` of this name to put the rule in (a rule that must beat the engine's `:root` fallbacks). The
+   * layer must be declared: by `layers` of the same `Made`, or by `layers()` in a module this one imports. Omitted:
+   * layer `_.k`.
+   */
+  layer?: string;
+}
+/**
+ * A theme a member contributes, as `createGlobalTheme(tokens, selector, overrides, { layer, scope })` makes one: the
+ * same checks (the paths and values of `overrides` against the types of `tokens`, a layer that is declared), the
+ * aliases that depend on an override declared again, and `check.contrast` reads it. `tokens` is a token set of
+ * `createTokens()` that the member got from its caller (a closure: the arguments of a member are joined into one string).
+ */
+interface ThemeRule {
+  tokens: object;
+  overrides: object;
+  selector: string;
+  layer?: string;
+  /** A selector: the rule goes inside `@scope (<scope>) { ... }`. */
+  scope?: string;
+}
+/** One element family of a runtime: the nearest `marker` ancestor's computed `read` is copied into `write`. */
+interface ParentVar {
+  marker: string;
+  read: `--${string}`;
+  write: `--${string}`;
+  /** A property that changes when a CSS condition (`:hover`, a media query) changes `read`: its transition re-runs the copy. */
+  watch?: `--${string}`;
+}
+/**
+ * The runtime half of a member. The client module that holds a site with the member imports
+ * `virtual:cssints/runtime/<name>`, which is empty unless a browserslist target lacks a feature in `polyfills` (and, with
+ * `parentVars`, has `@property`, which the script stands on); then it imports `script`, configures `cssints/parent-vars`,
+ * and `css` (the fallback rules) is added to the sheet in layer `_.k`. A `requires` of the member's kernel that is in
+ * `polyfills` warns only for the targets the runtime does not reach.
+ */
+interface Runtime {
+  polyfills: BcdKey[];
+  parentVars?: ParentVar[];
+  css?: string;
+  /** The plugin's browser script, a module specifier the app resolves (`"@cssints/balance/runtime"`): imported, never evaluated at build time. */
+  script?: string;
+}
+/** 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;
+}
+//#endregion
+export { Kernel as a, GlobalRule as i, Conflict as n, Runtime as o, Decl as r, ThemeRule as s, BcdKey as t };

package/dist/check.d.mts

@@ -0,0 +1,22 @@
+import { t as ContrastError } from "./errors-D4ZbcwRo.mjs";
+import { Warning } from "@cssints/css-grammar/support";
+import { Effect } from "effect";
+//#region src/check.d.ts
+/**
+ * The WCAG 2.x contrast ratio of two CSS colours, as `css.check.contrast` computes it: culori reads the colour, one
+ * outside sRGB is clipped to it, a translucent one has no contrast. `text` is the ratio cut (not rounded) at two places,
+ * as the check's message prints it.
+ */
+export declare const contrast: (foreground: string, background: string) => Effect.Effect<{
+  ratio: number;
+  text: string;
+}, ContrastError, never>;
+/**
+ * What LightningCSS makes of `property: value` for the targets of a support warning (`support()` of
+ * `@cssints/css-grammar/support`), when it lowers the feature the warning is about: the value of the first declaration it
+ * writes (`oklch(…)` becomes a hex), else undefined. A build drops a warning that LightningCSS lowers; an inline `style()`
+ * never goes through it and keeps the warning. A custom property is `--name`.
+ */
+export declare const loweredOf: (property: string, value: string, warning: Warning) => Effect.Effect<string | undefined, never, never>;
+//#endregion
+export { ContrastError };

package/dist/check.mjs

@@ -0,0 +1,37 @@
+import { s as ContrastError } from "./registry-CTumHB8p.mjs";
+import { t as fallbackOf } from "./lowered-D2KusPLp.mjs";
+import { i as shown, r as ratio, t as luminance } from "./color-BYIxVLlS.mjs";
+import { Effect } from "effect";
+//#region src/check.ts
+/**
+* The WCAG 2.x contrast ratio of two CSS colours, as `css.check.contrast` computes it: culori reads the colour, one
+* outside sRGB is clipped to it, a translucent one has no contrast. `text` is the ratio cut (not rounded) at two places,
+* as the check's message prints it.
+*/
+const contrast = Effect.fn("cssints.contrast")(function* (foreground, background) {
+	const [f, b] = yield* Effect.sync(() => [luminance(foreground), luminance(background)]);
+	if (f.lum === void 0) return yield* new ContrastError({
+		colour: foreground,
+		message: `"${foreground}" ${f.why}`
+	});
+	if (b.lum === void 0) return yield* new ContrastError({
+		colour: background,
+		message: `"${background}" ${b.why}`
+	});
+	const r = ratio(f.lum, b.lum);
+	return {
+		ratio: r,
+		text: shown(r)
+	};
+});
+/**
+* What LightningCSS makes of `property: value` for the targets of a support warning (`support()` of
+* `@cssints/css-grammar/support`), when it lowers the feature the warning is about: the value of the first declaration it
+* writes (`oklch(…)` becomes a hex), else undefined. A build drops a warning that LightningCSS lowers; an inline `style()`
+* never goes through it and keeps the warning. A custom property is `--name`.
+*/
+const loweredOf = Effect.fn("cssints.loweredOf")(function* (property, value, warning) {
+	return yield* Effect.sync(() => fallbackOf(property, value, warning));
+});
+//#endregion
+export { ContrastError, contrast, loweredOf };

package/dist/color-BYIxVLlS.mjs

@@ -0,0 +1,29 @@
+import { clampRgb, modeA98, modeHsl, modeHwb, modeLab, modeLch, modeLrgb, modeOklab, modeOklch, modeP3, modeProphoto, modeRec2020, modeRgb, modeXyz50, modeXyz65, parse, useMode, wcagLuminance } from "culori/fn";
+//#region src/color.ts
+for (const mode of [
+	modeRgb,
+	modeHsl,
+	modeHwb,
+	modeLab,
+	modeLch,
+	modeOklab,
+	modeOklch,
+	modeLrgb,
+	modeP3,
+	modeA98,
+	modeProphoto,
+	modeRec2020,
+	modeXyz50,
+	modeXyz65
+]) useMode(mode);
+const parseColor = (text) => parse(text);
+const luminance = (text) => {
+	const c = parse(text);
+	if (!c) return { why: "is not a colour the check can read" };
+	if ((c.alpha ?? 1) < 1) return { why: "is translucent, and has no contrast without a backdrop" };
+	return { lum: wcagLuminance(clampRgb(c)) };
+};
+const ratio = (a, b) => (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+const shown = (r) => (Math.floor(r * 100) / 100).toFixed(2);
+//#endregion
+export { shown as i, parseColor as n, ratio as r, luminance as t };

package/dist/color-C8OzjAeg.mjs

@@ -0,0 +1,2 @@
+import { i as shown, n as parseColor, r as ratio, t as luminance } from "./color-BYIxVLlS.mjs";
+export { luminance, parseColor, ratio, shown };

package/dist/contrast-DhK69Xak.mjs

@@ -0,0 +1,83 @@
+import { a as registry, d as MacroError, o as warn } from "./registry-CTumHB8p.mjs";
+import { l as layerStatements } from "./sheet-BKsMTa0c.mjs";
+import { Effect } from "effect";
+//#region src/contrast.ts
+const VAR = /var\((--[^\s,)]+)\)/g;
+const valueOf = (state, name, values) => {
+	const def = state.defs.get(name);
+	const text = values?.get(name) ?? def?.template;
+	return text === void 0 ? def?.value : text.replace(VAR, (m, n) => state.defs.has(n) ? valueOf(state, n, values) : m);
+};
+const affectedBy = (defs, names, out = /* @__PURE__ */ new Set()) => {
+	for (const n of names) if (!out.has(n)) {
+		out.add(n);
+		affectedBy(defs, defs.get(n)?.refs ?? [], out);
+	}
+	return out;
+};
+const together = ({ themed, layers }) => {
+	const side = (before) => layerStatements([...layers.values()].flatMap((l) => l.before === before ? [l.names] : [])).flat();
+	const order = [
+		...side(true),
+		"",
+		...side(false)
+	];
+	const rank = (layer) => order.indexOf(layer ?? "");
+	const groups = /* @__PURE__ */ new Map();
+	for (const t of [...themed.values()].sort((a, b) => rank(a.layer) - rank(b.layer) || (a.key < b.key ? -1 : 1))) {
+		if (!t.theme) continue;
+		const { label, scope, values } = t.theme;
+		const key = `${label}\t${scope ?? ""}`;
+		const group = groups.get(key) ?? groups.set(key, {
+			label,
+			values: /* @__PURE__ */ new Map()
+		}).get(key);
+		for (const [n, v] of values) group.values.set(n, v);
+	}
+	return groups.values();
+};
+const verify = (check, state, { luminance, ratio, shown }) => {
+	const { fg, bg, min } = check;
+	const path = (n) => state.defs.get(n)?.path ?? n;
+	const affecting = affectedBy(state.defs, [fg, bg]);
+	const subjects = [{ label: "the default values" }];
+	for (const { label, values } of together(state)) if ([...values.keys()].some((n) => affecting.has(n))) subjects.push({
+		label: `theme ${label}`,
+		values
+	});
+	const errors = [];
+	for (const { label, values } of subjects) {
+		const pair = [fg, bg].map((n) => {
+			const text = valueOf(state, n, values) ?? "";
+			return {
+				name: n,
+				text,
+				l: luminance(text)
+			};
+		});
+		const [f, b] = pair;
+		let ok = true;
+		for (const p of pair) if (p.l.why !== void 0) {
+			ok = false;
+			warn(state, `contrast ${p.name} ${p.text}`, `cssints: contrast is not checked for ${path(p.name)} in ${label}: "${p.text}" ${p.l.why}`, check.at);
+		}
+		if (!ok || f.l.lum === void 0 || b.l.lum === void 0) continue;
+		const r = ratio(f.l.lum, b.l.lum);
+		if (r < min) errors.push(`cssints: contrast ${shown(r)} is below ${min}: ${path(fg)} ${f.text} on ${path(bg)} ${b.text}, in ${label}`);
+	}
+	return errors;
+};
+const verifyChecks = Effect.fnUntraced(function* (select) {
+	const checks = [...registry.checks.values()].filter(select);
+	if (!checks.length) return;
+	const colours = yield* Effect.promise(() => import("./color-C8OzjAeg.mjs"));
+	for (const check of checks) {
+		const errors = verify(check, registry, colours);
+		if (errors.length) return yield* new MacroError({
+			message: errors.join("\n"),
+			...check.at
+		});
+	}
+});
+//#endregion
+export { valueOf as n, verifyChecks as r, together as t };

package/dist/derived.d.mts

@@ -0,0 +1,14 @@
+//#region src/derived.d.ts
+type Space = "srgb" | "srgb-linear" | "oklab" | "oklch" | "lab";
+export interface Color {
+  s: Space;
+  c: number[];
+  a: number;
+}
+/** The custom property of :root that carries the data (derived-data.ts writes it). */
+export declare const KEY = "--_derived";
+export declare const evaluate: (text: string, get?: (name: string) => string | Color) => Color;
+export declare const css: (c: Color) => string;
+declare const _default: () => void;
+//#endregion
+export { _default as default };