figmake-pro 3.0.0

package/dist/plugin/code.js

@@ -0,0 +1,791 @@
+"use strict";
+(() => {
+  // src/core/converters/layoutConverter.ts
+  function figmaToCSS(node) {
+    const styles = [];
+    if (node.layoutMode === "HORIZONTAL" || node.layoutMode === "VERTICAL") {
+      if (node.layoutWrap === "WRAP") {
+        styles.push("display: grid;");
+        const gap = node.itemSpacing || 0;
+        const counterGap = node.counterAxisSpacing ?? gap;
+        styles.push(`gap: ${gap}px ${counterGap}px;`);
+        if (node.layoutMode === "HORIZONTAL") {
+          styles.push(`grid-template-columns: repeat(auto-fill, minmax(${node.itemSpacing || 0}px, 1fr));`);
+        }
+      } else {
+        styles.push("display: flex;");
+        styles.push(`flex-direction: ${node.layoutMode === "HORIZONTAL" ? "row" : "column"};`);
+        styles.push(`gap: ${node.itemSpacing || 0}px;`);
+      }
+      const primaryAlignMap = {
+        MIN: "flex-start",
+        CENTER: "center",
+        MAX: "flex-end",
+        SPACE_BETWEEN: "space-between"
+      };
+      const counterAlignMap = {
+        MIN: "flex-start",
+        CENTER: "center",
+        MAX: "flex-end",
+        BASELINE: "baseline"
+      };
+      styles.push(`justify-content: ${primaryAlignMap[node.primaryAxisAlignItems] || "flex-start"};`);
+      styles.push(`align-items: ${counterAlignMap[node.counterAxisAlignItems] || "flex-start"};`);
+    }
+    if (node.layoutGrids && node.layoutGrids.length > 0) {
+      styles.push("display: grid;");
+      node.layoutGrids.forEach((grid) => {
+        if (grid.pattern === "COLUMNS") {
+          const columns = grid.count || "auto-fill";
+          const gutter = grid.gutterSize || 0;
+          const margin = grid.margin || 0;
+          styles.push(`grid-template-columns: repeat(${columns}, 1fr);`);
+          styles.push(`column-gap: ${gutter}px;`);
+          styles.push(`padding-left: ${margin}px;`);
+          styles.push(`padding-right: ${margin}px;`);
+        } else if (grid.pattern === "ROWS") {
+          const rows = grid.count || "auto-fill";
+          const gutter = grid.gutterSize || 0;
+          const margin = grid.margin || 0;
+          styles.push(`grid-template-rows: repeat(${rows}, 1fr);`);
+          styles.push(`row-gap: ${gutter}px;`);
+          styles.push(`padding-top: ${margin}px;`);
+          styles.push(`padding-bottom: ${margin}px;`);
+        } else if (grid.pattern === "GRID") {
+          styles.push(`background-image: radial-gradient(circle, #000 1px, transparent 1px);`);
+          styles.push(`background-size: ${grid.sectionSize}px ${grid.sectionSize}px;`);
+        }
+      });
+    }
+    if (node.width)
+      styles.push(`width: ${node.width}px;`);
+    if (node.height)
+      styles.push(`height: ${node.height}px;`);
+    if (node.minWidth)
+      styles.push(`min-width: ${node.minWidth}px;`);
+    if (node.maxWidth)
+      styles.push(`max-width: ${node.maxWidth}px;`);
+    if (node.minHeight)
+      styles.push(`min-height: ${node.minHeight}px;`);
+    if (node.maxHeight)
+      styles.push(`max-height: ${node.maxHeight}px;`);
+    const pt = node.paddingTop || 0;
+    const pr = node.paddingRight || 0;
+    const pb = node.paddingBottom || 0;
+    const pl = node.paddingLeft || 0;
+    if (pt === pr && pr === pb && pb === pl && pt !== 0) {
+      styles.push(`padding: ${pt}px;`);
+    } else if (pt !== 0 || pr !== 0 || pb !== 0 || pl !== 0) {
+      styles.push(`padding: ${pt}px ${pr}px ${pb}px ${pl}px;`);
+    }
+    if (node.cornerRadius && node.cornerRadius !== "mixed") {
+      styles.push(`border-radius: ${node.cornerRadius}px;`);
+    } else {
+      if (node.topLeftRadius)
+        styles.push(`border-top-left-radius: ${node.topLeftRadius}px;`);
+      if (node.topRightRadius)
+        styles.push(`border-top-right-radius: ${node.topRightRadius}px;`);
+      if (node.bottomLeftRadius)
+        styles.push(`border-bottom-left-radius: ${node.bottomLeftRadius}px;`);
+      if (node.bottomRightRadius)
+        styles.push(`border-bottom-right-radius: ${node.bottomRightRadius}px;`);
+    }
+    return styles.join("\n");
+  }
+
+  // src/core/utils/imageExporter.ts
+  function handleImage(fill, config) {
+    const style = {};
+    let comment = "";
+    if (config.mode === "none") {
+      style.backgroundColor = "#f0f0f0";
+      comment = "TODO: Replace with actual image asset";
+      return { style, comment };
+    }
+    if (fill.imageHash) {
+      if (config.mode === "placeholder") {
+        style.backgroundImage = `url(data:image/png;base64,iVBOR...)`;
+        style.backgroundSize = "cover";
+        style.filter = "blur(20px)";
+        comment = `TODO: Replace with real asset. Hash: ${fill.imageHash}`;
+      } else if (config.mode === "base64") {
+        style.backgroundImage = `url(IMAGE_HASH_${fill.imageHash})`;
+        style.backgroundSize = "cover";
+      }
+    }
+    return { style, comment };
+  }
+
+  // src/core/extractors/styleExtractor.ts
+  function figmaColorToCSS(color, opacity = 1) {
+    const r = Math.round(color.r * 255);
+    const g = Math.round(color.g * 255);
+    const b = Math.round(color.b * 255);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  function extractNodeStyles(node, config) {
+    const styles = {};
+    const imageConfig = {
+      mode: config?.imageMode || "placeholder",
+      maxBase64Size: 51200,
+      placeholderStyle: "blurred"
+    };
+    if (node.opacity !== void 0 && node.opacity !== 1)
+      styles.opacity = node.opacity;
+    if (node.blendMode && node.blendMode !== "PASS_THROUGH") {
+      const blendModeMap = { MULTIPLY: "multiply", SCREEN: "screen", OVERLAY: "overlay" };
+      styles.mixBlendMode = blendModeMap[node.blendMode] || "normal";
+    }
+    if (node.fills && Array.isArray(node.fills) && node.fills.length > 0) {
+      const fill = node.fills.find((f) => f.visible !== false);
+      if (fill) {
+        if (fill.type === "SOLID")
+          styles.backgroundColor = figmaColorToCSS(fill.color, fill.opacity);
+        else if (fill.type === "IMAGE") {
+          const { style: imageStyle, comment } = handleImage(fill, imageConfig);
+          Object.assign(styles, imageStyle);
+          if (comment)
+            styles.__comment = comment;
+        }
+      }
+    }
+    if (node.cornerRadius !== void 0 && node.cornerRadius !== "mixed")
+      styles.borderRadius = `${node.cornerRadius}px`;
+    return styles;
+  }
+
+  // src/core/config.ts
+  var DEFAULT_CONFIG = {
+    styling: "inline",
+    routing: "useState",
+    typescript: "interfaces",
+    animations: "framer-motion",
+    pattern: "arrow",
+    naming: "PascalCase",
+    exportFormat: "multiple",
+    imageMode: "placeholder"
+  };
+
+  // src/core/generators/handlerGenerator.ts
+  function sanitizeName(name) {
+    return name.replace(/[^a-zA-Z0-9]/g, "_").replace(/^([0-9])/, "_$1");
+  }
+  function toPascalCase(name) {
+    return sanitizeName(name).split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
+  }
+  function generateHandlers(nodeId, nodeName, interactions, config) {
+    const functionDeclarations = [];
+    const propMappings = {};
+    interactions.forEach((interaction, index) => {
+      const trigger = interaction.trigger;
+      const actionType = interaction.actionType;
+      const suffix = interactions.length > 1 ? `_${index}` : "";
+      const baseName = `${toPascalCase(nodeName)}${suffix}`;
+      let handlerName = "";
+      let body = "";
+      if (actionType === "NODE" || actionType === "NAVIGATE") {
+        handlerName = `handleNavigate${baseName}`;
+        const dest = interaction.destinationName || interaction.destinationId || "Unknown";
+        if (config?.routing === "nextjs") {
+          body = `    router.push('/${dest.toLowerCase().replace(/\s+/g, "-")}');`;
+        } else if (config?.routing === "react-router") {
+          body = `    navigate('/${dest.toLowerCase().replace(/\s+/g, "-")}');`;
+        } else {
+          body = `    setActiveView('${toPascalCase(dest)}');`;
+        }
+      } else if (actionType === "URL") {
+        handlerName = `handleOpenLink${baseName}`;
+        body = `    window.open('${interaction.destinationId || "#"}', '_blank');`;
+      } else {
+        handlerName = `handleInteraction${baseName}`;
+        body = `    console.log('${interaction.trigger} triggered');`;
+      }
+      if (handlerName) {
+        functionDeclarations.push(`  const ${handlerName} = () => {
+${body}
+  };`);
+        const reactProp = mapTriggerToReactProp(trigger);
+        if (reactProp)
+          propMappings[reactProp] = handlerName;
+      }
+    });
+    return { functionDeclarations, propMappings };
+  }
+  function mapTriggerToReactProp(trigger) {
+    const map = {
+      click: "onClick",
+      hover: "onMouseEnter",
+      mouseEnter: "onMouseEnter",
+      mouseLeave: "onMouseLeave",
+      press: "onMouseDown",
+      drag: "onDrag"
+    };
+    return map[trigger] || null;
+  }
+
+  // src/core/extractors/animationExtractor.ts
+  var EASING_MAP = {
+    EASE_IN: [0.42, 0, 1, 1],
+    EASE_OUT: [0, 0, 0.58, 1],
+    EASE_IN_AND_OUT: [0.42, 0, 0.58, 1],
+    LINEAR: "linear",
+    GENTLE: [0.25, 0.1, 0.25, 1],
+    QUICK: [0.15, 0, 0.15, 1],
+    BOUNCY: [0.68, -0.6, 0.32, 1.6]
+  };
+  var TRIGGER_MAP = {
+    ON_CLICK: "click",
+    ON_HOVER: "hover",
+    ON_PRESS: "press",
+    ON_DRAG: "drag",
+    AFTER_TIMEOUT: "delay",
+    MOUSE_ENTER: "mouseEnter",
+    MOUSE_LEAVE: "mouseLeave",
+    WHILE_HOVERING: "whileHover",
+    WHILE_PRESSING: "whileTap"
+  };
+  function calculateChildDeltas(sourceNode, destNode) {
+    const deltas = {};
+    if (!sourceNode.children || !destNode.children)
+      return deltas;
+    const sourceChildren = new Map(sourceNode.children.map((c) => [c.name, c]));
+    const destChildren = new Map(destNode.children.map((c) => [c.name, c]));
+    for (const [name, destChild] of destChildren.entries()) {
+      const sourceChild = sourceChildren.get(name);
+      if (sourceChild) {
+        const delta = { name };
+        if (sourceChild.x !== destChild.x)
+          delta.x = destChild.x - sourceChild.x;
+        if (sourceChild.y !== destChild.y)
+          delta.y = destChild.y - sourceChild.y;
+        if (sourceChild.opacity !== destChild.opacity)
+          delta.opacity = destChild.opacity;
+        deltas[name] = delta;
+      }
+    }
+    return deltas;
+  }
+  function extractAnimations(node, getNodeById) {
+    if (!node.reactions || node.reactions.length === 0)
+      return null;
+    const interactions = node.reactions.map((reaction) => {
+      const mapped = {
+        trigger: TRIGGER_MAP[reaction.trigger?.type] || reaction.trigger?.type,
+        actionType: reaction.action?.type
+      };
+      if (reaction.action?.destinationId) {
+        mapped.destinationId = reaction.action.destinationId;
+        const lookup = getNodeById || (typeof figma !== "undefined" ? figma.getNodeById : void 0);
+        if (lookup) {
+          try {
+            const destNode = lookup(mapped.destinationId);
+            if (destNode) {
+              mapped.destinationName = destNode.name;
+              if (reaction.action.navigation === "NAVIGATE") {
+                mapped.childDeltas = calculateChildDeltas(node, destNode);
+              }
+            }
+          } catch (e) {
+          }
+        }
+      }
+      if (reaction.action?.transition) {
+        const t = reaction.action.transition;
+        mapped.transition = {
+          duration: t.duration || 0.3,
+          ease: t.easing ? EASING_MAP[t.easing] || "easeInOut" : "easeInOut"
+        };
+      }
+      return mapped;
+    });
+    return { nodeId: node.id, nodeName: node.name, interactions };
+  }
+
+  // src/core/generators/reactGenerator.ts
+  function generateHash(content) {
+    let hash = 0;
+    for (let i = 0; i < content.length; i++) {
+      const char = content.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash).toString(16).substring(0, 8);
+  }
+  function sanitizeName2(name) {
+    return name.replace(/[^a-zA-Z0-9]/g, "_").replace(/^([0-9])/, "_$1");
+  }
+  function toPascalCase2(name, naming) {
+    return sanitizeName2(name).split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("");
+  }
+  function generateReactComponent(node, options = {}) {
+    const config = options.config || DEFAULT_CONFIG;
+    const files = {};
+    const componentName = options.nameOverrides?.get(node.id) || options.componentName || toPascalCase2(node.name, config.naming);
+    const getNodeById = options.getNodeById;
+    let hasAnimations = false;
+    const allHandlerDeclarations = [];
+    const generateNodeCode = (n, indent = "  ", parentAnimations) => {
+      if (!n.animations && n.reactions) {
+        n.animations = extractAnimations(n, getNodeById);
+      }
+      const styles = extractNodeStyles(n, config);
+      const motionProps = {};
+      const eventHandlers = {};
+      if (n.animations && n.animations.interactions.length > 0) {
+        if (config.animations !== "css") {
+          hasAnimations = true;
+        }
+        const { functionDeclarations, propMappings } = generateHandlers(n.id, n.name, n.animations.interactions, config);
+        allHandlerDeclarations.push(...functionDeclarations);
+        Object.assign(eventHandlers, propMappings);
+        n.animations.interactions.forEach((interaction) => {
+          if (interaction.trigger === "whileHover")
+            motionProps.whileHover = { scale: 1.05 };
+          else if (interaction.trigger === "whileTap")
+            motionProps.whileTap = { scale: 0.95 };
+        });
+      }
+      if (parentAnimations) {
+        const interaction = parentAnimations.interactions.find((i) => i.childDeltas);
+        if (interaction && interaction.childDeltas[n.name]) {
+          hasAnimations = true;
+          const delta = interaction.childDeltas[n.name];
+          motionProps.layoutId = sanitizeName2(n.name).toLowerCase();
+          const initial = {};
+          if (delta.x !== void 0)
+            initial.x = -delta.x;
+          if (delta.y !== void 0)
+            initial.y = -delta.y;
+          if (delta.opacity !== void 0)
+            initial.opacity = 0;
+          if (Object.keys(initial).length > 0) {
+            motionProps.initial = initial;
+            motionProps.animate = { x: 0, y: 0, opacity: 1 };
+          }
+        }
+      }
+      if (n.layoutMode === "HORIZONTAL" || n.layoutMode === "VERTICAL") {
+        styles.display = "flex";
+        styles.flexDirection = n.layoutMode === "HORIZONTAL" ? "row" : "column";
+        styles.gap = `${n.itemSpacing || 0}px`;
+        styles.padding = `${n.paddingTop || 0}px ${n.paddingRight || 0}px ${n.paddingBottom || 0}px ${n.paddingLeft || 0}px`;
+      } else if (n.type !== "GROUP" && n.type !== "DOCUMENT" && n.type !== "PAGE") {
+        styles.position = "absolute";
+        styles.left = `${n.x}px`;
+        styles.top = `${n.y}px`;
+        styles.width = `${n.width}px`;
+        styles.height = `${n.height}px`;
+      }
+      const styleAttr = `style={${JSON.stringify(styles, null, 2).replace(/"([^"]+)":/g, "$1:")}}`;
+      const motionAttr = Object.keys(motionProps).length > 0 ? ` ${Object.entries(motionProps).map(([k, v]) => `${k}={${JSON.stringify(v)}}`).join(" ")}` : "";
+      const handlerAttr = Object.keys(eventHandlers).length > 0 ? ` ${Object.entries(eventHandlers).map(([k, v]) => `${k}={${v}}`).join(" ")}` : "";
+      const syncAttrs = `data-figma-id="${n.id}"`;
+      const tagPrefix = Object.keys(motionProps).length > 0 ? "motion." : "";
+      if (n.type === "TEXT")
+        return `${indent}<${tagPrefix}span ${syncAttrs}${handlerAttr} ${styleAttr}${motionAttr}>${n.characters}</${tagPrefix}span>`;
+      if (n.type === "VECTOR" || n.type === "STAR" || n.type === "POLYGON" || n.type === "ELLIPSE" && !n.cornerRadius)
+        return `${indent}<${tagPrefix}div ${syncAttrs}${handlerAttr} ${styleAttr}${motionAttr}>/* SVG Placeholder */</${tagPrefix}div>`;
+      const childrenCode = n.children ? n.children.map((child) => generateNodeCode(child, indent + "  ", n.animations)).join("\n") : "";
+      let tag = "div";
+      if (n.type === "GROUP")
+        return childrenCode;
+      if (n.type === "SECTION")
+        tag = "section";
+      return `${indent}<${tagPrefix}${tag} ${syncAttrs}${handlerAttr} ${styleAttr}${motionAttr}>
+${childrenCode}
+${indent}</${tagPrefix}${tag}>`;
+    };
+    const nodeCode = generateNodeCode(node, "    ");
+    const contentHash = generateHash(nodeCode);
+    const imports = ["import React from 'react';"];
+    if (hasAnimations)
+      imports.push("import { motion, AnimatePresence } from 'framer-motion';");
+    const finalCode = `
+${imports.join("\n")}
+
+/**
+ * Figma Layer: ${node.name}
+ * ID: ${node.id}
+ * Hash: ${contentHash}
+ */
+export const ${componentName}: React.FC = () => {
+${Array.from(new Set(allHandlerDeclarations)).join("\n\n")}
+
+  return (
+    ${hasAnimations ? '<AnimatePresence mode="wait">' : ""}
+${nodeCode}
+    ${hasAnimations ? "</AnimatePresence>" : ""}
+  );
+};
+`;
+    files[`${componentName}.tsx`] = finalCode;
+    return { code: finalCode, files, hasAnimations, hash: contentHash };
+  }
+
+  // src/core/utils/collisionDetector.ts
+  var RESERVED_WORDS = /* @__PURE__ */ new Set([
+    "break",
+    "case",
+    "catch",
+    "class",
+    "const",
+    "continue",
+    "debugger",
+    "default",
+    "delete",
+    "do",
+    "else",
+    "enum",
+    "export",
+    "extends",
+    "false",
+    "finally",
+    "for",
+    "function",
+    "if",
+    "import",
+    "in",
+    "instanceof",
+    "new",
+    "null",
+    "return",
+    "super",
+    "switch",
+    "this",
+    "throw",
+    "true",
+    "try",
+    "typeof",
+    "var",
+    "void",
+    "while",
+    "with",
+    "yield",
+    "let",
+    "static",
+    "await",
+    "abstract",
+    "boolean",
+    "byte",
+    "char",
+    "double",
+    "final",
+    "float",
+    "goto",
+    "int",
+    "long",
+    "native",
+    "short",
+    "synchronized",
+    "transient",
+    "volatile"
+  ]);
+  function detectCollisions(nodes) {
+    const warnings = [];
+    const seenNames = /* @__PURE__ */ new Map();
+    const seenSanitized = /* @__PURE__ */ new Map();
+    nodes.forEach((node) => {
+      const name = node.name;
+      const sanitized = name.replace(/[^a-zA-Z0-9]/g, "");
+      const id = node.id;
+      if (RESERVED_WORDS.has(name.toLowerCase())) {
+        warnings.push({
+          type: "reserved",
+          name1: name,
+          name2: "",
+          figmaId1: id,
+          figmaId2: "",
+          suggestion: `Fig${name.charAt(0).toUpperCase()}${name.slice(1)}`,
+          severity: "error"
+        });
+      }
+      if (seenNames.has(name)) {
+        const other = seenNames.get(name);
+        if (other.figmaId !== id) {
+          warnings.push({
+            type: "exact",
+            name1: name,
+            name2: name,
+            figmaId1: id,
+            figmaId2: other.figmaId,
+            suggestion: `${name}_${id.replace(":", "_")}`,
+            severity: "error"
+          });
+        }
+      } else {
+        seenNames.set(name, { figmaId: id, originalName: name });
+      }
+      const lowerSanitized = sanitized.toLowerCase();
+      if (seenSanitized.has(lowerSanitized)) {
+        const other = seenSanitized.get(lowerSanitized);
+        if (other.figmaId !== id) {
+          warnings.push({
+            type: lowerSanitized === other.originalName.replace(/[^a-zA-Z0-9]/g, "").toLowerCase() ? "caseInsensitive" : "sanitized",
+            name1: name,
+            name2: other.originalName,
+            figmaId1: id,
+            figmaId2: other.figmaId,
+            suggestion: `${sanitized}_${id.replace(":", "_")}`,
+            severity: "warning"
+          });
+        }
+      } else {
+        seenSanitized.set(lowerSanitized, { figmaId: id, originalName: name });
+      }
+    });
+    return warnings;
+  }
+
+  // src/core/utils/codeMetrics.ts
+  function calculateMetrics(nodes) {
+    let totalLines = 0;
+    let totalCharacters = 0;
+    let jsxElements = 0;
+    let styleProperties = 0;
+    let handlers = 0;
+    let animations = 0;
+    nodes.forEach((node) => {
+      if (node.reactCode) {
+        totalLines += node.reactCode.split("\n").length;
+        totalCharacters += node.reactCode.length;
+        jsxElements += (node.reactCode.match(/<[a-zA-Z]/g) || []).length;
+        handlers += (node.reactCode.match(/handle[A-Z]/g) || []).length;
+        if (node.hasAnimations)
+          animations++;
+      }
+      if (node.css) {
+        styleProperties += (node.css.match(/:/g) || []).length;
+      }
+    });
+    let complexity = "simple";
+    if (totalLines > 500 || jsxElements > 20)
+      complexity = "moderate";
+    if (totalLines > 1e3 || jsxElements > 50)
+      complexity = "complex";
+    if (totalLines > 2e3)
+      complexity = "very-complex";
+    return {
+      totalLines,
+      totalCharacters,
+      fileCount: nodes.length,
+      jsxElements,
+      styleProperties,
+      handlers,
+      animations,
+      collisions: 0,
+      // Set externally
+      complexity
+    };
+  }
+
+  // src/design-system/extractDesignTokens.ts
+  function extractDesignTokens(nodes) {
+    return {
+      palette: extractPalette(nodes),
+      typography: extractTypography(nodes),
+      spacing: extractSpacing(nodes),
+      shadows: extractShadows(nodes)
+    };
+  }
+  function extractPalette(nodes) {
+    return {};
+  }
+  function extractTypography(nodes) {
+    return {};
+  }
+  function extractSpacing(nodes) {
+    return {};
+  }
+  function extractShadows(nodes) {
+    return {};
+  }
+
+  // src/vibecode-guard/generateLockfile.ts
+  function generateLockfile(projectName, fileId, tokens) {
+    const lockfile = {
+      version: "2.0.0",
+      figmaFile: projectName,
+      figmaFileId: fileId,
+      extractedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      designTokens: tokens,
+      componentLibrary: {},
+      // Would be populated by analyzing component sets
+      constraints: {
+        maxWidth: "1200px",
+        gridColumns: 12,
+        gutterWidth: "24px"
+      }
+    };
+    return JSON.stringify(lockfile, null, 2);
+  }
+
+  // src/vibecode-guard/generatePromptContext.ts
+  function generatePromptContext(tokens) {
+    return `
+DESIGN SYSTEM (DO NOT DEVIATE):
+- Primary: ${tokens.colors.primary[500]} (500), ${tokens.colors.primary[600]} (600)
+- Secondary: ${tokens.colors.secondary[500]} (500)
+- Font: ${tokens.typography.fontFamilies.primary}
+- Spacing: ${tokens.spacing.unit}px base unit
+- Radius: ${tokens.borderRadius.scale.join(", ")}
+
+When building components for this project, use EXACTLY these values.
+Do not approximate, round, or substitute. Reference the .figmake.lock file.
+`;
+  }
+
+  // src/plugin/code.ts
+  var currentConfig = DEFAULT_CONFIG;
+  figma.showUI(__html__, { width: 600, height: 800 });
+  figma.clientStorage.getAsync("plugin_settings").then((settings) => {
+    if (settings) {
+      currentConfig = { ...DEFAULT_CONFIG, ...settings };
+    }
+    figma.ui.postMessage({ type: "settings-loaded", config: currentConfig });
+  });
+  figma.ui.onmessage = async (msg) => {
+    if (msg.type === "save-settings") {
+      currentConfig = msg.config;
+      figma.clientStorage.setAsync("plugin_settings", currentConfig);
+      updateSelection();
+    } else if (msg.type === "validate-node") {
+      const selection = figma.currentPage.selection;
+      if (selection.length > 0) {
+        const node = selection[0];
+        const bytes = await node.exportAsync({ format: "PNG", constraint: { type: "SCALE", value: 1 } });
+        figma.ui.postMessage({ type: "validation-image", bytes, width: node.width, height: node.height });
+      }
+    } else if (msg.type === "generate-guard") {
+      const tokens = extractDesignTokens([figma.root]);
+      const lockfile = generateLockfile(figma.root.name, figma.fileKey || "local", tokens);
+      const promptContext = generatePromptContext(tokens);
+      figma.ui.postMessage({ type: "guard-data", lockfile, promptContext, tokens });
+    }
+  };
+  function extractProperties(node) {
+    const props = {
+      id: node.id,
+      name: node.name,
+      type: node.type
+    };
+    if ("reactions" in node) {
+      props.reactions = clone(node.reactions);
+      props.animations = extractAnimations(node, figma.getNodeById);
+    }
+    if ("x" in node)
+      props.x = node.x;
+    if ("y" in node)
+      props.y = node.y;
+    if ("width" in node)
+      props.width = node.width;
+    if ("height" in node)
+      props.height = node.height;
+    if ("rotation" in node)
+      props.rotation = node.rotation;
+    if ("visible" in node)
+      props.visible = node.visible;
+    if ("opacity" in node)
+      props.opacity = node.opacity;
+    if ("blendMode" in node)
+      props.blendMode = node.blendMode;
+    if ("constraints" in node)
+      props.constraints = node.constraints;
+    if ("cornerRadius" in node)
+      props.cornerRadius = node.cornerRadius === figma.mixed ? "mixed" : node.cornerRadius;
+    if ("topLeftRadius" in node)
+      props.topLeftRadius = node.topLeftRadius;
+    if ("topRightRadius" in node)
+      props.topRightRadius = node.topRightRadius;
+    if ("bottomLeftRadius" in node)
+      props.bottomLeftRadius = node.bottomLeftRadius;
+    if ("bottomRightRadius" in node)
+      props.bottomRightRadius = node.bottomRightRadius;
+    if ("layoutMode" in node)
+      props.layoutMode = node.layoutMode;
+    if ("primaryAxisSizingMode" in node)
+      props.primaryAxisSizingMode = node.primaryAxisSizingMode;
+    if ("counterAxisSizingMode" in node)
+      props.counterAxisSizingMode = node.counterAxisSizingMode;
+    if ("primaryAxisAlignItems" in node)
+      props.primaryAxisAlignItems = node.primaryAxisAlignItems;
+    if ("counterAxisAlignItems" in node)
+      props.counterAxisAlignItems = node.counterAxisAlignItems;
+    if ("paddingLeft" in node)
+      props.paddingLeft = node.paddingLeft;
+    if ("paddingRight" in node)
+      props.paddingRight = node.paddingRight;
+    if ("paddingTop" in node)
+      props.paddingTop = node.paddingTop;
+    if ("paddingBottom" in node)
+      props.paddingBottom = node.paddingBottom;
+    if ("itemSpacing" in node)
+      props.itemSpacing = node.itemSpacing;
+    if ("fills" in node)
+      props.fills = clone(node.fills);
+    if ("strokes" in node)
+      props.strokes = clone(node.strokes);
+    if ("strokeWeight" in node)
+      props.strokeWeight = node.strokeWeight;
+    if ("strokeAlign" in node)
+      props.strokeAlign = node.strokeAlign;
+    if ("strokeCap" in node)
+      props.strokeCap = node.strokeCap;
+    if ("strokeJoin" in node)
+      props.strokeJoin = node.strokeJoin;
+    if ("dashPattern" in node)
+      props.dashPattern = node.dashPattern;
+    if ("effects" in node)
+      props.effects = clone(node.effects);
+    if (node.type === "TEXT") {
+      const textNode = node;
+      props.characters = textNode.characters;
+      props.fontName = clone(textNode.fontName);
+      props.fontSize = textNode.fontSize === figma.mixed ? "mixed" : textNode.fontSize;
+      props.letterSpacing = clone(textNode.letterSpacing);
+      props.lineHeight = clone(textNode.lineHeight);
+      props.textAlignHorizontal = textNode.textAlignHorizontal;
+      props.textAlignVertical = textNode.textAlignVertical;
+      props.textDecoration = textNode.textDecoration;
+      props.textCase = textNode.textCase;
+    }
+    if ("children" in node) {
+      props.children = node.children.map((child) => extractProperties(child));
+    }
+    props.css = figmaToCSS(node);
+    const reactResult = generateReactComponent(node, { getNodeById: figma.getNodeById, config: currentConfig });
+    props.reactCode = reactResult.code;
+    props.fileCount = Object.keys(reactResult.files).length;
+    props.generatedFiles = reactResult.files;
+    return props;
+  }
+  function clone(val) {
+    if (val === figma.mixed)
+      return "mixed";
+    const type = typeof val;
+    if (val === null)
+      return null;
+    if (type === "undefined" || type === "number" || type === "string" || type === "boolean")
+      return val;
+    if (type === "object") {
+      if (val instanceof Array)
+        return val.map((x) => clone(x));
+      if (val instanceof Uint8Array)
+        return Array.from(val);
+      const ret = {};
+      for (const key in val)
+        ret[key] = clone(val[key]);
+      return ret;
+    }
+    return val;
+  }
+  function updateSelection() {
+    const selection = figma.currentPage.selection;
+    const collisions = detectCollisions(selection);
+    const data = selection.map((node) => extractProperties(node));
+    const metrics = calculateMetrics(data);
+    metrics.collisions = collisions.length;
+    figma.ui.postMessage({ type: "update-properties", data, metrics, collisions });
+  }
+  figma.on("selectionchange", updateSelection);
+  updateSelection();
+})();