synthesisui 0.16.409 → 0.16.411

package/dist/anatomy-from-sketch.js

@@ -27,6 +27,7 @@
  * retyped ten-class string is where a `hover:` goes missing, and six components
  * lost their states to exactly that (audit, dono, 01/08).
  */
+import { displayFromClasses } from "./display-from-class.js";
 import { frontierOf, rendersNothing, } from "./frontier-kind.js";
 /** An svg's insides are geometry, not anatomy: the glyph is the node. */
 const SVG_INTERNALS = new Set([
@@ -182,12 +183,23 @@ const NEUTRAL = new Set([
     "nav",
     "details",
 ]);
-/** `flex-col`, `grid` and `block` arrange DOWN; a bare `flex` arranges ACROSS. */
+/**
+ * `flex-col`, `grid` and `block` arrange DOWN; a bare `flex` arranges ACROSS.
+ *
+ * ONE READING OF THE BOX, not two. This used to run its own regex over the class string
+ * while `transcribe` ran another, and the two answers disagreed by construction: the form
+ * is a lossy reduction of `display` - it says "across or down" and drops the difference
+ * between a grid and a column. Both now come off the same table, so the form is DERIVED
+ * from the declaration instead of being a second opinion about it.
+ */
 function arrangement(classes) {
-    const list = ` ${classes ?? ""} `;
-    if (/\s(flex-col|flex-col-reverse|grid|block|table)\s/.test(list))
+    const box = displayFromClasses(classes);
+    const direction = box.flexDirection;
+    if (direction === "column" || direction === "column-reverse")
         return "stack";
-    if (/\s(flex|inline-flex|flex-row|flex-row-reverse)\s/.test(list))
+    if (direction === "row" || direction === "row-reverse")
+        return "row";
+    if (box.display === "flex" || box.display === "inline-flex")
         return "row";
     return "stack";
 }

package/dist/commands/doctor.js

@@ -1090,42 +1090,90 @@ export async function doctor(opts) {
              */
             const perApp = await readWiringPerApp(root, table.slug, config.pagesDir);
             const targets = perApp.length > 0 ? perApp : [{ app: null, wiring }];
-            console.log("");
-            console.log(body("Paste this into your agent - it does the setup for you:"));
+            /**
+             * OS APPS QUE PEDEM A MESMA COISA VIRAM UM BLOCO SÓ, nomeando os dois.
+             *
+             * O DEFEITO, e ele é meu, do PR de algumas horas atrás: no `codelevel-monorepo` os DOIS apps
+             * resolvem para a MESMA folha (`packages/ui/src/styles/globals.css`, o pacote compartilhado),
+             * então o comando imprimiu a mesma instrução de 40 linhas DUAS VEZES, com o mesmo caminho e o
+             * mesmo prefixo. O dono leu a parede duas vezes (medido no repositório dele, 09/09).
+             *
+             * Eu tinha escrito o aviso no comentário abaixo - *"num monorepo ele apareceria em escala:
+             * dois blocos idênticos"* - sobre o caso do app JÁ FIADO, e entreguei a duplicata no caso do
+             * que ainda falta. Nomear cada app foi o conserto certo; repetir a instrução não.
+             *
+             * A CHAVE É A INSTRUÇÃO, não o app: dois apps com a mesma folha, o mesmo prefixo e os mesmos
+             * passos pendentes recebem uma instrução só. Um monorepo onde cada app tem folha própria volta
+             * a receber uma por app, porque ali as instruções DIFEREM - é a resposta derivada, e não uma
+             * regra sobre quantos apps existem.
+             */
+            const blocks = new Map();
             for (const { app, wiring: w } of targets) {
                 const sheet = app
                     ? await globalSheetOf(root, `${app}/globals.css`)
                     : null;
                 /**
                  * O APP QUE JÁ ESTÁ FIADO SAI DA LISTA, nomeado. Repetir o setup para quem já o fez é o
-                 * defeito de 08/09 outra vez, e num monorepo ele apareceria em escala: dois blocos
-                 * idênticos, um deles cobrando o que já está colado.
+                 * defeito de 08/09 outra vez.
                  */
                 const pending = !w.imported || !w.scoped || (w.fontsWritten && !w.fontsMapped);
-                if (targets.length > 1) {
+                const text = pending
+                    ? setupPrompt(table.slug, {
+                        tokens: !w.imported,
+                        scope: !w.scoped,
+                        /** Só é passo quando o projeto TEM o arquivo de fontes - ver `readWiring`. */
+                        type: w.fontsWritten && !w.fontsMapped,
+                        ...(sheet
+                            ? { sheet: { path: sheet, prefix: prefixFrom(sheet) } }
+                            : {}),
+                        /**
+                         * DUAS LINHAS COM TAILWIND, UMA SEM - a mesma decisão que o `add` já toma pelo
+                         * projeto. Dizer "as duas linhas" a um projeto que precisa de uma manda o agente
+                         * procurar o que não existe.
+                         */
+                        imports: config.styles === "css" ? 1 : 2,
+                    }).split("\n")
+                    : [];
+                const key = `${pending ? "p" : "ok"}|${text.join("\n")}`;
+                const found = blocks.get(key);
+                if (found)
+                    found.apps.push(app ?? "");
+                else
+                    blocks.set(key, { apps: [app ?? ""], text, pending });
+            }
+            const anyPending = [...blocks.values()].some((b) => b.pending);
+            if (anyPending) {
+                console.log("");
+                console.log(body("Paste this into your agent - it does the setup for you:"));
+            }
+            for (const { apps, text, pending } of blocks.values()) {
+                const named = apps.filter(Boolean);
+                /**
+                 * O CABEÇALHO SÓ APARECE QUANDO HÁ MAIS DE UM APP no projeto - com um só ele seria cerimônia
+                 * sobre uma lista de um, e a maioria dos projetos é assim. Com vários, ele diz de QUEM é a
+                 * instrução, e o plural sai naturalmente: "apps/landing/app and apps/web/app".
+                 */
+                if (targets.length > 1 && named.length > 0) {
+                    /**
+                     * A LISTA SE LÊ EM VOZ ALTA, e o número dela não é fixo: "A and B" com dois,
+                     * "A, B and C" com três. `join(" and ")` daria "A and B and C", e `"both"` mentiria
+                     * no dia em que o monorepo tiver três apps na mesma folha - o mesmo erro de
+                     * dimensionar pela amostra, na escala de uma palavra.
+                     */
+                    const lista = named.length > 1
+                        ? `${named.slice(0, -1).join(", ")} and ${named[named.length - 1]}`
+                        : named[0];
                     console.log("");
-                    console.log(body(pending
-                        ? `  ${app} - still needs it`
-                        : `  ${app} - already wired, nothing to paste`));
+                    console.log(body(`  ${lista} - ${pending
+                        ? named.length > 1
+                            ? "need it, and the steps are the same"
+                            : "still needs it"
+                        : "already wired, nothing to paste"}`));
                 }
                 if (!pending)
                     continue;
                 console.log("");
-                console.log(snippet(setupPrompt(table.slug, {
-                    tokens: !w.imported,
-                    scope: !w.scoped,
-                    /** Só é passo quando o projeto TEM o arquivo de fontes - ver `readWiring`. */
-                    type: w.fontsWritten && !w.fontsMapped,
-                    ...(sheet
-                        ? { sheet: { path: sheet, prefix: prefixFrom(sheet) } }
-                        : {}),
-                    /**
-                     * DUAS LINHAS COM TAILWIND, UMA SEM - a mesma decisão que o `add` já toma pelo
-                     * projeto. Dizer "as duas linhas" a um projeto que precisa de uma manda o agente
-                     * procurar o que não existe.
-                     */
-                    imports: config.styles === "css" ? 1 : 2,
-                }).split("\n")));
+                console.log(snippet(text));
             }
         }
     }

package/dist/display-from-class.js

@@ -0,0 +1,68 @@
+/**
+ * O DISPLAY QUE O CLIENTE ESCREVEU, LIDO DE UM CLASS STRING - a tabela, num lugar só.
+ *
+ * O QUE O CLIENTE GANHA: o preview desenha a caixa que ele declarou, e não a que a
+ * plataforma teria adivinhado. `display` é a declaração que decide se o componente dele é
+ * uma linha, uma coluna, uma grade ou uma caixa em linha - e o desenho pergunta por ela
+ * para saber se o layout daquele nó é DELE. Sem ela, a forma inferida por nós vence a que
+ * ele escreveu, que é o inverso exato da lei de prioridade de layout.
+ *
+ * MEDIDO em 09/09 sobre três sistemas - dos componentes cuja raiz é estilizada por
+ * utilitário, quantos tinham `display` na receita: 2 de 58, 9 de 20 e 0 de 32; pela via de
+ * CSS Module, 48 de 196. A sintaxe que ele escolheu estava decidindo se a declaração dele
+ * sobrevivia, e ninguém escolhe uma sintaxe por esse motivo.
+ *
+ * A DIREÇÃO VIAJA JUNTO, ou `flex flex-col` vira uma linha: `display:flex` é `row` por
+ * padrão, e emitir o display sem a direção troca em silêncio toda coluna dele por uma
+ * linha - uma leitura pior que a anterior, porque parece deliberada.
+ *
+ * ESTE ARQUIVO TEM UM GÊMEO BYTE-IDÊNTICO em `libs/ds-contracts/src/display-from-class.ts`,
+ * garantido por spec. O CLI é publicado standalone e não pode importar os contratos; a
+ * plataforma precisa da mesma tabela para alcançar quem já importou sem pedir re-import.
+ * Editar um exige copiar para o outro.
+ */
+/**
+ * Os valores de `display` do CSS, na grafia utilitária que os frameworks convergiram em
+ * usar para cada um. A tabela é sobre CSS: a chave é só como aquele valor costuma ser
+ * escrito quando não é escrito por CSS.
+ */
+export const DISPLAY_UTILITIES = {
+    flex: { property: "display", value: "flex" },
+    grid: { property: "display", value: "grid" },
+    "inline-flex": { property: "display", value: "inline-flex" },
+    "inline-grid": { property: "display", value: "inline-grid" },
+    "inline-block": { property: "display", value: "inline-block" },
+    inline: { property: "display", value: "inline" },
+    block: { property: "display", value: "block" },
+    "flow-root": { property: "display", value: "flow-root" },
+    contents: { property: "display", value: "contents" },
+    table: { property: "display", value: "table" },
+    "inline-table": { property: "display", value: "inline-table" },
+    "list-item": { property: "display", value: "list-item" },
+    hidden: { property: "display", value: "none" },
+    "flex-col": { property: "flexDirection", value: "column" },
+    "flex-col-reverse": { property: "flexDirection", value: "column-reverse" },
+    "flex-row": { property: "flexDirection", value: "row" },
+    "flex-row-reverse": { property: "flexDirection", value: "row-reverse" },
+    "flex-wrap": { property: "flexWrap", value: "wrap" },
+    "flex-wrap-reverse": { property: "flexWrap", value: "wrap-reverse" },
+    "flex-nowrap": { property: "flexWrap", value: "nowrap" },
+};
+/**
+ * As declarações de caixa que um class string carrega, na ordem em que ele as escreveu.
+ *
+ * SÓ A CLASSE NUA CONTA. Um utilitário com condição na frente - `md:flex`, `hover:grid`,
+ * `dark:hidden` - descreve a caixa em OUTRO estado, e escrevê-lo na base afirmaria que
+ * aquele estado é o de repouso. Quem lê estado é quem lê estado.
+ */
+export function displayFromClasses(classes) {
+    const out = {};
+    for (const raw of (classes ?? "").split(/\s+/)) {
+        if (!raw || raw.includes(":"))
+            continue;
+        const found = DISPLAY_UTILITIES[raw];
+        if (found)
+            out[found.property] = found.value;
+    }
+    return out;
+}

package/dist/doctor/transcribe.js

@@ -42,6 +42,7 @@
  *     hover:shadow-md           → states.hover
  *     data-[checked]:bg-ocean-50 → states.checked
  */
+import { DISPLAY_UTILITIES } from "../display-from-class.js";
 import { tokenRefFor } from "../token-ref.js";
 import { frameworkDeclaration } from "./framework-palette.js";
 /**
@@ -384,9 +385,10 @@ const TYPE_KEYWORD = {
  * and without the position it stopped being a veil and became a block in the flow; the
  * chevron's `justify-between` is what puts it at the far edge of the header.
  *
- * `flex` and `flex-col` stay OUT on purpose - they travel as the node's own form
- * (`row`/`stack`), and declaring the same thing twice is how two sources of truth start
- * disagreeing. What comes in here is the DIMENSION (`flex-1`, `shrink-0`) and the PLACE.
+ * What comes in here is the DIMENSION (`flex-1`, `shrink-0`), the PLACE, and - since 09/09 -
+ * the DISPLAY in full. `flex` and `flex-col` used to be held out so the node's form
+ * (`row`/`stack`) would be the single carrier; the display block below says what that cost
+ * and why it was reversed.
  */
 const PLACE_KEYWORD = {
     // Position: what makes an overlay an overlay.
@@ -419,12 +421,27 @@ const PLACE_KEYWORD = {
     "overflow-y-hidden": { property: "overflowY", value: "hidden" },
     "overflow-x-scroll": { property: "overflowX", value: "scroll" },
     "overflow-y-scroll": { property: "overflowY", value: "scroll" },
-    // Display, when it is not the arrangement we already carry as a form.
-    "inline-flex": { property: "display", value: "inline-flex" },
-    "inline-block": { property: "display", value: "inline-block" },
-    inline: { property: "display", value: "inline" },
-    block: { property: "display", value: "block" },
-    hidden: { property: "display", value: "none" },
+    /**
+     * DISPLAY, ALL OF IT - and this reverses the decision written above.
+     *
+     * WHAT THE CLIENT SAW: their ThemeToggle is `relative grid place-items-center h-11 w-11
+     * rounded-full`. Everything survived except the word `grid`, and without it the preview
+     * drew a wide capsule with both icons stacked in the top-left corner instead of a round
+     * 2.75rem button - because `place-items-center` only does anything inside a grid or a
+     * flex box, and because `component-showcase.tsx` asks `base.display != null` to decide
+     * whether THEY declared the layout. With no display it answers no, and the shape WE infer
+     * beats the one they wrote - the exact inverse of the layout-priority law.
+     *
+     * `flex` and `flex-col` were held out on the reasoning that they already travel as the
+     * node's form (`row`/`stack`) and that declaring it twice starts a disagreement. The
+     * disagreement started anyway, because the form is a LOSSY reduction: it answers "across
+     * or down", so `grid` arrives as `stack` and `inline-grid` loses its inline-ness.
+     *
+     * The table itself lives in `display-from-class.ts` - ONE source, because the platform
+     * needs the same reading to reach whoever imported before this shipped, without asking
+     * them to re-import. The form stays derived from the same class string.
+     */
+    ...DISPLAY_UTILITIES,
     // Focus and the pointer: real decisions, and `outline-none` is 21 of theirs.
     "outline-none": { property: "outline", value: "none" },
     "cursor-pointer": { property: "cursor", value: "pointer" },

package/package.json

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