synthesisui 0.16.2 → 0.16.5

package/dist/claude-md.js

@@ -31,31 +31,26 @@ async function readInstalled(projectRoot) {
     }
     return locks;
 }
-/** First sentence of a description, capped - the manifest must stay lean. */
-function summarize(desc) {
-    if (typeof desc !== "string" || !desc.trim())
-        return "";
-    const first = desc.trim().split(/(?<=\.)\s/)[0] ?? desc.trim();
-    return first.length > 90 ? `${first.slice(0, 87)}…` : first;
-}
 /** One manifest line per recipe: name, what it is, and its variant axes. */
-function catalogLines(recipes) {
-    return Object.entries(recipes)
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([name, recipe]) => {
-        const r = recipe;
-        const axes = Object.entries(r.variants ?? {})
-            .map(([axis, options]) => {
-            const keys = Object.keys(options);
-            return keys.length <= 4 ? `${axis}: ${keys.join("|")}` : axis;
-        })
-            .join("; ");
-        const desc = summarize(r.description);
-        return {
-            name,
-            line: `  - \`ds-${name}\`${desc ? ` - ${desc}` : ""}${axes ? ` [${axes}]` : ""}`,
-        };
-    });
+/**
+ * NAMES ONLY, and the 87% that buys.
+ *
+ * The manifest was name + description + variant axes for every component -
+ * 4059 of this block's 5837 bytes on a 48-component system, carried into every
+ * session including the ones that never touch UI, and growing linearly with
+ * each system installed.
+ *
+ * But the question the agent asks here is binary: "is there already something
+ * for this?" A name answers it. Description and variants only matter AFTER
+ * that decision, and by then the agent is opening the GUIDE or running
+ * `component <slug> <name>`, which hands it the real typed props anyway.
+ *
+ * Names stay INLINE rather than moving to a file, deliberately. A lookup that
+ * costs a file read is a lookup an agent skips when it is in a hurry, and then
+ * writes the fourth button. Cheap to consult is the whole point.
+ */
+function catalogNames(recipes) {
+    return Object.keys(recipes).sort((a, b) => a.localeCompare(b));
 }
 /**
  * The COMPONENT MANIFEST for one installed system, read from its versioned
@@ -67,19 +62,20 @@ async function readManifest(projectRoot, ds) {
     try {
         const raw = await readFile(join(projectRoot, "_synthesisui", "ds", ds.slug, `v${ds.version}`, "design-system.json"), "utf8");
         const doc = JSON.parse(raw);
-        const components = catalogLines(doc.components ?? {});
-        const blocks = catalogLines(doc.blocks ?? {});
+        const components = catalogNames(doc.components ?? {});
+        const blocks = catalogNames(doc.blocks ?? {});
         if (components.length === 0 && blocks.length === 0)
             return null;
         const lines = [];
         if (components.length > 0) {
-            lines.push(`  Components (${components.length}) - USE these before creating new ones:`);
-            lines.push(...components.map((c) => c.line));
+            lines.push(`  Components (${components.length}) - look here BEFORE writing anything new:`);
+            lines.push(`  ${components.map((n) => `ds-${n}`).join(" ")}`);
         }
         if (blocks.length > 0) {
             lines.push(`  Engagement blocks (${blocks.length}):`);
-            lines.push(...blocks.map((c) => c.line));
+            lines.push(`  ${blocks.map((n) => `ds-${n}`).join(" ")}`);
         }
+        lines.push("  What each one does, its variants and states: the GUIDE above.");
         return lines.join("\n");
     }
     catch {

package/dist/commands/doctor.js

@@ -292,7 +292,14 @@ export async function doctor(opts) {
      *
      * Nobody debugs from 0%. They conclude the product does not work.
      */
