openpencil/openspec/changes/archive/2026-03-01-sync-variables-export-cli/proposal.md
Anton A S adea7eb645 Sync specs & docs: variables, image export, CLI, core extraction
- Update specs: scene-graph (variables/collections/modes/bindings/.fig import),
  editor-ui (VariablesPanel, ExportSection, splash), canvas-rendering
  (variable resolution, image export, sceneVersion/renderVersion),
  desktop-app (monorepo), tooling (Bun workspace), testing (variable tests)
- Create cli spec: info, tree, find, export commands
- Update docs: features, figma-comparison (79/150), roadmap (Phase 4 ,
  Phase 5 🟡), keyboard-shortcuts (⇧⌘E), contributing (monorepo structure)
- Restore vitepress devDependency lost during merge
- Archive sync-variables-export-cli change
2026-03-01 02:17:48 +03:00

1.8 KiB
Raw Blame History

Proposal: Sync Variables, Image Export, CLI, Core Extraction

Why

21 commits merged from master (7ff16f7..d30ab4c) introduce the variables system, image export, monorepo extraction, CLI tooling, and performance improvements.

What Changes

Variables (Phase 4 completion)

  • Variable, VariableCollection, VariableCollectionMode types
  • VariableType: COLOR, FLOAT, STRING, BOOLEAN
  • VariableValue with alias support (chain resolution, cycle detection)
  • Collections with modes and activeMode switching
  • Bind/unbind variables to node properties (fills/strokes colors)
  • Renderer resolves variable bindings before painting
  • .fig import of VARIABLE NodeChanges and paint variable bindings
  • VariablesPanel UI (reka-ui Tabs for collections, Editable for names/values)
  • FillSection variable picker (Popover + Combobox), purple badge, detach button
  • 7 new unit tests (variables describe block)

Image Export

  • PNG/JPG/WEBP export with scale selector (0.5×4×) and format picker
  • ExportSection in properties panel with live preview and checkerboard background
  • Context menu "Export…" action and ⇧⌘E shortcut
  • Tauri save dialog / File System Access API / download fallback
  • renderThumbnail and renderNodesToImage in render-image.ts
  • JPG renders with white background, PNG/WEBP with transparency
  • requestRender/requestRepaint split to avoid export preview updates on pan/zoom

Monorepo & CLI (Phase 5 start)

  • @open-pencil/core package extracted to packages/core/ (zero DOM deps)
  • @open-pencil/cli package in packages/cli/ with headless CanvasKit CPU
  • CLI commands: info, tree, find, export (all support --json)
  • Bun workspace structure
  • npm publishing preparation

UI/Performance

  • Splash loader during WASM initialization
  • CSS containment on side panels
  • sceneVersion/renderVersion split for UI panels
  • Export preview flicker fix