@calibrate-ds/core 0.1.0

package/dist/prompt/generate-component-prompt.js

@@ -0,0 +1,1644 @@
+import { isIconComponent } from "../icons/enrich-icon-svgs.js";
+import { normalizeIconDisplayName } from "../mappings/naming-strategy.js";
+function buildCssSkeleton(context) {
+    const lines = [];
+    // Only emit var() when cssVar is a valid custom property (starts with --)
+    // Adds px to bare DIMENSION numbers so fallbacks are valid CSS.
+    const cssBinding = (b) => {
+        if (!b)
+            return null;
+        let val = b.cssValue || "";
+        // Strip unresolvable Figma variable IDs — they are not valid CSS fallback values
+        if (val.includes("VariableID:"))
+            val = "";
+        if (b.valueType === "DIMENSION" && /^\d+(\.\d+)?$/.test(val))
+            val = `${val}px`;
+        if (b.cssVar?.startsWith("--"))
+            return val ? `var(${b.cssVar}, ${val})` : `var(${b.cssVar})`;
+        return val || null;
+    };
+    // Root container
+    const containerLines = [];
+    if (context.layout) {
+        const l = context.layout;
+        containerLines.push("  display: flex;");
+        containerLines.push(`  flex-direction: ${l.direction === "row" ? "row" : "column"};`);
+        if (l.crossAlignment) {
+            const a = { start: "flex-start", center: "center", end: "flex-end", baseline: "baseline" };
+            containerLines.push(`  align-items: ${a[l.crossAlignment] ?? l.crossAlignment};`);
+        }
+        if (l.mainAlignment && l.mainAlignment !== "space-between") {
+            const j = { start: "flex-start", center: "center", end: "flex-end" };
+            containerLines.push(`  justify-content: ${j[l.mainAlignment] ?? l.mainAlignment};`);
+        }
+        if (l.gap) {
+            if (l.gap.mode === "auto") {
+                containerLines.push("  justify-content: space-between;");
+            }
+            else if (l.gap.rawValue) {
+                containerLines.push(`  gap: ${l.gap.rawValue}px;`);
+            }
+        }
+        if (l.padding) {
+            const p = l.padding;
+            const t = p.top.rawValue, r = p.right.rawValue, b = p.bottom.rawValue, lv = p.left.rawValue;
+            if (t === b && r === lv) {
+                containerLines.push(`  padding: ${t}px ${r}px;`);
+            }
+            else {
+                containerLines.push(`  padding: ${t}px ${r}px ${b}px ${lv}px;`);
+            }
+        }
+    }
+    if (context.size) {
+        const s = context.size;
+        const wMode = s.width.mode;
+        if (wMode === "hug") {
+            containerLines.push("  width: fit-content;");
+        }
+        else if (wMode === "fill") {
+            containerLines.push("  width: 100%;");
+        }
+        else if (s.width.rawValue) {
+            containerLines.push(`  /* ptb: fixed Figma value — consider max-width or width: 100% for responsive */`);
+            containerLines.push(`  width: ${s.width.rawValue}px;`);
+        }
+        const hMode = s.height.mode;
+        if (hMode === "hug") {
+            containerLines.push("  height: fit-content;");
+        }
+        else if (hMode === "fill") {
+            containerLines.push("  height: 100%;");
+        }
+        else if (s.height.rawValue) {
+            containerLines.push(`  /* ptb: fixed Figma value — consider min-height: ${s.height.rawValue}px or remove for responsive */`);
+            containerLines.push(`  height: ${s.height.rawValue}px;`);
+        }
+    }
+    // Token-driven properties from resolvedBindings
+    const rb = context.resolvedBindings;
+    if (rb) {
+        const bg = cssBinding(rb.background);
+        const bd = cssBinding(rb.border);
+        const tx = cssBinding(rb.text);
+        const rx = cssBinding(rb.radius);
+        if (bg)
+            containerLines.push(`  background: ${bg};`);
+        if (bd)
+            containerLines.push(`  border: 1px solid ${bd};`);
+        if (tx)
+            containerLines.push(`  color: ${tx};`);
+        if (rx)
+            containerLines.push(`  border-radius: ${rx.replace(/, (\d+(\.\d+)?)\)$/, ', $1px)')};`);
+    }
+    else {
+        for (const b of context.tokenBindings) {
+            const cv = b.resolvedToken?.cssVariable;
+            const isValidVar = cv?.startsWith("--");
+            if (b.slot === "background") {
+                containerLines.push(isValidVar ? `  background: var(${cv});` : `  background: ${b.rawValue};`);
+            }
+            else if (b.slot === "border") {
+                containerLines.push(isValidVar ? `  border-color: var(${cv});` : `  border-color: ${b.rawValue};`);
+            }
+            else if (b.slot === "text") {
+                containerLines.push(isValidVar ? `  color: var(${cv});` : `  color: ${b.rawValue};`);
+            }
+            else if (b.slot === "radius") {
+                containerLines.push(`  border-radius: ${b.rawValue}px;`);
+            }
+        }
+    }
+    const containerBody = containerLines.filter(Boolean);
+    if (containerBody.length > 0) {
+        lines.push(".container {");
+        lines.push(...containerBody);
+        lines.push("}");
+    }
+    // Walk full render tree: typography classes for text nodes, layout stubs for containers
+    const seen = new Set(["container"]); // never re-emit .container
+    const toCls = (name) => name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, "");
+    const walkTree = (node) => {
+        if (!node)
+            return;
+        const cls = toCls(node.name || "");
+        if (cls && !seen.has(cls) && !node.componentId && !node.name?.includes("=")) {
+            seen.add(cls);
+            const isText = node.role === "text" || node.type === "TEXT";
+            const classLines = [];
+            if (isText && node.typographyContract) {
+                const tc = node.typographyContract;
+                if (tc.styleRef?.displayName)
+                    classLines.push(`  /* ${tc.styleRef.displayName} */`);
+                const res = tc.resolved ?? {};
+                const ff = cssBinding(res.fontFamily);
+                if (ff)
+                    classLines.push(`  font-family: ${ff};`);
+                const fs = cssBinding(res.fontSize);
+                if (fs)
+                    classLines.push(`  font-size: ${fs};`);
+                const fw = cssBinding(res.fontWeight);
+                if (fw)
+                    classLines.push(`  font-weight: ${fw};`);
+                const lh = cssBinding(res.lineHeight);
+                if (lh)
+                    classLines.push(`  line-height: ${lh};`);
+                const ls = cssBinding(res.letterSpacing);
+                if (ls)
+                    classLines.push(`  letter-spacing: ${ls};`);
+            }
+            else if (!isText && node.layout) {
+                const l = node.layout;
+                classLines.push(`  display: flex;`);
+                classLines.push(`  flex-direction: ${l.direction === "row" ? "row" : "column"};`);
+                const a = { start: "flex-start", center: "center", end: "flex-end", baseline: "baseline" };
+                if (l.crossAlignment)
+                    classLines.push(`  align-items: ${a[l.crossAlignment] ?? l.crossAlignment};`);
+                if (l.gap?.rawValue && l.gap.mode !== "auto")
+                    classLines.push(`  gap: ${l.gap.rawValue}px;`);
+                if (l.padding) {
+                    const p = l.padding;
+                    classLines.push(`  padding: ${p.top.rawValue}px ${p.right.rawValue}px ${p.bottom.rawValue}px ${p.left.rawValue}px;`);
+                }
+            }
+            if (classLines.length > 0) {
+                lines.push("");
+                lines.push(`.${cls} {`);
+                lines.push(...classLines);
+                lines.push("}");
+            }
+            // Empty stubs suppressed — they add noise without value
+        }
+        for (const child of (node.children ?? []))
+            walkTree(child);
+    };
+    walkTree(context.renderTree);
+    const safeArray = (v) => Array.isArray(v) ? v : [];
+    const safeObject = (v) => (v && typeof v === "object" && !Array.isArray(v)) ? v : {};
+    // Convert variant diff changes for a single node into CSS declaration lines.
+    const diffChangesToCss = (changes) => {
+        const css = [];
+        const seenProps = new Set();
+        for (const ch of changes) {
+            const prop = ch.property ?? "";
+            if (prop === "style:fill" && !seenProps.has("background")) {
+                css.push(ch.toCssVar ? `  background: var(${ch.toCssVar});` : `  background: none; /* ptb: fill removed in this variant */`);
+                seenProps.add("background");
+            }
+            else if (prop === "style:textFill" && ch.toCssVar && !seenProps.has("color")) {
+                css.push(`  color: var(${ch.toCssVar});`);
+                seenProps.add("color");
+            }
+            else if (prop === "style:stroke" && ch.toCssVar && !seenProps.has("border-color")) {
+                css.push(`  border-color: var(${ch.toCssVar});`);
+                seenProps.add("border-color");
+            }
+            else if (prop === "layout" && ch.to && !seenProps.has("layout")) {
+                const l = ch.to;
+                if (l.padding) {
+                    const p = l.padding;
+                    const t = p.top ?? 0, r = p.right ?? 0, b = p.bottom ?? 0, lv = p.left ?? 0;
+                    css.push(`  padding: ${t}px ${r}px ${b}px ${lv}px;`);
+                }
+                if (l.gap !== undefined)
+                    css.push(`  gap: ${l.gap}px;`);
+                seenProps.add("layout");
+            }
+            else if ((prop === "width" || prop === "height") && typeof ch.to === "number" && !seenProps.has(prop)) {
+                css.push(`  /* ptb: fixed Figma value */ ${prop}: ${ch.to}px;`);
+                seenProps.add(prop);
+            }
+            else if (prop.startsWith("typography:") && !seenProps.has(prop)) {
+                const field = prop.slice("typography:".length);
+                if (field === "fontSize" && ch.to !== undefined) {
+                    css.push(`  font-size: ${ch.to}px;`);
+                }
+                else if (field === "fontWeight" && ch.to !== undefined) {
+                    css.push(`  font-weight: ${ch.to};`);
+                }
+                else if (field === "lineHeightPx" && ch.to !== undefined) {
+                    css.push(`  line-height: ${ch.to}px;`);
+                }
+                else if (field === "fontFamily" && ch.to !== undefined) {
+                    css.push(`  font-family: ${ch.to};`);
+                }
+                else if (field === "letterSpacing" && ch.to !== undefined) {
+                    css.push(`  letter-spacing: ${ch.to}px;`);
+                }
+                else if (field === "textStyleId" && ch.to !== undefined) {
+                    css.push(`  /* ptb: text style → ${ch.to} */`);
+                }
+                seenProps.add(prop);
+            }
+        }
+        return css;
+    };
+    // Find a variantDiff that matches the given axis=value with all other axes at default.
+    const findAxisDiff = (axisName, value) => {
+        const defaultSel = safeObject(context.defaultVariantSelection);
+        return safeArray(context.variantDiffs).find((d) => {
+            const vs = safeObject(d.variantSelection);
+            if (vs[axisName] !== value)
+                return false;
+            // Other axes must be at their default
+            for (const [k, v] of Object.entries(defaultSel)) {
+                if (k !== axisName && vs[k] !== undefined && vs[k] !== v)
+                    return false;
+            }
+            return true;
+        });
+    };
+    // Variant axis selectors — one [data-axis="value"] block per variant value.
+    // Track emitted attrs so the state contract loop doesn't re-emit duplicate base selectors.
+    const emittedAxisAttrs = new Set();
+    const defaultSel = safeObject(context.defaultVariantSelection);
+    for (const axis of (context.variantAxes ?? [])) {
+        const axisAttr = axis.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+        emittedAxisAttrs.add(axisAttr);
+        // Use defaultVariantSelection as ground truth — axis.defaultValue can diverge from Figma's actual default
+        const effectiveDefault = defaultSel[axis.name] ?? axis.defaultValue;
+        for (const value of axis.options) {
+            lines.push("");
+            lines.push(`.container[data-${axisAttr}="${value}"] {`);
+            if (value === effectiveDefault) {
+                lines.push("  /* default — styles already in .container */");
+            }
+            else {
+                const axisDiff = findAxisDiff(axis.name, value);
+                const rootNode = axisDiff
+                    ? safeArray(axisDiff.changedNodes).find((cn) => cn.nodePath === "root" || cn.nodePath === "")
+                    : null;
+                const cssLines = rootNode ? diffChangesToCss(safeArray(rootNode.changes)) : [];
+                if (cssLines.length > 0) {
+                    lines.push(...cssLines);
+                }
+                else {
+                    lines.push("  /* ptb:unfilled — derive from variantDiffs[this variant].changedNodes */");
+                }
+            }
+            lines.push("}");
+            // Descendant overrides for children that change in this variant
+            if (value !== effectiveDefault) {
+                const axisDiff = findAxisDiff(axis.name, value);
+                if (axisDiff) {
+                    const childNodes = safeArray(axisDiff.changedNodes).filter((cn) => cn.nodePath && cn.nodePath !== "root" && cn.nodePath !== ""
+                        && !safeArray(cn.changes).some((c) => c.property === "visible"));
+                    for (const cn of childNodes) {
+                        const cssLines = diffChangesToCss(safeArray(cn.changes));
+                        if (cssLines.length === 0)
+                            continue;
+                        const cls = cn.nodeName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, "");
+                        if (!cls)
+                            continue;
+                        lines.push("");
+                        lines.push(`.container[data-${axisAttr}="${value}"] .${cls} {`);
+                        lines.push(...cssLines);
+                        lines.push("}");
+                    }
+                }
+            }
+        }
+    }
+    // State selectors — visibility hints from stateDefaults and variantDiffs.
+    // Skip base selector if the axis was already emitted above (prevents duplicate blocks).
+    if (context.stateContract) {
+        const sc = context.stateContract;
+        const attrName = sc.controller.name.toLowerCase();
+        const axisAlreadyEmitted = emittedAxisAttrs.has(attrName);
+        const safeArr = (v) => Array.isArray(v) ? v : [];
+        for (const state of sc.stateAxis.options.slice(1)) {
+            const stateDef = sc.stateDefaults?.[state];
+            const hiddenFromState = stateDef?.slotVisibility
+                ? Object.entries(stateDef.slotVisibility)
+                    .filter(([, v]) => !v).map(([k]) => k)
+                : [];
+            const matchingDiff = safeArr(context.variantDiffs).find((d) => {
+                return d.variantSelection && Object.values(d.variantSelection).includes(state);
+            });
+            const hiddenFromDiff = safeArr(matchingDiff?.removedNodes).map((n) => n.name);
+            // Also catch nodes where visible changes to false in changedNodes
+            const hiddenFromVisibilityChange = safeArr(matchingDiff?.changedNodes)
+                .filter((n) => safeArr(n.changes).some((c) => c.property === "visible" && c.to === false))
+                .map((n) => n.nodePath ? `${n.nodeName} (path: ${n.nodePath})` : n.nodeName);
+            const allHidden = [...new Set([...hiddenFromState, ...hiddenFromDiff, ...hiddenFromVisibilityChange])];
+            // Prefer slot names (from stateContract) as hints when available — they are unambiguous
+            // identifiers that map directly to the Slot Render Guide. Raw node names (from changedNodes)
+            // are often generic (e.g. "btn") and cause the AI to wrap all instances of that component.
+            const hintNames = hiddenFromState.length > 0
+                ? [...new Set([...hiddenFromState, ...hiddenFromDiff])]
+                : allHidden;
+            // Always emit the block — axisAlreadyEmitted only means the variant axes loop
+            // already emitted the selector, but that block has no visibility hints. We emit
+            // a second block here with ONLY the hint comments; CSS merges them harmlessly.
+            if (hintNames.length > 0 || !axisAlreadyEmitted) {
+                lines.push("");
+                if (hintNames.length > 0) {
+                    lines.push(`/* ${state}: hides ${hintNames.join(", ")} */`);
+                }
+                lines.push(`.container[data-${attrName}="${state}"] {`);
+                if (!axisAlreadyEmitted) {
+                    lines.push("  /* ptb:unfilled — derive from variantDiffs[this state].changedNodes */");
+                }
+                // Elements hidden in this state must be removed from the DOM with a JS conditional
+                // in the TSX file — do NOT use display:none here (see anti-pattern #19).
+                if (hintNames.length > 0) {
+                    lines.push(`  /* TSX: wrap ONLY the named slot instance in a conditional — other instances of the same component stay always-rendered */`);
+                    for (const name of hintNames) {
+                        lines.push(`  /* hide slot: ${name} */`);
+                    }
+                }
+                lines.push("}");
+            }
+            // Descendant selector stubs for children that change layout/size in this state.
+            // data-state only exists on .container — child overrides MUST use descendant selectors.
+            const layoutChangedNodes = safeArr(matchingDiff?.changedNodes).filter((n) => safeArr(n.changes).some((c) => ["layout", "width", "height"].includes(c.property))
+                && !safeArr(n.changes).some((c) => c.property === "visible" && c.to === false)
+                && n.nodePath !== "root" // skip the root node itself
+            );
+            for (const cn of layoutChangedNodes) {
+                const cls = cn.nodeName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, "");
+                if (!cls)
+                    continue;
+                lines.push("");
+                lines.push(`/* ${state}: ${cn.nodeName} layout/size override */`);
+                lines.push(`/* NOTE: data-state lives on .container — use descendant selector, not .${cls}[data-state] */`);
+                lines.push(`.container[data-${attrName}="${state}"] .${cls} {`);
+                lines.push("  /* ptb:unfilled — derive from variantDiffs[this state].changedNodes */");
+                lines.push("}");
+            }
+        }
+    }
+    return lines.join("\n");
+}
+/**
+ * Traverses a render tree by a "root/0/1/2" path and returns the node, or null if not found.
+ */
+function findNodeAtPath(root, path) {
+    if (!path || path === "root")
+        return root;
+    const parts = path.split("/").filter((p) => p && p !== "root");
+    let current = root;
+    for (const idx of parts) {
+        const i = parseInt(idx, 10);
+        if (!current?.children || i >= current.children.length)
+            return null;
+        current = current.children[i];
+    }
+    return current;
+}
+/**
+ * Returns a short human-readable label for what distinguishes this node from siblings.
+ * Prefers text content of text children; falls back to first child component name.
+ */
+function describeNodeContent(node) {
+    if (!node)
+        return "";
+    const walk = (n) => {
+        if ((n.role === "text" || n.type === "leaf" || n.type === "TEXT") && n.textContent) {
+            return `contains text "${String(n.textContent).slice(0, 40)}"`;
+        }
+        for (const child of (n.children ?? [])) {
+            const found = walk(child);
+            if (found)
+                return found;
+        }
+        return "";
+    };
+    const desc = walk(node);
+    if (desc)
+        return desc;
+    // Fall back: first child's name that differs from the node itself
+    const firstChild = node.children?.[0];
+    if (firstChild?.name && firstChild.name !== node.name)
+        return `contains ${firstChild.name}`;
+    return "";
+}
+function toPropName(name) {
+    return name
+        .replace(/[-_\s]+([a-zA-Z])/g, (_, l) => l.toUpperCase())
+        .replace(/^([A-Z])/, (l) => l.toLowerCase())
+        .replace(/[^a-zA-Z0-9_]/g, "");
+}
+function buildPropsInterfaceSkeleton(context, codeName) {
+    const lines = [];
+    lines.push(`// Props skeleton — implement this in ${codeName}.types.ts`);
+    lines.push(`import type * as React from "react";`);
+    lines.push(`export type ${codeName}Props = {`);
+    if ((context.variantAxes ?? []).length > 0) {
+        lines.push(`  // Variant axes — use as props, NEVER as useState`);
+        for (const axis of context.variantAxes) {
+            const propName = toPropName(axis.name);
+            const union = axis.options.map(o => `'${o}'`).join(" | ");
+            const defNote = axis.defaultValue ? `  // default: '${axis.defaultValue}'` : "";
+            lines.push(`  ${propName}?: ${union};${defNote}`);
+        }
+    }
+    const ownSlots = context.slotContract ? Object.entries(context.slotContract) : [];
+    const nodeSlots = ownSlots.filter(([, d]) => d.prop && (d.kind === "icon" || d.kind === "child" || d.kind === "asset" || d.dependency));
+    const textSlots = ownSlots.filter(([, d]) => d.prop && d.kind === "text");
+    if (nodeSlots.length > 0) {
+        lines.push(`  // Slot props (icon / component swaps)`);
+        const seen = new Set();
+        for (const [, def] of nodeSlots) {
+            if (def.prop && !seen.has(def.prop)) {
+                seen.add(def.prop);
+                lines.push(`  ${def.prop}?: React.ReactNode;`);
+            }
+        }
+    }
+    if (textSlots.length > 0) {
+        lines.push(`  // Text content props`);
+        const seen = new Set();
+        for (const [, def] of textSlots) {
+            if (def.prop && !seen.has(def.prop)) {
+                seen.add(def.prop);
+                lines.push(`  ${def.prop}?: string;`);
+            }
+        }
+    }
+    const coveredProps = new Set([
+        ...(context.variantAxes ?? []).map(v => toPropName(v.name)),
+        ...ownSlots.map(([, d]) => d.prop).filter(Boolean),
+    ]);
+    const extraProps = (context.properties ?? []).filter(p => !coveredProps.has(toPropName(p.name)));
+    if (extraProps.length > 0) {
+        lines.push(`  // Additional props`);
+        for (const p of extraProps) {
+            const propName = toPropName(p.name);
+            const tsType = p.type === "boolean" ? "boolean" : p.type === "instance" ? "React.ReactNode" : "string";
+            lines.push(`  ${propName}?: ${tsType};`);
+        }
+    }
+    lines.push(`  className?: string;`);
+    lines.push(`};`);
+    return lines.join("\n");
+}
+function buildJsxScaffold(context, codeName, requiredImports) {
+    const rootEl = context.implementationHints?.semanticElement ?? "div";
+    const ownSlots = context.slotContract ? Object.entries(context.slotContract) : [];
+    // Track seen prop names to deduplicate (stateContract controller may overlap variant axes)
+    const seenProps = new Set();
+    const addProp = (entry) => {
+        const name = entry.split(" ")[0].split("=")[0];
+        if (seenProps.has(name))
+            return;
+        seenProps.add(name);
+        propParts.push(entry);
+    };
+    // Props destructure with defaults
+    const propParts = [];
+    for (const axis of (context.variantAxes ?? [])) {
+        const p = toPropName(axis.name);
+        const def = axis.defaultValue ? ` = '${axis.defaultValue}'` : "";
+        addProp(`${p}${def}`);
+    }
+    if (context.stateContract) {
+        const sc = context.stateContract;
+        const p = toPropName(sc.controller.name);
+        const def = sc.controller.defaultValue !== undefined ? ` = ${JSON.stringify(sc.controller.defaultValue)}` : "";
+        addProp(`${p}${def}`);
+    }
+    for (const [, def] of ownSlots) {
+        if (def.kind === "text" && def.prop && !seenProps.has(def.prop)) {
+            addProp(def.prop);
+        }
+    }
+    propParts.push("className");
+    // data-* attribute lines — deduplicated by attribute name
+    const seenAttrs = new Set();
+    const dataLines = [];
+    for (const axis of (context.variantAxes ?? [])) {
+        const attr = axis.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+        if (seenAttrs.has(attr))
+            continue;
+        seenAttrs.add(attr);
+        dataLines.push(`      data-${attr}={${toPropName(axis.name)}}`);
+    }
+    if (context.stateContract) {
+        const sc = context.stateContract;
+        const attr = sc.controller.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+        if (!seenAttrs.has(attr)) {
+            seenAttrs.add(attr);
+            dataLines.push(`      data-${attr}={${toPropName(sc.controller.name)}}`);
+        }
+    }
+    const lines = [];
+    // Imports
+    lines.push(`import * as React from "react";`);
+    lines.push(`import styles from "./${codeName}.module.css";`);
+    lines.push(`import type { ${codeName}Props } from "./${codeName}.types";`);
+    for (const { compName, importPath } of requiredImports) {
+        lines.push(`import { ${compName} } from '${importPath}';`);
+    }
+    lines.push("");
+    // Function signature
+    const propsArg = propParts.length <= 3
+        ? `{ ${propParts.join(", ")} }`
+        : `{\n  ${propParts.join(",\n  ")},\n}`;
+    lines.push(`export function ${codeName}(${propsArg}: ${codeName}Props) {`);
+    lines.push(`  return (`);
+    // Root element
+    lines.push(`    <${rootEl}`);
+    lines.push(`      className={[styles.container, className].filter(Boolean).join(" ")}`);
+    for (const attr of dataLines)
+        lines.push(attr);
+    lines.push(`    >`);
+    // Slot bodies — prefer renderPattern from slotContract (most accurate)
+    if (ownSlots.length > 0) {
+        for (const [slotName, def] of ownSlots) {
+            const pattern = def.renderPattern;
+            if (!pattern)
+                continue;
+            lines.push(`      {/* ${slotName} */}`);
+            lines.push(`      ${pattern}`);
+        }
+    }
+    else {
+        // Fall back: top-level render tree children (capped at 6)
+        const toCls = (n) => n.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, "");
+        const topChildren = context.renderTree?.children ?? [];
+        for (const child of topChildren.slice(0, 6)) {
+            const isText = child.role === "text" || child.type === "TEXT";
+            const isInstance = !!child.componentId;
+            const cls = toCls(child.name ?? "node");
+            if (isText) {
+                const prop = child.contentContract?.propName;
+                // Only reference prop as a variable if it was actually declared in propParts
+                const propIsKnown = prop && seenProps.has(prop);
+                const content = propIsKnown ? `{${prop}}` : (child.textContent ? `"${child.textContent}"` : `{/* ${child.name} */}`);
+                lines.push(`      <span className={styles['${cls}']}>${content}</span>`);
+            }
+            else if (isInstance) {
+                const name = child.name.split(/[\s\-_]+/).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+                lines.push(`      <${name} />`);
+            }
+            else {
+                lines.push(`      <div className={styles['${cls}']}>`);
+                lines.push(`        {/* fill from Slot Render Guide */}`);
+                lines.push(`      </div>`);
+            }
+        }
+        if (topChildren.length > 6)
+            lines.push(`      {/* … ${topChildren.length - 6} more children — see Render Structure above */}`);
+        if (topChildren.length === 0)
+            lines.push(`      {/* see Slot Render Guide above */}`);
+    }
+    lines.push(`    </${rootEl}>`);
+    lines.push(`  );`);
+    lines.push(`}`);
+    return lines.join("\n");
+}
+/**
+ * Generates a high-quality, structured AI implementation prompt from a ComponentContext.
+ */
+export function generateComponentPrompt(context, framework = null) {
+    const safeObject = (val) => val && typeof val === 'object' && !Array.isArray(val) ? val : {};
+    const safeArray = (val) => Array.isArray(val) ? val : [];
+    // Only filter out UNRESOLVED Figma references (kind:"unknown" or bare componentId objects).
+    // Resolved dependencies (kind:"dependency" with componentName) are rendered as JSX props.
+    const isFigmaMeta = (v) => v !== null && typeof v === "object" && !Array.isArray(v) &&
+        (v.kind === "unknown" || (!v.componentName && "componentId" in v));
+    // Filter unresolvable deps — raw Figma node IDs, missing components, and external
+    // components (device frames, Figma internals) the resolver couldn't map to our output.
+    const isUnresolvable = (dep) => {
+        const { name, status } = dep;
+        if (/\(\d+:\d+\)/i.test(name))
+            return true;
+        if (/^\d+:\d+$/.test(name.trim()))
+            return true;
+        if (/^unknown\b/i.test(name.trim()))
+            return true;
+        // "missing" = referenced but not in snapshot; "external" = outside design system
+        if (status === "missing" || status === "external")
+            return true;
+        return false;
+    };
+    const resolvableDeps = context.dependencies.filter(d => !isUnresolvable(d));
+    const unresolvableCount = context.dependencies.length - resolvableDeps.length;
+    const c = context.component;
+    const instructions = [
+        "Follow the layout and sizing semantics from the design context",
+        "Do not invent extra variants, tokens, or dependencies"
+    ];
+    if (context.stateContract) {
+        instructions.push("- **STATE MANAGEMENT**: Use 'stateContract' as the primary source of truth for the component's state model.");
+        instructions.push("- Map the 'stateContract.controller' to a prop or local state as specified.");
+    }
+    if (context.interactionContract) {
+        instructions.push("- **INTERACTIONS**: Bind the specified 'interactionContract.events' to the identified source nodes.");
+    }
+    if (context.prototypeInteractionContract) {
+        instructions.push("- **INTERACTIONS & PROTOTYPES**: Use 'prototypeInteractionContract' for Figma-faithful event wiring.");
+        instructions.push("- **ANIMATIONS**: Map 'animationHints' to CSS transitions or framer-motion variants.");
+    }
+    if (context.variantAxes.length > 0) {
+        instructions.push(`- Handle variant selection by mapping incoming props to the variantAxes dimensions.`);
+        instructions.push(`- Default variant selection: ${JSON.stringify(context.defaultVariantSelection)}`);
+        instructions.push(`- Use 'baseRenderTree' as the structural foundation, then apply differences from 'variantDiffs'.`);
+    }
+    if (resolvableDeps.length > 0) {
+        // Ordering instruction — implement deps first, then this component
+        const depNameList = resolvableDeps.map(d => d.name).join(", ");
+        instructions.push(`PREREQUISITE: Implement dependencies before this component. Order: ${depNameList} → ${c.name}.`);
+        // Per-dependency variant hint derived from dependencyInstances
+        const depInstances = safeArray(context.dependencyInstances);
+        for (const dep of resolvableDeps) {
+            const depPascal = dep.name.split(/[\s\-_]+/).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+            const matches = depInstances.filter((inst) => {
+                const instComp = inst.recipe?.invocationContract?.componentName;
+                return instComp === depPascal || inst.name === dep.name;
+            });
+            if (matches.length === 0)
+                continue;
+            // Deduplicate by variantSelection fingerprint so we don't repeat identical hints
+            const seen = new Set();
+            for (const inst of matches) {
+                const sel = safeObject(inst.variantSelection);
+                const overrides = Object.fromEntries(Object.entries(safeObject(inst.propertyOverrides)).filter(([, v]) => !isFigmaMeta(v)));
+                const compName = inst.recipe?.invocationContract?.componentName ?? depPascal;
+                const selParts = Object.entries(sel).map(([k, v]) => `${k}="${v}"`);
+                const overrideParts = Object.entries(overrides).map(([k, v]) => `${k}="${v}"`);
+                const allParts = [...selParts, ...overrideParts];
+                const fingerprint = allParts.join(",");
+                if (seen.has(fingerprint))
+                    continue;
+                seen.add(fingerprint);
+                const jsx = allParts.length > 0 ? `<${compName} ${allParts.join(" ")} />` : `<${compName} />`;
+                instructions.push(`When rendering ${dep.name} in this component, use exactly: \`${jsx}\``);
+            }
+        }
+        instructions.push(`- CRITICAL: Use the 'dependencyInstances' recipes to configure each nested instance.`);
+        instructions.push(`- Do NOT blindly render a generic version of the dependency; follow the instance-specific recipe.`);
+    }
+    if (framework) {
+        instructions.push(`Implement the component using ${framework}`);
+    }
+    // Prepare Structural Summary
+    const structureSummary = {
+        kind: c.kind.value,
+        hasVariants: context.variantAxes.length > 0,
+        hasProperties: context.properties.length > 0,
+        hasDependencies: resolvableDeps.length > 0,
+        dependencyCount: resolvableDeps.length,
+        hasTokenBindings: context.tokenBindings.length > 0,
+        hasLayout: context.layout !== null,
+        hasSize: context.size !== null,
+        hasStateContract: !!context.stateContract,
+        hasInteractionContract: !!context.interactionContract,
+        hasPrototypeInteractionContract: !!context.prototypeInteractionContract
+    };
+    // ── Fix 2: detect component interaction kind ──────────────────────────────
+    // Three layers of detection — any one is sufficient:
+    //   1. Name patterns: component is named like a known form control
+    //   2. Boolean axis: exactly two options that read as true/false (on/off, checked/unchecked…)
+    //      NOTE: "Default/Checked" won't match BOOL_PAIR — name-based detection covers those cases
+    //   3. Boolean Figma property: p.type === "boolean" in the component's property list
+    const FORM_CONTROL_PATTERNS = [
+        /\bcheckbox\b/i, /\bradio\b/i, /\btoggle\b/i, /\bswitch\b/i,
+        /\binput\b/i, /\bsearch(bar)?\b/i, /\bselect\b/i, /\bdropdown\b/i,
+        /\bcombobox?\b/i, /\bslider\b/i, /\bstepper\b/i, /\bpicker\b/i,
+        /\btextfield\b/i, /\btextarea\b/i,
+    ];
+    const isNamedFormControl = FORM_CONTROL_PATTERNS.some(p => p.test(c.name));
+    const BOOL_PAIR = [
+        /^(true|false)$/i,
+        /^(yes|no)$/i,
+        /^(on|off)$/i,
+        /^(checked|unchecked)$/i,
+        /^(selected|unselected|deselected)$/i,
+        /^(active|inactive)$/i,
+        /^(pressed|unpressed)$/i,
+        /^(enabled|disabled)$/i,
+    ];
+    const isBoolPair = (opts) => opts.length === 2 && opts.every(o => BOOL_PAIR.some(p => p.test(String(o))));
+    const hasBooleanAxis = safeArray(context.variantAxes).some((ax) => isBoolPair(safeArray(ax.options)));
+    const hasBooleanProp = safeArray(context.properties).some((p) => p.type === "boolean");
+    const isComposite = resolvableDeps.length > 0;
+    const isFormControl = isNamedFormControl || (hasBooleanAxis && !isComposite) || (hasBooleanProp && !isComposite);
+    // Icon components with vector SVGs are generated deterministically in implement.ts.
+    // This prompt only runs for font-symbol icons (SF Pro Symbols etc.) that need AI fallback.
+    // Form controls and interactive components override icon classification.
+    // A static icon has no variant state, no state contract, and no interaction contract.
+    // If any of these are present, the component is interactive — never an SVG renderer.
+    const hasInteractiveBehavior = isFormControl || !!context.stateContract || !!context.interactionContract;
+    const isIcon = !hasInteractiveBehavior && isIconComponent(c.name);
+    if (isIcon) {
+        instructions.unshift("**ICON COMPONENT**: This is an icon. Generate an inline SVG React component.", "- The Figma source uses a font-based icon (SF Pro Symbols) that does not export as vector.", "- Generate a proper SVG shell: `<svg viewBox='0 0 W H' fill='currentColor' aria-hidden='true' {...props}>` with a placeholder `<rect>` and a TODO comment.", "- Accept `React.SVGProps<SVGSVGElement>` as props — no variant props, no CSS module needed.", "- The types file must use: `export type ${c.name}Props = React.SVGProps<SVGSVGElement>;`");
+    }
+    else if (isFormControl) {
+        instructions.unshift("**FORM CONTROL**: This component has boolean Figma properties (checked/selected/on-off style axes).", "- Implement as an interactive HTML element — `<input>`, `<button>`, `<label>`, or a wrapper around one.", "- NEVER generate SVG paths or vector art for this component.", "- The boolean axis maps to a controlled or uncontrolled prop (e.g. `checked`, `selected`, `value`).", "- Wire the boolean axis to an `onChange` / `onClick` handler stub as appropriate.");
+    }
+    else if (!isIcon && context.variantAxes.length > 0) {
+        instructions.unshift("**INTERACTIVE COMPONENT**: This component has variant states.", "- Implement as JSX/TSX with props and conditional rendering.", "- NEVER generate this as an SVG renderer — it is NOT an icon.");
+    }
+    // 1. Generate High-Quality Human-Readable Prompt text
+    const lines = [];
+    lines.push(`You are implementing the \`${c.name}\` component.`);
+    lines.push("");
+    lines.push("## Component Metadata");
+    lines.push(`- Kind: ${c.kind.value}${c.kind.inferred ? " (inferred)" : ""}`);
+    lines.push(`- Category: ${c.category}`);
+    if (c.description)
+        lines.push(`- Description: ${c.description}`);
+    // Derive PascalCase code name for interface skeleton and import hints
+    // Split on whitespace AND hyphens/underscores so "btn-web" → "BtnWeb"
+    const codeName = c.name.split(/[\s\-_]+/).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+    // Build deduplicated required-imports list from dependencies + slot contract
+    const requiredImportsList = [];
+    const seenImports = new Set();
+    // Build a name→importPath map from resolvable deps only
+    const depImportPathMap = new Map();
+    for (const d of resolvableDeps) {
+        const compName = d.name.split(/[\s\-_]+/).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+        if (d.importPath)
+            depImportPathMap.set(compName, d.importPath);
+    }
+    const addRequiredImport = (rawName, importName) => {
+        const normalized = isIconComponent(rawName) ? normalizeIconDisplayName(rawName) : rawName;
+        const compName = importName ?? normalized.split(/\s+/).map(p => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+        if (seenImports.has(compName))
+            return;
+        seenImports.add(compName);
+        const folder = normalized.toLowerCase().replace(/[\s_]+/g, "-");
+        // Prefer the context-computed import path; fall back to the folder-based guess
+        const importPath = depImportPathMap.get(compName)
+            ?? (isIconComponent(rawName) ? `../../icons/${folder}/index.js` : `../${folder}/index.js`);
+        requiredImportsList.push({ compName, importPath });
+    };
+    for (const d of resolvableDeps)
+        addRequiredImport(d.name);
+    if (context.slotContract) {
+        for (const def of Object.values(context.slotContract)) {
+            if (!def.dependency?.componentName)
+                continue;
+            // Only include icons that are actually rendered in JSX:
+            //   fixed slot (no prop) → always renders <Icon /> directly
+            //   visible configurable slot → renders as fallback {prop ?? <Icon />}
+            // Hidden configurable slots use {prop ?? null} — no render, no import needed.
+            // Adding the import for hidden slots forces the AI to "use" it, causing hardwiring.
+            if (!def.prop || def.visible) {
+                addRequiredImport(def.dependency.componentName, def.dependency.importName || undefined);
+            }
+        }
+    }
+    if (requiredImportsList.length > 0) {
+        lines.push("");
+        lines.push("## Required Imports");
+        lines.push("You MUST include ALL of these `import` statements in your `.tsx` component file. Do NOT omit any.");
+        lines.push("");
+        lines.push("```typescript");
+        for (const { compName, importPath } of requiredImportsList) {
+            lines.push(`import { ${compName} } from '${importPath}';`);
+        }
+        lines.push("```");
+    }
+    lines.push("");
+    lines.push("## Structure Summary");
+    lines.push(`- Kind: ${structureSummary.kind}`);
+    lines.push(`- Variants: ${structureSummary.hasVariants ? "Yes" : "No"}`);
+    lines.push(`- Properties: ${structureSummary.hasProperties ? "Yes" : "No"}`);
+    lines.push(`- Dependencies: ${structureSummary.hasDependencies ? `${structureSummary.dependencyCount} components` : "None"}`);
+    lines.push(`- Token Bindings: ${structureSummary.hasTokenBindings ? "Yes" : "No"}`);
+    lines.push(`- Layout: ${structureSummary.hasLayout ? "Defined" : "Not defined"}`);
+    lines.push(`- Size: ${structureSummary.hasSize ? "Defined" : "Not defined"}`);
+    lines.push(`- Behavioral Contracts: ${structureSummary.hasStateContract ? "State" : ""}${structureSummary.hasInteractionContract ? " & Interaction" : ""}${structureSummary.hasPrototypeInteractionContract ? " & Prototype Fidelity" : ""}`);
+    const semanticEl = context.implementationHints?.semanticElement;
+    if (semanticEl) {
+        lines.push(`- **Root Element**: \`<${semanticEl}>\` — use this HTML element, not \`<div>\``);
+    }
+    if (context.stateContract) {
+        const sc = context.stateContract;
+        lines.push("");
+        lines.push("## State Contract (Implementation-Ready)");
+        lines.push(`This component uses a **${sc.controller.kind}**-driven state model.`);
+        lines.push(`- **Controller Name**: \`${sc.controller.name}\` (${sc.controller.dataType})`);
+        if (sc.controller.defaultValue !== undefined)
+            lines.push(`- **Default Value**: \`${sc.controller.defaultValue}\``);
+        lines.push(`- **State Axis**: ${sc.stateAxis.name} (${sc.stateAxis.options.join(" | ")})`);
+        lines.push("- **State Defaults** (Compiled):");
+        for (const [state, defaults] of Object.entries(safeObject(sc.stateDefaults))) {
+            const def = defaults;
+            lines.push(`  - State \`${state}\`:`);
+            if (Object.keys(safeObject(def.content)).length > 0)
+                lines.push(`    - Content: ${JSON.stringify(def.content)}`);
+            if (Object.keys(safeObject(def.slotVisibility)).length > 0)
+                lines.push(`    - Visibility: ${JSON.stringify(def.slotVisibility)}`);
+        }
+        lines.push(`- **Priority**: ${sc.overridePriority.join(" > ")}`);
+    }
+    if (context.interactionContract) {
+        const ic = context.interactionContract;
+        lines.push("");
+        lines.push("## Interaction Contract");
+        if (safeArray(ic.events).length > 0) {
+            for (const ev of safeArray(ic.events)) {
+                lines.push(`- **${ev.event}** on \`${ev.source.nodeName}\` (${ev.source.role || "leaf"}):`);
+                lines.push(`  - Action: \`${ev.action.type}\` (${ev.action.target}${ev.action.value !== undefined ? ` -> ${ev.action.value}` : ""})`);
+            }
+        }
+        else if (safeArray(ic.warnings).length > 0) {
+            for (const w of safeArray(ic.warnings))
+                lines.push(`> [!WARNING] ${w}`);
+        }
+    }
+    if (context.prototypeInteractionContract && safeArray(context.prototypeInteractionContract.interactions).length > 0) {
+        const pic = context.prototypeInteractionContract;
+        lines.push("");
+        lines.push("## Prototype Interaction Fidelity (Direct Figma Logic)");
+        lines.push("Follow these verbatim prototype interactions from design:");
+        for (const inter of safeArray(pic.interactions)) {
+            lines.push(`### ${inter.trigger.runtime} on ${inter.source.nodeName} (${inter.source.role})`);
+            lines.push(`- **Action**: ${inter.action.type} -> ${inter.action.targetState || inter.action.targetFrame || inter.action.targetOverlay || "callback"}`);
+            if (inter.animation) {
+                lines.push(`- **Animation**: ${inter.animation.type} (${inter.animation.curve}, ${inter.animation.durationMs}ms)`);
+            }
+            if (inter.animationHints) {
+                let hint = `- **Implementation Hint**: ${inter.animationHints.preferredImplementation}`;
+                if (safeArray(inter.animationHints.changedProperties).length > 0) {
+                    hint += ` (Watch for: ${inter.animationHints.changedProperties.join(", ")})`;
+                }
+                lines.push(hint);
+            }
+        }
+    }
+    if (context.transitionSummary) {
+        lines.push("");
+        lines.push("## Transition Summary");
+        lines.push("Behavioral summary of what changes between states:");
+        for (const [trans, summary] of Object.entries(safeObject(context.transitionSummary))) {
+            const s = summary;
+            lines.push(`### ${trans}`);
+            if (safeArray(s.contentChanges).length > 0)
+                lines.push(`- **Content Changes**: ${s.contentChanges.join(", ")}`);
+            if (safeArray(s.slotVisibilityChanges).length > 0)
+                lines.push(`- **Visibility Changes**: ${s.slotVisibilityChanges.join(", ")}`);
+            if (safeArray(s.styleChanges).length > 0)
+                lines.push(`- **Style Changes**: ${s.styleChanges.join(", ")}`);
+            if (safeArray(s.dependencyChanges).length > 0)
+                lines.push(`- **Dependency Changes**: ${s.dependencyChanges.join(", ")}`);
+        }
+    }
+    if (context.variantAxes.length > 0) {
+        lines.push("");
+        lines.push("## Variant Axes");
+        for (const v of context.variantAxes) {
+            lines.push(`- ${v.name}: ${v.options.join(" | ")}`);
+            if (v.defaultValue)
+                lines.push(`  - Default: ${v.defaultValue}`);
+        }
+    }
+    if (context.properties.length > 0) {
+        lines.push("");
+        lines.push("## Properties");
+        for (const p of context.properties) {
+            lines.push(`- ${p.name} (${p.type})`);
+        }
+    }
+    if (resolvableDeps.length > 0 || unresolvableCount > 0) {
+        lines.push("");
+        lines.push("## Dependencies");
+        lines.push("");
+        if (unresolvableCount > 0) {
+            lines.push(`> **Note:** ${unresolvableCount} Figma node(s) could not be resolved to a named component and have been excluded. Wire them manually if needed.`);
+            lines.push("");
+        }
+        if (resolvableDeps.length > 0) {
+            lines.push("Each entry below is a **React component** that must be imported and rendered in JSX.");
+            lines.push("NEVER pass a dependency object as a prop value — always render it as `<ComponentName />`.");
+            lines.push("");
+        }
+        for (const d of resolvableDeps) {
+            const nameParts = d.name.split(/[\s\-_]+/);
+            const pascalName = nameParts.map(p => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+            const hasDimension = /\d+x\d+/.test(d.name);
+            const lowerName = d.name.toLowerCase();
+            const ICON_KEYWORDS = ["icon", "chevron", "arrow", "close", "menu", "more", "check", "plus",
+                "minus", "search", "add", "delete", "edit", "clear", "back", "forward",
+                "info", "warning", "alert", "error", "star", "heart", "bolt", "flag", "dot"];
+            const isIcon = hasDimension || ICON_KEYWORDS.some(k => lowerName.includes(k));
+            let renderHint;
+            let importNote;
+            if (isIcon) {
+                renderHint = `render as \`<${pascalName} />\` (no props needed)`;
+                importNote = "icon component";
+            }
+            else if (d.status === "missing") {
+                renderHint = `render as \`<${pascalName} />\` — ⚠ not yet implemented, stub the import`;
+                importNote = "MISSING — stub required";
+            }
+            else {
+                renderHint = `render as \`<${pascalName} />\` with props from Slot Contract`;
+                importNote = d.status === "external" ? "external" : "PTB-managed";
+            }
+            const countNote = d.count > 1 ? ` (used ${d.count}×)` : "";
+            lines.push(`- **${d.name}**${countNote} [${importNote}] — ${renderHint}`);
+            const resolvedImportPath = d.importPath
+                || (isIcon ? `../../icons/${normalizeIconDisplayName(d.name).toLowerCase().replace(/\s+/g, "-")}/index.js` : `../${d.name.toLowerCase().replace(/\s+/g, "-")}/index.js`);
+            lines.push(`  Import: \`import { ${pascalName} } from '${resolvedImportPath}';\``);
+            if (d.propHints && d.propHints.length > 0) {
+                lines.push(`  Accepted props: \`{ ${d.propHints.join(", ")} }\``);
+            }
+        }
+        const missing = resolvableDeps.filter(d => d.status === "missing");
+        if (missing.length > 0) {
+            lines.push("");
+            lines.push("> [!IMPORTANT] Missing dependencies: " + missing.map(m => m.name).join(", "));
+            lines.push("> Stub these imports so the file compiles. The real implementations will be added later.");
+        }
+    }
+    // Slot Render Guide — translates slotContract into concrete React patterns.
+    // This is the single source of truth for how each visual slot maps to JSX.
+    const ownSlots = context.slotContract ? Object.entries(context.slotContract) : [];
+    if (ownSlots.length > 0) {
+        lines.push("");
+        lines.push("## Slot Render Guide");
+        lines.push("These are this component's own visual slots. Render EXACTLY as shown — never pass a slot metadata object as a prop value.");
+        lines.push("⚠ CRITICAL: Every prop listed here MUST appear in the JSX render output. Props are not optional overrides — they ARE the elements rendered at that position.");
+        lines.push("");
+        for (const [slotName, def] of ownSlots) {
+            // renderPattern is computed deterministically during context generation — use it directly.
+            // Fall back to deriving locally only for legacy contexts that pre-date this field.
+            const renderPat = def.renderPattern ?? (() => {
+                if (def.kind === "text")
+                    return def.prop ? `{${def.prop}}` : (def.textContent ? `"${def.textContent}"` : "null");
+                if (!def.visible)
+                    return def.prop ? `{${def.prop} ?? null}` : "null";
+                if (def.kind === "child" && def.prop)
+                    return `{${def.prop}}`;
+                const depName = def.dependency?.componentName || def.dependency?.importName || "UnknownComponent";
+                if (def.prop)
+                    return `{${def.prop} ?? <${depName} />}`;
+                return `<${depName} />`;
+            })();
+            const vb = def.visibilityBehavior;
+            if (def.kind === "text") {
+                lines.push(`- **${slotName}** (text) → \`${renderPat}\``);
+                if (def.prop)
+                    lines.push(`  Prop type: \`${def.prop}: string\``);
+            }
+            else if (def.dependency) {
+                const compName = def.dependency.componentName || def.dependency.importName;
+                const compNormalized = isIconComponent(compName) ? normalizeIconDisplayName(compName) : compName;
+                const depFolder = compNormalized.toLowerCase().replace(/[\s_]+/g, "-");
+                const importPath = isIconComponent(compName)
+                    ? `../../icons/${depFolder}/index.js`
+                    : `../${depFolder}/index.js`;
+                if (def.prop) {
+                    lines.push(`- **${slotName}** → MUST accept as \`${def.prop}: React.ReactNode\` prop`);
+                    lines.push(`  JSX: \`${renderPat}\``);
+                    if (vb === "caller-controlled") {
+                        lines.push(`  Caller-controlled: undefined = slot absent. NEVER hardcode \`<${compName} />\` here.`);
+                    }
+                    else if (vb === "hidden-by-default") {
+                        lines.push(`  Hidden by default. DO NOT import \`${compName}\` — it is never rendered directly.`);
+                    }
+                    else {
+                        // caller-overrideable: import needed for fallback
+                        lines.push(`  Import: \`import { ${compName} } from '${importPath}';\``);
+                        lines.push(`  \`<${compName} />\` is the design default; \`${def.prop}\` overrides it.`);
+                    }
+                }
+                else {
+                    lines.push(`- **${slotName}** → \`${renderPat}\` (fixed, no prop)`);
+                    lines.push(`  Import: \`import { ${compName} } from '${importPath}';\``);
+                    if (!def.visible)
+                        lines.push(`  Hidden by default — some variants show this slot.`);
+                }
+            }
+            else {
+                if (def.prop) {
+                    lines.push(`- **${slotName}** → \`${renderPat}\` (\`${def.prop}: React.ReactNode\`)`);
+                }
+                else {
+                    lines.push(`- **${slotName}** → \`${renderPat}\``);
+                }
+            }
+        }
+    }
+    // Boolean Prop → Slot Visibility section — for composite components only.
+    // When a composite has boolean Figma properties, they control child instance rendering.
+    // We emit a concrete render pattern so the AI doesn't have to guess.
+    const boolVisProps = safeArray(context.properties).filter((p) => p.type === "boolean");
+    if (isComposite && boolVisProps.length > 0) {
+        // Extract alphabetic prefix for each numbered prop (e.g. "tab3" → prefix "tab")
+        const numberedBoolPropRe = /^([a-zA-Z]+)(\d+)$/;
+        lines.push("");
+        lines.push("## Boolean Props — Slot Visibility");
+        lines.push("Each boolean prop below controls whether a specific child instance renders.");
+        lines.push("**Use this render pattern**: `{propName !== false && <ChildComp />}`");
+        lines.push("");
+        for (const p of boolVisProps) {
+            const propName = toPropName(p.name);
+            const defVal = p.defaultValue;
+            const defNote = defVal !== undefined ? ` (default: ${defVal})` : " (default: true)";
+            // Find the best-matching dep by name
+            const propLower = propName.toLowerCase();
+            const m = propName.match(numberedBoolPropRe);
+            const prefix = m ? m[1].toLowerCase() : propLower;
+            const matchedDep = resolvableDeps.find(d => {
+                const depLower = d.name.toLowerCase().replace(/\s+/g, "");
+                return depLower.includes(prefix) || prefix.includes(depLower);
+            });
+            const depPascal = matchedDep
+                ? matchedDep.name.split(/\s+/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("")
+                : "ChildComponent";
+            lines.push(`- \`${propName}\`${defNote} → \`{${propName} !== false && <${depPascal} />}\``);
+        }
+        lines.push("");
+        lines.push("Each of these props maps to a DIFFERENT instance of the matched child component.");
+        lines.push("Render them in order — `tab3` maps to the 3rd slot, `tab4` to the 4th, etc.");
+    }
+    if (context.layout) {
+        const l = context.layout;
+        lines.push("");
+        lines.push("## Layout");
+        lines.push(`- Direction: ${l.direction}`);
+        if (l.mainAlignment)
+            lines.push(`- Main Alignment: ${l.mainAlignment}`);
+        if (l.crossAlignment)
+            lines.push(`- Cross Alignment: ${l.crossAlignment}`);
+        if (l.gap)
+            lines.push(`- Gap: ${l.gap.rawValue}px${l.gap.mode === "auto" ? " (auto)" : ""}`);
+        if (l.padding) {
+            const p = l.padding;
+            lines.push(`- Padding: top ${p.top.rawValue}, right ${p.right.rawValue}, bottom ${p.bottom.rawValue}, left ${p.left.rawValue}`);
+        }
+    }
+    if (context.size) {
+        const s = context.size;
+        lines.push("");
+        lines.push("## Size");
+        lines.push(`- Width: ${s.width.rawValue}${s.width.mode ? ` (${s.width.mode})` : ""}`);
+        lines.push(`- Height: ${s.height.rawValue}${s.height.mode ? ` (${s.height.mode})` : ""}`);
+    }
+    if (context.tokenBindings.length > 0) {
+        lines.push("");
+        lines.push("## Token Bindings");
+        for (const b of context.tokenBindings) {
+            const t = b.resolvedToken;
+            if (t) {
+                let tokenDesc = t.name;
+                if (t.collection)
+                    tokenDesc += ` (collection: ${t.collection.name})`;
+                if (t.cssVariable)
+                    tokenDesc += ` [CSS: ${t.cssVariable}]`;
+                lines.push(`- ${b.slot} → ${tokenDesc}`);
+            }
+            else {
+                lines.push(`- ${b.slot} → ${b.rawValue} (raw)`);
+            }
+        }
+    }
+    if (context.resolvedBindings && Object.keys(safeObject(context.resolvedBindings)).length > 0) {
+        lines.push("");
+        lines.push("## Resolved Token Bindings (Implementation-Ready)");
+        lines.push("Use these CSS variables and fallback values for styling:");
+        for (const [slot, b] of Object.entries(safeObject(context.resolvedBindings))) {
+            const bind = b;
+            const fallback = (bind.valueType === "DIMENSION" && /^\d+(\.\d+)?$/.test(String(bind.cssValue)))
+                ? `${bind.cssValue}px`
+                : bind.cssValue;
+            lines.push(`- **${slot}** [${bind.valueType}]: \`var(${bind.cssVar}, ${fallback})\``);
+            lines.push(`  - Resolution Path: ${safeArray(bind.resolutionPath).join(" -> ")}`);
+        }
+    }
+    if (context.contentSourceMap && Object.keys(safeObject(context.contentSourceMap)).length > 0) {
+        lines.push("");
+        lines.push("## Content Contracts (Implementation-Ready)");
+        lines.push("Use these contracts to manage text content across props and states:");
+        for (const [nodeName, propName] of Object.entries(safeObject(context.contentSourceMap))) {
+            // Find node in renderTree to get full contract details
+            const findNode = (node) => {
+                if (!node)
+                    return null;
+                if (node.name === nodeName)
+                    return node;
+                for (const child of safeArray(node.children)) {
+                    const f = findNode(child);
+                    if (f)
+                        return f;
+                }
+                return null;
+            };
+            const node = findNode(context.renderTree);
+            const contract = node?.contentContract;
+            if (contract) {
+                lines.push(`- **${nodeName}** [Mode: \`${contract.bindingMode}\`]:`);
+                if (contract.propName)
+                    lines.push(`  - Prop: \`props.${contract.propName}\``);
+                lines.push(`  - Base Value: "${contract.baseValue}"`);
+                if (contract.stateDefaults) {
+                    lines.push(`  - State Defaults: ${JSON.stringify(contract.stateDefaults)}`);
+                }
+                if (contract.overridePriority) {
+                    lines.push(`  - Priority: ${contract.overridePriority.join(" > ")}`);
+                }
+            }
+            else {
+                lines.push(`- **${nodeName}** → \`props.${propName}\``);
+            }
+        }
+    }
+    if (context.dependencyInstances && context.dependencyInstances.length > 0) {
+        lines.push("");
+        lines.push("## Nested Instance Recipes");
+        lines.push("Use these specific recipes when instantiating the following dependency instances:");
+        for (const inst of context.dependencyInstances) {
+            lines.push(`### Instance: \`${inst.name}\` (Component: ${inst.name})`);
+            if (inst.recipe) {
+                lines.push(`- **Implementation Mode**: \`${inst.recipe.implementationMode || 'invoke-dependency'}\``);
+                if (inst.recipe.classification) {
+                    const cl = inst.recipe.classification;
+                    if (cl.representable.length > 0)
+                        lines.push(`  - Representable Overrides: ${cl.representable.join(", ")}`);
+                    if (cl.derivedButRepresentable.length > 0)
+                        lines.push(`  - Derived Representable Overrides: ${cl.derivedButRepresentable.join(", ")}`);
+                    if (cl.nonRepresentable.length > 0) {
+                        lines.push(`  - **NON-REPRESENTABLE OVERRIDES**: ${cl.nonRepresentable.join(", ")}`);
+                        for (const w of cl.warnings) {
+                            lines.push(`  - > [!WARNING] ${w}`);
+                        }
+                    }
+                }
+                if (inst.recipe.styleOverrides) {
+                    lines.push(`- **Local Style Overrides** (Apply as CSS/style local patches):`);
+                    for (const [prop, val] of Object.entries(safeObject(inst.recipe.styleOverrides))) {
+                        let valStr = val.toToken ? `var(${val.toCssVar}) /* ${val.toToken} */` : val.toColor;
+                        if (val.fromToken || val.fromColor) {
+                            let fromStr = val.fromToken ? `var(${val.fromCssVar})` : val.fromColor;
+                            valStr = `${fromStr} -> ${valStr}`;
+                        }
+                        lines.push(`  - ${prop}: ${valStr}`);
+                    }
+                }
+                lines.push(`- **Resolved Usage**: ${inst.recipe.summary}`);
+                lines.push(`- **Functional Type**: ${inst.recipe.standardType}`);
+                if (inst.recipe.implementationMode === "invoke-dependency-with-local-patch") {
+                    lines.push(`- > [!IMPORTANT]`);
+                    lines.push(`- > Use a local one-off patch (e.g. wrapper div, style prop) for non-representable overrides.`);
+                }
+                else if (inst.recipe.implementationMode === "recommend-variant-promotion") {
+                    lines.push(`- > [!TIP]`);
+                    lines.push(`- > Consider promoting these overrides to a formal variant in the dependency component if they reuse often.`);
+                }
+                if (inst.recipe.instanceSummary) {
+                    const sm = inst.recipe.instanceSummary;
+                    lines.push(`- **Divergence Summary**:`);
+                    if (sm.divergenceSummary.contentOverrides.length > 0)
+                        lines.push(`  - Content Overrides: ${sm.divergenceSummary.contentOverrides.join(", ")}`);
+                    if (sm.divergenceSummary.slotVisibilityOverrides.length > 0)
+                        lines.push(`  - Visibility Overrides: ${sm.divergenceSummary.slotVisibilityOverrides.join(", ")}`);
+                    if (sm.divergenceSummary.styleOverrides.length > 0)
+                        lines.push(`  - Style Overrides: ${sm.divergenceSummary.styleOverrides.join(", ")}`);
+                    if (sm.divergenceSummary.dependencyOverrides.length > 0)
+                        lines.push(`  - Dependency Swaps: ${sm.divergenceSummary.dependencyOverrides.join(", ")}`);
+                }
+                if (inst.recipe.invocationContract) {
+                    const ic = inst.recipe.invocationContract;
+                    lines.push(`- **Implementation Invocation Contract** (FOLLOW LITERALLY):`);
+                    lines.push(`  - Component: \`<${ic.componentName} />\``);
+                    lines.push(`  - Children Policy: \`${ic.childrenPolicy}\``);
+                    if (safeArray(ic.omitProps).length > 0)
+                        lines.push(`  - Omit Props: ${safeArray(ic.omitProps).join(", ")}`);
+                    if (Object.keys(safeObject(ic.slotContract)).length > 0) {
+                        lines.push(`  - **Slot Contract** (Kind-Aware):`);
+                        for (const [slot, def] of Object.entries(safeObject(ic.slotContract))) {
+                            let slotLine = `    - ${slot}: ${def.kind} (visible: ${def.visible})`;
+                            if (def.prop)
+                                slotLine += ` [linked prop: ${def.prop}]`;
+                            if (def.dependency)
+                                slotLine += ` [dependency: <${def.dependency.componentName} />]`;
+                            lines.push(slotLine);
+                        }
+                    }
+                    if (Object.keys(safeObject(ic.iconBindingPolicy)).length > 0) {
+                        const icons = Object.entries(safeObject(ic.iconBindingPolicy)).map(([k, v]) => `${k}="${v}"`).join(", ");
+                        lines.push(`  - Icon Bindings: \`${icons}\``);
+                    }
+                    if (ic.overrideContract) {
+                        const oc = ic.overrideContract;
+                        lines.push(`  - **Override Contract** (Compiled):`);
+                        if (Object.keys(safeObject(oc.slotVisibility)).length > 0) {
+                            lines.push(`    - Slot Visibility: ${JSON.stringify(oc.slotVisibility)}`);
+                        }
+                        if (Object.keys(safeObject(oc.content)).length > 0) {
+                            lines.push(`    - Content Overrides: ${JSON.stringify(oc.content)}`);
+                        }
+                        if (Object.keys(safeObject(oc.dependency)).length > 0) {
+                            const deps = Object.entries(safeObject(oc.dependency))
+                                .map(([k, v]) => `${k} → <${v.componentName} />`)
+                                .join(", ");
+                            lines.push(`    - Dependency Swaps: ${deps}`);
+                        }
+                        if (Object.keys(safeObject(oc.style)).length > 0) {
+                            lines.push(`    - Style Overrides: ${JSON.stringify(oc.style)}`);
+                        }
+                    }
+                }
+                if (inst.recipe.designRules) {
+                    const dr = inst.recipe.designRules;
+                    if (dr.border || dr.spacing || dr.normalizationPolicy || dr.slotVisibilityPolicy || (dr.notes && dr.notes.length > 0)) {
+                        lines.push(`- **Design Rules** (Intentional Divergence):`);
+                        if (dr.border)
+                            lines.push(`  - Border: \`${dr.border.policy}\`${dr.border.reason ? ` Reason: ${dr.border.reason}` : ""}`);
+                        if (dr.spacing)
+                            lines.push(`  - Spacing: \`${dr.spacing.policy}\``);
+                        if (dr.normalizationPolicy)
+                            lines.push(`  - Normalization: \`${dr.normalizationPolicy}\``);
+                        if (dr.slotVisibilityPolicy)
+                            lines.push(`  - Slot Visibility: \`${dr.slotVisibilityPolicy}\``);
+                        for (const note of safeArray(dr.notes))
+                            lines.push(`  - NOTE: ${note}`);
+                    }
+                }
+                if (inst.recipe.implementationHints) {
+                    const ih = inst.recipe.implementationHints;
+                    if (ih.notes && ih.notes.length > 0) {
+                        lines.push(`- **Implementation Hints**:`);
+                        for (const note of safeArray(ih.notes))
+                            lines.push(`  - > [!TIP] ${note}`);
+                    }
+                }
+                if (inst.recipe.invocationHint) {
+                    lines.push(`- **Invocation Hint**: \`${inst.recipe.invocationHint}\``);
+                }
+                const allResolvedProps = safeObject(inst.recipe.resolvedProps);
+                const cleanProps = Object.fromEntries(Object.entries(allResolvedProps).filter(([, v]) => !isFigmaMeta(v)));
+                const metaProps = Object.entries(allResolvedProps)
+                    .filter(([, v]) => isFigmaMeta(v))
+                    .map(([k, v]) => ({ slot: k, componentId: v.componentId, kind: v.kind }));
+                if (Object.keys(cleanProps).length > 0) {
+                    const propsStr = Object.entries(cleanProps).map(([k, v]) => `${k}=${JSON.stringify(v)}`).join(", ");
+                    lines.push(`- **Resolved Props**: \`${propsStr}\``);
+                }
+                // Unresolvable Figma component refs — tell AI to render as component, not as data
+                for (const mp of metaProps) {
+                    lines.push(`- **Slot \`${mp.slot}\`**: render as a React component in JSX — NOT as a prop value.`);
+                    lines.push(`  Look up the dependency name from the Slot Contract above and render \`<ComponentName />\`.`);
+                }
+                // Concrete JSX snippet — clean scalar props + resolved deps as prop={<Comp />}
+                const icForJsx = inst.recipe.invocationContract;
+                if (icForJsx) {
+                    const compName = icForJsx.componentName;
+                    const jsxParts = Object.entries(cleanProps).map(([k, v]) => {
+                        const dep = v;
+                        if (dep && typeof dep === "object" && dep.kind === "dependency" && dep.importName) {
+                            const depName = dep.importName
+                                .split(/[\s\-_]+/).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+                            return `${k}={<${depName} />}`;
+                        }
+                        if (typeof v === "boolean")
+                            return v ? k : `${k}={false}`;
+                        return `${k}="${v}"`;
+                    });
+                    const jsxSnippet = jsxParts.length > 0
+                        ? `<${compName} ${jsxParts.join(" ")} />`
+                        : `<${compName} />`;
+                    lines.push(`- **Concrete JSX** (copy exactly): \`${jsxSnippet}\``);
+                }
+                if (safeArray(inst.recipe.visibleSlots).length > 0)
+                    lines.push(`- **Visible Slots**: ${safeArray(inst.recipe.visibleSlots).join(", ")}`);
+                if (safeArray(inst.recipe.hiddenSlots).length > 0)
+                    lines.push(`- **Hidden Slots**: ${safeArray(inst.recipe.hiddenSlots).join(", ")}`);
+            }
+            if (inst.childOverrides && inst.childOverrides.length > 0) {
+                lines.push(`- **Child Instance Overrides**:`);
+                for (const co of safeArray(inst.childOverrides)) {
+                    const coSummary = co.recipe?.summary || "Deep override";
+                    lines.push(`  - \`${co.name}\` (${co.role}): ${coSummary}`);
+                    if (co.variantSelection) {
+                        const sel = Object.entries(safeObject(co.variantSelection)).map(([k, v]) => `${k}=${v}`).join(", ");
+                        lines.push(`    - Variant Selection: ${sel}`);
+                    }
+                    if (co.propertyOverrides) {
+                        const ovr = Object.entries(safeObject(co.propertyOverrides))
+                            .filter(([, v]) => !isFigmaMeta(v) && !(typeof v === "string" && /^\d+:\d+/.test(v)))
+                            .map(([k, v]) => `${k}=${v}`).join(", ");
+                        if (ovr)
+                            lines.push(`    - Property Overrides: ${ovr}`);
+                    }
+                }
+            }
+            if (inst.variantSelection) {
+                const sel = Object.entries(safeObject(inst.variantSelection)).map(([k, v]) => `${k}=${v}`).join(", ");
+                lines.push(`- **Variant Selection**: ${sel}`);
+            }
+            if (inst.propertyOverrides) {
+                const ovr = Object.entries(safeObject(inst.propertyOverrides))
+                    .filter(([, v]) => !isFigmaMeta(v) && !(typeof v === "string" && /^\d+:\d+/.test(v)))
+                    .map(([k, v]) => `${k}=${v}`).join(", ");
+                if (ovr)
+                    lines.push(`- **Property Overrides**: ${ovr}`);
+            }
+        }
+    }
+    if (context.renderTree) {
+        lines.push("");
+        lines.push("## Render Structure");
+        lines.push("The component has the following visual structure:");
+        const renderNode = (node, indent) => {
+            let line = `${indent}- ${node.name} (${node.role || "node"})`;
+            if (node.textContent)
+                line += `: "${node.textContent}"`;
+            if (node.contentContract) {
+                const ct = node.contentContract;
+                line += ` [Mode: ${ct.bindingMode}${ct.propName ? `, Prop: ${ct.propName}` : ""}]`;
+                if (ct.stateDefaults)
+                    line += ` (State-aware)`;
+            }
+            if (node.typographyContract) {
+                const tc = node.typographyContract;
+                if (tc.styleRef)
+                    line += ` [Style: ${tc.styleRef.displayName}]`;
+                if (tc.codeHint?.preferredClassName)
+                    line += ` [Class: ${tc.codeHint.preferredClassName}]`;
+            }
+            if (node.componentId)
+                line += ` [Instance: ${node.componentId}]`;
+            lines.push(line);
+            if (node.children) {
+                for (const child of node.children) {
+                    renderNode(child, indent + "  ");
+                }
+            }
+        };
+        renderNode(context.renderTree, "");
+        lines.push("");
+        lines.push("> **Typography**: Nodes annotated with `[Class: X]` carry a global utility class from `typography.css`.");
+        lines.push("> Apply it as a plain string alongside the CSS module class — never as a module key lookup:");
+        lines.push("> `[styles['element-name'], 'type-body-sm'].filter(Boolean).join(' ')`");
+    }
+    if (context.variantDiffs && context.variantDiffs.length > 0) {
+        lines.push("");
+        lines.push("## Variant Differences");
+        lines.push("Apply these changes to the `baseRenderTree` when the corresponding variant state is active.");
+        for (const diff of safeArray(context.variantDiffs)) {
+            const selectionStr = Object.entries(safeObject(diff.variantSelection))
+                .map(([k, v]) => `${k}=${v}`)
+                .join(", ");
+            lines.push(`### State: ${selectionStr} (${diff.variantName})`);
+            if (safeArray(diff.addedNodes).length > 0) {
+                lines.push("- Added: " + safeArray(diff.addedNodes).map((n) => {
+                    const parent = n.parentName ? ` inside **${n.parentName}**` : "";
+                    return `${n.name} (${n.type})${parent}`;
+                }).join(", "));
+            }
+            if (safeArray(diff.removedNodes).length > 0) {
+                lines.push("- Removed: " + safeArray(diff.removedNodes).map((n) => {
+                    const parent = n.parentName ? ` from **${n.parentName}**` : "";
+                    return `${n.name} (${n.type})${parent}`;
+                }).join(", "));
+            }
+            if (safeArray(diff.changedNodes).length > 0) {
+                for (const node of safeArray(diff.changedNodes)) {
+                    lines.push(`- Changed in \`${node.nodeName}\` (at ${node.nodePath}):`);
+                    for (const ch of node.changes) {
+                        let fromVal = typeof ch.from === "object" ? JSON.stringify(ch.from) : ch.from;
+                        let toVal = typeof ch.to === "object" ? JSON.stringify(ch.to) : ch.to;
+                        lines.push(`  - ${ch.property}: ${fromVal} -> ${toVal}`);
+                    }
+                }
+            }
+        }
+    }
+    // Conditional Rendering Guide — derived from variantDiffs removedNodes + stateContract visibility
+    const safeArrOuter = (v) => Array.isArray(v) ? v : [];
+    const conditionalRules = [];
+    const seenConditionalKeys = new Set();
+    const depNames = new Set((resolvableDeps ?? []).map((d) => d.name?.split(/[\s\-_]+/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("") ?? ""));
+    const toPascal = (name) => name.split(/[\s_-]+/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+    const toGuard = (selStr) => selStr.replace(/ === '([^']+)'/, " !== '$1'");
+    for (const diff of safeArrOuter(context.variantDiffs)) {
+        const selStr = Object.entries(safeObject(diff.variantSelection)).map(([k, v]) => `${toPropName(k)} === '${v}'`).join(" && ");
+        const guardStr = toGuard(selStr);
+        // Removed nodes
+        for (const node of safeArrOuter(diff.removedNodes)) {
+            const key = `${selStr}::${node.name}::removed`;
+            if (seenConditionalKeys.has(key))
+                continue;
+            seenConditionalKeys.add(key);
+            const pascal = toPascal(node.name);
+            const el = depNames.has(pascal) ? `<${pascal} ... />` : `<${pascal} />`;
+            conditionalRules.push(`- When \`${selStr}\`: **${node.name}** removed → \`{${guardStr} && ${el}}\``);
+        }
+        // Nodes that become invisible (visible: true → false)
+        for (const cn of safeArrOuter(diff.changedNodes)) {
+            const visChange = safeArrOuter(cn.changes).find((c) => c.property === "visible" && c.to === false);
+            if (!visChange)
+                continue;
+            const key = `${selStr}::${cn.nodeName}::vis`;
+            if (seenConditionalKeys.has(key))
+                continue;
+            seenConditionalKeys.add(key);
+            const pascal = toPascal(cn.nodeName);
+            const el = depNames.has(pascal) ? `<${pascal} ... />` : `<${pascal} />`;
+            const tree = context.renderTree ?? context.baseRenderTree;
+            const nodeAtPath = cn.nodePath ? findNodeAtPath(tree, cn.nodePath) : null;
+            const contentDesc = describeNodeContent(nodeAtPath);
+            // Find parent and enumerate ALL siblings with the same name so the AI knows the
+            // full sibling set — it must render ALL of them, wrapping only the hidden one.
+            const parentPath = cn.nodePath ? cn.nodePath.split("/").slice(0, -1).join("/") : null;
+            const parentNode = parentPath ? findNodeAtPath(tree, parentPath || "root") : null;
+            const siblings = parentNode?.children ?? [];
+            const sameName = siblings.filter((s) => s.name === cn.nodeName);
+            if (sameName.length > 1) {
+                // Produce an explicit sibling map for the parent container
+                const parentDesc = parentNode?.name ? ` **${parentNode.name}**` : "";
+                conditionalRules.push(`- When \`${selStr}\`: hide the **${cn.nodeName}** that ${contentDesc || `is at path \`${cn.nodePath}\``} (visible: true → false)`);
+                conditionalRules.push(`  Parent container${parentDesc} has ${sameName.length} \`${cn.nodeName}\` instances — render ALL of them, wrap only the hidden one:`);
+                siblings.forEach((sib, i) => {
+                    if (sib.name !== cn.nodeName)
+                        return;
+                    const sibPath = `${parentPath}/${i}`;
+                    const sibDesc = describeNodeContent(sib);
+                    const isHidden = sibPath === cn.nodePath;
+                    const marker = isHidden
+                        ? `  → \`{${guardStr} && ${el}}\`  ← WRAP THIS ONE (${sibDesc || "hidden in this state"})`
+                        : `  → always render \`${el}\`  ← NEVER wrap (${sibDesc || "always visible"})`;
+                    conditionalRules.push(`  - [${sibPath}] ${sib.name}: ${marker}`);
+                });
+            }
+            else {
+                const pathNote = cn.nodePath
+                    ? ` at path \`${cn.nodePath}\`${contentDesc ? ` (${contentDesc})` : ""}`
+                    : "";
+                conditionalRules.push(`- When \`${selStr}\`: **${cn.nodeName}**${pathNote} (visible: true → false) → \`{${guardStr} && ${el}}\``);
+            }
+        }
+    }
+    // Also derive rules from stateContract.stateDefaults where slotVisibility is false
+    if (context.stateContract) {
+        const sc = context.stateContract;
+        const ctrlProp = toPropName(sc.controller.name);
+        for (const [state, defaults] of Object.entries(safeObject(sc.stateDefaults))) {
+            const def = defaults;
+            const hiddenSlots = def?.slotVisibility
+                ? Object.entries(def.slotVisibility)
+                    .filter(([, visible]) => !visible)
+                    .map(([slotName]) => slotName)
+                : [];
+            for (const slotName of hiddenSlots) {
+                const selStr = `${ctrlProp} === '${state}'`;
+                const guardStr = toGuard(selStr);
+                const key = `${selStr}::${slotName}`;
+                if (seenConditionalKeys.has(key))
+                    continue;
+                seenConditionalKeys.add(key);
+                const pascal = toPascal(slotName);
+                const el = depNames.has(pascal) ? `<${pascal} ... />` : `<${pascal} />`;
+                conditionalRules.push(`- When \`${selStr}\`: **${slotName}** slot hidden → \`{${guardStr} && ${el}}\``);
+            }
+        }
+    }
+    if (conditionalRules.length > 0) {
+        lines.push("");
+        lines.push("## Conditional Rendering Guide");
+        lines.push("These nodes MUST be conditionally hidden when the listed prop combination is active. Use exactly these patterns:");
+        for (const rule of conditionalRules)
+            lines.push(rule);
+    }
+    // Props Interface Skeleton — concrete starting point for the .types.ts file
+    const propsSkeletonLines = buildPropsInterfaceSkeleton(context, codeName);
+    lines.push("");
+    lines.push("## Props Interface Skeleton");
+    lines.push("Start your `.types.ts` file from this skeleton. ALL props listed are REQUIRED — do not drop any.");
+    lines.push("");
+    lines.push("```typescript");
+    lines.push(propsSkeletonLines);
+    lines.push("```");
+    // CSS Skeleton — deterministic starting point so AI never emits an empty CSS file
+    const cssLines = buildCssSkeleton(context);
+    if (cssLines) {
+        lines.push("");
+        lines.push("## CSS Skeleton");
+        lines.push("Start your CSS module from this skeleton. Fill in missing values and add state/variant rules.");
+        lines.push("");
+        lines.push("```css");
+        lines.push(cssLines);
+        lines.push("```");
+        lines.push("");
+        lines.push("> **data-\\* wiring**: Every `[data-X=\"Y\"]` selector in the skeleton above MUST be driven by a prop.");
+        lines.push("> Wire each variant/state axis to a `data-` attribute on the root element in JSX:");
+        lines.push("> ```tsx");
+        lines.push("> <div");
+        lines.push(">   className={styles.container}");
+        if (context.variantAxes.length > 0) {
+            for (const axis of context.variantAxes) {
+                const attrName = axis.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+                const propName = toPropName(axis.name);
+                lines.push(`>   data-${attrName}={${propName}}`);
+            }
+        }
+        if (context.stateContract) {
+            const sc = context.stateContract;
+            const attrName = sc.controller.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+            const propName = toPropName(sc.controller.name);
+            lines.push(`>   data-${attrName}={${propName}}`);
+        }
+        lines.push("> />");
+        lines.push("> ```");
+        lines.push("> Selectors in the skeleton are ALREADY written in `[data-*]` form — connect the prop, do NOT convert them to className logic.");
+    }
+    // TSX Scaffold — only for non-icon components (icons get a plain SVG shell instead)
+    if (!isIcon) {
+        const jsxScaffold = buildJsxScaffold(context, codeName, requiredImportsList);
+        lines.push("");
+        lines.push("## TSX Scaffold");
+        lines.push("Start your `.tsx` component file from this scaffold. Imports, prop wiring, and `data-*` attributes are pre-derived from Figma. Fill in the slot bodies using the Slot Render Guide above.");
+        lines.push("");
+        lines.push("```tsx");
+        lines.push(jsxScaffold);
+        lines.push("```");
+    }
+    lines.push("");
+    lines.push("## Implementation Requirements");
+    for (const inst of instructions) {
+        lines.push(`- ${inst}`);
+    }
+    if (framework) {
+        lines.push("");
+        lines.push(`Please implement this component in ${framework}.`);
+    }
+    const promptText = lines.join("\n");
+    // 2. Map to Condensed JSON Package
+    // Orientation fields come first so an AI reading top-to-bottom gets intent before raw data.
+    return {
+        intent: "implement-component",
+        promptText,
+        instructions,
+        structureSummary,
+        component: {
+            name: c.name,
+            id: c.id,
+            kind: c.kind.value,
+            category: c.category,
+            description: c.description
+        },
+        framework: framework ?? null,
+        variants: context.variantAxes.map(v => ({
+            name: v.name,
+            options: v.options,
+            defaultValue: v.defaultValue
+        })),
+        properties: context.properties.map(p => ({
+            name: p.name,
+            type: p.type
+        })),
+        dependencies: context.dependencies.map(d => ({
+            name: d.name,
+            count: d.count,
+            status: d.status,
+            ...(d.importPath ? { importPath: d.importPath } : {})
+        })),
+        defaultVariantSelection: context.defaultVariantSelection,
+        layout: context.layout ? {
+            direction: context.layout.direction,
+            mainAlignment: context.layout.mainAlignment || context.layout.alignment,
+            crossAlignment: context.layout.crossAlignment,
+            gap: context.layout.gap ? {
+                value: context.layout.gap.rawValue,
+                mode: context.layout.gap.mode || "fixed"
+            } : undefined,
+            padding: context.layout.padding ? {
+                top: context.layout.padding.top.rawValue,
+                right: context.layout.padding.right.rawValue,
+                bottom: context.layout.padding.bottom.rawValue,
+                left: context.layout.padding.left.rawValue
+            } : undefined
+        } : null,
+        size: context.size ? {
+            width: {
+                value: context.size.width.rawValue,
+                mode: context.size.width.mode || "fixed"
+            },
+            height: {
+                value: context.size.height.rawValue,
+                mode: context.size.height.mode || "fixed"
+            }
+        } : null,
+        tokens: context.tokenBindings.map(b => ({
+            slot: b.slot,
+            token: b.resolvedToken?.name || b.rawValue,
+            collection: b.resolvedToken?.collection?.name,
+            cssVariable: b.resolvedToken?.cssVariable
+        })),
+        resolvedBindings: context.resolvedBindings,
+        slotContract: context.slotContract,
+        stateContract: context.stateContract,
+        interactionContract: context.interactionContract,
+        prototypeInteractionContract: context.prototypeInteractionContract,
+        transitionSummary: context.transitionSummary,
+        variantDiffs: context.variantDiffs,
+        dependencyInstances: context.dependencyInstances,
+        contentSourceMap: context.contentSourceMap,
+        renderTree: context.renderTree,
+        baseRenderTree: context.baseRenderTree,
+        childNodes: context.childNodes,
+        compressedContext: context.compressedContext,
+        designRules: context.designRules,
+        implementationHints: context.implementationHints,
+        metadata: context.metadata,
+        generatedAt: new Date().toISOString()
+    };
+}
+//# sourceMappingURL=generate-component-prompt.js.map