@zseven-w/pen-core 0.0.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zseven-w/pen-core",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "description": "Core document operations, tree utils, variables, layout engine for OpenPencil",
   "type": "module",
   "exports": {
@@ -16,7 +16,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@zseven-w/pen-types": "0.0.1",
+    "@zseven-w/pen-types": "0.6.0",
     "nanoid": "^5.1.6",
     "paper": "^0.12.18"
   },

package/src/__tests__/resolve-variables-recursive.test.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest'
+import type { PenNode } from '@zseven-w/pen-types'
+import { resolveNodeForCanvas } from '../variables/resolve'
+
+describe('resolveNodeForCanvas — recursive', () => {
+  const variables = {
+    spacing: { name: 'spacing', type: 'number' as const, value: 16 },
+    'bg-color': { name: 'bg-color', type: 'color' as const, value: '#ff0000' },
+  }
+
+  it('resolves $variable gap on nested child frame', () => {
+    const doc: PenNode = {
+      id: 'root', type: 'frame', x: 0, y: 0, width: 400, height: 600,
+      layout: 'vertical',
+      children: [
+        {
+          id: 'child', type: 'frame', x: 0, y: 0, width: 300, height: 200,
+          layout: 'vertical', gap: '$spacing' as unknown as number,
+          children: [
+            { id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello' },
+            { id: 'text2', type: 'text', x: 0, y: 0, content: 'World' },
+          ],
+        } as PenNode,
+      ],
+    } as PenNode
+
+    const result = resolveNodeForCanvas(doc, variables)
+    const childFrame = (result as any).children[0]
+    expect(childFrame.gap).toBe(16)
+  })
+
+  it('resolves $variable fill on deeply nested text node', () => {
+    const doc: PenNode = {
+      id: 'root', type: 'frame', x: 0, y: 0, width: 400, height: 600,
+      children: [
+        {
+          id: 'child', type: 'frame', x: 0, y: 0, width: 300, height: 200,
+          children: [
+            {
+              id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello',
+              fill: [{ type: 'solid', color: '$bg-color' }],
+            } as PenNode,
+          ],
+        } as PenNode,
+      ],
+    } as PenNode
+
+    const result = resolveNodeForCanvas(doc, variables)
+    const textNode = (result as any).children[0].children[0]
+    expect(textNode.fill[0].color).toBe('#ff0000')
+  })
+
+  it('resolves $variable padding on nested frame', () => {
+    const doc: PenNode = {
+      id: 'root', type: 'frame', x: 0, y: 0, width: 400, height: 600,
+      children: [
+        {
+          id: 'child', type: 'frame', x: 0, y: 0, width: 300, height: 200,
+          padding: '$spacing' as unknown as number,
+          children: [],
+        } as PenNode,
+      ],
+    } as PenNode
+
+    const result = resolveNodeForCanvas(doc, variables)
+    const childFrame = (result as any).children[0]
+    expect(childFrame.padding).toBe(16)
+  })
+
+  it('returns same reference when no variables exist', () => {
+    const doc: PenNode = {
+      id: 'root', type: 'frame', x: 0, y: 0, width: 400, height: 600,
+      children: [
+        { id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello' },
+      ],
+    } as PenNode
+
+    const result = resolveNodeForCanvas(doc, {})
+    expect(result).toBe(doc)
+  })
+
+  it('resolves $variable opacity on nested text node', () => {
+    const variables3 = {
+      'text-opacity': { name: 'text-opacity', type: 'number' as const, value: 0.5 },
+    }
+    const doc: PenNode = {
+      id: 'root', type: 'frame', x: 0, y: 0, width: 400, height: 600,
+      children: [
+        {
+          id: 'child', type: 'frame', x: 0, y: 0, width: 300, height: 200,
+          children: [
+            {
+              id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello',
+              opacity: '$text-opacity' as unknown as number,
+            } as PenNode,
+          ],
+        } as PenNode,
+      ],
+    } as PenNode
+
+    const result = resolveNodeForCanvas(doc, variables3)
+    const textNode = (result as any).children[0].children[0]
+    expect(textNode.opacity).toBe(0.5)
+  })
+
+  it('preserves reference when children have no variables', () => {
+    const variables2 = { color1: { name: 'color1', type: 'color' as const, value: '#000' } }
+    const doc: PenNode = {
+      id: 'root', type: 'frame', x: 0, y: 0, width: 400, height: 600,
+      children: [
+        { id: 'text1', type: 'text', x: 0, y: 0, content: 'Hello' },
+      ],
+    } as PenNode
+
+    const result = resolveNodeForCanvas(doc, variables2)
+    expect(result).toBe(doc)
+  })
+})

package/src/boolean-ops.ts

@@ -1,4 +1,3 @@
-import paper from 'paper'
 import { nanoid } from 'nanoid'
 import type { PenNode, PathNode } from '@zseven-w/pen-types'
 
@@ -8,9 +7,64 @@ export type BooleanOpType = 'union' | 'subtract' | 'intersect'
 // Paper.js scope — headless (no canvas needed)
 // ---------------------------------------------------------------------------
 
-let scope: paper.PaperScope | null = null
+interface PaperBoundsLike {
+  center: unknown
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+interface PaperPathItem {
+  bounds: PaperBoundsLike
+  pathData: string
+  translate: (point: unknown) => void
+  rotate: (angle: number, center: unknown) => void
+  unite: (path: PaperPathItem) => PaperPathItem
+  subtract: (path: PaperPathItem) => PaperPathItem
+  intersect: (path: PaperPathItem) => PaperPathItem
+  remove: () => void
+}
+
+interface PaperScope {
+  setup: (size: unknown) => void
+  activate: () => void
+  Size: new (width: number, height: number) => unknown
+  Point: new (x: number, y: number) => unknown
+  CompoundPath: {
+    create: (pathData: string) => PaperPathItem
+  }
+}
+
+interface PaperModule {
+  PaperScope: new () => PaperScope
+  Point: new (x: number, y: number) => unknown
+}
 
-function getScope(): paper.PaperScope {
+let paperModule: PaperModule | null | undefined
+let scope: PaperScope | null = null
+
+function getPaperModule(): PaperModule | null {
+  if (paperModule !== undefined) return paperModule
+  try {
+    // Indirect require via globalThis to load paper.js at runtime without
+    // triggering esbuild's direct-eval warning. The assignment to globalThis
+    // happens once; subsequent calls read from the cached paperModule.
+    const _r = (globalThis as any)['require'] as NodeRequire | undefined
+      ?? (typeof require !== 'undefined' ? require : undefined)
+    if (!_r) throw new Error('require not available')
+    paperModule = _r('paper') as PaperModule
+  } catch {
+    paperModule = null
+  }
+  return paperModule
+}
+
+function getScope(): PaperScope {
+  const paper = getPaperModule()
+  if (!paper) {
+    throw new Error('paper runtime is unavailable')
+  }
   if (!scope) {
     scope = new paper.PaperScope()
     scope.setup(new scope.Size(1, 1))
@@ -153,12 +207,12 @@ export function canBooleanOp(nodes: PenNode[]): boolean {
  * Create a Paper.js PathItem from a PenNode, positioned in absolute scene
  * coordinates (applying x, y, rotation).
  */
-function nodeToPaperPath(node: PenNode): paper.PathItem | null {
+function nodeToPaperPath(node: PenNode): PaperPathItem | null {
   const d = nodeToLocalPath(node)
   if (!d) return null
 
   const s = getScope()
-  let item: paper.PathItem
+  let item: PaperPathItem
   try {
     item = s.CompoundPath.create(d)
   } catch {
@@ -189,10 +243,12 @@ export function executeBooleanOp(
 ): PathNode | null {
   if (nodes.length < 2) return null
 
+  if (!getPaperModule()) return null
+
   const paperPaths = nodes.map(nodeToPaperPath)
   if (paperPaths.some((p) => p === null)) return null
 
-  const paths = paperPaths as paper.PathItem[]
+  const paths = paperPaths as PaperPathItem[]
 
   // Accumulate: fold left with the boolean operation
   let result = paths[0]
@@ -218,6 +274,8 @@ export function executeBooleanOp(
   const bounds = result.bounds
 
   // Translate path so it starts at origin (0,0)
+  const paper = getPaperModule()
+  if (!paper) return null
   result.translate(new paper.Point(-bounds.x, -bounds.y))
   const originPathData = result.pathData
 

package/src/layout/engine.ts

@@ -183,10 +183,7 @@ export function getNodeWidth(node: PenNode, parentAvail?: number): number {
         const fontSize = node.fontSize ?? 16
         const letterSpacing = node.letterSpacing ?? 0
         const fontWeight = node.fontWeight
-        const content =
-          typeof node.content === 'string'
-            ? node.content
-            : node.content.map((s2) => s2.text).join('')
+        const content = resolveTextContent(node)
         return Math.max(Math.ceil(estimateTextWidth(content, fontSize, letterSpacing, fontWeight)), 1)
       }
     }
@@ -203,10 +200,7 @@ export function getNodeWidth(node: PenNode, parentAvail?: number): number {
     const fontSize = node.fontSize ?? 16
     const letterSpacing = node.letterSpacing ?? 0
     const fontWeight = node.fontWeight
-    const content =
-      typeof node.content === 'string'
-        ? node.content
-        : node.content.map((s) => s.text).join('')
+    const content = resolveTextContent(node)
     return Math.max(Math.ceil(estimateTextWidthPrecise(content, fontSize, letterSpacing, fontWeight)), 1)
   }
   return 0

package/src/layout/text-measure.ts

@@ -136,9 +136,13 @@ export function estimateTextWidthPrecise(text: string, fontSize: number, letterS
 
 export function resolveTextContent(node: PenNode): string {
   if (node.type !== 'text') return ''
-  return typeof node.content === 'string'
-    ? node.content
-    : node.content.map((s) => s.text).join('')
+  if (typeof node.content === 'string') return node.content
+  if (Array.isArray(node.content)) return node.content.map((s) => s.text).join('')
+  // Fallback: MCP/CLI nodes may use `text` instead of `content`
+  if (typeof (node as unknown as Record<string, unknown>).text === 'string') {
+    return (node as unknown as Record<string, unknown>).text as string
+  }
+  return ''
 }
 
 export function countExplicitTextLines(text: string): number {

package/src/normalize.ts

@@ -65,6 +65,12 @@ function normalizeNode(node: PenNode): PenNode {
 
   // opacity — pass through ($variable strings preserved)
 
+  // text nodes: normalize `text` field to `content` (MCP/CLI use `text`, renderer expects `content`)
+  if (out.type === 'text' && !('content' in out) && typeof out.text === 'string') {
+    out.content = out.text as string
+    delete out.text
+  }
+
   // icon_font: default to lucide family
   if (out.type === 'icon_font' && !out.iconFontFamily) {
     out.iconFontFamily = 'lucide'

package/src/variables/resolve.ts

@@ -280,5 +280,18 @@ export function resolveNodeForCanvas(
     }
   }
 
+  // Recurse into children
+  if ('children' in node && node.children) {
+    const children = node.children
+    const resolvedChildren = children.map((child) =>
+      resolveNodeForCanvas(child, variables, activeTheme),
+    )
+    // Only allocate new array if any child actually changed
+    if (resolvedChildren.some((rc, i) => rc !== children[i])) {
+      out.children = resolvedChildren
+      changed = true
+    }
+  }
+
   return changed ? (out as unknown as PenNode) : node
 }