@dannote/figma-use 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.2] - 2026-01-18
+
+### Fixed
+
+- Multiplayer connection works with Figma's updated protocol (sessionID now from plugin API)
+- Proxy properly handles file switches (closes stale connections)
+- `figma-use status` now shows full connection diagnostics (proxy, plugin, DevTools, file)
+
 ## [0.5.1] - 2026-01-18
 
 ### Added

package/SKILL.md

@@ -36,7 +36,7 @@ figma-use plugin
 
 ## JSX Rendering (Fastest Way)
 
-For complex layouts, use `render --stdin` with JSX. LLMs know React — no learning curve:
+For complex layouts, use `render --stdin` with pure JSX. No imports needed — elements are built-in:
 
 ```bash
 echo '<Frame style={{padding: 24, gap: 16, flexDirection: "column", backgroundColor: "#FFF", borderRadius: 12}}>
@@ -45,11 +45,34 @@ echo '<Frame style={{padding: 24, gap: 16, flexDirection: "column", backgroundCo
 </Frame>' | figma-use render --stdin
 ```
 
+**Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Group`
+
 **Style props:** `width`, `height`, `x`, `y`, `padding`, `paddingTop/Right/Bottom/Left`, `gap`, `flexDirection` (row|column), `justifyContent`, `alignItems`, `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, `opacity`, `fontSize`, `fontFamily`, `fontWeight`, `color`, `textAlign`
 
-**Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Group`
+### Buttons Example (3 sizes)
 
-For reusable components and variants, see `figma-use render --examples`.
+```bash
+echo '<Frame style={{gap: 16, flexDirection: "row", padding: 24}}>
+  <Frame name="Small" style={{paddingLeft: 12, paddingRight: 12, paddingTop: 6, paddingBottom: 6, backgroundColor: "#3B82F6", borderRadius: 6, flexDirection: "row", justifyContent: "center", alignItems: "center"}}>
+    <Text style={{fontSize: 12, color: "#FFF"}}>Button</Text>
+  </Frame>
+  <Frame name="Medium" style={{paddingLeft: 16, paddingRight: 16, paddingTop: 8, paddingBottom: 8, backgroundColor: "#3B82F6", borderRadius: 6, flexDirection: "row", justifyContent: "center", alignItems: "center"}}>
+    <Text style={{fontSize: 14, color: "#FFF"}}>Button</Text>
+  </Frame>
+  <Frame name="Large" style={{paddingLeft: 24, paddingRight: 24, paddingTop: 12, paddingBottom: 12, backgroundColor: "#3B82F6", borderRadius: 6, flexDirection: "row", justifyContent: "center", alignItems: "center"}}>
+    <Text style={{fontSize: 16, color: "#FFF"}}>Button</Text>
+  </Frame>
+</Frame>' | figma-use render --stdin
+```
+
+### Advanced: Components & Variants
+
+For `defineComponent`, `defineComponentSet`, `defineVars` — use files with imports:
+
+```bash
+figma-use render --examples  # Full API reference
+figma-use render ./MyComponent.figma.tsx
+```
 
 ---
 

package/dist/cli/index.js

@@ -22839,16 +22839,49 @@ async function getParentGUID() {
 
 // packages/cli/src/commands/status.ts
 var status_default = defineCommand({
-  meta: { description: "Check if plugin is connected" },
+  meta: { description: "Check connection status (plugin, DevTools, multiplayer)" },
   args: { json: { type: "boolean", description: "Output as JSON" } },
   async run({ args }) {
+    const result = {
+      proxy: false,
+      plugin: false,
+      devtools: false,
+      fileKey: null,
+      multiplayer: false
+    };
     try {
       const status = await getStatus();
-      console.log(status.pluginConnected ? "\u2713 Plugin connected" : "\u2717 Plugin not connected");
-    } catch {
-      console.log("\u2717 Proxy not running");
-      process.exit(1);
+      result.proxy = true;
+      result.plugin = status.pluginConnected;
+    } catch {}
+    try {
+      result.fileKey = await getFileKey();
+      result.devtools = true;
+      result.multiplayer = true;
+    } catch {}
+    if (args.json) {
+      console.log(JSON.stringify(result, null, 2));
+      return;
     }
+    console.log(result.proxy ? "\u2713 Proxy running" : "\u2717 Proxy not running (run: figma-use proxy)");
+    console.log(result.plugin ? "\u2713 Plugin connected" : "\u2717 Plugin not connected (open plugin in Figma)");
+    console.log(result.devtools ? "\u2713 DevTools available" : "\u2717 DevTools not available (run: figma --remote-debugging-port=9222)");
+    if (result.devtools) {
+      if (result.fileKey) {
+        console.log(`\u2713 Figma file ready (${result.fileKey})`);
+      } else {
+        console.log("\u2717 No Figma file open (open a file from figma.com, not local)");
+      }
+    }
+    if (result.proxy && result.plugin && result.multiplayer) {
+      console.log(`
+\u2713 Ready for render command`);
+    } else if (result.proxy && result.plugin) {
+      console.log(`
+\u26A0 CLI commands work, but render requires DevTools + Figma file`);
+    }
+    if (!result.proxy)
+      process.exit(1);
   }
 });
 // packages/cli/src/commands/proxy.ts

package/dist/proxy/index.js

@@ -4637,22 +4637,6 @@ var init_prompt = __esm(() => {
 });
 
 // packages/cli/src/multiplayer/protocol.ts
-function parseVarint(data, pos) {
-  let value = 0;
-  let shift = 0;
-  while (pos < data.length) {
-    const byte2 = data[pos];
-    if (byte2 === undefined)
-      break;
-    pos++;
-    value |= (byte2 & KIWI.VARINT_VALUE_MASK) << shift;
-    if (!(byte2 & KIWI.VARINT_CONTINUE_BIT)) {
-      break;
-    }
-    shift += KIWI.VARINT_BITS_PER_BYTE;
-  }
-  return [value, pos];
-}
 function isKiwiMessage(data) {
   return data.length >= 2 && data[0] === KIWI.MESSAGE_MARKER;
 }
@@ -4684,7 +4668,7 @@ function buildMultiplayerUrl(fileKey, trackingId) {
   });
   return `wss://www.figma.com/api/multiplayer/${fileKey}?${params}`;
 }
