synthesisui 0.16.213 → 0.16.215

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

@@ -13,7 +13,7 @@ import { describeGate, gateComponent, groupSkips, SCREENS_FOR_SYSTEM, } from "..
 import { emptyTally, internalSpecifiers, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
 import { countShape, describeCoverage, summarizeCoverage, } from "../doctor/coverage.js";
 import { crosswalk, floorSize, isLibrary, observedRules, useLiveCatalogue, } from "../doctor/crosswalk.js";
-import { keyframeOffsets, moduleImports, partialCandidates, readModuleCss, readModuleUsage, sheetImports, transcribeModule, } from "../doctor/css-modules.js";
+import { keyframeOffsets, moduleImports, partialCandidates, readGlobalClasses, readModuleCss, readModuleUsage, sheetImports, transcribeModule, } from "../doctor/css-modules.js";
 import { dataContract } from "../doctor/data-contract.js";
 import { reconcile, scanDefinitions, } from "../doctor/definitions-scan.js";
 import { fragmentsOfSource, fragmentsOfStylesheet, judgeFragments, } from "../doctor/fragments.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";
@@ -227,21 +227,27 @@ into) {
             for (const candidate of partialCandidates(spec))
                 imported.add(join(dirname(sheet.file), candidate));
     let css = "";
+    const globals = [];
     for (const { file, body } of sheets) {
         css += `\n${body}`;
-        if (!into || !body)
+        if (!body)
             continue;
         const partial = basename(file).startsWith("_");
+        const kind = /\.module\./.test(file) || (partial && imported.has(file))
+            ? "scoped"
+            : partial
+                ? "dead"
+                : "global";
+        if (kind === "global")
+            globals.push({ file: relative(root, file), body });
+        if (!into)
+            continue;
         into.push({
             file: relative(root, file),
-            fragments: fragmentsOfStylesheet(relative(root, file), body, /\.module\./.test(file) || (partial && imported.has(file))
-                ? "scoped"
-                : partial
-                    ? "dead"
-                    : "global"),
+            fragments: fragmentsOfStylesheet(relative(root, file), body, kind),
         });
     }
-    return css;
+    return { css, globals };
 }
 /**
  * EVERY distinct design value, commonest first - not just the repeated ones.
@@ -378,7 +384,7 @@ export async function takeCensus(root, opts) {
     useLiveCatalogue(fetched.ok ? asCatalogueTable(fetched.index) : null);
     /** Todo arquivo de estilo do escopo, para o ledger - ver o parâmetro `into`. */
     const styleFiles = [];
-    const css = await harvestOwnCss(root, styleFiles);
+    const { css, globals: globalSheets } = await harvestOwnCss(root, styleFiles);
     const table = buildTable({ css, source: "yours" });
     const schemes = parseSchemeBlocks(css);
     const reports = [];
@@ -407,6 +413,34 @@ export async function takeCensus(root, opts) {
         if (!declaredValues.has(m[1]))
             declaredValues.set(m[1], m[2].trim());
     }
+    /**
+     * AS REGRAS DE CLASSE DAS FOLHAS GLOBAIS - ver `readGlobalClasses`. Uma regra que um
+     * componente admitido veste é a receita dele; `claimed` guarda quais foram vestidas,
+     * porque é isso que o juiz do ledger precisa para chamar a classe e a regra de LIDAS.
+     */
+    const globalClasses = readGlobalClasses(globalSheets, declaredValues);
+    const globalClassesClaimed = new Set();
+    /** Por arquivo, as classes cuja regra a `<style>` island já entregou - ver o juiz. */
+    const islandClassesRead = new Map();
+    /** A regra global que uma lista de classes veste, mesclada - e a reivindicação. */
+    const globalWear = (classes) => {
+        const worn = {
+            base: {},
+            dark: {},
+            states: {},
+        };
+        for (const cls of classes) {
+            const rule = globalClasses.get(cls);
+            if (!rule)
+                continue;
+            globalClassesClaimed.add(cls);
+            Object.assign(worn.base, rule.base);
+            Object.assign(worn.dark, rule.dark);
+            for (const [state, block] of Object.entries(rule.states))
+                worn.states[state] = { ...worn.states[state], ...block };
+        }
+        return worn;
+    };
     const looks = {};
     /**
      * The directory shape, gathered while the files are already being walked - so
@@ -622,7 +656,13 @@ export async function takeCensus(root, opts) {
                  * the root tag are per component, scoped by name.
                  */
                 for (const extra of found.slice(1)) {
-                    const et = transcribe(rootClasses(src, extra.name), declaredValues);
+                    const ecls = rootClasses(src, extra.name);
+                    const et = transcribe(ecls, declaredValues);
+                    // A raiz do segundo componente também veste folha global - mesma regra.
+                    const eglobal = globalWear(ecls);
+                    et.base = { ...eglobal.base, ...et.base };
+                    et.dark = { ...eglobal.dark, ...et.dark };
+                    et.states = { ...eglobal.states, ...et.states };
                     const etag = rootTag(src, extra.name);
                     // ITS OWN MARKUP, sliced at the definition boundary - the whole file's
                     // sketch belonged to the first component and the second read an empty
@@ -641,7 +681,14 @@ export async function takeCensus(root, opts) {
                         };
                     }
                 }
