@zseven-w/pen-core 0.0.1

package/src/__tests__/tree-utils.test.ts

@@ -0,0 +1,170 @@
+import { describe, it, expect } from 'vitest'
+import type { PenNode, PenDocument } from '@zseven-w/pen-types'
+import {
+  createEmptyDocument,
+  findNodeInTree,
+  findParentInTree,
+  removeNodeFromTree,
+  updateNodeInTree,
+  flattenNodes,
+  insertNodeInTree,
+  isDescendantOf,
+  getActivePageChildren,
+  setActivePageChildren,
+  migrateToPages,
+  DEFAULT_FRAME_ID,
+  DEFAULT_PAGE_ID,
+} from '../tree-utils'
+
+const frame = (id: string, children: PenNode[] = []): PenNode => ({
+  id, type: 'frame', name: id, x: 0, y: 0, width: 100, height: 100,
+  fill: [{ type: 'solid', color: '#fff' }], children,
+})
+
+const rect = (id: string): PenNode => ({
+  id, type: 'rectangle', x: 0, y: 0, width: 50, height: 50,
+})
+
+describe('tree-utils', () => {
+  describe('createEmptyDocument', () => {
+    it('creates a document with a default page and root frame', () => {
+      const doc = createEmptyDocument()
+      expect(doc.version).toBe('1.0.0')
+      expect(doc.pages).toHaveLength(1)
+      expect(doc.pages![0].id).toBe(DEFAULT_PAGE_ID)
+      expect(doc.pages![0].children).toHaveLength(1)
+      expect(doc.pages![0].children[0].id).toBe(DEFAULT_FRAME_ID)
+    })
+  })
+
+  describe('findNodeInTree', () => {
+    it('finds a node by id at root level', () => {
+      const nodes = [rect('a'), rect('b')]
+      expect(findNodeInTree(nodes, 'b')?.id).toBe('b')
+    })
+
+    it('finds a nested node', () => {
+      const nodes = [frame('parent', [rect('child')])]
+      expect(findNodeInTree(nodes, 'child')?.id).toBe('child')
+    })
+
+    it('returns undefined for missing node', () => {
+      expect(findNodeInTree([rect('a')], 'missing')).toBeUndefined()
+    })
+  })
+
+  describe('findParentInTree', () => {
+    it('finds the parent of a child node', () => {
+      const nodes = [frame('parent', [rect('child')])]
+      expect(findParentInTree(nodes, 'child')?.id).toBe('parent')
+    })
+
+    it('returns undefined for root nodes', () => {
+      expect(findParentInTree([rect('root')], 'root')).toBeUndefined()
+    })
+  })
+
+  describe('removeNodeFromTree', () => {
+    it('removes a root node', () => {
+      const result = removeNodeFromTree([rect('a'), rect('b')], 'a')
+      expect(result).toHaveLength(1)
+      expect(result[0].id).toBe('b')
+    })
+
+    it('removes a nested node', () => {
+      const nodes = [frame('parent', [rect('child1'), rect('child2')])]
+      const result = removeNodeFromTree(nodes, 'child1')
+      const parent = result[0] as PenNode & { children: PenNode[] }
+      expect(parent.children).toHaveLength(1)
+      expect(parent.children[0].id).toBe('child2')
+    })
+  })
+
+  describe('updateNodeInTree', () => {
+    it('updates a node by id', () => {
+      const nodes = [rect('a')]
+      const result = updateNodeInTree(nodes, 'a', { name: 'updated' })
+      expect(result[0].name).toBe('updated')
+    })
+
+    it('updates a nested node', () => {
+      const nodes = [frame('parent', [rect('child')])]
+      const result = updateNodeInTree(nodes, 'child', { name: 'updated' })
+      const parent = result[0] as PenNode & { children: PenNode[] }
+      expect(parent.children[0].name).toBe('updated')
+    })
+  })
+
+  describe('flattenNodes', () => {
+    it('flattens a nested tree', () => {
+      const nodes = [frame('a', [rect('b'), frame('c', [rect('d')])])]
+      const flat = flattenNodes(nodes)
+      expect(flat.map(n => n.id)).toEqual(['a', 'b', 'c', 'd'])
+    })
+  })
+
+  describe('insertNodeInTree', () => {
+    it('inserts at root level', () => {
+      const result = insertNodeInTree([rect('a')], null, rect('b'))
+      expect(result).toHaveLength(2)
+      expect(result[1].id).toBe('b')
+    })
+
+    it('inserts into a parent', () => {
+      const nodes = [frame('parent', [rect('existing')])]
+      const result = insertNodeInTree(nodes, 'parent', rect('new'))
+      const parent = result[0] as PenNode & { children: PenNode[] }
+      expect(parent.children).toHaveLength(2)
+      expect(parent.children[1].id).toBe('new')
+    })
+
+    it('inserts at a specific index', () => {
+      const nodes = [frame('parent', [rect('a'), rect('c')])]
+      const result = insertNodeInTree(nodes, 'parent', rect('b'), 1)
+      const parent = result[0] as PenNode & { children: PenNode[] }
+      expect(parent.children.map(n => n.id)).toEqual(['a', 'b', 'c'])
+    })
+  })
+
+  describe('isDescendantOf', () => {
+    it('returns true for a descendant', () => {
+      const nodes = [frame('a', [frame('b', [rect('c')])])]
+      expect(isDescendantOf(nodes, 'c', 'a')).toBe(true)
+    })
+
+    it('returns false for non-descendant', () => {
+      const nodes = [frame('a', [rect('b')]), rect('c')]
+      expect(isDescendantOf(nodes, 'c', 'a')).toBe(false)
+    })
+  })
+
+  describe('page helpers', () => {
+    it('getActivePageChildren returns page children', () => {
+      const doc = createEmptyDocument()
+      const children = getActivePageChildren(doc, DEFAULT_PAGE_ID)
+      expect(children).toHaveLength(1)
+      expect(children[0].id).toBe(DEFAULT_FRAME_ID)
+    })
+
+    it('setActivePageChildren replaces page children', () => {
+      const doc = createEmptyDocument()
+      const newChildren = [rect('new')]
+      const updated = setActivePageChildren(doc, DEFAULT_PAGE_ID, newChildren)
+      expect(updated.pages![0].children).toHaveLength(1)
+      expect(updated.pages![0].children[0].id).toBe('new')
+    })
+
+    it('migrateToPages wraps legacy doc', () => {
+      const legacy: PenDocument = { version: '1.0.0', children: [rect('a')] }
+      const migrated = migrateToPages(legacy)
+      expect(migrated.pages).toHaveLength(1)
+      expect(migrated.pages![0].children[0].id).toBe('a')
+      expect(migrated.children).toEqual([])
+    })
+
+    it('migrateToPages preserves existing pages', () => {
+      const doc = createEmptyDocument()
+      expect(migrateToPages(doc)).toBe(doc)
+    })
+  })
+})

