feat(canvas): add leafer GPU renderer and interactive color-boundary crop tool

Introduce a leafer-ui canvas layer that mirrors rendered nodes and drives
viewport, node-drag, and alignment-guide updates imperatively, committing
React state on idle via startTransition to keep pan/zoom/drag at 60fps. Wire
the imperative viewport through wheel zoom, zoom-to, fit-view, and panning.

Add a dedicated crop tool: click a node to auto-detect a color-boundary crop
region or drag to preselect one, previewed with an on-canvas draft overlay
before entering the crop editor. Route uploads through renderContent so the
transparent WebP texture feeds the fast display path. Add node --test
coverage for the leafer renderer and color-boundary detection.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-16 20:46:31 +08:00
parent 8e1506e4c4
commit b363dcf888
12 changed files with 1426 additions and 49 deletions
+1
View File
@@ -20,6 +20,7 @@
"@radix-ui/react-switch": "^1.3.2",
"@radix-ui/react-tabs": "^1.1.16",
"ag-psd": "31.0.2",
"leafer-ui": "2.2.2",
"lucide-react": "^1.23.0",
"next": "^16.2.10",
"react": "^19.2.7",