optimize: connect Canvas to store, fix eraser/pan, stale closure, layer ordering, and bundle splitting

[Copilot]

The Canvas ignored all toolbar state (tool, color, size), the eraser painted white instead of erasing, pan was unimplemented, and several other bugs existed across loading, layer management, and toast ID generation.

Canvas (Canvas.tsx)

• Subscribe to tool/color/size from Zustand store via refs (stale-closure-safe inside event handlers)
• Eraser now uses destination-out compositing — actual transparency, not white paint
• Pan tool implemented via drawImage (GPU-composited, avoids slow getImageData/putImageData round-trip)
• Cursor reflects active tool: crosshair / cell / grab → grabbing while dragging
• Resize preserves canvas content via offscreen canvas + drawImage

// Before: hardcoded, toolbar had no effect
ctx.strokeStyle = '#000000'
ctx.lineWidth = 4

// After: live store values via refs
ctx.strokeStyle = colorRef.current
ctx.lineWidth = sizeRef.current

LoadingScreen (LoadingScreen.tsx)

• messageInterval captured stale progress = 0 — message never advanced
• Merged message update into the progress functional updater; removed the second interval and progress from the dep array

Store (useAppStore.ts)

• moveLayerUp / moveLayerDown were TODO stubs — now swap adjacent strokes/shapes correctly

Toast (Toast.tsx)

• Replaced Math.random().toString(36) with nanoid() (already a project dependency)

Bundle splitting (vite.config.ts)

• Added framer-motion, zustand, and @tldraw/tldraw to manualChunks to reduce main chunk size and improve initial load

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• registry.npmmirror.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/_temp/ghcca-node/node/bin/npm install (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/_temp/ghcca-node/node/bin/npm install --ignore-scripts (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

帮我自动优化一下

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.