@nnao45/figma-use 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nnao45/figma-use",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Control Figma from the command line. Full read/write access for AI agents.",
   "keywords": [
     "ai",
@@ -63,9 +63,11 @@
     "agentfmt": "^0.1.3",
     "citty": "^0.1.6",
     "consola": "^3.4.2",
+    "d3": "^7.9.0",
     "diff": "^8.0.3",
     "esbuild": "^0.25.4",
     "fontoxpath": "^3.34.0",
+    "jsdom": "^27.0.1",
     "postcss": "^8.5.6",
     "svgpath": "^2.6.0",
     "typescript": "^5.8.3",
@@ -78,6 +80,8 @@
     "@iconify/types": "^2.0.0",
     "@iconify/utils": "^3.1.0",
     "@types/bun": "^1.3.6",
+    "@types/d3": "^7.4.3",
+    "@types/jsdom": "^27.0.0",
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.9",
     "@types/ws": "^8.18.1",

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

@@ -28,6 +28,10 @@ export function Line(props: BaseProps): TreeNode {
   return node('line', props)
 }
 
+export function Arrow(props: BaseProps): TreeNode {
+  return node('arrow', props)
+}
+
 export function Image(props: BaseProps & { src: string }): TreeNode {
   return node('image', props)
 }
@@ -70,6 +74,7 @@ export const INTRINSIC_ELEMENTS = [
   'rectangle',
   'ellipse',
   'line',
+  'arrow',
   'image',
   'svg',
   'star',

package/packages/plugin/src/main.ts

@@ -625,6 +625,29 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
     }
 
     case 'create-line': {
+      const { x, y, length, rotation, name, parentId, stroke, strokeWeight } = args as {
+        x: number
+        y: number
+        length: number
+        rotation?: number
+        name?: string
+        parentId?: string
+        stroke?: string
+        strokeWeight?: number
+      }
+      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 = [await createSolidPaint(stroke)]
+      if (strokeWeight !== undefined) line.strokeWeight = strokeWeight
+      await appendToParent(line, parentId)
+      return serializeNode(line)
+    }
+
+    case 'create-arrow': {
       const { x, y, length, rotation, name, parentId, stroke, strokeWeight, startCap, endCap } =
         args as {
           x: number
@@ -638,47 +661,28 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
           startCap?: string
           endCap?: string
         }
-      const startCapValue = normalizeLineCap(startCap)
-      const endCapValue = normalizeLineCap(endCap)
-      const useVector =
-        (startCapValue && startCapValue !== 'NONE') || (endCapValue && endCapValue !== 'NONE')
-
-      // If caps are specified, use VectorNetwork for independent start/end caps
-      if (useVector) {
-        const vector = figma.createVector()
-        vector.x = x
-        vector.y = y
-
-        vector.vectorNetwork = {
-          vertices: [
-            { x: 0, y: 0, strokeCap: startCapValue ?? 'NONE' },
-            { x: length, y: 0, strokeCap: endCapValue ?? 'NONE' }
-          ],
-          segments: [
-            { start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }
-          ],
-          regions: []
-        }
-
-        if (stroke) vector.strokes = [await createSolidPaint(stroke)]
-        if (strokeWeight !== undefined) vector.strokeWeight = strokeWeight
-        if (rotation) vector.rotation = rotation
-        if (name) vector.name = name
-        await appendToParent(vector, parentId)
-        return serializeNode(vector)
-      }
-
-      // No caps specified - use simple Line
-      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 = [await createSolidPaint(stroke)]
-      if (strokeWeight !== undefined) line.strokeWeight = strokeWeight
-      await appendToParent(line, parentId)
-      return serializeNode(line)
+      const startCapValue = normalizeLineCap(startCap) ?? 'NONE'
+      const endCapValue = normalizeLineCap(endCap) ?? 'ARROW_LINES'
+
+      const vector = figma.createVector()
+      vector.x = x
+      vector.y = y
+      vector.name = name || 'Arrow'
+
+      vector.vectorNetwork = {
+        vertices: [
+          { x: 0, y: 0, strokeCap: startCapValue },
+          { x: length, y: 0, strokeCap: endCapValue }
+        ],
+        segments: [{ start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }],
+        regions: []
+      }
+
+      if (stroke) vector.strokes = [await createSolidPaint(stroke)]
+      if (strokeWeight !== undefined) vector.strokeWeight = strokeWeight
+      if (rotation) vector.rotation = rotation
+      await appendToParent(vector, parentId)
+      return serializeNode(vector)
     }
 
     case 'create-polygon': {

package/packages/plugin/src/rpc.ts

@@ -899,6 +899,29 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
     }
 
     case 'create-line': {
+      const { x, y, length, rotation, name, parentId, stroke, strokeWeight } = args as {
+        x: number
+        y: number
+        length: number
+        rotation?: number
+        name?: string
+        parentId?: string
+        stroke?: string
+        strokeWeight?: number
+      }
+      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 = [await createSolidPaint(stroke)]
+      if (strokeWeight !== undefined) line.strokeWeight = strokeWeight
+      await appendToParent(line, parentId)
+      return serializeNode(line)
+    }
+
+    case 'create-arrow': {
       const { x, y, length, rotation, name, parentId, stroke, strokeWeight, startCap, endCap } =
         args as {
           x: number
@@ -912,47 +935,28 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
           startCap?: string
           endCap?: string
         }
-      const startCapValue = normalizeLineCap(startCap)
-      const endCapValue = normalizeLineCap(endCap)
-      const useVector =
-        (startCapValue && startCapValue !== 'NONE') || (endCapValue && endCapValue !== 'NONE')
-
-      // If caps are specified, use VectorNetwork for independent start/end caps
-      if (useVector) {
-        const vector = figma.createVector()
-        vector.x = x
-        vector.y = y
-
-        vector.vectorNetwork = {
-          vertices: [
-            { x: 0, y: 0, strokeCap: startCapValue ?? 'NONE' },
-            { x: length, y: 0, strokeCap: endCapValue ?? 'NONE' }
-          ],
-          segments: [
-            { start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }
-          ],
-          regions: []
-        }
-
-        if (stroke) vector.strokes = [await createSolidPaint(stroke)]
-        if (strokeWeight !== undefined) vector.strokeWeight = strokeWeight
-        if (rotation) vector.rotation = rotation
-        if (name) vector.name = name
-        await appendToParent(vector, parentId)
-        return serializeNode(vector)
-      }
-
-      // No caps specified - use simple Line
-      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 = [await createSolidPaint(stroke)]
-      if (strokeWeight !== undefined) line.strokeWeight = strokeWeight
-      await appendToParent(line, parentId)
-      return serializeNode(line)
+      const startCapValue = normalizeLineCap(startCap) ?? 'NONE'
+      const endCapValue = normalizeLineCap(endCap) ?? 'ARROW_LINES'
+
+      const vector = figma.createVector()
+      vector.x = x
+      vector.y = y
+      vector.name = name || 'Arrow'
+
+      vector.vectorNetwork = {
+        vertices: [
+          { x: 0, y: 0, strokeCap: startCapValue },
+          { x: length, y: 0, strokeCap: endCapValue }
+        ],
+        segments: [{ start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }],
+        regions: []
+      }
+
+      if (stroke) vector.strokes = [await createSolidPaint(stroke)]
+      if (strokeWeight !== undefined) vector.strokeWeight = strokeWeight
+      if (rotation) vector.rotation = rotation
+      await appendToParent(vector, parentId)
+      return serializeNode(vector)
     }
 
     case 'create-polygon': {
@@ -2631,30 +2635,25 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
         const isText = type === 'text'
         const processed = processProps(props || {}, isText)
 
-        // Handle <line> with startCap/endCap - mark for VectorNetwork replacement
-        if (type === 'line' && (props.startCap || props.endCap)) {
-          const startCapValue = normalizeLineCap(props.startCap as string | undefined)
-          const endCapValue = normalizeLineCap(props.endCap as string | undefined)
-          const useVector =
-            (startCapValue && startCapValue !== 'NONE') || (endCapValue && endCapValue !== 'NONE')
-
-          if (useVector) {
-            lineCapNodes.push({
-              path: [...path],
-              startCap: startCapValue,
-              endCap: endCapValue,
-              stroke: processed.stroke as string | undefined,
-              strokeWidth: processed.strokeWidth as number | undefined
-            })
-          }
+        // Handle <arrow> - mark for VectorNetwork with caps
+        if (type === 'arrow') {
+          const startCapValue = normalizeLineCap(props.startCap as string | undefined) ?? 'NONE'
+          const endCapValue = normalizeLineCap(props.endCap as string | undefined) ?? 'ARROW_LINES'
+
+          lineCapNodes.push({
+            path: [...path],
+            startCap: startCapValue,
+            endCap: endCapValue,
+            stroke: processed.stroke as string | undefined,
+            strokeWidth: processed.strokeWidth as number | undefined
+          })
 
-          // Don't pass startCap/endCap to Widget Line
+          // Create normal Line as placeholder (will be replaced)
           const cleanProps = { ...processed }
           delete cleanProps.startCap
           delete cleanProps.endCap
           delete cleanProps.__startCap
           delete cleanProps.__endCap
-          // Create normal Line as placeholder
           return h(Line, cleanProps)
         }