synthesisui 0.16.104 → 0.16.105

package/dist/commands/mcp.js

@@ -467,6 +467,14 @@ async function resolveAtNodes(root, entries) {
                  * this sends the evidence rather than a second implementation of it.
                  */
                 ...(look?.rootTag ? { rootTag: look.rootTag } : {}),
+                /**
+                 * HOW LONG THE SKETCH IS, so the far side can tell an `at` that names a
+                 * node from an `at` that names nothing. A reading points at the sketch by
+                 * INDEX - that is what keeps a class string from being retyped - and an
+                 * index past the end resolves to no classes at all, which is the silent
+                 * version of sending none (dono, 02/08).
+                 */
+                ...(sketch ? { sketchNodes: sketch.length } : {}),
             }
             : recipe0;
         entry = { ...entry, recipe: withLook };

package/dist/doctor/transcribe.js

@@ -354,6 +354,9 @@ const STATE_SPELLING = {
     "read-only": "readOnly",
     required: "required",
     placeholder: "placeholder",
+    /** Pseudo-ELEMENTS, which the contract spells like any other selector key. */
+    after: "after",
+    before: "before",
     highlighted: "highlighted",
     even: "even",
     odd: "odd",
@@ -1004,6 +1007,78 @@ function composeGradient(utilities, declared) {
         broken,
     };
 }
