synthesisui 0.16.501 → 0.16.503

package/dist/claude-md.js

@@ -10,7 +10,7 @@ import { readResponsiveForm, responsiveLine } from "./responsive-form.js";
  * A LEITURA - o caminho do sistema desde a fase 1 (18/10). Escrita uma vez e usada nos dois contratos: o de quem já tem
  * sistema sem `rules.json` e o de quem chegou pela porta e ainda não tem sistema nenhum (fase 2).
  */
-const READ_THE_PAGE = "**Once the first screen is done, offer to read it - once.** If their next message does not take the offer up, do not offer it again; they can still ask. When the person asks you to read their page - or right after the creation of the first screen ends (with impeccable, once it has written `DESIGN.md`; never while it still asks for another round) - run `npx synthesisui read` with the dev server up, tell them in a few lines the system it found, then ask the questions in `_synthesisui/reading.json` ONE AT A TIME with your question tool (the first option is the default). Save their answers as `{ \"<question id>\": <option index> }` and run `npx synthesisui read --confirm <that file>`: their answers become the roles and breaks this project keeps.";
+const READ_THE_PAGE = "**Once the first screen is done, offer to read it - once.** If their next message does not take the offer up, do not offer it again; they can still ask. When the person asks you to read their page - or right after the creation of the first screen ends (with impeccable, once it has written `DESIGN.md`; never while it still asks for another round) - run `npx synthesisui read` with the dev server up, tell them in a few lines the system it found, then ask ALL the questions in `_synthesisui/reading.json` TOGETHER, in one call of your question tool (up to 4 per call; more go in a second call), in plain words and quoting the text on the page each one is about (the first option is the default). Save their answers as `{ \"<question id>\": <option index> }` and run `npx synthesisui read --confirm <that file>`: their answers become the roles and breaks this project keeps.";
 /** A frase do revisor depois da criação - ver o comentário em `renderRegion`, junto dos papéis. */
 const REVIEWER_AFTER_CREATION = "\n\n**How a change closes here.** The visual world is decided - the roles and breaks above. From here on SynthesisUI's check closes a change (`check_file`, and the end-of-turn check). Impeccable's reviewer is for creating: spawn `impeccable-finish-reviewer` or run `impeccable detect` only when the person asks for a new visual direction or a large new surface with its own look - never as the routine close of a change, and never its degraded self-review in its place.";
 const START = "<!-- synthesisui:start -->";

package/dist/commands/read.js

@@ -8,7 +8,7 @@ import { join, relative } from "node:path";
 import { classify, pixelRatio } from "../reading/classify.js";
 import { PAGE_SCRIPT } from "../reading/page-script.js";
 import { decodePng } from "../reading/png.js";
-import { moduleClassName, pxOf } from "../role-rules.js";
+import { globalClassOf, globalStyles, moduleClassName, pxOf } from "../role-rules.js";
 import { agentsToMaintain } from "../agents-chosen.js";
 import { syncClaudeMd } from "../claude-md.js";
 import { projectRootFrom } from "./hook.js";
@@ -134,15 +134,25 @@ function moduleOf(cls, files) {
     }
     return null;
 }
