synthesisui 0.16.351 → 0.16.354

package/dist/doctor/transcribe.js

@@ -677,6 +677,24 @@ export function readUtility(raw, declared) {
         if (property)
             return { property, value: `${Number(pct.toFixed(4))}%` };
     }
+    /**
+     * `-translate-x-1/2` TAMBÉM É UMA FRAÇÃO, e ela tem que ser lida AQUI pelo motivo exato que o
+     * comentário acima já dava: depois do split de alpha ela chega como `translate-x-1` e volta
+     * `0.25rem` - *silently wrong, which is worse than unread*.
+     *
+     * E isto não é hipótese: o primeiro rascunho do leitor de `translate` (02/09) tratava a fração
+     * dentro de `readUtilityCore`, depois do split, e produziu `translateX(-0.25rem)` para o
+     * `-translate-x-1/2` com que ele centra elementos. O spec pegou. É a mesma armadilha, uma função
+     * de transform depois.
+     */
+    const shift = /^(-?)translate-([xy])-(\d+)\/(\d+)$/.exec(utility);
+    if (shift) {
+        const pct = (Number(shift[3]) / Number(shift[4])) * 100;
+        return {
+            property: "transform",
+            value: `translate${shift[2] === "x" ? "X" : "Y"}(${shift[1]}${Number(pct.toFixed(4))}%)`,
+        };
+    }
     const read = readUtilityCore(utility, declared);
     return read ? withAlpha(read, utility.split("/")[1]) : read;
 }
