synthesisui 0.16.406 → 0.16.407

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, proposeFromTheirUse, tooCloseToPropose, whyNotProposedFromUse, } from "./proposed-name.js";
+import { proposeFromTheirScale, proposeFromTheirUse, proposeFromTheirValue, tooCloseToPropose, whyNotProposedFromUse, whyNotProposedFromValue, } from "./proposed-name.js";
 /** Onde cada tipo de valor mora na fundação. `color` é o único com dois segmentos. */
 const HOME = {
     color: "color",
@@ -116,7 +116,13 @@ export function absorbPlan(d, theirs, have, cap,
  * 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) {
+uses, 
+/**
+ * A RAIZ MEDIDA no projeto dele, com a ambiguidade - e OBRIGATÓRIA pelo mesmo motivo que `uses`:
+ * `theirs.rootPx` carrega o número e perde o "não sei", e é o "não sei" que impede a proposta de
+ * afirmar `spacing.32` sobre um `2rem` de um projeto com duas raízes. Ver `unconvertible`.
+ */
+root) {
     /**
      * A REPETIÇÃO É UM FILTRO DE RUÍDO, E RUÍDO É UMA PROPRIEDADE DA ESCALA - não do valor.
      *
@@ -220,14 +226,27 @@ uses) {
          * 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`.
+         * também. A fonte 2 (a FUNÇÃO) é só para cor porque a medição de 08/09 mostrou que a função não
+         * separa espaçamento (`8px` é 409× padding e 303× margin no `web-subscribe`): comprimento é
+         * proposto pelo próprio VALOR, logo abaixo. O `≈` de vizinhança continua sendo o de `nearestOwn`.
          */
-        const proposal = r.kind !== "color" || theirName || tooCloseToPropose(r.literal, theirs)
+        const colour = r.kind !== "color" || theirName || tooCloseToPropose(r.literal, theirs)
             ? null
             : (proposeFromTheirScale(r.literal, theirs) ??
                 proposeFromTheirUse(r.literal, uses, theirs.rootPx, 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);
+        /**
+         * ESPAÇO E RAIO: A TERCEIRA FONTE, e a ordem é a D5 (lead, 08/09) - nome dele > `≈` um token
+         * dele > o próprio valor. O `≈` vem ANTES da proposta porque um `15px` a 1px do `--spacing-md`
+         * dele é a mesma decisão escrita duas vezes, e propor `spacing.15` ali empurraria para BATIZAR
+         * o que a leitura já diz para NORMALIZAR. Ver `proposeFromTheirValue`.
+         */
+        const length = (r.kind === "spacing" || r.kind === "radius") && !theirName && !near
+            ? proposeFromTheirValue(r.literal, r.kind, uses, root, r.count)
+            : null;
+        const proposal = colour ?? length;
         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))
@@ -245,17 +264,24 @@ uses) {
         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);
-        /** E quando as duas fontes calam e não há vizinho, o campo em branco diz por quê. */
+        /**
+         * E QUANDO AS FONTES CALAM E NÃO HÁ VIZINHO, O CAMPO EM BRANCO DIZ POR QUÊ - em toda natureza.
+         * Cor: a função medida. Espaço e raio: a unidade, o degrau, o zero, o negativo. Motion: a
+         * contagem, e que duração não é proposta ainda. E o que nem chegou ao passe: o motivo genérico.
+         * Nenhuma linha em branco calada é a promessa da `INV-VOC-08`, estendida às outras naturezas
+         * em 08/09.
+         */
+        const silent = !theirName && !proposal && !near;
         const unproposed = collided
