synthesisui 0.16.30 → 0.16.32

package/dist/commands/sync.js

@@ -16,7 +16,7 @@ export function decisionLine(d, slug) {
         case "authored":
             return `  ✓ ${d.id} authored on the platform${note}. Get it: npx synthesisui@latest upgrade ${slug}`;
         case "declined":
-            return `  ✕ ${d.id} declined${note}. The boundary stands - the system stays without it.`;
+            return `  ✕ ${d.id} declined${note}. Now a RULE of the system - it travels with the next upgrade, and agents obey it.`;
         case "platform":
             return `  → ${d.id} routed to the synthesisui team${note}. It is their queue now.`;
         default:

package/dist/component-codegen.js

@@ -127,14 +127,48 @@ export function propsTypeName(reactMajor) {
         ? "ComponentProps"
         : "ComponentPropsWithoutRef";
 }
-function propsType(axes, tag, base) {
+function propsType(axes, tag, base, withAs = false) {
     const extras = axes.map((a) => a.boolean
         ? `  ${a.prop}?: boolean;`
         : `  ${a.prop}?: ${a.options.map((o) => `"${o}"`).join(" | ")};`);
+    if (withAs)
+        extras.push("  /** Render as a different element (th, dt, h2, li…) - the recipe is", "   *  styling only, so the document's semantics stay yours. */", "  as?: ElementType;");
     if (extras.length === 0)
         return `${base}<"${tag}">`;
     return `${base}<"${tag}"> & {\n${extras.join("\n")}\n}`;
 }
+/**
+ * THE ELEMENT IS THE CALLER'S DECISION (1kro2o, 29/07).
+ *
+ * The generated table rendered every part as a <div>, so a pricing
+ * comparison could not express <th scope="col"> - and the agent hand-extended
+ * Heading/Text with an `as` prop knowing regeneration would erase it. The
+ * recipe is TYPE STYLING; the outline, the scopes, the list semantics belong
+ * to the markup's author. The cast to the default tag is deliberate: a union
+ * of intrinsic tags is more than the JSX spread can narrow, and every tag
+ * offered takes the same attributes in practice - the pattern is the exact
+ * one the field agent wrote by hand.
+ */
+const asTagLine = (tag) => `  const Tag = (as ?? "${tag}") as "${tag}";`;
+/** The render pieces for an element that offers `as`. `type="button"` must
+ *  follow the RENDERED tag - a Button rendered as an <a> with type="button"
+ *  is invalid HTML wearing a straight face. Void elements never offer `as`:
+ *  their children/attribute contracts do not survive a tag change. */
+function asElement(tag, attrs, voidEl) {
+    if (voidEl)
+        return { jsxTag: tag, jsxAttrs: attrs, setup: "", offersAs: false };
+    const hasTypeButton = attrs.includes(' type="button"');
+    const staticAttrs = attrs.replace(' type="button"', "");
+    const typeLine = hasTypeButton
+        ? `\n      {...(Tag === "button" ? { type: "button" as const } : {})}`
+        : "";
+    return {
+        jsxTag: "Tag",
+        jsxAttrs: `${staticAttrs}${typeLine}`,
+        setup: `${asTagLine(tag)}\n`,
+        offersAs: true,
+    };
+}
 function dataAttrLines(axes) {
     return axes
         .map((a) => a.boolean
@@ -471,43 +505,51 @@ ${inner}
 }
 function emitCssMode(slug, name, recipe, version, props) {
     const { tag, attrs, voidEl } = elementFor(name, recipe);
+    const el = asElement(tag, attrs, voidEl);
     const axes = axesOf(recipe.variants);
     const comp = pascal(name);
     const propNames = axes.map((a) => a.prop);
-    const destructure = [...propNames, "className", "...props"].join(", ");
-    const rootJsx = `    <${tag}${attrs}\n      className={${joinCls([`"ds-${name}"`, "className"])}}\n${dataAttrLines(axes)}${axes.length ? "\n" : ""}      {...props}\n    />`;
+    const destructure = [
+        ...propNames,
+        ...(el.offersAs ? ["as"] : []),
+        "className",
+        "...props",
+    ].join(", ");
+    const rootJsx = `    <${el.jsxTag}${el.jsxAttrs}\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 ?? {});
         const partComp = `${comp}${pascal(partName)}`;
+        const control = partIsInteractive(part);
+        const partTag = control ? "button" : "div";
+        const partEl = asElement(partTag, control ? ' type="button"' : "", false);
         const partDestructure = [
             ...partAxes.map((a) => a.prop),
+            "as",
             "className",
             "...props",
         ].join(", ");
-        const control = partIsInteractive(part);
-        const partTag = control ? "button" : "div";
-        const partAttrs = control ? '\n      type="button"' : "";
         return `
 /** Part "${partName}" of ${comp} - compose it inside <${comp}>. */
-export function ${partComp}({ ${partDestructure} }: ${propsType(partAxes, partTag, props)}) {
-  return (
-    <${partTag}${partAttrs}
+export function ${partComp}({ ${partDestructure} }: ${propsType(partAxes, partTag, props, true)}) {
+${partEl.setup}  return (
+    <${partEl.jsxTag}${partEl.jsxAttrs}
       className={${joinCls([`"ds-${name}-${kebab(partName)}"`, "className"])}}
 ${dataAttrLines(partAxes)}${partAxes.length ? "\n" : ""}      {...props}
     />
   );
 }`;
     });
+    const needsElementType = el.offersAs || Object.keys(recipe.parts ?? {}).length > 0;
     return `${header(slug, name, version, "css")}
 import "./${name}.css";
 
-import type { ${props} } from "react";
+import type { ${needsElementType ? `ElementType, ${props}` : props} } from "react";
 
-type ${comp}Props = ${propsType(axes, tag, props)};
+type ${comp}Props = ${propsType(axes, tag, props, el.offersAs)};
 
 ${compositionHint(comp, name, recipe, voidEl)}
 export function ${comp}({ ${destructure} }: ${comp}Props) {
-  return (
+${el.setup}  return (
 ${rootJsx}
   );
 }
@@ -515,6 +557,7 @@ ${parts.join("\n")}`;
 }
 function emitTailwindMode(slug, name, recipe, version, props) {
     const { tag, attrs, voidEl } = elementFor(name, recipe);
+    const el = asElement(tag, attrs, voidEl);
     const axes = axesOf(recipe.variants);
     const comp = pascal(name);
     const variantConsts = axes
@@ -543,39 +586,71 @@ function emitTailwindMode(slug, name, recipe, version, props) {
     ];
     const destructure = [
         ...axes.map((a) => a.prop),
+        ...(el.offersAs ? ["as"] : []),
         "className",
         "...props",
     ].join(", ");
+    const needsElementType = el.offersAs || Object.keys(recipe.parts ?? {}).length > 0;
     return `${header(slug, name, version, "tailwind")}
 
-import type { ${props} } from "react";
+import type { ${needsElementType ? `ElementType, ${props}` : props} } from "react";
 import { cn } from "../cn";
 
 const BASE = ${JSON.stringify(tailwindClassList(recipe, excluded))};
 ${[...variantConsts, ...booleanConsts].join("\n")}
 
-type ${comp}Props = ${propsType(axes, tag, props)};
+type ${comp}Props = ${propsType(axes, tag, props, el.offersAs)};
 
 ${compositionHint(comp, name, recipe, voidEl)}
 export function ${comp}({ ${destructure} }: ${comp}Props) {
-  return (
-    <${tag}${attrs}
+${el.setup}  return (
+    <${el.jsxTag}${el.jsxAttrs}
       className={${resolveCls(clsParts)}}
-      {...props}
+${dataAttrLines(axes)}${axes.length ? "\n" : ""}      {...props}
     />
   );
 }
 ${Object.entries(recipe.parts ?? {})
         .map(([partName, part]) => {
         const partComp = `${comp}${pascal(partName)}`;
+        const partAxes = axesOf(part.variants ?? {});
         const control = partIsInteractive(part);
         const partTag = control ? "button" : "div";
-        const partAttrs = control ? ' type="button"' : "";
+        const partEl = asElement(partTag, control ? ' type="button"' : "", false);
+        /**
+         * THE STATE THE CATALOGUE DOCUMENTS, DELIVERED (1kro2o, 29/07).
+         *
+         * A part's variants used to be dropped entirely in this flavour: the
+         * GUIDE documented data-active="true", tokens.css styled it, and the
+         * generated TabsTrigger rendered an active trigger identical to an
+         * inactive one - the promise died in the last mile of codegen.
+         *
+         * They emit as data-[attr=option]: utilities, not as const-switching
+         * like the root: the compiled selector is class+attribute, which
+         * outranks the plain base honestly (the same ladder css mode gets from
+         * [data-*] selectors) - AND the styling answers the data attribute
+         * itself, so it works whether the caller passes the typed prop or
+         * toggles data-active from its own state, which is how the GUIDE
+         * documents the contract.
+         */
+        const partVariantClasses = partAxes.flatMap((a) => a.options.flatMap((o) => blockToTailwind(part.variants?.[a.key]?.[o] ?? {}, `data-[${a.attr}=${o}]:`)));
+        const partCls = [tailwindClassList(part), ...partVariantClasses]
+            .filter(Boolean)
+            .join(" ");
+        const partDestructure = [
+            ...partAxes.map((a) => a.prop),
+            "as",
+            "className",
+            "...props",
+        ].join(", ");
         return `
 /** Part "${partName}" of ${comp} - compose it inside <${comp}>. */
-export function ${partComp}({ className, ...props }: ${props}<"${partTag}">) {
-  return (
-    <${partTag}${partAttrs} className={${resolveCls([JSON.stringify(tailwindClassList(part)), "className"])}} {...props} />
+export function ${partComp}({ ${partDestructure} }: ${propsType(partAxes, partTag, props, true)}) {
+${partEl.setup}  return (
+    <${partEl.jsxTag}${partEl.jsxAttrs}
+      className={${resolveCls([JSON.stringify(partCls), "className"])}}
+${dataAttrLines(partAxes)}${partAxes.length ? "\n" : ""}      {...props}
+    />
   );
 }`;
     })

package/package.json

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