synthesisui 0.16.88 → 0.16.90

package/dist/commands/mcp.js

@@ -288,7 +288,21 @@ async function validateRecipe(name, recipe) {
     const answer = await askCatalogue("validate", { name, recipe });
     if (!answer.ok)
         return answer.because;
-    const v = answer.body;
+    const raw = answer.body;
+    /**
+     * THE WIRE IS NOT A TYPE SYSTEM. The schema-refusal branch of the API answered
+     * without a `checklist`, and this client read `v.checklist.length` unguarded - so the
+     * one recipe that most needed the validator crashed it, on every call, and a real
+     * import had to validate against the API by hand (test13, 01/08). Every field is
+     * defaulted; a shape this cannot read degrades to a sentence, never to a throw.
+     */
+    const v = {
+        ok: raw.ok === true,
+        rejected: raw.rejected ?? [],
+        lost: raw.lost ?? [],
+        missing: raw.missing ?? [],
+        checklist: raw.checklist ?? [],
+    };
     if (v.ok) {
         return `${name}: everything you sent would survive. Send it.`;
     }

package/dist/doctor/css-modules.js

@@ -532,8 +532,22 @@ function tokenRefFor(name) {
     }
     if (bare.startsWith("gradient-"))
         return `{gradients.${bare.slice(9)}}`;
-    if (bare.startsWith("text-"))
+    if (bare.startsWith("text-")) {
+        // The companion token: `--text-body-s--line-height` names the line-height OF a
+        // step, and a double dash inside a ref is a grammar nothing accepts (test13).
+        const companion = /^text-(.+?)--(line-height|letter-spacing|font-weight)$/.exec(bare);
+        if (companion) {
+            const prop = {
+                "line-height": "lineHeight",
+                "letter-spacing": "letterSpacing",
+                "font-weight": "weight",
+            }[companion[2]];
+            return `{typography.scale.${companion[1]}.${prop}}`;
+        }
+        if (bare.slice(5).includes("--"))
+            return `var(${name})`;
         return `{typography.scale.${bare.slice(5)}.fontSize}`;
+    }
     if (bare.startsWith("font-"))
         return `{typography.families.${bare.slice(5)}}`;
     return `var(${name})`;

package/dist/doctor/signals.js

@@ -75,11 +75,19 @@ export function emptySignals() {
             enableSystem: null,
             prefersColorScheme: 0,
             htmlCarries: [],
+            page: [],
         },
         libraries: [],
         conflicts: [],
     };
 }
+function addPagePaint(into, token, scheme, source) {
+    const found = into.theme.page.find((p) => p.token === token && p.scheme === scheme && p.source === source);
+    if (found)
+        found.count += 1;
+    else
+        into.theme.page.push({ token, scheme, source, count: 1 });
+}
 const ANY_IMPORT = /(?:from\s+["']([^"'.][^"']*)["']|require\(\s*["']([^"'.][^"']*)["']\s*\))/g;
 /** The package a specifier belongs to: `@tiptap/react` and `motion/react` both keep the
  *  part a manifest would name. */
@@ -110,6 +118,13 @@ export function readSignalsInto(into, imports, file, source) {
     const isStyle = /\.(css|scss|sass|less)$/i.test(file);
     if (isStyle) {
         into.theme.prefersColorScheme += (source.match(/prefers-color-scheme/g) ?? []).length;
+        /**
+         * `body { background: … }` in a global stylesheet is the page saying so itself -
+         * the strongest of the three page signals and the one a class sweep never finds.
+         */
+        for (const m of source.matchAll(/(?:^|\})\s*(?:html|body|:root)[^{]*\{[^}]*?background(?:-color)?\s*:\s*([^;}]+)/g)) {
+            addPagePaint(into, m[1].trim(), "light", "global-css");
+        }
         return;
     }
     if (!isCode)
@@ -152,6 +167,37 @@ export function readSignalsInto(into, imports, file, source) {
             }
         }
     }