-            ? `would be ${proposal?.path}, but you already named a different colour that way`
+            ? `would be ${proposal?.path}, but you already named a different ${r.kind === "color" ? "colour" : "value"} 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
+                : silent && r.kind === "color"
                     ? whyNotProposedFromUse(r.literal, uses, theirs.rootPx, r.count)
-                    : null;
+                    : silent && r.kind !== "font"
+                        ? (whyNotProposedFromValue(r.literal, r.kind, uses, root, r.count) ??
+                            "never inside a style property - declared or computed, not painted")
+                        : null;
         entries.push({
             value: r.literal,
             kind: r.kind,
@@ -277,6 +303,28 @@ uses) {
         unnamed: d.repeats.length + d.once.length,
     };
 }
+/**
+ * NO TAILWIND v4 O NOME É A UTILIDADE - e aprovar `spacing.16` muda o que `p-16` já significa.
+ *
+ * `absorb --send` no caminho "code" faz ele colar `@theme { --spacing-16: 16px }`, e na v4
+ * `--spacing-<n>` é o namespace que resolve `p-16`, `m-16`, `gap-16`, `w-16`, `size-16` e
+ * `space-y-16`. Com o padrão (`--spacing: 0.25rem`), `p-16` vale 64px; depois do paste vale 16px, e
+ * o projeto dele muda inteiro, calado. Todo degrau de 1 a 96 colide, sempre.
+ *
+ * A PLATAFORMA NÃO MUDA O NOME (decisão do lead, 08/09, reabrível): o degrau é o VALOR dele, e isso
+ * é a promessa da `INV-VOC-09`. Ela DECLARA a consequência quando a stack é v4 - `tailwindMajor` já
+ * sabe qual é -, na linha da proposta e no bloco que ele cola. Renomear é escolha dele, no arquivo.
+ *
+ * Uma frase, um lugar: a lista e o bloco a leem daqui, senão as duas telas divergem no dia em que
+ * alguém editar uma.
+ */
+export function spacingUtilitiesRedefined(paths) {
+    const hit = paths.find((p) => /^spacing\.\d+$/.test(p));
+    if (!hit)
+        return null;
+    const step = hit.slice("spacing.".length);
+    return `On Tailwind v4 the name IS the utility: --spacing-${step} is what p-${step}, m-${step}, gap-${step} and w-${step} read, so approving ${hit} changes what those already mean in your project. The value is yours - rename the step in the file if you want the utilities untouched.`;
+}
 /** Quantas linhas da proposta ainda precisam de um nome humano. */
 export const needingName = (plan) => plan.entries.filter((e) => !e.path);
 /**
@@ -286,7 +334,14 @@ export const needingName = (plan) => plan.entries.filter((e) => !e.path);
  * um repo em migração já tem nome no vocabulário do próprio cliente, e essas viajam sem ninguém digitar
  * nada.
  */
-export function describeAbsorb(plan) {
+export function describeAbsorb(plan, 
+/**
+ * A STACK DELE, e OBRIGATÓRIA de propósito: o aviso do namespace da v4 (ver
+ * `spacingUtilitiesRedefined`) é a metade que faz a proposta ser honesta naquele projeto, e um
+ * argumento opcional que dá para esquecer é a próxima ocorrência do defeito em que a tela promete
+ * o que a chamada não passou. `false` é resposta explícita.
+ */
+tailwind4) {
     /**
      * O QUE ELE JÁ NOMEIA E O QUE A PLATAFORMA PROPÔS SÃO DUAS LISTAS - e juntá-las é dizer que ele
      * nomeou o que ele não nomeou.
@@ -332,11 +387,18 @@ 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 vocabulary - your scale, or how you use the value - 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, how you use the value, or the value itself - 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)
             lines.push(`  (${proposed.length - 8} more)`);
+        const redefined = tailwind4
+            ? spacingUtilitiesRedefined(proposed.map((e) => e.path))
+            : null;
+        if (redefined) {
+            lines.push("");
+            lines.push(redefined);
+        }
     }
     if (pending.length > 0) {
         const close = pending.filter((e) => e.near);

package/dist/commands/absorb.js

@@ -1,14 +1,15 @@
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { dirname, join, resolve } from "node:path";
-import { absorbPlan, describeAbsorb, needingName, } from "../absorb-plan.js";
+import { absorbPlan, describeAbsorb, needingName, spacingUtilitiesRedefined, } from "../absorb-plan.js";
 import { readProjectConfig, readToken, resolveRegistry } from "../config.js";
+import { DEFAULT_ROOT_PX, rootSizeOf } from "../doctor/root-size.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";
+import { loadSystem, sheetsIn, walkAll } from "./doctor.js";
 /**
  * `synthesisui absorb` - O SISTEMA APRENDE O DESIGN QUE O CÓDIGO JÁ TEM.
  *
@@ -34,7 +35,26 @@ export async function absorb(opts) {
     const path = join(root, FILE);
     if (opts.send)
         return sendProposal(root, path, opts.registry);
-    const installed = await loadSystem(root);
+    /**
+     * A RAIZ, MEDIDA ANTES DE PROPOR NOME NENHUM - e sem isto este comando AFIRMA um número falso.
+     *
+     * Este comando chamava `loadSystem(root)` sem a raiz medida, então `1rem` valia 16px sempre. Até a
+     * Parte 2 isso só o fazia CASAR menos - um `0.25rem` dele não achava o token em `4px`, e o erro
+     * era por omissão. A proposta pelo valor (`INV-VOC-09`) transformou a omissão em afirmação: num
+     * projeto que escreve `html { font-size: 62.5% }`, um `padding: 2rem` saía como `spacing.32` e
+     * *"32px, used 2× as margin and padding"* - e `2rem` ali vale 20px. Um nome errado e um número
+     * falso no terminal dele, sobre o repositório dele. Medido no comando real em 08/09.
+     *
+     * A medição é a MESMA do `doctor` (`rootSizeOf` sobre as folhas de estilo, só o bloco
+     * `html`/`:root`), sobre a RAIZ do projeto - que é a população de onde `loadSystem` colhe o
+     * vocabulário dele, mesmo quando a leitura é escopada. Ambíguo (duas raízes, um `calc()`) cai no
+     * padrão do navegador, como no `doctor`: quem decide isso é `root-size.ts`, não este comando.
+     */
+    const rootSize = rootSizeOf(await sheetsIn([root]));
+    const installed = await loadSystem(root, {
+        px: rootSize.ambiguous ? DEFAULT_ROOT_PX : rootSize.px,
+        from: rootSize.from,
+    });
     /**
      * SEM SISTEMA INSTALADO ISTO CONTINUA VALENDO - e recusar aqui fechava o dia 1.
      *
@@ -99,15 +119,17 @@ export async function absorb(opts) {
         const rel = file.slice(root.length + 1);
         reports.push(scanSource(rel, source, table));
         if (!IS_FIXTURE.test(rel))
-            countUseByProperty(source, uses, table.rootPx);
+            countUseByProperty(source, uses, rootSize);
     }
-    const plan = absorbPlan(diagnose(reports), theirs, pathsInSystem(installed.documents), opts.cap ?? 40, uses);
+    const plan = absorbPlan(diagnose(reports), theirs, pathsInSystem(installed.documents), opts.cap ?? 40, uses, rootSize);
     console.log(section(hasSystem
         ? "What the system could absorb"
         : "Name what you wrote by hand"));
     console.log(body(paint.dim(`read from ${rel.length > 0 ? rel.join(", ") : "this project"} · your own vocabulary read from the root`)));
     console.log("");
-    for (const line of describeAbsorb(plan))
+    /** A stack dele decide uma frase da lista - ver `spacingUtilitiesRedefined`. */
+    const major = tailwindMajor(await resolveDeps(root));
+    for (const line of describeAbsorb(plan, major === 4))
         console.log(body(line));
     if (plan.entries.length === 0)
         return;
@@ -225,6 +247,13 @@ async function sendProposal(root, path, registry) {
         for (const e of ready)
             console.log(`    --${e.path.replace(/\./g, "-")}: ${e.value};`);
         console.log("  }");
+        /** E O QUE ESSE PASTE MUDA NO PROJETO DELE, dito antes de ele colar - ver
+         *  `spacingUtilitiesRedefined`. Na v4 o nome É a utilidade. */
+        const redefined = major === 4 ? spacingUtilitiesRedefined(ready.map((e) => e.path)) : null;
+        if (redefined) {
+            console.log("");
+            console.log(body(redefined));
+        }
         console.log("");
         console.log(body(major === 4
             ? "In `@theme` and not `:root`: on Tailwind v4 only `@theme` generates the utility, so this is what makes `text-ink-700` exist in your code."

package/dist/commands/doctor.js

@@ -385,7 +385,7 @@ measured) {
  * common path pays nothing for it.
  */
 /** As folhas de estilo dele, para a medição da raiz. Só css - nada de `.tsx`. */
-async function sheetsIn(roots) {
+export async function sheetsIn(roots) {
     const out = [];
     for await (const file of walkAll(roots)) {
         if (!/\.(css|scss|sass|less)$/i.test(file))

package/dist/proposed-name.js

@@ -1,6 +1,6 @@
 import { chroma, deltaE, lightness } from "./doctor/color-distance.js";
 import { normalizeValue } from "./doctor/tokens.js";
-import { SVG } from "./use-by-property.js";
+import { lengthKey, ROOTS_OF_KIND, SVG, } from "./use-by-property.js";
 function stepsOf(theirs) {
     const out = [];
     for (const [name, value] of theirs.byName) {
@@ -216,3 +216,163 @@ export function whyNotProposedFromUse(literal, uses, rootPx, counted) {
         return "only in svg";
     return `${u.total}× in ${root}, but the value does not read as a colour`;
 }
+/**
+ * A TERCEIRA FONTE - O PRÓPRIO VALOR, para espaço e raio. Especificada em 08/09
+ * (`steps/03-parte-3-espacamento-na-lista.md`), depois de a medição descartar a função como
+ * separadora de espaçamento: no `web-subscribe` real, `8px` é 409× padding, 303× margin e 18× gap -
+ * um degrau de espaço é usado em padding E margin por definição, e "fonte 2 para spacing" proporia
+ * na cauda e calaria na cabeça, exatamente onde ele olha.
+ *
+ * O QUE O CLIENTE GANHA: depois da cor, a primeira tela do `absorb` no `web-subscribe` tinha 24 de 40
+ * linhas de espaçamento em branco e SEM motivo. Agora `16px` chega como `spacing.16` com *"16px, used
+ * 642× as padding, margin and gap - one step of your spacing"*; ele renomeia na revisão (`spacing.md`)
+ * ou deixa hard-coded. E `1em` chega com o motivo: depende da fonte de cada elemento, não há degrau
+ * fixo.
+ *
+ * O CAMINHO É O PRÓPRIO VALOR (D2): é o único nome derivável do repositório dele que é VERDADEIRO. A
+ * palavra `spacing`/`radius` é a casa que o produto já usa nos caminhos dos nomes DELE (`HOME[kind]`
+ * em `absorb-plan.ts`) - não é uma palavra nossa sobre o valor, é onde o valor mora. `sm`, `md`,
+ * `tight` seriam invenção, e não entram nem como sugestão.
+ *
+ * AS PORTAS (D2-D4), todas para o lado do "propor de menos":
+ *
+ *     natureza        só `spacing` e `radius`; motion tem motivo e não tem proposta (fora, declarado)
+ *     unidade FIXA    px ou rem; `em` vale 16px só quando a fonte do elemento é a da raiz - é a regra
+ *                     do `fontRelative` que o `--fix` já segue (D3)
+ *     degrau INTEIRO  `3.2px` (de `0.2em` ou `0.2rem`) não é um degrau (D4)
+ *     positivo        zero não é degrau; negativo não é degrau (D4)
+ *     contado         o valor chegou ao passe em alguma função da natureza certa - sem contagem não
+ *                     há distribuição para dizer, e o motivo é o genérico do plano
+ */
+/** `16px` → 16 · `1rem` → 16 · `0.2rem` → 3.2 · não-comprimento → null. */
+function pxOf(literal, rootPx) {
+    const m = /^(-?\d*\.?\d+)px$/.exec(normalizeValue(literal, rootPx));
+    return m ? Number.parseFloat(m[1] ?? "") : null;
+}
+const isEm = (literal) => /(?<!r)em$/i.test(literal.trim());
+const isRem = (literal) => /rem$/i.test(literal.trim());
+/**
+ * RAIZ SEM UMA RESPOSTA NÃO CONVERTE `rem` - e é o mesmo lado do erro que o `doctor` já escolheu.
+ *
+ * Duas declarações de `font-size` na raiz (ou uma que não dá para ler) e `1rem` deixa de ter um
+ * valor em px: propor `spacing.32` ali seria afirmar uma conversão que a plataforma não sabe fazer.
+ * `px` continua propondo, porque px não depende da raiz de nada. Decisão de implementação do lead
+ * (08/09), reabrível pelo dono; a régua que decide o que é ambíguo é `root-size.ts`, não esta.
+ */
+const unconvertible = (literal, root) => Boolean(root.ambiguous) && isRem(literal);
+/** As funções da natureza certa em que o valor aparece, mais usada primeiro, com o total. */
+function lengthUses(literal, kind, uses, root) {
+    const roots = ROOTS_OF_KIND[kind];
+    if (!roots)
+        return null;
+    const per = uses.get(lengthKey(literal, root));
+    if (!per)
+        return null;
+    const entries = [...per.entries()]
+        .filter(([root, n]) => n > 0 && roots.includes(root))
+        .sort((a, b) => b[1] - a[1] || (a[0] < b[0] ? -1 : 1));
+    if (entries.length === 0)
+        return null;
+    return { per: entries, total: entries.reduce((n, [, c]) => n + c, 0) };
+}
+/** `padding, margin and gap` · `padding and margin` · `padding`. */
+const listed = (roots) => roots.length <= 1
+    ? (roots[0] ?? "")
+    : `${roots.slice(0, -1).join(", ")} and ${roots[roots.length - 1]}`;
+/**
+ * O NOME PELO PRÓPRIO VALOR: `spacing.16`, `radius.6`.
+ *
+ * O `because` carrega a distribuição por função, contada por ocorrência no mesmo passe da cor, para
+ * ele julgar pela origem: *"16px, used 642× as padding, margin and gap - one step of your spacing"*.
+ */
+export function proposeFromTheirValue(literal, kind, uses, 
+/**
+ * A RAIZ MEDIDA, com a ambiguidade - o objeto inteiro, e não os pixels soltos: a ambiguidade é
+ * parte da medição, e perdê-la no caminho é o que fazia um `2rem` sair `spacing.32` num projeto
+ * cuja raiz não tem uma resposta. Ver `unconvertible`.
+ */
+root, 
+/**
+ * QUANTAS OCORRÊNCIAS O SCAN VIU - e a proposta cala quando o passe alcançou MENOS: a
+ * distribuição seria uma afirmação sobre um pedaço. É a mesma metade `unknown` que a cor já tem
+ * (`INV-VOC-08`), e é obrigatória por isso.
+ */
+counted) {
+    if (kind !== "spacing" && kind !== "radius")
+        return null;
+    if (isEm(literal) || unconvertible(literal, root))
+        return null;
+    const px = pxOf(literal, root.px);
+    if (px === null || !Number.isInteger(px) || px <= 0)
+        return null;
+    const u = lengthUses(literal, kind, uses, root);
+    /**
+     * DUAS OCORRÊNCIAS, A MESMA RÉGUA DA COR (D2 do dono, 07/09: 100% e >= 2, *"na dúvida,
+     * hard-coded"*). Uma cor vista uma vez sai "seen once" sem proposta; um comprimento visto uma vez
+     * saía `spacing.3 · "one step of your spacing"` - duas réguas de repetição na mesma tela, e a
+     * mais frouxa era a que propunha. A D2 é do dono; estendê-la a comprimento é decisão do lead
+     * (08/09), reabrível.
+     */
+    if (!u || u.total < 2 || u.total < counted)
+        return null;
+    return {
+        path: `${kind}.${px}`,
+        because: `${px}px, used ${u.total}× as ${listed(u.per.map(([root]) => root))} - one step of your ${kind}`,
+    };
+}
+/**
+ * POR QUE NÃO HÁ PROPOSTA PELO VALOR, em uma linha - e nunca `null` quando há contagem.
+ *
+ * *"font-relative (em): 597× across padding and margin - depends on each element's font, so no fixed
+ * step"* é a leitura que ele consegue agir sobre. `counted` é o que o scan viu, e serve a motion, que
+ * o passe não conta. `null` só quando o literal nem chegou ao passe - aí o plano usa o motivo
+ * genérico *"never inside a style property…"*. Nunca mente sozinha: devolve `null` onde
+ * `proposeFromTheirValue` propõe.
+ */
+export function whyNotProposedFromValue(literal, kind, uses, root, counted) {
+    if (kind === "motion")
+        return `${counted}× - durations are not proposed yet`;
+    if (proposeFromTheirValue(literal, kind, uses, root, counted))
+        return null;
+    if (kind !== "spacing" && kind !== "radius")
+        return null;
+    /**
+     * A RAIZ AMBÍGUA É O MOTIVO ANTES DE QUALQUER CONTAGEM - ela não depende de quantas vezes ele
+     * escreveu o valor, e dizer "read 0 of 4 uses" ali culparia a propriedade por uma lacuna que é da
+     * raiz. Ver `unconvertible`.
+     */
+    if (unconvertible(literal, root)) {
+        const saw = root.ambiguous?.saw.length ?? 0;
+        return `your root font-size is not one answer (${saw} declaration${saw === 1 ? "" : "s"}) - px and rem are not compared here, so no fixed step from ${literal.trim().toLowerCase()}`;
+    }
+    const u = lengthUses(literal, kind, uses, root);
+    /**
+     * O PASSE NÃO ALCANÇOU O QUE O SCAN CONTOU: `unknown` é estado, e a frase diz qual é a lacuna.
+     *
+     * `scroll-padding: 18px`, `grid-gap: 22px` e `scroll-margin: 26px` chegam ao scan e não a este
+     * passe - a propriedade não está nas que ele lê. O motivo genérico dizia *"never inside a style
+     * property - declared or computed, not painted"*, falso em dois pontos: o valor ESTÁ numa
+     * propriedade de estilo, e "painted" é vocabulário de cor numa linha de espaçamento.
+     */
+    if ((u?.total ?? 0) < counted)
+        return `read ${u?.total ?? 0} of ${counted} uses - the property it sits in is not one this reads yet`;
+    if (!u)
+        return null;
+    const across = listed(u.per.map(([root]) => root));
+    if (isEm(literal))
+        return `font-relative (em): ${u.total}× across ${across} - depends on each element's font, so no fixed step`;
+    const px = pxOf(literal, root.px);
+    if (px === null)
+        return `${u.total}× across ${across} - not a length we can read`;
+    if (px === 0)
+        return "zero is not a step";
+    if (px < 0)
+        return "negative values are not steps";
+    if (!Number.isInteger(px)) {
+        const written = literal.trim().toLowerCase();
+        const from = written === `${px}px` ? "" : ` (from ${written})`;
+        return `${px}px${from} is not a whole step`;
+    }
+    /** Uma ocorrência não é uso medido - a mesma frase que a cor já usa (D2). */
+    return "seen once";
+}

