synthesisui 0.16.125 → 0.16.127

package/dist/commands/import.js

@@ -874,7 +874,23 @@ export async function takeCensus(root, opts) {
      * because every declared option now looked used.
      */
     const declaredBy = new Map(defined.map((d) => [d.name, d]));
-    const enriched = inventory.map((c) => {
+    const enriched = inventory.map((c0) => {
+        /**
+         * A NAME THIS SCOPE DECLARES IS THEIRS, whoever else imports the same identifier.
+         *
+         * The usage scan reads imports per FILE, so a name gets the package of the file that
+         * imported it. Their `Pill` does `import { Toggle } from "@base-ui/react/toggle"`, and
+         * that name collides with the `Toggle` atom they wrote one folder over: the entry came
+         * out carrying `from: "@base-ui/react/toggle"`, and `from` is what makes the crosswalk
+         * skip a component and `exclusiveContracts` drop it. Their Toggle - 12 declarations, 3
+         * parts, `size` and `checked` - was absent from the whole system (test50, dono, 04/08).
+         *
+         * `defined` is a DEFINITION: a function of theirs that returns JSX. A scope that merely
+         * re-exports a library component under the same name is not in it, so a real
+         * third-party keeps its package. This is law 14's ordering, one level up: what they
+         * declare breaks the tie before the crosswalk is asked.
+         */
+        const c = declaredWins(c0, declaredBy.has(c0.name));
         const d = declaredBy.get(c.name);
         const fromVariants = variantAxes.get(c.name);
         if (!d && !fromVariants)
@@ -1901,6 +1917,19 @@ function sayReach(c) {
  * (a return the scanner did not follow) must say nothing rather than borrow the
  * first node's package.
  */
+/**
+ * A NAME THIS SCOPE DECLARES IS THEIRS - see the call site in `takeCensus` for what it cost.
+ *
+ * Kept as a function so the rule has a name and a test: the usage scan is per FILE, so an
+ * identifier takes the package of whoever imported it, and one of their own components can
+ * shadow one of their own names. `declared` is a DEFINITION of theirs, which is what makes
+ * this a tie-break rather than a preference.
+ */
+export function declaredWins(component, declared) {
+    return component.from && declared
+        ? { ...component, from: undefined }
+        : component;
+}
 function rootPackage(tag, sketch) {
     if (!tag || !/^[A-Z]/.test(tag))
         return {};

package/dist/component-codegen.js

@@ -125,6 +125,79 @@ function elementFor(name, recipe) {
 }
 /** Variant axes → typed props. An axis whose options ⊆ {true,false} is a
  *  boolean prop; empty axes (no visual effect) are skipped. */
+/**
+ * THE AXES A PART'S OWN LAYERS READ, which is where an imported recipe keeps them.
+ *
+ * `axesOf(part.variants)` is right for a recipe we generated and empty for one we READ: their
+ * conditional look arrives as `layers` with `when.variant`, never as a per-part `variants`
+ * map. So a generated part component wrote no `data-status`, the compiled rule
+ * `.ds-card-status-label[data-status="waiting"]` matched nothing, and the status colours of
+ * their card - the whole point of that component - appeared nowhere. 37 conditions across 7 of
+ * their components (test49, dono, 04/08).
+ *
+ * The option list comes from the COMPONENT's `variants`, because that is where a read recipe
+ * declares them; the part only names which axes it reacts to.
+ */
+function layerAxes(part, variants) {
+    const named = new Set();
+    for (const layer of part.layers ?? [])
+        for (const key of Object.keys(layer.when?.variant ?? {}))
+            if (variants?.[key])
+                named.add(key);
+    /**
+     * BUILT HERE RATHER THAN THROUGH `axesOf`, and that is the whole reason this was invisible.
+     *
+     * `axesOf` keeps an option only when its style block carries declarations, which is right
+     * for a recipe we generated - there the option IS the styles. A recipe we READ declares
+     * `variants.status.waiting = {}` and puts every declaration in `layers`, so `axesOf`
+     * answered "no axes" for a component with four of them.
+     */
+    /**
+     * A CONDITION ON SOMETHING THAT IS NOT AN AXIS IS STILL A LOOK SOMEBODY HAS TO TRIGGER.
+     *
+     * Their chevron rotates while the card is closed, keyed on `isOpen` - state the component
+     * holds, so no axis and no option list. It becomes a boolean prop on the generated part, the
+     * same shape the usage snippet emits, because otherwise the rule ships and the chevron never
+     * turns.
+     */
+    const boolish = new Map();
+    for (const layer of part.layers ?? [])
+        for (const [key, option] of Object.entries(layer.when?.variant ?? {})) {
+            if (variants?.[key])
+                continue;
+            boolish.set(key, (boolish.get(key) ?? new Set()).add(String(option)));
+        }
+    const out = [];
+    for (const [key, seen] of boolish)
+        out.push({
+            key,
+            prop: camel(key),
+            attr: kebab(key),
+            boolean: true,
+            styledFalse: seen.has("false"),
+            options: [...seen],
+        });
+    for (const key of named) {
+        const options = Object.keys(variants?.[key] ?? {});
+        if (options.length === 0)
+            continue;
+        out.push({
+            key,
+            prop: camel(key),
+            attr: kebab(key),
+            boolean: options.every((o) => o === "true" || o === "false"),
+            styledFalse: options.includes("false"),
+            options,
+        });
+    }
+    return out;
+}
+/** The axes of a part: the ones it declares, plus the ones its layers read. */
+function partAxesOf(part, variants) {
+    const own = axesOf(part.variants ?? {});
+    const keys = new Set(own.map((a) => a.key));
+    return [...own, ...layerAxes(part, variants).filter((a) => !keys.has(a.key))];
+}
 function axesOf(variants) {
     const axes = [];
     for (const [axis, options] of Object.entries(variants ?? {})) {
@@ -736,7 +809,7 @@ localName = name) {
         const part = recipe.parts?.[partName];
         if (!part)
             return "";
-        const partAxes = axesOf(part.variants ?? {});
+        const partAxes = partAxesOf(part, recipe.variants);
         const partComp = `${comp}${pascal(partName)}`;
         const { tag: partTag, attrs: partAttrs, voidEl: partVoid, } = partTagFor(part, formOf.get(partName));
         const partEl = asElement(partTag, partAttrs, partVoid);
@@ -873,7 +946,7 @@ ${orderedParts
         if (!part)
             return "";
         const partComp = `${comp}${pascal(partName)}`;
-        const partAxes = axesOf(part.variants ?? {});
+        const partAxes = partAxesOf(part, recipe.variants);
         const { tag: partTag, attrs: partAttrs, voidEl: partVoid, } = partTagFor(part, formOf.get(partName));
         const partEl = asElement(partTag, partAttrs, partVoid);
         /**

package/package.json

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