@nnao45/figma-use 0.1.0 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nnao45/figma-use",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Control Figma from the command line. Full read/write access for AI agents.",
   "keywords": [
     "ai",
@@ -55,6 +55,11 @@
     "build:fast": "bun build packages/cli/src/fast.ts --outfile dist/fast.mjs --target node --minify"
   },
   "dependencies": {
+    "@iconify-json/heroicons": "^1.2.3",
+    "@iconify-json/lucide": "^1.2.88",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/tabler": "^1.2.26",
     "agentfmt": "^0.1.3",
     "citty": "^0.1.6",
     "consola": "^3.4.2",

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

@@ -5,9 +5,25 @@ import { iconToSVG } from '@iconify/utils'
 
 import type { ReactNode } from './mini-react.ts'
 import type { Props, ReactElement } from './tree.ts'
-import type { IconifyIcon } from '@iconify/types'
+import type { IconifyIcon, IconifyJSON } from '@iconify/types'
+
+// Bundled icon sets (loaded on first use)
+import { icons as lucideIcons } from '@iconify-json/lucide'
+import { icons as mdiIcons } from '@iconify-json/mdi'
+import { icons as tablerIcons } from '@iconify-json/tabler'
+import { icons as heroiconsIcons } from '@iconify-json/heroicons'
+import { icons as phIcons } from '@iconify-json/ph'
+
+// Map of bundled icon sets
+const bundledIconSets: Record<string, IconifyJSON> = {
+  lucide: lucideIcons,
+  mdi: mdiIcons,
+  tabler: tablerIcons,
+  heroicons: heroiconsIcons,
+  ph: phIcons,
+}
 
-// Initialize API module
+// Initialize API module (for fallback to remote API)
 setAPIModule('', fetchAPIModule)
 
 export interface IconData {
@@ -23,14 +39,44 @@ const iconCache = new Map<string, IconData>()
 // Raw icon data cache (before size transformation)
 const rawIconCache = new Map<string, IconifyIcon>()
 
+/**
+ * Try to get icon from bundled icon sets
+ */
+function getBundledIcon(name: string): IconifyIcon | null {
+  const [prefix, iconName] = name.split(':')
+  if (!prefix || !iconName) return null
+
+  const iconSet = bundledIconSets[prefix]
+  if (!iconSet) return null
+
+  const iconData = iconSet.icons[iconName]
+  if (!iconData) return null
+
+  // Merge with default values from the icon set
+  return {
+    ...iconData,
+    width: iconData.width ?? iconSet.width ?? 24,
+    height: iconData.height ?? iconSet.height ?? 24,
+  }
+}
+
 /**
  * Load raw icon data (without size transformation)
+ * Tries bundled icon sets first, falls back to API
  */
 async function loadRawIcon(name: string): Promise<IconifyIcon | null> {
   if (rawIconCache.has(name)) {
     return rawIconCache.get(name)!
   }
 
+  // Try bundled icon sets first (no network needed)
+  const bundledIcon = getBundledIcon(name)
+  if (bundledIcon) {
+    rawIconCache.set(name, bundledIcon)
+    return bundledIcon
+  }
+
+  // Fallback to API for non-bundled icon sets
   const icon = await loadIcon(name)
   if (!icon) {
     return null
@@ -95,21 +141,34 @@ export async function preloadIcons(icons: Array<{ name: string; size?: number }>
   await Promise.all(icons.map(({ name, size }) => loadIconSvg(name, size || 24)))
 }
 
+/**
+ * Get list of bundled icon set prefixes
+ */
+export const bundledIconSetPrefixes = Object.keys(bundledIconSets)
+
+/**
+ * Check if an icon set is bundled (available offline)
+ */
+export function isIconSetBundled(prefix: string): boolean {
+  return prefix in bundledIconSets
+}
+
 /**
  * Get list of popular icon sets
+ * Sets marked with (bundled) are available offline
  */
 export const iconSets = {
-  mdi: 'Material Design Icons',
-  lucide: 'Lucide',
-  heroicons: 'Heroicons',
+  lucide: 'Lucide (bundled)',
+  mdi: 'Material Design Icons (bundled)',
+  tabler: 'Tabler Icons (bundled)',
+  heroicons: 'Heroicons (bundled)',
+  ph: 'Phosphor (bundled)',
   'heroicons-outline': 'Heroicons Outline',
   'heroicons-solid': 'Heroicons Solid',
-  tabler: 'Tabler Icons',
   'fa-solid': 'Font Awesome Solid',
   'fa-regular': 'Font Awesome Regular',
   'fa-brands': 'Font Awesome Brands',
   ri: 'Remix Icon',
-  ph: 'Phosphor',
   'ph-bold': 'Phosphor Bold',
   'ph-fill': 'Phosphor Fill',
   carbon: 'Carbon',

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

@@ -125,6 +125,26 @@ export interface StyleProps {
   // Other
   src?: string
   href?: string
+
+  // Line stroke caps (for start/end independently)
+  startCap?:
+    | 'none'
+    | 'round'
+    | 'square'
+    | 'arrow'
+    | 'arrow-equilateral'
+    | 'triangle'
+    | 'diamond'
+    | 'circle'
+  endCap?:
+    | 'none'
+    | 'round'
+    | 'square'
+    | 'arrow'
+    | 'arrow-equilateral'
+    | 'triangle'
+    | 'diamond'
+    | 'circle'
 }
 
 // Custom child type that allows TreeNode in JSX

package/packages/plugin/src/main.ts

@@ -57,6 +57,42 @@ function loadFont(family: string, style: string): Promise<void> | void {
   return promise
 }
 
+const LINE_CAP_VALUES = [
+  'none',
+  'round',
+  'square',
+  'arrow',
+  'arrow-lines',
+  'arrow-equilateral',
+  'triangle',
+  'diamond',
+  'circle'
+]
+
+const LINE_CAP_MAP: Record<string, StrokeCap> = {
+  none: 'NONE',
+  round: 'ROUND',
+  square: 'SQUARE',
+  arrow: 'ARROW_LINES',
+  'arrow-lines': 'ARROW_LINES',
+  'arrow-equilateral': 'ARROW_EQUILATERAL',
+  triangle: 'TRIANGLE_FILLED',
+  diamond: 'DIAMOND_FILLED',
+  circle: 'CIRCLE_FILLED'
+}
+
+function normalizeLineCap(cap?: string): StrokeCap | undefined {
+  if (!cap) return undefined
+  const key = cap.toLowerCase()
+  const mapped = LINE_CAP_MAP[key]
+  if (!mapped) {
+    throw new Error(
+      `Invalid stroke cap "${cap}". Allowed: ${LINE_CAP_VALUES.map((v) => `"${v}"`).join(', ')}`
+    )
+  }
+  return mapped
+}
+
 // Fast node creation for batch operations - skips full serialization
 async function createNodeFast(
   command: string,
@@ -589,16 +625,50 @@ 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 { x, y, length, rotation, name, parentId, stroke, strokeWeight, startCap, endCap } =
+        args as {
+          x: number
+          y: number
+          length: number
+          rotation?: number
+          name?: string
+          parentId?: string
+          stroke?: string
+          strokeWeight?: number
+          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

package/packages/plugin/src/rpc.ts

@@ -55,6 +55,42 @@ function loadFont(family: string, style: string): Promise<void> | void {
   return promise
 }
 
+const LINE_CAP_VALUES = [
+  'none',
+  'round',
+  'square',
+  'arrow',
+  'arrow-lines',
+  'arrow-equilateral',
+  'triangle',
+  'diamond',
+  'circle'
+]
+
+const LINE_CAP_MAP: Record<string, StrokeCap> = {
+  none: 'NONE',
+  round: 'ROUND',
+  square: 'SQUARE',
+  arrow: 'ARROW_LINES',
+  'arrow-lines': 'ARROW_LINES',
+  'arrow-equilateral': 'ARROW_EQUILATERAL',
+  triangle: 'TRIANGLE_FILLED',
+  diamond: 'DIAMOND_FILLED',
+  circle: 'CIRCLE_FILLED'
+}
+
+function normalizeLineCap(cap?: string): StrokeCap | undefined {
+  if (!cap) return undefined
+  const key = cap.toLowerCase()
+  const mapped = LINE_CAP_MAP[key]
+  if (!mapped) {
+    throw new Error(
+      `Invalid stroke cap "${cap}". Allowed: ${LINE_CAP_VALUES.map((v) => `"${v}"`).join(', ')}`
+    )
+  }
+  return mapped
+}
+
 // Fast node creation for batch operations - skips full serialization
 async function createNodeFast(
   command: string,
@@ -863,16 +899,50 @@ 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 { x, y, length, rotation, name, parentId, stroke, strokeWeight, startCap, endCap } =
+        args as {
+          x: number
+          y: number
+          length: number
+          rotation?: number
+          name?: string
+          parentId?: string
+          stroke?: string
+          strokeWeight?: number
+          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
@@ -2390,7 +2460,9 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
         overflow: '__overflow',
         shadow: '__shadow',
         blur: '__blur',
-        blendMode: '__blendMode'
+        blendMode: '__blendMode',
+        startCap: '__startCap',
+        endCap: '__endCap'
       }
 
       const DIRECTION_MAP: Record<string, string> = {
@@ -2433,6 +2505,17 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
         shadow?: string
         blur?: number
         blendMode?: string
+        startCap?: string
+        endCap?: string
+      }> = []
+
+      // Nodes that need vector replacement for stroke caps
+      const lineCapNodes: Array<{
+        path: number[]
+        startCap?: StrokeCap
+        endCap?: StrokeCap
+        stroke?: string
+        strokeWidth?: number
       }> = []
 
       function processProps(
@@ -2548,6 +2631,33 @@ 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
+            })
+          }
+
+          // Don't pass startCap/endCap to Widget Line
+          const cleanProps = { ...processed }
+          delete cleanProps.startCap
+          delete cleanProps.endCap
+          delete cleanProps.__startCap
+          delete cleanProps.__endCap
+          // Create normal Line as placeholder
+          return h(Line, cleanProps)
+        }
+
         // Track wrap nodes
         if (processed.__wrap) {
           wrapNodes.push({ path: [...path], rowGap: processed.__rowGap as number | undefined })
@@ -2579,7 +2689,9 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
           '__overflow',
           '__shadow',
           '__blur',
-          '__blendMode'
+          '__blendMode',
+          '__startCap',
+          '__endCap'
         ]
         for (const key of postKeys) {
           if (processed[key] !== undefined) {
@@ -2602,7 +2714,7 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
       }
 
       const widgetTree = buildTree(tree)
-      const node = await figma.createNodeFromJSXAsync(
+      let node = await figma.createNodeFromJSXAsync(
         widgetTree as Parameters<typeof figma.createNodeFromJSXAsync>[0]
       )
 
@@ -2797,6 +2909,94 @@ async function handleCommand(command: string, args?: unknown): Promise<unknown>
         }
       }
 
+      // Replace Line placeholders with Vector nodes for stroke cap support
+      const copyLineStyle = (from: LineNode, to: VectorNode) => {
+        const keys = [
+          'visible',
+          'locked',
+          'opacity',
+          'blendMode',
+          'effects',
+          'effectStyleId',
+          'fills',
+          'fillStyleId',
+          'strokes',
+          'strokeStyleId',
+          'strokeAlign',
+          'strokeJoin',
+          'strokeMiterLimit',
+          'dashPattern',
+          'layoutAlign',
+          'layoutGrow',
+          'layoutPositioning',
+          'constraints'
+        ]
+        for (const key of keys) {
+          const value = (from as Record<string, unknown>)[key]
+          if (value !== undefined && value !== figma.mixed) {
+            ;(to as Record<string, unknown>)[key] = value
+          }
+        }
+      }
+      for (const { path, startCap, endCap, stroke, strokeWidth } of lineCapNodes) {
+        let target: SceneNode = node
+        let parent: FrameNode | null = null
+        let childIndex = 0
+        for (let i = 0; i < path.length; i++) {
+          if ('children' in target) {
+            parent = target as FrameNode
+            childIndex = path[i]
+            target = parent.children[childIndex]
+          }
+        }
+        if (target && target.type === 'LINE') {
+          const lineNode = target as LineNode
+          const vector = figma.createVector()
+          vector.x = lineNode.x
+          vector.y = lineNode.y
+          vector.name = lineNode.name
+          vector.rotation = lineNode.rotation
+          const length = lineNode.width
+
+          vector.vectorNetwork = {
+            vertices: [
+              { x: 0, y: 0, strokeCap: startCap ?? 'NONE' },
+              { x: length, y: 0, strokeCap: endCap ?? 'NONE' }
+            ],
+            segments: [
+              { start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }
+            ],
+            regions: []
+          }
+
+          // Copy stroke properties
+          if (stroke) {
+            vector.strokes = [await createSolidPaint(stroke)]
+          } else if (lineNode.strokes.length > 0) {
+            vector.strokes = [...lineNode.strokes]
+          }
+          if (strokeWidth !== undefined) {
+            vector.strokeWeight = strokeWidth
+          } else {
+            vector.strokeWeight = lineNode.strokeWeight
+          }
+
+          copyLineStyle(lineNode, vector)
+
+          const lineParent = lineNode.parent
+          if (lineParent && 'insertChild' in lineParent) {
+            const index = lineParent.children.indexOf(lineNode as SceneNode)
+            lineParent.insertChild(index === -1 ? childIndex : index, vector)
+            lineNode.remove()
+            if (path.length === 0) node = vector
+          } else {
+            figma.currentPage.appendChild(vector)
+            lineNode.remove()
+            if (path.length === 0) node = vector
+          }
+        }
+      }
+
       // Attach to parent
       if (parentId) {
         const parent = await figma.getNodeByIdAsync(parentId)