synthesisui 0.16.366 → 0.16.367

package/dist/color-forms.js

@@ -130,6 +130,98 @@ function fromHsl(raw) {
         alpha: Number.isFinite(alpha) ? Math.max(0, Math.min(1, alpha)) : 1,
     };
 }
+/**
+ * `oklch(69.6% 0.17 162.48)` - E ELE ERA 42% DOS LITERAIS DE COR DE UM SISTEMA REAL.
+ *
+ * O QUE O CLIENTE GANHA: a cor que o Tailwind 4 escreve por padrão passa a ser interpretada como
+ * cor. Antes ela chegava na receita (o coletor a lê) e morria aqui - `colorForm` devolvia `null` -,
+ * então `deltaE` não a comparava, `namedByValue` não a indexava, o v2 nunca propunha agrupá-la nem
+ * nomeá-la, e nada a declarava como lacuna. Ela era invisível nos dois sentidos.
+ *
+ * MEDIDO em 03/09, nos `looks` de duas populações: 94 usos no `codelevel-ui` e 23 no
+ * `frontend-hub`, 39 valores distintos - e ZERO deles no `observed` das três populações, que é a
+ * régua de valores. É a decisão 1 do dono (21/08): *"toda forma de cor entra - hex, rgb, rgba, hsl,
+ * color-mix, oklch"*.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * O GAMUT É MAPEADO POR CHROMA, E NÃO CLAMPADO - e essa é a decisão que impede a cor errada
+ *
+ * OKLCh descreve cores que o sRGB não alcança: 25 dos 39 valores medidos caem fora. A saída barata
+ * é clampar cada canal em 0-255; a certa é a do CSS Color 4, reduzir o CHROMA mantendo o L e o H até
+ * a cor caber. As duas DISCORDAM em 22 dos 25:
+ *
+ *     oklch(69.6% 0.17 162.48)    clamp #00bc7d    chroma-map #00b981
+ *     oklch(76.9% 0.188 70.08)    clamp #fe9a00    chroma-map #f69e00
+ *
+ * `#00b981` é o emerald que o navegador pinta; `#00bc7d` é uma cor que ninguém vê. Um hex errado
+ * aqui não fica quieto: ele vira a chave que decide se duas cores são a mesma e se um token dele
+ * casa com um valor - as duas afirmações que este produto não pode errar. O laço binário custa 24
+ * iterações e só roda para quem está fora.
+ */
+function fromOklch(raw) {
+    const m = /^oklch\(([^)]*)\)$/i.exec(raw.trim());
+    if (!m)
+        return null;
+    const [body, alphaPart] = m[1].split("/");
+    const parts = body
+        .trim()
+        .split(/[\s,]+/)
+        .filter(Boolean);
+    if (parts.length < 3)
+        return null;
+    /** L aceita 0-1 e 0%-100%; C aceita o número e o percentual, cujo 100% é 0.4 por spec. */
+    const L = unit(parts[0]);
+    const C = parts[1].trim().endsWith("%")
+        ? unit(parts[1], 0.4)
+        : Number.parseFloat(parts[1]);
+    /** `none` é um ângulo ausente, e ausente é zero - com C=0 o matiz não muda nada de qualquer forma. */
+    const H = /^none$/i.test(parts[2].trim()) ? 0 : Number.parseFloat(parts[2]);
+    if (![L, C, H].every(Number.isFinite))
+        return null;
+    const linear = (chroma) => {
+        const h = (H * Math.PI) / 180;
+        const a = chroma * Math.cos(h);
+        const b = chroma * Math.sin(h);
+        const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+        const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+        const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+        const l3 = l_ ** 3;
+        const m3 = m_ ** 3;
+        const s3 = s_ ** 3;
+        return [
+            4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3,
+            -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3,
+            -0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3,
+        ];
+    };
+    /** A folga de 1e-4 é ruído de ponto flutuante, não cor fora do gamut. */
+    const fits = (c) => c.every((x) => x >= -0.0001 && x <= 1.0001);
+    let channels = linear(Math.max(0, C));
+    if (!fits(channels)) {
+        let lo = 0;
+        let hi = Math.max(0, C);
+        for (let i = 0; i < 24; i++) {
+            const mid = (lo + hi) / 2;
+            if (fits(linear(mid)))
+                lo = mid;
+            else
+                hi = mid;
+        }
+        channels = linear(lo);
+    }
+    /** sRGB transfer function - o mesmo expoente que o navegador usa. */
+    const gamma = (x) => {
+        const v = Math.max(0, Math.min(1, x));
+        return (v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055) * 255;
+    };
+    const [r, g, b] = channels.map(gamma);
+    const rawAlpha = alphaPart ?? parts[3];
+    const alpha = rawAlpha === undefined ? 1 : unit(rawAlpha);
+    return {
+        hex: `#${hex2(r)}${hex2(g)}${hex2(b)}`,
+        alpha: Number.isFinite(alpha) ? Math.max(0, Math.min(1, alpha)) : 1,
+    };
+}
 /**
  * QUALQUER FORMA -> a canônica. `null` para o que não é uma cor literal.
  *
@@ -140,7 +232,7 @@ export function colorForm(value) {
     const v = value.trim();
     if (!v || /^(transparent|currentcolor|inherit|initial|unset|none)$/i.test(v))
         return null;
-    return fromHex(v) ?? fromRgb(v) ?? fromHsl(v);
+    return fromHex(v) ?? fromRgb(v) ?? fromHsl(v) ?? fromOklch(v);
 }
 /**
  * AS CORES LITERAIS DENTRO DE UM VALOR - inclusive as de dentro de uma função de composição.
@@ -163,7 +255,7 @@ export function colorsIn(value) {
         seen.add(key);
         out.push(c);
     };
-    const rest = value.replace(/\b(?:rgba?|hsla?)\([^)]*\)/gi, (m) => (push(colorForm(m)), " "));
+    const rest = value.replace(/\b(?:rgba?|hsla?|oklch)\([^)]*\)/gi, (m) => (push(colorForm(m)), " "));
     for (const m of rest.match(/#[0-9a-f]{3,8}\b/gi) ?? [])
         push(colorForm(m));
     return out;

package/dist/doctor/scan.js

@@ -38,8 +38,23 @@ const IGNORE_LINE = /^\s*(import|@import|\/\/|\*|\/\*)/;
  * plain CSS values and Tailwind arbitrary values (`bg-[#2563eb]`).
  * `#` inside a URL fragment or an id selector is excluded by requiring a full
  * 3/6/8 digit run terminated by a non-hex character.
+ *
+ * `oklch()` ENTROU EM 03/09, e a ausência dela era a metade calada de uma lacuna maior.
+ *
+ * O QUE O CLIENTE GANHA: a cor que o Tailwind 4 escreve por padrão passa a ser contada como valor
+ * de design. Este regex alimenta TRÊS superfícies - o `observed` do censo, a lista "Values written
+ * by hand" do `doctor`, e o relatório do `hook` a cada escrita -, e as três eram cegas a ela.
+ *
+ * MEDIDO no menor caso possível, uma `@theme` com duas cores em oklch e uma em hex: o `declared`
+ * trazia as três, o `look` do componente trazia `background: oklch(...)`, e o `observed` trazia
+ * SÓ o `#ffffff` da mesma regra. Nas populações: 94 usos no `codelevel-ui`, 23 no `frontend-hub`,
+ * e zero no `observed` das três.
+ *
+ * Ler oklch aqui e não no motor de cor - ou o contrário - não entrega nada: o valor precisa ser
+ * VISTO pelo scanner e INTERPRETADO por `colorForm` para chegar a uma comparação. As duas metades
+ * entraram na mesma mudança porque meia jornada não é meio valor.
  */
