@open-pencil/cli 0.7.0 → 0.9.0

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 { Color, 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: Color; 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('')
   }
 })

package/src/commands/pages.ts

@@ -1,38 +1,29 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../headless'
-import { bold, fmtList, entity, formatType } from '../format'
+import { isAppMode, requireFile, rpc } from '../app-client'
+import { bold, fmtList, entity } from '../format'
+
+import type { PageItem } from '@open-pencil/core'
+import { executeRpcCommand } from '@open-pencil/core'
+
+async function getData(file?: string): Promise<PageItem[]> {
+  if (isAppMode(file)) return rpc<PageItem[]>('pages')
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'pages', undefined) as PageItem[]
+}
 
 export default defineCommand({
   meta: { description: 'List pages in a .fig file' },
   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()
-
-    const countNodes = (pageId: string): number => {
-      let count = 0
-      const walk = (id: string) => {
-        count++
-        const n = graph.getNode(id)
-        if (n) for (const cid of n.childIds) walk(cid)
-      }
-      const page = graph.getNode(pageId)
-      if (page) for (const cid of page.childIds) walk(cid)
-      return count
-    }
+    const pages = await getData(args.file)
 
     if (args.json) {
-      console.log(
-        JSON.stringify(
-          pages.map((p) => ({ id: p.id, name: p.name, nodes: countNodes(p.id) })),
-          null,
-          2
-        )
-      )
+      console.log(JSON.stringify(pages, null, 2))
       return
     }
 
@@ -42,8 +33,8 @@ export default defineCommand({
     console.log(
       fmtList(
         pages.map((page) => ({
-          header: entity(formatType(page.type), page.name, page.id),
-          details: { nodes: countNodes(page.id) }
+          header: entity('page', page.name, page.id),
+          details: { nodes: page.nodes }
         })),
         { compact: true }
       )

package/src/commands/query.ts

@@ -0,0 +1,90 @@
+import { defineCommand } from 'citty'
+
+import { loadDocument } from '../headless'
+import { isAppMode, requireFile, rpc } from '../app-client'
+import { fmtList, printError, bold, entity, formatType } from '../format'
+import { executeRpcCommand } from '@open-pencil/core'
+
+import type { QueryNodeResult } from '@open-pencil/core'
+
+async function getData(
+  file: string | undefined,
+  args: { selector: string; page?: string; limit?: string }
+): Promise<QueryNodeResult[] | { error: string }> {
+  const rpcArgs = {
+    selector: args.selector,
+    page: args.page,
+    limit: args.limit ? Number(args.limit) : undefined
+  }
+  if (isAppMode(file)) return rpc<QueryNodeResult[]>('query', rpcArgs)
+  const graph = await loadDocument(requireFile(file))
+  return await executeRpcCommand(graph, 'query', rpcArgs) as QueryNodeResult[] | { error: string }
+}
+
+export default defineCommand({
+  meta: {
+    description: `Query nodes using XPath selectors
+
+Examples:
+  open-pencil query file.fig "//FRAME"                              # All frames
+  open-pencil query file.fig "//FRAME[@width < 300]"                # Frames narrower than 300px
+  open-pencil query file.fig "//COMPONENT[starts-with(@name, 'Button')]"  # Components starting with Button
+  open-pencil query file.fig "//SECTION/FRAME"                      # Direct frame children of sections
+  open-pencil query file.fig "//SECTION//TEXT"                       # All text inside sections
+  open-pencil query file.fig "//*[@cornerRadius > 0]"               # Any node with corner radius`
+  },
+  args: {
+    file: {
+      type: 'positional',
+      description: '.fig file path (omit to connect to running app)',
+      required: false
+    },
+    selector: {
+      type: 'positional',
+      description:
+        'XPath selector (e.g., //FRAME[@width < 300], //TEXT[contains(@name, "Label")])',
+      required: true
+    },
+    page: { type: 'string', description: 'Page name (default: all pages)' },
+    limit: { type: 'string', description: 'Max results (default: 1000)', default: '1000' },
+    json: { type: 'boolean', description: 'Output as JSON' }
+  },
+  async run({ args }) {
+    const results = await getData(args.file, {
+      selector: args.selector,
+      page: args.page,
+      limit: args.limit
+    })
+
+    if ('error' in results) {
+      printError(results.error)
+      process.exit(1)
+    }
+
+    if (args.json) {
+      console.log(JSON.stringify(results, null, 2))
+      return
+    }
+
+    if (results.length === 0) {
+      console.log('No nodes found.')
+      return
+    }
+
+    console.log('')
+    console.log(bold(`  Found ${results.length} node${results.length > 1 ? 's' : ''}`))
+    console.log('')
+    console.log(
+      fmtList(
+        results.map((n) => ({
+          header: entity(
+            formatType(n.type),
+            `${n.name}  ${n.width}×${n.height}`,
+            n.id
+          )
+        }))
+      )
+    )
+    console.log('')
+  }
+})

package/src/commands/tree.ts

@@ -1,59 +1,55 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../headless'
-import { fmtTree, nodeToTreeNode, printError, entity, formatType } from '../format'
-import type { SceneNode } from '@open-pencil/core'
+import { isAppMode, requireFile, rpc } from '../app-client'
+import { fmtTree, printError, entity, formatType } from '../format'
+import { executeRpcCommand } from '@open-pencil/core'
+
+import type { TreeResult, TreeNodeResult } from '@open-pencil/core'
+import type { TreeNode } from 'agentfmt'
+
+function toAgentfmtTree(node: TreeNodeResult, maxDepth: number, depth = 0): TreeNode {
+  const treeNode: TreeNode = {
+    header: entity(formatType(node.type), node.name, node.id)
+  }
+  if (node.children && depth < maxDepth) {
+    treeNode.children = node.children.map((c) => toAgentfmtTree(c, maxDepth, depth + 1))
+  }
+  return treeNode
+}
+
+async function getData(file: string | undefined, args: { page?: string; depth?: string }): Promise<TreeResult | { error: string }> {
+  const rpcArgs = { page: args.page, depth: args.depth ? Number(args.depth) : undefined }
+  if (isAppMode(file)) return rpc<TreeResult>('tree', rpcArgs)
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'tree', rpcArgs) as TreeResult | { error: string }
+}
 
 export default defineCommand({
   meta: { description: 'Print the node tree' },
   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 },
     page: { type: 'string', description: 'Page name (default: first page)' },
     depth: { type: 'string', description: 'Max depth (default: unlimited)' },
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
-    const pages = graph.getPages()
+    const data = await getData(args.file, args)
     const maxDepth = args.depth ? Number(args.depth) : Infinity
 
-    const page = args.page
-      ? pages.find((p) => p.name === args.page)
-      : pages[0]
-
-    if (!page) {
-      printError(`Page "${args.page}" not found. Available: ${pages.map((p) => p.name).join(', ')}`)
+    if ('error' in data) {
+      printError(data.error)
       process.exit(1)
     }
 
     if (args.json) {
-      const buildJson = (id: string, depth: number): unknown => {
-        const node = graph.getNode(id)
-        if (!node) return null
-        const result: Record<string, unknown> = {
-          id: node.id,
-          name: node.name,
-          type: node.type,
-          x: Math.round(node.x),
-          y: Math.round(node.y),
-          width: Math.round(node.width),
-          height: Math.round(node.height)
-        }
-        if (node.childIds.length > 0 && depth < maxDepth) {
-          result.children = node.childIds.map((cid) => buildJson(cid, depth + 1)).filter(Boolean)
-        }
-        return result
-      }
-      console.log(JSON.stringify(page.childIds.map((id) => buildJson(id, 0)), null, 2))
+      console.log(JSON.stringify(data.children, null, 2))
       return
     }
 
     const root = {
-      header: entity(formatType(page.type), page.name, page.id),
-      children: page.childIds
-        .map((id) => graph.getNode(id))
-        .filter((n): n is SceneNode => n !== undefined)
-        .map((child) => nodeToTreeNode(graph, child, maxDepth))
+      header: entity(formatType(data.page.type), data.page.name, data.page.id),
+      children: data.children.map((c) => toAgentfmtTree(c, maxDepth))
     }
 
     console.log('')

package/src/commands/variables.ts

@@ -1,82 +1,50 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../headless'
-import { bold, fmtList, fmtSummary } from '../format'
-import type { SceneGraph, Variable } from '@open-pencil/core'
+import { isAppMode, requireFile, rpc } from '../app-client'
+import { bold, entity, fmtList, fmtSummary } from '../format'
+import { executeRpcCommand } from '@open-pencil/core'
 
-function formatValue(variable: Variable, graph: SceneGraph): string {
-  const modeId = graph.getActiveModeId(variable.collectionId)
-  const raw = variable.valuesByMode[modeId]
-  if (raw === undefined) return '–'
+import type { VariablesResult } from '@open-pencil/core'
 
-  if (typeof raw === 'object' && raw !== null && 'aliasId' in raw) {
-    const alias = graph.variables.get(raw.aliasId)
-    return alias ? `→ ${alias.name}` : `→ ${raw.aliasId}`
-  }
-
-  if (typeof raw === 'object' && 'r' in raw) {
-    const { r, g, b } = raw as { r: number; g: number; b: number }
-    return (
-      '#' +
-      [r, g, b]
-        .map((c) =>
-          Math.round(c * 255)
-            .toString(16)
-            .padStart(2, '0')
-        )
-        .join('')
-    )
-  }
-
-  return String(raw)
+async function getData(file: string | undefined, args: { collection?: string; type?: string }): Promise<VariablesResult> {
+  const rpcArgs = { collection: args.collection, type: args.type }
+  if (isAppMode(file)) return rpc<VariablesResult>('variables', rpcArgs)
+  const graph = await loadDocument(requireFile(file))
+  return executeRpcCommand(graph, 'variables', rpcArgs) as VariablesResult
 }
 
 export default defineCommand({
   meta: { description: 'List design variables and collections' },
   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 },
     collection: { type: 'string', description: 'Filter by collection name' },
     type: { type: 'string', description: 'Filter by type: COLOR, FLOAT, STRING, BOOLEAN' },
     json: { type: 'boolean', description: 'Output as JSON' }
   },
   async run({ args }) {
-    const graph = await loadDocument(args.file)
+    const data = await getData(args.file, args)
 
-    const collections = [...graph.variableCollections.values()]
-    const variables = [...graph.variables.values()]
-
-    if (variables.length === 0) {
+    if (data.totalVariables === 0) {
       console.log('No variables found.')
       return
     }
 
     if (args.json) {
-      console.log(JSON.stringify({ collections, variables }, null, 2))
+      console.log(JSON.stringify(data, null, 2))
       return
     }
 
-    const typeFilter = args.type?.toUpperCase()
-    const collFilter = args.collection?.toLowerCase()
-
     console.log('')
 
-    for (const coll of collections) {
-      if (collFilter && !coll.name.toLowerCase().includes(collFilter)) continue
-
-      const collVars = graph
-        .getVariablesForCollection(coll.id)
-        .filter((v) => !typeFilter || v.type === typeFilter)
-
-      if (collVars.length === 0) continue
-
-      const modes = coll.modes.map((m) => m.name).join(', ')
-      console.log(bold(`  ${coll.name}`) + ` (${modes})`)
+    for (const coll of data.collections) {
+      console.log(bold(entity(coll.name, coll.modes.join(', '))))
       console.log('')
       console.log(
         fmtList(
-          collVars.map((v) => ({
+          coll.variables.map((v) => ({
             header: v.name,
-            details: { value: formatValue(v, graph), type: v.type.toLowerCase() }
+            details: { value: v.value, type: v.type.toLowerCase() }
           })),
           { compact: true }
         )
@@ -86,8 +54,8 @@ export default defineCommand({
 
     console.log(
       fmtSummary({
-        variables: variables.length,
-        collections: collections.length
+        variables: data.totalVariables,
+        collections: data.totalCollections
       })
     )
     console.log('')

package/src/format.ts

@@ -48,7 +48,7 @@ export function formatBox(node: SceneNode): string {
 function formatFill(node: SceneNode): string | null {
   if (!node.fills.length) return null
   const solid = node.fills.find((f) => f.type === 'SOLID' && f.visible)
-  if (!solid || solid.type !== 'SOLID') return null
+  if (!solid?.color) return null
   const { r, g, b } = solid.color
   const hex = '#' + [r, g, b].map((c) => Math.round(c * 255).toString(16).padStart(2, '0')).join('')
   return solid.opacity < 1 ? `${hex} ${Math.round(solid.opacity * 100)}%` : hex
@@ -56,7 +56,7 @@ function formatFill(node: SceneNode): string | null {
 
 function formatStroke(node: SceneNode): string | null {
   if (!node.strokes.length) return null
-  const s = node.strokes[0]!
+  const s = node.strokes[0]
   const { r, g, b } = s.color
   const hex = '#' + [r, g, b].map((c) => Math.round(c * 255).toString(16).padStart(2, '0')).join('')
   return `${hex} ${s.weight}px`

package/src/headless.ts

@@ -2,14 +2,14 @@ import CanvasKitInit from 'canvaskit-wasm/full'
 import type { CanvasKit } from 'canvaskit-wasm'
 import {
   parseFigFile,
-  SceneGraph,
+  type SceneGraph,
+  type ExportFormat,
   SkiaRenderer,
   computeAllLayouts,
   loadFont,
   renderNodesToImage,
   renderThumbnail
 } from '@open-pencil/core'
-import type { ExportFormat } from '@open-pencil/core'
 
 let ck: CanvasKit | null = null
 

package/src/index.ts

@@ -6,6 +6,7 @@ import evalCmd from './commands/eval'
 import exportCmd from './commands/export'
 import find from './commands/find'
 import info from './commands/info'
+import query from './commands/query'
 import node from './commands/node'
 import pages from './commands/pages'
 import tree from './commands/tree'
@@ -25,6 +26,7 @@ const main = defineCommand({
     export: exportCmd,
     find,
     info,
+    query,
     node,
     pages,
     tree,
@@ -32,4 +34,4 @@ const main = defineCommand({
   }
 })
 
-runMain(main)
+void runMain(main)