+    /**
+     * THE PAGE PAINTS, from the markup. A `min-h-screen` container with a background is
+     * the page - that idiom is universal, which is what makes this generalize across
+     * folder layouts. `dark:bg-x` files under dark; `bg-x` under light.
+     */
+    for (const m of source.matchAll(/className=\{?["'`]([^"'`]+)["'`]/g)) {
+        const list = m[1].split(/\s+/);
+        const isViewport = list.some((c) => /^(?:min-h-screen|h-screen|min-h-dvh|h-dvh)$/.test(c));
+        if (isViewport) {
+            for (const c of list) {
+                const dark = /^dark:bg-([a-z][a-z0-9-]*)$/.exec(c);
+                const light = /^bg-([a-z][a-z0-9-]*)$/.exec(c);
+                if (dark)
+                    addPagePaint(into, dark[1], "dark", "viewport-container");
+                else if (light &&
+                    !/^(gradient|opacity|clip|cover|contain|center|fixed|local|scroll|none|auto|repeat|transparent|current|inherit)/.test(light[1])) {
+                    addPagePaint(into, light[1], "light", "viewport-container");
+                }
+            }
+        }
+    }
+    for (const m of source.matchAll(/<(?:main|body)\b[^>]*className=\{?["'`]([^"'`]+)["'`]/g)) {
+        for (const c of m[1].split(/\s+/)) {
+            const dark = /^dark:bg-([a-z][a-z0-9-]*)$/.exec(c);
+            const light = /^bg-([a-z][a-z0-9-]*)$/.exec(c);
+            if (dark)
+                addPagePaint(into, dark[1], "dark", "main-or-body");
+            else if (light)
+                addPagePaint(into, light[1], "light", "main-or-body");
+        }
+    }
     ANY_IMPORT.lastIndex = 0;
     const seen = new Set();
     for (const m of source.matchAll(ANY_IMPORT)) {
@@ -267,6 +313,31 @@ export function describeSignals(s) {
     if (t.htmlCarries.length > 0) {
         out.push(`\`<html>\` carries ${t.htmlCarries.map((a) => `\`${a}\``).join(" ")} - which is the ancestor every dark rule of theirs matches, and therefore the one ours must match.`);
     }
+    /**
+     * The page, said as evidence with the SOURCE named - "2 full-viewport containers"
+     * is a claim somebody can weigh against "1 main". Strongest first per scheme.
+     */
+    const strength = {
+        "global-css": 3,
+        "main-or-body": 2,
+        "viewport-container": 1,
+    };
+    for (const scheme of ["dark", "light"]) {
+        const paints = t.page
+            .filter((p) => p.scheme === scheme)
+            .sort((a, b) => strength[b.source] - strength[a.source] || b.count - a.count);
+        if (paints.length === 0)
+            continue;
+        const label = {
+            "global-css": "body in global CSS",
+            "main-or-body": "on <main>/<body>",
+            "viewport-container": "full-viewport container",
+        };
+        out.push(`the ${scheme} page paints ${paints
+            .slice(0, 3)
+            .map((p) => `\`${p.token}\` (${p.count}x ${label[p.source]})`)
+            .join(", ")} - the canvas question, answered from the files rather than hunted.`);
+    }
     for (const family of ["primitives", "motion", "icons", "charts", "editors"]) {
         const found = s.libraries.filter((l) => l.family === family);
         if (found.length === 0)

package/dist/doctor/transcribe.js

@@ -190,8 +190,37 @@ const TYPE_KEYWORD = {
     underline: { property: "textDecoration", value: "underline" },
 };
 /** States we recognise. Anything else is skipped rather than invented. */
-const STATE = /^(hover|focus|focus-visible|active|disabled|checked)$/;
-const DATA_STATE = /^data-\[([a-z-]+)\]$/;
+/**
+ * A MODIFIER'S STATE, IN THE CONTRACT'S SPELLING.
+ *
+ * The old regex KEYED the state with the raw modifier, so `focus-visible:ring-2` arrived
+ * as `states["focus-visible"]` - a key the compiler cannot spell and the lint rejects.
+ * A real import hit it on Modal's close button and had to hand-patch the census before
+ * sending (test13, 01/08). The reading edge normalizes; the contract stays canonical.
+ */
+const STATE_SPELLING = {
+    hover: "hover",
+    focus: "focus",
+    "focus-visible": "focusVisible",
+    "focus-within": "focus",
+    active: "active",
+    disabled: "disabled",
+    checked: "checked",
+    selected: "selected",
+    open: "open",
+    invalid: "invalid",
+    loading: "loading",
+    "read-only": "readOnly",
+    required: "required",
+    placeholder: "placeholder",
+    highlighted: "highlighted",
+    even: "even",
+    odd: "odd",
+    first: "first",
+    last: "last",
+    empty: "empty",
+};
+const DATA_STATE = /^data-\[(?:state=)?([a-z-]+)\]$/;
 /**
  * Split a class into its modifiers and the utility itself.
  *
@@ -529,6 +558,26 @@ function tokenRefFor(name) {
     if (bare.startsWith("gradient-"))
         return `{gradients.${bare.slice(9)}}`;
     if (bare.startsWith("text-")) {
+        /**
+         * THE COMPANION TOKEN. Tailwind v4 spells "the line-height OF text-body-s" as
+         * `--text-body-s--line-height` - a double dash inside one name. Read as a step name
+         * it produced `{typography.scale.body-s--line-height.fontSize}`, whose double dash
+         * no ref grammar accepts, and the whole recipe was REFUSED at validation (test13,
+         * 01/08). The suffix names the property; the middle names the step.
+         */
+        const companion = /^text-(.+?)--(line-height|letter-spacing|font-weight)$/.exec(bare);
+        if (companion) {
+            const prop = {
+                "line-height": "lineHeight",
+                "letter-spacing": "letterSpacing",
+                "font-weight": "weight",
+            }[companion[2]];
+            return `{typography.scale.${companion[1]}.${prop}}`;
+        }
+        // Any other double dash is a name this grammar cannot hold - the literal var()
+        // still resolves against their own stylesheet, and an invalid ref helps nobody.
+        if (bare.slice(5).includes("--"))
+            return `var(${name})`;
         return `{typography.scale.${bare.slice(5)}.fontSize}`;
     }
     if (bare.startsWith("font-"))
@@ -712,9 +761,10 @@ export function transcribe(classes, declared) {
             target = isDark ? out.dark : out.base;
         }
         else if (rest.length === 1 && !isDark) {
-            const state = STATE.test(rest[0])
+            const raw = STATE_SPELLING[rest[0]] != null
                 ? rest[0]
                 : (DATA_STATE.exec(rest[0])?.[1] ?? null);
+            const state = raw ? (STATE_SPELLING[raw] ?? null) : null;
             if (state)
                 target = out.states[state] ?? (out.states[state] = {});
             else
@@ -761,6 +811,23 @@ export function transcribe(classes, declared) {
         // First write wins, matching how a class list resolves for the properties
         // we read: later duplicates in the same list are almost always a merge
         // artefact rather than an override.
+        /**
+         * `size-4` is Tailwind for width AND height; CSS has no `size` property for
+         * elements, so the platform dropped the declaration whole and a real import had to
+         * rewrite every one by hand as `w-N h-N` (test13, 01/08). One utility, two
+         * declarations, on whichever target the modifiers routed to.
+         */
+        if (decl.property === "size") {
+            if (target.width == null)
+                target.width = decl.value;
+            if (target.height == null)
+                target.height = decl.value;
+            if (decl.token)
+                out.fromToken += 1;
+            else
+                out.fromLiteral += 1;
+            continue;
+        }
         if (target[decl.property] != null)
             continue;
         target[decl.property] = decl.value;

package/dist/doctor/variant-read.js

@@ -49,6 +49,7 @@ const MODIFIER_STATE = {
     checked: "checked",
     indeterminate: "checked",
     selected: "selected",
+    highlighted: "highlighted",
     open: "open",
     invalid: "invalid",
     required: "required",

package/dist/skill-import.js

@@ -251,12 +251,29 @@ html carries lang="en" data-theme="dark" - which is the ancestor every dark rule
 That is a real run. Your job is to CONFIRM OR CORRECT it, not to reproduce it - and a sweep
 would bring back a different slice than the next one, which is the worse property of the two.
 
+**Confirmation costs ZERO reads.** A real run spent 7 pattern searches and 39 file reads to
+"confirm" a theme the census had already counted (test14, 01/08) - that is re-deriving, not
+confirming. The rule: the census numbers are TRUE unless something you already read while
+doing other work contradicts them. Only on a contradiction do you open a file, and only the
+one file the evidence names. If nothing contradicts, write the census's answer down and move
+on - it costs one sentence.
+
 \`has: ["dark"]\` on a dark-only product is the right answer. It is better than filling a light
 slot on their behalf, and it makes adding light a deliberate act they take later.
 
 **\`roles\` - which of their values carries which meaning**, when their token names do not say.
 A project naming its neutrals by temperature (\`--color-darkgray-900\`) has told you nothing
-about which one is the page. Read a screen and see.
+about which one is the page - and the census now answers that too, under "the page paints":
+
+\`\`\`
+the dark page paints darkgray-500 (2x on <main>/<body>, 2x full-viewport container)
+the light page paints #EDF3FA (1x body in global CSS), lightgray-200 (2x viewport)
+\`\`\`
+
+Three countable sources, strongest first: \`body { background }\` in global CSS, a background
+on \`<main>\`/\`<body>\`, and a full-viewport container (\`min-h-screen\` + a background IS the
+page). **Do not hunt for the canvas** - pick from this evidence, and name the source when you
+report it. When the sources disagree, that disagreement is itself the finding to surface.
 
 **\`fonts\` and \`concept\`** - the voice, and one paragraph on what this product is. The concept
 feeds every recommendation downstream, so a real one beats a generic one by a wide margin.

package/package.json

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