feat: Figma-parity design editing — visual panel, live resize, route grid

Inspector:
- Design tab rebuilt with semantic Figma-style layout: W/H stepper inputs
  at top, Fill with colour-picker swatch, Typography row (size/weight/
  line-height), text-align toggle group, Layout section with flex controls
  + padding 4-corner grid, Appearance (radius/opacity/border/shadow)
- All fields fire patchStyleEdit on every keystroke / arrow-key step
- Sections conditionally render: Fill hidden when bg is transparent, etc.
- NumInput: strips/restores CSS unit, Shift+↑↓ for ×10 step
- ColorInput: native colour picker behind swatch + hex text input

SelectionOverlay:
- Resize handles call patchStyleEdit on every mousemove → live iframe preview
- 8 handles: 4 corners (nwse/nesw) + 4 edge midpoints (ns/ew)
- Delete button in label bar + Delete/Backspace keyboard shortcut
- Dimension tooltip: ComponentName W × H

Canvas / Artboard:
- ROUTES_DISCOVERED handler: auto-creates artboards in a row for every
  undiscovered route, pendingRouteCreation ref prevents duplicates
- buildSrc() helper resolves route-aware iframe src

live-sdk / hook:
- discoverRoutes(): scans <a href> + fiber tree for Link/NavLink components
- removeElement(), patchElementStyle(), respondWithStyles() handlers
- Route re-discovery on popstate

protocol: REQUEST_ELEMENT_STYLES, PATCH_ELEMENT_STYLE, REMOVE_ELEMENT host
messages; ELEMENT_STYLES, ROUTES_DISCOVERED renderer messages

canvas store: styleEditEvent + removeElementEvent mailboxes (Zustand v5
compatible — useEffect selectors, no 2-arg subscribe)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/app/src/store/canvas.ts

@@ -42,6 +42,11 @@ interface CanvasStore {
   styleEditEvent: { artboardId: string; nodeId: string; property: string; value: string } | null;
   patchStyleEdit: (artboardId: string, nodeId: string, property: string, value: string) => void;
   clearStyleEdit: () => void;
+
+  // ── Element removal mailbox ─────────────────────────────────────────────────
+  removeElementEvent: { artboardId: string; nodeId: string } | null;
+  dispatchRemoveElement: (artboardId: string, nodeId: string) => void;
+  clearRemoveElement: () => void;
 }
 
 export const useCanvas = create<CanvasStore>((set) => ({
@@ -80,4 +85,9 @@ export const useCanvas = create<CanvasStore>((set) => ({
   patchStyleEdit: (artboardId, nodeId, property, value) =>
     set({ styleEditEvent: { artboardId, nodeId, property, value } }),
   clearStyleEdit: () => set({ styleEditEvent: null }),
+
+  removeElementEvent: null,
+  dispatchRemoveElement: (artboardId, nodeId) =>
+    set({ removeElementEvent: { artboardId, nodeId } }),
+  clearRemoveElement: () => set({ removeElementEvent: null }),
 }));