package/dist/use-by-property.js

@@ -2,9 +2,22 @@ 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";
+/** As raízes que recebem COMPRIMENTO - espaço e raio. Tudo o mais recebe cor. */
+const LENGTH_ROOTS = new Set([
+    "padding",
+    "margin",
+    "gap",
+    "border-radius",
+]);
+/** As raízes de espaço, por natureza do achado - o `because` só lista as da natureza certa. */
+export const ROOTS_OF_KIND = {
+    spacing: ["padding", "margin", "gap"],
+    radius: ["border-radius"],
+};
 /**
  * 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.
+ * `px` é `padding` (dos dois lados), `mt` é `margin`, `rounded` é `border-radius`.
  */
 export const TAILWIND_WRITES = {
     bg: "background",
@@ -24,7 +37,35 @@ export const TAILWIND_WRITES = {
     caret: "caret-color",
     fill: SVG,
     stroke: SVG,
+    p: "padding",
+    px: "padding",
+    py: "padding",
+    pt: "padding",
+    pr: "padding",
+    pb: "padding",
+    pl: "padding",
+    ps: "padding",
+    pe: "padding",
+    m: "margin",
+    mx: "margin",
+    my: "margin",
+    mt: "margin",
+    mr: "margin",
+    mb: "margin",
+    ml: "margin",
+    ms: "margin",
+    me: "margin",
+    gap: "gap",
+    rounded: "border-radius",
 };
+/**
+ * `16px` · `1.5rem` · `.5em` · `-1px` · `1PX` - o número e a unidade, como o scan os lê. O
+ * lookbehind impede `2px` dentro de `12px`; o lookahead impede `em` dentro de `emphasis`.
+ *
+ * A CAIXA NÃO DECIDE: CSS não distingue `1px` de `1PX`, e código gerado escreve das duas formas.
+ * Sem a flag `i` um `margin: 1REM` não era contado, e a linha dele saía sem motivo.
+ */
+const LENGTH = /(?<![\w.#-])-?\d*\.?\d+(?:px|rem|em)(?![\w-])/gi;
 /**
  * `background:` · `backgroundColor:` · `"background-color":` · `fill="`
  *
@@ -32,21 +73,23 @@ export const TAILWIND_WRITES = {
  * 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.
+ * função. O que casa aqui ainda passa por `propertyRoot`: só o que pinta ou espaça 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.
+ * `bg-[#…]` · `hover:text-[#…]` · `border-t-[rgba(…)]` · `gap-x-[…]` · `rounded-tl-[…]` - 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");
+    .join("|")})(?:-[trblxyse]{1,2})?-\\[`, "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`,
+ * A RAIZ DE UMA PROPRIEDADE CSS QUE CARREGA COR OU COMPRIMENTO (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`.
+ * `border`; `padding-top`, `paddingTop` são `padding`; `border-top-left-radius` e `borderRadius`
+ * são `border-radius`. Uma chave de objeto, uma variável, uma propriedade que não pinta nem espaça:
+ * `null`.
  */
 export function propertyRoot(raw) {
     const kebab = raw
@@ -54,6 +97,14 @@ export function propertyRoot(raw) {
         .replace(/^["']|["']$/g, "")
         .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
         .toLowerCase();
+    if (/^border(-[a-z]+)*-radius$/.test(kebab))
+        return "border-radius";
+    if (/^padding(-|$)/.test(kebab))
+        return "padding";
+    if (/^margin(-|$)/.test(kebab))
+        return "margin";
+    if (/^(gap|row-gap|column-gap)$/.test(kebab))
+        return "gap";
     if (/^background(-|$)/.test(kebab))
         return "background";
     if (/^border(-|$)/.test(kebab))
@@ -72,28 +123,78 @@ export function propertyRoot(raw) {
         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) {
+/**
+ * A CHAVE DE UM COMPRIMENTO: o valor em px sobre a raiz medida, e `@em` quando a unidade escrita
+ * é `em` - porque aí o valor não é fixo, e uma contagem que o somasse ao `16px` afirmaria um degrau
+ * sobre ocorrências que dependem da fonte de cada elemento (D3). `1rem` e `16px` são a mesma chave.
+ */
+export function lengthKey(literal, root) {
+    const px = normalizeValue(literal, root.px);
+    const written = literal.trim();
+    if (/(?<!r)em$/i.test(written))
+        return `${px}@em`;
+    if (root.ambiguous && /rem$/i.test(written))
+        return `${px}@rem?`;
+    return px;
+}
+/** Toda declaração escrita na linha, em ordem, com o limite de cada uma. */
+function marksOf(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(PROPERTY))
+        out.push({
+            start: m.index,
+            end: m.index + m[0].length,
+            root: propertyRoot(m[0].replace(/\s*[:=]$/, "")),
+            until: Number.POSITIVE_INFINITY,
+        });
     for (const m of line.matchAll(UTILITY)) {
         const root = TAILWIND_WRITES[m[1] ?? ""];
-        if (root)
-            out.push({ end: m.index + m[0].length, root });
+        if (!root)
+            continue;
+        const end = m.index + m[0].length;
+        const close = line.indexOf("]", end);
+        out.push({
+            start: m.index,
+            end,
+            root,
+            until: close < 0 ? Number.POSITIVE_INFINITY : close,
+        });
+    }
+    out.sort((a, b) => a.start - b.start);
+    /** O limite de cada uma é o começo da próxima - quem escreveu outra propriedade fechou esta. */
+    for (const [i, mark] of out.entries()) {
+        const next = out[i + 1];
+        if (next)
+            mark.until = Math.min(mark.until, next.start);
     }
-    return out.sort((a, b) => a.end - b.end);
+    return out;
+}
+/**
+ * A DECLARAÇÃO QUE COBRE ESTE LITERAL - ou `null`, e `null` é resposta: o valor não está numa
+ * propriedade que este passe lê, então ele não exerce função nenhuma que a gente possa afirmar.
+ * Sem declaração na linha, vale a que ficou aberta na anterior.
+ */
+function anchorFor(marks, at, carried) {
+    if (marks.length === 0)
+        return carried;
+    let hit = null;
+    for (const mark of marks) {
+        if (mark.end > at)
+            break;
+        hit = mark;
+    }
+    if (hit === null || hit.root === null)
+        return null;
+    return at < hit.until ? hit.root : null;
 }
 /** 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.
+ * Conta cada ocorrência de cor e de comprimento 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 cores em
+ * `box-shadow` (e nenhum dos comprimentos); `padding: 1px 2px` conta `1px` e `2px` uma vez cada em
+ * `padding`; 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:
  *
@@ -106,29 +207,33 @@ const ENDS_DECLARATION = /[;{}]\s*$/;
  * 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) {
+export function countUseByProperty(source, into, 
+/** A raiz MEDIDA, com a ambiguidade dela - ver `lengthKey`. */
+root) {
+    const bump = (key, root) => {
+        const per = into.get(key) ?? new Map();
+        per.set(root, (per.get(root) ?? 0) + 1);
+        into.set(key, per);
+    };
     /** 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);
+        const marks = marksOf(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);
+            const at = anchorFor(marks, m.index, carried);
+            if (at !== null && !LENGTH_ROOTS.has(at))
+                bump(normalizeValue(m[0], root.px), at);
+        }
+        for (const m of line.matchAll(LENGTH)) {
+            const at = anchorFor(marks, m.index, carried);
+            if (at !== null && LENGTH_ROOTS.has(at))
+                bump(lengthKey(m[0], root), at);
         }
+        /** A ÚLTIMA declaração da linha é a que pode continuar - e se ela é de uma propriedade que este
+         *  passe não lê, o que continua é o silêncio dela, nunca a âncora de antes. */
         if (ENDS_DECLARATION.test(line))
             carried = null;
-        else if (anchors.length > 0)
-            carried = anchors[anchors.length - 1]?.root ?? null;
+        else if (marks.length > 0)
+            carried = marks[marks.length - 1]?.root ?? null;
     }
 }

package/package.json

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