package/src/__tests__/variables.test.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect } from 'vitest'
+import type { PenNode } from '@zseven-w/pen-types'
+import type { VariableDefinition } from '@zseven-w/pen-types'
+import {
+  isVariableRef,
+  getDefaultTheme,
+  resolveVariableRef,
+  resolveColorRef,
+  resolveNumericRef,
+  resolveNodeForCanvas,
+} from '../variables/resolve'
+
+const vars: Record<string, VariableDefinition> = {
+  'primary': { type: 'color', value: '#3b82f6' },
+  'spacing': { type: 'number', value: 16 },
+  'themed-color': {
+    type: 'color',
+    value: [
+      { value: '#ffffff', theme: { 'Theme-1': 'Light' } },
+      { value: '#1a1a1a', theme: { 'Theme-1': 'Dark' } },
+    ],
+  },
+}
+
+describe('variables/resolve', () => {
+  describe('isVariableRef', () => {
+    it('returns true for $ prefixed strings', () => {
+      expect(isVariableRef('$primary')).toBe(true)
+    })
+
+    it('returns false for regular strings', () => {
+      expect(isVariableRef('#ff0000')).toBe(false)
+    })
+
+    it('returns false for non-strings', () => {
+      expect(isVariableRef(42)).toBe(false)
+      expect(isVariableRef(undefined)).toBe(false)
+    })
+  })
+
+  describe('getDefaultTheme', () => {
+    it('returns first value of each theme axis', () => {
+      const themes = { 'Theme-1': ['Light', 'Dark'], 'Size': ['Compact', 'Regular'] }
+      expect(getDefaultTheme(themes)).toEqual({
+        'Theme-1': 'Light',
+        'Size': 'Compact',
+      })
+    })
+
+    it('returns empty for undefined themes', () => {
+      expect(getDefaultTheme(undefined)).toEqual({})
+    })
+  })
+
+  describe('resolveVariableRef', () => {
+    it('resolves a simple color variable', () => {
+      expect(resolveVariableRef('$primary', vars)).toBe('#3b82f6')
+    })
+
+    it('resolves a number variable', () => {
+      expect(resolveVariableRef('$spacing', vars)).toBe(16)
+    })
+
+    it('returns undefined for missing variable', () => {
+      expect(resolveVariableRef('$missing', vars)).toBeUndefined()
+    })
+
+    it('resolves themed values with matching theme', () => {
+      expect(resolveVariableRef('$themed-color', vars, { 'Theme-1': 'Dark' })).toBe('#1a1a1a')
+    })
+
+    it('falls back to first value when no theme match', () => {
+      expect(resolveVariableRef('$themed-color', vars)).toBe('#ffffff')
+    })
+
+    it('returns undefined for non-ref strings', () => {
+      expect(resolveVariableRef('#ff0000', vars)).toBeUndefined()
+    })
+  })
+
+  describe('resolveColorRef', () => {
+    it('returns the color when not a ref', () => {
+      expect(resolveColorRef('#ff0000', vars)).toBe('#ff0000')
+    })
+
+    it('resolves a color ref', () => {
+      expect(resolveColorRef('$primary', vars)).toBe('#3b82f6')
+    })
+
+    it('returns undefined for undefined input', () => {
+      expect(resolveColorRef(undefined, vars)).toBeUndefined()
+    })
+  })
+
+  describe('resolveNumericRef', () => {
+    it('returns the number when not a ref', () => {
+      expect(resolveNumericRef(42, vars)).toBe(42)
+    })
+
+    it('resolves a numeric ref', () => {
+      expect(resolveNumericRef('$spacing', vars)).toBe(16)
+    })
+
+    it('returns undefined for non-numeric results', () => {
+      expect(resolveNumericRef('$primary', vars)).toBeUndefined()
+    })
+  })
+
+  describe('resolveNodeForCanvas', () => {
+    it('returns same node when no variables', () => {
+      const node: PenNode = { id: '1', type: 'rectangle', x: 0, y: 0 }
+      expect(resolveNodeForCanvas(node, {})).toBe(node)
+    })
+
+    it('resolves $variable opacity', () => {
+      const node: PenNode = { id: '1', type: 'rectangle', x: 0, y: 0, opacity: '$spacing' }
+      const resolved = resolveNodeForCanvas(node, vars)
+      expect(resolved.opacity).toBe(16)
+      expect(resolved).not.toBe(node)
+    })
+
+    it('resolves fill colors', () => {
+      const node: PenNode = {
+        id: '1', type: 'rectangle', x: 0, y: 0,
+        fill: [{ type: 'solid', color: '$primary' }],
+      }
+      const resolved = resolveNodeForCanvas(node, vars)
+      const fill = (resolved as { fill: Array<{ color: string }> }).fill
+      expect(fill[0].color).toBe('#3b82f6')
+    })
+  })
+})

