@dannote/figma-use 0.6.2 → 0.7.0

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

@@ -0,0 +1,129 @@
+import type { FigmaVariable } from './vars.ts'
+
+export type StyleValue = string | number | boolean | FigmaVariable
+
+export interface StyleProps {
+  // Size
+  w?: number
+  h?: number
+  width?: number
+  height?: number
+  // Colors
+  bg?: string | FigmaVariable
+  backgroundColor?: string | FigmaVariable
+  // Border
+  rounded?: number
+  borderRadius?: number
+  // Padding
+  p?: number
+  pt?: number
+  pr?: number
+  pb?: number
+  pl?: number
+  px?: number
+  py?: number
+  padding?: number
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  // Text
+  size?: number
+  font?: string
+  weight?: string | number
+  fontSize?: number
+  fontFamily?: string
+  fontWeight?: string | number
+  // Layout
+  flex?: 'row' | 'col' | 'column'
+  flexDirection?: 'row' | 'column'
+  justify?: 'start' | 'end' | 'center' | 'between' | 'evenly'
+  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-evenly'
+  items?: 'start' | 'end' | 'center' | 'stretch'
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch'
+  gap?: number
+  // Other
+  opacity?: number
+  color?: string
+  [key: string]: StyleValue | undefined
+}
+
+/** Simple shorthand → full property mapping */
+export const shorthands: Record<string, string> = {
+  w: 'width',
+  h: 'height',
+  bg: 'backgroundColor',
+  rounded: 'borderRadius',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  size: 'fontSize',
+  font: 'fontFamily',
+  weight: 'fontWeight'
+}
+
+/** Value transformations for specific properties */
+export const valueTransforms: Record<string, Record<string, string>> = {
+  flexDirection: { col: 'column' },
+  justifyContent: {
+    start: 'flex-start',
+    end: 'flex-end',
+    between: 'space-between',
+    evenly: 'space-evenly'
+  },
+  alignItems: { start: 'flex-start', end: 'flex-end' }
+}
+
+/** Normalize Tailwind-like shorthand style props to full names */
+export function normalizeStyle(style: StyleProps): StyleProps {
+  const result: StyleProps = {}
+
+  // First pass: expand simple shorthands and copy non-shorthand keys
+  for (const [key, value] of Object.entries(style)) {
+    // Skip special shorthands handled separately
+    if (key === 'px' || key === 'py' || key === 'flex' || key === 'justify' || key === 'items') {
+      continue
+    }
+
+    const fullKey = shorthands[key] || key
+    // Full property takes precedence - check if it exists in original style
+    if (shorthands[key] && style[fullKey] !== undefined) {
+      continue
+    }
+    if (result[fullKey] === undefined) {
+      const transform = valueTransforms[fullKey]
+      result[fullKey] = transform?.[value as string] ?? value
+    }
+  }
+
+  // Expand px/py to individual padding properties
+  if (style.px !== undefined) {
+    if (result.paddingLeft === undefined) result.paddingLeft = style.px
+    if (result.paddingRight === undefined) result.paddingRight = style.px
+  }
+  if (style.py !== undefined) {
+    if (result.paddingTop === undefined) result.paddingTop = style.py
+    if (result.paddingBottom === undefined) result.paddingBottom = style.py
+  }
+
+  // Expand flex shorthand
+  if (style.flex !== undefined && result.flexDirection === undefined) {
+    const transform = valueTransforms.flexDirection
+    const value = transform?.[style.flex] ?? style.flex
+    result.flexDirection = value === 'col' ? 'column' : (value as StyleProps['flexDirection'])
+  }
+
+  // Expand justify/items shorthands
+  if (style.justify !== undefined && result.justifyContent === undefined) {
+    const transform = valueTransforms.justifyContent
+    result.justifyContent = (transform?.[style.justify] ?? style.justify) as StyleProps['justifyContent']
+  }
+  if (style.items !== undefined && result.alignItems === undefined) {
+    const transform = valueTransforms.alignItems
+    result.alignItems = (transform?.[style.items] ?? style.items) as StyleProps['alignItems']
+  }
+
+  return result
+}

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

@@ -20,7 +20,6 @@
  * ```
  */
 
-import { parseColor } from '../color.ts'
 
 const VAR_SYMBOL = Symbol.for('figma.variable')
 
@@ -68,8 +67,8 @@ export function loadVariablesIntoRegistry(variables: Array<{ id: string; name: s
     if (match) {
       variableRegistry.set(v.name, {
         id: v.id,
-        sessionID: parseInt(match[1], 10),
-        localID: parseInt(match[2], 10)
+        sessionID: parseInt(match[1]!, 10),
+        localID: parseInt(match[2]!, 10)
       })
     }
   }
@@ -90,8 +89,8 @@ export function resolveVariable(variable: FigmaVariable): ResolvedVariable {
   if (idMatch) {
     const resolved = {
       id: `VariableID:${idMatch[1]}:${idMatch[2]}`,
-      sessionID: parseInt(idMatch[1], 10),
-      localID: parseInt(idMatch[2], 10)
+      sessionID: parseInt(idMatch[1]!, 10),
+      localID: parseInt(idMatch[2]!, 10)
     }
     variable._resolved = resolved
     return resolved

package/packages/plugin/dist/main.js

@@ -1085,6 +1085,20 @@
   // src/main.ts
   var import_svgpath = __toESM(require_svgpath2(), 1);
   console.log("[Figma Bridge] Plugin main loaded at", (/* @__PURE__ */ new Date()).toISOString());
+  var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+  function retry(fn, maxAttempts = 10, delayMs = 50, backoff = "fixed") {
+    return __async(this, null, function* () {
+      for (let attempt = 0; attempt < maxAttempts; attempt++) {
+        const result = yield fn();
+        if (result) return result;
+        if (attempt < maxAttempts - 1) {
+          const delay = backoff === "linear" ? delayMs * (attempt + 1) : backoff === "exponential" ? delayMs * Math.pow(2, attempt) : delayMs;
+          yield sleep(delay);
+        }
+      }
+      return null;
+    });
+  }
   figma.showUI(__html__, { width: 300, height: 200 });
   var loadedFonts = /* @__PURE__ */ new Set();
   var fontLoadPromises = /* @__PURE__ */ new Map();
@@ -1113,7 +1127,6 @@
         width,
         height,
         name,
-        parentId,
         fill,
         stroke,
         strokeWeight,
@@ -1135,8 +1148,8 @@
           frame.y = y;
           frame.resize(width || 100, height || 100);
           if (name) frame.name = name;
-          if (fill) frame.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
-          if (stroke) frame.strokes = [{ type: "SOLID", color: hexToRgb(stroke) }];
+          if (fill) frame.fills = [{ type: "SOLID", color: hexToRgb(getHexColor(fill)) }];
+          if (stroke) frame.strokes = [{ type: "SOLID", color: hexToRgb(getHexColor(stroke)) }];
           if (strokeWeight) frame.strokeWeight = strokeWeight;
           if (typeof radius === "number") frame.cornerRadius = radius;
           if (typeof opacity === "number") frame.opacity = opacity;
@@ -1157,8 +1170,8 @@
           rect.y = y;
           rect.resize(width || 100, height || 100);
           if (name) rect.name = name;
-          if (fill) rect.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
-          if (stroke) rect.strokes = [{ type: "SOLID", color: hexToRgb(stroke) }];
+          if (fill) rect.fills = [{ type: "SOLID", color: hexToRgb(getHexColor(fill)) }];
+          if (stroke) rect.strokes = [{ type: "SOLID", color: hexToRgb(getHexColor(stroke)) }];
           if (strokeWeight) rect.strokeWeight = strokeWeight;
           if (typeof radius === "number") rect.cornerRadius = radius;
           if (typeof opacity === "number") rect.opacity = opacity;
@@ -1171,8 +1184,8 @@
           ellipse.y = y;
           ellipse.resize(width || 100, height || 100);
           if (name) ellipse.name = name;
-          if (fill) ellipse.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
-          if (stroke) ellipse.strokes = [{ type: "SOLID", color: hexToRgb(stroke) }];
+          if (fill) ellipse.fills = [{ type: "SOLID", color: hexToRgb(getHexColor(fill)) }];
+          if (stroke) ellipse.strokes = [{ type: "SOLID", color: hexToRgb(getHexColor(stroke)) }];
           if (strokeWeight) ellipse.strokeWeight = strokeWeight;
           if (typeof opacity === "number") ellipse.opacity = opacity;
           node = ellipse;
@@ -1189,7 +1202,7 @@
           textNode.y = y;
           if (name) textNode.name = name;
           if (fontSize) textNode.fontSize = fontSize;
-          if (fill) textNode.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
+          if (fill) textNode.fills = [{ type: "SOLID", color: hexToRgb(getHexColor(fill)) }];
           if (typeof opacity === "number") textNode.opacity = opacity;
           node = textNode;
           break;
@@ -1489,8 +1502,8 @@
           rect.y = y;
           rect.resize(width, height);
           if (name) rect.name = name;
-          if (fill) rect.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
-          if (stroke) rect.strokes = [{ type: "SOLID", color: hexToRgb(stroke) }];
+          if (fill) rect.fills = [yield createSolidPaint(fill)];
+          if (stroke) rect.strokes = [yield createSolidPaint(stroke)];
           if (strokeWeight !== void 0) rect.strokeWeight = strokeWeight;
           if (radius !== void 0) rect.cornerRadius = radius;
           if (opacity !== void 0) rect.opacity = opacity;
@@ -1504,21 +1517,23 @@
           ellipse.y = y;
           ellipse.resize(width, height);
           if (name) ellipse.name = name;
-          if (fill) ellipse.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
-          if (stroke) ellipse.strokes = [{ type: "SOLID", color: hexToRgb(stroke) }];
+          if (fill) ellipse.fills = [yield createSolidPaint(fill)];
+          if (stroke) ellipse.strokes = [yield createSolidPaint(stroke)];
           if (strokeWeight !== void 0) ellipse.strokeWeight = strokeWeight;
           if (opacity !== void 0) ellipse.opacity = opacity;
           yield appendToParent(ellipse, parentId);
           return serializeNode(ellipse);
         }
         case "create-line": {
-          const { x, y, length, rotation, name, parentId } = args;
+          const { x, y, length, rotation, name, parentId, stroke, strokeWeight } = args;
           const line = figma.createLine();
           line.x = x;
           line.y = y;
           line.resize(length, 0);
           if (rotation) line.rotation = rotation;
           if (name) line.name = name;
+          if (stroke) line.strokes = [yield createSolidPaint(stroke)];
+          if (strokeWeight !== void 0) line.strokeWeight = strokeWeight;
           yield appendToParent(line, parentId);
           return serializeNode(line);
         }
@@ -1577,8 +1592,8 @@
           frame.y = y;
           frame.resize(width, height);
           if (name) frame.name = name;
-          if (fill) frame.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
-          if (stroke) frame.strokes = [{ type: "SOLID", color: hexToRgb(stroke) }];
+          if (fill) frame.fills = [yield createSolidPaint(fill)];
+          if (stroke) frame.strokes = [yield createSolidPaint(stroke)];
           if (strokeWeight !== void 0) frame.strokeWeight = strokeWeight;
           if (radius !== void 0) frame.cornerRadius = radius;
           if (opacity !== void 0) frame.opacity = opacity;
@@ -1625,7 +1640,7 @@
           textNode.fontName = { family, style };
           textNode.characters = text;
           if (fontSize) textNode.fontSize = fontSize;
-          if (fill) textNode.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
+          if (fill) textNode.fills = [yield createSolidPaint(fill)];
           if (opacity !== void 0) textNode.opacity = opacity;
           if (name) textNode.name = name;
           yield appendToParent(textNode, parentId);
@@ -1643,9 +1658,13 @@
           return serializeNode(instance);
         }
         case "create-component": {
-          const { name, parentId } = args;
+          const { name, parentId, x, y, width, height, fill } = args;
           const component = figma.createComponent();
           component.name = name;
+          if (x !== void 0) component.x = x;
+          if (y !== void 0) component.y = y;
+          if (width && height) component.resize(width, height);
+          if (fill) component.fills = [yield createSolidPaint(fill)];
           yield appendToParent(component, parentId);
           return serializeNode(component);
         }
@@ -1656,12 +1675,19 @@
           const clone = node.clone();
           return serializeNode(clone);
         }
+        case "convert-to-component": {
+          const { id } = args;
+          const node = yield figma.getNodeByIdAsync(id);
+          if (!node) throw new Error("Node not found");
+          const component = figma.createComponentFromNode(node);
+          return serializeNode(component);
+        }
         // ==================== CREATE STYLES ====================
         case "create-paint-style": {
           const { name, color } = args;
           const style = figma.createPaintStyle();
           style.name = name;
-          style.paints = [{ type: "SOLID", color: hexToRgb(color) }];
+          style.paints = [yield createSolidPaint(color)];
           return { id: style.id, name: style.name, key: style.key };
         }
         case "create-text-style": {
@@ -1730,14 +1756,14 @@
           const { id, color } = args;
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || !("fills" in node)) throw new Error("Node not found");
-          node.fills = [{ type: "SOLID", color: hexToRgb(color) }];
+          node.fills = [yield createSolidPaint(color)];
           return serializeNode(node);
         }
         case "set-stroke-color": {
           const { id, color, weight, align } = args;
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || !("strokes" in node)) throw new Error("Node not found");
-          node.strokes = [{ type: "SOLID", color: hexToRgb(color) }];
+          node.strokes = [yield createSolidPaint(color)];
           if (weight !== void 0 && "strokeWeight" in node) node.strokeWeight = weight;
           if (align && "strokeAlign" in node)
             node.strokeAlign = align;
@@ -1790,6 +1816,34 @@
           node.name = name;
           return serializeNode(node);
         }
+        case "bind-fill-variable-by-name": {
+          let bindFills2 = function(n) {
+            if ("fills" in n && Array.isArray(n.fills) && n.fills.length > 0) {
+              const fills = [...n.fills];
+              for (let i = 0; i < fills.length; i++) {
+                if (fills[i].type === "SOLID") {
+                  fills[i] = figma.variables.setBoundVariableForPaint(fills[i], "color", variable);
+                }
+              }
+              ;
+              n.fills = fills;
+            }
+            if (recursive && "children" in n) {
+              for (const child of n.children) {
+                bindFills2(child);
+              }
+            }
+          };
+          var bindFills = bindFills2;
+          const { id, variableName, recursive } = args;
+          const node = yield figma.getNodeByIdAsync(id);
+          if (!node) throw new Error("Node not found");
+          const variables = yield figma.variables.getLocalVariablesAsync("COLOR");
+          const variable = variables.find((v) => v.name === variableName);
+          if (!variable) throw new Error(`Variable "${variableName}" not found`);
+          bindFills2(node);
+          return serializeNode(node);
+        }
         case "set-visible": {
           const { id, visible } = args;
           const node = yield figma.getNodeByIdAsync(id);
@@ -1843,12 +1897,13 @@
           return serializeNode(node);
         }
         case "import-svg": {
-          const { svg, x, y, name, parentId } = args;
+          const { svg, x, y, name, parentId, noFill, insertIndex } = args;
           const node = figma.createNodeFromSvg(svg);
           if (x !== void 0) node.x = x;
           if (y !== void 0) node.y = y;
           if (name) node.name = name;
-          yield appendToParent(node, parentId);
+          if (noFill) node.fills = [];
+          yield appendToParent(node, parentId, insertIndex);
           return serializeNode(node);
         }
         case "set-font": {
@@ -1878,8 +1933,7 @@
             node.setRangeFontSize(start, end, size);
           }
           if (color) {
-            const rgb = hexToRgb(color);
-            node.setRangeFills(start, end, [{ type: "SOLID", color: rgb }]);
+            node.setRangeFills(start, end, [yield createSolidPaint(color)]);
           }
           return serializeNode(node);
         }
@@ -2405,12 +2459,12 @@
         // ==================== LAYOUT ====================
         case "trigger-layout": {
           const { nodeId, pendingComponentSetInstances } = args;
-          let root = null;
-          for (let i = 0; i < 10; i++) {
-            root = yield figma.getNodeByIdAsync(nodeId);
-            if (root) break;
-            yield new Promise((r) => setTimeout(r, 100 * (i + 1)));
-          }
+          const root = yield retry(
+            () => figma.getNodeByIdAsync(nodeId),
+            10,
+            100,
+            "linear"
+          );
           if (!root) return null;
           if (pendingComponentSetInstances && pendingComponentSetInstances.length > 0) {
             for (const pending of pendingComponentSetInstances) {
@@ -2611,14 +2665,23 @@
       }
     });
   }
-  function appendToParent(node, parentId) {
+  function appendToParent(node, parentId, insertIndex) {
     return __async(this, null, function* () {
       if (parentId) {
-        const parent = yield figma.getNodeByIdAsync(parentId);
+        const parent = yield retry(
+          () => figma.getNodeByIdAsync(parentId),
+          10,
+          50
+        );
         if (parent && "appendChild" in parent) {
-          parent.appendChild(node);
+          if (insertIndex !== void 0 && "insertChild" in parent) {
+            parent.insertChild(insertIndex, node);
+          } else {
+            parent.appendChild(node);
+          }
           return;
         }
+        console.warn(`Parent ${parentId} not found after retries, appending to page`);
       }
       figma.currentPage.appendChild(node);
     });
@@ -2730,6 +2793,37 @@
       b: parseInt(clean.slice(4, 6), 16) / 255
     };
   }
+  function parsestring(color) {
+    const varMatch = color.match(/^(?:var:|[$])(.+)$/);
+    if (varMatch) {
+      return { variable: varMatch[1] };
+    }
+    return { hex: color };
+  }
+  function getHexColor(color) {
+    const parsed = parsestring(color);
+    return parsed.hex || "#000000";
+  }
+  function createSolidPaint(color) {
+    return __async(this, null, function* () {
+      const parsed = parsestring(color);
+      if (parsed.hex) {
+        return { type: "SOLID", color: hexToRgb(parsed.hex) };
+      }
+      const variables = yield figma.variables.getLocalVariablesAsync("COLOR");
+      const variable = variables.find((v) => v.name === parsed.variable);
+      if (!variable) {
+        console.warn(`Variable "${parsed.variable}" not found, using black`);
+        return { type: "SOLID", color: { r: 0, g: 0, b: 0 } };
+      }
+      const paint = {
+        type: "SOLID",
+        color: { r: 0, g: 0, b: 0 }
+        // Will be overridden by variable
+      };
+      return figma.variables.setBoundVariableForPaint(paint, "color", variable);
+    });
+  }
   function hexToRgba(hex) {
     const clean = expandHex(hex);
     const hasAlpha = clean.length === 8;