synthesisui 0.16.7 → 0.16.8

package/dist/commands/doctor.js

@@ -409,7 +409,12 @@ export async function doctor(opts) {
         }
     }
     else if (asideTotal > 0) {
-        console.log(body(`set aside ${plural(asideTotal, "value")} a token could never hold (--verbose for why)`));
+        // "a token could never hold" was written when every aside was an image
+        // renderer or an SVG paint. A literal sitting in a token's OWN fallback -
+        // `var(--ds-color-semantic-knob, #ffffff)` - is set aside for the opposite
+        // reason: it is already tokenized. The summary said the false half out
+        // loud and hid the true half behind a flag.
+        console.log(body(`set aside ${plural(asideTotal, "value")} that are not drift (--verbose for why)`));
     }
     // 0 of 0 is not a perfect score, it is an empty measurement - printing a
     // full bar there would be the report's first lie.

package/dist/component-codegen.js

@@ -32,11 +32,36 @@ function elementFor(name, recipe) {
             ? { tag: "button", attrs: ' type="button"' }
             : undefined);
     const tag = hit?.tag ?? "div";
-    return {
-        tag,
-        attrs: hit?.attrs ?? "",
-        voidEl: tag === "input" || tag === "hr",
-    };
+    const attrs = hit?.attrs ?? "";
+    const isVoid = tag === "input" || tag === "hr";
+    /**
+     * A VOID ELEMENT CANNOT HOST THE PARTS WE TELL PEOPLE TO PUT INSIDE IT.
+     *
+     * `switch` resolved to `<input type="checkbox">`, and the recipe gives it a
+     * `thumb` part - so the generated file documented `<Switch><SwitchThumb/>
+     * </Switch>`, which React refuses at runtime: input is void and must not
+     * have children. Found by an agent building a settings page against it
+     * (my-test4, 27/07). The documented usage was impossible.
+     *
+     * The recipe was right and the tag was wrong. Its own CSS styles `.ds-switch`
+     * as an `inline-flex` track with a 16px knob inside a 24px rail - that is a
+     * container, described as one, and only the element choice disagreed.
+     *
+     * `<button role="switch">` is the accessible pattern for exactly this: it
+     * takes children, it is focusable and operable by keyboard for free, and the
+     * caller supplies `aria-checked`. Promotion happens ONLY when parts exist, so
+     * a plain input stays an input.
+     */
+    if (isVoid && Object.keys(recipe.parts ?? {}).length > 0) {
+        // Carry the ARIA role across - it is the part of the input's meaning that
+        // survives the tag change, and dropping it would trade a runtime error for
+        // a silent accessibility regression.
+        const role = / role="[a-z]+"/.exec(attrs)?.[0] ?? "";
+        return tag === "input"
+            ? { tag: "button", attrs: ` type="button"${role}`, voidEl: false }
+            : { tag: "div", attrs: role || ' role="separator"', voidEl: false };
+    }
+    return { tag, attrs, voidEl: isVoid };
 }
 /** Variant axes → typed props. An axis whose options ⊆ {true,false} is a
  *  boolean prop; empty axes (no visual effect) are skipped. */
