@dannote/figma-use 0.6.0 → 0.6.2

package/packages/cli/src/render/vars.ts

@@ -1,6 +1,6 @@
 /**
  * Figma Variable Bindings (StyleX-inspired API)
- * 
+ *
  * @example
  * ```tsx
  * // tokens.figma.ts - with explicit values (recommended)
@@ -8,13 +8,13 @@
  *   primary: { name: 'Colors/Gray/50', value: '#F8FAFC' },
  *   accent: { name: 'Colors/Blue/500', value: '#3B82F6' },
  * })
- * 
+ *
  * // tokens.figma.ts - name only (value loaded from Figma)
  * export const colors = defineVars({
  *   primary: 'Colors/Gray/50',
  *   accent: 'Colors/Blue/500',
  * })
- * 
+ *
  * // Card.figma.tsx
  * <Frame style={{ backgroundColor: colors.primary }}>
  * ```
@@ -29,9 +29,10 @@ export type VarDef = string | { name: string; value: string }
 
 export interface FigmaVariable {
   [VAR_SYMBOL]: true
-  name: string              // Variable name like "Colors/Gray/50"
-  value?: string            // Fallback color value like "#F8FAFC"
-  _resolved?: {             // Filled in at render time
+  name: string // Variable name like "Colors/Gray/50"
+  value?: string // Fallback color value like "#F8FAFC"
+  _resolved?: {
+    // Filled in at render time
     id: string
     sessionID: number
     localID: number
@@ -68,7 +69,7 @@ export function loadVariablesIntoRegistry(variables: Array<{ id: string; name: s
       variableRegistry.set(v.name, {
         id: v.id,
         sessionID: parseInt(match[1], 10),
-        localID: parseInt(match[2], 10),
+        localID: parseInt(match[2], 10)
       })
     }
   }
@@ -83,30 +84,30 @@ export function resolveVariable(variable: FigmaVariable): ResolvedVariable {
   if (variable._resolved) {
     return variable._resolved
   }
-  
+
   // Check if it's an ID format (legacy support)
   const idMatch = variable.name.match(/^(?:VariableID:)?(\d+):(\d+)$/)
   if (idMatch) {
     const resolved = {
       id: `VariableID:${idMatch[1]}:${idMatch[2]}`,
       sessionID: parseInt(idMatch[1], 10),
-      localID: parseInt(idMatch[2], 10),
+      localID: parseInt(idMatch[2], 10)
     }
     variable._resolved = resolved
     return resolved
   }
-  
+
   // Lookup by name
   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.`
+        `Available: ${available}${variableRegistry.size > 5 ? '...' : ''}. ` +
+        `Make sure variables are loaded before render.`
     )
   }
-  
+
   variable._resolved = resolved
   return resolved
 }
@@ -127,7 +128,7 @@ export function getRegistrySize(): number {
 
 /**
  * Define Figma variables for use in styles
- * 
+ *
  * @example
  * ```ts
  * // With explicit fallback values (recommended)
@@ -135,12 +136,12 @@ export function getRegistrySize(): number {
  *   primary: { name: 'Colors/Gray/50', value: '#F8FAFC' },
  *   accent: { name: 'Colors/Blue/500', value: '#3B82F6' },
  * })
- * 
+ *
  * // Name only (value loaded from Figma registry)
  * export const colors = defineVars({
  *   primary: 'Colors/Gray/50',
  * })
- * 
+ *
  * // Use in components:
  * <Frame style={{ backgroundColor: colors.primary }} />
  * ```
@@ -149,28 +150,28 @@ export function defineVars<T extends Record<string, VarDef>>(
   vars: T
 ): { [K in keyof T]: FigmaVariable } {
   const result = {} as { [K in keyof T]: FigmaVariable }
-  
+
   for (const [key, def] of Object.entries(vars)) {
     if (typeof def === 'string') {
       result[key as keyof T] = {
         [VAR_SYMBOL]: true,
-        name: def,
+        name: def
       }
     } else {
       result[key as keyof T] = {
         [VAR_SYMBOL]: true,
         name: def.name,
-        value: def.value,
+        value: def.value
       }
     }
   }
-  
+
   return result
 }
 
 /**
  * Shorthand for single variable
- * 
+ *
  * @example
  * ```ts
  * const primaryColor = figmaVar('Colors/Gray/50', '#F8FAFC')
@@ -180,6 +181,6 @@ export function figmaVar(name: string, value?: string): FigmaVariable {
   return {
     [VAR_SYMBOL]: true,
     name,
-    value,
+    value
   }
 }

package/packages/plugin/dist/main.js

@@ -1372,7 +1372,11 @@
           return serializeTreeNode(node);
         }
         case "get-all-components": {
-          const { name, limit = 50, page } = args || {};
+          const {
+            name,
+            limit = 50,
+            page
+          } = args || {};
           const components = [];
           const nameLower = name == null ? void 0 : name.toLowerCase();
           const searchNode = (node) => {
@@ -1389,7 +1393,9 @@
             }
             return components.length < limit;
           };
-          const pages = page ? figma.root.children.filter((p) => p.id === page || p.name === page || p.name.includes(page)) : figma.root.children;
+          const pages = page ? figma.root.children.filter(
+            (p) => p.id === page || p.name === page || p.name.includes(page)
+          ) : figma.root.children;
           for (const pageNode of pages) {
             if (components.length >= limit) break;
             for (const child of pageNode.children) {
@@ -1450,7 +1456,10 @@
               result.effectStyles = styles.map((s) => ({
                 id: s.id,
                 name: s.name,
-                effects: s.effects.map((e) => ({ type: e.type, radius: "radius" in e ? e.radius : void 0 }))
+                effects: s.effects.map((e) => ({
+                  type: e.type,
+                  radius: "radius" in e ? e.radius : void 0
+                }))
               }));
             }
           }
@@ -1547,7 +1556,22 @@
         }
         // ==================== CREATE CONTAINERS ====================
         case "create-frame": {
-          const { x, y, width, height, name, parentId, fill, stroke, strokeWeight, radius, opacity, layoutMode, itemSpacing, padding } = args;
+          const {
+            x,
+            y,
+            width,
+            height,
+            name,
+            parentId,
+            fill,
+            stroke,
+            strokeWeight,
+            radius,
+            opacity,
+            layoutMode,
+            itemSpacing,
+            padding
+          } = args;
           const frame = figma.createFrame();
           frame.x = x;
           frame.y = y;
@@ -1655,22 +1679,26 @@
           style.name = name;
           const rgba = color ? hexToRgba(color) : { r: 0, g: 0, b: 0, a: 0.25 };
           if (type === "DROP_SHADOW" || type === "INNER_SHADOW") {
-            style.effects = [{
-              type,
-              color: rgba,
-              offset: { x: offsetX || 0, y: offsetY || 4 },
-              radius: radius || 10,
-              spread: 0,
-              visible: true,
-              blendMode: "NORMAL"
-            }];
+            style.effects = [
+              {
+                type,
+                color: rgba,
+                offset: { x: offsetX || 0, y: offsetY || 4 },
+                radius: radius || 10,
+                spread: 0,
+                visible: true,
+                blendMode: "NORMAL"
+              }
+            ];
           } else if (type === "BLUR" || type === "BACKGROUND_BLUR") {
-            style.effects = [{
-              type,
-              blurType: "NORMAL",
-              radius: radius || 10,
-              visible: true
-            }];
+            style.effects = [
+              {
+                type,
+                blurType: "NORMAL",
+                radius: radius || 10,
+                visible: true
+              }
+            ];
           }
           return { id: style.id, name: style.name, key: style.key };
         }
@@ -1690,6 +1718,7 @@
           if ("resize" in node) {
             node.resize(width, height);
           } else if ("width" in node && "height" in node) {
+            ;
             node.resizeWithoutConstraints(width, height);
           } else {
             throw new Error("Node cannot be resized");
@@ -1710,11 +1739,19 @@
           if (!node || !("strokes" in node)) throw new Error("Node not found");
           node.strokes = [{ type: "SOLID", color: hexToRgb(color) }];
           if (weight !== void 0 && "strokeWeight" in node) node.strokeWeight = weight;
-          if (align && "strokeAlign" in node) node.strokeAlign = align;
+          if (align && "strokeAlign" in node)
+            node.strokeAlign = align;
           return serializeNode(node);
         }
         case "set-corner-radius": {
-          const { id, cornerRadius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius } = args;
+          const {
+            id,
+            cornerRadius,
+            topLeftRadius,
+            topRightRadius,
+            bottomLeftRadius,
+            bottomRightRadius
+          } = args;
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || !("cornerRadius" in node)) throw new Error("Node not found");
           node.cornerRadius = cornerRadius;
@@ -1736,11 +1773,13 @@
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || !("fills" in node)) throw new Error("Node not found");
           const image = yield figma.createImageAsync(url);
-          node.fills = [{
-            type: "IMAGE",
-            imageHash: image.hash,
-            scaleMode: scaleMode || "FILL"
-          }];
+          node.fills = [
+            {
+              type: "IMAGE",
+              imageHash: image.hash,
+              scaleMode: scaleMode || "FILL"
+            }
+          ];
           return serializeNode(node);
         }
         // ==================== UPDATE PROPERTIES ====================
@@ -1771,22 +1810,26 @@
           if (!node || !("effects" in node)) throw new Error("Node not found");
           const rgba = color ? hexToRgba(color) : { r: 0, g: 0, b: 0, a: 0.25 };
           if (type === "DROP_SHADOW" || type === "INNER_SHADOW") {
-            node.effects = [{
-              type,
-              color: rgba,
-              offset: { x: offsetX != null ? offsetX : 0, y: offsetY != null ? offsetY : 4 },
-              radius: radius != null ? radius : 8,
-              spread: spread != null ? spread : 0,
-              visible: true,
-              blendMode: "NORMAL"
-            }];
+            node.effects = [
+              {
+                type,
+                color: rgba,
+                offset: { x: offsetX != null ? offsetX : 0, y: offsetY != null ? offsetY : 4 },
+                radius: radius != null ? radius : 8,
+                spread: spread != null ? spread : 0,
+                visible: true,
+                blendMode: "NORMAL"
+              }
+            ];
           } else if (type === "BLUR") {
-            node.effects = [{
-              type: "LAYER_BLUR",
-              blurType: "NORMAL",
-              radius: radius != null ? radius : 8,
-              visible: true
-            }];
+            node.effects = [
+              {
+                type: "LAYER_BLUR",
+                blurType: "NORMAL",
+                radius: radius != null ? radius : 8,
+                visible: true
+              }
+            ];
           }
           return serializeNode(node);
         }
@@ -1856,7 +1899,12 @@
           return node.children.map((c) => serializeWithDepth(c, 1));
         }
         case "find-by-name": {
-          const { name, type, exact, limit = 100 } = args;
+          const {
+            name,
+            type,
+            exact,
+            limit = 100
+          } = args;
           const results = [];
           const nameLower = name == null ? void 0 : name.toLowerCase();
           const searchNode = (node) => {
@@ -1901,7 +1949,18 @@
           return serializeNode(node);
         }
         case "set-auto-layout": {
-          const { id, mode, wrap, itemSpacing, counterSpacing, padding, primaryAlign, counterAlign, sizingH, sizingV } = args;
+          const {
+            id,
+            mode,
+            wrap,
+            itemSpacing,
+            counterSpacing,
+            padding,
+            primaryAlign,
+            counterAlign,
+            sizingH,
+            sizingV
+          } = args;
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || !("layoutMode" in node)) throw new Error("Frame not found");
           if (mode) node.layoutMode = mode;
@@ -1925,12 +1984,15 @@
           const node = yield figma.getNodeByIdAsync(id);
           if (!node) throw new Error("Node not found");
           if (horizontalSizing && "layoutSizingHorizontal" in node) {
+            ;
             node.layoutSizingHorizontal = horizontalSizing;
           }
           if (verticalSizing && "layoutSizingVertical" in node) {
+            ;
             node.layoutSizingVertical = verticalSizing;
           }
           if (positioning && "layoutPositioning" in node) {
+            ;
             node.layoutPositioning = positioning;
           }
           if (positioning === "ABSOLUTE") {
@@ -1940,7 +2002,17 @@
           return serializeNode(node);
         }
         case "set-text-properties": {
-          const { id, lineHeight, letterSpacing, textAlign, verticalAlign, autoResize, maxLines, paragraphSpacing, paragraphIndent } = args;
+          const {
+            id,
+            lineHeight,
+            letterSpacing,
+            textAlign,
+            verticalAlign,
+            autoResize,
+            maxLines,
+            paragraphSpacing,
+            paragraphIndent
+          } = args;
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || node.type !== "TEXT") throw new Error("Text node not found");
           const fontName = node.fontName;
@@ -2114,7 +2186,8 @@
           if (!propKey) throw new Error("Property not found");
           const propDef = props[propKey];
           let parsedDefault = defaultValue;
-          if (propDef.type === "BOOLEAN") parsedDefault = defaultValue === "true" || defaultValue === true;
+          if (propDef.type === "BOOLEAN")
+            parsedDefault = defaultValue === "true" || defaultValue === true;
           component.editComponentProperty(propKey, {
             name,
             defaultValue: parsedDefault,
@@ -2195,7 +2268,10 @@
               }
             }
           }
-          const bytes = yield frame.exportAsync({ format: "PNG", constraint: { type: "SCALE", value: scale || 1 } });
+          const bytes = yield frame.exportAsync({
+            format: "PNG",
+            constraint: { type: "SCALE", value: scale || 1 }
+          });
           frame.remove();
           return { data: figma.base64Encode(bytes) };
         }
@@ -2272,7 +2348,11 @@
           return { paths: node.vectorPaths };
         }
         case "path-set": {
-          const { id, path, windingRule = "NONZERO" } = args;
+          const {
+            id,
+            path,
+            windingRule = "NONZERO"
+          } = args;
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || node.type !== "VECTOR") throw new Error("Vector node not found");
           node.vectorPaths = [{ windingRule, data: path }];
@@ -2358,6 +2438,7 @@
               const parentId = `${pending.parentGUID.sessionID}:${pending.parentGUID.localID}`;
               const parent = yield figma.getNodeByIdAsync(parentId);
               if (parent && "appendChild" in parent) {
+                ;
                 parent.appendChild(instance);
               }
             }
@@ -2399,7 +2480,9 @@
         // ==================== VARIABLES ====================
         case "get-variables": {
           const { type, simple } = args;
-          const variables = yield figma.variables.getLocalVariablesAsync(type);
+          const variables = yield figma.variables.getLocalVariablesAsync(
+            type
+          );
           if (simple) {
             return variables.map((v) => ({ id: v.id, name: v.name }));
           }
@@ -2415,7 +2498,11 @@
           const { name, collectionId, type, value } = args;
           const collection = yield figma.variables.getVariableCollectionByIdAsync(collectionId);
           if (!collection) throw new Error("Collection not found");
-          const variable = figma.variables.createVariable(name, collection, type);
+          const variable = figma.variables.createVariable(
+            name,
+            collection,
+            type
+          );
           if (value !== void 0 && collection.modes.length > 0) {
             const modeId = collection.modes[0].modeId;
             variable.setValueForMode(modeId, parseVariableValue(value, type));
@@ -2443,6 +2530,7 @@
           const variable = yield figma.variables.getVariableByIdAsync(variableId);
           if (!variable) throw new Error("Variable not found");
           if ("setBoundVariable" in node) {
+            ;
             node.setBoundVariable(field, variable);
           } else {
             throw new Error("Node does not support variable binding");
@@ -2450,7 +2538,11 @@
           return serializeNode(node);
         }
         case "bind-fill-variable": {
-          const { nodeId, variableId, paintIndex = 0 } = args;
+          const {
+            nodeId,
+            variableId,
+            paintIndex = 0
+          } = args;
           const node = yield figma.getNodeByIdAsync(nodeId);
           if (!node) throw new Error("Node not found");
           if (!("fills" in node)) throw new Error("Node does not have fills");
@@ -2459,11 +2551,19 @@
           const fills = node.fills;
           if (!fills[paintIndex]) throw new Error("Paint not found at index " + paintIndex);
           const newFill = figma.variables.setBoundVariableForPaint(fills[paintIndex], "color", variable);
-          node.fills = [...fills.slice(0, paintIndex), newFill, ...fills.slice(paintIndex + 1)];
+          node.fills = [
+            ...fills.slice(0, paintIndex),
+            newFill,
+            ...fills.slice(paintIndex + 1)
+          ];
           return serializeNode(node);
         }
         case "bind-stroke-variable": {
-          const { nodeId, variableId, paintIndex = 0 } = args;
+          const {
+            nodeId,
+            variableId,
+            paintIndex = 0
+          } = args;
           const node = yield figma.getNodeByIdAsync(nodeId);
           if (!node) throw new Error("Node not found");
           if (!("strokes" in node)) throw new Error("Node does not have strokes");
@@ -2471,8 +2571,16 @@
           if (!variable) throw new Error("Variable not found");
           const strokes = node.strokes;
           if (!strokes[paintIndex]) throw new Error("Paint not found at index " + paintIndex);
-          const newStroke = figma.variables.setBoundVariableForPaint(strokes[paintIndex], "color", variable);
-          node.strokes = [...strokes.slice(0, paintIndex), newStroke, ...strokes.slice(paintIndex + 1)];
+          const newStroke = figma.variables.setBoundVariableForPaint(
+            strokes[paintIndex],
+            "color",
+            variable
+          );
+          node.strokes = [
+            ...strokes.slice(0, paintIndex),
+            newStroke,
+            ...strokes.slice(paintIndex + 1)
+          ];
           return serializeNode(node);
         }
         // ==================== VARIABLE COLLECTIONS ====================
@@ -2556,7 +2664,12 @@
       base.layoutMode = node.layoutMode;
       if ("itemSpacing" in node) base.itemSpacing = node.itemSpacing;
       if ("paddingLeft" in node && (node.paddingLeft || node.paddingRight || node.paddingTop || node.paddingBottom)) {
-        base.padding = { left: node.paddingLeft, right: node.paddingRight, top: node.paddingTop, bottom: node.paddingBottom };
+        base.padding = {
+          left: node.paddingLeft,
+          right: node.paddingRight,
+          top: node.paddingTop,
+          bottom: node.paddingBottom
+        };
       }
     }
     if (node.type === "TEXT") {

package/packages/plugin/dist/ui.html

@@ -1,21 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <style>
-    body {
-      font-family: Inter, system-ui, sans-serif;
-      font-size: 12px;
-      padding: 16px;
-      margin: 0;
-    }
-    h1 { font-size: 14px; margin: 0 0 16px; }
-    #status { font-weight: 500; }
-  </style>
-</head>
-<body>
-  <h1>Figma Bridge</h1>
-  <p id="status">○ Connecting...</p>
-  <script>"use strict";
+  <head>
+    <style>
+      body {
+        font-family: Inter, system-ui, sans-serif;
+        font-size: 12px;
+        padding: 16px;
+        margin: 0;
+      }
+      h1 {
+        font-size: 14px;
+        margin: 0 0 16px;
+      }
+      #status {
+        font-weight: 500;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Figma Bridge</h1>
+    <p id="status">○ Connecting...</p>
+    <script>"use strict";
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -74,5 +79,5 @@
   });
 })();
 </script>
-</body>
+  </body>
 </html>