synthesisui 0.16.124 → 0.16.126

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/dist/doctor/variant-read.js

@@ -525,6 +525,36 @@ export function readVariants(source) {
  * inline conditions with a class list, 2 of them negated.
  */
 const INLINE_COND = /(!?)\s*([A-Za-z_$][\w$.]*)\s*(?:===|==)\s*["']([^"']+)["']\s*&&\s*(["'`])((?:(?!\4).)*)\4|(!?)\s*([A-Za-z_$][\w$]*)\s*&&\s*(["'`])((?:(?!\8).)*)\8/g;
+/**
+ * THE `cn()` CALL AN OFFSET SITS INSIDE, and its unconditional classes.
+ *
+ * A condition read out of the whole file has no element: `readInlineConditions(source)`
+ * scanned everything and every layer it produced landed on the ROOT. Their collapsible card
+ * writes `cursor-pointer` and `hover:bg-…` in the TRIGGER's call and `rotate-180` in the
+ * chevron's, and all three arrived as layers of the card - so
+ * `.ds-collapsible-card[data-is-open="false"] { transform: rotate(180deg) }` would have
+ * turned the whole card upside down at rest (test48, dono, 04/08).
+ *
+ * The unconditional literals of the enclosing call are exactly what the sketch stored for
+ * that node, so `placeLayers` can resolve them to an index. Same identification the lookup
+ * reader already uses - see `callSiteClasses`.
+ */
+function enclosingCallClasses(source, at) {
+    const CALL = /className=\{\s*(?:[A-Za-z_$][\w$]*\.)?(?:cn|clsx|classNames|cx|twMerge|twJoin|classcat)\(/g;
+    CALL.lastIndex = 0;
+    let found = null;
+    for (const m of source.matchAll(CALL)) {
+        const open = (m.index ?? 0) + m[0].length - 1;
+        if (open > at)
+            break;
+        const end = endOf(source, open);
+        if (end === -1 || end <= at)
+            continue;
+        const statics = unconditionalClasses(source.slice(open + 1, end - 1));
+        found = statics.length > 0 ? statics.join(" ") : null;
+    }
+    return found;
+}
 export function readInlineConditions(source) {
     const layers = [];
     INLINE_COND.lastIndex = 0;
@@ -547,7 +577,14 @@ export function readInlineConditions(source) {
         if (classes.length === 0)
             continue;
         const per = splitByCondition(classes, { [prop]: option });
-        layers.push(...per.layers);
+        /**
+         * WHOSE ELEMENT IT IS, off the call this condition sits in. Absent when the call has no
+         * unconditional literal to identify it, and then the layer stays on the component -
+         * which is the old behaviour, and honest: we could not place it.
+         */
+        const on = enclosingCallClasses(source, m.index ?? 0);
+        for (const layer of per.layers)
+            layers.push(on ? { ...layer, onClasses: on } : layer);
     }
     return layers;
 }

package/package.json

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