docs: update changelog with Figma-parity design panel details

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

CHANGELOG.md

@@ -8,27 +8,36 @@ Format: [version] — date — summary
 ## [Unreleased]
 
 ### Added
-- **Design tab** — New first-position inspector tab (Design / Props / Diff / Graph). When a component is selected in a live artboard, computed CSS properties appear grouped into Typography, Layout, and Visual sections. Every property is inline-editable: changes apply immediately to the live iframe with zero source-code modifications.
+- **Figma-style Design panel** — Inspector Design tab rebuilt from scratch with semantic Figma-parity layout:
+  - **Dimensions block** — W/H stepper inputs always at top, arrow-key ±1 (Shift ±10) while preserving CSS unit
+  - **Fill** — colour-picker swatch (opens native `<input type="color">`) + hex text input + alpha %; hidden when background is transparent
+  - **Text Color** — same colour-swatch treatment for `color` property
+  - **Typography** — font family full-width text input, compact row of Size / Weight / Line-H, letter-spacing + text-align toggle group (L/C/R/J icon buttons)
+  - **Layout** — Display select, flex-direction toggle (→↓←↑), Gap, Align/Justify selects, 4-corner padding grid (↑→↓←)
+  - **Appearance** — Radius + Opacity side-by-side, border colour/width (shown only when border exists), box-shadow text input
+  - All inputs fire `patchStyleEdit` on every change — live preview in the iframe with zero latency
+- **Live resize handles** — SelectionOverlay handles call `patchStyleEdit` on every `mousemove` during drag, giving real-time iframe feedback
+- **8 resize handles** — 4 corners (nwse/nesw cursors) + 4 edge midpoints (ns/ew cursors), matching Figma's control points
+- **Delete component** — "✕ delete" button in the selection label bar + Delete/Backspace keyboard shortcut; sends `REMOVE_ELEMENT` to iframe (sets `display: none`, non-destructive)
+- **Auto multi-screen layout** — When a live artboard connects, `ROUTES_DISCOVERED` message auto-creates new artboards for every undiscovered route in a horizontal row (80 px gaps). Designers see all app screens on the canvas without manual setup.
+- **Route discovery in hook** — `discoverRoutes()` scans `<a href>` DOM links + fiber tree for Link/NavLink/RouterLink components; fires on READY and on `popstate`
 - **Live style patching** — `PATCH_ELEMENT_STYLE` protocol message applies an inline-style override to a fiber node's DOM element in real time. Non-destructive — source files are unchanged; changes are exportable as diffs.
-- **Element style inspection** — `REQUEST_ELEMENT_STYLES` / `ELEMENT_STYLES` protocol round-trip: the CLI proxy hook reads `window.getComputedStyle()` for ~30 curated CSS properties (typography, layout, visual) and posts them back to the host.
+- **Element style inspection** — `REQUEST_ELEMENT_STYLES` / `ELEMENT_STYLES` protocol round-trip: hook reads `window.getComputedStyle()` for ~30 CSS properties and posts them back to the host.
-- **Route-aware artboards** — Each artboard now has an optional `route` field (e.g. `/dashboard`). The iframe src becomes `baseUrl + route`, letting designers have one artboard per screen with a single shared proxy URL. Route is editable inline in the Props tab.
+- **Route-aware artboards** — Each artboard has an optional `route` field (e.g. `/dashboard`). The iframe src becomes `baseUrl + route`. Route is editable inline in the Props tab.
-- **Multi-screen workflow** — Create one artboard per page, assign routes, get a full-app design view on the canvas. The `CanvasArtboard` type and `useArtboards` hook now surface the `route` field.
+- **On-canvas onboarding** — The empty canvas shows a 3-step guide (Press A → run CLI → paste proxy URL) including the exact CLI command.
-- **On-canvas onboarding** — The empty canvas now shows a 3-step guide (Press A → run CLI → paste proxy URL) including the exact CLI command, replacing the single-line hint.
-- **@originmain/cli v0.0.3** — Published to npm. README covers quick start, CLI flags, programmatic API (`startProxy`, `injectFiberHook`), and architecture notes.
-- **Artboard creation fixed** — Removed the `e.target === e.currentTarget` guard that permanently broke artboard creation because the canvas transform layer always intercepts pointer events.
-- **Artboard drag fixed** — Stale closure bug in `onUp`: final drag position now reads from a mutable ref (`dragOffsetRef`) rather than captured state, so artboards land where the user dropped them.
 
 ### Changed
 - Inspector default tab changed from **Props** to **Design** — mirrors Figma's inspect-first workflow.
-- `selectComponent` store action now clears `selectedComponentStyles` on every selection change so stale data never bleeds into a new selection.
+- Tab order: **Design → Props → Diff → Graph**.
+- `selectComponent` store action clears `selectedComponentStyles` on every selection change.
 - `selectArtboard` store action clears both component selection and styles.
-- Tab order: **Design → Props → Diff → Graph** (was Props → Diff → Graph).
 
 ### Fixed
-- HTTP 204 with body in `/api/design-language` route (RFC 7230 §3.3 violation) — now returns 200 with `null` body.
+- HTTP 204 with body in `/api/design-language` route — now returns 200.
-- `tools/list` MCP endpoint now includes `inputSchema` per spec so IDE clients can construct valid calls without out-of-band documentation.
+- `tools/list` MCP endpoint now includes `inputSchema` per spec.
-- `ProjectSettingsForm` role check used the wrong constant (`'DEVELOPER'` → `'ENGINEER'`); delete-confirm compared against mutable `name` state instead of the original `initialName`.
+- `ProjectSettingsForm` role check used wrong constant (`'DEVELOPER'` → `'ENGINEER'`).
-- Removed dead `INJECT_FIBER_HOOK` message type from the renderer protocol.
+- Removed dead `INJECT_FIBER_HOOK` message type from renderer protocol.
+- Zustand v5 compatibility: replaced `subscribe(selector, listener)` (removed in v5) with `useEffect` + selector hook.
 
 ---