@@ -272,13 +297,44 @@ const STATE_PREFIX = {
 function blockToTailwind(block, prefix = "") {
     return Object.entries(block).flatMap(([prop, value]) => declToTailwind(prop, value).map((cls) => `${prefix}${cls}`));
 }
-function tailwindClassList(recipe) {
+function tailwindClassList(recipe, 
+/** CSS properties a variant axis owns - see `variantOwnedProps`. */
+exclude) {
+    const base = exclude
+        ? Object.fromEntries(Object.entries(recipe.base).filter(([prop]) => !exclude.has(prop)))
+        : recipe.base;
     const classes = [
-        ...blockToTailwind(recipe.base),
+        ...blockToTailwind(base),
+        // States keep everything: `hover:` and `disabled:` cannot collide with an
+        // unprefixed variant class, so there is nothing to resolve.
         ...Object.entries(recipe.states ?? {}).flatMap(([state, block]) => STATE_PREFIX[state] ? blockToTailwind(block, STATE_PREFIX[state]) : []),
     ];
     return classes.join(" ");
 }
+/**
+ * A VARIANT CANNOT OVERRIDE THE BASE WHEN BOTH ARE PLAIN UTILITIES.
+ *
+ * `Card` emitted `p-md` in BASE and `[padding:0]` for `padding="none"`. Same
+ * specificity, so which one wins is decided by the order Tailwind emits them
+ * in the stylesheet - not by the order of the class names, which is what the
+ * code looks like it controls. The prop silently did nothing (found by an
+ * agent that worked around it in a comment rather than reporting it,
+ * my-test4, 27/07).
+ *
+ * CSS mode never had this: it selects on `[data-padding="none"]`, which
+ * outranks the base class honestly. Tailwind mode has no such ladder, so the
+ * conflict has to be resolved where it is created - at generation.
+ *
+ * The property leaves BASE and the base value becomes the axis's default, so
+ * exactly one class ever sets it.
+ */
+function variantOwnedProps(variants, axis) {
+    const props = new Set();
+    for (const option of axis.options)
+        for (const prop of Object.keys(variants?.[axis.key]?.[option] ?? {}))
+            props.add(prop);
+    return [...props];
+}
 // ── Emission ─────────────────────────────────────────────────────────────────
 function header(slug, name, version, mode) {
     const setup = mode === "tailwind"
@@ -295,8 +351,14 @@ const joinCls = (parts) => `[${parts.join(", ")}].filter(Boolean).join(" ")`;
 /** JSDoc showing how to compose the component with its parts + content, so the
  *  materialized code doesn't read as "a bare shell renders nothing" (dogfood
  *  #5). Built from the recipe's parts. */
-function compositionHint(comp, name, recipe) {
+function compositionHint(comp, name, recipe, voidEl = false) {
     const partNames = Object.keys(recipe.parts ?? {});
+    // An `<input>` or `<hr>` takes no children, and telling somebody to put
+    // content inside one is an instruction that throws. With parts, the element
+    // was promoted above and this branch never runs for a void tag.
+    if (voidEl) {
+        return `/** Wears the "${name}" recipe. Takes no children - it renders a single void element. */`;
+    }
     if (partNames.length === 0) {
         return `/** Wears the "${name}" recipe. Put your content inside: <${comp}>…</${comp}>. */`;
     }
@@ -317,7 +379,6 @@ function emitCssMode(slug, name, recipe, version) {
     const comp = pascal(name);
     const propNames = axes.map((a) => a.prop);
     const destructure = [...propNames, "className", "...props"].join(", ");
-    void voidEl; // both void and container elements self-close ({...props} carries children)
     const rootJsx = `    <${tag}${attrs}\n      className={${joinCls([`"ds-${name}"`, "className"])}}\n${dataAttrLines(axes)}${axes.length ? "\n" : ""}      {...props}\n    />`;
     const parts = Object.entries(recipe.parts ?? {}).map(([partName, part]) => {
         const partAxes = axesOf(part.variants ?? {});
@@ -345,7 +406,7 @@ import type { ComponentPropsWithoutRef } from "react";
 
 type ${comp}Props = ${propsType(axes, tag)};
 
-${compositionHint(comp, name, recipe)}
+${compositionHint(comp, name, recipe, voidEl)}
 export function ${comp}({ ${destructure} }: ${comp}Props) {
   return (
 ${rootJsx}
@@ -368,11 +429,17 @@ function emitTailwindMode(slug, name, recipe, version) {
     const booleanConsts = axes
         .filter((a) => a.boolean)
         .map((a) => `const ${a.prop.toUpperCase()} = ${JSON.stringify(blockToTailwind(recipe.variants[a.key]?.true ?? {}).join(" "))};`);
+    // Every property some axis controls leaves BASE, and the base value becomes
+    // that axis's default - so exactly one class ever sets it and the prop
+    // actually wins.
+    const owned = new Map(axes.map((a) => [a.prop, variantOwnedProps(recipe.variants, a)]));
+    const excluded = new Set([...owned.values()].flat());
+    const fallbackFor = (a) => JSON.stringify(blockToTailwind(Object.fromEntries(Object.entries(recipe.base).filter(([prop]) => (owned.get(a.prop) ?? []).includes(prop)))).join(" "));
     const clsParts = [
         "BASE",
         ...axes.map((a) => a.boolean
-            ? `${a.prop} ? ${a.prop.toUpperCase()} : ""`
-            : `${a.prop} ? ${a.prop.toUpperCase()}[${a.prop}] : ""`),
+            ? `${a.prop} ? ${a.prop.toUpperCase()} : ${fallbackFor(a)}`
+            : `${a.prop} ? ${a.prop.toUpperCase()}[${a.prop}] : ${fallbackFor(a)}`),
         "className",
     ];
     const destructure = [
@@ -380,17 +447,16 @@ function emitTailwindMode(slug, name, recipe, version) {
         "className",
         "...props",
     ].join(", ");
-    void voidEl;
     return `${header(slug, name, version, "tailwind")}
 
 import type { ComponentPropsWithoutRef } from "react";
 
-const BASE = ${JSON.stringify(tailwindClassList(recipe))};
+const BASE = ${JSON.stringify(tailwindClassList(recipe, excluded))};
 ${[...variantConsts, ...booleanConsts].join("\n")}
 
 type ${comp}Props = ${propsType(axes, tag)};
 
-${compositionHint(comp, name, recipe)}
+${compositionHint(comp, name, recipe, voidEl)}
 export function ${comp}({ ${destructure} }: ${comp}Props) {
   return (
     <${tag}${attrs}

package/package.json

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