package/src/arc-path.ts

@@ -0,0 +1,100 @@
+/**
+ * Build an SVG path `d` string for an ellipse arc (pie slice, donut segment, or ring).
+ *
+ * @param w         - Bounding box width
+ * @param h         - Bounding box height
+ * @param startDeg  - Start angle in degrees (0 = right / 3 o'clock, clockwise)
+ * @param sweepDeg  - Sweep angle in degrees (extent of the arc)
+ * @param inner     - Inner radius ratio 0..1 (0 = pie, >0 = donut)
+ */
+export function buildEllipseArcPath(
+  w: number,
+  h: number,
+  startDeg: number,
+  sweepDeg: number,
+  inner: number,
+): string {
+  const startRad = (startDeg * Math.PI) / 180
+  const sweepRad = (sweepDeg * Math.PI) / 180
+  const endRad = startRad + sweepRad
+
+  const rx = w / 2
+  const ry = h / 2
+  const cx = rx
+  const cy = ry
+
+  // Outer arc endpoints
+  const ox1 = cx + rx * Math.cos(startRad)
+  const oy1 = cy + ry * Math.sin(startRad)
+  const ox2 = cx + rx * Math.cos(endRad)
+  const oy2 = cy + ry * Math.sin(endRad)
+
+  const large = sweepRad > Math.PI ? 1 : 0
+
+  // Near-full circle (>=~359.9°): split into two semicircular arcs
+  if (sweepRad > Math.PI * 2 - 0.02) {
+    const midRad = startRad + Math.PI
+    const omx = cx + rx * Math.cos(midRad)
+    const omy = cy + ry * Math.sin(midRad)
+
+    if (inner <= 0.001) {
+      return [
+        `M${f(ox1)} ${f(oy1)}`,
+        `A${f(rx)} ${f(ry)} 0 1 1 ${f(omx)} ${f(omy)}`,
+        `A${f(rx)} ${f(ry)} 0 1 1 ${f(ox1)} ${f(oy1)}`,
+        'Z',
+      ].join(' ')
+    }
+
+    const irx = rx * inner
+    const iry = ry * inner
+    const ix1 = cx + irx * Math.cos(startRad)
+    const iy1 = cy + iry * Math.sin(startRad)
+    const imx = cx + irx * Math.cos(midRad)
+    const imy = cy + iry * Math.sin(midRad)
+    return [
+      `M${f(ox1)} ${f(oy1)}`,
+      `A${f(rx)} ${f(ry)} 0 1 1 ${f(omx)} ${f(omy)}`,
+      `A${f(rx)} ${f(ry)} 0 1 1 ${f(ox1)} ${f(oy1)}`,
+      `L${f(ix1)} ${f(iy1)}`,
+      `A${f(irx)} ${f(iry)} 0 1 0 ${f(imx)} ${f(imy)}`,
+      `A${f(irx)} ${f(iry)} 0 1 0 ${f(ix1)} ${f(iy1)}`,
+      'Z',
+    ].join(' ')
+  }
+
+  if (inner <= 0.001) {
+    // Pie slice: center → outer start → arc → close
+    return `M${f(cx)} ${f(cy)} L${f(ox1)} ${f(oy1)} A${f(rx)} ${f(ry)} 0 ${large} 1 ${f(ox2)} ${f(oy2)} Z`
+  }
+
+  // Donut slice: outer arc → line to inner → inner arc (reversed) → close
+  const irx = rx * inner
+  const iry = ry * inner
+  const ix1 = cx + irx * Math.cos(startRad)
+  const iy1 = cy + iry * Math.sin(startRad)
+  const ix2 = cx + irx * Math.cos(endRad)
+  const iy2 = cy + iry * Math.sin(endRad)
+  return [
+    `M${f(ox1)} ${f(oy1)}`,
+    `A${f(rx)} ${f(ry)} 0 ${large} 1 ${f(ox2)} ${f(oy2)}`,
+    `L${f(ix2)} ${f(iy2)}`,
+    `A${f(irx)} ${f(iry)} 0 ${large} 0 ${f(ix1)} ${f(iy1)}`,
+    'Z',
+  ].join(' ')
+}
+
+/** True when the arc parameters describe something other than a plain full ellipse. */
+export function isArcEllipse(
+  _startAngle?: number,
+  sweepAngle?: number,
+  innerRadius?: number,
+): boolean {
+  const sweep = sweepAngle ?? 360
+  const inner = innerRadius ?? 0
+  return sweep < 359.9 || inner > 0.001
+}
+
+function f(n: number): string {
+  return Math.abs(n) < 0.005 ? '0' : parseFloat(n.toFixed(2)).toString()
+}