-                const t = transcribe(rootClasses(src, found[0].name), declaredValues);
+                const rootCls = rootClasses(src, found[0].name);
+                const t = transcribe(rootCls, declaredValues);
+                /**
+                 * A REGRA DE CLASSE GLOBAL QUE A RAIZ VESTE - `clsx("root", …)` contra
+                 * `.root { isolation: isolate }` numa folha global. É a camada mais fraca de
+                 * todas: no cascade dele, qualquer coisa dita no elemento ganha da folha.
+                 */
+                const fromGlobal = globalWear(rootCls);
                 /**
                  * The transcription carries `dark` too, and spreading it put the key back after
                  * the conditional below decided to leave it out. Two writers for one field is
@@ -739,6 +786,7 @@ export async function takeCensus(root, opts) {
                  */
                 const styledHere = readStyledComponents(src).find((c) => c.name === found[0].name);
                 const base = {
+                    ...fromGlobal.base,
                     ...inlineStyle,
                     ...styledHere?.base,
                     ...fromModule?.base,
@@ -746,12 +794,14 @@ export async function takeCensus(root, opts) {
                     ...t.base,
                 };
                 const states = {
+                    ...fromGlobal.states,
                     ...styledHere?.states,
                     ...fromModule?.states,
                     ...v.base.states,
                     ...t.states,
                 };
                 const dark = {
+                    ...fromGlobal.dark,
                     ...styledHere?.dark,
                     ...fromModule?.dark,
                     ...t.dark,
@@ -820,9 +870,37 @@ export async function takeCensus(root, opts) {
                             if (mine.length === 0)
                                 continue;
                             islandStyle[index] = Object.assign(islandStyle[index] ?? {}, ...mine.map((rule) => rule.declarations));
+                            /**
+                             * A CLASSE FOI LIDA - pela island, e o juiz do ledger precisa saber,
+                             * senão o `dot` cuja regra o censo carrega segue acusado de valor
+                             * perdido (era 3 das 6 ocorrências finais da fila, 12/08).
+                             */
+                            const claimed = islandClassesRead.get(rel) ?? new Set();
+                            claimed.add(cls);
+                            islandClassesRead.set(rel, claimed);
                         }
                     }
                 }
