@dannote/figma-use 0.3.0 → 0.5.0

package/dist/proxy/index.js

@@ -10178,6 +10178,21 @@ message PaintFilterMessage {
   float brightness = 10 [deprecated];
 }
 
+// Variable binding embedded in Paint - discovered via WS sniffing 2026-01
+// Figma wire format: 15 01 04 01 {sessionID varint} {localID varint}
+// - 15 = field 21 in Paint
+// - 01 = always 1 (binding type for color)
+// - 04 = field 4
+// - 01 = always 1 (flag)
+// - then GUID as raw sessionID + localID varints (no field numbers)
+// NOTE: kiwi-schema cannot produce this exact format, handled manually in codec
+message PaintVariableBinding {
+  uint bindingType = 1;  // Always 1 for color
+  uint flag = 2;         // Placeholder  
+  uint flag2 = 3;        // Placeholder
+  GUID variableID = 4;   // Variable GUID
+}
+
 message Paint {
   PaintType type = 1;
   Color color = 2;
@@ -10199,6 +10214,7 @@ message Paint {
   Video video = 18;
   uint originalImageWidth = 19;
   uint originalImageHeight = 20;
+  PaintVariableBinding variableBinding = 21; // Not in fig-kiwi. Discovered via WS sniffing 2026-01
 }
 
 message FontMetaData {
@@ -11320,6 +11336,8 @@ message Message {
   uint reconnectSequenceNumber = 25;
   string pasteBranchSourceFileKey = 26;
   EditorType pasteEditorType = 27;
+  // Field 38 (timestamp) exists but kiwi-schema limits field IDs to 28
+  // Discovered via WS sniffing 2026-01, skipped during manual pre-processing
 }
 
 message DiffChunk {
@@ -11540,8 +11558,11 @@ var init_schema = __esm(() => {
 var exports_codec = {};
 __export(exports_codec, {
   peekMessageType: () => peekMessageType,
+  parseVariableId: () => parseVariableId,
   isCodecReady: () => isCodecReady,
   initCodec: () => initCodec,
+  encodePaintWithVariableBinding: () => encodePaintWithVariableBinding,
+  encodeNodeChangeWithVariables: () => encodeNodeChangeWithVariables,
   encodeMessage: () => encodeMessage,
   decompress: () => decompress,
   decodeMessage: () => decodeMessage,
@@ -11569,8 +11590,36 @@ function encodeMessage(message) {
   if (!compiledSchema) {
     throw new Error("Codec not initialized. Call initCodec() first.");
   }
-  const encoded = compiledSchema.encodeMessage(message);
-  return compress(encoded);
+  const hasVariables = message.nodeChanges?.some((nc) => nc.fillPaints?.some((p4) => p4.colorVariableBinding) || nc.strokePaints?.some((p4) => p4.colorVariableBinding));
+  if (!hasVariables) {
+    const encoded = compiledSchema.encodeMessage(message);
+    return compress(encoded);
+  }
+  const messageWithoutNodes = { ...message, nodeChanges: [] };
+  const baseEncoded = compiledSchema.encodeMessage(messageWithoutNodes);
+  const baseHex = Buffer.from(baseEncoded).toString("hex");
+  const nodeChangeBytes = [];
+  for (const nc of message.nodeChanges || []) {
+    const encoded = encodeNodeChangeWithVariables(nc);
+    nodeChangeBytes.push(encoded);
+  }
+  const emptyArrayPattern = "0400";
+  const emptyArrayIdx = baseHex.indexOf(emptyArrayPattern);
+  if (emptyArrayIdx === -1) {
+    const encoded = compiledSchema.encodeMessage(message);
+    return compress(encoded);
+  }
+  const ncBytes = [4];
+  ncBytes.push(...encodeVarint(nodeChangeBytes.length));
+  for (const ncArr of nodeChangeBytes) {
+    ncBytes.push(...Array.from(ncArr));
+  }
+  const beforeArray = baseHex.slice(0, emptyArrayIdx);
+  const afterArray = baseHex.slice(emptyArrayIdx + 4);
+  const ncHex = Buffer.from(ncBytes).toString("hex");
+  const finalHex = beforeArray + ncHex + afterArray;
+  const finalBytes = new Uint8Array(finalHex.match(/.{2}/g).map((b2) => parseInt(b2, 16)));
+  return compress(finalBytes);
 }
 function decodeMessage(data) {
   if (!compiledSchema) {
@@ -11644,6 +11693,114 @@ function createNodeChange(opts) {
   }
   return change;
 }
+function encodeVarint(value) {
+  const bytes = [];
+  while (value > 127) {
+    bytes.push(value & 127 | 128);
+    value >>>= 7;
+  }
+  bytes.push(value);
+  return bytes;
+}
+function encodePaintWithVariableBinding(paint, variableSessionID, variableLocalID) {
+  if (!compiledSchema) {
+    throw new Error("Codec not initialized. Call initCodec() first.");
+  }
+  const basePaint = { ...paint };
+  delete basePaint.colorVariableBinding;
+  const baseBytes = compiledSchema.encodePaint(basePaint);
+  const baseArray = Array.from(baseBytes);
+  if (baseArray[baseArray.length - 1] === 0) {
+    baseArray.pop();
+  }
+  baseArray.push(21, 1);
+  baseArray.push(4, 1);
+  baseArray.push(...encodeVarint(variableSessionID));
+  baseArray.push(...encodeVarint(variableLocalID));
+  baseArray.push(0, 0, 2, 3, 3, 4);
+  baseArray.push(0, 0);
+  return new Uint8Array(baseArray);
+}
+function parseVariableId(variableId) {
+  const match = variableId.match(/VariableID:(\d+):(\d+)/);
+  if (!match)
+    return null;
+  return {
+    sessionID: parseInt(match[1], 10),
+    localID: parseInt(match[2], 10)
+  };
+}
+function encodeNodeChangeWithVariables(nodeChange) {
+  if (!compiledSchema) {
+    throw new Error("Codec not initialized. Call initCodec() first.");
+  }
+  const hasFillBinding = nodeChange.fillPaints?.some((p4) => p4.colorVariableBinding);
+  const hasStrokeBinding = nodeChange.strokePaints?.some((p4) => p4.colorVariableBinding);
+  if (!hasFillBinding && !hasStrokeBinding) {
+    return compiledSchema.encodeNodeChange(nodeChange);
+  }
+  const cleanNodeChange = { ...nodeChange };
+  if (cleanNodeChange.fillPaints) {
+    cleanNodeChange.fillPaints = cleanNodeChange.fillPaints.map((p4) => {
+      const clean2 = { ...p4 };
+      delete clean2.colorVariableBinding;
+      return clean2;
+    });
+  }
+  if (cleanNodeChange.strokePaints) {
+    cleanNodeChange.strokePaints = cleanNodeChange.strokePaints.map((p4) => {
+      const clean2 = { ...p4 };
+      delete clean2.colorVariableBinding;
+      return clean2;
+    });
+  }
+  const baseBytes = compiledSchema.encodeNodeChange(cleanNodeChange);
+  let hex2 = Buffer.from(baseBytes).toString("hex");
+  if (hasFillBinding && nodeChange.fillPaints?.[0]?.colorVariableBinding) {
+    hex2 = injectVariableBinding(hex2, "2601", nodeChange.fillPaints[0].colorVariableBinding);
+  }
+  if (hasStrokeBinding && nodeChange.strokePaints?.[0]?.colorVariableBinding) {
+    hex2 = injectVariableBinding(hex2, "2701", nodeChange.strokePaints[0].colorVariableBinding);
+  }
+  return new Uint8Array(hex2.match(/.{2}/g).map((b2) => parseInt(b2, 16)));
+}
+function injectVariableBinding(hex2, marker, binding) {
+  const markerIdx = hex2.indexOf(marker);
+  if (markerIdx === -1)
+    return hex2;
+  const visiblePattern = "0401";
+  let patternIdx = hex2.indexOf(visiblePattern, markerIdx);
+  if (patternIdx === -1)
+    return hex2;
+  let insertPoint = patternIdx + visiblePattern.length;
+  if (hex2.slice(insertPoint, insertPoint + 4) === "0501") {
+    insertPoint += 4;
+  }
+  const varBytes = [
+    21,
+    1,
+    4,
+    1,
+    ...encodeVarint(binding.variableID.sessionID),
+    ...encodeVarint(binding.variableID.localID),
+    0,
+    0,
+    2,
+    3,
+    3,
+    4,
+    0,
+    0
+  ];
+  const varHex = Buffer.from(varBytes).toString("hex");
+  const beforeVar = hex2.slice(0, insertPoint);
+  let afterIdx = insertPoint;
+  if (hex2.slice(afterIdx, afterIdx + 2) === "00") {
+    afterIdx += 2;
+  }
+  const afterVar = hex2.slice(afterIdx);
+  return beforeVar + varHex + afterVar;
+}
 var compiledSchema = null;
 var init_codec = __esm(() => {
   init_kiwi_esm();
@@ -26796,6 +26953,27 @@ new Elysia().ws("/plugin", {
     const { client, sessionID } = await getMultiplayerConnection(fileKey);
     consola.info(`render: ${nodeChanges.length} nodes to ${fileKey}`);
     await client.sendNodeChangesSync(nodeChanges);
+    if (sendToPlugin) {
+      const rootId = `${nodeChanges[0].guid.sessionID}:${nodeChanges[0].guid.localID}`;
+      const layoutId = crypto.randomUUID();
+      try {
+        await new Promise((resolve, reject) => {
+          const timeout = setTimeout(() => {
+            pendingRequests.delete(layoutId);
+            reject(new Error("Layout trigger timeout"));
+          }, 5000);
+          pendingRequests.set(layoutId, { resolve: () => resolve(), reject, timeout });
+          sendToPlugin(JSON.stringify({
+            id: layoutId,
+            command: "trigger-layout",
+            args: {
+              nodeId: rootId,
+              pendingComponentSetInstances: body.pendingComponentSetInstances || []
+            }
+          }));
+        });
+      } catch {}
+    }
     const ids = nodeChanges.map((nc) => ({
       id: `${nc.guid.sessionID}:${nc.guid.localID}`,
       name: nc.name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dannote/figma-use",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Control Figma from the command line. Full read/write access for AI agents.",
   "type": "module",
   "bin": {

package/packages/plugin/dist/main.js

@@ -1184,10 +1184,76 @@
           const fn = new AsyncFunction("figma", wrappedCode);
           return yield fn(figma);
         }
+        // ==================== LAYOUT ====================
+        case "trigger-layout": {
+          const { nodeId, pendingComponentSetInstances } = args;
+          const root = yield figma.getNodeByIdAsync(nodeId);
+          if (!root) return null;
+          if (pendingComponentSetInstances && pendingComponentSetInstances.length > 0) {
+            for (const pending of pendingComponentSetInstances) {
+              const findComponentSet = (node) => {
+                if (node.type === "COMPONENT_SET" && node.name === pending.componentSetName) {
+                  return node;
+                }
+                if ("children" in node) {
+                  for (const child of node.children) {
+                    const found = findComponentSet(child);
+                    if (found) return found;
+                  }
+                }
+                return null;
+              };
+              const componentSet = findComponentSet(root);
+              if (!componentSet) continue;
+              const variantComp = componentSet.children.find(
+                (c) => c.type === "COMPONENT" && c.name === pending.variantName
+              );
+              if (!variantComp) continue;
+              const instance = variantComp.createInstance();
+              instance.x = pending.x;
+              instance.y = pending.y;
+              const parentId = `${pending.parentGUID.sessionID}:${pending.parentGUID.localID}`;
+              const parent = yield figma.getNodeByIdAsync(parentId);
+              if (parent && "appendChild" in parent) {
+                parent.appendChild(instance);
+              }
+            }
+          }
+          const fixRecursive = (node) => __async(null, null, function* () {
+            if ("children" in node) {
+              for (const child of node.children) {
+                yield fixRecursive(child);
+              }
+            }
+            if (node.type === "TEXT" && node.textAutoResize !== "NONE") {
+              try {
+                yield figma.loadFontAsync(node.fontName);
+                const chars = node.characters;
+                node.characters = "";
+                node.characters = chars;
+              } catch (e) {
+              }
+            }
+            if ("layoutMode" in node && node.layoutMode !== "NONE") {
+              const frame = node;
+              if (frame.width <= 1 && frame.height <= 1) {
+                frame.primaryAxisSizingMode = "AUTO";
+                frame.counterAxisSizingMode = "AUTO";
+                frame.resize(1.01, 1.01);
+                frame.resize(1, 1);
+              }
+            }
+          });
+          yield fixRecursive(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": {
@@ -1234,6 +1300,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();