synthesisui 0.16.87 → 0.16.89

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

@@ -527,8 +527,27 @@ function tokenRefFor(name) {
         return `{spacing.${bare.slice(8)}}`;
     if (bare.startsWith("shadow-"))
         return `{shadow.${bare.slice(7)}}`;
-    if (bare.startsWith("text-"))
+    if (bare.startsWith("background-image-gradient-")) {
+        return `{gradients.${bare.slice("background-image-gradient-".length)}}`;
+    }
+    if (bare.startsWith("gradient-"))
+        return `{gradients.${bare.slice(9)}}`;
+    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/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.
  *
@@ -271,8 +300,22 @@ export function readUtility(utility, declared) {
     const bracket = core.indexOf("-[");
     if (bracket !== -1 && core.endsWith("]")) {
         const head = core.slice(0, bracket);
-        const inner = core.slice(bracket + 2, -1);
+        let inner = core.slice(bracket + 2, -1);
+        /**
+         * `bg-[image:var(--gradient-ui)]` - the datatype hint says which property, in
+         * Tailwind's own syntax. Two real usages of the signature gradient wear exactly
+         * this spelling (dono, 01/08).
+         */
+        let hinted = null;
+        const hint = /^(image|color|length|size|position|url):/.exec(inner);
+        if (hint) {
+            hinted = hint[1] === "image" ? "backgroundImage" : null;
+            inner = inner.slice(hint[0].length);
+        }
         const value = resolveArbitrary(inner, declared);
+        if (hinted && value) {
+            return { property: hinted, value: value.value, token: value.token };
+        }
         /**
          * `text-[…]` IS AMBIGUOUS AND THE VALUE DECIDES.
          *
@@ -299,6 +342,24 @@ export function readUtility(utility, declared) {
     const rest = core.slice(dash + 1);
     const colorProp = COLOR_PROPERTY[prefix];
     if (colorProp) {
+        /**
+         * `bg-gradient-ui` is the utility Tailwind v4 mints from their
+         * `--background-image-gradient-ui`, and the colour path read `gradient-ui` as a
+         * colour name and found nothing. The token they declared is the answer - and
+         * `bg-gradient-to-r` must NOT land here, because nobody declares `--gradient-to-r`;
+         * it falls through to the stop composer below.
+         */
+        if (prefix === "bg" && rest.startsWith("gradient-")) {
+            const name = rest.slice(9);
+            if (declared.has(`--background-image-gradient-${name}`) ||
+                declared.has(`--gradient-${name}`)) {
+                return {
+                    property: "backgroundImage",
+                    value: `{gradients.${name}}`,
+                    token: `--gradient-${name}`,
+                };
+            }
+        }
         // Their own token first: `--color-ocean-500` for `bg-ocean-500`, which is
         // exactly how Tailwind v4's `@theme` publishes it.
         const own = `--color-${rest}`;
@@ -488,7 +549,35 @@ function tokenRefFor(name) {
         return `{spacing.${bare.slice(8)}}`;
     if (bare.startsWith("shadow-"))
         return `{shadow.${bare.slice(7)}}`;
+    // `--gradient-ui` and `--background-image-gradient-ui` are one token in two
+    // spellings - Tailwind v4's utility namespace wraps the first. Both reach
+    // `{gradients.ui}`, which is where the census files them.
+    if (bare.startsWith("background-image-gradient-")) {
+        return `{gradients.${bare.slice("background-image-gradient-".length)}}`;
+    }
+    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-"))
@@ -561,6 +650,76 @@ const UNITLESS = /^(opacity|zIndex|flex|flexGrow|flexShrink|order|lineHeight|fon
  * still reads as nothing is a failed DESIGN read, not layout plumbing.
  */
 const DESIGN_PREFIX = /^(?:p|px|py|pt|pr|pb|pl|m|mx|my|gap|rounded|text|font|bg|border|shadow|w|h|size|min-w|min-h|max-w|max-h|leading|tracking|opacity|fill|stroke)-\S/;
+/** `to-r` → `to right`: Tailwind's eight directions, spelled as CSS reads them. */
+const GRADIENT_DIRECTION = {
+    "to-t": "to top",
+    "to-tr": "to top right",
+    "to-r": "to right",
+    "to-br": "to bottom right",
+    "to-b": "to bottom",
+    "to-bl": "to bottom left",
+    "to-l": "to left",
+    "to-tl": "to top left",
+};
+/** A colour stop's value: their token first, Tailwind's table second, a literal last. */
+function stopValue(raw, declared) {
+    if (declared.has(`--color-${raw}`))
+        return refFor(raw);
+    if (TAILWIND_COLOR[raw])
+        return TAILWIND_COLOR[raw];
+    if (/^#[0-9a-fA-F]{3,8}$/.test(raw) ||
+        raw === "transparent" ||
+        raw === "white" ||
+        raw === "black") {
+        return raw;
+    }
+    return null;
+}
+/**
+ * A COMPOSED GRADIENT is one decision spread across four classes.
+ *
+ * `bg-gradient-to-r from-ocean-500 via-vivid-pink-500 to-purple-400` is nine real
+ * elements in one repo, and every piece read as nothing - `from-` is not a property
+ * table's prefix. Composed here because only the whole class list can see all the
+ * pieces at once; the stops resolve to their own tokens, so the gradient re-themes.
+ *
+ * `from-bottom-2` taught the guard: `slide-in-from-bottom-2` fragments wear the same
+ * prefix, so stops only count when a `bg-gradient-to-*` sits in the SAME class list -
+ * and a direction whose stops do not resolve is reported, never half-built.
+ */
+function composeGradient(utilities, declared) {
+    const dir = utilities.find((u) => GRADIENT_DIRECTION[u.replace(/^bg-gradient-/, "")] &&
+        u.startsWith("bg-gradient-"));
+    if (!dir)
+        return { value: null, consumed: new Set(), broken: [] };
+    const direction = GRADIENT_DIRECTION[dir.replace(/^bg-gradient-/, "")];
+    const consumed = new Set([dir]);
+    const broken = [];
+    const stops = [];
+    for (const kind of ["from", "via", "to"]) {
+        const cls = utilities.find((u) => u.startsWith(`${kind}-`));
+        if (!cls)
+            continue;
+        consumed.add(cls);
+        const value = stopValue(cls.slice(kind.length + 1), declared);
+        if (value)
+            stops.push(value);
+        else
+            broken.push(cls);
+    }
+    if (stops.length < 2 || broken.length > 0) {
+        return {
+            value: null,
+            consumed,
+            broken: broken.length > 0 ? broken : [dir],
+        };
+    }
+    return {
+        value: `linear-gradient(${direction}, ${stops.join(", ")})`,
+        consumed,
+        broken,
+    };
+}
 export function transcribe(classes, declared) {
     const out = {
         base: {},
@@ -572,8 +731,24 @@ export function transcribe(classes, declared) {
         fromToken: 0,
         fromLiteral: 0,
     };
+    /**
+     * The composed gradient first: it is one decision spread across four classes, and
+     * only the whole list sees all the pieces. Base-level only - a per-scheme stop
+     * (`dark:from-x`) is a condition this pass does not attempt, and it lands in
+     * `unreadable` below rather than half-composing.
+     */
+    const bareUtilities = classes
+        .filter((cls) => parseClass(cls).modifiers.length === 0)
+        .map((cls) => parseClass(cls).utility);
+    const gradient = composeGradient(bareUtilities, declared);
+    if (gradient.value)
+        out.base.backgroundImage = gradient.value;
+    for (const broke of gradient.broken)
+        out.unreadable.push(broke);
     for (const cls of classes) {
         const { modifiers, utility } = parseClass(cls);
+        if (gradient.consumed.has(utility) && modifiers.length === 0)
+            continue;
         const isDark = modifiers.includes("dark");
         const rest = modifiers.filter((m) => m !== "dark");
         // THE SLOT IS DECIDED BEFORE THE VALUE IS READ. Resolving first meant a
@@ -586,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
@@ -635,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

@@ -672,6 +672,10 @@ found them wastes a turn and risks contradicting the measurement:
 - **whether a component forwards the rest of its props**, and which it names
 - **which components appear inside which** at their call sites, as pairs
 - **the folder architecture**, and it will ask you which one has priority
+- **their gradients**, as tokens: \`--gradient-ui\` and its Tailwind-namespace twin land on
+  \`{gradients.ui}\`, composed \`bg-gradient-to-r from-x to-y\` stops become one gradient in
+  their own colour tokens, and a signature gradient is no longer a string trapped in class
+  names
 - **the theme**: how many dark utilities, in how many files, which library switches it, which
   attribute it is bound to, what \`<html>\` carries, and how many \`prefers-color-scheme\` rules
 - **the libraries and their versions** - motion, icons, primitives, charts, editors - with the

package/package.json

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