synthesisui 0.16.483 → 0.16.484

package/dist/baseline-craft.js

@@ -21,6 +21,16 @@ import { body, bodyWrapped, paint } from "./output.js";
  * Vazio e não uma linha vazia: quem chama decide se imprime o título, e um bloco com cabeçalho e
  * nada embaixo é pior que bloco nenhum.
  */
+/** "A and B", "A, B, C, D and 2 more" - quatro nomes cabem numa linha de terminal. */
+function namesOf(names) {
+    const shown = names.slice(0, 4);
+    const rest = names.length - shown.length;
+    if (rest > 0)
+        return `${shown.join(", ")} and ${rest} more`;
+    return shown.length === 1
+        ? shown[0]
+        : `${shown.slice(0, -1).join(", ")} and ${shown[shown.length - 1]}`;
+}
 export function craftLines(craft) {
     if (!craft)
         return [];
@@ -50,7 +60,9 @@ export function craftLines(craft) {
      * a segunda pergunta, e ela merece a segunda linha.
      */
     if (apart)
-        lines.push(...bodyWrapped(`${apart} have no recipe yet: counted apart, never against you.`).map((l) => body(paint.dim(l))));
+        lines.push(...bodyWrapped(craft.unwrittenNames?.length
+            ? `${namesOf(craft.unwrittenNames)} have no recipe yet - nothing in their files paints them - so they are counted apart, never against you.`
+            : `${apart} have no recipe yet: counted apart, never against you.`).map((l) => body(paint.dim(l))));
     /**
      * OS RÓTULOS ALINHADOS PELO MAIS LONGO, e a largura é medida e não estimada: os nomes chegam do
      * servidor, então um padding fixo desalinharia no dia em que uma lente for renomeada lá.

package/dist/claude-md.js

@@ -3,6 +3,7 @@ import { dirname, join } from "node:path";
 import { hasHook } from "./agent-wiring.js";
 import { declaredReference } from "./group-role.js";
 import { recallAvailable } from "./memory/availability.js";
+import { readResponsiveForm, responsiveLine } from "./responsive-form.js";
 const START = "<!-- synthesisui:start -->";
 const END = "<!-- synthesisui:end -->";
 /** Reads the installed DSs from the .lock files in _synthesisui/ds/<slug>/. */
@@ -543,9 +544,15 @@ element. Write every user-facing string in that language - labels, empty states,
 \`alt\`. A screen reader pronounces \`aria-label\` using \`lang\`, so a mixed-language interface is
 worse than an untranslated one. If the attribute is wrong, change it rather than writing against
 it.`;
+    /**
+     * E COMO ELE FAZ O RESPONSIVO, medido como o idioma (item 19 da bateria, 29/09): no b9, 100% inline, o agente criou
+     * CSS Modules só para o ponto de quebra, porque ninguém tinha dito como aquele projeto faz.
+     */
+    const form = await readResponsiveForm(projectRoot).catch(() => null);
+    const responsive = form ? `\n\n${responsiveLine(form)}` : "";
     const body = `## Design Systems (via SynthesisUI)
 
-This project uses design system(s) tracked by the \`synthesisui\` CLI. ${rule}${language}
+This project uses design system(s) tracked by the \`synthesisui\` CLI. ${rule}${language}${responsive}
 
 ${sections.join("\n")}
 

package/dist/commands/import.js

@@ -11,7 +11,7 @@ import { PAGES_MAX, pageCompositionOf } from "../census-pages.js";
 import { readCredentials, readProjectConfig, readToken, resolveRegistry, sameRegistry, } from "../config.js";
 import { declaredElsewhere } from "../declared-elsewhere.js";
 import { architectureGap, architectureRule, componentHome, describeArchitecture, describeChoice, describeGap, detectArchitectures, homeLine, packagingOf, proposeNewHome, resolvesAs, countsAsOrganization, } from "../doctor/architecture.js";
-import { findBrokenRefs } from "../doctor/broken-refs.js";
+import { findBrokenRefs, findOrphanVars, findSynonyms, synonymLine } from "../doctor/broken-refs.js";
 import { nestingRules, propRules, readDefinitionProps, readNesting, readRuntime, } from "../doctor/call-sites.js";
 import { asCatalogueTable, describeFallback, fetchCatalogue, } from "../doctor/catalogue-fetch.js";
 import { describeClassStyle, detectClassStyle, } from "../doctor/class-style.js";
@@ -2620,6 +2620,8 @@ export async function takeCensus(root, opts) {
         }
     }
     const brokenRefs = findBrokenRefs(sources, declaredNames);
+    const orphanVars = findOrphanVars(css, sources);
+    const synonyms = findSynonyms(css, sources);
     const conventions = detectConventions(sources);
     const classStyle = detectClassStyle(sources);
     /**
@@ -2696,6 +2698,8 @@ export async function takeCensus(root, opts) {
             : {}),
         ...(animations.size > 0 ? { animations: [...animations].sort() } : {}),
         ...(brokenRefs.length > 0 ? { brokenRefs } : {}),
+        ...(orphanVars.length > 0 ? { orphanVars } : {}),
+        ...(synonyms.length > 0 ? { synonyms } : {}),
         /**
          * OS SISTEMAS QUE O CSS DELE JÁ CHAMA PELO NOME - ver `wiredSlugs`.
          *
@@ -3051,6 +3055,38 @@ async function summarize(c, root, scope) {
     sayAdoption(c);
     sayCollisions(c);
     await sayBrokenRefs(c, root, scope);
+    sayOrphanVars(c);
+    saySynonyms(c);
+}
+/**
+ * A MESMA COR COM VÁRIOS NOMES - uma linha por cor, até três (item 16 da bateria, 29/09). Propõe o nome que o código
+ * mais lê; quem decide se junta é ele.
+ */
+function saySynonyms(c) {
+    const all = c.synonyms ?? [];
+    if (all.length === 0)
+        return;
+    console.log("");
+    console.log(section("One colour, several names"));
+    for (const g of all.slice(0, 3))
+        console.log(body(synonymLine(g)));
+    if (all.length > 3)
+        console.log(body(paint.faint(`(${all.length - 3} more colours with more than one name)`)));
+}
+/**
+ * DECLARADAS E NUNCA USADAS - uma linha, nunca uma acusação (item 15 da bateria, 29/09).
+ *
+ * No b1 eram três sobras de um tema antigo, e o import passava calado. Quem lê decide se apaga: pode ser de propósito.
+ */
+function sayOrphanVars(c) {
+    const all = c.orphanVars ?? [];
+    if (all.length === 0)
+        return;
+    const names = all.slice(0, 6).map((o) => paint.strong(o.name));
+    const more = all.length > 6 ? ` and ${all.length - 6} more` : "";
+    console.log("");
+    console.log(section("Declared and never used"));
+    console.log(body(`${all.length} variable${all.length === 1 ? "" : "s"} your CSS declares and nothing reads: ${names.join(", ")}${more}. Usually left over from an old theme - yours to delete or keep.`));
 }
 /**
  * OS ESCOPOS QUE VIRARAM UM SISTEMA, e o que cada um perdeu no empate.
@@ -4138,6 +4174,13 @@ const DECIDEM = [
 const NA_TELA_DO_IMPORT = [
     "How this project is organised",
     ...DECIDEM,
+    /**
+     * E AS ÓRFÃS, numa linha (item 15 da bateria, 29/09): no b1 o dev contava três sobras de tema e o import passava
+     * calado. Cabe porque é uma linha só, e ela muda o que ele faz a seguir: apagar ou manter.
+     */
+    "Declared and never used",
+    /** E a mesma cor com vários nomes (item 16 da bateria, 29/09): até três linhas, e cada uma propõe um nome. */
+    "One colour, several names",
 ];
 function sayReach(c) {
     const reach = ladderReach(c.declared);
@@ -4654,6 +4697,20 @@ quiet = false) {
  * token nenhum o sistema inteiro é a semente, e "v1 is your tokens" levava ao contrário. Ver
  * `nao-espelha-o-que-nao-existe.spec.ts`.
  */
+/**
+ * AS CORES QUE O PROJETO NÃO TEM - item 18 da bateria (28/09), liberado por ele em 29/09. No b4 a borda, o sucesso e o
+ * perigo vinham do nosso ponto de partida, e o dev achava que eram dele. O servidor manda quais (`fromSeed`).
+ */
+export function fromSeedLine(roles) {
+    if (roles.length === 0)
+        return null;
+    const list = roles.length === 1
+        ? roles[0]
+        : `${roles.slice(0, -1).join(", ")} or ${roles[roles.length - 1]}`;
+    return roles.length === 1
+        ? `Your code names no ${list} colour, so it comes from our starting point - yours to change on the colours page.`
+        : `Your code names no ${list} colour, so those come from our starting point - yours to change on the colours page.`;
+}
 export function birthLine(name, declared) {
     return declared === 0
         ? `${name} - your code names no token yet, so this system is our starting point, with your colours and sizes measured next to it (listed in the report).`
@@ -5160,6 +5217,15 @@ export async function runImport(opts) {
      */
     if (payload?.primary)
         console.log(body(payload.primary));
+    /**
+     * E AS QUE ELE NÃO TEM (item 18 da bateria, 29/09). Com a porta das cores aberta a frase dela já diz tudo, e com zero
+     * token a frase do nascimento já diz que o sistema inteiro é o ponto de partida - aí esta linha seria repetição.
+     */
+    const seedLine = !payload?.coloursDoor && Object.keys(census.declared ?? {}).length > 0
+        ? fromSeedLine(payload?.fromSeed ?? [])
+        : null;
+    if (seedLine)
+        console.log(body(seedLine));
     /**
      * A PORTA - convite, nunca bloqueio (o ponto 1 que ele aprovou em 28/09). O servidor manda a frase pronta, a mesma
      * que o quadro do sistema mostra, e o link da tela de escolher daquele sistema.

package/dist/commands/sync.js

@@ -405,6 +405,16 @@ export async function remeasure(args) {
      * a frase diz que é o esperado, e o `.lock` guarda isso, para o `align` não pedir de novo.
      */
     if (head?.status === 404) {
+        /**
+         * MAS O 404 TAMBÉM É A RESPOSTA A UMA SESSÃO RECUSADA (29/09): a rota não diz "não te conheço" para não revelar
+         * sistema de ninguém. O token de www.synthesisui.com num sync contra o localhost caía aqui, e o `teste-e09-fechamento`,
+         * que TEM leitura, foi marcado como nunca medido. Antes de concluir, pergunta à sessão.
+         */
+        if (!(await sessionAccepted(base, token))) {
+            console.log(section("Sync"));
+            console.log(body(`${base} does not accept this machine's login, so nothing was re-measured - and nothing was marked. Sign in there and run this again: npx synthesisui login --registry ${base}`));
+            return null;
+        }
         await markNoReading(root, slug);
         console.log(section("Sync"));
         console.log(body(`"${slug}" was not read from a repository - it comes from the gallery or was built on the platform - so there is nothing here to re-measure. That is expected, and this repo will stop asking.`));
@@ -422,10 +432,22 @@ export async function remeasure(args) {
      * SEM CENSO GRAVADO NÃO HÁ O QUE REMEDIR CONTRA. Um sistema que nasceu da galeria não tem escopo
      * nem leitura, e medir o repo dele produziria um censo de um projeto que ninguém mapeou para ele.
      */
+    /**
+     * A LEITURA EXISTE, então uma marca "nunca medido" no `.lock` está errada - a que uma sessão recusada deixou antes de
+     * 29/09 (ver o 404 acima). Sai aqui, para o `align` voltar a pedir o que precisa.
+     */
+    if (stored.hasCensus)
+        await unmarkNoReading(root, slug);
+    /**
+     * O SISTEMA DA GALERIA APRENDE COM O QUE ELE CONSTRÓI - item 8 da bateria (28/09), liberado por ele em 29/09.
+     *
+     * Esta resposta era "did not come from an import (...) Import it first", e no b11 tudo o que o agente construiu em cima
+     * do sistema da galeria ficava fora da plataforma. Sem leitura gravada, a medição vai sobre o repositório inteiro (a
+     * mesma queda de escopo que `scopes` abaixo já faz), e a frase diz que é a primeira.
+     */
     if (!stored.hasCensus) {
         console.log(section("Sync"));
-        console.log(body(`"${slug}" did not come from an import, so there is no measurement to refresh. Import it first: npx synthesisui import`));
-        return null;
+        console.log(body(`This is the first measurement of what this project built on "${slug}" - it came from the gallery, so the platform had not read this repo yet. What you created goes to your system's draft; the system's own colours and type stay as they are.`));
     }
     /**
      * A DISTÂNCIA ATÉ O CLI PUBLICADO, dita onde ele já está.
@@ -1094,6 +1116,32 @@ async function askForScope(root) {
 export async function installedSlug(root) {
     return (await installedSlugs(root))[0] ?? null;
 }
+/** A sessão desta máquina vale em `base`? - a mesma pergunta que o `status` faz. Sem resposta, diz que não. */
+async function sessionAccepted(base, token) {
+    const res = await fetch(`${base}/api/auth/get-session`, {
+        headers: { Authorization: `Bearer ${token}` },
+    }).catch(() => null);
+    if (!res?.ok)
+        return false;
+    const who = (await res.json().catch(() => null));
+    return Boolean(who?.user);
+}
+/** Tira do `.lock` a marca de "sem leitura", quando a plataforma diz que a leitura existe. */
+async function unmarkNoReading(root, slug) {
+    const path = join(root, "_synthesisui", "ds", slug, ".lock");
+    const raw = await readFile(path, "utf8").catch(() => "");
+    if (!raw)
+        return;
+    try {
+        const { reading, ...rest } = JSON.parse(raw);
+        if (reading !== "none")
+            return;
+        await writeFile(path, `${JSON.stringify(rest, null, 2)}\n`, "utf8");
+    }
+    catch {
+        /** Um `.lock` ilegível não é deste passo consertar. */
+    }
+}
 /** Anota no `.lock` que a plataforma não tem leitura deste sistema - ver o 404 em `remeasure`. */
 async function markNoReading(root, slug) {
     const path = join(root, "_synthesisui", "ds", slug, ".lock");

package/dist/doctor/broken-refs.js

@@ -174,3 +174,64 @@ export function findBrokenRefs(sources, declared) {
         b.count - a.count ||
         a.name.localeCompare(b.name));
 }
+const THEME_BLOCK = /@theme\b[^{]*\{[^}]*\}/g;
+const DECLARES_VAR = /(--[a-zA-Z0-9_-]+)\s*:/g;
+const READS_IN_JS = /getPropertyValue\(\s*['"`](--[a-zA-Z0-9_-]+)/g;
+const TAILWIND_SHORT = /\((--[a-zA-Z0-9_-]+)\)/g;
+export function findOrphanVars(css, sources) {
+    const declared = new Set();
+    for (const m of css.replace(THEME_BLOCK, "").matchAll(DECLARES_VAR))
+        declared.add(m[1]);
+    if (declared.size === 0)
+        return [];
+    const used = new Set();
+    for (const text of [css, ...sources.map((s) => s.source)]) {
+        for (const m of text.matchAll(VAR_REF))
+            used.add(m[1]);
+        for (const m of text.matchAll(READS_IN_JS))
+            used.add(m[1]);
+        for (const m of text.matchAll(TAILWIND_SHORT))
+            used.add(m[1]);
+    }
+    return [...declared].filter((n) => !used.has(n)).map((name) => ({ name }));
+}
+const DECLARES_COLOUR = /(--[a-zA-Z0-9_-]+)\s*:\s*(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\))\s*[;}]/g;
+export function findSynonyms(css, sources) {
+    const byValue = new Map();
+    for (const m of css.replace(THEME_BLOCK, "").matchAll(DECLARES_COLOUR)) {
+        const value = m[2].replace(/\s+/g, "").toLowerCase();
+        const names = byValue.get(value) ?? [];
+        if (!names.includes(m[1]))
+            names.push(m[1]);
+        byValue.set(value, names);
+    }
+    const uses = new Map();
+    /** Só nas fontes: a folha `css` é a soma das folhas que também estão lá, e contar as duas dobraria cada leitura. */
+    for (const text of sources.length > 0 ? sources.map((s) => s.source) : [css])
+        for (const m of text.matchAll(VAR_REF))
+            uses.set(m[1], (uses.get(m[1]) ?? 0) + 1);
+    const groups = [];
+    for (const [value, names] of byValue) {
+        if (names.length < 2)
+            continue;
+        groups.push({
+            value,
+            names: names
+                .map((name) => ({ name, uses: uses.get(name) ?? 0 }))
+                .sort((a, b) => b.uses - a.uses),
+        });
+    }
+    return groups.sort((a, b) => b.names.length - a.names.length);
+}
+/** "#2563eb has 4 names: ... Your code reads --brand the most - keeping one would make the rest aliases." */
+export function synonymLine(g) {
+    const listed = g.names
+        .map((n) => `${n.name} (${n.uses > 0 ? `${n.uses}×` : "never read"})`)
+        .join(", ");
+    const top = g.names[0]?.uses ?? 0;
+    const most = g.names.filter((n) => n.uses === top && top > 0).map((n) => n.name);
+    const tail = most.length === 0
+        ? "Nothing reads any of them yet - keeping one would make the rest aliases."
+        : `Your code reads ${most.length === 1 ? most[0] : `${most.slice(0, -1).join(", ")} and ${most[most.length - 1]}`} the most - keeping one would make the rest aliases.`;
+    return `${g.value} has ${g.names.length} names: ${listed}. ${tail}`;
+}

package/dist/merge-census.js

@@ -261,6 +261,13 @@ export function mergeCensus(list) {
          * dele continua lendo o censo como antes.
          */
         scopes: list.map((c, i) => nameOf(c, i)),
+        /**
+         * SEM ÓRFÃS NUM CENSO DE VÁRIOS ESCOPOS: a declarada num escopo pode ser lida no outro, e cada escopo só viu o seu.
+         * Dizer "nunca usada" sem ter olhado tudo seria acusar errado - fica calado (item 15 da bateria, 29/09).
+         */
+        orphanVars: undefined,
+        /** E pelo mesmo motivo os sinônimos: cada escopo contou as leituras só no que viu. */
+        synonyms: undefined,
         declared,
         observed,
         totals,

package/dist/responsive-form.js

@@ -0,0 +1,85 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+const SKIP = new Set([
+    "node_modules",
+    "_synthesisui",
+    ".next",
+    ".git",
+    "dist",
+    "build",
+    "out",
+    ".turbo",
+]);
+/** Um teto, para um monorepo grande não virar uma varredura longa na hora de escrever o bloco. */
+const MAX_FILES = 600;
+const TAILWIND_PREFIX = /\b(?:sm|md|lg|xl|2xl):[a-z-]+/;
+const MEDIA = /@media\b/;
+const MATCH_MEDIA = /\bmatchMedia\s*\(|\buseMediaQuery\s*\(/;
+const INLINE = /\bstyle=\{\{/g;
+const CLASSNAME = /\bclassName=/g;
+async function walk(root) {
+    const out = [];
+    const queue = [root];
+    while (queue.length > 0 && out.length < MAX_FILES) {
+        const dir = queue.shift();
+        const entries = await readdir(dir, { withFileTypes: true }).catch(() => []);
+        for (const e of entries) {
+            if (SKIP.has(e.name))
+                continue;
+            const full = join(dir, e.name);
+            if (e.isDirectory())
+                queue.push(full);
+            else if (/\.(tsx|jsx|ts|js|css|scss|sass|less|html|vue|svelte)$/.test(e.name))
+                out.push(full);
+        }
+    }
+    return out;
+}
+export async function readResponsiveForm(root) {
+    const files = await walk(root);
+    if (files.length === 0)
+        return null;
+    let media = null;
+    let js = null;
+    let inline = 0;
+    let classes = 0;
+    let componentSheets = 0;
+    for (const file of files) {
+        const src = await readFile(file, "utf8").catch(() => "");
+        const rel = relative(root, file);
+        const markup = /\.(tsx|jsx|html|vue|svelte)$/.test(file);
+        const sheet = /\.(css|scss|sass|less)$/.test(file);
+        if (markup && TAILWIND_PREFIX.test(src))
+            return { kind: "tailwind" };
+        if (sheet && !/globals?\.(css|scss)$/.test(file))
+            componentSheets += 1;
+        if (!media && (sheet || markup) && MEDIA.test(src))
+            media = rel;
+        if (!js && /\.(tsx|jsx|ts|js)$/.test(file) && MATCH_MEDIA.test(src))
+            js = rel;
+        if (markup) {
+            inline += src.match(INLINE)?.length ?? 0;
+            classes += src.match(CLASSNAME)?.length ?? 0;
+        }
+    }
+    if (media)
+        return { kind: "media", file: media };
+    if (js)
+        return { kind: "js", file: js };
+    return { kind: "none", inline: inline > classes && componentSheets === 0 };
+}
+/** A frase para o bloco do agente - uma, curta, com o fato medido e o que fazer. */
+export function responsiveLine(form) {
+    switch (form.kind) {
+        case "tailwind":
+            return "**This project makes screens responsive with Tailwind prefixes** (`md:`, `lg:`). Use the same prefixes for a breakpoint - never a new stylesheet or a `matchMedia` hook for it.";
+        case "media":
+            return `**This project makes screens responsive with \`@media\` in its stylesheets** - see \`${form.file}\`. Put a new breakpoint in the stylesheet of the component that needs it, the same way.`;
+        case "js":
+            return `**This project makes screens responsive in code**, with \`matchMedia\` - see \`${form.file}\`. Reuse that for a new breakpoint instead of adding a stylesheet.`;
+        case "none":
+            return form.inline
+                ? "**This project has no breakpoint yet, and it styles inline** (`style={{}}`). If a screen needs one, keep the form: a small `matchMedia` hook next to the component, not a new stylesheet - and say that you added it."
+                : "**This project has no breakpoint yet.** If a screen needs one, add it in the form this project already styles with, and say that you added it.";
+    }
+}

package/package.json

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