SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/package.json

47 lines
1.4 KiB
JSON
Raw Normal View History

Initial commit: Tauri + CanvasKit + React editor scaffold - Tauri v2 desktop shell with 1280x800 window - CanvasKit WASM (Skia) rendering via WebGL2 - Scene graph with typed nodes (Frame, Rectangle, Ellipse, Line, etc.) - Skia renderer with fills, strokes, rounded corners, opacity, rotation - Selection system with resize handles - Undo/redo manager (inverse command pattern with batching) - Bottom toolbar (Select, Frame, Rect, Ellipse, Line) matching Figma UI3 - Left layers panel, right properties panel - Pan (scroll), zoom (Ctrl+scroll toward cursor) - Keyboard shortcuts: V/F/R/O/L for tools, Cmd+Z undo, Backspace delete - 5 demo shapes rendered on canvas
2026-02-27 12:48:29 +00:00
{
"name": "open-pencil-app",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
Add oxlint, oxfmt, typescript-go - oxlint with react, react-hooks, typescript, import, unicorn plugins - oxfmt (no trailing commas, single quotes, sorted imports) - tsgo (typescript-go native preview) for fast typechecking - Fix all lint warnings: non-null assertions, unused expressions, stale closures - Scripts: lint, format, typecheck, check
2026-02-27 12:52:04 +00:00
"tauri": "tauri",
"lint": "oxlint -c oxlint.json src/",
"format": "oxfmt --write src/",
"typecheck": "tsgo --noEmit",
Playwright visual regression testing with Figma CDP reference - Playwright E2E tests for OpenPencil: draw, move, delete, undo shapes - Visual screenshot baselines with toHaveScreenshot() - SwiftShader for headless WebGL/CanvasKit rendering - Figma CDP helper for reference tests (connect to Figma Desktop) - ?test URL param for clean canvas without demo shapes - Scripts: test, test:update, test:figma, figma:debug
2026-02-28 04:32:15 +00:00
"check": "bun run lint && bun run typecheck",
"test": "playwright test --project=openpencil",
"test:update": "playwright test --project=openpencil --update-snapshots",
"test:figma": "playwright test --project=figma",
Add bun:test unit tests for SceneGraph (15ms)
2026-02-28 04:45:50 +00:00
"figma:debug": "open -a Figma --args --remote-debugging-port=9222",
"test:unit": "bun test ./tests/engine"
Initial commit: Tauri + CanvasKit + React editor scaffold - Tauri v2 desktop shell with 1280x800 window - CanvasKit WASM (Skia) rendering via WebGL2 - Scene graph with typed nodes (Frame, Rectangle, Ellipse, Line, etc.) - Skia renderer with fills, strokes, rounded corners, opacity, rotation - Selection system with resize handles - Undo/redo manager (inverse command pattern with batching) - Bottom toolbar (Select, Frame, Rect, Ellipse, Line) matching Figma UI3 - Left layers panel, right properties panel - Pan (scroll), zoom (Ctrl+scroll toward cursor) - Keyboard shortcuts: V/F/R/O/L for tools, Cmd+Z undo, Backspace delete - 5 demo shapes rendered on canvas
2026-02-27 12:48:29 +00:00
},
"dependencies": {
Migrate to Tailwind CSS 4.2 - @tailwindcss/vite plugin for zero-config build - @theme tokens: panel, canvas, border, hover, accent, surface, muted, input - All scoped CSS replaced with Tailwind utility classes - Only remaining scoped CSS: ColorPicker range slider thumbs - Removed conflicting * { padding: 0 } reset (Tailwind preflight handles it)
2026-02-27 21:54:38 +00:00
"@tailwindcss/vite": "^4.2.1",
Initial commit: Tauri + CanvasKit + React editor scaffold - Tauri v2 desktop shell with 1280x800 window - CanvasKit WASM (Skia) rendering via WebGL2 - Scene graph with typed nodes (Frame, Rectangle, Ellipse, Line, etc.) - Skia renderer with fills, strokes, rounded corners, opacity, rotation - Selection system with resize handles - Undo/redo manager (inverse command pattern with batching) - Bottom toolbar (Select, Frame, Rect, Ellipse, Line) matching Figma UI3 - Left layers panel, right properties panel - Pan (scroll), zoom (Ctrl+scroll toward cursor) - Keyboard shortcuts: V/F/R/O/L for tools, Cmd+Z undo, Backspace delete - 5 demo shapes rendered on canvas
2026-02-27 12:48:29 +00:00
"@tauri-apps/api": "^2",
"@tauri-apps/plugin-opener": "^2",
Migrate React → Vue 3 + VueUse + Reka UI - Vue 3 SFC components with <script setup> - Reactive store (Vue reactivity) replacing React refs/state - Composables: useCanvas, useCanvasInput, useKeyboard - Components: EditorCanvas, LayersPanel, PropertiesPanel, Toolbar - Floating toolbar (Figma UI3 style) with pill shape + shadow - Properties panel with Design/Prototype tabs + zoom display - Sections: Position, Rotation, Layout, Appearance, Fill, Stroke, Effects, Export - CSS custom properties for theming (--panel-bg, --border, --accent, etc.) - Add Figma UI3 CDP inspection findings (toolbar, panels, sections)
2026-02-27 18:25:31 +00:00
"@vueuse/core": "^14.2.1",
Initial commit: Tauri + CanvasKit + React editor scaffold - Tauri v2 desktop shell with 1280x800 window - CanvasKit WASM (Skia) rendering via WebGL2 - Scene graph with typed nodes (Frame, Rectangle, Ellipse, Line, etc.) - Skia renderer with fills, strokes, rounded corners, opacity, rotation - Selection system with resize handles - Undo/redo manager (inverse command pattern with batching) - Bottom toolbar (Select, Frame, Rect, Ellipse, Line) matching Figma UI3 - Left layers panel, right properties panel - Pan (scroll), zoom (Ctrl+scroll toward cursor) - Keyboard shortcuts: V/F/R/O/L for tools, Cmd+Z undo, Backspace delete - 5 demo shapes rendered on canvas
2026-02-27 12:48:29 +00:00
"canvaskit-wasm": "^0.40.0",
Refactor: vendor kiwi-schema, extract types/constants, culori colors - Fork kiwi-schema from source TypeScript (evanw/kiwi), drop npm dep + patch - Deduplicate GUID/Color types into src/types.ts - Extract UI colors and default fills into src/constants.ts - Replace hand-rolled hex parsing with culori library - Extract demo shapes from App.vue into src/demo.ts - useUrlSearchParams from VueUse for test mode detection - Move fig-file/fig-import into kiwi/ (format layer) - Delete PoC files (poc-yoga.ts, poc-test.ts)
2026-02-28 05:08:04 +00:00
"culori": "^4.0.2",
Add .fig file import (Kiwi codec → scene graph) File parser: - .fig files are ZIP archives with Kiwi-encoded canvas data - Detects canvas blob by name (canvas.fig) or largest binary entry - Decodes Kiwi Message → NodeChange[] → SceneGraph Node conversion: - Maps Figma types to OpenPencil types (COMPONENT → FRAME, etc.) - Extracts position from transform matrix (m02, m12) - Extracts rotation from transform matrix (atan2) - Converts fillPaints/strokePaints to Fill[]/Stroke[] - Converts effects (shadows, blurs) - Handles independent corner radii - Preserves text properties (font, size, alignment, spacing) - Builds parent-child tree from parentIndex GUIDs - Sorts children by parentIndex.position Browser compatibility: - fzstd for Zstd decompression (replaces Bun.zstd*) - fflate for ZIP extraction - Cmd+O opens file dialog for .fig files - UndoManager.clear() for resetting on file open
2026-02-27 20:01:35 +00:00
"fflate": "^0.8.2",
"fzstd": "^0.1.1",
Migrate React → Vue 3 + VueUse + Reka UI - Vue 3 SFC components with <script setup> - Reactive store (Vue reactivity) replacing React refs/state - Composables: useCanvas, useCanvasInput, useKeyboard - Components: EditorCanvas, LayersPanel, PropertiesPanel, Toolbar - Floating toolbar (Figma UI3 style) with pill shape + shadow - Properties panel with Design/Prototype tabs + zoom display - Sections: Position, Rotation, Layout, Appearance, Fill, Stroke, Effects, Export - CSS custom properties for theming (--panel-bg, --border, --accent, etc.) - Add Figma UI3 CDP inspection findings (toolbar, panels, sections)
2026-02-27 18:25:31 +00:00
"reka-ui": "^2.8.2",
Migrate to Tailwind CSS 4.2 - @tailwindcss/vite plugin for zero-config build - @theme tokens: panel, canvas, border, hover, accent, surface, muted, input - All scoped CSS replaced with Tailwind utility classes - Only remaining scoped CSS: ColorPicker range slider thumbs - Removed conflicting * { padding: 0 } reset (Tailwind preflight handles it)
2026-02-27 21:54:38 +00:00
"tailwindcss": "^4.2.1",
Migrate React → Vue 3 + VueUse + Reka UI - Vue 3 SFC components with <script setup> - Reactive store (Vue reactivity) replacing React refs/state - Composables: useCanvas, useCanvasInput, useKeyboard - Components: EditorCanvas, LayersPanel, PropertiesPanel, Toolbar - Floating toolbar (Figma UI3 style) with pill shape + shadow - Properties panel with Design/Prototype tabs + zoom display - Sections: Position, Rotation, Layout, Appearance, Fill, Stroke, Effects, Export - CSS custom properties for theming (--panel-bg, --border, --accent, etc.) - Add Figma UI3 CDP inspection findings (toolbar, panels, sections)
2026-02-27 18:25:31 +00:00
"vue": "^3.5.29",
PoC 2 & 3: Yoga WASM layout + Kiwi codec Yoga WASM (yoga-layout v3.2.1): - Vertical/horizontal auto-layout with gap, padding, alignment ✅ - Nested frames with flex-grow ✅ - Space-between distribution ✅ - 1000-node layout in 3ms ✅ Kiwi binary codec (from figma-use multiplayer module): - 194-definition Figma schema (2178 lines) compiles in 6ms - Encode 4 nodes → 237 bytes Zstd-compressed - Full round-trip: encode → Zstd compress → decompress → decode ✅ - Patch kiwi-schema to allow sparse field IDs (Figma uses IDs > 312) Extracted files: schema.ts, codec.ts, protocol.ts, client.ts, index.ts
2026-02-27 14:16:21 +00:00
"yoga-layout": "^3.2.1"
Initial commit: Tauri + CanvasKit + React editor scaffold - Tauri v2 desktop shell with 1280x800 window - CanvasKit WASM (Skia) rendering via WebGL2 - Scene graph with typed nodes (Frame, Rectangle, Ellipse, Line, etc.) - Skia renderer with fills, strokes, rounded corners, opacity, rotation - Selection system with resize handles - Undo/redo manager (inverse command pattern with batching) - Bottom toolbar (Select, Frame, Rect, Ellipse, Line) matching Figma UI3 - Left layers panel, right properties panel - Pan (scroll), zoom (Ctrl+scroll toward cursor) - Keyboard shortcuts: V/F/R/O/L for tools, Cmd+Z undo, Backspace delete - 5 demo shapes rendered on canvas
2026-02-27 12:48:29 +00:00
},
"devDependencies": {
Replace emoji icons with Lucide via Iconify (unplugin-icons) - unplugin-icons + @iconify-json/lucide for compile-time icon bundling - Toolbar: proper cursor, frame, square, pen, type, hand icons - Layers panel: per-type node icons + chevron-right for expand/collapse - Remove icon field from ToolDef (icons mapped in components)
2026-02-28 05:24:42 +00:00
"@iconify-json/lucide": "^1.2.94",
Playwright visual regression testing with Figma CDP reference - Playwright E2E tests for OpenPencil: draw, move, delete, undo shapes - Visual screenshot baselines with toHaveScreenshot() - SwiftShader for headless WebGL/CanvasKit rendering - Figma CDP helper for reference tests (connect to Figma Desktop) - ?test URL param for clean canvas without demo shapes - Scripts: test, test:update, test:figma, figma:debug
2026-02-28 04:32:15 +00:00
"@playwright/test": "^1.58.2",
Add oxlint, oxfmt, typescript-go - oxlint with react, react-hooks, typescript, import, unicorn plugins - oxfmt (no trailing commas, single quotes, sorted imports) - tsgo (typescript-go native preview) for fast typechecking - Fix all lint warnings: non-null assertions, unused expressions, stale closures - Scripts: lint, format, typecheck, check
2026-02-27 12:52:04 +00:00
"@tauri-apps/cli": "^2",
"@typescript/native-preview": "^7.0.0-dev.20260227.1",
Migrate React → Vue 3 + VueUse + Reka UI - Vue 3 SFC components with <script setup> - Reactive store (Vue reactivity) replacing React refs/state - Composables: useCanvas, useCanvasInput, useKeyboard - Components: EditorCanvas, LayersPanel, PropertiesPanel, Toolbar - Floating toolbar (Figma UI3 style) with pill shape + shadow - Properties panel with Design/Prototype tabs + zoom display - Sections: Position, Rotation, Layout, Appearance, Fill, Stroke, Effects, Export - CSS custom properties for theming (--panel-bg, --border, --accent, etc.) - Add Figma UI3 CDP inspection findings (toolbar, panels, sections)
2026-02-27 18:25:31 +00:00
"@vitejs/plugin-vue": "^6.0.4",
Add oxlint, oxfmt, typescript-go - oxlint with react, react-hooks, typescript, import, unicorn plugins - oxfmt (no trailing commas, single quotes, sorted imports) - tsgo (typescript-go native preview) for fast typechecking - Fix all lint warnings: non-null assertions, unused expressions, stale closures - Scripts: lint, format, typecheck, check
2026-02-27 12:52:04 +00:00
"oxfmt": "^0.35.0",
"oxlint": "^1.50.0",
Initial commit: Tauri + CanvasKit + React editor scaffold - Tauri v2 desktop shell with 1280x800 window - CanvasKit WASM (Skia) rendering via WebGL2 - Scene graph with typed nodes (Frame, Rectangle, Ellipse, Line, etc.) - Skia renderer with fills, strokes, rounded corners, opacity, rotation - Selection system with resize handles - Undo/redo manager (inverse command pattern with batching) - Bottom toolbar (Select, Frame, Rect, Ellipse, Line) matching Figma UI3 - Left layers panel, right properties panel - Pan (scroll), zoom (Ctrl+scroll toward cursor) - Keyboard shortcuts: V/F/R/O/L for tools, Cmd+Z undo, Backspace delete - 5 demo shapes rendered on canvas
2026-02-27 12:48:29 +00:00
"typescript": "~5.8.3",
Replace emoji icons with Lucide via Iconify (unplugin-icons) - unplugin-icons + @iconify-json/lucide for compile-time icon bundling - Toolbar: proper cursor, frame, square, pen, type, hand icons - Layers panel: per-type node icons + chevron-right for expand/collapse - Remove icon field from ToolDef (icons mapped in components)
2026-02-28 05:24:42 +00:00
"unplugin-icons": "^23.0.1",
Add oxlint, oxfmt, typescript-go - oxlint with react, react-hooks, typescript, import, unicorn plugins - oxfmt (no trailing commas, single quotes, sorted imports) - tsgo (typescript-go native preview) for fast typechecking - Fix all lint warnings: non-null assertions, unused expressions, stale closures - Scripts: lint, format, typecheck, check
2026-02-27 12:52:04 +00:00
"vite": "^7.0.4"
Initial commit: Tauri + CanvasKit + React editor scaffold - Tauri v2 desktop shell with 1280x800 window - CanvasKit WASM (Skia) rendering via WebGL2 - Scene graph with typed nodes (Frame, Rectangle, Ellipse, Line, etc.) - Skia renderer with fills, strokes, rounded corners, opacity, rotation - Selection system with resize handles - Undo/redo manager (inverse command pattern with batching) - Bottom toolbar (Select, Frame, Rect, Ellipse, Line) matching Figma UI3 - Left layers panel, right properties panel - Pan (scroll), zoom (Ctrl+scroll toward cursor) - Keyboard shortcuts: V/F/R/O/L for tools, Cmd+Z undo, Backspace delete - 5 demo shapes rendered on canvas
2026-02-27 12:48:29 +00:00
}
Playwright visual regression testing with Figma CDP reference - Playwright E2E tests for OpenPencil: draw, move, delete, undo shapes - Visual screenshot baselines with toHaveScreenshot() - SwiftShader for headless WebGL/CanvasKit rendering - Figma CDP helper for reference tests (connect to Figma Desktop) - ?test URL param for clean canvas without demo shapes - Scripts: test, test:update, test:figma, figma:debug
2026-02-28 04:32:15 +00:00
}
Reference in a new issue Copy permalink