@cube-dev/ui-kit 0.0.0-canary-8ff3280 → 0.0.0-canary-0480683

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0480683 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-8ff3280";
+const VERSION = "0.0.0-canary-0480683";
 const TASTY_VERSION = "3.0.2";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/glaze/api.md

@@ -1896,7 +1896,7 @@ import {
 | Function                              | Description                                                              |
 | ------------------------------------- | ------------------------------------------------------------------------ |
 | `okhslToLinearSrgb(h, s, l)`          | OKHSL (h: 0–360, s/l: 0–1) → linear sRGB tuple.                          |
-| `okhslToSrgb(h, s, l)`                | OKHSL → gamma-encoded sRGB tuple (0–1 per channel).                      |
+| `okhslToSrgb(h, s, l)`                | OKHSL (h: 0–360, s/l: 0–1) → gamma-encoded sRGB tuple (0–1 per channel). |
 | `okhslToOklab([h, s, l])`             | OKHSL → OKLab `[L, a, b]`.                                               |
 | `oklabToOkhsl([L, a, b])`             | OKLab → OKHSL.                                                           |
 | `srgbToOkhsl([r, g, b])`              | Gamma sRGB (0–1) → OKHSL.                                                |
@@ -1909,15 +1909,44 @@ import {
 
 ### Format writers
 
+Every writer takes `h` on 0–360 and `s` / `l` / `t` on **0–1** — the scale every
+conversion above *returns*, and the scale `resolve()` stores in a
+`ResolvedColorVariant`. The percentages are an output detail: the writers scale
+by 100 themselves where the CSS syntax asks for one. (The one thing on a
+different scale is the pair of tone transfers below, `toTone` / `fromTone`,
+which speak the 0–100 tone axis the authoring API takes.)
+
 ```ts
-import { formatOkhsl, formatRgb, formatHsl, formatOklch } from '@tenphi/glaze';
+import {
+  formatOkhsl,
+  formatOkhst,
+  formatRgb,
+  formatHsl,
+  formatOklch,
+} from '@tenphi/glaze';
 
-formatOkhsl(280, 60, 95); // 'okhsl(280 60% 95%)'
-formatRgb(280, 60, 95); // 'rgb(244 240 250)'
-formatHsl(280, 60, 95); // 'hsl(280 60% 95%)'
-formatOklch(280, 60, 95); // 'oklch(0.95 ... 280)'
+formatOkhsl(280, 0.6, 0.95); // 'okhsl(280 60% 95%)'
+formatOkhst(280, 0.6, 0.95); // 'okhst(280 60% 95%)'
+formatRgb(280, 0.6, 0.95); // 'rgb(238.45 239.95 251.1)'
+formatHsl(280, 0.6, 0.95); // 'hsl(232.92 61.87% 95.99%)'
+formatOklch(280, 0.6, 0.95); // 'oklch(0.9571 0.015 280)'
 ```
 
+So a producer composes with a writer directly, with nothing to rescale in
+between:
+
+```ts
+const v = glaze.color('#7A4DBF').resolve().light;
+const { h, s, l } = variantToOkhsl(v);
+
+formatOkhst(v.h, v.s, v.t); // 'okhst(298.52 70.41% 45.02%)'
+formatOkhsl(h, s, l); // 'okhsl(298.52 70.41% 45.27%)'
+formatRgb(h, s, l); // 'rgb(122 77 191)'
+```
+
+A value above 1 can only be pre-2.0 percentage-scale input, so the writers
+`console.warn` about it once per writer rather than emit a wrong color quietly.
+
 To attach an alpha component, use `glaze.format(variant, format)` on a `ResolvedColorVariant` (which carries the `alpha` channel) instead of these raw writers.
 
 ### OKHST tone utilities
@@ -1937,12 +1966,12 @@ import {
 
 | Function                                    | Description                                                               |
 | ------------------------------------------- | ------------------------------------------------------------------------- |
-| `toTone(l, eps?)`                           | OKHSL lightness (0–1) → tone (0–100). Defaults to `REF_EPS`.              |
-| `fromTone(t, eps?)`                         | Tone (0–100) → OKHSL lightness (0–1). Inverse of `toTone`.                |
+| `toTone(l, eps?)`                           | OKHSL lightness (0–1) → tone (**0–100**, the authoring scale — divide by 100 for `formatOkhst`). Defaults to `REF_EPS`. |
+| `fromTone(t, eps?)`                         | Tone (**0–100**) → OKHSL lightness (0–1). Inverse of `toTone`.            |
 | `toneFromY(y, eps?)` / `yFromTone(t, eps?)` | Same transfer in luminance space (0–1).                                   |
 | `okhstToOkhsl({ h, s, t })`                 | OKHST → OKHSL (`{ h, s, l }`).                                            |
 | `okhslToOkhst({ h, s, l })`                 | OKHSL → OKHST (`{ h, s, t }`).                                            |
-| `variantToOkhsl(variant)`                   | `ResolvedColorVariant` (stores `t`) → `{ h, s, l, alpha }` for rendering. |
+| `variantToOkhsl(variant)`                   | `ResolvedColorVariant` (stores `t`) → `{ h, s, l }` for rendering (`alpha` stays on the variant). |
 | `REF_EPS`                                   | Reference epsilon (`0.05`) for the canonical tone axis.                   |
 
 `ResolvedColorVariant` stores `{ h, s, t, alpha }` (tone, not lightness). Use

package/docs/glaze/migration.md

@@ -12,6 +12,7 @@ If you're starting from scratch, see [methodology.md](methodology.md) first —
 - [Wiring exports into the app](#wiring-exports-into-the-app)
 - [Prefix map strategies](#prefix-map-strategies)
 - [Migrating an existing color system](#migrating-from-an-existing-color-system)
+- [Upgrading Glaze](#upgrading-glaze)
 - [Common pitfalls](#common-pitfalls)
 
 ## Choosing an export
@@ -296,6 +297,40 @@ Glaze gives you light/dark/HC for free, but only the light mode is matched again
 
 After migration, mark every default-only token (borders, shadows, disabled chip, code highlighting, etc.) `inherit: false`. Colored sibling themes only need the accent + tinted-surface chain — flagging the rest cuts the emitted token set per theme dramatically.
 
+## Upgrading Glaze
+
+### 2.0 — `format*` takes 0–1
+
+The `format*` writers (`formatOkhsl`, `formatOkhst`, `formatRgb`, `formatHsl`,
+`formatOklch`) used to take `s` / `l` / `t` on a 0–100 percentage scale while
+everything that *produces* those values — `resolve()`, `variantToOkhsl`,
+`srgbToOkhsl`, `oklabToOkhsl`, `okhslToSrgb` — returns them on 0–1. Composing
+the two, which is the obvious thing to do, was off by 100x and failed silently:
+`0.7` is a legal percentage, so you got a valid CSS string naming the wrong
+(near-black) color.
+
+The writers now take the 0–1 factors, so the whole library speaks one scale.
+Drop the `* 100`:
+
+```diff
+- formatOkhsl(v.h, v.s * 100, l * 100);
++ formatOkhsl(v.h, v.s, l);
+
+- formatOkhst(v.h, v.s * 100, v.t * 100);
++ formatOkhst(v.h, v.s, v.t);
+```
+
+Nothing else moves: `h` was always 0–360, `alpha` was always 0–1, and every
+export method (`css()` / `tokens()` / `json()` / `tasty()` / `dtcg()` /
+`tailwind()` / `glaze.format()`) emits the same colors — they were compensating
+internally. Dropping the redundant `×100 ÷100` round-trip shifts float noise by
+an ULP, which shows up nowhere except the (meaningless) hue term of a
+fully-desaturated `hsl()` string.
+
+A leftover `* 100` is not silent any more: a value above 1 cannot be a factor,
+so the writers `console.warn` once per writer and you get an obviously-broken
+`7040.68%` instead of a plausible wrong color.
+
 ## Common pitfalls
 
 | Symptom                                                                        | Cause                                                                                                                                   | Fix                                                                                                                                                                                                        |
@@ -307,6 +342,7 @@ After migration, mark every default-only token (borders, shadows, disabled chip,
 | 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: formatOkhsl() got a value above 1`.                             | Pre-2.0 percentage-scale input to a `format*` writer (a leftover `* 100`).                                                              | Pass the 0–1 factors the converters return — see [2.0 — `format*` takes 0–1](#20--format-takes-01).                                                                                                        |
 | `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.                                                    |
 
 ## See also

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-8ff3280",
+  "version": "0.0.0-canary-0480683",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -92,7 +92,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/glaze": "1.5.0",
+    "@tenphi/glaze": "2.0.0",
     "@tenphi/tasty": "^3.0.2",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",