synthesisui 0.16.494 → 0.16.496

package/dist/commands/doctor.js

@@ -1,3 +1,4 @@
+import { describeDistinct, describeDistinctVerbose, distinctValues } from "../doctor/distinct-values.js";
 import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { readStyleSheet, scssVariables } from "../doctor/scss-lens.js";
 import { THEME_SOURCE, tsTokenObjects, tsTokensAsVars } from "../doctor/ts-tokens-lens.js";
@@ -1143,6 +1144,22 @@ export async function doctor(opts) {
             }
         }
     }
+    /**
+     * QUANTOS VALORES DIFERENTES, E DE ONDE - ver `distinct-values.ts` (jornada "o doctor conta o que ninguém escolheu").
+     *
+     * Fora do bloco da cobertura de propósito: um projeto sem token nenhum não tem cobertura para medir, e é justamente
+     * nele que "8 cinzas da caixa do framework" é a frase que falta.
+     */
+    const counted = distinctValues(reports, table);
+    const countedBy = table.source === "installed" ? systemName : null;
+    const distinct = describeDistinct(counted, countedBy);
+    if (distinct.length > 0) {
+        console.log("");
+        const [head, ...rest] = distinct;
+        console.log(body(head));
+        for (const line of rest)
+            console.log(body(paint.dim(`                  ${line.trimStart()}`)));
+    }
     /**
      * THE RECORD - the layer that remembers, printed where the moment is shown.
      *
@@ -1671,6 +1688,17 @@ export async function doctor(opts) {
             say("");
         }
     }
+    /**
+     * CADA VALOR CONTADO, com a classe que o trouxe - só no `--verbose`, e numa seção própria depois da lista de valores à
+     * mão: é o detalhe para conferir o número contra uma contagem feita por fora, não a primeira coisa que se lê.
+     */
+    const oneByOne = describeDistinctVerbose(counted, countedBy);
+    if (verbose && oneByOne.length > 0) {
+        say(section("Different values, one by one"));
+        for (const line of oneByOne)
+            say(body(line));
+        say("");
+    }
     say(section("What this means"));
     for (const line of verdict(d, hasSystem, overrides.length, conflictsInUse.length))
         say(line);

package/dist/commands/template.js

@@ -1,4 +1,4 @@
-import { mkdir, writeFile } from "node:fs/promises";
+import { mkdir, stat, writeFile } from "node:fs/promises";
 import { dirname, join, relative } from "node:path";
 import { readProjectConfig, resolveRegistry } from "../config.js";
 import { installedSheetCss, RECIPE_HEADER, recipeRulesFor, } from "../recipe-css.js";
