@dannote/figma-use 0.6.2 → 0.7.0

package/dist/proxy/index.js

@@ -180461,11 +180461,13 @@ function encodeNodeChangeWithVariables(nodeChange) {
   }
   const baseBytes = compiledSchema.encodeNodeChange(cleanNodeChange);
   let hex4 = Buffer.from(baseBytes).toString("hex");
-  if (hasFillBinding && nodeChange.fillPaints?.[0]?.colorVariableBinding) {
-    hex4 = injectVariableBinding(hex4, "2601", nodeChange.fillPaints[0].colorVariableBinding);
+  const fillBinding = nodeChange.fillPaints?.[0]?.colorVariableBinding;
+  if (hasFillBinding && fillBinding) {
+    hex4 = injectVariableBinding(hex4, "2601", fillBinding);
   }
-  if (hasStrokeBinding && nodeChange.strokePaints?.[0]?.colorVariableBinding) {
-    hex4 = injectVariableBinding(hex4, "2701", nodeChange.strokePaints[0].colorVariableBinding);
+  const strokeBinding = nodeChange.strokePaints?.[0]?.colorVariableBinding;
+  if (hasStrokeBinding && strokeBinding) {
+    hex4 = injectVariableBinding(hex4, "2701", strokeBinding);
   }
   return new Uint8Array(hex4.match(/.{2}/g).map((b2) => parseInt(b2, 16)));
 }
@@ -209254,7 +209256,7 @@ async function executeCommand(command, args, timeoutMs) {
   return result;
 }
 var mcpSessions = new Map;
-async function handleMcpRequest(req, sessionId) {
+async function handleMcpRequest(req, _sessionId) {
   const { id, method, params } = req;
   try {
     switch (method) {
@@ -209414,7 +209416,7 @@ new Elysia().ws("/plugin", {
   pluginConnected: sendToPlugin !== null,
   multiplayer: getConnectionStatus()
 })).post("/render", async ({ body }) => {
-  const { fileKey, nodeChanges, parentGUID } = body;
+  const { fileKey, nodeChanges } = body;
   if (!fileKey) {
     return { error: "fileKey is required" };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dannote/figma-use",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Control Figma from the command line. Full read/write access for AI agents.",
   "type": "module",
   "bin": {
@@ -56,11 +56,18 @@
     "elysia": "^1.2.25"
   },
   "devDependencies": {
+    "@iconify/core": "^4.1.0",
+    "@iconify/types": "^2.0.0",
+    "@iconify/utils": "^3.1.0",
     "@types/bun": "^1.3.6",
+    "@types/pngjs": "^6.0.5",
+    "@types/ws": "^8.18.1",
     "esbuild": "^0.25.4",
     "kiwi-schema": "^0.5.0",
     "oxfmt": "^0.24.0",
     "oxlint": "^1.39.0",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0",
     "react": "19",
     "typescript": "^5.8.3"
   }

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

@@ -44,7 +44,11 @@ interface ComponentSetDef<V extends VariantDef> {
   symbol: symbol
 }
 
-const componentSetRegistry = new Map<symbol, ComponentSetDef<VariantDef>>()
+// Use global registry to avoid module duplication issues between bundled CLI and source imports
+const REGISTRY_KEY = '__figma_use_component_set_registry__'
+const componentSetRegistry: Map<symbol, ComponentSetDef<VariantDef>> =
+  (globalThis as Record<string, unknown>)[REGISTRY_KEY] as Map<symbol, ComponentSetDef<VariantDef>> ||
+  ((globalThis as Record<string, unknown>)[REGISTRY_KEY] = new Map<symbol, ComponentSetDef<VariantDef>>())
 
 export function resetComponentSetRegistry() {
   componentSetRegistry.clear()
@@ -115,8 +119,8 @@ export function generateVariantCombinations<V extends VariantDef>(
       return
     }
 
-    const key = keys[index]
-    for (const value of variants[key]) {
+    const key = keys[index]!
+    for (const value of variants[key]!) {
       combine(index + 1, { ...current, [key]: value })
     }
   }

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

@@ -70,53 +70,11 @@ export function defineComponent<P extends BaseProps = BaseProps>(
   return ComponentInstance
 }
 
-// Style types
-interface Style {
-  width?: number | string
-  height?: number | string
-  x?: number
-  y?: number
-  flexDirection?: 'row' | 'column'
-  justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between'
-  alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch'
-  gap?: number
-  padding?: number
-  paddingTop?: number
-  paddingRight?: number
-  paddingBottom?: number
-  paddingLeft?: number
-  backgroundColor?: string
-  opacity?: number
-  borderRadius?: number
-  borderTopLeftRadius?: number
-  borderTopRightRadius?: number
-  borderBottomLeftRadius?: number
-  borderBottomRightRadius?: number
-  borderWidth?: number
-  borderColor?: string
-}
+// Style types - use StyleProps from shorthands which includes both full and shorthand names
+import type { StyleProps } from './shorthands.ts'
 
-interface TextStyle extends Style {
-  fontSize?: number
-  fontFamily?: string
-  fontWeight?:
-    | 'normal'
-    | 'bold'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900'
-  fontStyle?: 'normal' | 'italic'
-  color?: string
-  textAlign?: 'left' | 'center' | 'right'
-  lineHeight?: number
-  letterSpacing?: number
-}
+type Style = StyleProps
+type TextStyle = StyleProps
 
 interface BaseProps {
   name?: string
@@ -140,6 +98,15 @@ interface InstanceProps extends BaseProps {
   componentId?: string
 }
 
+interface IconProps extends BaseProps {
+  /** Icon name in format "prefix:name" (e.g., "mdi:home", "lucide:star") */
+  icon: string
+  /** Icon size in pixels (default: 24) */
+  size?: number
+  /** Icon color (hex) */
+  color?: string
+}
+
 // Component factory - creates intrinsic element wrapper
 const c =
   <T extends BaseProps>(type: string): React.FC<T> =>
@@ -160,6 +127,7 @@ export const Instance = c<InstanceProps>('instance')
 export const Group = c<BaseProps>('group')
 export const Page = c<BaseProps>('page')
 export const View = Frame
+export const Icon = c<IconProps>('icon')
 
 // All component names for JSX transform
 export const INTRINSIC_ELEMENTS = [
@@ -175,5 +143,6 @@ export const INTRINSIC_ELEMENTS = [
   'Instance',
   'Group',
   'Page',
-  'View'
+  'View',
+  'Icon'
 ] as const

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

@@ -0,0 +1,163 @@
+import { loadIcon } from '@iconify/core/lib/api/icons'
+import { setAPIModule } from '@iconify/core/lib/api/modules'
+import { fetchAPIModule } from '@iconify/core/lib/api/modules/fetch'
+import { iconToSVG } from '@iconify/utils'
+import type { IconifyIcon } from '@iconify/types'
+import type { ReactElement, ReactNode } from 'react'
+
+// Initialize API module
+setAPIModule('', fetchAPIModule)
+
+export interface IconData {
+  svg: string
+  width: number
+  height: number
+  body: string
+  viewBox: { left: number; top: number; width: number; height: number }
+}
+
+const iconCache = new Map<string, IconData>()
+
+// Raw icon data cache (before size transformation)
+const rawIconCache = new Map<string, IconifyIcon>()
+
+/**
+ * Load raw icon data (without size transformation)
+ */
+async function loadRawIcon(name: string): Promise<IconifyIcon | null> {
+  if (rawIconCache.has(name)) {
+    return rawIconCache.get(name)!
+  }
+
+  const icon = await loadIcon(name)
+  if (!icon) {
+    return null
+  }
+
+  rawIconCache.set(name, icon)
+  return icon
+}
+
+/**
+ * Load icon from Iconify and return SVG string
+ * @param name Icon name in format "prefix:name" (e.g., "mdi:home", "lucide:star")
+ * @param size Optional size (default: 24)
+ */
+export async function loadIconSvg(name: string, size: number = 24): Promise<IconData | null> {
+  const cacheKey = `${name}@${size}`
+  
+  if (iconCache.has(cacheKey)) {
+    return iconCache.get(cacheKey)!
+  }
+
+  const icon = await loadRawIcon(name)
+  if (!icon) {
+    return null
+  }
+
+  const result = iconToSVG(icon, { height: size, width: size })
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" ${Object.entries(result.attributes).map(([k, v]) => `${k}="${v}"`).join(' ')}>${result.body}</svg>`
+  
+  const data: IconData = {
+    svg,
+    width: size,
+    height: size,
+    body: result.body,
+    viewBox: {
+      left: result.viewBox[0],
+      top: result.viewBox[1],
+      width: result.viewBox[2],
+      height: result.viewBox[3]
+    }
+  }
+  
+  iconCache.set(cacheKey, data)
+  return data
+}
+
+/**
+ * Get cached icon data (synchronous, for use in React components)
+ * Returns null if icon not preloaded
+ */
+export function getIconData(name: string, size: number = 24): IconData | null {
+  return iconCache.get(`${name}@${size}`) || null
+}
+
+/**
+ * Preload icons for use in JSX render
+ * Call before rendering to ensure icons are available synchronously
+ */
+export async function preloadIcons(icons: Array<{ name: string; size?: number }>): Promise<void> {
+  await Promise.all(icons.map(({ name, size }) => loadIconSvg(name, size || 24)))
+}
+
+/**
+ * Get list of popular icon sets
+ */
+export const iconSets = {
+  mdi: 'Material Design Icons',
+  lucide: 'Lucide',
+  heroicons: 'Heroicons',
+  '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',
+  fluent: 'Fluent UI',
+  ion: 'Ionicons',
+  bi: 'Bootstrap Icons'
+}
+
+/**
+ * Recursively collect Icon primitives from React element tree
+ */
+export function collectIcons(element: ReactElement): Array<{ name: string; size?: number }> {
+  const icons: Array<{ name: string; size?: number }> = []
+
+  function traverse(node: ReactNode): void {
+    if (!node || typeof node !== 'object') return
+
+    if (Array.isArray(node)) {
+      node.forEach(traverse)
+      return
+    }
+
+    const el = node as ReactElement
+    if (!el.type) return
+
+    if (el.type === 'icon') {
+      const props = el.props as { icon?: string; size?: number }
+      if (props.icon) {
+        icons.push({ name: props.icon, size: props.size })
+      }
+    }
+
+    if (typeof el.type === 'function') {
+      try {
+        const Component = el.type as (props: Record<string, unknown>) => ReactNode
+        const rendered = Component(el.props as Record<string, unknown>)
+        if (rendered) traverse(rendered)
+      } catch {
+        // Ignore render errors during collection
+      }
+    }
+
+    const props = el.props as { children?: ReactNode }
+    if (props.children) {
+      if (Array.isArray(props.children)) {
+        props.children.forEach(traverse)
+      } else {
+        traverse(props.children)
+      }
+    }
+  }
+
+  traverse(element)
+  return icons
+}

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

@@ -7,9 +7,12 @@ export {
   resetRenderedComponents,
   getPendingComponentSetInstances,
   clearPendingComponentSetInstances,
+  getPendingIcons,
+  clearPendingIcons,
   type RenderOptions,
   type RenderResult,
-  type PendingComponentSetInstance
+  type PendingComponentSetInstance,
+  type PendingIcon
 } from './reconciler.ts'
 export {
   Frame,
@@ -25,6 +28,7 @@ export {
   Group,
   Page,
   View,
+  Icon,
   INTRINSIC_ELEMENTS,
   // Variable bindings (StyleX-inspired)
   defineVars,
@@ -39,6 +43,8 @@ export {
   getComponentRegistry
 } from './components.tsx'
 
+export { preloadIcons, loadIconSvg, getIconData, collectIcons } from './icon.ts'
+
 export {
   // ComponentSet (variants)
   defineComponentSet,

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

@@ -34,14 +34,16 @@ import Reconciler from 'react-reconciler'
 import { consola } from 'consola'
 import type { NodeChange, Paint } from '../multiplayer/codec.ts'
 import { parseColor } from '../color.ts'
-import { isVariable, resolveVariable, type FigmaVariable } from './vars.ts'
+import { isVariable, resolveVariable } from './vars.ts'
 import { getComponentRegistry } from './components.tsx'
+import { normalizeStyle, type StyleProps } from './shorthands.ts'
 import {
   getComponentSetRegistry,
   generateVariantCombinations,
   buildVariantName,
   buildStateGroupPropertyValueOrders
 } from './component-set.tsx'
+import { getIconData } from './icon.ts'
 
 // Track rendered components: symbol -> GUID
 const renderedComponents = new Map<symbol, { sessionID: number; localID: number }>()
@@ -73,6 +75,25 @@ export function clearPendingComponentSetInstances() {
   pendingComponentSetInstances.length = 0
 }
 
+// Pending Icon imports to create via Plugin API
+export interface PendingIcon {
+  svg: string
+  parentGUID: { sessionID: number; localID: number }
+  childIndex: number
+  x: number
+  y: number
+  name: string
+}
+const pendingIcons: PendingIcon[] = []
+
+export function getPendingIcons(): PendingIcon[] {
+  return [...pendingIcons]
+}
+
+export function clearPendingIcons() {
+  pendingIcons.length = 0
+}
+
 export interface RenderOptions {
   sessionID: number
   parentGUID: { sessionID: number; localID: number }
@@ -107,7 +128,7 @@ function styleToNodeChange(
   position: string,
   textContent?: string
 ): NodeChange {
-  const style = (props.style || {}) as Record<string, unknown>
+  const style = normalizeStyle((props.style || {}) as StyleProps)
   const name = (props.name as string) || type
 
   const nodeChange: NodeChange = {
@@ -119,6 +140,11 @@ function styleToNodeChange(
     visible: true,
     opacity: typeof style.opacity === 'number' ? style.opacity : 1
   }
+  
+  // Disable clipsContent for FRAME (Figma default is true which hides overflowing content)
+  if (mapType(type) === 'FRAME') {
+    nodeChange.clipsContent = false
+  }
 
   // Size
   const width = style.width ?? props.width
@@ -254,10 +280,8 @@ function styleToNodeChange(
   const pb = style.paddingBottom ?? style.padding
   const pl = style.paddingLeft ?? style.padding
 
-  if (pt !== undefined)
-    (nodeChange as unknown as Record<string, unknown>).stackVerticalPadding = Number(pt)
-  if (pl !== undefined)
-    (nodeChange as unknown as Record<string, unknown>).stackHorizontalPadding = Number(pl)
+  if (pt !== undefined) nodeChange.stackVerticalPadding = Number(pt)
+  if (pl !== undefined) nodeChange.stackHorizontalPadding = Number(pl)
   if (pr !== undefined) nodeChange.stackPaddingRight = Number(pr)
   if (pb !== undefined) nodeChange.stackPaddingBottom = Number(pb)
 
@@ -298,27 +322,26 @@ function styleToNodeChange(
   // Text-specific
   if (type.toLowerCase() === 'text' && textContent) {
     // Text content via textData.characters
-    const nc = nodeChange as unknown as Record<string, unknown>
-    nc.textData = { characters: textContent }
-    nc.textAutoResize = 'WIDTH_AND_HEIGHT'
-    nc.textAlignVertical = 'TOP' // Required for text height calculation
+    nodeChange.textData = { characters: textContent }
+    nodeChange.textAutoResize = 'WIDTH_AND_HEIGHT'
+    nodeChange.textAlignVertical = 'TOP' // Required for text height calculation
 
-    if (style.fontSize) nc.fontSize = Number(style.fontSize)
+    if (style.fontSize) nodeChange.fontSize = Number(style.fontSize)
     // CRITICAL: lineHeight MUST be { value: 100, units: 'PERCENT' } for text to have height
     // Without this, TEXT nodes render with height=0 and are invisible
     // Discovered via sniffing Figma's own text creation - see scripts/sniff-text.ts
-    nc.lineHeight = { value: 100, units: 'PERCENT' }
+    nodeChange.lineHeight = { value: 100, units: 'PERCENT' }
     // fontName is ALWAYS required for TEXT nodes, even without explicit fontFamily
     const family = (style.fontFamily as string) || 'Inter'
     const fontStyle = mapFontWeight(style.fontWeight as string)
-    nc.fontName = {
+    nodeChange.fontName = {
       family,
       style: fontStyle,
       postscript: `${family}-${fontStyle}`.replace(/\s+/g, '')
     }
     if (style.textAlign) {
       const map: Record<string, string> = { left: 'LEFT', center: 'CENTER', right: 'RIGHT' }
-      nc.textAlignHorizontal = map[style.textAlign as string] || 'LEFT'
+      nodeChange.textAlignHorizontal = map[style.textAlign as string] || 'LEFT'
     }
     if (style.color) {
       const textColor = style.color
@@ -354,11 +377,10 @@ function styleToNodeChange(
   if (type.toLowerCase() === 'instance' && props.componentId) {
     const match = String(props.componentId).match(/(\d+):(\d+)/)
     if (match) {
-      const nc = nodeChange as unknown as Record<string, unknown>
-      nc.symbolData = {
+      nodeChange.symbolData = {
         symbolID: {
-          sessionID: parseInt(match[1], 10),
-          localID: parseInt(match[2], 10)
+          sessionID: parseInt(match[1]!, 10),
+          localID: parseInt(match[2]!, 10)
         }
       }
     }
@@ -408,9 +430,47 @@ function collectNodeChanges(
   sessionID: number,
   parentGUID: { sessionID: number; localID: number },
   position: string,
+  childIndex: number,
   result: NodeChange[],
   container: Container
 ): void {
+  // Handle Icon primitive
+  if (instance.type === 'icon') {
+    const props = instance.props as {
+      icon: string
+      size?: number
+      color?: string
+      name?: string
+      style?: Record<string, unknown>
+    }
+    const { icon: iconName, size = 24, color, name: nodeName, style = {} } = props
+    
+    const iconData = getIconData(iconName, size)
+    if (!iconData) {
+      consola.error(`Icon "${iconName}" not found. Did you call preloadIcons()?`)
+      return
+    }
+
+    // Replace currentColor with specified color
+    let svg = iconData.svg
+    if (color) {
+      svg = svg.replace(/currentColor/g, color)
+    } else {
+      svg = svg.replace(/currentColor/g, '#000000')
+    }
+
+    // Add to pending icons for Plugin API import
+    pendingIcons.push({
+      svg,
+      parentGUID,
+      childIndex,
+      x: (style.x as number) || 0,
+      y: (style.y as number) || 0,
+      name: nodeName || iconName.replace(':', '/')
+    })
+    return
+  }
+
   // Handle defineComponent instances
   if (instance.type === '__component_instance__') {
     const sym = instance.props.__componentSymbol as symbol
@@ -443,8 +503,8 @@ function collectNodeChanges(
       container.localIDCounter = componentResult.nextLocalID
 
       // Change first node to be SYMBOL type and add to results
-      if (componentResult.nodeChanges.length > 0) {
-        const rootChange = componentResult.nodeChanges[0]
+      const rootChange = componentResult.nodeChanges[0]
+      if (rootChange) {
         const originalRootGUID = { ...rootChange.guid }
 
         // Replace root node's guid with componentGUID
@@ -457,6 +517,7 @@ function collectNodeChanges(
         for (let i = 1; i < componentResult.nodeChanges.length; i++) {
           const child = componentResult.nodeChanges[i]
           if (
+            child &&
             child.parentIndex?.guid.localID === originalRootGUID.localID &&
             child.parentIndex?.guid.sessionID === originalRootGUID.sessionID
           ) {
@@ -493,8 +554,7 @@ function collectNodeChanges(
       }
 
       // Link to component
-      const nc = instanceChange as unknown as Record<string, unknown>
-      nc.symbolData = { symbolID: componentGUID }
+      instanceChange.symbolData = { symbolID: componentGUID }
 
       result.push(instanceChange)
     }
@@ -538,13 +598,12 @@ function collectNodeChanges(
         opacity: 1,
         size: { x: 1, y: 1 } // Will be auto-sized
       }
-      const setNc = setChange as unknown as Record<string, unknown>
-      setNc.isStateGroup = true
-      setNc.stateGroupPropertyValueOrders = buildStateGroupPropertyValueOrders(variants)
-      setNc.stackMode = 'HORIZONTAL'
-      setNc.stackSpacing = 20
-      setNc.stackPrimarySizing = 'RESIZE_TO_FIT'
-      setNc.stackCounterSizing = 'RESIZE_TO_FIT'
+      setChange.isStateGroup = true
+      setChange.stateGroupPropertyValueOrders = buildStateGroupPropertyValueOrders(variants)
+      setChange.stackMode = 'HORIZONTAL'
+      setChange.stackSpacing = 20
+      setChange.stackPrimarySizing = 'RESIZE_TO_FIT'
+      setChange.stackCounterSizing = 'RESIZE_TO_FIT'
 
       result.push(setChange)
 
@@ -564,8 +623,8 @@ function collectNodeChanges(
         })
         container.localIDCounter = variantResult.nextLocalID
 
-        if (variantResult.nodeChanges.length > 0) {
-          const rootChange = variantResult.nodeChanges[0]
+        const rootChange = variantResult.nodeChanges[0]
+        if (rootChange) {
           const originalRootGUID = { ...rootChange.guid }
 
           rootChange.guid = variantGUID
@@ -580,6 +639,7 @@ function collectNodeChanges(
           for (let j = 1; j < variantResult.nodeChanges.length; j++) {
             const child = variantResult.nodeChanges[j]
             if (
+              child &&
               child.parentIndex?.guid.localID === originalRootGUID.localID &&
               child.parentIndex?.guid.sessionID === originalRootGUID.sessionID
             ) {
@@ -641,7 +701,7 @@ function collectNodeChanges(
   const thisGUID = { sessionID, localID: instance.localID }
   instance.children.forEach((child, i) => {
     const childPosition = String.fromCharCode(33 + (i % 90))
-    collectNodeChanges(child, sessionID, thisGUID, childPosition, result, container)
+    collectNodeChanges(child, sessionID, thisGUID, childPosition, i, result, container)
   })
 }
 
@@ -845,6 +905,7 @@ export function renderToNodeChanges(
       options.sessionID,
       options.parentGUID,
       position,
+      i,
       nodeChanges,
       container
     )
@@ -860,8 +921,9 @@ export function renderToNodeChanges(
 function getDefaultVariants(variants: Record<string, readonly string[]>): Record<string, string> {
   const defaults: Record<string, string> = {}
   for (const [key, values] of Object.entries(variants)) {
-    if (values.length > 0) {
-      defaults[key] = values[0]
+    const firstValue = values[0]
+    if (firstValue !== undefined) {
+      defaults[key] = firstValue
     }
   }
   return defaults