@dannote/figma-use 0.6.0 → 0.6.2

package/dist/proxy/index.js

@@ -180370,23 +180370,27 @@ function createNodeChange(opts) {
   };
   if (opts.fill) {
     const color = typeof opts.fill === "string" ? parseColor(opts.fill) : opts.fill;
-    change.fillPaints = [{
-      type: "SOLID",
-      color,
-      opacity: 1,
-      visible: true,
-      blendMode: "NORMAL"
-    }];
+    change.fillPaints = [
+      {
+        type: "SOLID",
+        color,
+        opacity: 1,
+        visible: true,
+        blendMode: "NORMAL"
+      }
+    ];
   }
   if (opts.stroke) {
     const color = typeof opts.stroke === "string" ? parseColor(opts.stroke) : opts.stroke;
-    change.strokePaints = [{
-      type: "SOLID",
-      color,
-      opacity: 1,
-      visible: true,
-      blendMode: "NORMAL"
-    }];
+    change.strokePaints = [
+      {
+        type: "SOLID",
+        color,
+        opacity: 1,
+        visible: true,
+        blendMode: "NORMAL"
+      }
+    ];
     change.strokeWeight = opts.strokeWeight ?? 1;
   }
   if (opts.cornerRadius !== undefined) {
@@ -209229,25 +209233,21 @@ var PORT = Number(process.env.PORT) || 38451;
 var MCP_VERSION = "2024-11-05";
 var TIMEOUT_LIGHT = 1e4;
 var TIMEOUT_HEAVY = 120000;
-var HEAVY_COMMANDS = new Set([
-  "export-node",
-  "screenshot",
-  "export-selection",
-  "eval"
-]);
+var HEAVY_COMMANDS = new Set(["export-node", "screenshot", "export-selection", "eval"]);
 var pendingRequests = new Map;
 var sendToPlugin = null;
-async function executeCommand(command, args) {
+async function executeCommand(command, args, timeoutMs) {
   if (!sendToPlugin) {
     throw new Error("Plugin not connected");
   }
   const id = crypto.randomUUID();
   const defaultTimeout = HEAVY_COMMANDS.has(command) ? TIMEOUT_HEAVY : TIMEOUT_LIGHT;
+  const timeoutDuration = timeoutMs ?? defaultTimeout;
   const result = await new Promise((resolve, reject) => {
     const timeout = setTimeout(() => {
       pendingRequests.delete(id);
       reject(new Error("Request timeout"));
-    }, defaultTimeout);
+    }, timeoutDuration);
     pendingRequests.set(id, { resolve, reject, timeout });
     sendToPlugin(JSON.stringify({ id, command, args }));
   });
@@ -209379,10 +209379,10 @@ new Elysia().ws("/plugin", {
     }
   }
 }).post("/command", async ({ body }) => {
-  const { command, args } = body;
+  const { command, args, timeout } = body;
   consola.info(`${command}`, args || "");
   try {
-    const result = await executeCommand(command, args);
+    const result = await executeCommand(command, args, timeout);
     return { result };
   } catch (e5) {
     consola.error(`${command} failed:`, e5 instanceof Error ? e5.message : e5);
@@ -209430,7 +209430,7 @@ new Elysia().ws("/plugin", {
     const { client, sessionID } = await getMultiplayerConnection(fileKey);
     consola.info(`render: ${nodeChanges.length} nodes to ${fileKey}`);
     try {
-      await client.sendNodeChangesSync(nodeChanges);
+      await client.sendNodeChangesSync(nodeChanges, 15000);
     } catch (codecError) {
       const msg = codecError instanceof Error ? codecError.message : String(codecError);
       if (msg.includes("Invalid value") && msg.includes("for enum")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dannote/figma-use",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Control Figma from the command line. Full read/write access for AI agents.",
   "type": "module",
   "bin": {
@@ -18,6 +18,8 @@
     "build:plugin": "cd packages/plugin && bun run build",
     "dev": "bun run packages/proxy/src/index.ts",
     "test": "cd packages/cli && bun test",
+    "lint": "oxlint packages/",
+    "format": "oxfmt --write packages/",
     "prepublishOnly": "bun run build"
   },
   "files": [
@@ -51,12 +53,14 @@
   "dependencies": {
     "citty": "^0.1.6",
     "consola": "^3.4.2",
-    "elysia": "^1.2.25",
-    "kiwi-schema": "^0.5.0"
+    "elysia": "^1.2.25"
   },
   "devDependencies": {
     "@types/bun": "^1.3.6",
     "esbuild": "^0.25.4",
+    "kiwi-schema": "^0.5.0",
+    "oxfmt": "^0.24.0",
+    "oxlint": "^1.39.0",
     "react": "19",
     "typescript": "^5.8.3"
   }

package/packages/cli/src/render/component-set.tsx

@@ -1,34 +1,34 @@
 /**
  * ComponentSet (variants) support
- * 
+ *
  * ## How ComponentSet works in Figma's multiplayer protocol
- * 
+ *
  * ComponentSet is NOT a separate node type - it's a FRAME with special fields:
  *   - type = FRAME (4)
  *   - isStateGroup = true (field 225)
  *   - stateGroupPropertyValueOrders (field 238) = [{property: "variant", values: ["A", "B"]}]
- * 
+ *
  * Children are SYMBOL (Component) nodes with names like "variant=Primary, size=Large".
  * Figma auto-generates componentPropertyDefinitions from these names.
- * 
+ *
  * ## Why Instances are created via Plugin API
- * 
+ *
  * IMPORTANT: Instance nodes with symbolData.symbolID CANNOT be created via multiplayer
  * when linking to components in the same batch. Figma reassigns GUIDs on receive,
  * breaking the symbolID references.
- * 
+ *
  * Example: We send SYMBOL with localID=100, Instance with symbolData.symbolID=100.
  * Figma receives and assigns new IDs: SYMBOL becomes 200, but Instance still
  * references 100 → broken link.
- * 
+ *
  * This works for defineComponent() because Component and first Instance are adjacent
  * in the node tree, but fails for ComponentSet where variant components are created
  * first, then instances are created as siblings of the ComponentSet.
- * 
+ *
  * Solution: Create the ComponentSet and variant Components via multiplayer (fast),
  * then create Instances via Plugin API in trigger-layout (correct linking).
  * The pendingComponentSetInstances array passes instance specs to the plugin.
- * 
+ *
  * Discovered through protocol sniffing - see scripts/sniff-ws.ts
  */
 
@@ -56,7 +56,7 @@ export function getComponentSetRegistry() {
 
 /**
  * Define a component with variants (ComponentSet)
- * 
+ *
  * @example
  * const Button = defineComponentSet('Button', {
  *   variant: ['Primary', 'Secondary'] as const,
@@ -66,7 +66,7 @@ export function getComponentSetRegistry() {
  *     <Text>{variant}</Text>
  *   </Frame>
  * ))
- * 
+ *
  * <Button variant="Primary" size="Large" />
  */
 export function defineComponentSet<V extends VariantDef>(
@@ -75,19 +75,26 @@ export function defineComponentSet<V extends VariantDef>(
   render: (props: VariantProps<V>) => React.ReactElement
 ): React.FC<Partial<VariantProps<V>> & { style?: Record<string, unknown> }> {
   const sym = Symbol(name)
-  componentSetRegistry.set(sym, { name, variants, render, symbol: sym } as ComponentSetDef<VariantDef>)
-  
-  const VariantInstance: React.FC<Partial<VariantProps<V>> & { style?: Record<string, unknown> }> = (props) => {
+  componentSetRegistry.set(sym, {
+    name,
+    variants,
+    render,
+    symbol: sym
+  } as ComponentSetDef<VariantDef>)
+
+  const VariantInstance: React.FC<
+    Partial<VariantProps<V>> & { style?: Record<string, unknown> }
+  > = (props) => {
     const { style, ...variantProps } = props
     return React.createElement('__component_set_instance__', {
       __componentSetSymbol: sym,
       __componentSetName: name,
       __variantProps: variantProps,
-      style,
+      style
     })
   }
   VariantInstance.displayName = name
-  
+
   return VariantInstance
 }
 
@@ -99,21 +106,21 @@ export function generateVariantCombinations<V extends VariantDef>(
 ): Array<VariantProps<V>> {
   const keys = Object.keys(variants) as (keyof V)[]
   if (keys.length === 0) return [{}] as Array<VariantProps<V>>
-  
+
   const result: Array<VariantProps<V>> = []
-  
+
   function combine(index: number, current: Partial<VariantProps<V>>) {
     if (index === keys.length) {
       result.push(current as VariantProps<V>)
       return
     }
-    
+
     const key = keys[index]
     for (const value of variants[key]) {
       combine(index + 1, { ...current, [key]: value })
     }
   }
-  
+
   combine(0, {})
   return result
 }
@@ -130,7 +137,9 @@ export function buildVariantName(props: Record<string, string>): string {
 /**
  * Build stateGroupPropertyValueOrders for ComponentSet
  */
-export function buildStateGroupPropertyValueOrders(variants: VariantDef): Array<{property: string, values: string[]}> {
+export function buildStateGroupPropertyValueOrders(
+  variants: VariantDef
+): Array<{ property: string; values: string[] }> {
   return Object.entries(variants).map(([property, values]) => ({
     property,
     values: [...values]

package/packages/cli/src/render/components.tsx

@@ -1,19 +1,19 @@
 /**
  * Figma-like React components
- * 
+ *
  * API inspired by react-figma but outputs JSON instead of Figma nodes
  */
 
 import * as React from 'react'
 
 // Re-export defineVars for use in .figma.tsx files
-export { 
-  defineVars, 
-  figmaVar, 
-  isVariable, 
+export {
+  defineVars,
+  figmaVar,
+  isVariable,
   loadVariablesIntoRegistry,
   isRegistryLoaded,
-  type FigmaVariable 
+  type FigmaVariable
 } from './vars.ts'
 
 // Component registry - tracks defined components and their instances
@@ -35,14 +35,14 @@ export function getComponentRegistry() {
 
 /**
  * Define a reusable Figma component
- * 
+ *
  * @example
  * const Button = defineComponent('Button',
  *   <Frame style={{ padding: 12, backgroundColor: "#3B82F6" }}>
  *     <Text style={{ color: "#FFF" }}>Click</Text>
  *   </Frame>
  * )
- * 
+ *
  * export default () => (
  *   <Frame>
  *     <Button />
@@ -56,17 +56,17 @@ export function defineComponent<P extends BaseProps = BaseProps>(
 ): React.FC<P> {
   const sym = Symbol(name)
   componentRegistry.set(sym, { name, element })
-  
+
   // Return a component that renders as a special marker
   const ComponentInstance: React.FC<P> = (props) => {
     return React.createElement('__component_instance__', {
       __componentSymbol: sym,
       __componentName: name,
-      ...props,
+      ...props
     })
   }
   ComponentInstance.displayName = name
-  
+
   return ComponentInstance
 }
 
@@ -99,7 +99,18 @@ interface Style {
 interface TextStyle extends Style {
   fontSize?: number
   fontFamily?: string
-  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
+  fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
   fontStyle?: 'normal' | 'italic'
   color?: string
   textAlign?: 'left' | 'center' | 'right'
@@ -130,8 +141,10 @@ interface InstanceProps extends BaseProps {
 }
 
 // Component factory - creates intrinsic element wrapper
-const c = <T extends BaseProps>(type: string): React.FC<T> => 
-  (props) => React.createElement(type, props)
+const c =
+  <T extends BaseProps>(type: string): React.FC<T> =>
+  (props) =>
+    React.createElement(type, props)
 
 // Components
 export const Frame = c<BaseProps>('frame')
@@ -150,6 +163,17 @@ export const View = Frame
 
 // All component names for JSX transform
 export const INTRINSIC_ELEMENTS = [
-  'Frame', 'Rectangle', 'Ellipse', 'Text', 'Line', 'Star', 
-  'Polygon', 'Vector', 'Component', 'Instance', 'Group', 'Page', 'View'
+  'Frame',
+  'Rectangle',
+  'Ellipse',
+  'Text',
+  'Line',
+  'Star',
+  'Polygon',
+  'Vector',
+  'Component',
+  'Instance',
+  'Group',
+  'Page',
+  'View'
 ] as const

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

@@ -2,23 +2,23 @@
  * React → Figma Renderer
  */
 
-export { 
-  renderToNodeChanges, 
+export {
+  renderToNodeChanges,
   resetRenderedComponents,
   getPendingComponentSetInstances,
   clearPendingComponentSetInstances,
-  type RenderOptions, 
+  type RenderOptions,
   type RenderResult,
-  type PendingComponentSetInstance,
+  type PendingComponentSetInstance
 } from './reconciler.ts'
-export { 
-  Frame, 
-  Rectangle, 
-  Ellipse, 
-  Text, 
-  Line, 
-  Star, 
-  Polygon, 
+export {
+  Frame,
+  Rectangle,
+  Ellipse,
+  Text,
+  Line,
+  Star,
+  Polygon,
   Vector,
   Component,
   Instance,
@@ -36,12 +36,12 @@ export {
   // Component definitions
   defineComponent,
   resetComponentRegistry,
-  getComponentRegistry,
+  getComponentRegistry
 } from './components.tsx'
 
 export {
   // ComponentSet (variants)
   defineComponentSet,
   resetComponentSetRegistry,
-  getComponentSetRegistry,
+  getComponentSetRegistry
 } from './component-set.tsx'