+                /**
+                 * A REGRA DE CLASSE GLOBAL QUE UM NÓ INTERNO VESTE viaja pela MESMA costura do
+                 * island: por índice do sketch, resolvida em part quando a anatomia nomeia o nó.
+                 * A raiz (índice 0) já entrou no `base` acima; o island e as utilities do próprio
+                 * nó ganham dela, porque no cascade dele a folha global é a camada mais fraca.
+                 */
+                for (const [index, node] of sketch.entries()) {
+                    if (index === 0)
+                        continue;
+                    for (const cls of (node.classes ?? "").split(/\s+/)) {
+                        const rule = cls ? globalClasses.get(cls) : undefined;
+                        if (!rule)
+                            continue;
+                        globalClassesClaimed.add(cls);
+                        islandStyle[index] = {
+                            ...rule.base,
+                            ...(islandStyle[index] ?? {}),
+                        };
+                    }
+                }
                 if (island.foreign.length > 0) {
                     /**
                      * WHOSE MARKUP IS BEING PATCHED, measured rather than guessed: the opaque
@@ -843,10 +921,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 +983,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)] }
@@ -1482,7 +1581,11 @@ export async function takeCensus(root, opts) {
      * Montado aqui porque é o primeiro momento em que as três coisas existem juntas: os fragmentos
      * vistos, os tokens declarados, e quais arquivos de estilo pertencem a componente admitido.
      */
-    const ledger = buildLedger(opts?.cli ?? "unknown", judgeFragments([...fragments.flat(), ...styleFiles.flatMap((s) => s.fragments)], declaredValues, admittedStyles));
+    const ledger = buildLedger(opts?.cli ?? "unknown", judgeFragments([...fragments.flat(), ...styleFiles.flatMap((s) => s.fragments)], declaredValues, admittedStyles, {
+        wornGlobal: globalClassesClaimed,
+        islandRead: islandClassesRead,
+        refused: new Set(skips.map((s) => s.file)),
+    }));
     const coverageLines = describeCoverage(coverage, composition);
     if (coverageLines.length > 0) {
         say("");

package/dist/doctor/css-modules.js

@@ -683,3 +683,50 @@ function tokenRefFor(name) {
         return `{typography.families.${bare.slice(5)}}`;
     return `var(${name})`;
 }
+/**
+ * AS REGRAS DE CLASSE DE UMA FOLHA GLOBAL, prontas para o componente que as veste.
+ *
+ * Uma folha global vale para a página inteira - por isso ela nunca teve leitor de
+ * componente. Mas uma regra de CLASSE que um componente admitido veste literalmente é
+ * a receita DELE: o `.root { isolation: isolate }` de um repo real pertence ao
+ * RootWrapper que escreve `clsx("root", …)`, e era a última ocorrência de
+ * `value-not-read` (12/08). Medido antes de construir: a massa da família é regra de
+ * ELEMENTO (106 de 115 declarações no packages/ui), e regra de classe vestida existe
+ * UMA - este leitor lê exatamente o que existe, e o resto continua declarado.
+ *
+ * Reusa o MESMO leitor de regra do module (`readModuleCss`), então estados e a face
+ * dark vêm de graça - um segundo parser seria a segunda fonte de verdade que este
+ * arquivo recusa em todo lugar. Fica de fora, nomeado: classe que só aparece como
+ * descendente (`.a .b` - o contexto é do pai) e seletor composto, que `readModuleCss`
+ * já reporta em `unslotted`.
+ */
+export function readGlobalClasses(globals, declared) {
+    const resolve = (block) => {
+        const out = {};
+        for (const [prop, value] of Object.entries(block)) {
+            out[prop] = value.replace(/var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,[^)]*)?\)/g, (whole, name) => declared.has(name) ? tokenRefFor(name) : whole);
+        }
+        return out;
+    };
+    const out = new Map();
+    for (const sheet of globals) {
+        const read = readModuleCss(sheet.body);
+        const dependent = new Set(Object.values(read.classes).flatMap((c) => c.children));
+        for (const [name, cls] of Object.entries(read.classes)) {
+            /** O filho de `.a .b` só existe naquele contexto - vesti-lo solto pintaria errado. */
+            if (dependent.has(name))
+                continue;
+            const states = {};
+            for (const [state, block] of Object.entries(cls.states))
+                states[state] = resolve(block);
+            // A última folha ganha, que é como o cascade dele resolve duas regras iguais.
+            out.set(name, {
+                ...cls,
+                base: resolve(cls.base),
+                dark: resolve(cls.dark),
+                states,
+            });
+        }
+    }
+    return out;
+}

package/dist/doctor/fragments.js

