@sarjallab09/figma-intelligence 1.0.0

package/figma-intelligence-layer/src/shared/component-script-builder.ts

@@ -0,0 +1,413 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Component Script Builder
+// Takes a ComponentBlueprint + FontConfig → generates a complete Figma Plugin
+// API script that creates the component with proper auto-layout, text nodes
+// with typography presets, and semantic token bindings.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { FontConfig, generateFontLoadScript } from "./font-config.js";
+import { applyTextPresetScript } from "./typography-presets.js";
+import { BlueprintNode, ComponentBlueprint } from "./component-templates.js";
+
+/**
+ * Build a Figma Plugin API script for a single component blueprint.
+ * The script creates the component as a Component node, recursively creates
+ * children with auto-layout, and binds semantic tokens via variable lookup.
+ *
+ * @param blueprint - Component definition
+ * @param fontConfig - Font configuration
+ * @param collectionId - Optional variable collection ID for token binding
+ * @returns Script string for bridge.execute()
+ */
+export function buildComponentScript(
+  blueprint: ComponentBlueprint,
+  fontConfig: FontConfig,
+  collectionId?: string
+): string {
+  const fontLoads = generateFontLoadScript(fontConfig);
+  const nodeCreation = buildNodeScript(blueprint.root, "comp", fontConfig, true);
+  const bindingCode = collectionId
+    ? buildTokenBindingBlock(blueprint, collectionId)
+    : "";
+
+  return `
+(async () => {
+${fontLoads}
+
+  const comp = figma.createComponent();
+  comp.name = ${JSON.stringify(blueprint.name)};
+  ${nodeCreation}
+
+  page.appendChild(comp);
+
+  ${bindingCode}
+
+  return { id: comp.id, name: comp.name };
+})();
+  `.trim();
+}
+
+/**
+ * Build a batch script that creates ALL components for the given blueprints
+ * on a new page.
+ */
+export function buildAllComponentsScript(
+  blueprints: ComponentBlueprint[],
+  brandName: string,
+  fontConfig: FontConfig,
+  collectionId?: string
+): string {
+  const fontLoads = generateFontLoadScript(fontConfig);
+
+  const componentBlocks: string[] = [];
+  let yOffset = 32;
+
+  for (const bp of blueprints) {
+    const varName = `comp_${bp.name.replace(/[^a-zA-Z0-9]/g, "_")}`;
+    const nodeCreation = buildNodeScript(bp.root, varName, fontConfig, true);
+
+    componentBlocks.push(`
+  // ── ${bp.name} ──
+  {
+    const ${varName} = figma.createComponent();
+    ${varName}.name = ${JSON.stringify(bp.name)};
+    ${nodeCreation}
+    page.appendChild(${varName});
+    ${varName}.x = 32;
+    ${varName}.y = ${yOffset};
+    componentIds.push(${varName}.id);
+  }
+    `);
+
+    // Estimate height for next component placement
+    const estHeight = bp.root.height ?? 80;
+    yOffset += estHeight + 32;
+  }
+
+  const bindingCode = collectionId
+    ? buildBatchTokenBindingBlock(blueprints, collectionId)
+    : "";
+
+  return `
+(async () => {
+${fontLoads}
+
+  const page = figma.createPage();
+  page.name = ${JSON.stringify(`${brandName} – Components`)};
+  figma.currentPage = page;
+
+  const componentIds = [];
+
+  ${componentBlocks.join("\n")}
+
+  ${bindingCode}
+
+  return { pageId: page.id, componentCount: componentIds.length };
+})();
+  `.trim();
+}
+
+// ─── Internal helpers ───────────────────────────────────────────────────────
+
+function buildNodeScript(
+  node: BlueprintNode,
+  parentVar: string,
+  fontConfig: FontConfig,
+  isRoot: boolean
+): string {
+  const lines: string[] = [];
+
+  if (!isRoot) {
+    // Create child node
+    const createFn = getCreateFn(node.kind);
+    lines.push(`const ${sanitize(node.name)} = ${createFn};`);
+    lines.push(`${sanitize(node.name)}.name = ${JSON.stringify(node.name)};`);
+  }
+
+  const nv = isRoot ? parentVar : sanitize(node.name);
+
+  // Size
+  if (node.width && node.height) {
+    lines.push(`${nv}.resize(${node.width}, ${node.height});`);
+  } else if (node.width && node.kind !== "text") {
+    lines.push(`${nv}.resize(${node.width}, ${node.height ?? 40});`);
+  }
+
+  // Auto-layout (frames only)
+  if (node.layoutMode && node.layoutMode !== "NONE" && (node.kind === "frame" || isRoot)) {
+    lines.push(`${nv}.layoutMode = ${JSON.stringify(node.layoutMode)};`);
+    if (node.primaryAxisSizing) lines.push(`${nv}.primaryAxisSizingMode = ${JSON.stringify(node.primaryAxisSizing)};`);
+    if (node.counterAxisSizing) lines.push(`${nv}.counterAxisSizingMode = ${JSON.stringify(node.counterAxisSizing)};`);
+    if (node.primaryAxisAlign) lines.push(`${nv}.primaryAxisAlignItems = ${JSON.stringify(node.primaryAxisAlign)};`);
+    if (node.counterAxisAlign) lines.push(`${nv}.counterAxisAlignItems = ${JSON.stringify(node.counterAxisAlign)};`);
+    if (node.paddingX !== undefined) {
+      lines.push(`${nv}.paddingLeft = ${nv}.paddingRight = ${node.paddingX};`);
+    }
+    if (node.paddingY !== undefined) {
+      lines.push(`${nv}.paddingTop = ${nv}.paddingBottom = ${node.paddingY};`);
+    }
+    if (node.itemSpacing !== undefined) {
+      lines.push(`${nv}.itemSpacing = ${node.itemSpacing};`);
+    }
+  }
+
+  // Corner radius
+  if (node.cornerRadius !== undefined) {
+    lines.push(`${nv}.cornerRadius = ${node.cornerRadius};`);
+  }
+
+  // Fills (use semantic token name as comment, hardcode a placeholder color)
+  if (node.fillSemantic) {
+    const fallback = semanticToFallbackRgb(node.fillSemantic);
+    lines.push(`${nv}.fills = [{ type: 'SOLID', color: ${fallback} }];`);
+  }
+
+  // Strokes
+  if (node.strokeSemantic) {
+    const fallback = semanticToFallbackRgb(node.strokeSemantic);
+    lines.push(`${nv}.strokes = [{ type: 'SOLID', color: ${fallback} }];`);
+    lines.push(`${nv}.strokeWeight = ${node.strokeWeight ?? 1};`);
+    lines.push(`${nv}.strokeAlign = 'INSIDE';`);
+  }
+
+  // Effects
+  if (node.effects && node.effects.length > 0) {
+    const effectsJson = JSON.stringify(node.effects.map((e) => ({
+      ...e,
+      visible: true,
+      blendMode: "NORMAL",
+    })));
+    lines.push(`${nv}.effects = ${effectsJson};`);
+  }
+
+  // Opacity
+  if (node.opacity !== undefined) {
+    lines.push(`${nv}.opacity = ${node.opacity};`);
+  }
+
+  // Icon slot annotation
+  if (node.iconSlot) {
+    const slot = node.iconSlot;
+    const parts = [
+      slot.defaultIcon ? `icon: ${JSON.stringify(slot.defaultIcon)}` : null,
+      slot.size ? `size: ${JSON.stringify(slot.size)}` : null,
+      slot.decorative !== undefined ? `decorative: ${slot.decorative}` : null,
+      slot.colorToken ? `color: ${JSON.stringify(slot.colorToken)}` : null,
+      `required: ${slot.required}`,
+    ].filter(Boolean).join(", ");
+    lines.push(`// Icon slot: { ${parts} }`);
+    lines.push(`${nv}.setPluginData("iconSlot", ${JSON.stringify(JSON.stringify(slot))});`);
+  }
+
+  // Text-specific
+  if (node.kind === "text") {
+    if (node.textPreset) {
+      lines.push(applyTextPresetScript(nv, node.textPreset, fontConfig));
+    }
+    lines.push(`${nv}.characters = ${JSON.stringify(node.textContent ?? "")};`);
+    if (node.textFillSemantic) {
+      const fallback = semanticToFallbackRgb(node.textFillSemantic);
+      lines.push(`${nv}.fills = [{ type: 'SOLID', color: ${fallback} }];`);
+    }
+  }
+
+  // Append to parent (if not root)
+  if (!isRoot) {
+    lines.push(`${parentVar}.appendChild(${nv});`);
+  }
+
+  // Recurse children
+  if (node.children) {
+    for (const child of node.children) {
+      lines.push(buildNodeScript(child, nv, fontConfig, false));
+    }
+  }
+
+  return lines.join("\n    ");
+}
+
+function getCreateFn(kind: BlueprintNode["kind"]): string {
+  switch (kind) {
+    case "frame":   return "figma.createFrame()";
+    case "text":    return "figma.createText()";
+    case "rect":    return "figma.createRectangle()";
+    case "ellipse": return "figma.createEllipse()";
+    case "vector":  return "figma.createVector()";
+    default:        return "figma.createFrame()";
+  }
+}
+
+function sanitize(name: string): string {
+  return name.replace(/[^a-zA-Z0-9_]/g, "_");
+}
+
+/**
+ * Map semantic token names to reasonable fallback RGB literals for initial
+ * component creation. These are overridden by actual variable bindings.
+ */
+function semanticToFallbackRgb(semantic: string): string {
+  const s = semantic.toLowerCase();
+
+  // Primary / brand actions
+  if (s.includes("actions/primary/bg"))       return "{ r: 0.15, g: 0.39, b: 0.92 }";
+  if (s.includes("actions/destructive"))      return "{ r: 0.86, g: 0.15, b: 0.15 }";
+  if (s.includes("actions/secondary/bg"))     return "{ r: 0.95, g: 0.95, b: 0.97 }";
+  if (s.includes("actions/secondary/border")) return "{ r: 0.80, g: 0.80, b: 0.85 }";
+
+  // Surface
+  if (s.includes("surface/subtle"))   return "{ r: 0.96, g: 0.96, b: 0.97 }";
+  if (s.includes("surface/raised"))   return "{ r: 1, g: 1, b: 1 }";
+  if (s.includes("surface/overlay"))  return "{ r: 1, g: 1, b: 1 }";
+  if (s.includes("surface/inverse"))  return "{ r: 0.10, g: 0.10, b: 0.12 }";
+  if (s.includes("surface/disabled")) return "{ r: 0.95, g: 0.95, b: 0.96 }";
+  if (s.includes("surface/default"))  return "{ r: 1, g: 1, b: 1 }";
+
+  // Text
+  if (s.includes("text/on-color"))   return "{ r: 1, g: 1, b: 1 }";
+  if (s.includes("text/inverse"))    return "{ r: 1, g: 1, b: 1 }";
+  if (s.includes("text/primary"))    return "{ r: 0.07, g: 0.09, b: 0.15 }";
+  if (s.includes("text/secondary"))  return "{ r: 0.37, g: 0.37, b: 0.42 }";
+  if (s.includes("text/tertiary"))   return "{ r: 0.55, g: 0.55, b: 0.60 }";
+  if (s.includes("text/disabled"))   return "{ r: 0.70, g: 0.70, b: 0.73 }";
+
+  // Border
+  if (s.includes("border/focus"))    return "{ r: 0.15, g: 0.39, b: 0.92 }";
+  if (s.includes("border/strong"))   return "{ r: 0.70, g: 0.70, b: 0.73 }";
+  if (s.includes("border/subtle"))   return "{ r: 0.92, g: 0.92, b: 0.94 }";
+  if (s.includes("border/default"))  return "{ r: 0.82, g: 0.83, b: 0.86 }";
+
+  // Field
+  if (s.includes("field/bg"))        return "{ r: 1, g: 1, b: 1 }";
+  if (s.includes("field/border"))    return "{ r: 0.80, g: 0.80, b: 0.85 }";
+
+  // Feedback
+  if (s.includes("feedback/success/bg"))   return "{ r: 0.87, g: 0.95, b: 0.90 }";
+  if (s.includes("feedback/success/text")) return "{ r: 0.09, g: 0.55, b: 0.29 }";
+  if (s.includes("feedback/warning/bg"))   return "{ r: 0.98, g: 0.93, b: 0.83 }";
+  if (s.includes("feedback/warning/text")) return "{ r: 0.72, g: 0.49, b: 0.02 }";
+  if (s.includes("feedback/danger/bg"))    return "{ r: 0.97, g: 0.88, b: 0.88 }";
+  if (s.includes("feedback/danger/text"))  return "{ r: 0.73, g: 0.14, b: 0.14 }";
+  if (s.includes("feedback/info/bg"))      return "{ r: 0.87, g: 0.92, b: 0.98 }";
+  if (s.includes("feedback/info/text"))    return "{ r: 0.10, g: 0.36, b: 0.78 }";
+
+  // Focus ring
+  if (s.includes("focus/ring"))      return "{ r: 0.15, g: 0.39, b: 0.92 }";
+
+  // Default fallback
+  return "{ r: 0.85, g: 0.85, b: 0.88 }";
+}
+
+/**
+ * Generate token binding code that looks up variables from the collection
+ * and binds them to component fills/strokes/radii.
+ */
+function buildTokenBindingBlock(
+  blueprint: ComponentBlueprint,
+  collectionId: string
+): string {
+  if (blueprint.tokenBindings.length === 0) return "";
+
+  return `
+  // ── Token binding for ${blueprint.name} ──
+  try {
+    const cols = await figma.variables.getLocalVariableCollectionsAsync();
+    const col = cols.find(c => c.id === ${JSON.stringify(collectionId)});
+    if (col) {
+      const vars = [];
+      for (const vid of col.variableIds) {
+        const v = await figma.variables.getVariableByIdAsync(vid);
+        if (v) vars.push(v);
+      }
+      const findVar = (suffix) => vars.find(v => v.name.endsWith(suffix) || v.name === suffix);
+      const bindFill = (node, variable) => {
+        if (!variable || !node.fills || node.fills.length === 0) return;
+        const p = [...node.fills];
+        if (p[0].type === 'SOLID') { p[0] = figma.variables.setBoundVariableForPaint(p[0], 'color', variable); node.fills = p; }
+      };
+      const bindStroke = (node, variable) => {
+        if (!variable || !node.strokes || node.strokes.length === 0) return;
+        const p = [...node.strokes];
+        if (p[0].type === 'SOLID') { p[0] = figma.variables.setBoundVariableForPaint(p[0], 'color', variable); node.strokes = p; }
+      };
+      const bindRadius = (node, variable) => {
+        if (!variable) return;
+        try { node.setBoundVariable('topLeftRadius', variable.id); } catch {}
+        try { node.setBoundVariable('topRightRadius', variable.id); } catch {}
+        try { node.setBoundVariable('bottomLeftRadius', variable.id); } catch {}
+        try { node.setBoundVariable('bottomRightRadius', variable.id); } catch {}
+      };
+
+      ${blueprint.tokenBindings.map((tb) => {
+        const targetExpr = tb.nodePath
+          ? `comp.findOne(n => n.name === ${JSON.stringify(tb.nodePath)})`
+          : "comp";
+        const varExpr = `findVar(${JSON.stringify(tb.semanticToken)})`;
+        if (tb.property === "fills") return `bindFill(${targetExpr} || comp, ${varExpr});`;
+        if (tb.property === "strokes") return `bindStroke(${targetExpr} || comp, ${varExpr});`;
+        if (tb.property === "cornerRadius") return `bindRadius(${targetExpr} || comp, ${varExpr});`;
+        return `/* unsupported binding: ${tb.property} */`;
+      }).join("\n      ")}
+    }
+  } catch (e) { /* token binding is best-effort */ }
+  `;
+}
+
+function buildBatchTokenBindingBlock(
+  blueprints: ComponentBlueprint[],
+  collectionId: string
+): string {
+  const bindableBlueprints = blueprints.filter((bp) => bp.tokenBindings.length > 0);
+  if (bindableBlueprints.length === 0) return "";
+
+  return `
+  // ── Batch token binding ──
+  try {
+    const cols = await figma.variables.getLocalVariableCollectionsAsync();
+    const col = cols.find(c => c.id === ${JSON.stringify(collectionId)});
+    if (col) {
+      const vars = [];
+      for (const vid of col.variableIds) {
+        const v = await figma.variables.getVariableByIdAsync(vid);
+        if (v) vars.push(v);
+      }
+      const findVar = (suffix) => vars.find(v => v.name.endsWith(suffix) || v.name === suffix);
+      const bindFill = (node, variable) => {
+        if (!variable || !node || !node.fills || node.fills.length === 0) return;
+        const p = [...node.fills];
+        if (p[0].type === 'SOLID') { p[0] = figma.variables.setBoundVariableForPaint(p[0], 'color', variable); node.fills = p; }
+      };
+      const bindStroke = (node, variable) => {
+        if (!variable || !node || !node.strokes || node.strokes.length === 0) return;
+        const p = [...node.strokes];
+        if (p[0].type === 'SOLID') { p[0] = figma.variables.setBoundVariableForPaint(p[0], 'color', variable); node.strokes = p; }
+      };
+      const bindRadius = (node, variable) => {
+        if (!variable || !node) return;
+        try { node.setBoundVariable('topLeftRadius', variable.id); } catch {}
+        try { node.setBoundVariable('topRightRadius', variable.id); } catch {}
+        try { node.setBoundVariable('bottomLeftRadius', variable.id); } catch {}
+        try { node.setBoundVariable('bottomRightRadius', variable.id); } catch {}
+      };
+
+      const allComponents = page.findAll(n => n.type === 'COMPONENT');
+      for (const comp of allComponents) {
+        const nameLower = comp.name.toLowerCase();
+        ${bindableBlueprints.map((bp) => {
+          const bindings = bp.tokenBindings.map((tb) => {
+            const targetExpr = tb.nodePath
+              ? `comp.findOne(n => n.name === ${JSON.stringify(tb.nodePath)})`
+              : "comp";
+            const varExpr = `findVar(${JSON.stringify(tb.semanticToken)})`;
+            if (tb.property === "fills") return `  bindFill(${targetExpr} || comp, ${varExpr});`;
+            if (tb.property === "strokes") return `  bindStroke(${targetExpr} || comp, ${varExpr});`;
+            if (tb.property === "cornerRadius") return `  bindRadius(${targetExpr} || comp, ${varExpr});`;
+            return "";
+          }).filter(Boolean).join("\n          ");
+
+          return `if (nameLower === ${JSON.stringify(bp.name.toLowerCase())}) {\n          ${bindings}\n        }`;
+        }).join(" else ")}
+      }
+    }
+  } catch (e) { /* token binding is best-effort */ }
+  `;
+}