package/src/boolean-ops.ts

@@ -0,0 +1,256 @@
+import paper from 'paper'
+import { nanoid } from 'nanoid'
+import type { PenNode, PathNode } from '@zseven-w/pen-types'
+
+export type BooleanOpType = 'union' | 'subtract' | 'intersect'
+
+// ---------------------------------------------------------------------------
+// Paper.js scope — headless (no canvas needed)
+// ---------------------------------------------------------------------------
+
+let scope: paper.PaperScope | null = null
+
+function getScope(): paper.PaperScope {
+  if (!scope) {
+    scope = new paper.PaperScope()
+    scope.setup(new scope.Size(1, 1))
+  }
+  scope.activate()
+  return scope
+}
+
+// ---------------------------------------------------------------------------
+// Shape → SVG path string conversion
+// ---------------------------------------------------------------------------
+
+function sizeVal(v: number | string | undefined, fallback: number): number {
+  if (typeof v === 'number') return v
+  if (typeof v === 'string') {
+    const m = v.match(/\((\d+(?:\.\d+)?)\)/)
+    if (m) return parseFloat(m[1])
+    const n = parseFloat(v)
+    if (!isNaN(n)) return n
+  }
+  return fallback
+}
+
+function rectToPath(
+  w: number,
+  h: number,
+  cr?: number | [number, number, number, number],
+): string {
+  if (!cr || (typeof cr === 'number' && cr === 0)) {
+    return `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`
+  }
+  let [tl, tr, br, bl] =
+    typeof cr === 'number' ? [cr, cr, cr, cr] : cr
+  const maxR = Math.min(w, h) / 2
+  tl = Math.min(tl, maxR)
+  tr = Math.min(tr, maxR)
+  br = Math.min(br, maxR)
+  bl = Math.min(bl, maxR)
+  return [
+    `M ${tl} 0`,
+    `L ${w - tr} 0`,
+    tr > 0 ? `A ${tr} ${tr} 0 0 1 ${w} ${tr}` : '',
+    `L ${w} ${h - br}`,
+    br > 0 ? `A ${br} ${br} 0 0 1 ${w - br} ${h}` : '',
+    `L ${bl} ${h}`,
+    bl > 0 ? `A ${bl} ${bl} 0 0 1 0 ${h - bl}` : '',
+    `L 0 ${tl}`,
+    tl > 0 ? `A ${tl} ${tl} 0 0 1 ${tl} 0` : '',
+    'Z',
+  ]
+    .filter(Boolean)
+    .join(' ')
+}
+
+function ellipseToPath(rx: number, ry: number): string {
+  // 4-arc approximation of an ellipse centered at (rx, ry)
+  return [
+    `M ${rx * 2} ${ry}`,
+    `A ${rx} ${ry} 0 0 1 ${rx} ${ry * 2}`,
+    `A ${rx} ${ry} 0 0 1 0 ${ry}`,
+    `A ${rx} ${ry} 0 0 1 ${rx} 0`,
+    `A ${rx} ${ry} 0 0 1 ${rx * 2} ${ry}`,
+    'Z',
+  ].join(' ')
+}
+
+function polygonToPath(count: number, w: number, h: number): string {
+  const raw: [number, number][] = []
+  for (let i = 0; i < count; i++) {
+    const angle = (i * 2 * Math.PI) / count - Math.PI / 2
+    raw.push([Math.cos(angle), Math.sin(angle)])
+  }
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity
+  for (const [rx, ry] of raw) {
+    if (rx < minX) minX = rx
+    if (rx > maxX) maxX = rx
+    if (ry < minY) minY = ry
+    if (ry > maxY) maxY = ry
+  }
+  const rw = maxX - minX
+  const rh = maxY - minY
+  const parts: string[] = []
+  for (let i = 0; i < count; i++) {
+    const px = ((raw[i][0] - minX) / rw) * w
+    const py = ((raw[i][1] - minY) / rh) * h
+    parts.push(i === 0 ? `M ${px} ${py}` : `L ${px} ${py}`)
+  }
+  parts.push('Z')
+  return parts.join(' ')
+}
+
+/** Convert a shape node to an SVG path `d` string in local coordinates (origin at 0,0). */
+function nodeToLocalPath(node: PenNode): string | null {
+  switch (node.type) {
+    case 'rectangle':
+    case 'frame': {
+      const w = sizeVal(node.width, 100)
+      const h = sizeVal(node.height, 100)
+      return rectToPath(w, h, node.cornerRadius)
+    }
+    case 'ellipse': {
+      const w = sizeVal(node.width, 100)
+      const h = sizeVal(node.height, 100)
+      return ellipseToPath(w / 2, h / 2)
+    }
+    case 'polygon': {
+      const w = sizeVal(node.width, 100)
+      const h = sizeVal(node.height, 100)
+      return polygonToPath(node.polygonCount || 6, w, h)
+    }
+    case 'path':
+      return node.d
+    case 'line':
+      return `M 0 0 L ${(node.x2 ?? (node.x ?? 0) + 100) - (node.x ?? 0)} ${(node.y2 ?? (node.y ?? 0)) - (node.y ?? 0)}`
+    default:
+      return null
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Boolean operation helpers
+// ---------------------------------------------------------------------------
+
+/** Types that can participate in boolean operations. */
+const BOOLEAN_TYPES = new Set([
+  'rectangle',
+  'ellipse',
+  'polygon',
+  'path',
+  'line',
+  'frame',
+])
+
+export function canBooleanOp(nodes: PenNode[]): boolean {
+  if (nodes.length < 2) return false
+  return nodes.every((n) => BOOLEAN_TYPES.has(n.type))
+}
+
+/**
+ * Create a Paper.js PathItem from a PenNode, positioned in absolute scene
+ * coordinates (applying x, y, rotation).
+ */
+function nodeToPaperPath(node: PenNode): paper.PathItem | null {
+  const d = nodeToLocalPath(node)
+  if (!d) return null
+
+  const s = getScope()
+  let item: paper.PathItem
+  try {
+    item = s.CompoundPath.create(d)
+  } catch {
+    return null
+  }
+
+  // Apply node transform: translate to (x, y), then rotate around center
+  const x = node.x ?? 0
+  const y = node.y ?? 0
+  item.translate(new s.Point(x, y))
+
+  const rotation = node.rotation ?? 0
+  if (rotation !== 0) {
+    // Rotate around the bounding-box center of the translated item
+    item.rotate(rotation, item.bounds.center)
+  }
+
+  return item
+}
+
+/**
+ * Execute a boolean operation on the given PenNodes.
+ * Returns a new PathNode with the result, or null on failure.
+ */
+export function executeBooleanOp(
+  nodes: PenNode[],
+  operation: BooleanOpType,
+): PathNode | null {
+  if (nodes.length < 2) return null
+
+  const paperPaths = nodes.map(nodeToPaperPath)
+  if (paperPaths.some((p) => p === null)) return null
+
+  const paths = paperPaths as paper.PathItem[]
+
+  // Accumulate: fold left with the boolean operation
+  let result = paths[0]
+  for (let i = 1; i < paths.length; i++) {
+    switch (operation) {
+      case 'union':
+        result = result.unite(paths[i])
+        break
+      case 'subtract':
+        result = result.subtract(paths[i])
+        break
+      case 'intersect':
+        result = result.intersect(paths[i])
+        break
+    }
+  }
+
+  // Extract SVG path data
+  const pathData = result.pathData
+  if (!pathData || pathData.trim().length === 0) return null
+
+  // Get bounding box for positioning
+  const bounds = result.bounds
+
+  // Translate path so it starts at origin (0,0)
+  result.translate(new paper.Point(-bounds.x, -bounds.y))
+  const originPathData = result.pathData
+
+  // Clean up Paper.js items
+  for (const p of paths) p.remove()
+  result.remove()
+
+  // Build the label
+  const opLabels: Record<BooleanOpType, string> = {
+    union: 'Union',
+    subtract: 'Subtract',
+    intersect: 'Intersect',
+  }
+
+  // Inherit style from first operand
+  const first = nodes[0]
+  const fill = 'fill' in first ? first.fill : undefined
+  const stroke = 'stroke' in first ? first.stroke : undefined
+  const effects = 'effects' in first ? first.effects : undefined
+  const opacity = first.opacity
+
+  return {
+    id: nanoid(),
+    type: 'path',
+    name: opLabels[operation],
+    d: originPathData,
+    x: bounds.x,
+    y: bounds.y,
+    width: Math.round(bounds.width * 100) / 100,
+    height: Math.round(bounds.height * 100) / 100,
+    fill,
+    stroke,
+    effects,
+    opacity,
+  }
+}

package/src/constants.ts

@@ -0,0 +1,49 @@
+export const MIN_ZOOM = 0.02
+export const MAX_ZOOM = 256
+export const ZOOM_STEP = 0.1
+export const SNAP_THRESHOLD = 5
+export const DEFAULT_FILL = '#d1d5db'
+export const DEFAULT_STROKE = '#374151'
+export const DEFAULT_STROKE_WIDTH = 1
+export const CANVAS_BACKGROUND_LIGHT = '#e5e5e5'
+export const CANVAS_BACKGROUND_DARK = '#1a1a1a'
+
+export const SELECTION_BLUE = '#0d99ff'
+export const COMPONENT_COLOR = '#a855f7'
+export const INSTANCE_COLOR = '#9281f7'
+
+// Hover / overlay / indicator
+export const HOVER_BLUE = '#3b82f6'
+export const HOVER_LINE_WIDTH = 1.5
+export const HOVER_DASH = [4, 4]
+export const INDICATOR_BLUE = '#3B82F6'
+export const INDICATOR_LINE_WIDTH = 2
+export const INDICATOR_DASH = [6, 4]
+export const INDICATOR_ENDPOINT_RADIUS = 3
+
+// Frame labels
+export const FRAME_LABEL_FONT_SIZE = 12
+export const FRAME_LABEL_OFFSET_Y = 6
+export const FRAME_LABEL_COLOR = '#999999'
+
+// Pen tool
+export const PEN_ANCHOR_FILL = '#ffffff'
+export const PEN_ANCHOR_RADIUS = 4
+export const PEN_ANCHOR_FIRST_RADIUS = 5
+export const PEN_HANDLE_DOT_RADIUS = 3
+export const PEN_HANDLE_LINE_STROKE = '#888888'
+export const PEN_RUBBER_BAND_STROKE = 'rgba(13, 153, 255, 0.5)'
+export const PEN_RUBBER_BAND_DASH = [4, 4]
+export const PEN_CLOSE_HIT_THRESHOLD = 8
+
+// Dimension label
+export const DIMENSION_LABEL_OFFSET_Y = 8
+
+// Default node colors
+export const DEFAULT_FRAME_FILL = '#ffffff'
+export const DEFAULT_TEXT_FILL = '#000000'
+
+// Smart guides
+export const GUIDE_COLOR = '#FF6B35'
+export const GUIDE_LINE_WIDTH = 1
+export const GUIDE_DASH = [3, 3]