synthesisui 0.16.512 → 0.16.513

package/dist/install-marks.js

@@ -355,7 +355,13 @@
  * bloco do `CLAUDE.md` ensina a leitura da primeira tela em vez do `/sui-import-ds`; com o `rules.json` e o impeccable no
  * projeto, diz que o revisor dele é só da criação. Uma pasta escrita antes manda o agente importar e não fala do revisor.
  */
-export const MATERIALISER_SINCE = "0.16.508";
+/**
+ * 0.16.508 -> 0.16.513 em 24/10, e o passo 1 dá **SIM** (a largura não vira espaço): o `init` declara
+ * `--max-width-<nome>: var(--container-<nome>)` para cada espaçamento do sistema com nome de tamanho de contêiner. Uma pasta
+ * escrita antes deixa `max-w-xl` virar `var(--spacing-xl)` - no Post Proof, 3rem e um título com uma palavra por linha.
+ * O conserto ficou numa branch local de 16/10 a 24/10 (jornada "o estado da arte do design"); 0.16.500 saiu sem ele.
+ */
+export const MATERIALISER_SINCE = "0.16.513";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *

package/dist/new-project-theme.js

@@ -79,6 +79,37 @@ function theirNameFor(ours) {
         return `--duration-${m[1]}`;
     return null;
 }
+/**
+ * A LARGURA NÃO VIRA ESPAÇO (16/10, medido no experimento das camadas). No Tailwind v4, `max-w-<nome>` lê o
+ * `--spacing-<nome>` quando ele existe, antes do `--container-<nome>`: o Post Proof escreve `--spacing-xl: 3rem`, e o
+ * `max-w-xl` que o agente usava como largura de leitura (36rem) virava 3rem - títulos com uma palavra por linha.
+ * Declarar `--max-width-<nome>` faz o `max-w-*` voltar a ser largura; `px-xl`, `gap-xl` e o resto continuam no espaçamento
+ * do sistema (testado no Tailwind 4.3.3).
+ */
+const CONTAINER_SIZES = new Set([
+    "3xs",
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+]);
+export function widthGuards(names) {
+    const out = [];
+    for (const n of names) {
+        const m = /^--spacing-(.+)$/.exec(n);
+        if (m && CONTAINER_SIZES.has(m[1]))
+            out.push(`  --max-width-${m[1]}: var(--container-${m[1]});`);
+    }
+    return out;
+}
 export async function writeNewProjectTheme(root, tokensCss, slug, version) {
     const sheets = await sheetsOf(root);
     const own = new Set();
@@ -116,6 +147,7 @@ export async function writeNewProjectTheme(root, tokensCss, slug, version) {
         open(`${slug} v${version}: the system's values under the names Tailwind turns into utilities. They are yours now - change a value here and every component follows. Written by \`init\`, because this project had no tokens of its own.`),
         "@theme {",
         ...lines,
+        ...widthGuards(system.keys()),
         "}",
         ...(next.length > 0 ? ["", ":root {", ...next, "}"] : []),
         end(slug),
@@ -286,7 +318,11 @@ async function readTheirs(root, slug) {
  * (`--container-*`), e o par vai para o `.lock`: a seção materializada escreve `var(--container-page)`, e a pessoa muda a
  * largura num lugar só. O valor é o MESMO do catálogo - `page-width-twin.spec.ts` compara os dois.
  */
-export const PAGE_WIDTH = { ours: "--ds-layout-page-width", theirs: "--container-page", value: "1440px" };
+export const PAGE_WIDTH = {
+    ours: "--ds-layout-page-width",
+    theirs: "--container-page",
+    value: "1440px",
+};
 function systemPairs(tokensCss, lookup = new Map()) {
     const { names, values } = tongueOf([], tokensCss);
     const out = [];
@@ -410,7 +446,13 @@ export async function writeBesideTheirs(root, tokensCss, slug, version, where) {
         begin(slug),
         open(`${slug} v${version}, beside your own tokens. The @theme adds only the names your project did not have; inside the data-theme selector below every value is the system's, including the names you already use, which keep their value everywhere else. Written by \`init\`, where you chose.`),
         ...(missing.length > 0
-            ? ["@theme {", ...missing.map(([n, v]) => `  ${n}: ${v};`), "}", ""]
+            ? [
+                "@theme {",
+                ...missing.map(([n, v]) => `  ${n}: ${v};`),
+                ...widthGuards(missing.map(([n]) => n)),
+                "}",
+                "",
+            ]
             : []),
         `[data-theme="${slug}"] {`,
         ...scoped,

package/package.json

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