synthesisui 0.16.410 → 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/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.410",
+  "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": {