@@ -1139,6 +1157,63 @@ function readUtilityCore(utility, declared) {
      * so two on the same element would overwrite - none of their 3 co-occur, and saying
      * one of them is better than saying neither.
      */
+    /**
+     * O EIXO FAZ PARTE DA FUNÇÃO, e não do argumento - `rotate-x-45` é `rotateX(45deg)`.
+     *
+     * O QUE ISTO CONSERTA, e é pior que não-lido: o teste abaixo é `^-?rotate-(.+)$`, que capturava
+     * `x-45` e montava **`rotate(x-45deg)`** - uma declaração que o navegador descarta inteira,
+     * gravada na receita como se fosse a decisão dele. `skew-x-6` e `scale-x-95` caíam fora de
+     * qualquer leitor e viravam lacuna, que é o lado seguro de errar; `rotate-x` era o inseguro.
+     *
+     * MEDIDO EM 02/09 COM A RÉGUA DO PRODUTO - as classes que o censo realmente carrega, e não um
+     * grep: **0 usos nas duas populações** para as seis formas por eixo. E o grep ingênuo mentia
+     * feio: ele dava 114 e 16 para `perspective-` e 60 e 78 para `origin-`, e NENHUM era classe de
+     * componente - era o CSS `perspective:` e `transform-origin:` dentro das `@utility` dele.
+     *
+     * ENTÃO POR QUE LER, com N=0? Pelo mesmo motivo que `peer-<estado>/<nome>:` entrou no
+     * `INV-INTERP-17`: isto não é forma de repositório nenhum, é a GRAMÁTICA que o Tailwind declara,
+     * e nela o eixo é sufixo da função. Derivar da gramática cobre o cliente que a gente nunca viu -
+     * e o que decide o caso é que a alternativa aqui não era silêncio, era CSS inválido.
+     *
+     * O QUE NÃO ENTROU, declarado: `origin-*`, `perspective-*`, `transform-gpu` e `translate-z-*`.
+     * Os três primeiros são propriedades PRÓPRIAS (`transformOrigin`, `perspective`, `willChange`) e
+     * não funções de `transform`, então não são sufixo desta família: entram como leitor novo, com
+     * medição própria, no dia em que uma população as escrever como classe.
+     */
+    const axial = /^(-?)(rotate|skew|scale)-([xyz])-(.+)$/.exec(core);
+    if (axial) {
+        /**
+         * QUANDO ESTE PADRÃO CASA, ELE DECIDE - e nunca deixa cair no leitor genérico abaixo.
+         *
+         * É a metade que fecha a porta de verdade. O primeiro rascunho só ACRESCENTAVA a leitura por
+         * eixo, e `rotate-x-banana` continuava passando para `^-?rotate-(.+)$` e voltando
+         * `rotate(x-bananadeg)` - o mesmo CSS inválido, agora por um caminho a mais. Um `return null`
+         * aqui manda a classe para a lista de não lidas, que é a resposta certa: nunca inventamos, e
+         * uma lacuna dita vale mais que um valor que o navegador descarta.
+         *
+         * E O SINAL SÓ EXISTE ONDE O TAILWIND O DEFINE: `-rotate-y-90` e `-skew-y-3` são válidos;
+         * `-scale-x-95` não é, e aceitá-lo seria ler uma decisão que ele não tem como ter escrito.
+         */
+        const [, sign, kind, ax, arg] = axial;
+        const fn = `${kind}${ax.toUpperCase()}`;
+        const arbitrary = /^\[(.+)\]$/.exec(arg);
+        if (kind === "scale") {
+            if (sign)
+                return null;
+            const factor = arbitrary
+                ? arbitrary[1]
+                : /^\d+$/.test(arg)
+                    ? String(Number(arg) / 100)
+                    : null;
+            return factor
+                ? { property: "transform", value: `${fn}(${factor})` }
+                : null;
+        }
+        if (!arbitrary && !/^\d+(\.\d+)?$/.test(arg))
+            return null;
+        const deg = arbitrary ? arbitrary[1] : `${arg}deg`;
+        return { property: "transform", value: `${fn}(${sign}${deg})` };
+    }
     const rotate = /^-?rotate-(.+)$/.exec(core);
     if (rotate) {
         const arbitrary = /^\[(.+)\]$/.exec(rotate[1]);
@@ -1148,6 +1223,57 @@ function readUtilityCore(utility, declared) {
             value: `rotate(${core.startsWith("-") ? `-${deg}` : deg})`,
         };
     }
+    /**
+     * `-translate-y-px`, `translate-x-1/2`, `translate-y-[140%]` - o deslocamento estático.
+     *
+     * A MESMA FAMÍLIA DE `rotate` E `scale`, e era a única das três sem leitor. Medido em 02/09, por
+     * CAMADA e com a régua do produto:
+     *
+     *     codelevel      22 camadas com classe de transform · 5 chegavam (23%) · 17 perdidas
+     *     frontend-hub    2 camadas · 2 chegavam (100%) · 0 perdidas
+     *
+     * As duas populações discordam porque escrevem coisas diferentes: o `frontend-hub` usa
+     * `scale-95` e `rotate-180`, que já eram lidos; o `codelevel` usa `translate`, e nele as formas
+     * perdidas eram `-translate-y-px` (6), `-translate-x-1/2` (3), `-translate-y-0.5` (2),
+     * `-translate-y-1/2` (2), `translate-y-0`, `translate-y-[140%]` e as duas do grupo nomeado.
+     *
+     * O QUE ELE VÊ SEM ISTO: o card dele sobe 1px no hover no navegador e não sobe no Canvas, e o
+     * elemento que ele centrou com `-translate-x-1/2` aparece deslocado meia largura.
+     *
+     * A ESCALA É A DELE PRIMEIRO, exatamente como em `gap-sm`: `--spacing-<passo>` declarado vence a
+     * fórmula numérica. A FRAÇÃO é percentual por definição do Tailwind (`1/2` = 50%), e não passo de
+     * escala - convertê-la pela escala daria um valor que nada no CSS dele significa.
+     *
+     * DUAS NA MESMA CAMADA AINDA SE SOBRESCREVEM, e isso não é novo nem calado: as três funções
+     * pousam em `transform` inteiro, o comentário de `rotate` já declarava isso, e medido em 02/09 é
+     * **1 de 18** camadas no `codelevel` e 0 no `frontend-hub`. Dizer uma continua sendo melhor que
+     * dizer nenhuma.
+     */
+    const translate = /^-?translate-([xy])-(.+)$/.exec(core);
+    if (translate) {
+        const axis = translate[1] === "x" ? "X" : "Y";
+        const arg = translate[2];
+        const neg = core.startsWith("-");
+        const own = `--spacing-${arg}`;
+        const arbitrary = /^\[(.+)\]$/.exec(arg);
+        /** A FRAÇÃO NÃO CHEGA AQUI - `readUtility` a lê antes do split de alpha, e o comentário lá
+         *  explica por que ela não pode esperar por este ponto. */
+        const size = arbitrary
+            ? arbitrary[1]
+            : arg === "full"
+                ? "100%"
+                : declared.has(own)
+                    ? `{spacing.${arg}}`
+                    : (SPACING[arg] ?? numericSpacing(arg));
+        if (size)
+            return {
+                property: "transform",
+                value: `translate${axis}(${neg ? `-${size}` : size})`,
+                ...(!arbitrary && arg !== "full" && declared.has(own)
+                    ? { token: own }
+                    : {}),
+            };
+    }
     const scale = /^scale-(.+)$/.exec(core);
     if (scale) {
         const arbitrary = /^\[(.+)\]$/.exec(scale[1]);
@@ -1648,8 +1774,12 @@ function slotFor(out, modifiers) {
     let at;
     let unslotted = false;
     for (const mod of rest) {
-        /** `group-hover:`, `group-data-[checked]:` - the PARENT's state. */
-        const group = /^group-(.+)$/.exec(mod);
+        /**
+         * `group-hover:`, `group-data-[checked]:` - the PARENT's state. E o NOME do grupo depois da
+         * barra não é parte do estado: ver a régua gêmea em `variant-read.ts`, com a medição das duas
+         * populações e a prova de que descartar o nome não junta nada.
+         */
+        const group = /^group-(.+?)(?:\/[A-Za-z0-9_-]+)?$/.exec(mod);
         const bare = group ? group[1] : mod;
         const state = STATE_SPELLING[bare] ?? dataState(bare);
         if (state) {

package/dist/doctor/variant-read.js

@@ -73,8 +73,34 @@ const MODIFIER_STATE = {
     "aria-invalid": "invalid",
     "aria-busy": "loading",
 };
-/** `group-hover`, `group-focus`, `peer-checked` - the state of something ELSE. */
-const RELATIONAL = /^(?:group|peer)-(.+)$/;
+/**
+ * O NOME DO GRUPO NÃO É PARTE DO ESTADO - `group-hover/tt:` é "quando o grupo chamado `tt` está em
+ * hover", e o estado ali é `hover`.
+ *
+ * O TAILWIND NOMEIA GRUPOS desde a v3, e é o que se escreve quando dois grupos se aninham: o pai
+ * declara `group/tt` e o filho reage com `group-hover/tt:`. A régua capturava `(.+)` depois do
+ * `group-`, então ela procurava o estado `hover/tt` na tabela e não achava - e o estilo inteiro
+ * daquela condição era declarado perdido.
+ *
+ * MEDIDO EM 02/09, e AS DUAS POPULAÇÕES SÃO OPOSTAS (`INV-GERAL-07`):
+ *
+ *     codelevel      138 usos NOMEADOS em 39 arquivos ·   0 anônimos
+ *     frontend-hub     0 nomeados                     · 192 anônimos
+ *
+ * Uma régua escrita para qualquer uma das duas quebraria na outra por inteiro. O que decide não é
+ * a população: é a gramática que o Tailwind declara, e nela o nome é um IDENTIFICADOR opcional
+ * depois de uma barra. `peer-<estado>/<nome>:` tem a mesma forma e entra pela mesma porta - 0 usos
+ * nas duas populações hoje, e cobrir os dois é derivar da gramática em vez de fixar o que um
+ * repositório escreve.
+ *
+ * DESCARTAR O NOME É SEGURO, e isto foi medido antes de ser decidido: o nome só distinguiria algo
+ * se dois grupos diferentes aparecessem na MESMA lista de classes. No `codelevel` são 2 nomes no
+ * repositório inteiro (`tt` 96, `btn` 42), 7 arquivos usam os dois, e **em 0 dos 10 atributos
+ * `className` medidos eles coexistem**. Cada lista de classes pertence a um elemento, e ali o nome
+ * é derivável do contexto. Se um dia coexistirem, as duas condições produzem o MESMO `within` e
+ * viram duas camadas distinguíveis pelas outras classes - nada é somado em silêncio.
+ */
+const RELATIONAL = /^(?:group|peer)-(.+?)(?:\/[A-Za-z0-9_-]+)?$/;
 /**
  * `data-[state=open]:`, `data-[checked]:`, `data-[side=top]:` - como @base-ui e Radix escrevem uma
  * condição.

package/dist/install-marks.js

@@ -567,7 +567,56 @@ export const CHECKER_SINCE = "0.16.308";
  * QUEM NÃO É AFETADO: quem não escreve `@keyframes`. E quem escreve um que a captura NÃO alcançou -
  * ali o frame continua sendo lacuna, porque ali a perda é real.
  */
-export const READER_SINCE = "0.16.351";
+/**
+ * 0.16.351 -> 0.16.352 em 02/09 (`INV-INTERP-17`): o GRUPO NOMEADO do Tailwind passa a ser lido.
+ *
+ * O QUE ELE GANHA COM O `sync`: a condição que só existe quando o grupo em volta reage. `group/tt`
+ * no pai e `group-hover/tt:` no filho é como se escreve isso desde a v3 do Tailwind, e a régua
+ * procurava o estado `hover/tt` na tabela - não achava, e declarava PERDIDA a condição inteira.
+ *
+ * MEDIDO NO `codelevel`: 4 classes em `unplaced` viram 2 camadas condicionais com `opacity: 1` na
+ * receita do `TooltipContent`. O tooltip dele aparece no hover no navegador e não aparecia na
+ * nossa.
+ *
+ *     codelevel      138 usos NOMEADOS · 0 anônimos · unplaced 4 -> 0
+ *     frontend-hub     0 nomeados · 192 anônimos · unplaced 0 -> 0 (a forma anônima não regride)
+ *
+ * QUEM NÃO É AFETADO: quem escreve só a forma anônima (`group-hover:`), que já era lida. O nome do
+ * grupo é descartado com prova: em 0 dos 10 atributos `className` medidos dois grupos coexistem.
+ */
+/**
+ * 0.16.352 -> 0.16.353 em 02/09 (`INV-INTERP-18`): `translate` passa a ser lido.
+ *
+ * O QUE ELE GANHA COM O `sync`: o deslocamento estático que ele declara. `rotate` e `scale` já
+ * eram lidos; `translate` era a única das três funções de transform sem leitor, e a camada inteira
+ * que dependia dela era descartada.
+ *
+ *     codelevel      5 de 22 camadas chegavam (23%) -> 30 de 30
+ *     frontend-hub   2 de 2 (100%) -> 2 de 2 · ele escreve `scale`/`rotate`, que já eram lidos
+ *
+ * E UM CASO PIOR QUE NÃO-LIDO: `-translate-x-1/2`, com que ele centra elementos, chegava ao leitor
+ * de tamanho como `translate-x-1` e voltava `0.25rem`. Quem já importou tem essa receita gravada -
+ * o elemento aparece deslocado meia largura em vez de centrado.
+ *
+ * QUEM NÃO É AFETADO: quem não escreve `translate-*`.
+ */
+/**
+ * 0.16.353 -> 0.16.354 em 02/09 (`INV-INTERP-19`): o EIXO passa a fazer parte da função, e a régua
+ * para de emitir CSS inválido.
+ *
+ * O QUE ELE GANHA COM O `sync`: `rotate-x-45` virava **`rotate(x-45deg)`**, uma declaração que o
+ * navegador descarta inteira e que ficava GRAVADA na receita como se fosse a decisão dele. Agora é
+ * `rotateX(45deg)`, e o que não é ângulo vira lacuna em vez de valor inventado.
+ *
+ * A MARCA SOBE APESAR DE N=0 nas duas populações, e é uma escolha declarada: quem TEM a forma tem
+ * um valor inválido gravado, e é a marca que faz o `align` chamá-lo a re-medir. Errar para o lado
+ * de subir custa um `sync` que não precisava; errar para o outro deixa o valor inválido para
+ * sempre, e "0 nas duas que eu medi" não é "0 no mundo" (`INV-GERAL-07`).
+ *
+ * QUEM NÃO É AFETADO: quem não escreve `rotate-x`, `skew-x/y` ou `scale-x/y`. As formas SEM eixo -
+ * `rotate-180`, `scale-95` - não se movem, e há asserção disso.
+ */
+export const READER_SINCE = "0.16.354";
 /**
  * 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.351",
+  "version": "0.16.354",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {