@dannote/figma-use 0.2.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dannote/figma-use",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Control Figma from the command line. Full read/write access for AI agents.",
   "type": "module",
   "bin": {
@@ -45,11 +45,13 @@
   "dependencies": {
     "citty": "^0.1.6",
     "consola": "^3.4.2",
-    "elysia": "^1.2.25"
+    "elysia": "^1.2.25",
+    "kiwi-schema": "^0.5.0"
   },
   "devDependencies": {
     "@types/bun": "^1.3.6",
     "esbuild": "^0.25.4",
+    "react": "19",
     "typescript": "^5.8.3"
   }
 }

package/packages/plugin/dist/main.js

@@ -43,10 +43,142 @@
   // src/main.ts
   console.log("[Figma Bridge] Plugin main loaded at", (/* @__PURE__ */ new Date()).toISOString());
   figma.showUI(__html__, { width: 300, height: 200 });
+  var loadedFonts = /* @__PURE__ */ new Set();
+  var fontLoadPromises = /* @__PURE__ */ new Map();
+  var interPromise = figma.loadFontAsync({ family: "Inter", style: "Regular" });
+  fontLoadPromises.set("Inter:Regular", interPromise);
+  interPromise.then(() => loadedFonts.add("Inter:Regular"));
+  function loadFont(family, style) {
+    const key = `${family}:${style}`;
+    if (loadedFonts.has(key)) return;
+    const pending = fontLoadPromises.get(key);
+    if (pending) return pending;
+    const promise = figma.loadFontAsync({ family, style });
+    fontLoadPromises.set(key, promise);
+    promise.then(() => {
+      loadedFonts.add(key);
+      fontLoadPromises.delete(key);
+    });
+    return promise;
+  }
+  function createNodeFast(command, args, nodeCache, deferredLayouts) {
+    return __async(this, null, function* () {
+      if (!args) return null;
+      const {
+        x = 0,
+        y = 0,
+        width,
+        height,
+        name,
+        parentId,
+        fill,
+        stroke,
+        strokeWeight,
+        radius,
+        opacity,
+        layoutMode,
+        itemSpacing,
+        padding,
+        text,
+        fontSize,
+        fontFamily,
+        fontStyle
+      } = args;
+      let node = null;
+      switch (command) {
+        case "create-frame": {
+          const frame = figma.createFrame();
+          frame.x = x;
+          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 (strokeWeight) frame.strokeWeight = strokeWeight;
+          if (typeof radius === "number") frame.cornerRadius = radius;
+          if (typeof opacity === "number") frame.opacity = opacity;
+          if (layoutMode && layoutMode !== "NONE") {
+            deferredLayouts == null ? void 0 : deferredLayouts.push({
+              frame,
+              layoutMode,
+              itemSpacing,
+              padding
+            });
+          }
+          node = frame;
+          break;
+        }
+        case "create-rectangle": {
+          const rect = figma.createRectangle();
+          rect.x = x;
+          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 (strokeWeight) rect.strokeWeight = strokeWeight;
+          if (typeof radius === "number") rect.cornerRadius = radius;
+          if (typeof opacity === "number") rect.opacity = opacity;
+          node = rect;
+          break;
+        }
+        case "create-ellipse": {
+          const ellipse = figma.createEllipse();
+          ellipse.x = x;
+          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 (strokeWeight) ellipse.strokeWeight = strokeWeight;
+          if (typeof opacity === "number") ellipse.opacity = opacity;
+          node = ellipse;
+          break;
+        }
+        case "create-text": {
+          const textNode = figma.createText();
+          const family = fontFamily || "Inter";
+          const style = fontStyle || "Regular";
+          yield loadFont(family, style);
+          textNode.fontName = { family, style };
+          textNode.characters = text || "";
+          textNode.x = x;
+          textNode.y = y;
+          if (name) textNode.name = name;
+          if (fontSize) textNode.fontSize = fontSize;
+          if (fill) textNode.fills = [{ type: "SOLID", color: hexToRgb(fill) }];
+          if (typeof opacity === "number") textNode.opacity = opacity;
+          node = textNode;
+          break;
+        }
+        default:
+          return null;
+      }
+      return node;
+    });
+  }
+  var NEEDS_ALL_PAGES = /* @__PURE__ */ new Set([
+    "get-node-info",
+    "get-node-tree",
+    "get-node-children",
+    "set-parent",
+    "clone-node",
+    "delete-node",
+    "get-pages",
+    "set-current-page",
+    "get-components",
+    "get-styles",
+    "export-node",
+    "screenshot"
+  ]);
+  var allPagesLoaded = false;
   figma.ui.onmessage = (msg) => __async(null, null, function* () {
     if (msg.type !== "command") return;
     try {
-      yield figma.loadAllPagesAsync();
+      if (!allPagesLoaded && NEEDS_ALL_PAGES.has(msg.command)) {
+        yield figma.loadAllPagesAsync();
+        allPagesLoaded = true;
+      }
       const result = yield handleCommand(msg.command, msg.args);
       figma.ui.postMessage({ type: "result", id: msg.id, result });
     } catch (error) {
@@ -55,7 +187,81 @@
   });
   function handleCommand(command, args) {
     return __async(this, null, function* () {
+      var _a, _b, _c, _d;
       switch (command) {
+        // ==================== BATCH ====================
+        case "batch": {
+          const { commands } = args;
+          const results = [];
+          const refMap = /* @__PURE__ */ new Map();
+          const nodeCache = /* @__PURE__ */ new Map();
+          const deferredLayouts = [];
+          const internalAttachments = [];
+          const externalAttachments = [];
+          const rootNodes = [];
+          for (const cmd of commands) {
+            if (((_a = cmd.args) == null ? void 0 : _a.parentRef) && refMap.has(cmd.args.parentRef)) {
+              cmd.args.parentId = refMap.get(cmd.args.parentRef);
+              delete cmd.args.parentRef;
+            }
+            const node = yield createNodeFast(cmd.command, cmd.args, nodeCache, deferredLayouts);
+            if (node) {
+              results.push({ id: node.id, name: node.name });
+              nodeCache.set(node.id, node);
+              if ((_b = cmd.args) == null ? void 0 : _b.ref) {
+                refMap.set(cmd.args.ref, node.id);
+              }
+              const parentId = (_c = cmd.args) == null ? void 0 : _c.parentId;
+              if (parentId) {
+                if (nodeCache.has(parentId)) {
+                  internalAttachments.push({ node, parentId });
+                } else {
+                  externalAttachments.push({ node, parentId });
+                }
+              } else {
+                rootNodes.push(node);
+              }
+            } else {
+              const result = yield handleCommand(cmd.command, cmd.args);
+              results.push(result);
+              if ((_d = cmd.args) == null ? void 0 : _d.ref) {
+                refMap.set(cmd.args.ref, result.id);
+              }
+            }
+          }
+          for (const attachment of internalAttachments) {
+            const parent = nodeCache.get(attachment.parentId);
+            if (parent && "appendChild" in parent) {
+              parent.appendChild(attachment.node);
+            }
+          }
+          for (const layout of deferredLayouts) {
+            layout.frame.layoutMode = layout.layoutMode;
+            layout.frame.primaryAxisSizingMode = "AUTO";
+            layout.frame.counterAxisSizingMode = "AUTO";
+            if (layout.itemSpacing) layout.frame.itemSpacing = layout.itemSpacing;
+            if (layout.padding) {
+              layout.frame.paddingTop = layout.padding.top;
+              layout.frame.paddingRight = layout.padding.right;
+              layout.frame.paddingBottom = layout.padding.bottom;
+              layout.frame.paddingLeft = layout.padding.left;
+            }
+          }
+          for (const node of rootNodes) {
+            figma.currentPage.appendChild(node);
+          }
+          for (const attachment of externalAttachments) {
+            let parent = nodeCache.get(attachment.parentId);
+            if (!parent) {
+              parent = yield figma.getNodeByIdAsync(attachment.parentId);
+            }
+            if (parent && "appendChild" in parent) {
+              parent.appendChild(attachment.node);
+            }
+          }
+          figma.commitUndo();
+          return results;
+        }
         // ==================== READ ====================
         case "get-selection":
           return figma.currentPage.selection.map(serializeNode);
@@ -70,14 +276,52 @@
           const { id } = args;
           const node = yield figma.getNodeByIdAsync(id);
           if (!node) throw new Error("Node not found");
-          const serializeTree = (n) => {
-            const base = serializeNode(n);
+          const serializeTreeNode = (n) => {
+            const base = {
+              id: n.id,
+              name: n.name,
+              type: n.type
+            };
+            if ("x" in n) base.x = Math.round(n.x);
+            if ("y" in n) base.y = Math.round(n.y);
+            if ("width" in n) base.width = Math.round(n.width);
+            if ("height" in n) base.height = Math.round(n.height);
+            if ("fills" in n && Array.isArray(n.fills)) {
+              const solid = n.fills.find((f) => f.type === "SOLID");
+              if (solid) base.fills = [{ type: "SOLID", color: rgbToHex(solid.color) }];
+            }
+            if ("strokes" in n && Array.isArray(n.strokes) && n.strokes.length > 0) {
+              const solid = n.strokes.find((s) => s.type === "SOLID");
+              if (solid) base.strokes = [{ type: "SOLID", color: rgbToHex(solid.color) }];
+            }
+            if ("strokeWeight" in n && typeof n.strokeWeight === "number" && n.strokeWeight > 0) {
+              base.strokeWeight = n.strokeWeight;
+            }
+            if ("cornerRadius" in n && typeof n.cornerRadius === "number" && n.cornerRadius > 0) {
+              base.cornerRadius = n.cornerRadius;
+            }
+            if ("opacity" in n && n.opacity !== 1) base.opacity = n.opacity;
+            if ("visible" in n && !n.visible) base.visible = false;
+            if ("locked" in n && n.locked) base.locked = true;
+            if ("layoutMode" in n && n.layoutMode !== "NONE") {
+              base.layoutMode = n.layoutMode;
+              if ("itemSpacing" in n) base.itemSpacing = n.itemSpacing;
+            }
+            if (n.type === "TEXT") {
+              const t = n;
+              base.characters = t.characters;
+              if (typeof t.fontSize === "number") base.fontSize = t.fontSize;
+              if (typeof t.fontName === "object") {
+                base.fontFamily = t.fontName.family;
+                base.fontStyle = t.fontName.style;
+              }
+            }
             if ("children" in n && n.children) {
-              base.children = n.children.map(serializeTree);
+              base.children = n.children.map(serializeTreeNode);
             }
             return base;
           };
-          return serializeTree(node);
+          return serializeTreeNode(node);
         }
         case "get-all-components": {
           const { name, limit = 50, page } = args || {};
@@ -97,7 +341,7 @@
             }
             return components.length < limit;
           };
-          const pages = page ? figma.root.children.filter((p) => p.id === page || p.name === 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) {
@@ -115,9 +359,15 @@
           return { id: page.id, name: page.name };
         }
         case "set-current-page": {
-          const { id } = args;
-          const page = yield figma.getNodeByIdAsync(id);
-          if (!page || page.type !== "PAGE") throw new Error("Page not found");
+          const { page: pageArg } = args;
+          let page = null;
+          const byId = yield figma.getNodeByIdAsync(pageArg);
+          if (byId && byId.type === "PAGE") {
+            page = byId;
+          } else {
+            page = figma.root.children.find((p) => p.name === pageArg || p.name.includes(pageArg)) || null;
+          }
+          if (!page) throw new Error("Page not found");
           yield figma.setCurrentPageAsync(page);
           return { id: page.id, name: page.name };
         }
@@ -297,7 +547,7 @@
           const textNode = figma.createText();
           const family = fontFamily || "Inter";
           const style = fontStyle || "Regular";
-          yield figma.loadFontAsync({ family, style });
+          yield loadFont(family, style);
           textNode.x = x;
           textNode.y = y;
           textNode.fontName = { family, style };
@@ -346,7 +596,7 @@
           const { name, fontFamily, fontStyle, fontSize } = args;
           const style = figma.createTextStyle();
           style.name = name;
-          yield figma.loadFontAsync({ family: fontFamily || "Inter", style: fontStyle || "Regular" });
+          yield loadFont(fontFamily || "Inter", fontStyle || "Regular");
           style.fontName = { family: fontFamily || "Inter", style: fontStyle || "Regular" };
           if (fontSize) style.fontSize = fontSize;
           return { id: style.id, name: style.name, key: style.key };
@@ -491,7 +741,7 @@
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || node.type !== "TEXT") throw new Error("Text node not found");
           const fontName = node.fontName;
-          yield figma.loadFontAsync(fontName);
+          yield loadFont(fontName.family, fontName.style);
           node.characters = text;
           return serializeNode(node);
         }
@@ -511,7 +761,7 @@
           const currentFont = node.fontName;
           const family = fontFamily || currentFont.family;
           const style = fontStyle || currentFont.style;
-          yield figma.loadFontAsync({ family, style });
+          yield loadFont(family, style);
           node.fontName = { family, style };
           if (fontSize !== void 0) node.fontSize = fontSize;
           return serializeNode(node);
@@ -532,14 +782,24 @@
           return node.children.map((c) => serializeWithDepth(c, 1));
         }
         case "find-by-name": {
-          const { name, type, exact } = args;
+          const { name, type, exact, limit = 100 } = args;
           const results = [];
-          figma.currentPage.findAll((n) => {
-            const nameMatch = !name || (exact ? n.name === name : n.name.toLowerCase().includes(name.toLowerCase()));
-            const typeMatch = !type || n.type === type;
-            if (nameMatch && typeMatch) results.push(serializeNode(n));
-            return false;
-          });
+          const nameLower = name == null ? void 0 : name.toLowerCase();
+          const searchNode = (node) => {
+            if (results.length >= limit) return false;
+            const nameMatch = !nameLower || (exact ? node.name === name : node.name.toLowerCase().includes(nameLower));
+            const typeMatch = !type || node.type === type;
+            if (nameMatch && typeMatch) results.push(serializeNode(node));
+            if ("children" in node) {
+              for (const child of node.children) {
+                if (!searchNode(child)) return false;
+              }
+            }
+            return results.length < limit;
+          };
+          for (const child of figma.currentPage.children) {
+            if (!searchNode(child)) break;
+          }
           return results;
         }
         case "select-nodes": {
@@ -610,7 +870,7 @@
           const node = yield figma.getNodeByIdAsync(id);
           if (!node || node.type !== "TEXT") throw new Error("Text node not found");
           const fontName = node.fontName;
-          yield figma.loadFontAsync(fontName);
+          yield loadFont(fontName.family, fontName.style);
           if (lineHeight !== void 0) {
             node.lineHeight = lineHeight === "auto" ? { unit: "AUTO" } : { unit: "PIXELS", value: lineHeight };
           }
@@ -924,10 +1184,34 @@
           const fn = new AsyncFunction("figma", wrappedCode);
           return yield fn(figma);
         }
+        // ==================== LAYOUT ====================
+        case "trigger-layout": {
+          const { nodeId } = args;
+          const root = yield figma.getNodeByIdAsync(nodeId);
+          if (!root) return null;
+          const triggerRecursive = (node) => {
+            if ("layoutMode" in node && node.layoutMode !== "NONE" && "resize" in node) {
+              const w = node.width;
+              const h = node.height;
+              node.resize(w + 0.01, h + 0.01);
+              node.resize(w, h);
+            }
+            if ("children" in node) {
+              for (const child of node.children) {
+                triggerRecursive(child);
+              }
+            }
+          };
+          triggerRecursive(root);
+          return { triggered: true };
+        }
         // ==================== VARIABLES ====================
         case "get-variables": {
-          const { type } = args;
+          const { type, simple } = args;
           const variables = yield figma.variables.getLocalVariablesAsync(type);
+          if (simple) {
+            return variables.map((v) => ({ id: v.id, name: v.name }));
+          }
           return variables.map((v) => serializeVariable(v));
         }
         case "get-variable": {
@@ -974,6 +1258,32 @@
           }
           return serializeNode(node);
         }
+        case "bind-fill-variable": {
+          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");
+          const variable = yield figma.variables.getVariableByIdAsync(variableId);
+          if (!variable) throw new Error("Variable not found");
+          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)];
+          return serializeNode(node);
+        }
+        case "bind-stroke-variable": {
+          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");
+          const variable = yield figma.variables.getVariableByIdAsync(variableId);
+          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)];
+          return serializeNode(node);
+        }
         // ==================== VARIABLE COLLECTIONS ====================
         case "get-variable-collections": {
           const collections = yield figma.variables.getLocalVariableCollectionsAsync();
@@ -1020,6 +1330,9 @@
       name: node.name,
       type: node.type
     };
+    if (node.parent && node.parent.type !== "PAGE") {
+      base.parentId = node.parent.id;
+    }
     if ("x" in node) base.x = Math.round(node.x);
     if ("y" in node) base.y = Math.round(node.y);
     if ("width" in node) base.width = Math.round(node.width);
@@ -1036,6 +1349,9 @@
     if ("strokeWeight" in node && typeof node.strokeWeight === "number" && node.strokeWeight > 0) {
       base.strokeWeight = node.strokeWeight;
     }
+    if ("cornerRadius" in node && typeof node.cornerRadius === "number" && node.cornerRadius > 0) {
+      base.cornerRadius = node.cornerRadius;
+    }
     if ("componentPropertyDefinitions" in node) {
       try {
         base.componentPropertyDefinitions = node.componentPropertyDefinitions;