@open-pencil/cli 0.7.0 → 0.8.0

package/src/commands/pages.ts

@@ -1,38 +1,29 @@
 import { defineCommand } from 'citty'
 
 import { loadDocument } from '../headless'
+import { isAppMode, requireFile, rpc } from '../app-client'
 import { bold, fmtList, entity, formatType } 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/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 { isAppMode, requireFile, rpc } from '../app-client'
 import { bold, fmtList, fmtSummary } from '../format'
-import type { SceneGraph, Variable } from '@open-pencil/core'
+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(`  ${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('')