-const COLOR = /#[0-9a-fA-F]{8}\b|#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b|rgba?\([^)]*\)|hsla?\([^)]*\)/g;
+const COLOR = /#[0-9a-fA-F]{8}\b|#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\)/g;
 /**
  * THE QUOTE THAT MADE HALF THE DRIFT INVISIBLE.
  *

package/dist/install-marks.js

@@ -235,7 +235,14 @@ export const MATERIALISER_SINCE = "0.16.362";
  * "não lido" sobre um valor que o de hoje resolve - e o número é o que a pessoa lê para decidir
  * se adotou. O `!` de important (0.16.306) já tinha mudado a mesma contagem.
  */
-export const CHECKER_SINCE = "0.16.308";
+/**
+ * 0.16.308 -> 0.16.367 em 03/09: o hook passa a ver `oklch()`. O regex de cor do scanner era cego à
+ * forma, então um agente que escrevia `oklch(69.6% 0.17 162.48)` recebia SILÊNCIO mesmo com o
+ * `--color-mint-500` do próprio repositório nomeando aquele valor. Agora recebe a linha de sempre:
+ * `line 12  oklch(...) -> --color-mint-500`. Um hook pinado antes desta versão aconselha OUTRA
+ * coisa - nada -, que é a régua desta marca.
+ */
+export const CHECKER_SINCE = "0.16.367";
 /**
  * A ÚLTIMA VERSÃO EM QUE OS LEITORES PASSARAM A PRODUZIR UM CENSO DIFERENTE.
  *
@@ -651,7 +658,14 @@ export const CHECKER_SINCE = "0.16.308";
  * QUEM NÃO É AFETADO: quem tem menos de 4 096 formas em todo grupo - `web-onboarding` já chegava
  * com 39 de 39. O `sync` daquele repositório não muda um byte.
  */
-export const READER_SINCE = "0.16.356";
+/**
+ * 0.16.366 -> 0.16.367 em 03/09: `oklch()` entra na leitura de cor. O regex do scanner passou a ver
+ * a forma (era cega no `observed`, no `doctor` e no `hook`) e `colorForm` passou a interpretá-la,
+ * mapeando o gamut por chroma em vez de clampar canal. Medido nos `looks`: 94 usos no
+ * `codelevel-ui` e 23 no `frontend-hub`, e ZERO no `observed` das três populações. Um censo tirado
+ * antes disto não tem aqueles valores na régua, e só um `sync` os traz.
+ */
+export const READER_SINCE = "0.16.367";
 /**
  * O QUE ESTÁ INSTALADO AQUI FICOU PARA TRÁS - e as DUAS condições que fazem isso ser verdade.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.366",
+  "version": "0.16.367",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {