synthesisui 0.16.103 → 0.16.105

package/dist/commands/import.js

@@ -636,6 +636,21 @@ export async function takeCensus(root, opts) {
             }
             usageSeen.add(rel);
             usageProgress?.step(rel);
+            /**
+             * THE THEME IS SWITCHED WHERE THE APP IS, and this loop was walking right
+             * past the file that says so. Measured on a real monorepo (dono, 02/08):
+             * `packages/ui` declares 346 dark utilities across 58 files and NONE of the
+             * four switch fields; `apps/web-dashboard` declares `data-theme`,
+             * `defaultTheme="dark"`, `enableSystem={false}` and an `<html>` carrying both
+             * - so "which face does it open in" was unanswerable from the census and cost
+             * a hand read of a file this loop already had open.
+             *
+             * The scope is read first and wins on every field, so this only fills what a
+             * library legitimately does not have - and the label is recorded, because the
+             * system being measured here and the theme being switched there are two facts,
+             * not one average.
+             */
+            readSignalsInto(signals, importTally, rel, src, u.label);
             scanComponentsInto(usageTally, rel, src, [...shared, ...uInternal]);
             // WHERE THE PAIRS LIVE. A library composes almost none of itself inside
             // itself - `Button` goes inside `Modal` in the APP, not in the library

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/signals.js

@@ -75,6 +75,7 @@ export function emptySignals() {
             enableSystem: null,
             prefersColorScheme: 0,
             htmlCarries: [],
+            switchedIn: null,
             page: [],
         },
         libraries: [],
@@ -113,7 +114,13 @@ export function libraryOf(specifier) {
  * Fold one file into the signals. Called from the walk the census already does, so nothing
  * here costs a second pass over the disk.
  */
-export function readSignalsInto(into, imports, file, source) {
+export function readSignalsInto(into, imports, file, source, 
+/**
+ * WHERE THIS FILE IS, when it is not the system's own folder - the `--usage`
+ * label. Present means "read for evidence", and the only thing it changes is
+ * that a switch found here is RECORDED AS FOUND HERE. See `switchedIn`.
+ */
+from) {
     const isCode = /\.(tsx|jsx|ts|js|mjs|cjs|vue|svelte)$/i.test(file);
     const isStyle = /\.(css|scss|sass|less)$/i.test(file);
     if (isStyle) {
@@ -146,6 +153,16 @@ export function readSignalsInto(into, imports, file, source) {
             }
         }
     }
+    /**
+     * THE SCOPE WINS, ALWAYS - `??=` is the whole rule. The system's own folder is
+     * read first, so a switch it declares is never overwritten by an app's; an app
+     * only fills what was null, which is the four fields a library legitimately does
+     * not have.
+     */
+    const before = into.theme.attribute === null &&
+        into.theme.defaultTheme === null &&
+        into.theme.enableSystem === null &&
+        into.theme.htmlCarries.length === 0;
     into.theme.attribute ??= THEME_ATTRIBUTE.exec(source)?.[1] ?? null;
     into.theme.defaultTheme ??= DEFAULT_THEME.exec(source)?.[1] ?? null;
     if (into.theme.enableSystem === null) {
@@ -160,12 +177,42 @@ export function readSignalsInto(into, imports, file, source) {
      */
     const html = HTML_ATTRS.exec(source);
     if (html) {
-        for (const m of html[1].matchAll(/([a-zA-Z-]+)\s*=\s*(?:["']([^"']*)["']|\{["']([^"']*)["']\})/g)) {
-            const attr = `${m[1]}="${m[2] ?? m[3] ?? ""}"`;
+        const carry = (attr) => {
             if (!into.theme.htmlCarries.includes(attr)) {
                 into.theme.htmlCarries.push(attr);
             }
+        };
+        for (const m of html[1].matchAll(/([a-zA-Z-]+)\s*=\s*(?:["']([^"']*)["']|\{["']([^"']*)["']\})/g)) {
+            carry(`${m[1]}="${m[2] ?? m[3] ?? ""}"`);
         }
+        /**
+         * `style={{ colorScheme: "dark" }}` - the SECOND thing that decides what a dark
+         * rule matches, and the attribute pass above cannot see it: its value is not a
+         * quoted string sitting after an `=`, it is a property inside an object.
+         *
+         * It is on the owner's own root layout, right beside the `data-theme` the pass
+         * DID read, and it is what tells the browser which face to paint its own
+         * widgets - a scrollbar and a form control follow `color-scheme`, not a class
+         * (dono, 02/08).
+         */
+        const scheme = /\bcolorScheme\s*:\s*["']([^"']+)["']/.exec(html[1]);
+        if (scheme)
+            carry(`colorScheme="${scheme[1]}"`);
+    }
+    /**
+     * WHOSE FILE ANSWERED IT. Stamped only when the switch was null before this file
+     * and is not null after, so the label names the file's ROOT that actually
+     * supplied it - and only for a `--usage` root, because the scope needs no
+     * attribution: it is the system by definition.
+     */
+    if (from &&
+        into.theme.switchedIn === null &&
+        before &&
+        (into.theme.attribute !== null ||
+            into.theme.defaultTheme !== null ||
+            into.theme.enableSystem !== null ||
+            into.theme.htmlCarries.length > 0)) {
+        into.theme.switchedIn = from;
     }
     /**
      * THE PAGE PAINTS, from the markup. A `min-h-screen` container with a background is
@@ -310,6 +357,15 @@ export function describeSignals(s) {
             bits.push("with the OS allowed a vote");
         out.push(`${bits.join(", ")}.`);
     }
+    /**
+     * TWO PLACES, TWO FACTS. A library that declares 346 dark utilities and no
+     * switch is not a library missing something - the switch belongs to the app that
+     * mounts it. Saying WHERE keeps the sentence true and stops the reader from
+     * concluding the system declares a provider it does not have.
+     */
+    if (t.switchedIn) {
+        out.push(`the system is measured where you scoped it; the theme is switched in \`${t.switchedIn}\` - that is where the attribute, the default and the \`<html>\` came from.`);
+    }
     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.`);
     }

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/dist/skill-import.js

@@ -331,6 +331,13 @@ census carries is the failure this pipeline keeps paying for. The sketch now run
 so a big component arrives WHOLE: \`TextEditor\` used to lose its editable region at node 60 and
 that single truncation is what forced a hand-read of the file (dono, 01/08).
 
+\`signals.theme\` includes the SWITCH - \`attribute\`, \`defaultTheme\`, \`enableSystem\` and what
+\`<html>\` carries, \`colorScheme\` included - read from the \`--usage\` roots as well as the scope,
+because a component library declares the dark utilities and the APP declares the switch. When it
+came from an app, \`switchedIn\` names which one: say "the system is measured in \`packages/ui\`, the
+theme is switched in \`apps/web-dashboard\`" rather than reporting that the library declares a
+provider it does not have. Answering 2d never needs a layout file opened.
+
 **Validate in ONE call, at the end.** Build every recipe in memory first, then send them all to
 \`validate_recipes\` - one round trip for the whole reading instead of one per component. A reader
 with 35 anatomies spent 35 turns asking the same question, and none of that was thinking. Only

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.103",
+  "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": {