synthesisui 0.16.510 → 0.16.512

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/commands/template.js

@@ -2,7 +2,7 @@ import { mkdir, stat, writeFile } from "node:fs/promises";
 import { dirname, join, relative } from "node:path";
 import { readProjectConfig, resolveRegistry } from "../config.js";
 import { installedSheetCss, RECIPE_HEADER, recipeRulesFor, } from "../recipe-css.js";
-import { fetchDesignSystem, fetchTemplate } from "../registry.js";
+import { fetchDesignSystem, fetchPages, fetchTemplate } from "../registry.js";
 import { inTheirTongue, projectTongue, tongueFromArtifacts, } from "../their-tongue.js";
 import { keptLine, recordWritten, editedHere as theirEdits, } from "../written.js";
 /**
@@ -46,6 +46,28 @@ function withoutTheSheetInstruction(code) {
  * path classes; the co-located CSS (Next target) carries the responsive media
  * queries + the CSS-only hamburger, so it re-vests once `tokens.css` is in.
  */
+/**
+ * `template <slug>` SEM NOME - as páginas prontas do sistema (jornada "o CLI na primeira página", E02). Antes, a única
+ * resposta era pedir os dois argumentos, e o nome só se descobria tentando. Sem página nenhuma, o caminho que existe é
+ * a landing por seções, e a lista diz isso em vez de ficar vazia.
+ */
+export async function listPages(slug, registry) {
+    const pages = await fetchPages(resolveRegistry(registry), slug);
+    if (pages === null) {
+        console.log(`The registry did not list the pages of "${slug}". Try \`synthesisui template ${slug} <name>\`.`);
+        return;
+    }
+    if (pages.length === 0) {
+        console.log(`"${slug}" has no ready pages.`);
+        console.log(`A landing is put together from its sections: synthesisui landing ${slug} "<what the page is for>"`);
+        return;
+    }
+    console.log(`"${slug}" has ${pages.length} ready page${pages.length === 1 ? "" : "s"}:`);
+    for (const page of pages)
+        console.log(`  ${page}`);
+    console.log("");
+    console.log(`  synthesisui template ${slug} ${pages[0]}`);
+}
 export async function template(slug, name, opts) {
     const base = resolveRegistry(opts.registry);
     const root = opts.dir ?? process.cwd();

package/dist/index.js

@@ -34,7 +34,7 @@ import { request } from "./commands/request.js";
 import { status } from "./commands/status.js";
 import { summary } from "./commands/summary.js";
 import { sync } from "./commands/sync.js";
-import { template } from "./commands/template.js";
+import { listPages, template } from "./commands/template.js";
 import { upgrade } from "./commands/upgrade.js";
 import { use } from "./commands/use.js";
 import { appendEvent } from "./doctor/ledger.js";
@@ -62,6 +62,7 @@ Usage - deterministic, FREE:
   synthesisui blueprint | component        the same command, spelled in full
   synthesisui template <slug> <name>       materialize a whole page from a DS template
                                            (--as landing-home names the output - multi-page safe)
+  synthesisui template <slug>              the ready pages that system has
   synthesisui upgrade <slug>               update an installed DS + regenerate your components + migration brief
   synthesisui colours [slug]               write the colours you chose on the site into your CSS, in your names (asks first)
   synthesisui use <slug> "<intent>"        print a ready-to-paste agent prompt to build/modify on-system
@@ -608,11 +609,16 @@ async function main() {
             }
             const slug = args[0];
             const name = args[1];
-            if (!slug || !name) {
+            if (!slug) {
                 console.error("error: provide slug and template name - `synthesisui template <slug> <name>`");
                 process.exitCode = 1;
                 return;
             }
+            /** SEM NOME, A LISTA - o que o sistema tem, em vez de pedir um nome que só se descobre tentando (E02, 12/10). */
+            if (!name) {
+                await listPages(slug, registry);
+                return;
+            }
             let version;
             if (typeof flags.version === "string") {
                 version = Number.parseInt(flags.version.replace(/^v/i, ""), 10);

package/dist/registry.js

@@ -70,6 +70,23 @@ export async function fetchDesignSystem(base, slug, version) {
  * Fetches a whole page generated from a DS template (`?template=&target=`). The
  * server codegens it from `document.layouts[<template>]`; the CLI just writes it.
  */
+/**
+ * AS PÁGINAS PRONTAS DE UM SISTEMA - `template <slug>` sem nome (jornada "o CLI na primeira página", E02). `null` quando
+ * o registro ainda não sabe responder (anterior a `?pages=1`): ele devolve o documento, que não tem `pages`.
+ */
+export async function fetchPages(base, slug) {
+    const url = new URL(`${base}/api/registry/ds/${encodeURIComponent(slug)}`);
+    url.searchParams.set("pages", "1");
+    const res = await request(url.toString());
+    if (res.status === 404)
+        throw new RegistryError(`No design system "${slug}" that this machine can see. \`synthesisui list\` shows what is public.`);
+    if (!res.ok)
+        throw new RegistryError(`Registry responded ${res.status} while listing the pages of "${slug}".`);
+    const body = (await res.json().catch(() => ({})));
+    return Array.isArray(body.pages)
+        ? body.pages.filter((p) => typeof p === "string")
+        : null;
+}
 export async function fetchTemplate(base, slug, template, target, version, as_) {
     const url = new URL(`${base}/api/registry/ds/${encodeURIComponent(slug)}`);
     url.searchParams.set("template", template);

package/package.json

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