-    const wiring = { imported: false, scoped: false };
+    const wiring = {
+        imported: false,
+        scoped: false,
+        /** `init` wrote a fonts file for this project (Next targets only). */
+        fontsWritten: false,
+        /** …and the stylesheet actually maps it onto the system's type tokens. */
+        fontsMapped: false,
+    };
     for await (const file of scopes.length > 0 ? walkAll(scopes) : walk(root)) {
         const src = await readFile(file, "utf8").catch(() => "");
         if (!src)
@@ -305,6 +312,15 @@ export async function doctor(opts) {
                 wiring.imported = true;
             if (src.includes(`data-ds="${table.slug}"`))
                 wiring.scoped = true;
+            // The third requirement, and the one that stayed invisible. `init`
+            // writes a fonts file and asks for two more edits; an agent told to
+            // check only the first two did exactly that, stopped, and left the
+            // project rendering in the framework's default face (my-test2, 27/07).
+            // What the checker checks is what gets done.
+            if (src.includes("--font-ds-") && /next\/font/.test(src))
+                wiring.fontsWritten = true;
+            if (/--ds-typography-families-\w+\s*:\s*var\(\s*--font-ds-/.test(src))
+                wiring.fontsMapped = true;
         }
         reports.push(scanSource(rel, src, table));
         if (recipes.size > 0) {
@@ -378,7 +394,11 @@ export async function doctor(opts) {
     // Before the number, because the number is the thing that misleads. An
     // installed-but-unwired system reads 0%, and 0% reads as "broken product"
     // rather than "one import missing".
-    const unwired = table.source === "installed" && (!wiring.imported || !wiring.scoped);
+    // Fonts only count as missing when `init` actually wrote the file - a
+    // non-Next project has no fonts.ts and must not be nagged about one.
+    const fontsPending = wiring.fontsWritten && !wiring.fontsMapped;
+    const unwired = table.source === "installed" &&
+        (!wiring.imported || !wiring.scoped || fontsPending);
     if (unwired) {
         console.log("");
         console.log(body(`${table.name ?? table.slug} is installed - but not wired up yet.`));
@@ -389,9 +409,28 @@ export async function doctor(opts) {
         console.log(body(wiring.scoped
             ? `  ✓ data-ds="${table.slug}" found`
             : `  ✗ no element carries data-ds="${table.slug}"`));
+        if (wiring.fontsWritten) {
+            console.log(body(wiring.fontsMapped
+                ? "  ✓ the type from fonts.ts is mapped onto the system"
+                : "  ✗ fonts.ts exists but nothing maps it - the system's type is not being used"));
+        }
         console.log("");
-        console.log(body(`Until both are true, none of the ${table.byName.size} tokens reach the browser`));
-        console.log(body("and the number below cannot mean anything."));
+        // Three requirements now, and they fail differently. Missing the import or
+        // the scope means NOTHING reaches the browser and the number below is
+        // noise. Missing only the type mapping means colour and spacing are
+        // working and the faces are not - saying "nothing reaches the browser"
+        // there would be false, and a report that overstates is one nobody trusts
+        // the next time.
+        const blocked = !wiring.imported || !wiring.scoped;
+        if (blocked) {
+            console.log(body(`Until the first two are true, none of the ${table.byName.size} tokens reach the`));
+            console.log(body("browser and the number below cannot mean anything."));
+        }
+        else {
+            console.log(body("Colour and spacing are working. Type is not: the system's faces"));
+            console.log(body("are declared and nothing points at them, so the page renders in"));
+            console.log(body("whatever the framework picked."));
+        }
         console.log(body("The exact snippets are in the output of `init`."));
     }
     if (hasSystem && measurable) {

package/dist/doctor/tokens.js

@@ -189,24 +189,69 @@ export function parseTokens(css) {
  */
 export function parseRootTokens(css) {
     const out = new Map();
-    for (const block of css.matchAll(/([^{}]*)\{([^{}]*)\}/g)) {
-        const selector = block[1].trim();
-        const isRoot = /^@theme\b/i.test(selector) ||
-            /(^|[\s,>+~])(:root|html|:host)\b/i.test(selector);
-        if (!isRoot)
+    const isRoot = (sel) => /^@theme\b/i.test(sel) || /(^|[\s,>+~])(:root|html|:host)\b/i.test(sel);
+    // Every `<selector> {` in the file. Nested ones show up too and are filtered
+    // by isRoot, so an @keyframes inside @theme is skipped rather than mined.
+    const opens = /([^{}]*)\{/g;
+    let m = opens.exec(css);
+    while (m !== null) {
+        // The capture runs back to the previous brace, so it carries imports and
+        // comments with it. The SELECTOR is only what follows the last `;` or
+        // comment - and `@theme` is anchored to the start, so without this it
+        // matched only when the block happened to be the first thing in the file.
+        // Every fixture had it first. This repo's own globals.css does not, and
+        // reported 0 of its 48 tokens (27/07).
+        const sel = (m[1]
+            .replace(/\/\*[\s\S]*?\*\//g, "")
+            .split(";")
+            .pop() ?? "").trim();
+        if (!isRoot(sel)) {
+            m = opens.exec(css);
             continue;
-        for (const m of block[2].matchAll(/(--[a-z0-9_-]+)\s*:\s*([^;}]+)/gi)) {
-            const name = m[1].toLowerCase();
+        }
+        // Walk to the MATCHING close, counting depth. The flat regex this replaces
+        // required a body with no braces at all, so it silently skipped any
+        // `@theme` containing `@keyframes` - which is the documented Tailwind v4
+        // layout. Measured against this repo's own globals.css: 48 tokens present,
+        // 2 found, and the 2 came from unrelated test fixtures (27/07).
+        const start = m.index + m[0].length;
+        let depth = 1;
+        let i = start;
+        while (i < css.length && depth > 0) {
+            const c = css[i];
+            if (c === "{")
+                depth++;
+            else if (c === "}")
+                depth--;
+            i++;
+        }
+        // Only declarations that are DIRECT children count. A custom property
+        // inside a keyframe step is animation state, not a design token.
+        let flat = "";
+        let d = 0;
+        for (let j = start; j < i - 1; j++) {
+            const c = css[j];
+            if (c === "{")
+                d++;
+            else if (c === "}")
+                d--;
+            else if (d === 0)
+                flat += c;
+        }
+        for (const t of flat.matchAll(/(--[a-z0-9_-]+)\s*:\s*([^;}]+)/gi)) {
+            const name = t[1].toLowerCase();
             // Belt and braces: v4 emits some `--tw-*` bookkeeping into @theme, and
             // it is machinery, not somebody's design vocabulary.
             if (name.startsWith("--tw-"))
                 continue;
-            const value = m[2].trim();
+            const value = t[2].trim();
             if (!value || value.startsWith("var("))
                 continue;
             if (!out.has(name))
                 out.set(name, value);
         }
+        opens.lastIndex = i;
+        m = opens.exec(css);
     }
     return out;
 }

package/package.json

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