@cube-dev/ui-kit 0.0.0-canary-d8e2a5f → 0.0.0-canary-d03ae24

package/docs/glaze/migration.md

@@ -4,18 +4,117 @@ How to plug a Glaze palette into an existing app — exporting tokens in the rig
 
 If you're starting from scratch, see [methodology.md](methodology.md) first — that's about *designing* the palette. This doc is about *consuming* it.
 
+## Upgrading to the tone model (`lightness` → `tone`)
+
+Glaze replaced OKHSL **lightness** with a contrast-uniform **tone** axis (OKHST). The Möbius dark-mode curve is gone — dark mode is now a single tone inversion remapped into a per-mode window. See [`docs/okhst.md`](okhst.md) for the model. This is a breaking change; here's what to update.
+
+### Rename the authoring axis
+
+`lightness` is gone. Replace it with `tone` everywhere:
+
+```ts
+// before
+theme.colors({ surface: { lightness: 97 }, text: { base: 'surface', lightness: '-52' } });
+// after
+theme.colors({ surface: { tone: 97 }, text: { base: 'surface', tone: '-52' } });
+```
+
+The same applies to `glaze.color({ ..., lightness })` (structured form) → `tone`, and the `{ h, s, l }` value object is unchanged (still OKHSL) — but you can now also pass `{ h, s, t }` (OKHST) or an `okhst(H S% T%)` string.
+
+Tone is **0–100** like the old lightness, but the *scale is contrast-uniform*, not perceptual-lightness-uniform. Numeric values won't land at the same OKHSL lightness — equal tone steps now give equal WCAG contrast. Re-eyeball absolute values (especially mid-range ones); relative deltas and contrast-floored tokens usually need no change because they were already contrast-driven.
+
+### Config window shape
+
+The lightness windows became tone windows, and `darkCurve` was removed (no curve to tune). The `[lo, hi]` tuple form carries over directly:
+
+```ts
+// before
+glaze.configure({ lightLightness: [10, 100], darkLightness: [15, 95], darkCurve: 0.5 });
+// after
+glaze.configure({
+  lightTone: [10, 100],
+  darkTone: [15, 95],
+  // darkCurve removed
+});
+```
+
+`lightLightness`/`darkLightness` → `lightTone`/`darkTone`. The window value is `[lo, hi]` (reference eps — the common form), `{ lo, hi, eps }` (advanced: explicit render curvature), or `false` to disable clamping. `false` removes the *boundaries* (full `[0, 100]` range), not the contrast-uniform tone curve. Per-token `glaze.color(value, config)` overrides use the same shape.
+
+### The `contrast` prop now selects a metric
+
+A bare number or preset is still **WCAG** and needs no change. To use APCA or split a pair across the metric, use the object form:
+
+```ts
+contrast: 4.5            // unchanged — WCAG 4.5
+contrast: { wcag: 6 }    // explicit WCAG
+contrast: { apca: 60 }   // APCA Lc floor
+contrast: { wcag: [4.5, 7] } // pair inside the metric
+```
+
+### Forcing extremes: `'max'` / `'min'`
+
+For colors that should sit at the scheme's tone extreme (pure-white knockouts, near-black scrims, deliberately faint disabled chips), reach for `tone: 'max'` / `tone: 'min'` instead of a large absolute number or a low contrast floor standing in for "push it all the way". `'max'` resolves to author tone 100, `'min'` to 0, and both flow through scheme mapping (so they invert in dark under `mode: 'auto'`). No `base` required.
+
+```ts
+// before — low contrast as a proxy for "stay near the surface"
+'disabled-text': { base: 'chip', tone: '+1', contrast: 1.51, mode: 'fixed' }
+// after — say it directly with tone
+'disabled-text': { base: 'chip', tone: '+18', saturation: 0.4, autoFlip: false }
+```
+
+### The `autoFlip` prop (previously `flip`)
+
+The per-color configuration property `flip` has been renamed to `autoFlip` to align with the global `autoFlip` configuration option and to avoid confusion with dark-mode/scheme tone inversion (which is handled automatically by the system).
+
+Relative `tone` offsets that overshoot `[0, 100]` now **mirror to the other side of the base by default** (controlled by the per-color `autoFlip`, which inherits the global `autoFlip`, default `true`). Previously such offsets always clamped to the boundary. If you relied on clamping — e.g. `tone: '+48'` to stack a color up to 100 — set `autoFlip: false` on that color (or `glaze.configure({ autoFlip: false })` globally) to restore the clamping behavior. `autoFlip` also governs the contrast solver's direction (its previous sole role).
+
+### Resolved variants store tone
+
+`ResolvedColorVariant` now exposes `t` (tone, 0–1) instead of `l`. If you read resolved internals, convert with `variantToOkhsl(variant).l`. Token/CSS/JSON output uses native formats by default (`oklch` for `tokens()` / `json()`, `okhsl` for `tasty()`); use `tasty({ format: 'okhsl' })` or `tasty({ format: 'okhst' })` for Glaze-native spaces.
+
+### 0.16.0 — output format defaults and Tasty-only spaces
+
+**Breaking changes in 0.16.0:**
+
+| Export | Old default | New default |
+|---|---|---|
+| `tokens()` / `json()` (theme + palette) | `okhsl` | `oklch` |
+| Standalone `.json()` | `okhsl` | `oklch` |
+| `tasty()` | `okhsl` (unchanged) | `okhsl` |
+
+`'okhsl'` and the new `'okhst'` output format are **Tasty-only**. Passing either to `css()`, `tailwind()`, `tokens()`, or `json()` throws. Migrate:
+
+```ts
+// before
+theme.tokens({ format: 'okhsl' })
+theme.json()
+
+// after — pick one
+theme.tasty({ format: 'okhsl' })   // Tasty #name keys, okhsl strings
+theme.tokens({ format: 'oklch' })    // native CSS (new default)
+```
+
+**New:** `splitHue` on `css()` / `tasty()` (theme + palette) and standalone `color.css()` emits hue as a separate custom property for runtime re-skinning. Requires `format: 'oklch'` and every color to be pastel. See [api.md → Hue channel splitting](api.md#hue-channel-splitting-splithue).
+
+### Export snapshots
+
+`theme.export()` / `color.export()` snapshots now carry `lightTone` / `darkTone` window objects (not `lightLightness` / `darkLightness`). Old exported JSON with the legacy keys will need its `config` block rewritten before `glaze.from()` / `glaze.colorFrom()`.
+
 ## Choosing an export
 
-Glaze emits the same resolved colors in four shapes. Pick one based on your renderer.
+Glaze emits the same resolved colors in six shapes. Pick one based on your renderer / tooling.
 
 | Method | Output shape | Use it for |
 |---|---|---|
 | `palette.tasty(options?)` | `{ '#name': { '': value, '@dark': value, '@hc': value } }` | The [Tasty](https://tasty.style/docs) style system. Single object, state aliases keyed inside each token. |
 | `palette.tokens(options?)` | `{ light: { name: value }, dark: { name: value }, ... }` | Most CSS-in-JS systems. Per-variant flat maps, easy to feed into a `:root { ... }` selector via your framework's globals. |
 | `palette.css(options?)` | `{ light: '--name-color: rgb(...);', dark: '...', ... }` | Framework-free CSS / static stylesheets. Variant-grouped CSS custom property strings ready to wrap in `:root` and `prefers-color-scheme` queries. |
-| `palette.json(options?)` | `{ themeName: { name: { light, dark, ... } } }` | Tooling, JSON pipelines, design-token exporters (Style Dictionary, etc.). |
+| `palette.json(options?)` | `{ themeName: { name: { light, dark, ... } } }` | Tooling, JSON pipelines. |
+| `palette.dtcg(options?)` | `{ light: { name: { $type, $value } }, dark: { ... }, ... }` | W3C [DTCG 2025.10](https://www.designtokens.org/) `.tokens.json` — Figma, Tokens Studio, Style Dictionary, Terrazzo, Penpot. One document per scheme. |
+| `palette.dtcgResolver(options?)` | `{ version, sets, modifiers, resolutionOrder }` | W3C DTCG **Resolver-Module** — a single document describing every scheme variant as `sets` + a `scheme` modifier with a context per variant. For resolver tools such as Dispersa. |
+| `palette.tailwind(options?)` | `'@theme { --color-*: ... } .dark { ... } ...'` | Tailwind CSS v4. A single ready-to-paste `@theme` block plus dark / high-contrast overrides. |
 
-All four accept `format` (`'okhsl' \| 'rgb' \| 'hsl' \| 'oklch'`). `tokens()`, `tasty()`, and `json()` also accept `modes` (`{ dark, highContrast }`). `css()` always returns all four strings (`light`, `dark`, `lightContrast`, `darkContrast`). See [api.md → Palette](api.md#palette) for full options.
+`tasty()`, `tokens()`, `json()`, `dtcg()`, `dtcgResolver()`, and `tailwind()` accept `modes` (`{ dark, highContrast }`). `css()` always returns all four strings (`light`, `dark`, `lightContrast`, `darkContrast`). The CSS-string exports accept `format` (`'rgb' \| 'hsl' \| 'oklch'` on `tokens`/`json`/`css`/`tailwind`; `'okhsl' \| 'okhst'` on `tasty()` only); `dtcg()` and `dtcgResolver()` use `colorSpace` (`'srgb' \| 'oklch'`) instead. See [api.md → Palette](api.md#palette) for full options.
 
 ## Wiring exports into the app
 
@@ -94,9 +193,47 @@ const data = palette.json();
 
 Feed into your tooling pipeline. Each color is grouped by theme name, then by token name, then by variant — no prefix logic to undo.
 
+### W3C DTCG (`.tokens.json`)
+
+```ts
+import { writeFileSync } from 'node:fs';
+const dtcg = palette.dtcg();
+
+writeFileSync('tokens.light.tokens.json', JSON.stringify(dtcg.light, null, 2));
+if (dtcg.dark) {
+  writeFileSync('tokens.dark.tokens.json', JSON.stringify(dtcg.dark, null, 2));
+}
+```
+
+Each document is a spec-conformant token tree. One file per scheme is the most tool-compatible convention — Style Dictionary treats them as themes, Tokens Studio as sets, and Figma as variable modes. Use `colorSpace: 'oklch'` for wide-gamut, Glaze-native values (no `hex`); the default `'srgb'` emits components plus a `hex` hint that every reader understands. Feed the files straight into Style Dictionary v4+, Tokens Studio, or any DTCG-compatible tool — no Glaze-specific transform needed.
+
+### W3C DTCG Resolver-Module (single document)
+
+When you want **one file** describing every scheme variant — for a resolver tool such as [Dispersa](https://github.com/dispersa-core/dispersa) — use `dtcgResolver()` instead of `dtcg()`:
+
+```ts
+import { writeFileSync } from 'node:fs';
+const resolver = palette.dtcgResolver({ modes: { highContrast: true } });
+
+writeFileSync('resolver.json', JSON.stringify(resolver, null, 2));
+```
+
+The document places the light tokens in `sets.base.sources[0]` (the default context) and emits a single `scheme` modifier with a context per variant (`light` / `dark` / `lightContrast` / `darkContrast`). Each non-default context holds that variant's exact resolved tokens — Glaze resolves `darkContrast` independently, so the four-context shape keeps every value correct (two independent modifiers would compose additively and produce wrong dark + high-contrast values). Rename the set, modifier, or contexts via `setName` / `modifierName` / `contextNames` if your resolver expects different labels. Prefer `dtcg()` when you need maximum per-file tool compatibility; prefer `dtcgResolver()` when a resolver tool consumes the document for you.
+
+### Tailwind CSS v4
+
+```ts
+const css = palette.tailwind();
+// Write to your CSS entry, or paste into a `@import "tailwindcss"` stylesheet:
+// @theme { --color-primary-surface: oklch(...); ... }
+// .dark { --color-primary-surface: oklch(...); ... }
+```
+
+The `--color-*` namespace makes every color available as `bg-*` / `text-*` / `border-*`. Drive dark mode from the OS preference instead of a class with `darkSelector: '@media (prefers-color-scheme: dark)'` (it nests `:root` automatically). High-contrast overrides land under `.high-contrast` and `.dark.high-contrast` by default; both are omitted unless `modes.highContrast` is enabled.
+
 ## Prefix map strategies
 
-`palette.tokens()` / `tasty()` / `css()` accept a `prefix` option:
+`palette.tokens()` / `tasty()` / `css()` / `dtcg()` / `tailwind()` accept a `prefix` option:
 
 | Value | Result |
 |---|---|
@@ -176,15 +313,15 @@ Walk your current color system and bucket every token into one of these categori
 - **Shadows / overlays** — elevation, scrims.
 - **One-off colors** — syntax highlighting, charts, illustrations.
 
-Each bucket maps cleanly to one of the patterns in [methodology.md](methodology.md). The bucket determines the *shape* of the Glaze definition (root vs dependent, `mode: 'auto'` vs `'fixed'`, contrast-floor vs absolute lightness), not the value.
+Each bucket maps cleanly to one of the patterns in [methodology.md](methodology.md). The bucket determines the *shape* of the Glaze definition (root vs dependent, `mode: 'auto'` vs `'fixed'`, contrast-floor vs absolute tone), not the value.
 
 ### 2. Reproduce the existing values
 
-Pick a Glaze definition shape that lands the new color *close to* the legacy hex in light mode. The methodology doc explains the shape per bucket; the API doc covers the levers (`lightness`, `saturation`, `contrast`, `mode`, `hue`).
+Pick a Glaze definition shape that lands the new color *close to* the legacy hex in light mode. The methodology doc explains the shape per bucket; the API doc covers the levers (`tone`, `saturation`, `contrast`, `mode`, `hue`).
 
 Two tactics that make matching easier:
 
-- **Anchor strong text at the edge** instead of solving for `'AAA'`. The contrast solver stops at the floor (cr=7), which usually leaves text noticeably softer than a legacy hex like `#1a1a1a`. An absolute `lightness: 2` (or wherever the legacy token sits in OKHSL) preserves the look.
+- **Anchor strong text at the edge** instead of solving for `'AAA'`. The contrast solver stops at the floor (cr=7), which usually leaves text noticeably softer than a legacy hex like `#1a1a1a`. An absolute `tone: 2` (or wherever the legacy token sits) preserves the look.
 - **Use numeric `contrast` ratios** for soft / accent / disabled tokens. Presets give you the WCAG floor and nothing more — for matching a designed palette you usually want a specific perceived weight, not the floor.
 
 ### 3. Keep the old token names
@@ -196,9 +333,9 @@ Use a custom `prefix` map (and theme aliases if needed) so the names your compon
 // New: define them in Glaze, map the prefix so they emit unchanged.
 
 defaultTheme.colors({
-  dark:      { base: 'surface', lightness: 2,  saturation: 0.475 },
-  'dark-02': { base: 'surface', lightness: '-1', saturation: 0.375, contrast: [9, 11]   },
-  'dark-03': { base: 'surface', lightness: '-1', saturation: 0.24,  contrast: [4.5, 5.5] },
+  dark:      { base: 'surface', tone: 2,  saturation: 0.475 },
+  'dark-02': { base: 'surface', tone: '-1', saturation: 0.375, contrast: [9, 11]   },
+  'dark-03': { base: 'surface', tone: '-1', saturation: 0.24,  contrast: [4.5, 5.5] },
 });
 
 palette.tasty({ prefix: { default: '' } });
@@ -211,8 +348,8 @@ Once consumers are off the legacy names, rename the Glaze tokens to match your c
 
 Glaze gives you light/dark/HC for free, but only the light mode is matched against the legacy palette. Before promoting the migration:
 
-- Spot-check every surface, text, accent, and disabled pair in dark mode. The Möbius dark inversion plus per-color `mode` choices may produce results that *look right* in light but feel off in dark (typical fix: switch a brand color to `mode: 'fixed'`, or anchor a foreground to `surface` instead of the brand fill — see [methodology.md](methodology.md)).
-- If the legacy system had no high-contrast mode, audit the HC variants Glaze emits. Anywhere the resolved cr is too low or the color blows out, add an HC pair (`lightness: ['-7', '-20']`, `contrast: [4.5, 7]`, etc.).
+- Spot-check every surface, text, accent, and disabled pair in dark mode. The tone inversion plus per-color `mode` choices may produce results that *look right* in light but feel off in dark (typical fix: switch a brand color to `mode: 'fixed'`, or anchor a foreground to `surface` instead of the brand fill — see [methodology.md](methodology.md)).
+- If the legacy system had no high-contrast mode, audit the HC variants Glaze emits. Anywhere the resolved cr is too low or the color blows out, add an HC pair (`tone: ['-7', '-20']`, `contrast: [4.5, 7]`, etc.).
 - Run real screens, not just the token grid. The interaction of multiple Glaze tokens against each other (text on chip, hover bg vs. fill, disabled label on disabled chip) is where mismatches show up.
 
 ### 5. Trim what `extend()` doesn't need
@@ -224,9 +361,10 @@ After migration, mark every default-only token (borders, shadows, disabled chip,
 | Symptom | Cause | Fix |
 |---|---|---|
 | Disabled state stops looking disabled in dark mode. | Alpha-tinted overlay on `surface-text` (which inverts), giving asymmetric perceived contrast. | Replace with a `mode: 'auto'` color anchored to `surface` with a numeric `contrast` (see [methodology.md → Disabled chip](methodology.md#disabled-chip-contrast-driven-for-scheme-symmetry)). |
-| Brand color flips to its complement in dark mode. | Default `mode: 'auto'` runs the Möbius inversion. | Set `mode: 'fixed'` so the lightness is mapped (not inverted). |
+| Brand color flips to its complement in dark mode. | Default `mode: 'auto'` inverts the tone. | Set `mode: 'fixed'` so the tone is remapped (not inverted). |
 | Brand text washes out against the dark surface. | Foreground was anchored to `accent-surface` (the brand fill), so contrast was only enforced against that fill — not the actual surface. | Anchor `accent-text` etc. to `surface` with `mode: 'auto'`. |
-| Tokens look right in light, broken in HC. | The HC pass bypasses the lightness window — solver runs over the full `[0, 100]` range. | Add explicit `[normal, hc]` pairs to `lightness` / `contrast` for the affected tokens. |
+| Tokens look right in light, broken in HC. | The HC pass bypasses the tone window — solver runs over the full `[0, 100]` range. | Add explicit `[normal, hc]` pairs to `tone` / `contrast` for the affected tokens. |
+| A relative `tone` like `'+48'` lands on the *wrong* (darker) side of its base. | Overshooting offsets now mirror to the other side of the base by default (`autoFlip` inherits `autoFlip`). | Set `autoFlip: false` on the color to clamp to the boundary instead, or use `tone: 'max'`/`'min'` to force the extreme. |
 | `palette.tokens()` emits unexpected unprefixed names. | A `primary` was set on the palette (or per-call) and is duplicating the theme's tokens without prefix. | Pass `primary: false` to disable for that export, or rename `glaze.palette(themes, { primary })`. |
 | `console.warn: token "foo" collides with theme "bar"`. | Two themes resolved to the same output key under your prefix config. | Adjust the prefix map so each token is unique, or accept the first-write-wins behavior. |
 | `console.warn: color "X" cannot meet contrast`. | The requested contrast target is physically unreachable for the color's hue/saturation against its base. | Lower the floor, change the base, or accept the closest passing variant. Use the `name` override on standalone colors to make the warning identifiable. |

package/docs/glaze/okhst.md

@@ -0,0 +1,308 @@
+# OKHST — the contrast-uniform tone space
+
+This is the canonical specification for the color model Glaze uses internally
+and accepts as input. It is the source of truth that [api.md](api.md),
+[methodology.md](methodology.md), and [migration.md](migration.md) reference.
+
+## What OKHST is
+
+**OKHST is OKHSL with its lightness axis replaced by a contrast-uniform _tone_
+axis.** It shares OKHSL's hue (`h`, 0–360) and saturation (`s`, 0–1) verbatim;
+only the third coordinate changes:
+
+| Space | Coords | Third axis |
+|---|---|---|
+| OKHSL | `h, s, l` | `l` — perceptual lightness (toe-adjusted OKLab L) |
+| OKHST | `h, s, t` | `t` — tone: a normalized log of luminance |
+
+OKHST exists for one reason: in OKHSL, _equal lightness steps_ are perceptually
+even but produce _uneven contrast_ (the ratio between adjacent steps drifts).
+OKHST's tone axis is shaped so that _equal tone steps_ produce _even WCAG
+contrast_ between steps. Authoring ramps in tone gives you contrast-even ladders
+for free, and dark-mode inversion becomes a single subtraction (`100 - t`)
+instead of a fitted curve.
+
+OKHST is an **input space only**. It is parseable as an `okhst(H S% T%)` string
+and an `{ h, s, t }` object, but it is **never emitted** — there is no CSS
+`okhst()` function, so output formats stay `okhsl | rgb | hsl | oklch`.
+
+## The tone transfer
+
+For a gray (s = 0) at OKHSL lightness `l`, luminance is closed-form through the
+OKHSL toe and OKLab cube:
+
+```
+Y = toeInv(l) ** 3          // OKLab L = toeInv(l); luminance ≈ L³
+l = toe(cbrt(Y))            // exact inverse
+```
+
+(`toe` / `toeInv` already exist in [okhsl-color-math.ts](../src/okhsl-color-math.ts).)
+
+Tone is a normalized natural-log of `Y`, offset by a small `eps`:
+
+```
+toTone(Y, eps)   = (ln(Y + eps) - ln(eps)) / (ln(1 + eps) - ln(eps)) * 100
+fromTone(T, eps) = exp( (T / 100) * (ln(1 + eps) - ln(eps)) + ln(eps) ) - eps
+```
+
+`toTone` and `fromTone` are exact analytic inverses, so a round-trip is lossless
+to ~1e-15. `toTone(0) = 0` and `toTone(1) = 100` for any `eps`, so tone is always
+a clean 0–100 scale.
+
+### Why `eps ≈ 0.05` makes tone contrast-uniform
+
+WCAG 2 contrast is `(Y_hi + 0.05) / (Y_lo + 0.05)`. Pick `eps = 0.05` and the
+tone transfer becomes a normalized `ln(Y + 0.05)`. Two colors that differ by a
+fixed tone delta `ΔT` then differ by a fixed _ratio_ of `(Y + 0.05)` — i.e. a
+fixed WCAG contrast ratio — regardless of where on the scale they sit:
+
+```
+cr(T2, T1) = (Y2 + 0.05) / (Y1 + 0.05)
+           = exp( (T2 - T1)/100 * (ln(1.05) - ln(0.05)) )
+```
+
+Empirically (gray, `eps = 0.05`), each `+10` tone multiplies contrast-vs-black by
+a near-constant factor:
+
+| tone | cr vs black |
+|---|---|
+| 10 | 1.36 |
+| 30 | 2.49 |
+| 50 | 4.58 |
+| 70 | 8.43 |
+| 90 | 15.49 |
+| 100 | 21.00 |
+
+So a tone ramp `[20, 40, 60, 80]` has _constant_ contrast between adjacent
+stops. That is the whole point.
+
+## Core invariant: `T → L` is independent of `H` and `S`
+
+`okhstToOkhsl({ h, s, t })` passes `h` and `s` through unchanged and sets
+`l = fromTone(t)`. `fromTone` is a pure function of `(t, eps)`; OKHSL's
+`l → OKLab L = toeInv(l)` map has no hue/saturation term — `h`/`s` enter only
+the chroma/cusp math. Therefore:
+
+> **A given tone yields the same OKHSL lightness for every hue and saturation.**
+
+OKHST inherits OKHSL's gamut and reversibility exactly: every `(h, s, t)` is
+realizable and round-trips.
+
+**This uniformity is in lightness, not luminance.** Equal tone gives equal
+OKHSL `L` for all `h`/`s`, but equal _WCAG/APCA contrast_ only for grays.
+A saturated yellow and a saturated blue at the same tone share a lightness yet
+differ in real luminance `Y`. This chromatic drift is the one honest
+approximation in the design — see [§10 Verification](#verification-apca--wcag-drift).
+The single deliberate exception to the invariant is the optional `contrast`
+solver, which shifts a stop's tone per `h`/`s` to meet a luminance-based floor.
+
+## Reference eps vs per-mode eps
+
+Two distinct roles, kept separate on purpose:
+
+- **Reference eps (`0.05`, fixed).** Defines the OKHST _color space_ and the
+  canonical stored tone. `okhst()` input, `{ h, s, t }` input, the internal
+  `ResolvedColorVariant.t`, relative `tone` offsets, and the contrast solver all
+  use the reference eps. This is what makes OKHST stable and scheme-independent.
+- **Per-mode eps (`lightTone.eps`, `darkTone.eps`).** A _rendering_ curvature
+  knob per scheme. It only affects how authored tone is mapped through a scheme
+  window before the result is stored. Defaults to the reference value, so by
+  default the two coincide and there is nothing to reconcile.
+
+When a mode's eps differs from the reference, `mapToneForScheme` maps using the
+mode eps to land a final OKHSL `l`, then stores `toTone(l, REF_EPS)` so offsets
+and contrast stay comparable across schemes.
+
+## Scheme pipeline (no Möbius)
+
+```
+author tone T (0–100)
+  → mode branch:
+      auto + dark : invert  T' = 100 - T
+      fixed / light: keep    T' = T
+      static      : identity, skip window
+  → window remap: T' into the scheme window [lo, hi] (tone units)
+  → render curvature (mode eps) → OKHSL l
+  → store canonical tone t = toTone(l, REF_EPS)        // variant {h, s, t, alpha}
+  → (edge only) fromTone(t, REF_EPS) → l → sRGB / luminance
+  optional: contrast floor (wcag/apca) searches in tone, overriding t
+```
+
+High-contrast is **not** a separate curve. It reuses the same math with the
+window forced to the full range `[0, 100]`, keeping the mode's eps. There is no
+`darkCurve` and no separate HC curve.
+
+`fixed` mode remaps into the window but does **not** invert (brand colors stay
+recognizable). `static` skips the window entirely (identity) so the same tone
+renders in every scheme.
+
+## Calibrated constants (defaults)
+
+Chosen as clean defaults that keep light mode close to the previous pipeline
+while the axis stays contrast-uniform (the old Möbius curve was intentionally
+non-uniform, which is what we are replacing). The light floor sits at `lo = 10`
+and the dark floor at `lo = 15`, so neither scheme bottoms out darker than the
+legacy pipeline produced. `eps` is pinned to the reference value `0.05` so the
+tone axis stays WCAG-uniform.
+
+| Config | lo | hi | eps |
+|---|---|---|---|
+| `lightTone` | 10 | 100 | 0.05 |
+| `darkTone` | 15 | 95 | 0.05 |
+
+A window is authored as `[lo, hi]` (reference eps — the common form),
+`{ lo, hi, eps }` (advanced: explicit per-mode render curvature), or `false`
+to disable clamping. `false` is the full range `[0, 100]` at the reference eps —
+it removes the **boundaries**, not the tone curve.
+
+Other defaults: `darkDesaturation = 0.1` (unchanged),
+`autoFlip = true`.
+
+Reference: `REF_EPS = 0.05`.
+
+## Contrast metric (unified)
+
+`contrast` is a single prop with a pluggable metric:
+
+```ts
+type ContrastSpec =
+  | number                 // bare WCAG ratio
+  | ContrastPreset         // 'AA' | 'AAA' | 'AA-large' | 'AAA-large' (WCAG)
+  | { wcag: HCPair<number | ContrastPreset> }
+  | { apca: HCPair<number | ApcaPreset> };
+
+contrast?: HCPair<ContrastSpec>;
+```
+
+A bare number or preset means WCAG. The `[normal, highContrast]` pair may live at
+the outer level (`[4.5, 7]`, `[{ wcag: 4.5 }, { wcag: 7 }]`) **or** inside the
+metric (`{ wcag: [4.5, 7] }`, `{ apca: [45, 60] }`, `{ apca: ['content', 'body'] }`). `resolveContrastForMode`
+peels the outer pair by mode, then the inner metric pair by the same mode, then
+resolves presets, returning `{ metric, target }`.
+
+The solver searches in **tone** (contrast-uniform → fast convergence and a
+closed-form WCAG seed). For WCAG, the seed is the tone whose gray luminance hits
+`Y = R·(Y_base + 0.05) − 0.05`; chromatic drift is then refined by binary search.
+For APCA, it binary-searches tone against the APCA Lc target.
+
+### APCA
+
+`apcaContrast(yText, yBg)` implements SAPC/APCA Lc (soft-clamp of low luminances
+plus the polarity exponents for normal vs reverse contrast), returning a signed
+Lc whose magnitude the solver compares against the target. Its inputs are APCA
+*screen* luminances `Ys = 0.2126·R^2.4 + 0.7152·G^2.4 + 0.0722·B^2.4` over the
+gamma-encoded channels (`apcaLuminanceFromLinearRgb`), **not** WCAG relative
+luminance — the soft-clamp constants are calibrated against `Ys`, so the solver
+feeds it the matching basis. This is a faithful-but-simplified APCA (it omits
+the spatial/font-size lookup that maps Lc to a usable text size).
+
+#### Polarity (roles)
+
+APCA is **asymmetric**: `|apcaContrast(a, b)| ≠ |apcaContrast(b, a)|`, because
+the normal-polarity exponents (dark text on light bg) differ from the
+reverse-polarity exponents (light text on dark bg). Glaze picks the argument
+order from each color's semantic **role** against its base:
+
+| Role      | Polarity | Argument order                 | Aliases (name inference)                    |
+| --------- | -------- | ------------------------------ | ------------------------------------------- |
+| `text`    | `fg`     | `apcaContrast(candidate, base)`| `text`, `fg`, `foreground`, `content`, `ink`, `label`, `stroke` |
+| `border`  | `fg`     | `apcaContrast(candidate, base)`| `border`, `divider`, `outline`, `separator`, `hairline`, `rule` |
+| `surface` | `bg`     | `apcaContrast(base, candidate)`| `surface`, `bg`, `background`, `fill`, `canvas`, `paper`, `layer` |
+
+A color's role is resolved per the chain: explicit `role` → inferred from the
+color name (last recognized token wins, so `button-text` → `text`,
+`input-bg` → `surface`) → the opposite of the base's role → `'text'` (foreground)
+default. Name inference is on by default (`config.inferRole: true`) and can be
+disabled. WCAG is symmetric, so role never changes WCAG results — it only fixes
+APCA argument order.
+
+#### APCA presets
+
+APCA targets may be a raw Lc number or a named preset (APCA Bronze Simple Mode
+conformance levels), independent of role:
+
+```ts
+type ApcaPreset = 'preferred' | 'body' | 'content' | 'large' | 'non-text' | 'min';
+```
+
+| Preset        | Lc  | Use case                                             |
+| ------------- | --- | ---------------------------------------------------- |
+| `'preferred'` | 90  | Preferred body / column text                         |
+| `'body'`      | 75  | Minimum body / column text                           |
+| `'content'`   | 60  | Readable non-body content (~WCAG AA 4.5:1)           |
+| `'large'`     | 45  | Large/bold headlines; fine icons/outlines (~3:1)     |
+| `'non-text'`  | 30  | Solid icons/controls; placeholder/disabled text      |
+| `'min'`       | 15  | Dividers/decorative; APCA "point of invisibility"    |
+
+```ts
+contrast: { apca: 'content' }          // Lc 60
+contrast: { apca: ['content', 'body'] } // HC pair: 60 normal, 75 high-contrast
+```
+
+#### Enhanced Level (high-contrast auto-boost)
+
+When an APCA target is given as a **bare scalar** (no `[normal, hc]` pair at
+either the outer `contrast` level or the inner `apca` level), Glaze
+automatically applies the APCA-W3 "Enhanced Level" delta — **+15 Lc** — in
+high-contrast mode, analogous to WCAG's AAA-over-AA step. This is on by
+default; provide an explicit HC value via either pair to override it.
+
+```ts
+contrast: { apca: 60 }          // Lc 60 normal, Lc 75 high-contrast (auto)
+contrast: { apca: 'content' }   // Lc 60 normal, Lc 75 high-contrast (auto)
+contrast: { apca: [60, 90] }    // Lc 60 normal, Lc 90 high-contrast (explicit)
+contrast: [{ apca: 60 }, { apca: 90 }] // outer pair: explicit HC, no boost
+contrast: { apca: 'preferred' } // Lc 90 normal, Lc 105 high-contrast (auto)
+contrast: { apca: 100 }         // Lc 100 normal, Lc 106 high-contrast (clamped)
+```
+
+The enhanced target is clamped to `APCA_MAX_LC` (106).
+
+> **Large-text glare caveat.** APCA-W3 also defines Lc 90 as a *maximum* for
+> very large/bold text (>36px bold) and large areas of color, to prevent
+> excessive glare. The +15 HC boost can therefore push a high baseline (e.g.
+> `preferred` Lc 90 → 105) past that glare ceiling. This is intentional for
+> small/standard text in HC (low-vision readability trumps glare, and small
+> fonts have no APCA maximum), but if your HC tokens serve large/bold text,
+> pass an explicit HC pair (`{ apca: [90, 90] }`) to hold the glare ceiling.
+> Glaze does not model font size, so it can't enforce the large-text cap
+> automatically.
+
+#### WCAG HC auto-promotion
+
+A bare WCAG preset (no `[normal, hc]` pair at either the outer `contrast` or
+inner `wcag` level) is automatically promoted to its spec-defined "Enhanced"
+successor in high-contrast mode — WCAG SC 1.4.3 (Minimum) → SC 1.4.6
+(Enhanced), the direct analog of APCA's Enhanced Level:
+
+```ts
+contrast: 'AA'         // 4.5 normal, 7 high-contrast (auto -> AAA)
+contrast: 'AA-large'   // 3 normal, 4.5 high-contrast (auto -> AAA-large)
+contrast: 'AAA'        // 7 both modes (top tier, unchanged)
+contrast: 'AAA-large'  // 4.5 both modes (top tier, unchanged)
+contrast: 5.5          // 5.5 both modes (bare number, no successor tier)
+contrast: { wcag: ['AA', 'AA'] } // 4.5 both modes (explicit HC, no promotion)
+```
+
+`AAA` and `AAA-large` are already the top WCAG tier and are left unchanged; bare
+numeric targets have no defined successor tier and are also left unchanged. An
+explicit HC value via either pair overrides and skips the promotion.
+
+## Verification (APCA / WCAG drift)
+
+Because chromatic swatches inherit gray's tone-derived lightness but drift in
+real luminance, a color resolved with a `base` + `contrast` may land slightly
+under the contrast its tone implies. After resolving such a color, Glaze
+computes the actual WCAG ratio and APCA Lc of the chromatic result against its
+base and emits a deduped `console.warn` when it drifts below the gray-tone
+expectation. This is advisory: it surfaces the one approximation rather than
+hiding it. The dedupe cache is the existing 256-entry cache in
+[warnings.ts](../src/warnings.ts).
+
+## Migration from `lightness`
+
+`lightness` (OKHSL `l`, 0–100) is replaced by `tone` (0–100). They are **not**
+the same number — tone is the contrast-uniform reparameterization. To convert an
+old absolute `lightness: L` to the equivalent `tone`, use
+`toTone(L/100, 0.05)`. See [migration.md](migration.md) for the full guide and
+a conversion table.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-d8e2a5f",
+  "version": "0.0.0-canary-d03ae24",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -78,8 +78,8 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/glaze": "0.13.0",
-    "@tenphi/tasty": "2.8.0",
+    "@tenphi/glaze": "0.18.0",
+    "@tenphi/tasty": "2.9.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -163,7 +163,7 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=24.0.0",
+    "node": ">=22.0.0",
     "pnpm": "^10.0.0"
   }
 }