synthesisui 0.16.212 → 0.16.214

package/dist/anatomy-read.js

@@ -469,6 +469,12 @@ sxSpacing) {
                     base: { ...fromSx, ...t.base },
                     dark: t.dark,
                     states: t.states,
+                    /**
+                     * O TIPO SEMPRE TEVE A CASA E A MONTAGEM NÃO PASSAVA - então a seta do
+                     * Tooltip real transcrevia `data-[side=top]:top-full` para uma layer e a
+                     * part chegava sem ela: um posicionador que não posiciona (12/08).
+                     */
+                    ...(t.layers?.length ? { layers: t.layers } : {}),
                 };
                 /**
                  * A drop on a PART is still a drop. The root path already says these out loud;

package/dist/commands/import.js

@@ -30,7 +30,7 @@ import { describeForeign, readStyleIslands, } from "../doctor/style-island.js";
 import { buildLedger, describeLedger, } from "../doctor/style-ledger.js";
 import { MUI_DEFAULT_SPACING, readStyledComponents, spacingOf, } from "../doctor/style-props.js";
 import { buildTable } from "../doctor/tokens.js";
-import { definitionSpan, readInlineStyle, rootClasses, rootTag, transcribe, } from "../doctor/transcribe.js";
+import { definitionSpan, parseClass, readInlineStyle, rootClasses, rootTag, transcribe, } from "../doctor/transcribe.js";
 import { transcribeVariants } from "../doctor/variant-read.js";
 import { frontierKind, packageRoot } from "../frontier-kind.js";
 import { withLibraryStructure } from "../library-structure.js";
@@ -843,10 +843,25 @@ export async function takeCensus(root, opts) {
                  * animates nothing.
                  */
                 for (const node of sketch) {
-                    for (const raw of (node.classes ?? "").split(/\s+/)) {
-                        const named = /^(?:[\w-]+:)*animate-([a-z][\w-]*)$/.exec(raw);
-                        if (named && named[1] !== "none")
-                            animations.add(named[1]);
+                    /**
+                     * O PAR COMPÕE AQUI TAMBÉM - a mesma regra de `composeAnimation`: num elemento
+                     * que escreve `animate-out fade-out`, o nome que o sistema define é `fade-out`,
+                     * e `out` sozinho é o motor sem frames. Coletar o motor foi o que pendurou uma
+                     * animação `in` no censo real (12/08).
+                     */
+                    const utilities = (node.classes ?? "")
+                        .split(/\s+/)
+                        .filter(Boolean)
+                        .map((cls) => parseClass(cls).utility);
+                    for (const utility of utilities) {
+                        const named = /^animate-([a-z][\w-]*)$/.exec(utility);
+                        if (!named || named[1] === "none")
+                            continue;
+                        const composed = (named[1] === "in" || named[1] === "out") &&
+                            utilities.includes(`fade-${named[1]}`)
+                            ? `fade-${named[1]}`
+                            : named[1];
+                        animations.add(composed);
                     }
                 }
                 /**
@@ -890,6 +905,12 @@ export async function takeCensus(root, opts) {
                         ...rootPackage(tag, sketch),
                         ...rootBehaviour(tag, sketch),
                         ...(placed.length > 0 ? { layers: placed } : {}),
+                        /**
+                         * A MATÉRIA-PRIMA DAS CAMADAS, ainda como classes - ver `raw` em
+                         * `transcribeVariants`. É o que permite uma tabela de escala nova
+                         * reinterpretar este censo por deploy, sem `sync` na máquina de ninguém.
+                         */
+                        ...(v.raw.length > 0 ? { rawLayers: v.raw } : {}),
                         ...(Object.keys(islandStyle).length > 0 ? { islandStyle } : {}),
                         ...(v.unslotted.length > 0
                             ? { unplaced: [...new Set(v.unslotted)] }

package/dist/doctor/fragments.js

@@ -309,9 +309,16 @@ export function judgeFragments(seen, declared, admitted) {
                         ? { ...f, read: true }
                         : { ...f, read: false, reason: "computed" };
                 const t = transcribe(literal.split(/\s+/).filter(Boolean), declared);
+                /**
+                 * AS QUATRO CASAS DA TRANSCRIÇÃO, não três. O `dark:data-[checked]:bg-…` do
+                 * RadioCard real transcrevia INTEIRO para uma layer `{state, scheme}` e o juiz
+                 * só contava base/dark/states - então um fragmento 100% lido ficava na fila de
+                 * `value-not-read`, e o conserto que a fila pedia já estava entregue (12/08).
+                 */
                 const read = Object.keys(t.base).length +
                     Object.keys(t.dark).length +
-                    Object.values(t.states ?? {}).reduce((n, b) => n + Object.keys(b).length, 0) >
+                    Object.values(t.states ?? {}).reduce((n, b) => n + Object.keys(b).length, 0) +
+                    (t.layers ?? []).reduce((n, l) => n + Object.keys(l.style).length, 0) >
                     0;
                 return read
                     ? { ...f, read: true }

package/dist/doctor/style-ledger.js

@@ -68,6 +68,23 @@ const SHAPE_LABEL = {
 const A_READER_REACHES = new Set([
     "shape-not-read",
     "binding-not-read",
+    /**
+     * `value-not-read` ENTROU EM 11/08, e o docstring acima dizia o contrário por um motivo que
+     * envelheceu.
+     *
+     * Ele dizia: *"a forma FOI lida e o valor está fora das escalas deles - texto não ensina nada a
+     * leitor nenhum"*. Verdade quando a resposta era um LEITOR. Só que a resposta dela nunca foi um
+     * leitor: é uma TABELA DE ESCALA, e a tabela se escreve exatamente do texto - `sr-only`,
+     * `flex flex-col`, `data-[side=top]:top-full`.
+     *
+     * Sem o texto, esses 15 do repo do dono chegavam como número puro, e qualquer conserto nosso
+     * exigia que ELE re-medisse. O princípio é o contrário (dono, 12/08): *"o usuário não pode ficar
+     * rodando comandos do CLI para confirmar algo que a gente quer resolver - tudo deve estar no
+     * censo na entrada"*.
+     *
+     * O teto de 512 e o texto DISTINTO continuam valendo, e são eles que pagam a conta do tamanho.
+     */
+    "value-not-read",
 ]);
 const BECAUSE = {
     "shape-not-read": "no reader in this version understands this shape, so the styles it holds reach no recipe",

package/dist/doctor/transcribe.js

@@ -538,8 +538,42 @@ const STATE_SPELLING = {
     /** Base UI's enter/exit faces - `data-[starting-style]:opacity-0`. */
     "starting-style": "startingStyle",
     "ending-style": "endingStyle",
+    /** O par de `open`, que faltava - `data-[closed]:animate-out` no Modal real. */
+    closed: "closed",
 };
-const DATA_STATE = /^data-\[(?:state=)?([a-z-]+)\]$/;
+/**
+ * `data-[state=open]:`, `data-[checked]:`, `data-[side=top]:` - a MESMA regra do
+ * `conditionOf` em `variant-read.ts`, que ganhou atributo=valor em 12/08 e este arquivo
+ * não: `data-[side=top]:top-full` tinha o valor na tabela de offset desde sempre e caía
+ * em `skipped` porque a CONDIÇÃO não tinha casa aqui. Os dois julgamentos têm que
+ * soletrar igual, senão o fragmento e a variante discordam sobre a mesma classe.
+ */
+const DATA_STATE = /^data-\[([a-z-]+)(?:=([a-z-]+))?\]$/;
+/** `side-top` → `sideTop`, `starting-style` → `startingStyle`. */
+function camelState(name) {
+    return name.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+}
+/**
+ * O nome de estado de um modificador `data-[…]`, ou null quando não é um.
+ *
+ * `state=open` nomeia pelo VALOR (o atributo é só o veículo); qualquer outro atributo
+ * com valor nomeia pelos dois, senão `side=top` e `side=left` colidiriam num estado só.
+ * O que não está na tabela mas é legível vira estado por transcrição, nunca descartado:
+ * `lost` é para o que não dá para ler, não para o que a gente não previu.
+ */
+function dataState(modifier) {
+    const data = DATA_STATE.exec(modifier);
+    if (!data)
+        return null;
+    const name = data[1] === "state"
+        ? (data[2] ?? "")
+        : data[2]
+            ? camelState(`${data[1]}-${data[2]}`)
+            : data[1];
+    if (!name)
+        return null;
+    return STATE_SPELLING[name] ?? STATE_SPELLING[data[1]] ?? camelState(name);
+}
 /**
  * Split a class into its modifiers and the utility itself.
  *
@@ -1478,6 +1512,39 @@ function composeGradient(utilities, declared) {
         broken,
     };
 }
+/**
+ * UMA ENTRADA OU SAÍDA ANIMADA É DUAS UTILITIES QUE SÓ SIGNIFICAM JUNTAS - o mesmo
+ * caso do gradiente, uma família ao lado.
+ *
+ * `data-[closed]:animate-out data-[closed]:fade-out` é como o tailwindcss-animate
+ * escreve "sai desvanecendo": `animate-out` é o motor e não nomeia frame nenhum, e
+ * `fade-out` nomeia os frames e não anima nada sozinho. Lidas isoladas, as duas
+ * respostas eram erradas - `animate-out` virava `var(--animate-out)` apontando para um
+ * keyframe que nenhum tema define, e `fade-out` resolvia para nada e sumia sem rastro.
+ * O Modal do repo real fecha exatamente assim, e o `animate-in fade-in` do mesmo
+ * arquivo já tinha posto uma animação `in` pendurada no censo (12/08).
+ *
+ * Composto por grupo de modificador porque é isso que as duas metades têm em comum -
+ * a mesma regra do gradiente. Só a família `fade` entra: é a medida do repo real, e
+ * `zoom-*`/`slide-in-*` ficam nomeados para quando um censo os trouxer.
+ */
+function composeAnimation(utilities) {
+    const engine = utilities.find((u) => /^animate-(?:in|out)$/.test(u));
+    if (!engine)
+        return { value: null, consumed: new Set() };
+    const direction = engine.slice("animate-".length);
+    const effect = utilities.find((u) => u === `fade-${direction}`);
+    if (!effect)
+        return { value: null, consumed: new Set() };
+    return {
+        value: {
+            property: "animation",
+            value: `var(--animate-${effect})`,
+            keyframe: effect,
+        },
+        consumed: new Set([engine, effect]),
+    };
+}
 /**
  * WHICH HALF OF THE TRANSCRIPTION A MODIFIER LIST BELONGS TO.
  *
@@ -1517,10 +1584,7 @@ function slotFor(out, modifiers) {
         /** `group-hover:`, `group-data-[checked]:` - the PARENT's state. */
         const group = /^group-(.+)$/.exec(mod);
         const bare = group ? group[1] : mod;
-        const raw = STATE_SPELLING[bare] != null
-            ? bare
-            : (DATA_STATE.exec(bare)?.[1] ?? null);
-        const state = raw ? (STATE_SPELLING[raw] ?? null) : null;
+        const state = STATE_SPELLING[bare] ?? dataState(bare);
         if (state) {
             if (group)
                 when.within = state;
@@ -1611,6 +1675,33 @@ export function transcribe(classes, declared) {
                 out.unreadable.push(at);
         }
     }
+    /** A MESMA COMPOSIÇÃO POR GRUPO, para a família que só significa em par. */
+    for (const group of groups.values()) {
+        const animation = composeAnimation(group.utilities);
+        if (!animation.value)
+            continue;
+        const prefix = group.modifiers.length
+            ? `${group.modifiers.join(":")}:`
+            : "";
+        for (const utility of animation.consumed)
+            consumedByGroup.add(`${prefix}${utility}`);
+        const { target, unslotted } = slotFor(out, group.modifiers);
+        if (unslotted || !target) {
+            for (const utility of animation.consumed)
+                out.skipped.push(`${prefix}${utility}`);
+            continue;
+        }
+        const decl = animation.value;
+        if (decl.keyframe) {
+            out.animations ??= [];
+            if (!out.animations.includes(decl.keyframe))
+                out.animations.push(decl.keyframe);
+        }
+        if (target[decl.property] == null) {
+            target[decl.property] = decl.value;
+            out.fromLiteral += 1;
+        }
+    }
     for (const cls of classes) {
         const { modifiers, utility } = parseClass(cls);
         if (consumedByGroup.has(cls))

package/dist/doctor/variant-read.js

@@ -39,6 +39,10 @@ import { parseClass, transcribe } from "./transcribe.js";
  * all before. `peer-*` is the sibling version of the same idea and reads the same way
  * from a recipe's point of view.
  */
+/** `side-top` → `sideTop`, `starting-style` → `startingStyle`. */
+function camel(name) {
+    return name.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+}
 const MODIFIER_STATE = {
     hover: "hover",
     focus: "focus",
@@ -51,6 +55,8 @@ const MODIFIER_STATE = {
     selected: "selected",
     highlighted: "highlighted",
     open: "open",
+    /** O par de `open`, e a ausência dele matava o `data-[closed]:animate-out` do Modal dele. */
+    closed: "closed",
     invalid: "invalid",
     required: "required",
     "read-only": "readOnly",
@@ -68,8 +74,19 @@ const MODIFIER_STATE = {
 };
 /** `group-hover`, `group-focus`, `peer-checked` - the state of something ELSE. */
 const RELATIONAL = /^(?:group|peer)-(.+)$/;
-/** `data-[state=open]:`, `data-[checked]:` - how @base-ui and Radix spell a state. */
-const DATA_MODIFIER = /^data-\[(?:state=)?([a-z-]+)\]$/;
+/**
+ * `data-[state=open]:`, `data-[checked]:`, `data-[side=top]:` - como @base-ui e Radix escrevem uma
+ * condição.
+ *
+ * A versão anterior aceitava só `state=` ou um nome pelado, então TODO outro atributo com valor caía
+ * em `lost`. Medido no repo do dono em 12/08: `data-[side=top]`, `data-[side=bottom]`,
+ * `data-[side=left]` e `data-[side=right]` - as quatro posições do Tooltip - morriam ali, e com elas
+ * o estilo que só existe quando o popup abre para aquele lado.
+ *
+ * O atributo E o valor viram o nome, porque é literalmente o que o DOM dele carrega
+ * (`data-side="top"`): transcrever não é inventar.
+ */
+const DATA_MODIFIER = /^data-\[([a-z-]+)(?:=([a-z-]+))?\]$/;
 /** A breakpoint is a bare name we cannot read as a state. Their scale names them, so
  *  the caller decides whether the name exists rather than this guessing a width. */
 const BREAKPOINT = /^(?:xs|sm|md|lg|xl|2xl|3xl|tablet|desktop|wide|mobile)$/;
@@ -102,9 +119,26 @@ export function conditionOf(modifiers) {
         }
         const data = DATA_MODIFIER.exec(raw);
         if (data) {
-            const state = MODIFIER_STATE[data[1]];
+            /**
+             * `state=open` nomeia pelo VALOR (o atributo é só o veículo); qualquer outro atributo nomeia
+             * pelos dois, senão `side=top` e `side=left` colidiriam num estado só chamado `side`.
+             */
+            const nome = data[1] === "state"
+                ? (data[2] ?? "")
+                : data[2]
+                    ? camel(`${data[1]}-${data[2]}`)
+                    : data[1];
+            const state = MODIFIER_STATE[nome] ?? MODIFIER_STATE[data[1]];
             if (state)
                 out.state = state;
+            /**
+             * E O QUE NÃO ESTÁ NA TABELA MAS É LEGÍVEL NÃO SE PERDE. Um `data-side="top"` do base-ui é uma
+             * condição do DOM dele, escrita por extenso - descartá-la porque a nossa tabela não a lista
+             * seria a tabela decidindo o que o código dele pode dizer. `lost` fica para o que não dá para
+             * ler, não para o que a gente não previu.
+             */
+            else if (nome)
+                out.state = camel(nome);
             else
                 out.lost = true;
             continue;
@@ -1028,6 +1062,7 @@ export function transcribeVariants(source, declared) {
         axes,
         defaults,
         layers,
+        raw: allLayers,
         base: transcribe(baseClasses, declared),
         unslotted,
         notes,

package/dist/install-marks.js

@@ -100,7 +100,7 @@ export const CHECKER_SINCE = "0.16.202";
  *
  * Um censo medido antes disto carrega as duas leituras erradas.
  */
-export const READER_SINCE = "0.16.210";
+export const READER_SINCE = "0.16.214";
 /**
  * O QUE ESTÁ INSTALADO AQUI FICOU PARA TRÁS - e as DUAS condições que fazem isso ser verdade.
  *

package/package.json

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