wursor/CHANGELOG.md

Changelog

All notable changes to Originmain are documented here.
Format: [version] — date — summary

---

[Unreleased]

Added

• 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: 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.
• Tab order: Design → Props → Diff → Graph.
• selectComponent store action clears selectedComponentStyles on every selection change.
• selectArtboard store action clears both component selection and styles.

Fixed

• 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.

---

[0.0.3] — 2026-04-28

• CLI proxy published to npm as @originmain/cli
• README added covering quick start, CLI flags, programmatic API

[0.0.2] — 2026-04-27

• Live rendering foundation: fiber hook injection, X-Frame-Options stripping, WebSocket passthrough
• Canvas artboard system: create, drag, rename, delete
• Inspector: Props / Diff / Graph tabs
• Live artboard iframe with bidirectional postMessage protocol
• Click-to-select components in live render with blue highlight ring
• Design token injection via CSS custom properties
• Drift report generation via AI layer
• Diff export with AI-generated summaries
• MCP agent bridge with JSON-RPC 2.0 workspace token auth
• Origin Graph query tab in inspector