diff --git a/CHANGELOG.md b/CHANGELOG.md index 6285e42..6d887b3 100644 --- a/CHANGELOG.md +++ b/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 ``) + 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 `` 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. -- **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. -- **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 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. +- **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 has an optional `route` field (e.g. `/dashboard`). The iframe src becomes `baseUrl + route`. Route is editable inline in the Props tab. +- **On-canvas onboarding** — The empty canvas shows a 3-step guide (Press A → run CLI → paste proxy URL) including the exact CLI command. ### 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. -- `tools/list` MCP endpoint now includes `inputSchema` per spec so IDE clients can construct valid calls without out-of-band documentation. -- `ProjectSettingsForm` role check used the wrong constant (`'DEVELOPER'` → `'ENGINEER'`); delete-confirm compared against mutable `name` state instead of the original `initialName`. -- Removed dead `INJECT_FIBER_HOOK` message type from the renderer protocol. +- HTTP 204 with body in `/api/design-language` route — now returns 200. +- `tools/list` MCP endpoint now includes `inputSchema` per spec. +- `ProjectSettingsForm` role check used wrong constant (`'DEVELOPER'` → `'ENGINEER'`). +- Removed dead `INJECT_FIBER_HOOK` message type from renderer protocol. +- Zustand v5 compatibility: replaced `subscribe(selector, listener)` (removed in v5) with `useEffect` + selector hook. ---