synthesisui 0.16.104 → 0.16.106

package/dist/anatomy-read.js

@@ -145,6 +145,12 @@ root,
 /** This component's sketch, so a node can name its classes by INDEX instead
  *  of retyping them - see `AnatomyRead.at`. */
 sketch) {
+    /**
+     * THE PACKAGE THE RETURNED ELEMENT CAME FROM, measured rather than spelled.
+     * Node 0 of the sketch IS what the component returns, and the reader stamped its
+     * import specifier there - see `SketchNode.from`.
+     */
+    const rootPackage = sketch?.[0]?.from ?? null;
     const parts = {};
     const composes = [];
     const external = [];
@@ -342,20 +348,52 @@ sketch) {
      * `from` says it: the PACKAGE disambiguates what the name cannot. It wins over
      * the name, because a caller that sends both is telling us where it came from.
      */
-    const rootFrom = String(rootObj?.from ?? "").trim();
+    /**
+     * THE PACKAGE, NEVER THE DOT.
+     *
+     * This read `rootRaw.includes(".")` as "somebody else's namespace" - the exact
+     * rule the platform's own root reader stopped using, left behind here. So a
+     * reading that says `root: { from: "Collapsible.Root" }` stamped a TAG where a
+     * package belongs, and since this field wins over `rootTag` downstream, ten of
+     * their thirty-five components were badged `3RD-PARTY · COLLAPSIBLE.ROOT` while
+     * the census sat on the answer: `@base-ui/react/collapsible`, headless, ours to
+     * draw (dono, 03/08).
+     *
+     * The sketch stamps the package on node 0, so the answer is one lookup away and
+     * a caller that spells a tag no longer decides.
+     */
+    const sent = String(rootObj?.from ?? "").trim();
+    const looksLikeTag = sent !== "" && /^[A-Z]/.test(sent);
+    const rootFrom = looksLikeTag ? (rootPackage ?? "") : sent;
     if (rootFrom) {
         rootOut = { from: rootFrom, ...paints };
     }
     else if (rootRaw && /^[A-Z]/.test(rootRaw)) {
-        if (rootRaw.includes(".")) {
-            rootOut = { from: rootRaw, ...paints };
-        }
-        else {
+        if (!rootRaw.includes(".")) {
+            /**
+             * A BARE CAPITALISED NAME goes through the crosswalk, and kebab-casing is the
+             * fallback for a system we generated ourselves - the platform then checks the
+             * slug is a component it actually has, so a wrong guess degrades to nothing
+             * rather than to a hole.
+             */
             const slug = resolve?.(rootRaw) ?? safePartName(rootRaw);
             if (slug)
                 rootOut = { ref: slug, name: rootRaw, ...paints };
         }
+        else if (rootPackage) {
+            rootOut = { from: rootPackage, ...paints };
+        }
     }
+    /**
+     * A NAMESPACED NAME WITH NO PACKAGE ANYWHERE SAYS NOTHING.
+     *
+     * The dot is not being read as "somebody else's" here - that judgement belongs to
+     * the package and nothing else. It is read as what it structurally is: a member of
+     * a namespace, which cannot be one of their own top-level components, so the
+     * crosswalk has nothing to match and kebab-casing `BaseDialog.Root` into
+     * `base-dialog-root` would invent a component nobody has. Silence is the honest
+     * answer, and the package - when the sketch stamped one - is the loud one.
+     */
     if (coerced > 0) {
         notes.push(`${coerced} node${coerced === 1 ? "" : "s"} named a form that does not exist - kept, drawn as what ${coerced === 1 ? "it holds" : "they hold"}`);
     }

package/dist/commands/import.js

@@ -1774,13 +1774,40 @@ async function resolveReadParts(census, root) {
             ...(libraries.length > 0 ? { external: libraries } : {}),
             ...(resolved.root ? { root: resolved.root } : {}),
         };
+        /**
+         * ONE READING WRITES ONE GENERATION.
+         *
+         * The tree was REPLACED and the parts were MERGED, so every pass left its part
+         * names behind under the next pass's tree. Two commands is all it takes: `--dry`
+         * derives an anatomy and writes `box`, `box-2`, `text`; the send resolves the
+         * reader's own and writes `trigger`, `panel`, `status-dot` - and the first
+         * generation stays, styled and referenced by nothing.
+         *
+         * Measured on the owner's census (dono, 03/08): 143 orphan parts carrying real
+         * declarations across 26 of 36 components - `CollapsibleCard` alone had 26 parts
+         * and 13 in its tree, which is the "11 parts carry 33 declarations the anatomy
+         * never puts on an element" the Canvas reports. The banner was right and the
+         * cause was ours.
+         *
+         * A part from an EARLIER source survives only if the new tree names it - which
+         * keeps a CSS-module part the anatomy wears, and drops the stale generation.
+         */
+        const worn = new Set();
+        const collect = (nodes) => {
+            for (const node of nodes) {
+                if (node.part)
+                    worn.add(node.part);
+                if (Array.isArray(node.children))
+                    collect(node.children);
+            }
+        };
+        collect(resolved.tree);
+        const inherited = Object.fromEntries(Object.entries(look?.parts ?? {}).filter(([part]) => worn.has(part)));
         looks[component] = look
             ? {
                 ...look,
                 ...carried,
-                ...(hasParts
-                    ? { parts: { ...(look.parts ?? {}), ...resolved.parts } }
-                    : {}),
+                ...(hasParts ? { parts: { ...inherited, ...resolved.parts } } : {}),
             }
             : {
                 base: {},

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.106",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {