@open-pencil/cli 0.7.0 → 0.8.0

package/src/commands/analyze/typography.ts

@@ -1,44 +1,11 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../../headless'
+import { isAppMode, requireFile, rpc } from '../../app-client'
 import { bold, fmtHistogram, fmtSummary } from '../../format'
-import type { SceneGraph } from '@open-pencil/core'
+import { executeRpcCommand } from '@open-pencil/core'
 
-interface TypographyStyle {
-  family: string
-  size: number
-  weight: number
-  lineHeight: string
-  count: number
-}
-
-function collectTypography(graph: SceneGraph): { styles: TypographyStyle[]; totalTextNodes: number } {
-  const styleMap = new Map<string, TypographyStyle>()
-  let totalTextNodes = 0
-
-  for (const node of graph.getAllNodes()) {
-    if (node.type !== 'TEXT') continue
-    totalTextNodes++
-
-    const lh = node.lineHeight === null ? 'auto' : `${node.lineHeight}px`
-    const key = `${node.fontFamily}|${node.fontSize}|${node.fontWeight}|${lh}`
-
-    const existing = styleMap.get(key)
-    if (existing) {
-      existing.count++
-    } else {
-      styleMap.set(key, {
-        family: node.fontFamily,
-        size: node.fontSize,
-        weight: node.fontWeight,
-        lineHeight: lh,
-        count: 1
-      })
-    }
-  }
-
-  return { styles: [...styleMap.values()], totalTextNodes }
-}
+import type { AnalyzeTypographyResult } from '@open-pencil/core'
 
 function weightName(w: number): string {
   if (w <= 100) return 'Thin'
@@ -52,88 +19,79 @@ function weightName(w: number): string {
   return 'Black'
 }
 
+async function getData(file?: string): Promise<AnalyzeTypographyResult> {
+  if (isAppMode(file)) return rpc<AnalyzeTypographyResult>('analyze_typography')
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'analyze_typography', {}) as AnalyzeTypographyResult
+}
+
 export default defineCommand({
   meta: { description: 'Analyze typography usage' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
-    'group-by': {
-      type: 'string',
-      description: 'Group by: family, size, weight (default: show all styles)'
-    },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
+    'group-by': { type: 'string', description: 'Group by: family, size, weight (default: show all styles)' },
     limit: { type: 'string', description: 'Max styles to show', default: '30' },
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
+    const data = await getData(args.file)
     const limit = Number(args.limit)
     const groupBy = args['group-by']
-    const { styles, totalTextNodes } = collectTypography(graph)
 
     if (args.json) {
-      console.log(JSON.stringify({ styles, totalTextNodes }, null, 2))
+      console.log(JSON.stringify(data, null, 2))
       return
     }
 
-    if (styles.length === 0) {
+    if (data.styles.length === 0) {
       console.log('No text nodes found.')
       return
     }
 
-    const sorted = styles.sort((a, b) => b.count - a.count)
-
     console.log('')
 
     if (groupBy === 'family') {
       const byFamily = new Map<string, number>()
-      for (const s of sorted) byFamily.set(s.family, (byFamily.get(s.family) ?? 0) + s.count)
+      for (const s of data.styles) byFamily.set(s.family, (byFamily.get(s.family) ?? 0) + s.count)
       console.log(bold('  Font families'))
       console.log('')
       console.log(
         fmtHistogram(
-          [...byFamily.entries()]
-            .sort((a, b) => b[1] - a[1])
-            .map(([family, count]) => ({ label: family, value: count }))
+          [...byFamily.entries()].sort((a, b) => b[1] - a[1]).map(([family, count]) => ({ label: family, value: count }))
         )
       )
     } else if (groupBy === 'size') {
       const bySize = new Map<number, number>()
-      for (const s of sorted) bySize.set(s.size, (bySize.get(s.size) ?? 0) + s.count)
+      for (const s of data.styles) bySize.set(s.size, (bySize.get(s.size) ?? 0) + s.count)
       console.log(bold('  Font sizes'))
       console.log('')
       console.log(
         fmtHistogram(
-          [...bySize.entries()]
-            .sort((a, b) => a[0] - b[0])
-            .map(([size, count]) => ({ label: `${size}px`, value: count }))
+          [...bySize.entries()].sort((a, b) => a[0] - b[0]).map(([size, count]) => ({ label: `${size}px`, value: count }))
         )
       )
     } else if (groupBy === 'weight') {
       const byWeight = new Map<number, number>()
-      for (const s of sorted) byWeight.set(s.weight, (byWeight.get(s.weight) ?? 0) + s.count)
+      for (const s of data.styles) byWeight.set(s.weight, (byWeight.get(s.weight) ?? 0) + s.count)
       console.log(bold('  Font weights'))
       console.log('')
       console.log(
         fmtHistogram(
-          [...byWeight.entries()]
-            .sort((a, b) => b[1] - a[1])
-            .map(([weight, count]) => ({ label: `${weight} ${weightName(weight)}`, value: count }))
+          [...byWeight.entries()].sort((a, b) => b[1] - a[1]).map(([weight, count]) => ({ label: `${weight} ${weightName(weight)}`, value: count }))
         )
       )
     } else {
       console.log(bold('  Typography styles'))
       console.log('')
-      const items = sorted.slice(0, limit).map((s) => {
+      const items = data.styles.slice(0, limit).map((s) => {
         const lh = s.lineHeight !== 'auto' ? ` / ${s.lineHeight}` : ''
-        return {
-          label: `${s.family} ${s.size}px ${weightName(s.weight)}${lh}`,
-          value: s.count
-        }
+        return { label: `${s.family} ${s.size}px ${weightName(s.weight)}${lh}`, value: s.count }
       })
       console.log(fmtHistogram(items))
     }
 
     console.log('')
-    console.log(fmtSummary({ 'unique styles': styles.length }) + ` from ${totalTextNodes} text nodes`)
+    console.log(fmtSummary({ 'unique styles': data.styles.length }) + ` from ${data.totalTextNodes} text nodes`)
     console.log('')
   }
 })

package/src/commands/eval.ts

@@ -3,6 +3,7 @@ import { defineCommand } from 'citty'
 import { FigmaAPI } from '@open-pencil/core'
 
 import { loadDocument } from '../headless'
+import { isAppMode, requireFile, rpc } from '../app-client'
 import { printError } from '../format'
 
 function serializeResult(value: unknown): unknown {
@@ -17,7 +18,7 @@ function serializeResult(value: unknown): unknown {
 export default defineCommand({
   meta: { description: 'Execute JavaScript with Figma plugin API' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
     code: { type: 'string', alias: 'c', description: 'JavaScript code to execute' },
     stdin: { type: 'boolean', description: 'Read code from stdin' },
     write: { type: 'boolean', alias: 'w', description: 'Write changes back to the input file' },
@@ -39,7 +40,20 @@ export default defineCommand({
       process.exit(1)
     }
 
-    const graph = await loadDocument(args.file)
+    if (isAppMode(args.file)) {
+      const result = await rpc<unknown>('eval', { code })
+      if (!args.quiet && result !== undefined && result !== null) {
+        if (args.json || !process.stdout.isTTY) {
+          console.log(JSON.stringify(result, null, 2))
+        } else {
+          console.log(result)
+        }
+      }
+      return
+    }
+
+    const file = requireFile(args.file)
+    const graph = await loadDocument(file)
     const figma = new FigmaAPI(graph)
 
     const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
@@ -67,9 +81,9 @@ export default defineCommand({
 
     if (args.write || args.output) {
       const { exportFigFile } = await import('@open-pencil/core')
-      const outPath = args.output ?? args.file
-      const data = exportFigFile(graph)
-      await Bun.write(outPath, data)
+      const outPath = args.output ?? file
+      const data = await exportFigFile(graph)
+      await Bun.write(outPath, new Uint8Array(data))
       if (!args.quiet) {
         console.error(`Written to ${outPath}`)
       }

package/src/commands/export.ts

@@ -1,36 +1,87 @@
 import { defineCommand } from 'citty'
 import { basename, extname, resolve } from 'node:path'
 
-import { renderNodesToSVG } from '@open-pencil/core'
+import { renderNodesToSVG, sceneNodeToJSX, selectionToJSX } from '@open-pencil/core'
 
 import { loadDocument, loadFonts, exportNodes, exportThumbnail } from '../headless'
+import { isAppMode, requireFile, rpc } from '../app-client'
 import { ok, printError } from '../format'
-import type { ExportFormat } from '@open-pencil/core'
+import type { ExportFormat, JSXFormat } from '@open-pencil/core'
 
 const RASTER_FORMATS = ['PNG', 'JPG', 'WEBP']
+const ALL_FORMATS = [...RASTER_FORMATS, 'SVG', 'JSX']
+const JSX_STYLES = ['openpencil', 'tailwind']
 
 export default defineCommand({
-  meta: { description: 'Export a .fig file to PNG, JPG, WEBP, or SVG' },
+  meta: { description: 'Export a .fig file to PNG, JPG, WEBP, SVG, or JSX' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
     output: { type: 'string', alias: 'o', description: 'Output file path (default: <name>.<format>)' },
-    format: { type: 'string', alias: 'f', description: 'Export format: png, jpg, webp, svg (default: png)', default: 'png' },
+    format: { type: 'string', alias: 'f', description: 'Export format: png, jpg, webp, svg, jsx (default: png)', default: 'png' },
     scale: { type: 'string', alias: 's', description: 'Export scale (default: 1)', default: '1' },
     quality: { type: 'string', alias: 'q', description: 'Quality 0-100 for JPG/WEBP (default: 90)' },
     page: { type: 'string', description: 'Page name (default: first page)' },
     node: { type: 'string', description: 'Node ID to export (default: all top-level nodes)' },
+    style: { type: 'string', description: 'JSX style: openpencil, tailwind (default: openpencil)', default: 'openpencil' },
     thumbnail: { type: 'boolean', description: 'Export page thumbnail instead of full render' },
     width: { type: 'string', description: 'Thumbnail width (default: 1920)', default: '1920' },
     height: { type: 'string', description: 'Thumbnail height (default: 1080)', default: '1080' }
   },
   async run({ args }) {
-    const format = args.format.toUpperCase() as ExportFormat
-    if (![...RASTER_FORMATS, 'SVG'].includes(format)) {
-      printError(`Invalid format "${args.format}". Use png, jpg, webp, or svg.`)
+    const format = args.format.toUpperCase() as ExportFormat | 'JSX'
+    if (!ALL_FORMATS.includes(format)) {
+      printError(`Invalid format "${args.format}". Use png, jpg, webp, svg, or jsx.`)
       process.exit(1)
     }
 
-    const graph = await loadDocument(args.file)
+    if (format === 'JSX' && !JSX_STYLES.includes(args.style)) {
+      printError(`Invalid JSX style "${args.style}". Use openpencil or tailwind.`)
+      process.exit(1)
+    }
+
+    if (isAppMode(args.file)) {
+      if (format === 'SVG') {
+        const result = await rpc<{ svg: string }>('tool', { name: 'export_svg', args: { ids: args.node ? [args.node] : undefined } })
+        if (!result.svg) {
+          printError('Nothing to export.')
+          process.exit(1)
+        }
+        const output = resolve(args.output ?? 'export.svg')
+        await Bun.write(output, result.svg)
+        console.log(ok(`Exported ${output} (${(result.svg.length / 1024).toFixed(1)} KB)`))
+        return
+      }
+
+      if (format === 'JSX') {
+        const result = await rpc<{ jsx: string }>('export_jsx', {
+          nodeIds: args.node ? [args.node] : undefined,
+          style: args.style
+        })
+        if (!result.jsx) {
+          printError('Nothing to export.')
+          process.exit(1)
+        }
+        const output = resolve(args.output ?? 'export.jsx')
+        await Bun.write(output, result.jsx)
+        console.log(ok(`Exported ${output} (${(result.jsx.length / 1024).toFixed(1)} KB)`))
+        return
+      }
+
+      const result = await rpc<{ base64: string }>('export', {
+        nodeIds: args.node ? [args.node] : undefined,
+        scale: Number(args.scale),
+        format: format.toLowerCase()
+      })
+      const data = Uint8Array.from(atob(result.base64), (c) => c.charCodeAt(0))
+      const ext = format.toLowerCase() === 'jpg' ? 'jpg' : format.toLowerCase()
+      const output = resolve(args.output ?? `export.${ext}`)
+      await Bun.write(output, data)
+      console.log(ok(`Exported ${output} (${(data.length / 1024).toFixed(1)} KB)`))
+      return
+    }
+
+    const file = requireFile(args.file)
+    const graph = await loadDocument(file)
     await loadFonts(graph)
 
     const pages = graph.getPages()
@@ -43,8 +94,27 @@ export default defineCommand({
       process.exit(1)
     }
 
+    const defaultName = basename(file, extname(file))
+
+    if (format === 'JSX') {
+      const jsxFormat = args.style as JSXFormat
+      const nodeIds = args.node ? [args.node] : page.childIds
+      const jsxStr = nodeIds.length === 1
+        ? sceneNodeToJSX(nodeIds[0], graph, jsxFormat)
+        : selectionToJSX(nodeIds, graph, jsxFormat)
+
+      if (!jsxStr) {
+        printError('Nothing to export (empty page or no visible nodes).')
+        process.exit(1)
+      }
+
+      const output = resolve(args.output ?? `${defaultName}.jsx`)
+      await Bun.write(output, jsxStr)
+      console.log(ok(`Exported ${output} (${(jsxStr.length / 1024).toFixed(1)} KB)`))
+      return
+    }
+
     const ext = format.toLowerCase() === 'jpg' ? 'jpg' : format.toLowerCase()
-    const defaultName = basename(args.file, extname(args.file))
     const output = resolve(args.output ?? `${defaultName}.${ext}`)
 
     if (format === 'SVG') {

package/src/commands/find.ts

@@ -1,13 +1,23 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../headless'
-import { fmtList, nodeToListItem, printError, bold } from '../format'
-import type { SceneNode } from '@open-pencil/core'
+import { isAppMode, requireFile, rpc } from '../app-client'
+import { fmtList, printError, bold, entity, formatType } from '../format'
+import { executeRpcCommand } from '@open-pencil/core'
+
+import type { FindNodeResult } from '@open-pencil/core'
+
+async function getData(file: string | undefined, args: { name?: string; type?: string; page?: string; limit?: string }): Promise<FindNodeResult[]> {
+  const rpcArgs = { name: args.name, type: args.type, page: args.page, limit: args.limit ? Number(args.limit) : undefined }
+  if (isAppMode(file)) return rpc<FindNodeResult[]>('find', rpcArgs)
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'find', rpcArgs) as FindNodeResult[]
+}
 
 export default defineCommand({
   meta: { description: 'Find nodes by name or type' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
     name: { type: 'string', description: 'Node name (partial match, case-insensitive)' },
     type: { type: 'string', description: 'Node type: FRAME, TEXT, RECTANGLE, INSTANCE, etc.' },
     page: { type: 'string', description: 'Page name (default: all pages)' },
@@ -15,43 +25,10 @@ export default defineCommand({
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
-    const pages = graph.getPages()
-    const max = Number(args.limit)
-    const namePattern = args.name?.toLowerCase()
-    const typeFilter = args.type?.toUpperCase()
-
-    const results: SceneNode[] = []
-
-    const searchPage = (pageNode: SceneNode) => {
-      const walk = (id: string) => {
-        if (results.length >= max) return
-        const node = graph.getNode(id)
-        if (!node) return
-        const matchesName = !namePattern || node.name.toLowerCase().includes(namePattern)
-        const matchesType = !typeFilter || node.type === typeFilter
-        if (matchesName && matchesType) results.push(node)
-        for (const childId of node.childIds) walk(childId)
-      }
-      for (const childId of pageNode.childIds) walk(childId)
-    }
-
-    if (args.page) {
-      const page = pages.find((p) => p.name === args.page)
-      if (!page) {
-        printError(`Page "${args.page}" not found.`)
-        process.exit(1)
-      }
-      searchPage(page)
-    } else {
-      for (const page of pages) searchPage(page)
-    }
+    const results = await getData(args.file, args)
 
     if (args.json) {
-      console.log(JSON.stringify(results.map((n) => ({
-        id: n.id, name: n.name, type: n.type,
-        width: Math.round(n.width), height: Math.round(n.height)
-      })), null, 2))
+      console.log(JSON.stringify(results, null, 2))
       return
     }
 
@@ -63,7 +40,13 @@ export default defineCommand({
     console.log('')
     console.log(bold(`  Found ${results.length} node${results.length > 1 ? 's' : ''}`))
     console.log('')
-    console.log(fmtList(results.map(nodeToListItem)))
+    console.log(
+      fmtList(
+        results.map((n) => ({
+          header: entity(formatType(n.type), n.name, n.id)
+        }))
+      )
+    )
     console.log('')
   }
 })

package/src/commands/info.ts

@@ -1,57 +1,45 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../headless'
+import { isAppMode, requireFile, rpc } from '../app-client'
 import { bold, fmtHistogram, fmtSummary, kv } from '../format'
-import type { SceneNode } from '@open-pencil/core'
+
+import type { InfoResult } from '@open-pencil/core'
+import { executeRpcCommand } from '@open-pencil/core'
+
+async function getData(file?: string): Promise<InfoResult> {
+  if (isAppMode(file)) return rpc<InfoResult>('info')
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'info', undefined) as InfoResult
+}
 
 export default defineCommand({
   meta: { description: 'Show document info (pages, node counts, fonts)' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
-    const pages = graph.getPages()
-
-    let totalNodes = 0
-    const types: Record<string, number> = {}
-    const fonts = new Set<string>()
-    const pageCounts: Record<string, number> = {}
-
-    for (const page of pages) {
-      let pageCount = 0
-      const walk = (id: string) => {
-        const node = graph.getNode(id) as SceneNode | undefined
-        if (!node) return
-        totalNodes++
-        pageCount++
-        types[node.type] = (types[node.type] ?? 0) + 1
-        if (node.fontFamily) fonts.add(node.fontFamily)
-        for (const childId of node.childIds) walk(childId)
-      }
-      for (const childId of page.childIds) walk(childId)
-      pageCounts[page.name] = pageCount
-    }
+    const data = await getData(args.file)
 
     if (args.json) {
-      console.log(JSON.stringify({ pages: pages.length, totalNodes, types, fonts: [...fonts].sort(), pageCounts }, null, 2))
+      console.log(JSON.stringify(data, null, 2))
       return
     }
 
     console.log('')
-    console.log(bold(`  ${pages.length} pages, ${totalNodes} nodes`))
+    console.log(bold(`  ${data.pages} pages, ${data.totalNodes} nodes`))
     console.log('')
 
-    const pageItems = Object.entries(pageCounts).map(([label, value]) => ({ label, value }))
+    const pageItems = Object.entries(data.pageCounts).map(([label, value]) => ({ label, value }))
     console.log(fmtHistogram(pageItems, { unit: 'nodes' }))
 
     console.log('')
-    console.log(fmtSummary(types))
+    console.log(fmtSummary(data.types))
 
-    if (fonts.size > 0) {
+    if (data.fonts.length > 0) {
       console.log('')
-      console.log(kv('Fonts', [...fonts].sort().join(', ')))
+      console.log(kv('Fonts', data.fonts.join(', ')))
     }
     console.log('')
   }

package/src/commands/node.ts

@@ -1,83 +1,73 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../headless'
-import { fmtNode, fmtList, nodeToData, nodeDetails, formatType, printError } from '../format'
-import type { SceneNode, SceneGraph } from '@open-pencil/core'
+import { isAppMode, requireFile, rpc } from '../app-client'
+import { fmtNode, printError, formatType } from '../format'
+import { executeRpcCommand, colorToHex } from '@open-pencil/core'
 
-function fullNodeDetails(graph: SceneGraph, node: SceneNode): Record<string, unknown> {
-  const details = nodeDetails(node)
+import type { NodeResult } from '@open-pencil/core'
 
-  const parent = node.parentId ? graph.getNode(node.parentId) : undefined
-  if (parent) details.parent = `${parent.name} (${parent.id})`
-
-  if (node.text) {
-    details.text = node.text.length > 80 ? node.text.slice(0, 80) + '…' : node.text
-  }
-
-  if (node.childIds.length > 0) details.children = node.childIds.length
-
-  for (const [field, varId] of Object.entries(node.boundVariables)) {
-    const variable = graph.variables.get(varId)
-    details[`var:${field}`] = variable?.name ?? varId
-  }
-
-  return details
+async function getData(file: string | undefined, id: string): Promise<NodeResult | { error: string }> {
+  if (isAppMode(file)) return rpc<NodeResult>('node', { id })
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'node', { id }) as NodeResult | { error: string }
 }
 
 export default defineCommand({
   meta: { description: 'Show detailed node properties by ID' },
   args: {
-    file: { type: 'positional', description: '.fig file path', required: true },
+    file: { type: 'positional', description: '.fig file path (omit to connect to running app)', required: false },
     id: { type: 'string', description: 'Node ID', required: true },
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
-    const node = graph.getNode(args.id)
+    const data = await getData(args.file, args.id)
 
-    if (!node) {
-      printError(`Node "${args.id}" not found.`)
+    if ('error' in data) {
+      printError(data.error)
       process.exit(1)
     }
 
     if (args.json) {
-      const { childIds, parentId, ...rest } = node
-      const children = childIds.length
-      const parent = parentId ? graph.getNode(parentId) : undefined
-      console.log(
-        JSON.stringify(
-          {
-            ...rest,
-            parent: parent ? { id: parent.id, name: parent.name, type: parent.type } : null,
-            children
-          },
-          null,
-          2
-        )
-      )
+      console.log(JSON.stringify(data, null, 2))
       return
     }
 
-    console.log('')
-    console.log(fmtNode(nodeToData(node), fullNodeDetails(graph, node)))
-
-    if (node.childIds.length > 0) {
-      const children = node.childIds
-        .map((id) => graph.getNode(id))
-        .filter((n): n is SceneNode => n !== undefined)
-        .slice(0, 10)
-        .map((child) => ({
-          header: `[${formatType(child.type)}] "${child.name}" (${child.id})`
-        }))
+    const nodeData = {
+      type: formatType(data.type),
+      name: data.name,
+      id: data.id,
+      width: data.width,
+      height: data.height,
+      x: data.x,
+      y: data.y
+    }
 
-      if (node.childIds.length > 10) {
-        children.push({ header: `… and ${node.childIds.length - 10} more` })
+    const details: Record<string, unknown> = {}
+    if (data.parent) details.parent = `${data.parent.name} (${data.parent.id})`
+    if (data.text) details.text = data.text
+    if (data.fills.length > 0) {
+      const solid = (data.fills as Array<{ type: string; visible: boolean; color: { r: number; g: number; b: number; a: number }; opacity: number }>)
+        .find((f) => f.type === 'SOLID' && f.visible)
+      if (solid) {
+        const hex = colorToHex(solid.color)
+        details.fill = solid.opacity < 1 ? `${hex} ${Math.round(solid.opacity * 100)}%` : hex
       }
-
-      console.log('')
-      console.log(fmtList(children, { compact: true }))
+    }
+    if (data.cornerRadius) details.radius = `${data.cornerRadius}px`
+    if (data.rotation) details.rotate = `${Math.round(data.rotation)}°`
+    if (data.opacity < 1) details.opacity = data.opacity
+    if (!data.visible) details.visible = false
+    if (data.locked) details.locked = true
+    if (data.fontFamily) details.font = `${data.fontSize}px ${data.fontFamily}`
+    if (data.layoutMode !== 'NONE') details.layout = data.layoutMode.toLowerCase()
+    if (data.children > 0) details.children = data.children
+    for (const [field, name] of Object.entries(data.boundVariables)) {
+      details[`var:${field}`] = name
     }
 
     console.log('')
+    console.log(fmtNode(nodeData, details))
+    console.log('')
   }
 })