+/**
+ * WHICH HALF OF THE TRANSCRIPTION A MODIFIER LIST BELONGS TO.
+ *
+ * Extracted because a GRADIENT needs the same answer: it is three utilities that
+ * only mean something together, so it is composed per modifier group and then has
+ * to land in the slot that group shares. Two copies of this routing would be two
+ * answers to "where does `dark:after:` go", and the day they differ the reader is
+ * told a decision arrived somewhere it did not.
+ *
+ * MUTATES `out`: a layer or a state block is created on demand, so only call it
+ * once there is something to write.
+ */
+function slotFor(out, modifiers) {
+    const isDark = modifiers.includes("dark");
+    const rest = modifiers.filter((m) => m !== "dark");
+    if (rest.length === 0) {
+        return { target: isDark ? out.dark : out.base, unslotted: false };
+    }
+    /**
+     * EVERY MODIFIER GETS A SLOT, and the contract has had one all along.
+     *
+     * This used to route a bare state and drop everything else, on a comment
+     * that said "a recipe has no slot for it" - true when it was written and
+     * false since the transcription grew `layers`, which hold `scheme`,
+     * `state`, `within` and `at` TOGETHER. Measured on the owner's library:
+     * 29 real decisions dropped on that stale line, most of them a `dark:`
+     * over a state (not-expressed.md, dono, 01/08).
+     *
+     * A recipe that reconstructs the component must carry them, so the router
+     * reads the whole modifier list and only gives up on a modifier that
+     * genuinely has no home - and then it SAYS so.
+     */
+    const when = {};
+    let at;
+    let unslotted = false;
+    for (const mod of rest) {
+        /** `group-hover:`, `group-data-[checked]:` - the PARENT's state. */
+        const group = /^group-(.+)$/.exec(mod);
+        const bare = group ? group[1] : mod;
+        const raw = STATE_SPELLING[bare] != null
+            ? bare
+            : (DATA_STATE.exec(bare)?.[1] ?? null);
+        const state = raw ? (STATE_SPELLING[raw] ?? null) : null;
+        if (state) {
+            if (group)
+                when.within = state;
+            else
+                when.state = state;
+            continue;
+        }
+        /** `md:`, `lg:` - a breakpoint of theirs, by their own name. */
+        if (BREAKPOINT.test(mod) && !at) {
+            at = mod;
+            continue;
+        }
+        unslotted = true;
+    }
+    if (unslotted)
+        return { target: null, unslotted: true };
+    if (isDark)
+        when.scheme = "dark";
+    // A bare single state with no scheme keeps its own slot: `states` is what
+    // the compiler and every lens already read, and moving it to a layer
+    // would be a shape change nothing asked for.
+    if (when.state && !when.within && !when.scheme && !at && rest.length === 1) {
+        return {
+            target: out.states[when.state] ?? (out.states[when.state] = {}),
+            unslotted: false,
+        };
+    }
+    return { target: layerFor(out, when, at).style, unslotted: false };
+}
 export function transcribe(classes, declared) {
     const out = {
         base: {},
@@ -1016,92 +1091,64 @@ export function transcribe(classes, declared) {
         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.
+     * A GRADIENT IS THREE UTILITIES, AND IT BELONGS TO THE SLOT THEY SHARE.
+     *
+     * `composeGradient` ran on the BARE utilities only, so a gradient under any
+     * modifier was invisible - and the one gradient in a real 36-component library
+     * is under two of them: a Card draws its dark border as a masked `::after`
+     * filled with `dark:after:bg-gradient-to-b dark:after:from-electric-indigo-500
+     * dark:after:to-vivid-pink-500`. With the mask read and the paint missing, that
+     * edge is a shape with no colour, which is the same invisible as before
+     * (not-expressed.md, dono, 02/08).
+     *
+     * Grouped by the modifier list because that is what a gradient's three parts
+     * have in common, and routed through the same `slotFor` the loop below uses.
      */
-    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);
+    const consumedByGroup = new Set();
+    const groups = new Map();
     for (const cls of classes) {
         const { modifiers, utility } = parseClass(cls);
-        if (gradient.consumed.has(utility) && modifiers.length === 0)
+        const key = modifiers.join(":");
+        const entry = groups.get(key) ?? { modifiers, utilities: [] };
+        entry.utilities.push(utility);
+        groups.set(key, entry);
+    }
+    for (const group of groups.values()) {
+        const gradient = composeGradient(group.utilities, declared);
+        if (gradient.consumed.size === 0)
+            continue;
+        const prefix = group.modifiers.length
+            ? `${group.modifiers.join(":")}:`
+            : "";
+        for (const utility of gradient.consumed)
+            consumedByGroup.add(`${prefix}${utility}`);
+        if (gradient.value) {
+            // Slotted only now: `slotFor` creates the layer it answers with, and an
+            // empty layer is a shape the lint rejects on the way out.
+            const { target, unslotted } = slotFor(out, group.modifiers);
+            if (unslotted || !target) {
+                for (const utility of gradient.consumed)
+                    out.skipped.push(`${prefix}${utility}`);
+                continue;
+            }
+            target.backgroundImage = gradient.value;
+            continue;
+        }
+        for (const broke of gradient.broken) {
+            const at = `${prefix}${broke}`;
+            if (!out.unreadable.includes(at))
+                out.unreadable.push(at);
+        }
+    }
+    for (const cls of classes) {
+        const { modifiers, utility } = parseClass(cls);
+        if (consumedByGroup.has(cls))
             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
         // `dark:hover:` whose colour happened to be undeclared vanished in silence
         // rather than being reported as a look we have nowhere to put - two
         // different problems, and only one of them is theirs to hear about.
-        let target = null;
-        let unslotted = false;
-        if (rest.length === 0) {
-            target = isDark ? out.dark : out.base;
-        }
-        else {
-            /**
-             * EVERY MODIFIER GETS A SLOT, and the contract has had one all along.
-             *
-             * This used to route a bare state and drop everything else, on a comment
-             * that said "a recipe has no slot for it" - true when it was written and
-             * false since the transcription grew `layers`, which hold `scheme`,
-             * `state`, `within` and `at` TOGETHER. Measured on the owner's library:
-             * 29 real decisions dropped on that stale line, most of them a `dark:`
-             * over a state (not-expressed.md, dono, 01/08).
-             *
-             * A recipe that reconstructs the component must carry them, so the router
-             * reads the whole modifier list and only gives up on a modifier that
-             * genuinely has no home - and then it SAYS so.
-             */
-            const when = {};
-            let at;
-            for (const mod of rest) {
-                /** `group-hover:`, `group-data-[checked]:` - the PARENT's state. */
-                const group = /^group-(.+)$/.exec(mod);
-                const bare = group ? group[1] : mod;
-                const raw = STATE_SPELLING[bare] != null
-                    ? bare
-                    : (DATA_STATE.exec(bare)?.[1] ?? null);
-                const state = raw ? (STATE_SPELLING[raw] ?? null) : null;
-                if (state) {
-                    if (group)
-                        when.within = state;
-                    else
-                        when.state = state;
-                    continue;
-                }
-                /** `md:`, `lg:` - a breakpoint of theirs, by their own name. */
-                if (BREAKPOINT.test(mod) && !at) {
-                    at = mod;
-                    continue;
-                }
-                unslotted = true;
-            }
-            if (!unslotted) {
-                if (isDark)
-                    when.scheme = "dark";
-                // A bare single state with no scheme keeps its own slot: `states` is what
-                // the compiler and every lens already read, and moving it to a layer
-                // would be a shape change nothing asked for.
-                if (when.state &&
-                    !when.within &&
-                    !when.scheme &&
-                    !at &&
-                    rest.length === 1) {
-                    target = out.states[when.state] ?? (out.states[when.state] = {});
-                }
-                else {
-                    const layer = layerFor(out, when, at);
-                    target = layer.style;
-                }
-            }
-        }
+        const { target, unslotted } = slotFor(out, modifiers);
         const decl = readUtility(utility, declared);
         if (unslotted) {
             // Only worth saying when it IS a design value; an unslotted `sm:flex` is

package/package.json

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