synthesisui 0.16.404 → 0.16.406

package/dist/absorb-plan.js

@@ -1,6 +1,6 @@
 import { deltaE, JND } from "./doctor/color-distance.js";
 import { familySays, nearestToken, normalizeValue, } from "./doctor/tokens.js";
-import { proposeFromTheirScale, tooCloseToPropose } from "./proposed-name.js";
+import { proposeFromTheirScale, proposeFromTheirUse, tooCloseToPropose, whyNotProposedFromUse, } from "./proposed-name.js";
 /** Onde cada tipo de valor mora na fundação. `color` é o único com dois segmentos. */
 const HOME = {
     color: "color",
@@ -109,7 +109,14 @@ function nearestOwn(theirs, literal, kind) {
  * `have` são os caminhos que a fundação já tem, para a proposta nunca sugerir sobrescrever um token
  * existente com outro valor - isso não é absorver, é repintar.
  */
-export function absorbPlan(d, theirs, have, cap = 40) {
+export function absorbPlan(d, theirs, have, cap, 
+/**
+ * A FUNÇÃO DE CADA COR NO CÓDIGO DELE, contada por `countUseByProperty` sobre os mesmos arquivos
+ * da varredura. OBRIGATÓRIO de propósito: um parâmetro opcional que dá para esquecer é a próxima
+ * ocorrência do defeito em que a tela promete o que a chamada não passou. Quem não tem a contagem
+ * passa um mapa vazio e a fonte 2 cala - explicitamente.
+ */
+uses) {
     /**
      * A REPETIÇÃO É UM FILTRO DE RUÍDO, E RUÍDO É UMA PROPRIEDADE DA ESCALA - não do valor.
      *
@@ -136,6 +143,14 @@ export function absorbPlan(d, theirs, have, cap = 40) {
         ? [...repeated, ...single]
         : repeated;
     const entries = [];
+    /**
+     * OS CAMINHOS JÁ PROPOSTOS NESTA RODADA, por qualquer fonte. Dois literais diferentes podem cair
+     * na mesma posição (`#111111` e `#121212` são ambos luminosidade 7): o primeiro da lista - o mais
+     * repetido, porque é a ordem em que ele vê a lista - leva o caminho, e o segundo fica com o
+     * motivo. Sem isto os dois saíam com `color.background.7` e o `--send` postava dois tokens para o
+     * mesmo nome.
+     */
+    const taken = new Map();
     for (const r of unnamed) {
         if (entries.length >= cap)
             break;
@@ -194,19 +209,53 @@ export function absorbPlan(d, theirs, have, cap = 40) {
          * entra - e ela devolve `null` na dúvida (ver `proposed-name.ts`).
          */
         /**
-         * UMA FONTE POR ENQUANTO - a escala dele. A segunda está especificada e NÃO entrou, e o motivo
-         * está medido: ver `proposed-name.ts`, no fim.
+         * DUAS FONTES, NESTA ORDEM (D4, dono, 08/09): a escala dele, e só onde ela cala, a FUNÇÃO que o
+         * valor exerce no código dele. Perto demais de um token dele veta as duas - ali a resposta é
+         * normalizar, não batizar. A segunda fonte só existe para cor: é a única natureza em que a
+         * propriedade escrita é uma função (`background`, `border`), e a única que a contagem lê.
+         */
+        /**
+         * E SÓ PARA COR - por dois motivos distintos, e vale dizer os dois.
+         *
+         * A fonte 1 é escala de cor: medido no `frontend-hub` real em 08/09, ela propôs
+         * `dashboard.blue.650` para `30px`, `40px` e `50px`, porque `lightness("30px")` lia um prefixo
+         * hexadecimal de "3300pp" - consertado na raiz em `color-distance.ts`, e a porta fechada aqui
+         * também. A fonte 2 para cor é ESCOPO desta parte, não natureza: `12px` 20× em `gap` também é
+         * função medida, e fica para a próxima parte. O `≈` de vizinhança para comprimento continua
+         * sendo o de `nearestOwn`.
          */
-        const proposal = theirName || tooCloseToPropose(r.literal, theirs)
+        const proposal = r.kind !== "color" || theirName || tooCloseToPropose(r.literal, theirs)
             ? null
-            : proposeFromTheirScale(r.literal, theirs);
-        const path = pathFor(r.kind, theirName) || proposal?.path || "";
+            : (proposeFromTheirScale(r.literal, theirs) ??
+                proposeFromTheirUse(r.literal, uses, theirs.rootPx, r.count));
+        const own = pathFor(r.kind, theirName);
+        /** Já existe na fundação com OUTRO valor: absorver aqui seria repintar o token deles. */
+        if (own && have.has(own))
+            continue;
+        /**
+         * COLISÃO DECLARADA, NUNCA DESCARTADA. Quando o caminho PROPOSTO já existe na fundação para
+         * outro valor, a primeira versão fazia `continue` - e a entrada sumia da lista enquanto a
+         * última linha do comando dizia "re-run and the next batch appears". Reproduzido pela revisão de
+         * DX em 08/09 em duas rodadas seguidas do `absorb`. A entrada FICA, sem caminho, e o motivo
+         * diz o que aconteceria: ele decide se é o mesmo token ou outro nome.
+         */
+        const collided = proposal !== null && have.has(proposal.path);
+        /** EMPATE NA MESMA RODADA, declarado: só um leva o caminho, e o outro diz quem levou. */
+        const rival = proposal !== null && !collided ? taken.get(proposal.path) : undefined;
+        const path = own || (collided || rival ? "" : (proposal?.path ?? ""));
+        if (proposal !== null && !own && !collided && !rival)
+            taken.set(proposal.path, { literal: r.literal, count: r.count });
         /** "≈ perto de um token seu" só interessa a quem não tem um EXATO - com o nome na mão, a dica
          *  vira ruído, e no arquivo de proposta ela vira uma segunda opção que não é opção. */
         const near = theirName ? undefined : nearestOwn(theirs, r.literal, r.kind);
-        /** Já existe na fundação com OUTRO valor: absorver aqui seria repintar o token deles. */
-        if (path && have.has(path))
-            continue;
+        /** E quando as duas fontes calam e não há vizinho, o campo em branco diz por quê. */
+        const unproposed = collided
+            ? `would be ${proposal?.path}, but you already named a different colour that way`
+            : rival
+                ? `would be ${proposal?.path}, but ${rival.literal} (${rival.count}×) takes that position this round - name one of them and the other follows`
+                : r.kind === "color" && !theirName && !proposal && !near
+                    ? whyNotProposedFromUse(r.literal, uses, theirs.rootPx, r.count)
+                    : null;
         entries.push({
             value: r.literal,
             kind: r.kind,
@@ -215,8 +264,11 @@ export function absorbPlan(d, theirs, have, cap = 40) {
             path,
             ...(theirName ? { theirName: clean(theirName) } : {}),
             /** A PROCEDÊNCIA VIAJA COM A PROPOSTA - ele julga pela origem, nunca pela palavra. */
-            ...(proposal ? { proposed: proposal.because } : {}),
+            ...(proposal && !collided && !rival
+                ? { proposed: proposal.because }
+                : {}),
             ...(near ? { near } : {}),
+            ...(unproposed ? { unproposed } : {}),
         });
     }
     return {
@@ -280,7 +332,7 @@ export function describeAbsorb(plan) {
     if (proposed.length > 0) {
         if (ready.length > 0)
             lines.push("");
-        lines.push(`${proposed.length} ${proposed.length === 1 ? "value has" : "values have"} a name PROPOSED from your own scale - approve, edit, or leave ${proposed.length === 1 ? "it" : "them"} hard-coded:`);
+        lines.push(`${proposed.length} ${proposed.length === 1 ? "value has" : "values have"} a name PROPOSED from your own vocabulary - your scale, or how you use the value - approve, edit, or leave ${proposed.length === 1 ? "it" : "them"} hard-coded:`);
         for (const e of proposed.slice(0, 8))
             lines.push(`  ${e.value.padEnd(24)} ${e.path.padEnd(28)} ${e.proposed}`);
         if (proposed.length > 8)
@@ -308,7 +360,10 @@ export function describeAbsorb(plan) {
                 : /** A proposta chega COM a procedência: ele julga pela origem, não pela palavra. */
                     e.proposed
                         ? `${e.path}  ·  ${e.proposed}`
-                        : 'path: ""'}`);
+                        : /** E o campo em branco chega com o motivo, quando a função medida o tem. */
+                            e.unproposed
+                                ? `path: ""  ·  ${e.unproposed}`
+                                : 'path: ""'}`);
         if (pending.length > 8)
             lines.push(`  (${pending.length - 8} more)`);
         /**

package/dist/commands/absorb.js

@@ -2,11 +2,12 @@ import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { dirname, join, resolve } from "node:path";
 import { absorbPlan, describeAbsorb, needingName, } from "../absorb-plan.js";
 import { readProjectConfig, readToken, resolveRegistry } from "../config.js";
-import { diagnose, scanSource } from "../doctor/scan.js";
+import { diagnose, IS_FIXTURE, scanSource, } from "../doctor/scan.js";
 import { withTheirNames } from "../doctor/their-names.js";
 import { measuredScope, scopePaths } from "../measured-scope.js";
 import { body, paint, section, snippet } from "../output.js";
 import { resolveDeps, tailwindMajor } from "../stack.js";
+import { countUseByProperty } from "../use-by-property.js";
 import { loadSystem, walkAll } from "./doctor.js";
 /**
  * `synthesisui absorb` - O SISTEMA APRENDE O DESIGN QUE O CÓDIGO JÁ TEM.
@@ -85,13 +86,22 @@ export async function absorb(opts) {
         ? installed.table
         : withTheirNames(theirs, theirs);
     const reports = [];
+    /**
+     * A FUNÇÃO DE CADA COR, contada num passe próprio sobre os MESMOS arquivos - é a segunda fonte do
+     * nome proposto (`proposed-name.ts`). Fixture e teste ficam de fora pela mesma regra do scan: as
+     * cores de um `.stories` são do exemplo, não do produto dele.
+     */
+    const uses = new Map();
     for await (const file of walkAll(roots)) {
         const source = await readFile(file, "utf8").catch(() => null);
         if (source === null)
             continue;
-        reports.push(scanSource(file.slice(root.length + 1), source, table));
+        const rel = file.slice(root.length + 1);
+        reports.push(scanSource(rel, source, table));
+        if (!IS_FIXTURE.test(rel))
+            countUseByProperty(source, uses, table.rootPx);
     }
-    const plan = absorbPlan(diagnose(reports), theirs, pathsInSystem(installed.documents), opts.cap ?? 40);
+    const plan = absorbPlan(diagnose(reports), theirs, pathsInSystem(installed.documents), opts.cap ?? 40, uses);
     console.log(section(hasSystem
         ? "What the system could absorb"
         : "Name what you wrote by hand"));

package/dist/doctor/color-distance.js

@@ -97,20 +97,34 @@ export function isNearDuplicate(a, b, threshold = JND) {
  * the two halves deciding differently what counts as a dark canvas is worse
  * than either of them being wrong.
  */
-export function lightness(hex) {
-    const h = hex.trim().replace("#", "");
-    const full = h.length === 3 || h.length === 4
+/**
+ * OS SEIS DÍGITOS DE UMA COR, OU NADA - e o "nada" é o que faltava.
+ *
+ * `lightness("30px")` devolvia 0.143: "30px" tem 4 caracteres, era expandido para "3300pp", e
+ * `parseInt("3300pp", 16)` lê o prefixo hexadecimal em vez de devolver NaN. Efeito medido no
+ * `frontend-hub` real em 08/09, pelo `absorb`: a fonte 1 propôs `dashboard.blue.650` para `30px`
+ * (espaçamento), `40px` e `50px` (raio) - "between your dashboard-blue-500 and dashboard-blue-800" -,
+ * um nome de cor sobre um comprimento. `rgb()`/`hsl()`/`oklch()` não chegam aqui: `normalizeValue`
+ * os converte para `#rrggbbaa` antes; o que chega e NÃO é cor é comprimento, tempo ou texto, e a
+ * resposta certa para eles é `null`.
+ */
+function sixDigits(hex) {
+    const h = hex.trim().replace(/^#/, "");
+    if (!/^[0-9a-f]{3,4}$|^[0-9a-f]{6}$|^[0-9a-f]{8}$/i.test(h))
+        return null;
+    return h.length === 3 || h.length === 4
         ? h
             .slice(0, 3)
             .split("")
             .map((c) => c + c)
             .join("")
         : h.slice(0, 6);
-    if (full.length !== 6)
+}
+export function lightness(hex) {
+    const full = sixDigits(hex);
+    if (full === null)
         return null;
     const n = Number.parseInt(full, 16);
-    if (Number.isNaN(n))
-        return null;
     return ((0.2126 * ((n >> 16) & 255) +
         0.7152 * ((n >> 8) & 255) +
         0.0722 * (n & 255)) /
@@ -120,19 +134,10 @@ export function lightness(hex) {
  *  chromatic, and treating it as coloured throws every off-white surface out of
  *  the neutral ladder. */
 export function chroma(hex) {
-    const h = hex.trim().replace("#", "");
-    const full = h.length === 3 || h.length === 4
-        ? h
-            .slice(0, 3)
-            .split("")
-            .map((c) => c + c)
-            .join("")
-        : h.slice(0, 6);
-    if (full.length !== 6)
+    const full = sixDigits(hex);
+    if (full === null)
         return null;
     const n = Number.parseInt(full, 16);
-    if (Number.isNaN(n))
-        return null;
     const r = (n >> 16) & 255;
     const g = (n >> 8) & 255;
     const b = n & 255;

package/dist/doctor/scan.js

@@ -54,7 +54,7 @@ const IGNORE_LINE = /^\s*(import|@import|\/\/|\*|\/\*)/;
  * 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?\([^)]*\)|oklch\([^)]*\)/g;
+export 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.
  *
@@ -386,7 +386,7 @@ const IDIOM = new Set(["0", "0px", "1px", "9999px", "100%", "50%"]);
  * Counting them accuses the author of drift they did not write, and crediting
  * them inflates a coverage number nobody can act on.
  */
-const IS_FIXTURE = /(\.(spec|test|stories)\.[a-z]+$|__tests__\/|\/fixtures?\/|(^|\/)\.storybook\/)/;
+export const IS_FIXTURE = /(\.(spec|test|stories)\.[a-z]+$|__tests__\/|\/fixtures?\/|(^|\/)\.storybook\/)/;
 export function scanSource(file, source, table) {
     if (IS_FIXTURE.test(file)) {
         const real = scanCore(file, source, table);

package/dist/proposed-name.js

@@ -1,5 +1,6 @@
 import { chroma, deltaE, lightness } from "./doctor/color-distance.js";
 import { normalizeValue } from "./doctor/tokens.js";
+import { SVG } from "./use-by-property.js";
 function stepsOf(theirs) {
     const out = [];
     for (const [name, value] of theirs.byName) {
@@ -102,20 +103,116 @@ export function tooCloseToPropose(literal, theirs, jnd = 2) {
     }
     return false;
 }
+/** O que o mapa diz deste literal: as funções, mais usada primeiro, e quantas vezes ao todo. */
+function usesOf(literal, uses, rootPx) {
+    const key = normalizeValue(literal, rootPx);
+    const per = uses.get(key);
+    if (!per)
+        return null;
+    const entries = [...per.entries()].filter(([, n]) => n > 0);
+    if (entries.length === 0)
+        return null;
+    return {
+        key,
+        /** Mais usada primeiro; no empate, a ordem alfabética - a frase não pode depender de qual
+         *  arquivo foi lido antes. */
+        per: entries.sort((a, b) => b[1] - a[1] || (a[0] < b[0] ? -1 : 1)),
+        total: entries.reduce((n, [, c]) => n + c, 0),
+    };
+}
+/**
+ * A POSIÇÃO É A LUMINOSIDADE DO PRÓPRIO VALOR, em 0..100 - estável entre rodadas, e é isso que a
+ * torna um NOME e não um rank.
+ *
+ * A primeira versão ordenava os literais da mesma função e dava `.1` ao mais escuro. Reproduzido
+ * pela revisão de DX em 08/09, rodando o `absorb` duas vezes (o fluxo que o próprio teto de 40
+ * recomenda): rodada 1, `#111111` é o mais escuro de dois, sai `color.background.1` e é enviado;
+ * rodada 2, aparece `#000000`, mais escuro - ele vira `.1`, colide com o nome já dado, e era
+ * descartado em silêncio enquanto a mensagem final dizia "re-run and the next batch appears". Um
+ * rank colide sistematicamente com qualquer valor novo mais escuro que os já nomeados.
+ *
+ * `Math.round(lightness × 100)` do próprio valor não depende de vizinho nenhum: `#111111` é `.7`
+ * hoje e em qualquer rodada, `#000000` é `.0`, `#fafafa` é `.98`. Refinamento da D3 (o espírito é
+ * "posição por luminosidade; só a posição é calculada"), decisão de implementação de 08/09,
+ * reabrível pelo dono.
+ */
+function positionOf(key) {
+    const l = lightness(key);
+    return l === null ? null : Math.round(l * 100);
+}
+/**
+ * O NOME PELA FUNÇÃO MEDIDA: `color.<propriedade-dele>.<luminosidade 0..100>`.
+ *
+ * `counted` é quantas ocorrências o SCAN viu para este literal (`r.count` no plano). Se o passe
+ * alcançou menos do que isso, parte dos usos está fora de qualquer propriedade de estilo e a
+ * contagem é parcial: `unknown` é estado, e uma contagem parcial não vira afirmação - nem "uma
+ * função só", nem "dois trabalhos".
+ *
+ * Só fala onde `theirName` e `proposeFromTheirScale` calam - a ordem é de `absorb-plan.ts` (D4).
+ * O `because` carrega a contagem E a posição, para ele julgar pela origem e não pela palavra:
+ * *"12× in background, never anywhere else · lightness 7 of 100"*.
+ */
+export function proposeFromTheirUse(literal, uses, rootPx, counted) {
+    const u = usesOf(literal, uses, rootPx);
+    if (!u || u.total < counted)
+        return null;
+    if (u.per.length !== 1 || u.total < 2)
+        return null;
+    const root = u.per[0]?.[0] ?? "";
+    if (root === SVG)
+        return null;
+    const position = positionOf(u.key);
+    if (position === null)
+        return null;
+    return {
+        path: `color.${root}.${position}`,
+        because: `${u.total}× in ${root}, never anywhere else · lightness ${position} of 100`,
+    };
+}
+const WORDS = [
+    "",
+    "one",
+    "two",
+    "three",
+    "four",
+    "five",
+    "six",
+    "seven",
+    "eight",
+    "nine",
+];
 /**
- * A SEGUNDA FONTE - ESPECIFICADA, TENTADA, E NÃO ENTREGUE. O motivo é medido, e ele é o valor deste
- * comentário.
+ * POR QUE O CAMPO FICOU EM BRANCO, em uma linha - a lacuna declarada em vez de calada.
  *
- * A especificação da PARTE 2 (07/09, por entrevista) admite derivar *"da função observada no código
- * dele - o valor aparece 12× em `background` e 0× em texto, então é proposto como uma superfície"*.
+ * *"4× background · 1× border - two jobs, no single name"* é a leitura que o cliente consegue agir
+ * sobre: ou o valor é dois tokens, ou é um e ele diz qual. A linha de motivo é verdadeira nas MESMAS
+ * condições da proposta - e quando a contagem não alcança, ela diz que não alcança.
  *
- * O QUE A TENTATIVA ENCONTROU, no mesmo dia: `scanSource` reporta UMA ocorrência por literal POR
- * LINHA. Numa linha com `background: "#7a1f1f"` e `borderColor: "#7a1f1f"`, ele devolve um achado -
- * e a contagem por propriedade opera sobre uma amostra que não é a contagem real. A proposta então
- * afirmaria *"todos os seus 2 usos são texto"* sobre um valor que também é borda.
+ * NUNCA MENTE SOZINHA: devolve `null` quando `proposeFromTheirUse` propõe para o mesmo literal, para
+ * que o guard não more só em quem chama.
  *
- * Uma afirmação falsa sobre o repositório DELE é exatamente o que esta parte existe para impedir, e
- * é a razão de a fonte 2 não estar aqui. O pré-requisito está nomeado: o scan precisa reportar cada
- * ocorrência, e não a primeira de cada literal por linha - o que muda a granularidade de tudo que
- * consome `findings`, e por isso é uma frente própria, não uma linha a mais neste arquivo.
+ * E NENHUMA COR FICA EM BRANCO CALADA. Medido no `web-subscribe` real em 08/09: de 644 cores, 55
+ * saíam sem contagem nenhuma - `let strokes = ['#26bcfd', …]`, `export const boulder = '#797979'`,
+ * `@mixin nav-divider($color: #e5e5e5)` - e o campo em branco não dizia nada. Um valor que nunca
+ * está dentro de uma propriedade de estilo não exerce função: é declarado ou calculado, não pintado,
+ * e isso é um motivo, não um silêncio. Ou a cor tem proposta, ou tem `≈`, ou tem motivo.
  */
+export function whyNotProposedFromUse(literal, uses, rootPx, counted) {
+    if (proposeFromTheirUse(literal, uses, rootPx, counted))
+        return null;
+    const u = usesOf(literal, uses, rootPx);
+    if (!u)
+        return "never inside a style property - declared or computed, not painted";
+    if (u.total < counted)
+        return `read ${u.total} of ${counted} uses - the rest sit outside a style property`;
+    if (u.per.length > 1) {
+        const jobs = WORDS[u.per.length] ?? String(u.per.length);
+        return `${u.per.map(([root, n]) => `${n}× ${root}`).join(" · ")} - ${jobs} jobs, no single name`;
+    }
+    if (u.total < 2)
+        return "seen once";
+    const root = u.per[0]?.[0] ?? "";
+    if (root === SVG)
+        return "only in svg";
+    return `${u.total}× in ${root}, but the value does not read as a colour`;
+}

package/dist/sheet-needed.js

@@ -72,6 +72,82 @@ function attributeExpressions(source) {
     }
     return out;
 }
+/**
+ * A DECLARAÇÃO DE UMA CONST QUE O ATRIBUTO USA - o salto que faltava, e a mesma regra do atributo.
+ *
+ * O QUE FICAVA DE FORA, e estava declarado no contrato com o número: a tabela de variantes mora
+ * numa const separada e chega ao atributo por VARIÁVEL. O caso real, medido no `frontend-hub`:
+ *
+ * ```
+ * const buttonVariants = cva("… rounded-[var(--radius-md)] …", { variants: { … } });
+ * …
+ * className={twUtils.cn(buttonVariants({ variant, size, className }))}
+ * ```
+ *
+ * As classes estão na declaração, não no atributo - então o leitor de 08/09, que já colhia toda
+ * string DENTRO da expressão, via `buttonVariants(...)` e não via nenhuma classe. Medido nas duas
+ * árvores: **4 + 41** declarações `cva(` e **0 + 85** `tv(`.
+ *
+ * A REGRA CONTINUA SENDO A MESMA, um salto adiante: o atributo diz quais identificadores importam,
+ * e a declaração daqueles identificadores é lida no mesmo arquivo. Nada aqui conhece `cva`, `tv` ou
+ * `cn` - o próximo cliente escreve a tabela dele num objeto pelado, e cai na mesma regra.
+ *
+ * E O ERRO CONTINUA CAINDO PARA O LADO SEGURO: uma const que não é classe - um rótulo, uma
+ * mensagem - entrega palavras que o `@theme` não declara, então elas somem na peneira final. O
+ * cabeçalho deste módulo diz que entre errar cobrando e errar calando, cobrar é o erro que a pessoa
+ * percebe.
+ */
+function declarationsBehind(source, exprs) {
+    /**
+     * TODO IDENTIFICADOR DA EXPRESSÃO, e não só os que ela CHAMA.
+     *
+     * A primeira versão pegava `nome(`, e o objeto pelado - `pick(byTone, tone)` - passa a tabela
+     * como ARGUMENTO. O que decide é o atributo mencionar o identificador; se ele é chamado ou
+     * passado é sintaxe, e sintaxe é o que muda de projeto para projeto.
+     */
+    const names = new Set();
+    for (const expr of exprs)
+        for (const m of expr.matchAll(/\b([A-Za-z_$][\w$]*)\b/g))
+            names.add(m[1]);
+    if (names.size === 0)
+        return [];
+    const out = [];
+    for (const name of names) {
+        /** `const <nome> = ` - e o valor vai até a linha que fecha no MESMO nível de indentação. */
+        const at = source.search(new RegExp(`\\b(?:const|let|var)\\s+${name}\\s*=`));
+        if (at < 0)
+            continue;
+        let depth = 0;
+        let i = source.indexOf("=", at);
+        let quote = null;
+        let started = false;
+        for (; i < source.length; i += 1) {
+            const c = source[i];
+            if (quote) {
+                if (c === "\\")
+                    i += 1;
+                else if (c === quote)
+                    quote = null;
+                continue;
+            }
+            if (c === '"' || c === "'" || c === "`")
+                quote = c;
+            else if (c === "(" || c === "{" || c === "[") {
+                depth += 1;
+                started = true;
+            }
+            else if (c === ")" || c === "}" || c === "]") {
+                depth -= 1;
+                if (started && depth <= 0)
+                    break;
+            }
+            else if (c === ";" && !started)
+                break;
+        }
+        out.push(source.slice(at, i + 1));
+    }
+    return out;
+}
 /** As classes escritas no código - `hover:animate-shimmer` conta como `animate-shimmer`. */
 function classesIn(source) {
     const out = new Set();
@@ -89,9 +165,16 @@ function classesIn(source) {
      * E TODA STRING DENTRO DA EXPRESSÃO - ver `attributeExpressions`. As três formas de escrever uma
      * string em JS/TS, porque quem escolhe a aspa é o formatador dele, não a gente.
      */
-    for (const expr of attributeExpressions(source))
-        for (const lit of expr.matchAll(/"([^"]*)"|'([^']*)'|`([^`]*)`/g))
+    const exprs = attributeExpressions(source);
+    const strings = (text) => {
+        for (const lit of text.matchAll(/"([^"]*)"|'([^']*)'|`([^`]*)`/g))
             collect(lit[1] ?? lit[2] ?? lit[3] ?? "");
+    };
+    for (const expr of exprs)
+        strings(expr);
+    /** E a declaração de quem o atributo chama - ver `declarationsBehind`. */
+    for (const decl of declarationsBehind(source, exprs))
+        strings(decl);
     return out;
 }
 /**

package/dist/use-by-property.js

@@ -0,0 +1,134 @@
+import { COLOR } from "./doctor/scan.js";
+import { normalizeValue } from "./doctor/tokens.js";
+/** A raiz que conta como função e NUNCA vira palavra: cor de ícone, não do sistema dele. */
+export const SVG = "svg";
+/**
+ * UTILIDADE TAILWIND → PROPRIEDADE CSS QUE ELA ESCREVE. A palavra é a da direita, sempre: `ring` não
+ * é propriedade CSS nenhuma - o Tailwind a compila em `box-shadow`, e é isso que o código dele pinta.
+ */
+export const TAILWIND_WRITES = {
+    bg: "background",
+    from: "background",
+    via: "background",
+    to: "background",
+    text: "color",
+    placeholder: "color",
+    border: "border",
+    divide: "border",
+    shadow: "box-shadow",
+    ring: "box-shadow",
+    "ring-offset": "box-shadow",
+    outline: "outline",
+    decoration: "text-decoration-color",
+    accent: "accent-color",
+    caret: "caret-color",
+    fill: SVG,
+    stroke: SVG,
+};
+/**
+ * `background:` · `backgroundColor:` · `"background-color":` · `fill="`
+ *
+ * O identificador não pode vir colado a `.`, `$`, `@`, `-`, letra ou dígito (`colors.dark :` num
+ * ternário não é uma propriedade), e a aspa de abertura, quando existe, tem de fechar antes do `:` -
+ * senão `"#fff" :` de um ternário viraria a âncora `fff`. O `=` só vale na forma de ATRIBUTO - colado
+ * ao nome e seguido de aspa ou `{` -, porque `const BRAND = "#0f5132"` é uma constante, não uma
+ * função. O que casa aqui ainda passa por `propertyRoot`: só o que carrega cor vira âncora.
+ */
+const PROPERTY = /(?<![\w.$@#-])(["']?)[a-zA-Z][\w-]*\1(?:\s*:|=(?=["'{]))/g;
+/**
+ * `bg-[#…]` · `hover:text-[#…]` · `border-t-[rgba(…)]` · `divide-x-[…]` - as utilidades da tabela,
+ * com o sufixo de lado que algumas aceitam.
+ */
+const UTILITY = new RegExp(`(?<![\\w-])(${Object.keys(TAILWIND_WRITES)
+    .sort((a, b) => b.length - a.length)
+    .join("|")})(?:-[trblxyse])?-\\[`, "g");
+/**
+ * A RAIZ DE UMA PROPRIEDADE CSS QUE CARREGA COR (D1) - ou `null` para o que não é uma. A palavra
+ * que ele escreveu, sem o sufixo que só diz o lado ou o dialeto: `background-color`,
+ * `backgroundColor` e `background-image` são `background`; `border-top-color` e `borderColor` são
+ * `border`. Uma chave de objeto, uma variável, uma propriedade que não pinta: `null`.
+ */
+export function propertyRoot(raw) {
+    const kebab = raw
+        .trim()
+        .replace(/^["']|["']$/g, "")
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .toLowerCase();
+    if (/^background(-|$)/.test(kebab))
+        return "background";
+    if (/^border(-|$)/.test(kebab))
+        return "border";
+    if (kebab === "color")
+        return "color";
+    if (/^outline(-|$)/.test(kebab))
+        return "outline";
+    if (kebab === "box-shadow")
+        return "box-shadow";
+    if (kebab === "text-shadow")
+        return "text-shadow";
+    if (/^(fill|stroke|stop-color|flood-color|lighting-color)$/.test(kebab))
+        return SVG;
+    if (/^(caret-color|accent-color|text-decoration-color|text-emphasis-color|column-rule-color)$/.test(kebab))
+        return kebab;
+    return null;
+}
+/** Toda âncora da linha que PINTA, com onde ela termina - a mais próxima antes do literal é a dele. */
+function anchorsOf(line) {
+    const out = [];
+    for (const m of line.matchAll(PROPERTY)) {
+        const root = propertyRoot(m[0].replace(/\s*[:=]$/, ""));
+        if (root !== null)
+            out.push({ end: m.index + m[0].length, root });
+    }
+    for (const m of line.matchAll(UTILITY)) {
+        const root = TAILWIND_WRITES[m[1] ?? ""];
+        if (root)
+            out.push({ end: m.index + m[0].length, root });
+    }
+    return out.sort((a, b) => a.end - b.end);
+}
+/** A linha FECHOU a declaração: o que vier depois não é continuação dela. */
+const ENDS_DECLARATION = /[;{}]\s*$/;
+/**
+ * Conta cada ocorrência de cor de UM arquivo, linha a linha, na função da âncora mais próxima
+ * antes dela. `box-shadow: 0 1px #000, 0 2px #fff` conta as duas em `box-shadow`; uma linha com
+ * `background` e `borderColor` do mesmo hex conta as duas funções. Acumula em `into` para que o
+ * repositório inteiro caiba num único mapa.
+ *
+ * A DECLARAÇÃO PODE CONTINUAR NA LINHA SEGUINTE - regra do CSS, não de um repositório:
+ *
+ *     box-shadow:
+ *       1px 1px 0 0 #2b2927,
+ *       2px 2px 0 0 #2b2927;
+ *
+ * Medido no `web-subscribe` real em 08/09 (`framework/style/_term.scss`): 9 ocorrências assim, sem
+ * âncora na própria linha, saíam sem função nenhuma - e o campo em branco saía calado. Quando a linha
+ * não tem âncora e a anterior não FECHOU a declaração (não termina em `;`, `}` ou `{`), a âncora da
+ * anterior vale para esta. `background: #111;` seguido de `#222` NÃO herda: o `;` fechou.
+ */
+export function countUseByProperty(source, into, rootPx) {
+    /** A âncora da declaração ainda aberta, vinda das linhas anteriores. */
+    let carried = null;
+    for (const line of source.split("\n")) {
+        const anchors = anchorsOf(line);
+        for (const m of line.matchAll(COLOR)) {
+            /** A âncora mais próxima que termina ANTES do literal - ou a herdada, se a linha não tem. */
+            let root = anchors.length === 0 ? carried : null;
+            for (const a of anchors) {
+                if (a.end > m.index)
+                    break;
+                root = a.root;
+            }
+            if (root === null)
+                continue;
+            const key = normalizeValue(m[0], rootPx);
+            const per = into.get(key) ?? new Map();
+            per.set(root, (per.get(root) ?? 0) + 1);
+            into.set(key, per);
+        }
+        if (ENDS_DECLARATION.test(line))
+            carried = null;
+        else if (anchors.length > 0)
+            carried = anchors[anchors.length - 1]?.root ?? null;
+    }
+}

package/package.json

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