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
|
|
|
{
|
|
|
|
|
"compilerOptions": {
|
|
|
|
|
"target": "ES2022",
|
|
|
|
|
"useDefineForClassFields": true,
|
2026-06-06 19:24:31 +00:00
|
|
|
"lib": [
|
|
|
|
|
"ESNext",
|
|
|
|
|
"DOM",
|
|
|
|
|
"DOM.Iterable"
|
|
|
|
|
],
|
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
|
|
|
"module": "ESNext",
|
|
|
|
|
"skipLibCheck": true,
|
|
|
|
|
"moduleResolution": "bundler",
|
|
|
|
|
"allowImportingTsExtensions": true,
|
2026-05-20 18:54:16 +00:00
|
|
|
"allowArbitraryExtensions": true,
|
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
|
|
|
"resolveJsonModule": true,
|
|
|
|
|
"isolatedModules": true,
|
|
|
|
|
"noEmit": true,
|
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
|
|
|
"jsx": "preserve",
|
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
|
|
|
"strict": true,
|
|
|
|
|
"noUnusedLocals": true,
|
|
|
|
|
"noUnusedParameters": true,
|
2026-02-28 20:08:45 +00:00
|
|
|
"noFallthroughCasesInSwitch": true,
|
|
|
|
|
"paths": {
|
2026-06-06 19:24:31 +00:00
|
|
|
"@/*": [
|
|
|
|
|
"./src/*"
|
|
|
|
|
],
|
|
|
|
|
"#vue/*": [
|
|
|
|
|
"./packages/vue/src/*",
|
|
|
|
|
"./packages/vue/src/*.vue"
|
|
|
|
|
],
|
|
|
|
|
"#core/*": [
|
|
|
|
|
"./packages/core/src/*"
|
|
|
|
|
],
|
|
|
|
|
"#cli/*": [
|
|
|
|
|
"./packages/cli/src/*"
|
|
|
|
|
],
|
|
|
|
|
"#mcp/*": [
|
|
|
|
|
"./packages/mcp/src/*"
|
|
|
|
|
],
|
2026-08-19 14:41:10 +00:00
|
|
|
"@open-pencil/harness": [
|
|
|
|
|
"./packages/harness/src/index.ts"
|
|
|
|
|
],
|
2026-06-06 19:24:31 +00:00
|
|
|
"#dom-css/*": [
|
|
|
|
|
"./packages/dom-css/src/*"
|
|
|
|
|
],
|
|
|
|
|
"#tests/*": [
|
|
|
|
|
"./tests/*"
|
|
|
|
|
],
|
2026-08-13 10:50:28 +00:00
|
|
|
"#docs-config/*": [
|
|
|
|
|
"./packages/docs/.vitepress/*"
|
|
|
|
|
],
|
2026-06-06 19:24:31 +00:00
|
|
|
"tinykeys": [
|
|
|
|
|
"./node_modules/tinykeys/dist/tinykeys.d.ts"
|
|
|
|
|
],
|
2026-08-14 16:31:41 +00:00
|
|
|
"@open-pencil/cli/library": [
|
|
|
|
|
"./packages/cli/src/library/index.ts"
|
|
|
|
|
],
|
2026-06-06 19:24:31 +00:00
|
|
|
"@open-pencil/vue": [
|
|
|
|
|
"./packages/vue/src/index.ts"
|
|
|
|
|
],
|
|
|
|
|
"@open-pencil/core": [
|
|
|
|
|
"./packages/core/src/index.ts"
|
|
|
|
|
],
|
|
|
|
|
"@open-pencil/core/*": [
|
|
|
|
|
"./packages/core/src/*"
|
|
|
|
|
],
|
|
|
|
|
"@open-pencil/dom-css": [
|
|
|
|
|
"./packages/dom-css/src/index.ts"
|
|
|
|
|
],
|
|
|
|
|
"#scene-graph/*": [
|
|
|
|
|
"./packages/scene-graph/src/*"
|
|
|
|
|
],
|
|
|
|
|
"@open-pencil/scene-graph": [
|
|
|
|
|
"./packages/scene-graph/src/index.ts"
|
|
|
|
|
],
|
|
|
|
|
"@open-pencil/scene-graph/*": [
|
|
|
|
|
"./packages/scene-graph/src/*"
|
|
|
|
|
],
|
|
|
|
|
"#pen/*": [
|
|
|
|
|
"./packages/pen/src/*"
|
|
|
|
|
],
|
|
|
|
|
"@open-pencil/pen": [
|
|
|
|
|
"./packages/pen/src/index.ts"
|
|
|
|
|
],
|
|
|
|
|
"@open-pencil/pen/*": [
|
|
|
|
|
"./packages/pen/src/*"
|
|
|
|
|
]
|
2026-02-28 20:08:45 +00:00
|
|
|
}
|
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
|
|
|
},
|
2026-06-06 19:24:31 +00:00
|
|
|
"include": [
|
|
|
|
|
"src/**/*.ts",
|
|
|
|
|
"src/**/*.vue"
|
|
|
|
|
],
|
|
|
|
|
"references": [
|
|
|
|
|
{
|
|
|
|
|
"path": "./tsconfig.node.json"
|
|
|
|
|
}
|
|
|
|
|
]
|
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
|
|
|
}
|