+let stylesOf = null;
 function homeOf(root, files, t) {
-    const mod = sizeClassOf(t.cls) ? null : moduleOf(t.cls, files);
-    const cls = sizeClassOf(t.cls) ?? mod?.name ?? null;
+    const sized = sizeClassOf(t.cls);
+    /* a classe global (o juízo dele, 19/10): `className="section-title"` com o tamanho no globals.css - a do elemento
+       primeiro, depois a do pai (o `<h3>` sem classe dentro de `.route`, medido em `.route h3`) */
+    if (!sized && stylesOf?.root !== root)
+        stylesOf = { root, styles: globalStyles(root) };
+    const glob = sized || moduleOf(t.cls, files) ? null
+        : globalClassOf(t.cls.split(" | ").flatMap((part) => part.split(/\s+/)), stylesOf?.styles ?? []);
+    const mod = sized ? null : (moduleOf(t.cls, files) ?? (glob ? { name: glob.name, local: glob.local } : null));
+    const cls = sized ?? mod?.name ?? null;
     const lineOf = (f) => {
         if (!cls)
             return null;
         const lines = readFileSync(f, "utf8").split("\n");
         const i = mod
-            ? lines.findIndex((l) => new RegExp(`\\b\\w+(?:\\.${mod.local}\\b|\\[["']${mod.local}["']\\])`).test(l))
+            ? lines.findIndex((l) => glob
+                ? new RegExp(`className=[^>]*?(?<![\\w-])${mod.local.replace(/-/g, "\\-")}(?![\\w-])`).test(l)
+                : new RegExp(`\\b\\w+(?:\\.${mod.local}\\b|\\[["']${mod.local}["']\\])`).test(l))
             : lines.findIndex((l) => l.includes(cls));
         return i >= 0 ? i + 1 : null;
     };
@@ -164,6 +174,17 @@ function homeOf(root, files, t) {
  * "5-8 perguntas por projeto, não 300"). As quebras vêm primeiro: dizer sim à própria assinatura é o caminho feliz. A
  * primeira opção é sempre a padrão, e é o que vale quando a pessoa não responde.
  */
+/**
+ * O TEXTO QUE A PESSOA VÊ NA PÁGINA - o juízo dele (19/10): "O título de capa passa bem acima da escala (180px contra
+ * 70px)" pede que ela ache sozinha qual título é. Com o texto ("TRILHO 07") ela reconhece na hora. `seen` vem como
+ * "rota: texto"; até 40 caracteres.
+ */
+function quoted(seen) {
+    const t = seen?.[0]?.replace(/^[^:]*:\s*/, "").trim();
+    if (!t)
+        return "this";
+    return `"${t.length > 40 ? `${t.slice(0, 39)}…` : t}"`;
+}
 /** O nome que a pessoa entende - nunca o rótulo interno da classificação ("h3 de cartão", "número"). */
 function plainRole(role) {
     if (role === "número")
@@ -174,10 +195,10 @@ function plainRole(role) {
         return "block";
     return nameOf(role);
 }
-function questionsFor(breaks, drift) {
+export function questionsFor(breaks, drift) {
     const qs = breaks.map((b) => ({
         id: `break:${b.rule}:${b.role}:${b.px}`,
-        text: `Is this on purpose? The ${plainRole(b.role)} ${b.rule === "Q2" ? "is tilted off the grid" : b.rule === "Q3" ? "is a big motif, outside the headings" : "goes above the heading scale"} (${b.what}).`,
+        text: `Is ${quoted(b.seen)} on purpose? The ${plainRole(b.role)} ${b.rule === "Q2" ? "is tilted off the grid" : b.rule === "Q3" ? "is a big motif, outside the headings" : "goes above the heading scale"} (${b.what}).`,
         options: ["Yes, it is part of my design", "No, make it follow the scale"],
     }));
     const groups = new Map();
@@ -260,6 +281,10 @@ export async function confirm(opts) {
     writeFileSync(join(dsDir, slug, "rules.json"), `${JSON.stringify(rules, null, 2)}\n`);
     const contract = await syncClaudeMd(root, await agentsToMaintain(root));
     say(`Your system: ${roles.length} roles and ${breaks.length} breaks, written to _synthesisui/ds/${slug}/rules.json.`);
+    /* NUNCA CALADO (o juízo dele, 19/10): um papel lido sem a classe que o identifica no código fica fora - e isso se diz */
+    const unplaced = R.roles.filter((r) => !r.home?.cls);
+    if (unplaced.length > 0)
+        say(`Left out: ${unplaced.map((r) => `${r.role.split(" ")[0]} ${r.px}px`).join(", ")} - the page shows ${unplaced.length === 1 ? "it" : "them"}, but no class in the code says where ${unplaced.length === 1 ? "it is" : "they are"}, so the check could not hold ${unplaced.length === 1 ? "it" : "them"}.`);
     say(contract ? "The contract your agent reads now lists them - every heading is checked against its role at the end of each turn." : "Run `synthesisui connect` so your agent reads and checks it.");
 }
 export async function read(opts) {

package/dist/role-rules.js

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { basename, dirname, extname, join } from "node:path";
 export async function loadRoleRules(root) {
@@ -76,6 +76,11 @@ function moduleClasses(attrs, imports) {
     }
     return out;
 }
+/** As classes escritas como texto em `className="a b"` (ou num template sem expressão no meio do nome). */
+function plainClasses(attrs) {
+    const lit = attrs.match(/className=\{?\s*["'`]([^"'`]*)["'`]/)?.[1] ?? "";
+    return lit.split(/\s+/).filter((t) => /^[A-Za-z_][\w-]*$/.test(t));
+}
 /** O `font-size` de uma classe dentro do `.module.css` - o maior de um `clamp()` (o desktop), `rem` a 16px. */
 export function modulePx(css, local) {
     let best = null;
@@ -96,6 +101,60 @@ export function modulePx(css, local) {
     }
     return best;
 }
+/**
+ * A CLASSE GLOBAL - achado no juízo dele (19/10, a landing da Naiker, `synthesisui-tests/juizo-porta`): o impeccable
+ * escreveu os títulos com classes comuns, `className="section-title"`, e o tamanho no `globals.css`. A leitura achou os
+ * papéis (h1 180, h2 70,4, h3 28,8) e o `--confirm` gravou ZERO, calado - o mesmo defeito do CSS Modules (porta-2) numa
+ * terceira forma de escrever estilo.
+ *
+ * A identidade é a mesma forma do módulo: o arquivo e a classe, `globals.css .section-title`. Vale a classe que tem um
+ * `font-size` numa folha de estilo comum do projeto (não `.module.css`), na ordem em que vem - a do próprio elemento
+ * primeiro.
+ */
+export function globalStyles(root) {
+    const out = [];
+    const walk = (d) => {
+        let names = [];
+        try {
+            names = readdirSync(d);
+        }
+        catch {
+            return;
+        }
+        for (const n of names) {
+            if (n === "node_modules" || n.startsWith(".") || n === "_synthesisui" || n === "public")
+                continue;
+            const p = join(d, n);
+            let dir = false;
+            try {
+                dir = statSync(p).isDirectory();
+            }
+            catch {
+                continue;
+            }
+            if (dir)
+                walk(p);
+            else if (/\.s?css$/.test(n) && !/\.module\.s?css$/.test(n))
+                out.push({ file: n, css: readFileSync(p, "utf8") });
+        }
+    };
+    walk(existsSync(join(root, "src")) ? join(root, "src") : root);
+    if (existsSync(join(root, "app")) && existsSync(join(root, "src")))
+        walk(join(root, "app"));
+    return out;
+}
+export function globalClassOf(tokens, styles) {
+    for (const tok of tokens) {
+        if (!/^[A-Za-z_][\w-]*$/.test(tok))
+            continue;
+        for (const st of styles) {
+            const px = modulePx(st.css, tok);
+            if (px !== null)
+                return { name: moduleClassName(st.file, tok), local: tok, px };
+        }
+    }
+    return null;
+}
 /** Dentro de um `.map(` ainda aberto = o título se repete = é de cartão. A mesma pergunta que a régua faz ao DOM. */
 function insideMap(src, at) {
     const before = src.slice(0, at);
@@ -121,6 +180,9 @@ export function checkRoles(rel, src, rules, root) {
             cssOf.set(file, existsSync(file) ? readFileSync(file, "utf8") : "");
         return modulePx(cssOf.get(file), local);
     };
+    /** As folhas de estilo comuns do projeto, lidas uma vez e só se algum título usar classe sem tamanho do Tailwind. */
+    let globals = null;
+    const styles = () => (globals ??= root ? globalStyles(root) : []);
     const component = basename(rel, extname(rel));
     const known = new Set((rules.knownDrift ?? []).filter((d) => d.at.startsWith(rel)).map((d) => d.class));
     const section = rules.roles.find((r) => r.element === "h2" && r.context === "section");
@@ -128,7 +190,8 @@ export function checkRoles(rel, src, rules, root) {
     for (const m of src.matchAll(/<(h1|h2|h3)\b([^>]*)>/g)) {
         const el = m[1];
         const mod = sizeClass(m[2]) ? null : (moduleClasses(m[2], imports)[0] ?? null);
-        const cls = sizeClass(m[2]) ?? mod?.name ?? null;
+        const glob = sizeClass(m[2]) || mod ? null : globalClassOf(plainClasses(m[2]), styles());
+        const cls = sizeClass(m[2]) ?? mod?.name ?? glob?.name ?? null;
         if (!cls)
             continue;
         const line = src.slice(0, m.index).split("\n").length;
@@ -141,7 +204,7 @@ export function checkRoles(rel, src, rules, root) {
             continue;
         if (known.has(bare))
             continue;
-        const px = mod ? pxOfModule(mod.path, mod.local) : pxOf(bare);
+        const px = mod ? pxOfModule(mod.path, mod.local) : glob ? glob.px : pxOf(bare);
         const role = mine.find((r) => r.context === context) ?? mine[0];
         const brk = rules.breaks.find((b) => b.class === bare);
         if (brk) {
@@ -184,7 +247,8 @@ export function checkRoles(rel, src, rules, root) {
                 continue;
             const cls = m[2].match(/className=\{?\s*["'`]([^"'`]*)["'`]/)?.[1] ?? "";
             const mods = moduleClasses(m[2], imports).map((c) => c.name);
-            if (!` ${cls} `.includes(` ${b.class} `) && !mods.includes(b.class))
+            const globs = b.class.includes(" .") && !b.class.includes(".module.") ? cls.split(/\s+/).filter(Boolean).map((t) => globalClassOf([t], styles())?.name) : [];
+            if (!` ${cls} `.includes(` ${b.class} `) && !mods.includes(b.class) && !globs.includes(b.class))
                 continue;
             const line = src.slice(0, m.index).split("\n").length;
             if (said.has(`${line} ${b.class}`))

package/package.json

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