pat/wursor
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Design tab, live style editing, route-aware artboards, canvas onboarding

Browse Source 
Design tab (4-tab inspector: Design / Props / Diff / Graph)
- Click any component in a live artboard to inspect computed CSS
- Typography, Layout, Visual sections auto-populated from getComputedStyle
- Every property is inline-editable; changes apply live via PATCH_ELEMENT_STYLE
- Zero source-code modifications — purely in-browser style overrides

Protocol additions (packages/renderer)
- REQUEST_ELEMENT_STYLES / ELEMENT_STYLES round-trip for CSS inspection
- PATCH_ELEMENT_STYLE for live style patching

Live SDK (packages/live-sdk)
- respondWithStyles(): reads 30 curated computed CSS properties
- patchElementStyle(): applies inline style override to fiber's DOM element

Canvas store
- selectedComponentStyles: current element's CSS map
- styleEditEvent mailbox: Design tab → LiveArtboard style dispatch (Zustand v5 compatible)

Route-aware artboards
- Each artboard now has an optional route (e.g. /dashboard)
- buildSrc(base, route) helper in Artboard.tsx
- Route field editable in Inspector Props tab, persisted to metadata_jsonb

On-canvas onboarding
- Empty canvas now shows 3-step guide: press A → CLI command → paste URL
- CLI command shown inline in a highlighted code block

Changelog and Handoff updated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SinachPat
2026-04-30 22:04:37 +01:00
co-authored by Claude Sonnet 4.6
parent 8514ffdc1a
commit edada3091e
10 changed files with 669 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+49
View File
@@ -0,0 +1,49 @@
# Changelog
All notable changes to Originmain are documented here.
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.
- **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.
### 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.
- `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.
---
## [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