-var MESSAGE_TYPES, ZSTD_MAGIC, KIWI, SESSION_ID, FIG_WIRE_MAGIC = "fig-wire", PROTOCOL_VERSION = 151;
+var MESSAGE_TYPES, ZSTD_MAGIC, KIWI, FIG_WIRE_MAGIC = "fig-wire", PROTOCOL_VERSION = 151;
 var init_protocol = __esm(() => {
   MESSAGE_TYPES = {
     JOIN_START: 0,
@@ -4711,10 +4695,6 @@ var init_protocol = __esm(() => {
     VARINT_VALUE_MASK: 127,
     VARINT_BITS_PER_BYTE: 7
   };
-  SESSION_ID = {
-    MIN: 1e4,
-    MAX: 1e6
-  };
 });
 
 // node_modules/kiwi-schema/kiwi-esm.js
@@ -11868,12 +11848,6 @@ class FigmaMultiplayerClient {
           if (!isKiwiMessage(decompressed))
             return;
           const msgType = getKiwiMessageType(decompressed);
-          if (msgType === MESSAGE_TYPES.JOIN_START && decompressed[2] === KIWI.SESSION_ID_FIELD) {
-            const [val] = parseVarint(decompressed, 3);
-            if (val > SESSION_ID.MIN && val < SESSION_ID.MAX) {
-              sessionID = val;
-            }
-          }
           if (msgType === MESSAGE_TYPES.JOIN_END) {
             joinEndReceived = true;
           }
@@ -11890,10 +11864,10 @@ class FigmaMultiplayerClient {
               this.options.onMessage(message);
             } catch {}
           }
-          if (sessionID && reconnectSequenceNumber && joinEndReceived && (this.state === "connecting" || this.state === "connected")) {
+          if (joinEndReceived && (this.state === "connecting" || this.state === "connected")) {
             clearTimeout(timeout);
             this.state = "ready";
-            this.sessionInfo = { sessionID, reconnectSequenceNumber };
+            this.sessionInfo = { sessionID: sessionID || 0, reconnectSequenceNumber };
             resolve(this.sessionInfo);
           }
         } catch {}
@@ -11967,6 +11941,9 @@ class FigmaMultiplayerClient {
   isReady() {
     return this.state === "ready";
   }
+  isConnected() {
+    return this.state === "connected" && this.ws !== null && this.ws.readyState === WebSocket.OPEN;
+  }
   close() {
     if (this.ws) {
       this.ws.close();
@@ -26821,11 +26798,23 @@ function cleanupIdleConnections() {
 }
 async function getMultiplayerConnection(fileKey) {
   await ensureInitialized();
+  for (const [key, conn] of connectionPool) {
+    if (key !== fileKey) {
+      consola.info(`Closing stale connection to ${key} (switched to ${fileKey})`);
+      conn.client.close();
+      connectionPool.delete(key);
+    }
+  }
   const existing = connectionPool.get(fileKey);
   if (existing) {
-    existing.lastUsed = Date.now();
-    consola.debug(`Reusing multiplayer connection for ${fileKey}`);
-    return { client: existing.client, sessionID: existing.sessionID };
+    if (existing.client.isConnected()) {
+      existing.lastUsed = Date.now();
+      consola.debug(`Reusing multiplayer connection for ${fileKey}`);
+      return { client: existing.client, sessionID: existing.sessionID };
+    } else {
+      consola.warn(`Multiplayer connection to ${fileKey} died, reconnecting...`);
+      connectionPool.delete(fileKey);
+    }
   }
   consola.info(`Creating multiplayer connection for ${fileKey}`);
   const cookies = await getCookiesFromDevTools2();

package/package.json

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