@dannote/figma-use 0.3.0 → 0.5.0

package/dist/cli/index.js

@@ -18920,6 +18920,92 @@ var require_react_reconciler = __commonJS((exports, module) => {
   }
 });
 
+// packages/cli/src/render/vars.ts
+var exports_vars = {};
+__export(exports_vars, {
+  resolveVariable: () => resolveVariable,
+  loadVariablesIntoRegistry: () => loadVariablesIntoRegistry,
+  isVariable: () => isVariable,
+  isRegistryLoaded: () => isRegistryLoaded,
+  getRegistrySize: () => getRegistrySize,
+  figmaVar: () => figmaVar,
+  defineVars: () => defineVars
+});
+function isVariable(value) {
+  return typeof value === "object" && value !== null && VAR_SYMBOL in value;
+}
+function loadVariablesIntoRegistry(variables) {
+  variableRegistry.clear();
+  for (const v3 of variables) {
+    const match = v3.id.match(/VariableID:(\d+):(\d+)/);
+    if (match) {
+      variableRegistry.set(v3.name, {
+        id: v3.id,
+        sessionID: parseInt(match[1], 10),
+        localID: parseInt(match[2], 10)
+      });
+    }
+  }
+}
+function resolveVariable(variable) {
+  if (variable._resolved) {
+    return variable._resolved;
+  }
+  const idMatch = variable.name.match(/^(?:VariableID:)?(\d+):(\d+)$/);
+  if (idMatch) {
+    const resolved2 = {
+      id: `VariableID:${idMatch[1]}:${idMatch[2]}`,
+      sessionID: parseInt(idMatch[1], 10),
+      localID: parseInt(idMatch[2], 10)
+    };
+    variable._resolved = resolved2;
+    return resolved2;
+  }
+  const resolved = variableRegistry.get(variable.name);
+  if (!resolved) {
+    const available = Array.from(variableRegistry.keys()).slice(0, 5).join(", ");
+    throw new Error(`Variable "${variable.name}" not found. ` + `Available: ${available}${variableRegistry.size > 5 ? "..." : ""}. ` + `Make sure variables are loaded before render.`);
+  }
+  variable._resolved = resolved;
+  return resolved;
+}
+function isRegistryLoaded() {
+  return variableRegistry.size > 0;
+}
+function getRegistrySize() {
+  return variableRegistry.size;
+}
+function defineVars(vars) {
+  const result = {};
+  for (const [key, def] of Object.entries(vars)) {
+    if (typeof def === "string") {
+      result[key] = {
+        [VAR_SYMBOL]: true,
+        name: def
+      };
+    } else {
+      result[key] = {
+        [VAR_SYMBOL]: true,
+        name: def.name,
+        value: def.value
+      };
+    }
+  }
+  return result;
+}
+function figmaVar(name, value) {
+  return {
+    [VAR_SYMBOL]: true,
+    name,
+    value
+  };
+}
+var VAR_SYMBOL, variableRegistry;
+var init_vars = __esm(() => {
+  VAR_SYMBOL = Symbol.for("figma.variable");
+  variableRegistry = new Map;
+});
+
 // node_modules/esbuild/lib/main.js
 var require_main = __commonJS((exports, module) => {
   var __dirname = "/Users/dannote/Development/figma-use/node_modules/esbuild/lib", __filename = "/Users/dannote/Development/figma-use/node_modules/esbuild/lib/main.js";
@@ -24126,7 +24212,7 @@ var profile_default = defineCommand({
 });
 // packages/cli/src/commands/render.ts
 init_format();
-var React2 = __toESM(require_react(), 1);
+var React3 = __toESM(require_react(), 1);
 import { resolve as resolve3 } from "path";
 import { existsSync as existsSync2, writeFileSync as writeFileSync2, unlinkSync } from "fs";
 import { tmpdir } from "os";
@@ -27547,6 +27633,89 @@ function parseColor(color) {
 }
 
 // packages/cli/src/render/reconciler.ts
+init_vars();
+
+// packages/cli/src/render/components.tsx
+init_vars();
+var React = __toESM(require_react(), 1);
+var componentRegistry = new Map;
+function getComponentRegistry() {
+  return componentRegistry;
+}
+var c6 = (type) => (props) => React.createElement(type, props);
+var Frame = c6("frame");
+var Rectangle = c6("rectangle");
+var Ellipse = c6("ellipse");
+var Text = c6("text");
+var Line = c6("line");
+var Star = c6("star");
+var Polygon = c6("polygon");
+var Vector = c6("vector");
+var Component = c6("component");
+var Instance = c6("instance");
+var Group = c6("group");
+var Page = c6("page");
+var INTRINSIC_ELEMENTS = [
+  "Frame",
+  "Rectangle",
+  "Ellipse",
+  "Text",
+  "Line",
+  "Star",
+  "Polygon",
+  "Vector",
+  "Component",
+  "Instance",
+  "Group",
+  "Page",
+  "View"
+];
+
+// packages/cli/src/render/component-set.tsx
+var React2 = __toESM(require_react(), 1);
+var componentSetRegistry = new Map;
+function getComponentSetRegistry() {
+  return componentSetRegistry;
+}
+function generateVariantCombinations(variants) {
+  const keys = Object.keys(variants);
+  if (keys.length === 0)
+    return [{}];
+  const result = [];
+  function combine(index, current) {
+    if (index === keys.length) {
+      result.push(current);
+      return;
+    }
+    const key = keys[index];
+    for (const value of variants[key]) {
+      combine(index + 1, { ...current, [key]: value });
+    }
+  }
+  combine(0, {});
+  return result;
+}
+function buildVariantName(props) {
+  return Object.entries(props).map(([k6, v3]) => `${k6}=${v3}`).join(", ");
+}
+function buildStateGroupPropertyValueOrders(variants) {
+  return Object.entries(variants).map(([property, values]) => ({
+    property,
+    values: [...values]
+  }));
+}
+
+// packages/cli/src/render/reconciler.ts
+var renderedComponents = new Map;
+var renderedComponentSets = new Map;
+var renderedComponentSetVariants = new Map;
+var pendingComponentSetInstances = [];
+function getPendingComponentSetInstances() {
+  return [...pendingComponentSetInstances];
+}
+function clearPendingComponentSetInstances() {
+  pendingComponentSetInstances.length = 0;
+}
 function styleToNodeChange(type, props, localID, sessionID, parentGUID, position, textContent) {
   const style = props.style || {};
   const name = props.name || type;
@@ -27559,10 +27728,16 @@ function styleToNodeChange(type, props, localID, sessionID, parentGUID, position
     visible: true,
     opacity: typeof style.opacity === "number" ? style.opacity : 1
   };
-  const width = style.width ?? props.width ?? (type === "TEXT" ? undefined : 100);
-  const height = style.height ?? props.height ?? (type === "TEXT" ? undefined : 100);
+  const width = style.width ?? props.width;
+  const height = style.height ?? props.height;
   if (width !== undefined && height !== undefined) {
     nodeChange.size = { x: Number(width), y: Number(height) };
+  } else if (width !== undefined) {
+    nodeChange.size = { x: Number(width), y: 1 };
+  } else if (height !== undefined) {
+    nodeChange.size = { x: 1, y: Number(height) };
+  } else if (type !== "TEXT") {
+    nodeChange.size = { x: 1, y: 1 };
   }
   const x3 = Number(style.x ?? props.x ?? 0);
   const y5 = Number(style.y ?? props.y ?? 0);
@@ -27575,22 +27750,52 @@ function styleToNodeChange(type, props, localID, sessionID, parentGUID, position
     m12: y5
   };
   if (style.backgroundColor) {
-    const color = parseColor(style.backgroundColor);
-    nodeChange.fillPaints = [{
-      type: "SOLID",
-      color: { r: color.r, g: color.g, b: color.b, a: color.a },
-      opacity: color.a,
-      visible: true
-    }];
+    const bgColor = style.backgroundColor;
+    if (isVariable(bgColor)) {
+      const resolved = resolveVariable(bgColor);
+      const fallback = bgColor.value ? parseColor(bgColor.value) : { r: 0, g: 0, b: 0, a: 1 };
+      nodeChange.fillPaints = [{
+        type: "SOLID",
+        color: { r: fallback.r, g: fallback.g, b: fallback.b, a: fallback.a },
+        opacity: 1,
+        visible: true,
+        colorVariableBinding: {
+          variableID: { sessionID: resolved.sessionID, localID: resolved.localID }
+        }
+      }];
+    } else {
+      const color = parseColor(bgColor);
+      nodeChange.fillPaints = [{
+        type: "SOLID",
+        color: { r: color.r, g: color.g, b: color.b, a: color.a },
+        opacity: color.a,
+        visible: true
+      }];
+    }
   }
   if (style.borderColor) {
-    const color = parseColor(style.borderColor);
-    nodeChange.strokePaints = [{
-      type: "SOLID",
-      color: { r: color.r, g: color.g, b: color.b, a: color.a },
-      opacity: color.a,
-      visible: true
-    }];
+    const borderColor = style.borderColor;
+    if (isVariable(borderColor)) {
+      const resolved = resolveVariable(borderColor);
+      const fallback = borderColor.value ? parseColor(borderColor.value) : { r: 0, g: 0, b: 0, a: 1 };
+      nodeChange.strokePaints = [{
+        type: "SOLID",
+        color: { r: fallback.r, g: fallback.g, b: fallback.b, a: fallback.a },
+        opacity: 1,
+        visible: true,
+        colorVariableBinding: {
+          variableID: { sessionID: resolved.sessionID, localID: resolved.localID }
+        }
+      }];
+    } else {
+      const color = parseColor(borderColor);
+      nodeChange.strokePaints = [{
+        type: "SOLID",
+        color: { r: color.r, g: color.g, b: color.b, a: color.a },
+        opacity: color.a,
+        visible: true
+      }];
+    }
     nodeChange.strokeWeight = Number(style.borderWidth ?? 1);
   }
   if (style.borderRadius !== undefined) {
@@ -27614,6 +27819,11 @@ function styleToNodeChange(type, props, localID, sessionID, parentGUID, position
   }
   if (style.flexDirection) {
     nodeChange.stackMode = style.flexDirection === "row" ? "HORIZONTAL" : "VERTICAL";
+    const isRow = style.flexDirection === "row";
+    const primarySize = isRow ? width : height;
+    const counterSize = isRow ? height : width;
+    nodeChange.stackPrimarySizing = primarySize !== undefined ? "FIXED" : "RESIZE_TO_FIT";
+    nodeChange.stackCounterSizing = counterSize !== undefined ? "FIXED" : "RESIZE_TO_FIT";
   }
   if (style.gap !== undefined) {
     nodeChange.stackSpacing = Number(style.gap);
@@ -27631,49 +27841,89 @@ function styleToNodeChange(type, props, localID, sessionID, parentGUID, position
   if (pb !== undefined)
     nodeChange.stackPaddingBottom = Number(pb);
   if (style.justifyContent) {
-    const map = {
+    const validValues = {
       "flex-start": "MIN",
       center: "CENTER",
       "flex-end": "MAX",
-      "space-between": "SPACE_BETWEEN"
+      "space-evenly": "SPACE_EVENLY"
     };
-    nodeChange.stackJustify = map[style.justifyContent] || "MIN";
+    const mapped = validValues[style.justifyContent];
+    if (mapped) {
+      nodeChange.stackPrimaryAlignItems = mapped;
+    } else {
+      consola2.warn(`justifyContent: "${style.justifyContent}" not supported, using "flex-start"`);
+      nodeChange.stackPrimaryAlignItems = "MIN";
+    }
   }
   if (style.alignItems) {
-    const map = {
+    const validValues = {
       "flex-start": "MIN",
       center: "CENTER",
       "flex-end": "MAX",
       stretch: "STRETCH"
     };
-    nodeChange.stackCounterAlign = map[style.alignItems] || "MIN";
+    const mapped = validValues[style.alignItems];
+    if (mapped) {
+      nodeChange.stackCounterAlignItems = mapped;
+    } else {
+      consola2.warn(`alignItems: "${style.alignItems}" not supported, using "flex-start"`);
+      nodeChange.stackCounterAlignItems = "MIN";
+    }
   }
   if (type.toLowerCase() === "text" && textContent) {
     const nc = nodeChange;
     nc.textData = { characters: textContent };
+    nc.textAutoResize = "WIDTH_AND_HEIGHT";
+    nc.textAlignVertical = "TOP";
     if (style.fontSize)
       nc.fontSize = Number(style.fontSize);
-    if (style.fontFamily || style.fontWeight) {
-      const family = style.fontFamily || "Inter";
-      const fontStyle = mapFontWeight(style.fontWeight);
-      nc.fontName = {
-        family,
-        style: fontStyle,
-        postscript: `${family}-${fontStyle}`.replace(/\s+/g, "")
-      };
-    }
+    nc.lineHeight = { value: 100, units: "PERCENT" };
+    const family = style.fontFamily || "Inter";
+    const fontStyle = mapFontWeight(style.fontWeight);
+    nc.fontName = {
+      family,
+      style: fontStyle,
+      postscript: `${family}-${fontStyle}`.replace(/\s+/g, "")
+    };
     if (style.textAlign) {
       const map = { left: "LEFT", center: "CENTER", right: "RIGHT" };
       nc.textAlignHorizontal = map[style.textAlign] || "LEFT";
     }
     if (style.color) {
-      const color = parseColor(style.color);
-      nodeChange.fillPaints = [{
-        type: "SOLID",
-        color: { r: color.r, g: color.g, b: color.b, a: color.a },
-        opacity: color.a,
-        visible: true
-      }];
+      const textColor = style.color;
+      if (isVariable(textColor)) {
+        const resolved = resolveVariable(textColor);
+        const fallback = textColor.value ? parseColor(textColor.value) : { r: 0, g: 0, b: 0, a: 1 };
+        nodeChange.fillPaints = [{
+          type: "SOLID",
+          color: { r: fallback.r, g: fallback.g, b: fallback.b, a: fallback.a },
+          opacity: 1,
+          visible: true,
+          colorVariableBinding: {
+            variableID: { sessionID: resolved.sessionID, localID: resolved.localID }
+          }
+        }];
+      } else {
+        const color = parseColor(textColor);
+        nodeChange.fillPaints = [{
+          type: "SOLID",
+          color: { r: color.r, g: color.g, b: color.b, a: color.a },
+          opacity: color.a,
+          visible: true
+        }];
+      }
+    }
+  }
+  if (type.toLowerCase() === "instance" && props.componentId) {
+    const match = String(props.componentId).match(/(\d+):(\d+)/);
+    if (match) {
+      const nc = nodeChange;
+      nc.symbolData = {
+        symbolID: {
+          sessionID: parseInt(match[1], 10),
+          localID: parseInt(match[2], 10)
+        }
+      };
     }
   }
   return nodeChange;
@@ -27688,7 +27938,7 @@ function mapType(type) {
     star: "STAR",
     polygon: "REGULAR_POLYGON",
     vector: "VECTOR",
-    component: "COMPONENT",
+    component: "SYMBOL",
     instance: "INSTANCE",
     group: "GROUP",
     page: "CANVAS"
@@ -27713,13 +27963,173 @@ function mapFontWeight(weight) {
   };
   return map[weight] || "Regular";
 }
-function collectNodeChanges(instance, sessionID, parentGUID, position, result) {
+function collectNodeChanges(instance, sessionID, parentGUID, position, result, container) {
+  if (instance.type === "__component_instance__") {
+    const sym = instance.props.__componentSymbol;
+    const name = instance.props.__componentName;
+    const registry = getComponentRegistry();
+    const def = registry.get(sym);
+    if (!def) {
+      consola2.error(`Component "${name}" not found in registry`);
+      return;
+    }
+    let componentGUID = renderedComponents.get(sym);
+    if (!componentGUID) {
+      const componentLocalID = container.localIDCounter++;
+      componentGUID = { sessionID, localID: componentLocalID };
+      renderedComponents.set(sym, componentGUID);
+      const componentResult = renderToNodeChanges(def.element, {
+        sessionID,
+        parentGUID,
+        startLocalID: container.localIDCounter
+      });
+      container.localIDCounter = componentResult.nextLocalID;
+      if (componentResult.nodeChanges.length > 0) {
+        const rootChange = componentResult.nodeChanges[0];
+        const originalRootGUID = { ...rootChange.guid };
+        rootChange.guid = componentGUID;
+        rootChange.type = "SYMBOL";
+        rootChange.name = name;
+        rootChange.parentIndex = { guid: parentGUID, position };
+        for (let i3 = 1;i3 < componentResult.nodeChanges.length; i3++) {
+          const child = componentResult.nodeChanges[i3];
+          if (child.parentIndex?.guid.localID === originalRootGUID.localID && child.parentIndex?.guid.sessionID === originalRootGUID.sessionID) {
+            child.parentIndex.guid = componentGUID;
+          }
+        }
+        const style = instance.props.style || {};
+        if (style.x !== undefined || style.y !== undefined) {
+          const x3 = Number(style.x ?? 0);
+          const y5 = Number(style.y ?? 0);
+          rootChange.transform = { m00: 1, m01: 0, m02: x3, m10: 0, m11: 1, m12: y5 };
+        }
+        result.push(...componentResult.nodeChanges);
+      }
+    } else {
+      const instanceLocalID = container.localIDCounter++;
+      const style = instance.props.style || {};
+      const x3 = Number(style.x ?? 0);
+      const y5 = Number(style.y ?? 0);
+      const instanceChange = {
+        guid: { sessionID, localID: instanceLocalID },
+        phase: "CREATED",
+        parentIndex: { guid: parentGUID, position },
+        type: "INSTANCE",
+        name,
+        visible: true,
+        opacity: 1,
+        transform: { m00: 1, m01: 0, m02: x3, m10: 0, m11: 1, m12: y5 }
+      };
+      const nc = instanceChange;
+      nc.symbolData = { symbolID: componentGUID };
+      result.push(instanceChange);
+    }
+    return;
+  }
+  if (instance.type === "__component_set_instance__") {
+    const sym = instance.props.__componentSetSymbol;
+    const name = instance.props.__componentSetName;
+    const variantProps = instance.props.__variantProps || {};
+    const csRegistry = getComponentSetRegistry();
+    const csDef = csRegistry.get(sym);
+    if (!csDef) {
+      consola2.error(`ComponentSet "${name}" not found in registry`);
+      return;
+    }
+    let componentSetGUID = renderedComponentSets.get(sym);
+    if (!componentSetGUID) {
+      const componentSetLocalID = container.localIDCounter++;
+      componentSetGUID = { sessionID, localID: componentSetLocalID };
+      renderedComponentSets.set(sym, componentSetGUID);
+      const variants = csDef.variants;
+      const combinations = generateVariantCombinations(variants);
+      const variantComponentIds = new Map;
+      const setChange = {
+        guid: componentSetGUID,
+        phase: "CREATED",
+        parentIndex: { guid: parentGUID, position },
+        type: "FRAME",
+        name,
+        visible: true,
+        opacity: 1,
+        size: { x: 1, y: 1 }
+      };
+      const setNc = setChange;
+      setNc.isStateGroup = true;
+      setNc.stateGroupPropertyValueOrders = buildStateGroupPropertyValueOrders(variants);
+      setNc.stackMode = "HORIZONTAL";
+      setNc.stackSpacing = 20;
+      setNc.stackPrimarySizing = "RESIZE_TO_FIT";
+      setNc.stackCounterSizing = "RESIZE_TO_FIT";
+      result.push(setChange);
+      combinations.forEach((combo, i3) => {
+        const variantName = buildVariantName(combo);
+        const variantLocalID = container.localIDCounter++;
+        const variantGUID = { sessionID, localID: variantLocalID };
+        variantComponentIds.set(variantName, variantGUID);
+        const variantElement = csDef.render(combo);
+        const variantResult = renderToNodeChanges(variantElement, {
+          sessionID,
+          parentGUID: componentSetGUID,
+          startLocalID: container.localIDCounter
+        });
+        container.localIDCounter = variantResult.nextLocalID;
+        if (variantResult.nodeChanges.length > 0) {
+          const rootChange = variantResult.nodeChanges[0];
+          const originalRootGUID = { ...rootChange.guid };
+          rootChange.guid = variantGUID;
+          rootChange.type = "SYMBOL";
+          rootChange.name = variantName;
+          rootChange.parentIndex = {
+            guid: componentSetGUID,
+            position: String.fromCharCode(33 + i3)
+          };
+          for (let j = 1;j < variantResult.nodeChanges.length; j++) {
+            const child = variantResult.nodeChanges[j];
+            if (child.parentIndex?.guid.localID === originalRootGUID.localID && child.parentIndex?.guid.sessionID === originalRootGUID.sessionID) {
+              child.parentIndex.guid = variantGUID;
+            }
+          }
+          result.push(...variantResult.nodeChanges);
+        }
+      });
+      renderedComponentSetVariants.set(sym, variantComponentIds);
+      const requestedVariantName = buildVariantName({
+        ...getDefaultVariants(variants),
+        ...variantProps
+      });
+      const style = instance.props.style || {};
+      pendingComponentSetInstances.push({
+        componentSetName: name,
+        variantName: requestedVariantName,
+        parentGUID,
+        position: String.fromCharCode(34 + combinations.length),
+        x: Number(style.x ?? 0),
+        y: Number(style.y ?? 0)
+      });
+    } else {
+      const requestedVariantName = buildVariantName({
+        ...getDefaultVariants(csDef.variants),
+        ...variantProps
+      });
+      const style = instance.props.style || {};
+      pendingComponentSetInstances.push({
+        componentSetName: name,
+        variantName: requestedVariantName,
+        parentGUID,
+        position,
+        x: Number(style.x ?? 0),
+        y: Number(style.y ?? 0)
+      });
+    }
+    return;
+  }
   const nodeChange = styleToNodeChange(instance.type, instance.props, instance.localID, sessionID, parentGUID, position, instance.textContent);
   result.push(nodeChange);
   const thisGUID = { sessionID, localID: instance.localID };
   instance.children.forEach((child, i3) => {
     const childPosition = String.fromCharCode(33 + i3 % 90);
-    collectNodeChanges(child, sessionID, thisGUID, childPosition, result);
+    collectNodeChanges(child, sessionID, thisGUID, childPosition, result, container);
   });
 }
 var hostConfig = {
@@ -27858,43 +28268,28 @@ function renderToNodeChanges(element, options) {
   const nodeChanges = [];
   container.children.forEach((child, i3) => {
     const position = String.fromCharCode(33 + i3 % 90);
-    collectNodeChanges(child, options.sessionID, options.parentGUID, position, nodeChanges);
+    collectNodeChanges(child, options.sessionID, options.parentGUID, position, nodeChanges, container);
   });
   return {
     nodeChanges,
     nextLocalID: container.localIDCounter
   };
 }
-// packages/cli/src/render/components.tsx
-var React = __toESM(require_react(), 1);
-var c6 = (type) => (props) => React.createElement(type, props);
-var Frame = c6("frame");
-var Rectangle = c6("rectangle");
-var Ellipse = c6("ellipse");
-var Text = c6("text");
-var Line = c6("line");
-var Star = c6("star");
-var Polygon = c6("polygon");
-var Vector = c6("vector");
-var Component = c6("component");
-var Instance = c6("instance");
-var Group = c6("group");
-var Page = c6("page");
-var INTRINSIC_ELEMENTS = [
-  "Frame",
-  "Rectangle",
-  "Ellipse",
-  "Text",
-  "Line",
-  "Star",
-  "Polygon",
-  "Vector",
-  "Component",
-  "Instance",
-  "Group",
-  "Page",
-  "View"
-];
+function getDefaultVariants(variants) {
+  const defaults = {};
+  for (const [key, values] of Object.entries(variants)) {
+    if (values.length > 0) {
+      defaults[key] = values[0];
+    }
+  }
+  return defaults;
+}
+function resetRenderedComponents() {
+  renderedComponents.clear();
+  renderedComponentSets.clear();
+  renderedComponentSetVariants.clear();
+  pendingComponentSetInstances.length = 0;
+}
 // packages/cli/src/commands/render.ts
 var import_esbuild = __toESM(require_main(), 1);
 var PROXY_URL2 = process.env.FIGMA_PROXY_URL || "http://localhost:38451";
@@ -27921,8 +28316,27 @@ function findNodeModulesDir() {
 var JSX_DEFINE = Object.fromEntries(INTRINSIC_ELEMENTS.map((name) => [name, JSON.stringify(name.toLowerCase())]));
 function transformJsxSnippet(code) {
   const snippet = code.trim();
-  const isModule = snippet.includes("import ") || snippet.includes("export ");
-  const fullCode = isModule ? snippet : `export default (React) => () => (${snippet});`;
+  if (snippet.includes("import ") || snippet.includes("export ")) {
+    return import_esbuild.transformSync(snippet, {
+      loader: "tsx",
+      jsx: "transform",
+      jsxFactory: "React.createElement",
+      jsxFragment: "React.Fragment",
+      define: JSX_DEFINE
+    }).code;
+  }
+  const jsxStart = snippet.search(/<[A-Z]/);
+  const hasSetupCode = jsxStart > 0;
+  const usesDefineVars = snippet.includes("defineVars");
+  let fullCode;
+  if (hasSetupCode) {
+    const setupPart = snippet.slice(0, jsxStart).trim();
+    const jsxPart = snippet.slice(jsxStart);
+    const params = usesDefineVars ? "(React, { defineVars })" : "(React)";
+    fullCode = `export default ${params} => { ${setupPart}; return () => (${jsxPart}); };`;
+  } else {
+    fullCode = `export default (React) => () => (${snippet});`;
+  }
   const result = import_esbuild.transformSync(fullCode, {
     loader: "tsx",
     jsx: "transform",
@@ -27932,11 +28346,63 @@ function transformJsxSnippet(code) {
   });
   return result.code;
 }
+var HELP = `
+Render JSX to Figma (~100x faster than plugin API).
+
+EXAMPLES
+
+  # From stdin
+  echo '<Frame style={{padding: 24, backgroundColor: "#3B82F6"}}>
+    <Text style={{fontSize: 18, color: "#FFF"}}>Hello</Text>
+  </Frame>' | figma-use render --stdin
+
+  # From file
+  figma-use render ./Card.figma.tsx
+  figma-use render ./Card.figma.tsx --props '{"title": "Hello"}'
+
+COMPONENTS
+
+  # defineComponent \u2014 first usage creates Component, rest create Instances
+  const Card = defineComponent('Card', <Frame>...</Frame>)
+  <Card /><Card /><Card />
+
+  # defineComponentSet \u2014 creates Figma ComponentSet with all variants
+  const Button = defineComponentSet('Button', {
+    variant: ['Primary', 'Secondary'] as const,
+    size: ['Small', 'Large'] as const,
+  }, ({ variant, size }) => <Frame>...</Frame>)
+  <Button variant="Primary" size="Large" />
+
+VARIABLE BINDINGS
+
+  const colors = defineVars({
+    primary: { name: 'Colors/Blue/500', value: '#3B82F6' },
+  })
+  <Frame style={{ backgroundColor: colors.primary }} />
+
+ELEMENTS
+
+  Frame, Rectangle, Ellipse, Text, Line, Star, Polygon, Vector, Group
+
+STYLE PROPS
+
+  Layout:     flexDirection, justifyContent, alignItems, gap, padding
+  Size:       width, height, x, y  
+  Appearance: backgroundColor, borderColor, borderWidth, borderRadius, opacity
+  Text:       fontSize, fontFamily, fontWeight, color, textAlign
+
+SETUP
+
+  1. Start Figma: figma --remote-debugging-port=9222
+  2. Start proxy: figma-use proxy
+  3. Open plugin: Plugins \u2192 Development \u2192 Figma Use
+`;
 var render_default = defineCommand({
   meta: {
-    description: "Render React component to Figma via WebSocket"
+    description: "Render JSX to Figma. Use --examples for API reference."
   },
   args: {
+    examples: { type: "boolean", description: "Show examples and API reference" },
     file: { type: "positional", description: "TSX/JSX file path", required: false },
     stdin: { type: "boolean", description: "Read TSX from stdin" },
     props: { type: "string", description: "JSON props to pass to component" },
@@ -27946,6 +28412,10 @@ var render_default = defineCommand({
     dryRun: { type: "boolean", description: "Output NodeChanges without sending to Figma" }
   },
   async run({ args }) {
+    if (args.examples) {
+      console.log(HELP);
+      return;
+    }
     let filePath;
     let tempFile = null;
     if (args.stdin) {
@@ -27973,8 +28443,9 @@ var render_default = defineCommand({
       const module = await import(filePath);
       const exportName = args.export || "default";
       let Component2 = module[exportName];
-      if (typeof Component2 === "function" && Component2.length === 1 && args.stdin) {
-        Component2 = Component2(React2);
+      if (typeof Component2 === "function" && (Component2.length === 1 || Component2.length === 2) && args.stdin) {
+        const { defineVars: defineVars2 } = await Promise.resolve().then(() => (init_vars(), exports_vars));
+        Component2 = Component2(React3, { defineVars: defineVars2 });
       }
       if (!Component2) {
         console.error(fail(`Export "${exportName}" not found`));
@@ -27992,19 +28463,26 @@ var render_default = defineCommand({
       }
       const parentGUID = args.parent ? parseGUID(args.parent) : await getParentGUID();
       const sessionID = parentGUID.sessionID || Date.now() % 1e6;
-      const sendNodeChanges = async (changes) => {
+      const sendNodeChanges = async (changes, pendingInstances2) => {
         const response = await fetch(`${PROXY_URL2}/render`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ fileKey, nodeChanges: changes })
+          body: JSON.stringify({ fileKey, nodeChanges: changes, pendingComponentSetInstances: pendingInstances2 })
         });
         const data = await response.json();
         if (data.error) {
           throw new Error(data.error);
         }
       };
+      if (!isRegistryLoaded()) {
+        try {
+          const variables = await sendCommand("get-variables", { simple: true });
+          loadVariablesIntoRegistry(variables);
+        } catch {}
+      }
       const props = args.props ? JSON.parse(args.props) : {};
-      const element = React2.createElement(Component2, props);
+      const element = React3.createElement(Component2, props);
+      resetRenderedComponents();
       const result = renderToNodeChanges(element, {
         sessionID,
         parentGUID,
@@ -28017,7 +28495,9 @@ var render_default = defineCommand({
       if (!args.json) {
         console.log(`Rendering ${result.nodeChanges.length} nodes...`);
       }
-      await sendNodeChanges(result.nodeChanges);
+      const pendingInstances = getPendingComponentSetInstances();
+      clearPendingComponentSetInstances();
+      await sendNodeChanges(result.nodeChanges, pendingInstances);
       if (args.json) {
         const ids = result.nodeChanges.map((nc) => ({
           id: `${nc.guid.sessionID}:${nc.guid.localID}`,
@@ -30209,8 +30689,8 @@ var component_default2 = defineCommand({
 var main = defineCommand({
   meta: {
     name: "figma-use",
-    description: "Control Figma from the command line",
-    version: "0.2.0"
+    description: "Control Figma from the command line. Supports JSX rendering with components and variants \u2014 see `figma-use render --examples`",
+    version: "0.5.0"
   },
   subCommands: exports_commands
 });