@@ -61,7 +61,13 @@ export async function template(slug, name, opts) {
     // a loose landing.tsx at the app/ root read as a route without being one,
     // and a second template turned the app dir into soup.
     const [pageFile, ...siblings] = generated.files;
-    const defaultDir = join("templates", asName ?? name);
+    /**
+     * DENTRO DE `src/` QUANDO O APP MORA LÁ (14/10, três agentes do zero seguidos): o `create-next-app` com `src/` aponta o
+     * `@/` para `src/`, e os templates iam para `templates/` na raiz - o import que a frase abaixo sugere não resolvia, e o
+     * agente movia a pasta à mão. Com `src/app`, a pasta é `src/templates/<nome>`; sem, a raiz de sempre.
+     */
+    const underSrc = await stat(join(root, "src", "app")).then((s) => s.isDirectory(), () => false);
+    const defaultDir = join(underSrc ? join("src", "templates") : "templates", asName ?? name);
     const pageRel = opts.out ?? join(defaultDir, pageFile.filename);
     const pageDir = dirname(join(root, pageRel));
     /**
@@ -228,7 +234,7 @@ export async function template(slug, name, opts) {
     console.log("");
     console.log("Next steps:");
     console.log(`  • use it in a route, e.g. ${join(config.pagesDir, "page.tsx")}:`);
-    console.log(`      import Page from "@/${defaultDir.replace(/\\/g, "/")}/${pageFile.filename.replace(/\.tsx$/, "")}";`);
+    console.log(`      import Page from "@/${defaultDir.replace(/\\/g, "/").replace(/^src\//, "")}/${pageFile.filename.replace(/\.tsx$/, "")}";`);
     console.log(`  • nothing to install: this page and its stylesheet stand on their own`);
     console.log("  • refine the file: wire real data, split into components, swap placeholders");
     /**

package/dist/config.js

@@ -251,7 +251,16 @@ export function describeIntent(source) {
                     source.towards
                         ? `derived: this group's reference is \`${source.towards}\`, and your vocabulary is converging on it`
                         : "derived: this is the group's reference system, so the design moves in"
-                : "nobody chose, so this is the default";
+                : /**
+                   * A ORDEM, dita como ordem - jornada "o doctor conta o que ninguém escolheu", 15/10.
+                   *
+                   * Era *"nobody chose, so this is the default"*, e a aula 01 do curso leu a frase como se fosse sobre os
+                   * VALORES da página - a mesma página em que 53 usos da paleta padrão do Tailwind não entravam em conta
+                   * nenhuma. O que ninguém escolheu aqui é a ordem da lista (nem `--migrate`, nem `--adopt`), e a frase
+                   * precisa dizer isso sem que quem lê o terminal abra o código. Sem "nobody", também: a linha de valores
+                   * distintos diz que ninguém escolheu a paleta, e duas frases iguais sobre coisas diferentes são a confusão.
+                   */
+                    "default order - you never set one";
     const flip = source.intent === "migrate"
         ? "`doctor --adopt` sorts the other way"
         : "`doctor --migrate` sorts the other way";

package/dist/doctor/distinct-values.js

@@ -0,0 +1,251 @@
+import { fragmentsOfSource } from "./fragments.js";
+import { normalizeValue } from "./tokens.js";
+import { parseClass, readUtility } from "./transcribe.js";
+const COLOUR_PROPERTIES = new Set([
+    "color",
+    "backgroundColor",
+    "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
+    "borderInlineColor",
+    "borderBlockColor",
+    "outlineColor",
+    "textDecorationColor",
+    "caretColor",
+    "accentColor",
+    "fill",
+    "stroke",
+]);
+const SPACING_PROPERTY = /^(padding|margin)(Inline|Block|Top|Right|Bottom|Left|InlineStart|InlineEnd|BlockStart|BlockEnd)?$|^(gap|rowGap|columnGap)$/;
+/**
+ * AS UTILITIES DE COR QUE O TRADUTOR NÃO LÊ SOZINHAS - `divide-stone-200`, `from-stone-50`, `ring-stone-300`.
+ *
+ * O tradutor existe para transcrever um componente, e lá um `divide-*` é regra sobre os filhos, não declaração do
+ * elemento. Aqui a pergunta é outra - que cor a página usa -, e a cor é a mesma de `text-stone-200`. O prefixo é trocado
+ * só quando a leitura devolve uma COR: `ring-2` e `shadow-lg` continuam sem leitura.
+ */
+const COLOUR_ONLY_PREFIX = /^(divide|ring-offset|ring|from|via|to|decoration|outline|placeholder|caret|fill|stroke|shadow|inset-shadow)-(.+)$/;
+/** O que não é escolha de valor: herdar, apagar, seguir a cor do texto. */
+const NOT_A_VALUE = /^(transparent|currentcolor|current|inherit|initial|unset|auto|none)$/i;
+/** As duas cores da caixa que o tradutor devolve em hex, sem o carimbo da paleta. */
+const FRAMEWORK_PLAIN = /^(?:[a-z-]+-)?(white|black)$/;
+/** O fim da classe, sem o alfa: `text-accent/80` é o `accent` dele, com transparência - a mesma cor escolhida. */
+const withoutAlpha = (utility) => utility.includes("[") ? utility : utility.replace(/\/\d{1,3}$/, "");
+/**
+ * AS PALAVRAS DE CLASSE DE UM ARQUIVO - pelo mesmo extrator que alimenta o ledger, então o que conta aqui é o que o resto
+ * do produto chama de classe: `className="…"`, template, e os literais dentro de `cn(…)`.
+ *
+ * Num template, o pedaço `${…}` é runtime e sai antes do corte: ele não está na fonte.
+ */
+export function classWordsOf(file, source) {
+    const words = new Set();
+    for (const f of fragmentsOfSource(file, source)) {
+        if (f.shape !== "class" && f.shape !== "template")
+            continue;
+        const text = f.shape === "template" ? f.text.replace(/\$\{[^}]*\}/g, " ") : f.text;
+        for (const w of text.split(/\s+/))
+            if (w)
+                words.add(w);
+    }
+    return [...words];
+}
+function lengthKey(value, rootPx) {
+    const m = /^-?(\d*\.?\d+)(px|rem)$/.exec(value.trim());
+    if (!m)
+        return null;
+    const px = Number(m[1]) * (m[2] === "rem" ? rootPx : 1);
+    /** `p-0` não é degrau de escala nenhum: é a ausência de espaço. */
+    return px === 0 ? null : `${Number(px.toFixed(3))}px`;
+}
+function readWord(word, declared, isSystem, rootPx) {
+    const utility = withoutAlpha(parseClass(word).utility.replace(/^!/, "").replace(/!$/, ""));
+    let decl = readUtility(utility, declared);
+    const prefixed = COLOUR_ONLY_PREFIX.exec(utility);
+    if (!decl && prefixed) {
+        const asText = readUtility(`text-${prefixed[2]}`, declared);
+        if (asText?.property === "color")
+            decl = asText;
+    }
+    if (!decl)
+        return null;
+    const kind = COLOUR_PROPERTIES.has(decl.property)
+        ? "colour"
+        : decl.property === "fontSize"
+            ? "textSize"
+            : SPACING_PROPERTY.test(decl.property)
+                ? "spacing"
+                : null;
+    if (!kind || NOT_A_VALUE.test(decl.value.trim()))
+        return null;
+    const origin = decl.token
+        ? isSystem(decl.token)
+            ? "system"
+            : "own"
+        : utility.includes("[")
+            ? "hand"
+            : "framework";
+    if (kind === "colour") {
+        const key = decl.token ?? decl.value.toLowerCase().trim().replace(/\s*,\s*/g, ",").replace(/\s+/g, " ");
+        const plain = FRAMEWORK_PLAIN.exec(utility);
+        const family = origin !== "framework"
+            ? undefined
+            : plain
+                ? plain[1]
+                : /-([a-z]+)-\d{2,3}$/.exec(utility)?.[1];
+        return { kind, key, origin, ...(family ? { family } : {}) };
+    }
+    const key = decl.token ?? lengthKey(decl.value, rootPx);
+    return key ? { kind, key, origin } : null;
+}
+const byLength = (a, b) => {
+    const x = Number.parseFloat(a);
+    const y = Number.parseFloat(b);
+    return Number.isNaN(x) || Number.isNaN(y) ? a.localeCompare(b) : x - y;
+};
+/** Quando o mesmo valor chega por dois caminhos, ele conta UMA vez, pelo caminho que tem nome. */
+const PRIORITY = ["system", "own", "framework", "hand"];
+export function distinctValues(reports, table) {
+    /**
+     * OS TOKENS DO PROJETO INTEIRO, na forma que o tradutor lê (`--color-ink` -> valor). Uma variável é declarada no CSS
+     * global e usada no `.tsx`, então só a varredura inteira responde se `text-ink` é dele.
+     */
+    const declared = new Map();
+    for (const r of reports)
+        for (const d of r.ownDeclared ?? [])
+            if (!declared.has(d.name))
+                declared.set(d.name, d.value);
+    for (const [name, value] of table.byName)
+        if (!declared.has(name))
+            declared.set(name, value);
+    /**
+     * DO SISTEMA INSTALADO É O TOKEN QUE ELE TAMBÉM SEGURA - pelo nome que a tabela gera, ou pelo VALOR.
+     *
+     * O `init` escreve o tema do sistema no CSS dele, com os nomes dele (`--color-honey-500`, `--text-sm`), e esses nomes
+     * não estão no índice de utilities. Medido no projeto da aula com o Moss em 15/10: pelo nome só, 3 cores e 5 tamanhos
+     * escritos pelo `init` saíam como "your own tokens". Pelo valor é a mesma relação que o relatório já diz em "hold a
+     * value Moss also names". Sem sistema instalado, todo token é do projeto.
+     */
+    const installed = table.source === "installed";
+    const systemNames = new Set(installed ? table.utilities.values() : []);
+    const isSystem = (token) => {
+        if (!installed)
+            return false;
+        if (systemNames.has(token) || token.startsWith("--ds-"))
+            return true;
+        const value = declared.get(token);
+        return value !== undefined && table.byValue.has(normalizeValue(value, table.rootPx));
+    };
+    const seen = {
+        colour: new Map(),
+        textSize: new Map(),
+        spacing: new Map(),
+    };
+    const families = new Set();
+    const keep = (kind, key, origin, example) => {
+        const before = seen[kind].get(key);
+        if (!before || PRIORITY.indexOf(origin) < PRIORITY.indexOf(before.origin))
+            seen[kind].set(key, { origin, example });
+    };
+    for (const r of reports) {
+        for (const word of r.classWords ?? []) {
+            const read = readWord(word, declared, isSystem, table.rootPx);
+            if (!read)
+                continue;
+            keep(read.kind, read.key, read.origin, word);
+            if (read.family)
+                families.add(read.family);
+        }
+        /**
+         * A COR ESCRITA À MÃO FORA DE CLASSE - `#e7e5e4` num `style`, um `rgba()` dentro de uma sombra. São os achados de
+         * cor que o doctor já lista em "Values written by hand", então os dois números falam da mesma coisa.
+         */
+        for (const f of r.findings)
+            if (f.kind === "color")
+                keep("colour", f.literal.toLowerCase().trim().replace(/\s*,\s*/g, ",").replace(/\s+/g, " "), "hand", `${r.file}:${f.line}`);
+    }
+    const count = (kind) => {
+        const by = { framework: 0, system: 0, own: 0, hand: 0 };
+        for (const { origin } of seen[kind].values())
+            by[origin] += 1;
+        return {
+            total: seen[kind].size,
+            by,
+            families: kind === "colour" ? [...families].sort() : [],
+            values: [...seen[kind]]
+                .map(([key, { origin, example }]) => ({ key, origin, example }))
+                .sort((a, b) => PRIORITY.indexOf(a.origin) - PRIORITY.indexOf(b.origin) || byLength(a.key, b.key)),
+        };
+    };
+    return { colour: count("colour"), textSize: count("textSize"), spacing: count("spacing") };
+}
+const NOUN = {
+    colour: ["colour", "colours"],
+    textSize: ["text size", "text sizes"],
+    spacing: ["spacing", "spacings"],
+};
+/**
+ * AS LINHAS DO RELATÓRIO. Curta quando tudo vem de um nome; aberta por origem quando alguma coisa veio da caixa do
+ * framework ou da mão - que é exatamente o que ninguém escolheu.
+ */
+export function describeDistinct(v, systemName) {
+    const kinds = ["colour", "textSize", "spacing"];
+    const present = kinds.filter((k) => v[k].total > 0);
+    if (present.length === 0)
+        return [];
+    const noun = (k, n) => `${n} ${NOUN[k][n === 1 ? 0 : 1]}`;
+    const head = present.map((k) => noun(k, v[k].total)).join(" · ");
+    const unchosen = present.some((k) => v[k].by.framework + v[k].by.hand > 0);
+    if (!unchosen) {
+        const whose = present.every((k) => v[k].by.own === 0) && systemName
+            ? `from ${systemName}`
+            : present.every((k) => v[k].by.system === 0)
+                ? "from your own tokens"
+                : `from ${systemName ?? "the system"} and your own tokens`;
+        return [`Different values  ${head} - all ${whose}`];
+    }
+    const lines = [`Different values  ${head}`];
+    const width = Math.max(...present.map((k) => NOUN[k][1].length));
+    for (const k of present) {
+        const { by, families } = v[k];
+        const parts = [];
+        if (by.framework > 0)
+            parts.push(k === "colour"
+                ? `${by.framework} from the framework palette${families.length > 0 ? ` (${families.join(", ")})` : ""}`
+                : `${by.framework} from the framework scale`);
+        if (by.system > 0)
+            parts.push(`${by.system} from ${systemName ?? "the system"}`);
+        if (by.own > 0)
+            parts.push(`${by.own} from your own tokens`);
+        if (by.hand > 0)
+            parts.push(`${by.hand} by hand`);
+        lines.push(`  ${NOUN[k][1].padEnd(width)}  ${parts.join(", ")}`);
+    }
+    if (v.colour.by.framework + v.textSize.by.framework + v.spacing.by.framework > 0)
+        lines.push("  the framework ones came in the box - nobody in this project picked them");
+    return lines;
+}
+const ORIGIN_LABEL = {
+    framework: "framework",
+    system: "system",
+    own: "your token",
+    hand: "by hand",
+};
+/**
+ * O `--verbose`: cada valor contado, com a classe em que apareceu. É o que deixa conferir o número contra uma contagem
+ * feita por fora - o `gap-px` que uma regex de dígitos não pega aparece aqui com o nome.
+ */
+export function describeDistinctVerbose(v, systemName) {
+    const lines = [];
+    for (const k of ["colour", "textSize", "spacing"]) {
+        if (v[k].total === 0)
+            continue;
+        lines.push(`${NOUN[k][1]} (${v[k].total})`);
+        for (const { key, origin, example } of v[k].values) {
+            const label = origin === "system" && systemName ? systemName : ORIGIN_LABEL[origin];
+            lines.push(`  ${label.padEnd(12)} ${key.padEnd(28)} ${example}`);
+        }
+    }
+    return lines;
+}

package/dist/doctor/scan.js

@@ -11,6 +11,7 @@
  */
 import { propertyAt, roleFits } from "./their-names.js";
 import { utilitiesOn } from "./idiom-names.js";
+import { classWordsOf } from "./distinct-values.js";
 import { normalizeValue, tokenMatch } from "./tokens.js";
 import { THEME_SOURCE, tsTokenObjects } from "./ts-tokens-lens.js";
 /**
@@ -489,7 +490,9 @@ export function scanSource(file, source, table) {
                 : null),
         };
     }
-    return stretchedStack(file, source, themeDefinitionsAside(file, source, scanCore(file, source, table)));
+    const report = stretchedStack(file, source, themeDefinitionsAside(file, source, scanCore(file, source, table)));
+    const classWords = /\.(tsx|jsx|html|vue|svelte|astro)$/i.test(file) ? classWordsOf(file, source) : [];
+    return classWords.length > 0 ? { ...report, classWords } : report;
 }
 /**
  * A GRADE QUE DIVIDE A ALTURA DA TELA - bateria ampliada, item 17 (29/09).

package/package.json

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