synthesisui 0.16.511 → 0.16.513

package/dist/cn-codegen.js

@@ -150,7 +150,7 @@ function borderGroup(variants: string, rest: string, cls: string): string {
     (tail.startsWith("[") && !isArbitraryColor(tail));
   if (isWidth) return \`\${variants}border\${side}-width\`;
   if (BORDER_STYLES.has(tail)) return \`\${variants}border-style\`;
-  if (COLORS.has(tail) || COLOR_KEYWORDS.has(tail) || isArbitraryColor(tail)) {
+  if (COLORS.has(tail) || COLOR_KEYWORDS.has(tail) || isPaletteStep(tail) || isArbitraryColor(tail)) {
     return \`\${variants}border\${side}-color\`;
   }
   return \`\${variants}\${cls}\`;
@@ -166,9 +166,32 @@ function isArbitraryColor(v: string): boolean {
  * Returning the class itself is the safe answer: an unknown class then collides
  * only with an identical one, so nothing is ever dropped by mistake.
  */
+/**
+ * THE LAST COLON OUTSIDE BRACKETS ends the variants. \`data-[disabled]:[opacity:0.5]\` has a colon INSIDE the
+ * arbitrary property, and \`lastIndexOf\` cut there.
+ */
+function variantCut(cls: string): number {
+  let depth = 0;
+  let cut = -1;
+  for (let i = 0; i < cls.length; i++) {
+    const ch = cls[i];
+    if (ch === "[") depth++;
+    else if (ch === "]") depth--;
+    else if (ch === ":" && depth === 0) cut = i;
+  }
+  return cut;
+}
+
+/** A palette colour with a step - \`sand-900\`, \`moss-600\` - is a colour even when the system does not name it. */
+function isPaletteStep(v: string): boolean {
+  return /^[a-z]+(-[a-z]+)*-[0-9]{2,3}$/.test(v);
+}
+
+const OUTLINE_STYLES = new Set(["none", "dashed", "dotted", "double", "hidden"]);
+
 function groupOf(cls: string): string {
   // A variant is part of the identity: \`hover:bg-x\` must not replace \`bg-y\`.
-  const cut = cls.lastIndexOf(":");
+  const cut = variantCut(cls);
   const variants = cut === -1 ? "" : cls.slice(0, cut + 1);
   let base = cut === -1 ? cls : cls.slice(cut + 1);
 
@@ -179,6 +202,10 @@ function groupOf(cls: string): string {
 
   if (DISPLAYS.has(base)) return \`\${variants}display\`;
 
+  // \`[transition:…]\` sets exactly the property it names - grouped by it, so the caller's replaces the base's.
+  const arbitrary = /^\\[([a-z-]+):/.exec(base);
+  if (arbitrary) return \`\${variants}\${arbitrary[1]}\`;
+
   const dash = base.indexOf("-");
   const head = dash === -1 ? base : base.slice(0, dash);
   const rest = dash === -1 ? "" : base.slice(dash + 1);
@@ -197,7 +224,7 @@ function groupOf(cls: string): string {
   // The two families a prefix cannot settle, answered by this system's names.
   if (head === "text") {
     if (TEXT_SIZES.has(rest)) return \`\${variants}font-size\`;
-    if (COLORS.has(rest) || rest.startsWith("[")) return \`\${variants}text-color\`;
+    if (COLORS.has(rest) || isPaletteStep(rest) || rest.startsWith("[")) return \`\${variants}text-color\`;
     return \`\${variants}\${cls}\`;
   }
   if (head === "font") {
@@ -206,6 +233,16 @@ function groupOf(cls: string): string {
     return \`\${variants}\${cls}\`;
   }
   if (head === "border") return borderGroup(variants, rest, cls);
+  // Every \`transition-*\` sets transition-property, and so does \`[transition:…]\`.
+  if (head === "transition") return \`\${variants}transition\`;
+  if (head === "outline") {
+    if (rest.startsWith("offset")) return \`\${variants}outline-offset\`;
+    if (rest === "" || OUTLINE_STYLES.has(rest)) return \`\${variants}outline-style\`;
+    if ([...rest].every((ch) => ch >= "0" && ch <= "9")) return \`\${variants}outline-width\`;
+    if (COLORS.has(rest) || COLOR_KEYWORDS.has(rest) || isPaletteStep(rest) || isArbitraryColor(rest))
+      return \`\${variants}outline-color\`;
+    return \`\${variants}\${cls}\`;
+  }
 
   for (const p of PREFIXES) {
     if (base === p || base.startsWith(\`\${p}-\`)) return \`\${variants}\${p}\`;

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.511",
+  "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": {