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,
|
2026-03-07 21:20:47 +00:00
|
|
|
"version": "0.8.0",
|
2026-03-02 05:31:54 +00:00
|
|
|
"license": "MIT",
|
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
|
|
|
"type": "module",
|
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-02-28 23:17:48 +00:00
|
|
|
"workspaces": [
|
|
|
|
|
"packages/*"
|
|
|
|
|
],
|
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
|
|
|
"scripts": {
|
|
|
|
|
"dev": "vite",
|
2026-03-02 08:33:49 +00:00
|
|
|
"build": "tsgo --noEmit && vite build",
|
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
|
|
|
"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",
|
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",
|
2026-02-28 04:45:50 +00:00
|
|
|
"figma:debug": "open -a Figma --args --remote-debugging-port=9222",
|
2026-02-28 22:21:29 +00:00
|
|
|
"test:unit": "bun test ./tests/engine",
|
2026-03-01 06:34:41 +00:00
|
|
|
"test:coverage": "bun test --coverage ./tests/engine",
|
2026-03-01 07:49:09 +00:00
|
|
|
"test:dupes": "jscpd packages/core/src packages/cli/src src --min-lines 5 --min-tokens 50 --format typescript",
|
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-02-28 23:17:48 +00:00
|
|
|
"open-pencil": "bun packages/cli/src/index.ts",
|
2026-03-01 12:16:16 +00:00
|
|
|
"docs:dev": "bun --filter @open-pencil/docs dev",
|
|
|
|
|
"docs:build": "bun --filter @open-pencil/docs build",
|
2026-03-04 07:35:44 +00:00
|
|
|
"docs:preview": "bun --filter @open-pencil/docs preview",
|
|
|
|
|
"visual-compare": "bun scripts/visual-compare.ts"
|
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": {
|
2026-03-01 07:31:57 +00:00
|
|
|
"@ai-sdk/openai": "^3.0.37",
|
2026-03-01 08:45:27 +00:00
|
|
|
"@ai-sdk/valibot": "^2.0.17",
|
2026-03-01 07:31:57 +00:00
|
|
|
"@ai-sdk/vue": "^3.0.105",
|
2026-02-28 23:12:19 +00:00
|
|
|
"@open-pencil/cli": "workspace:*",
|
|
|
|
|
"@open-pencil/core": "workspace:*",
|
2026-03-01 07:31:57 +00:00
|
|
|
"@openrouter/ai-sdk-provider": "^2.2.3",
|
2026-02-27 21:54:38 +00:00
|
|
|
"@tailwindcss/vite": "^4.2.1",
|
2026-02-28 23:12:19 +00:00
|
|
|
"@tanstack/vue-table": "^8.21.3",
|
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",
|
2026-02-28 10:54:21 +00:00
|
|
|
"@tauri-apps/plugin-dialog": "^2.6.0",
|
|
|
|
|
"@tauri-apps/plugin-fs": "^2.4.5",
|
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/plugin-opener": "^2",
|
2026-03-06 17:54:48 +00:00
|
|
|
"@unhead/vue": "^2.1.10",
|
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",
|
2026-03-01 07:31:57 +00:00
|
|
|
"ai": "^6.0.105",
|
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",
|
2026-02-28 05:08:04 +00:00
|
|
|
"culori": "^4.0.2",
|
2026-03-01 08:30:30 +00:00
|
|
|
"dedent": "^1.7.1",
|
2026-02-27 20:01:35 +00:00
|
|
|
"fflate": "^0.8.2",
|
|
|
|
|
"fzstd": "^0.1.1",
|
2026-03-01 13:44:37 +00:00
|
|
|
"lib0": "^0.2.117",
|
2026-03-06 05:50:38 +00:00
|
|
|
"motion-v": "^2.0.0",
|
2026-03-01 09:12:45 +00:00
|
|
|
"prismjs": "^1.30.0",
|
2026-03-04 17:52:30 +00:00
|
|
|
"reka-ui": "^2.9.0",
|
2026-03-06 16:01:14 +00:00
|
|
|
"tailwind-merge": "^3.5.0",
|
|
|
|
|
"tailwind-variants": "^3.2.2",
|
2026-02-27 21:54:38 +00:00
|
|
|
"tailwindcss": "^4.2.1",
|
2026-03-01 14:25:46 +00:00
|
|
|
"trystero": "^0.22.0",
|
2026-03-01 08:45:27 +00:00
|
|
|
"valibot": "^1.2.0",
|
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",
|
2026-03-01 14:15:08 +00:00
|
|
|
"vue-router": "^5.0.3",
|
2026-03-01 08:03:51 +00:00
|
|
|
"vue-stream-markdown": "^0.6.0",
|
2026-03-01 14:25:46 +00:00
|
|
|
"y-indexeddb": "^9.0.12",
|
2026-03-01 13:44:37 +00:00
|
|
|
"y-protocols": "^1.0.7",
|
|
|
|
|
"yjs": "^13.6.29",
|
CSS Grid layout mode (#73)
* Switch to @open-pencil/yoga-layout with CSS Grid support
Use our fork (open-pencil/yoga, grid branch) which cherry-picks the
upstream CSS Grid PRs (#1893–#1898) onto current main. The JS bindings
are ported from the old embind approach to the new wasm_bridge.c API.
npm:@open-pencil/yoga-layout alias keeps all imports as 'yoga-layout'.
Also handle FinalizationRegistry change (upstream #1908) — node.free()
no longer exists, nodes are garbage collected automatically.
* Add CSS Grid layout mode
Scene graph:
- LayoutMode gains 'GRID' option alongside HORIZONTAL/VERTICAL
- GridTrack type (sizing: FIXED/FR/AUTO, value) for track definitions
- GridPosition type (column, row, columnSpan, rowSpan) for children
- New node props: gridTemplateColumns/Rows, gridColumnGap, gridRowGap,
gridPosition
Layout engine:
- buildGridTree() sets Display.Grid and maps GridTrack[] to Yoga's
setGridTemplateColumns/Rows API with FR/Points/Auto track types
- Grid children use gridPosition for column/row placement with span
- Flex layout path unchanged
Store:
- setLayoutMode('GRID') auto-creates NxM track grid based on child
count (sqrt heuristic), defaults to 1fr tracks
UI (LayoutSection.vue):
- Grid button (grid-2x2 icon) added to flow direction row
- Columns/Rows track editors: ScrubInput for value + AppSelect for
sizing mode (Fill fr / Fixed px / Auto), add/remove buttons
- Separate column gap and row gap ScrubInputs
- Wrap button hidden when grid is active
- Flex alignment grid hidden when grid is active
Kiwi serialization skips GRID mode for now (no .fig codec support).
* Add grid layout integration tests
12 new test scenarios covering:
- Basic 2x2 grid, fixed columns, mixed fr/fixed, unequal fr weights
- Column gap, row gap, both gaps combined
- Padding offsets
- Explicit gridPosition placement, column span, row span
- Absolute children skipped
- Hidden children collapsed
- Nested grid inside flex parent (computeAllLayouts)
Also fix: grid frames as children of flex parents now correctly use
Display.Grid via configureChildAsGrid() instead of falling through
to configureChildAsAutoLayout() which set FlexDirection.
* Deduplicate grid yoga configuration
Extract configureAsGrid() and createGridChildNode() shared by
buildGridTree (root-level grid) and configureChildAsGrid (grid
nested inside flex parent).
* Add grid layout to changelog
* Add grid support to JSX and Tailwind CSS export
OpenPencil format: grid → columns/rows/columnGap/rowGap props,
child colStart/rowStart/colSpan/rowSpan.
Tailwind format: grid grid-cols-N grid-rows-N gap-x-* gap-y-*,
mixed tracks use arbitrary values (grid-cols-[200px_1fr_auto]),
child col-start-*/row-start-*/col-span-*/row-span-*.
Both formats: padding emitted for grid frames (shared with flex),
flex-only props (justify/items/wrap/gap) scoped to isFlex.
* Remove duplicate gridTrackToTw, use shared formatTrack
Also drop unused GridTrackSizing import from LayoutSection.vue.
* Fix grid icon: use layout-grid instead of grid-2x2
unplugin-icons can't resolve icon names with digits after hyphens
(grid-2x2 → grid2x2 which doesn't exist).
* Polish layout UI and fix auto-layout behavior
- Replace text labels with compact icons: ↔/↕ for gap, ☐ for uniform padding, T/R/B/L for per-side padding
- Direction-aware gap icon: ↕ for vertical, ↔ for horizontal
- Pin +/− padding toggle button right of gap input
- Fix alignment grid axes for vertical layout (transpose primary/counter)
- Fix grid switch: set FIXED sizing, compute frame size from children
- Remove hardcoded white fill from Shift+A wrap
- Auto-detect horizontal vs vertical from selection bounds
* Add flex-to-grid switch integration test
Verify HUG frame expands and children are placed in 2x2 grid
when switching from vertical flex to grid layout.
* Update changelog for grid layout
2026-03-08 15:23:53 +00:00
|
|
|
"yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2"
|
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": {
|
2026-03-03 17:45:58 +00:00
|
|
|
"@agentclientprotocol/sdk": "^0.14.1",
|
2026-03-07 11:30:12 +00:00
|
|
|
"@hono/node-server": "^1.19.11",
|
2026-02-28 05:24:42 +00:00
|
|
|
"@iconify-json/lucide": "^1.2.94",
|
2026-03-02 18:07:25 +00:00
|
|
|
"@modelcontextprotocol/sdk": "^1.27.1",
|
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",
|
2026-02-28 08:37:02 +00:00
|
|
|
"@types/culori": "^4.0.1",
|
|
|
|
|
"@types/node": "^25.3.2",
|
2026-03-01 09:12:45 +00:00
|
|
|
"@types/prismjs": "^1.26.6",
|
2026-03-07 11:30:12 +00:00
|
|
|
"@types/ws": "^8.18.1",
|
2026-02-28 08:37:02 +00:00
|
|
|
"@typescript/native-preview": "^7.0.0-dev.20260228.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",
|
JSX renderer in @open-pencil/core
TreeNode builder functions (Frame, Text, Rectangle, etc.) produce a
lightweight tree structure. Two rendering paths:
- renderTreeNode(): tree → scene graph (browser, no deps)
- renderJsx(): JSX string → esbuild → tree → scene graph (CLI/headless)
Tailwind-like shorthand props: w/h, bg, rounded, flex, gap, p/px/py,
justify, items, shadow, blur, etc.
27 tests covering all node types, layout props, effects, and nesting.
2026-03-01 07:42:06 +00:00
|
|
|
"esbuild": "^0.27.3",
|
2026-03-07 11:30:12 +00:00
|
|
|
"hono": "^4.12.5",
|
2026-03-01 07:49:09 +00:00
|
|
|
"jscpd": "^4.0.8",
|
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",
|
2026-03-01 08:03:51 +00:00
|
|
|
"tw-animate-css": "^1.4.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",
|
2026-02-28 05:24:42 +00:00
|
|
|
"unplugin-icons": "^23.0.1",
|
2026-02-28 05:29:39 +00:00
|
|
|
"unplugin-vue-components": "^31.0.0",
|
feat: mobile layout, PWA support (#27) (#27)
- Mobile-responsive editor with bottom drawer, ribbon nav, HUD overlay
- Touch support: single-finger tools, two-finger pinch-zoom
- PWA: manifest, service worker, installability
- Extract LayerTree from LayersPanel, shared utils (colorToCSS, initials, toolIcons)
- Constants moved to src/constants.ts, clipboard state to editor store
- reka-ui Popover/DropdownMenu in MobileHud
Co-authored-by: Danila Poyarkov <dev@dannote.net>
2026-03-05 16:51:51 +00:00
|
|
|
"vite": "^7.0.4",
|
|
|
|
|
"vite-plugin-pwa": "^1.2.0",
|
2026-03-07 11:30:12 +00:00
|
|
|
"workbox-window": "^7.4.0",
|
|
|
|
|
"ws": "^8.19.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
|
|
|
}
|
2026-02-28 04:32:15 +00:00
|
|
|
}
|