synthesisui 0.16.512 → 0.16.514

package/dist/commands/hook.js

@@ -17,6 +17,8 @@ import { readMode } from "../mode.js";
 import { namesRemoved, previousText, rulesTouchedBy, } from "../rule-touched.js";
 import { loadSystem } from "./doctor.js";
 import { takeGrowthNote } from "../what-grew.js";
+import { readProjectConfig } from "../config.js";
+import { generatedTells, tellsText } from "../generated-tells.js";
 const pass = () => ({ continue: true });
 const speak = (context) => ({
     continue: true,
@@ -765,6 +767,26 @@ async function endOfTurn(root, input) {
         ? await checkChanged(root, changed, mode, "turn")
         : { said: [] };
     /** O que o sync destacado do turno anterior mandou para o rascunho - dito uma vez (re-rodada, 28/09). */
+    /**
+     * OS SINAIS DE PÁGINA FEITA POR IA (jornada "as camadas de design com fonte", E04, 24/10): só os que as fontes
+     * concordam, cada um com a fonte e o que fazer no lugar - ver `generated-tells.ts`. Um sistema que veio do código dela
+     * (o `intent` do config) não ouve: o hábito do código dela vence a regra de fora.
+     */
+    const imported = Boolean((await readProjectConfig(root).catch(() => null))?.intent);
+    if (!imported && changed.length > 0) {
+        const found = [];
+        for (const { rel } of changed.filter((c) => SCREEN.test(c.rel)).slice(0, REFUSAL_CEILING)) {
+            const src = await readFile(join(root, rel), "utf8").catch(() => null);
+            if (src == null)
+                continue;
+            const tells = generatedTells(src);
+            if (tells.length > 0)
+                found.push({ rel, tells });
+        }
+        const text = tellsText(found);
+        if (text)
+            said.push(text);
+    }
     const grown = await takeGrowthNote(root).catch(() => null);
     if (grown)
         said.push(grown);

package/dist/generated-tells.js

@@ -0,0 +1,122 @@
+/**
+ * OS SINAIS DE PÁGINA FEITA POR IA - jornada "as camadas de design com fonte", E04 (24/10). Desenho aprovado em 16/10
+ * (o aviso do fim do turno, v4 de https://claude.ai/artifact/KLxJLPXaZokMjgQKBkcGtf).
+ *
+ * São só os sinais em que as fontes CONCORDAM, cada um com a fonte e o commit lidos - os mesmos do registro do site
+ * (`apps/web/src/lib/design-layers/registry.ts`) - e o que fazer no lugar. A checagem lê o código que o turno escreveu,
+ * não a tela: o que ela não consegue ler com segurança no código, ela não acusa.
+ *
+ * QUEM NÃO OUVE: um sistema que veio do código da pessoa (o `intent` do config, adopt/migrate). O desenho é dele: "sistema
+ * IMPORTADO: nada muda; ligar é dele" - o hábito do código dela vence a regra de fora.
+ */
+const SOURCE = {
+    label: "taste-skill f624f37: on 16% of the strongest sites, 57% of the weakest",
+    gradientText: "impeccable 6af45ac and taste-skill f624f37: gradient text on 2% of the strongest sites, 13% of the weakest",
+    bounce: "impeccable 6af45ac and taste-skill f624f37 (motion.md: bounce and elastic easing are banned)",
+    sameFade: "taste-skill f624f37 (motion.md: the most cited motion tell) and design-motion-principles 4a9ca87",
+};
+const lineOf = (src, index) => src.slice(0, index).split("\n").length;
+const excerpt = (s) => {
+    const one = s.replace(/\s+/g, " ").trim();
+    return one.length > 90 ? `${one.slice(0, 87)}...` : one;
+};
+/** O rótulo: um elemento curto em maiúsculas com espaçamento de letra, logo antes de um título. */
+const LABEL = /<([a-z][\w.]*)\b[^>]*\bclassName=(?:"([^"]*)"|\{`([^`]*)`\})[^>]*>([^<{}]{1,200})<\/\1>\s*(?:\{\/\*[\s\S]*?\*\/\}\s*)?<(?:h[1-3]|Heading|DsHeading)\b/g;
+/** O gradiente no texto: o fundo recortado no texto e um gradiente no mesmo lugar. */
+const GRADIENT_TEXT_CLASS = /className=(?:"([^"]*)"|\{`([^`]*)`\})/g;
+const GRADIENT_TEXT_STYLE = /background-clip:\s*text|backgroundClip:\s*["']text["']|WebkitBackgroundClip:\s*["']text["']/g;
+/** O easing que quica: o do gsap pelo nome, e a curva que passa do fim. */
+const BOUNCE_NAME = /\bease\s*:\s*["'](bounce|elastic|back)(?:\.\w+)?(?:\([^)]*\))?["']/g;
+const OVERSHOOT = /cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/g;
+/** A mesma entrada: cada seção marcada para entrar do mesmo jeito. */
+const REVEAL = /\bdata-reveal\b|\bwhileInView=/g;
+const SAME_FADE_AT = 4;
+export function generatedTells(src) {
+    const tells = [];
+    for (const m of src.matchAll(LABEL)) {
+        const cls = m[2] ?? m[3] ?? "";
+        if (!/\buppercase\b/.test(cls) || !/\btracking-|letter-spacing/.test(cls))
+            continue;
+        /* O texto vem quebrado em linhas com recuo no JSX real ("Ceramics studio &amp; school", Kiln & Clay de 12/10): o
+           limite de rótulo é para o texto, não para o recuo. */
+        if (m[4].replace(/\s+/g, " ").trim().length > 48)
+            continue;
+        tells.push({
+            line: lineOf(src, m.index ?? 0),
+            what: "a small uppercase label above a heading",
+            excerpt: excerpt(`${m[4]}`),
+            instead: "put it in the heading or the first sentence, or drop it",
+            source: SOURCE.label,
+        });
+    }
+    for (const m of src.matchAll(GRADIENT_TEXT_CLASS)) {
+        const cls = m[1] ?? m[2] ?? "";
+        if (!/\bbg-clip-text\b/.test(cls) ||
+            !/\bbg-(gradient|linear|radial)-|\bfrom-/.test(cls))
+            continue;
+        tells.push({
+            line: lineOf(src, m.index ?? 0),
+            what: "gradient on text",
+            excerpt: excerpt(cls),
+            instead: "set the text in one colour from the system; let size and weight carry the emphasis",
+            source: SOURCE.gradientText,
+        });
+    }
+    for (const m of src.matchAll(GRADIENT_TEXT_STYLE)) {
+        const around = src.slice(Math.max(0, (m.index ?? 0) - 240), (m.index ?? 0) + 240);
+        if (!/gradient\(/.test(around))
+            continue;
+        tells.push({
+            line: lineOf(src, m.index ?? 0),
+            what: "gradient on text",
+            excerpt: excerpt(m[0]),
+            instead: "set the text in one colour from the system; let size and weight carry the emphasis",
+            source: SOURCE.gradientText,
+        });
+    }
+    for (const m of src.matchAll(BOUNCE_NAME)) {
+        tells.push({
+            line: lineOf(src, m.index ?? 0),
+            what: `a ${m[1]} easing`,
+            excerpt: excerpt(m[0]),
+            instead: "use the system's motion easing - things settle, they do not bounce",
+            source: SOURCE.bounce,
+        });
+    }
+    for (const m of src.matchAll(OVERSHOOT)) {
+        const y1 = Number(m[2]);
+        const y2 = Number(m[4]);
+        if (!(y1 > 1 || y1 < 0 || y2 > 1 || y2 < 0))
+            continue;
+        tells.push({
+            line: lineOf(src, m.index ?? 0),
+            what: "an easing that overshoots (it bounces past the end)",
+            excerpt: excerpt(m[0]),
+            instead: "use the system's motion easing - things settle, they do not bounce",
+            source: SOURCE.bounce,
+        });
+    }
+    const reveals = [...src.matchAll(REVEAL)];
+    if (reveals.length >= SAME_FADE_AT)
+        tells.push({
+            line: lineOf(src, reveals[0].index ?? 0),
+            what: `every section enters the same way (${reveals.length} marked to reveal)`,
+            excerpt: excerpt(reveals[0][0]),
+            instead: "give the entrance to the two or three sections that carry the story; the rest sit at rest",
+            source: SOURCE.sameFade,
+        });
+    return tells.sort((a, b) => a.line - b.line);
+}
+/** O bloco que o fim do turno entrega ao agente: por arquivo, o sinal, a linha, o que fazer no lugar e a fonte. */
+export function tellsText(found) {
+    const total = found.reduce((n, f) => n + f.tells.length, 0);
+    if (total === 0)
+        return null;
+    const lines = [
+        `SynthesisUI · ${total} thing${total === 1 ? "" : "s"} on this page look${total === 1 ? "s" : ""} generated`,
+    ];
+    for (const { rel, tells } of found)
+        for (const t of tells)
+            lines.push("", `  ${rel}:${t.line}  ${t.what}`, `    ${t.excerpt}`, `    -> ${t.instead}`, `    rule from ${t.source}`);
+    return lines.join("\n");
+}

package/dist/install-marks.js

@@ -355,7 +355,13 @@
  * bloco do `CLAUDE.md` ensina a leitura da primeira tela em vez do `/sui-import-ds`; com o `rules.json` e o impeccable no
  * projeto, diz que o revisor dele é só da criação. Uma pasta escrita antes manda o agente importar e não fala do revisor.
  */
-export const MATERIALISER_SINCE = "0.16.508";
+/**
+ * 0.16.508 -> 0.16.513 em 24/10, e o passo 1 dá **SIM** (a largura não vira espaço): o `init` declara
+ * `--max-width-<nome>: var(--container-<nome>)` para cada espaçamento do sistema com nome de tamanho de contêiner. Uma pasta
+ * escrita antes deixa `max-w-xl` virar `var(--spacing-xl)` - no Post Proof, 3rem e um título com uma palavra por linha.
+ * O conserto ficou numa branch local de 16/10 a 24/10 (jornada "o estado da arte do design"); 0.16.500 saiu sem ele.
+ */
+export const MATERIALISER_SINCE = "0.16.513";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *
@@ -592,7 +598,12 @@ export const COUNTED_DIFFERENTLY = "this run counts a value as named only when Y
  * E (E02, no mesmo PR) guarda o tamanho de título sem papel para a próxima leitura perguntar, e cobra o papel que a pessoa
  * escolheu no "não" (`decided` no rules.json): um hook pinado antes diz "papel novo" uma vez e nunca cobra.
  */
-export const CHECKER_SINCE = "0.16.506";
+/**
+ * 0.16.506 -> 0.16.514 em 24/10 (jornada "as camadas de design com fonte", E04), e o passo 1 dá **SIM**: o fim do turno
+ * passa a acusar os sinais de página feita por IA em que as fontes concordam (o rótulo acima do título, o gradiente no
+ * texto, o easing que quica, a mesma entrada em toda seção - `generated-tells.ts`). Um hook pinado antes não os cobra.
+ */
+export const CHECKER_SINCE = "0.16.514";
 /**
  * A ÚLTIMA VERSÃO EM QUE OS LEITORES PASSARAM A PRODUZIR UM CENSO DIFERENTE.
  *

package/dist/new-project-theme.js

@@ -79,6 +79,37 @@ function theirNameFor(ours) {
         return `--duration-${m[1]}`;
     return null;
 }
+/**
+ * A LARGURA NÃO VIRA ESPAÇO (16/10, medido no experimento das camadas). No Tailwind v4, `max-w-<nome>` lê o
+ * `--spacing-<nome>` quando ele existe, antes do `--container-<nome>`: o Post Proof escreve `--spacing-xl: 3rem`, e o
+ * `max-w-xl` que o agente usava como largura de leitura (36rem) virava 3rem - títulos com uma palavra por linha.
+ * Declarar `--max-width-<nome>` faz o `max-w-*` voltar a ser largura; `px-xl`, `gap-xl` e o resto continuam no espaçamento
+ * do sistema (testado no Tailwind 4.3.3).
+ */
+const CONTAINER_SIZES = new Set([
+    "3xs",
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+]);
+export function widthGuards(names) {
+    const out = [];
+    for (const n of names) {
+        const m = /^--spacing-(.+)$/.exec(n);
+        if (m && CONTAINER_SIZES.has(m[1]))
+            out.push(`  --max-width-${m[1]}: var(--container-${m[1]});`);
+    }
+    return out;
+}
 export async function writeNewProjectTheme(root, tokensCss, slug, version) {
     const sheets = await sheetsOf(root);
     const own = new Set();
@@ -116,6 +147,7 @@ export async function writeNewProjectTheme(root, tokensCss, slug, version) {
         open(`${slug} v${version}: the system's values under the names Tailwind turns into utilities. They are yours now - change a value here and every component follows. Written by \`init\`, because this project had no tokens of its own.`),
         "@theme {",
         ...lines,
+        ...widthGuards(system.keys()),
         "}",
         ...(next.length > 0 ? ["", ":root {", ...next, "}"] : []),
         end(slug),
@@ -286,7 +318,11 @@ async function readTheirs(root, slug) {
  * (`--container-*`), e o par vai para o `.lock`: a seção materializada escreve `var(--container-page)`, e a pessoa muda a
  * largura num lugar só. O valor é o MESMO do catálogo - `page-width-twin.spec.ts` compara os dois.
  */
-export const PAGE_WIDTH = { ours: "--ds-layout-page-width", theirs: "--container-page", value: "1440px" };
+export const PAGE_WIDTH = {
+    ours: "--ds-layout-page-width",
+    theirs: "--container-page",
+    value: "1440px",
+};
 function systemPairs(tokensCss, lookup = new Map()) {
     const { names, values } = tongueOf([], tokensCss);
     const out = [];
@@ -410,7 +446,13 @@ export async function writeBesideTheirs(root, tokensCss, slug, version, where) {
         begin(slug),
         open(`${slug} v${version}, beside your own tokens. The @theme adds only the names your project did not have; inside the data-theme selector below every value is the system's, including the names you already use, which keep their value everywhere else. Written by \`init\`, where you chose.`),
         ...(missing.length > 0
-            ? ["@theme {", ...missing.map(([n, v]) => `  ${n}: ${v};`), "}", ""]
+            ? [
+                "@theme {",
+                ...missing.map(([n, v]) => `  ${n}: ${v};`),
+                ...widthGuards(missing.map(([n]) => n)),
+                "}",
+                "",
+            ]
             : []),
         `[data-theme="${slug}"] {`,
         ...scoped,

package/package.json

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