@@ -260,8 +260,60 @@ kind) {
  * fatos diferentes que, somados num número só, fizeram 36% parecer defeito de leitura quando era
  * o portão funcionando (dono, 04/08).
  */
-export function judgeFragments(seen, declared, admitted) {
+/**
+ * O VOCABULÁRIO DE ESTRUTURA - o que a anatomia carrega como forma e direção do nó,
+ * nunca como declaração de estilo. É o conjunto que `arrangement()` e a derivação de
+ * forma já leem; crescer isto sem crescer aquilo voltaria a ser acusação.
+ */
+const STRUCTURE = new Set([
+    "flex",
+    "inline-flex",
+    "grid",
+    "inline-grid",
+    "flex-row",
+    "flex-col",
+    "flex-row-reverse",
+    "flex-col-reverse",
+    "block",
+    "inline-block",
+    "inline",
+    "contents",
+]);
+export function judgeFragments(seen, declared, admitted, 
+/**
+ * AS CLASSES DE FOLHA GLOBAL QUE UM COMPONENTE ADMITIDO VESTIU - ver
+ * `readGlobalClasses` e a reivindicação em `import.ts`. Vestida, a regra é a
+ * receita do componente e as duas metades do fato são LIDAS: a declaração na
+ * folha e a classe no elemento.
+ */
+/**
+ * O QUE FOI LIDO POR OUTRO CAMINHO E QUEM SAIU PELO PORTÃO - as três chegaram
+ * juntas em 12/08, medindo os últimos textos da fila de `value-not-read`:
+ *
+ *   wornGlobal   classes de folha global que um admitido vestiu (`page-shell`) -
+ *                a regra está no look; a classe e a regra são LIDAS
+ *   islandRead   por arquivo, as classes cuja regra mora na `<style>` island que o
+ *                censo JÁ lê (`dot` do TypingIndicator) - mesmo fato, outra folha
+ *   refused      arquivos de componente que o portão recusou de propósito: a classe
+ *                deles é `component-not-admitted` (by-design), nunca lacuna de valor
+ */
+elsewhere) {
+    const wornGlobal = elsewhere?.wornGlobal ?? new Set();
+    const islandRead = elsewhere?.islandRead ?? new Map();
+    const refused = elsewhere?.refused ?? new Set();
     return seen.map((f) => {
+        /**
+         * A REGRA DE CLASSE GLOBAL QUE ALGUÉM VESTE FOI LIDA - antes do desvio de
+         * `binding`, porque lida é mais forte que ligada. `.root { isolation: isolate }`
+         * era a última ocorrência de `value-not-read` do repo real (12/08).
+         */
+        if (f.shape === "css" && f.reason === "shape-not-read") {
+            const cls = /^\.([A-Za-z][\w-]*)\s*\{/.exec(f.text)?.[1];
+            if (cls && wornGlobal.has(cls)) {
+                const { reason: _clear, ...rest } = f;
+                return { ...rest, read: true };
+            }
+        }
         /**
          * UMA DECLARAÇÃO SEM LEITOR CUJO VALOR É UM TOKEN QUE ELES JÁ DECLARAM.
          *
@@ -309,13 +361,47 @@ 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 }
-                    : { ...f, read: false, reason: "value-not-read" };
+                if (read)
+                    return { ...f, read: true };
+                /**
+                 * ZERO DECLARAÇÕES NÃO É SEMPRE VALOR PERDIDO - duas formas de lista que a
+                 * esteira lê por OUTRO caminho, medidas no repo real em 12/08 (eram os 3
+                 * últimos textos da fila de `value-not-read`):
+                 *
+                 *     flex flex-col      arranjo viaja como FORMA do nó (Lei 12, `arrangement()`),
+                 *                        e o transcribe devolve zero de propósito
+                 *     root               a regra está numa folha GLOBAL que um admitido veste -
+                 *                        o leitor de classe global a entrega no look
+                 *
+                 * Só quando TODO token tem um desses destinos: um token desconhecido no meio
+                 * mantém o fragmento na fila, que é onde ele conta.
+                 */
+                const tokens = literal.split(/\s+/).filter(Boolean);
+                const readElsewhere = tokens.length > 0 &&
+                    tokens.every((tk) => STRUCTURE.has(tk) ||
+                        wornGlobal.has(tk) ||
+                        islandRead.get(f.file)?.has(tk));
+                if (readElsewhere)
+                    return { ...f, read: true };
+                /** A classe de um componente recusado é o portão desenhado, não valor perdido. */
+                if (refused.has(f.file))
+                    return {
+                        ...f,
+                        read: false,
+                        reason: "component-not-admitted",
+                    };
+                return { ...f, read: false, reason: "value-not-read" };
             }
             case "inline": {
                 const read = Object.keys(readInlineStyle(`style={{${f.text}}}`)).length > 0;

package/dist/doctor/transcribe.js

@@ -448,6 +448,17 @@ const PLACE_KEYWORD = {
         property: "overflow+textOverflow+whiteSpace",
         value: "overflow:hidden|textOverflow:ellipsis|whiteSpace:nowrap",
     },
+    /**
+     * ACESSIBILIDADE E ROLAGEM SÃO DECLARAÇÕES TAMBÉM - dois dos três utilitários que
+     * seguravam a fila de `value-not-read` do repo real depois de tudo lido (12/08):
+     * `sr-only` no título do Modal e `scrollbar-gutter-stable` no chat. Valores
+     * PUBLICADOS do Tailwind, transcritos verbatim - nada inventado.
+     */
+    "sr-only": {
+        property: "position+width+height+padding+margin+overflow+clip+whiteSpace+borderWidth",
+        value: "position:absolute|width:1px|height:1px|padding:0|margin:-1px|overflow:hidden|clip:rect(0, 0, 0, 0)|whiteSpace:nowrap|borderWidth:0",
+    },
+    "scrollbar-gutter-stable": { property: "scrollbarGutter", value: "stable" },
 };
 /**
  * MOVEMENT IS A DECLARATION TOO, and 91 utilities of it were being dropped.
@@ -538,8 +549,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.
  *
@@ -681,6 +726,14 @@ function readUtilityCore(utility, declared) {
      * frames themselves travel beside the reading - see `BUILTIN_KEYFRAMES` - because a
      * recipe cannot point at a keyframe the system does not define.
      */
+    /**
+     * `cursor-help`, `cursor-not-allowed` - o cursor É uma decisão de interação, e o
+     * nome do Tailwind é o valor CSS verbatim em toda a escala publicada. O gatilho do
+     * MetricCard real diz "isto tem explicação" com ele (12/08).
+     */
+    const cursor = /^cursor-([a-z-]+)$/.exec(core);
+    if (cursor)
+        return { property: "cursor", value: cursor[1] };
     const animate = /^animate-([a-z][\w-]*)$/.exec(core);
     if (animate && animate[1] !== "none") {
         return {
@@ -1478,6 +1531,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 +1603,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 +1694,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))
@@ -1809,7 +1919,7 @@ export function returnAt(source, name) {
              * body and no `return` to find - `const X = () => (<div/>)`. That is a
              * real shape and it gets the concise position.
              */
-            const arrow = /=>\s*\(/.exec(source.slice(decl.index, decl.index + 400));
+            const arrow = /=>\s*(?:\(|<[A-Za-z])/.exec(source.slice(decl.index, decl.index + 400));
             if (arrow)
                 return decl.index + arrow.index;
             /**
@@ -1833,7 +1943,7 @@ export function returnAt(source, name) {
             return -1;
         }
     }
-    return source.search(/return\s*\(/);
+    return source.search(/return\s*(?:\(|<[A-Za-z])/);
 }
 /**
  * THE COMPONENT'S OWN `return (`, not the first one after its name.
@@ -1981,7 +2091,14 @@ function ownReturn(source, declAt) {
         }
         else if (depth === 1 &&
             ch === "r" &&
-            /^return\s*\(/.test(source.slice(j))) {
+            /**
+             * `return (` OU `return <div` - o parêntese é estilo, não gramática. O extrator
+             * exigia o parêntese e um `return <div …>;` de linha única não tinha raiz: o
+             * RootWrapper real vestia a última ocorrência de `value-not-read` num look que
+             * nem existia (12/08; 41 arquivos assim no dashboard dele). `<[A-Za-z]` para uma
+             * comparação `return a < b` não virar marcação.
+             */
+            /^return\s*(?:\(|<[A-Za-z])/.test(source.slice(j))) {
             return j;
         }
     }

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.213";
+export const READER_SINCE = "0.16.215";
 /**
  * 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.213",
+  "version": "0.16.215",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {