pat/wursor
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
72 Commits 1 Branch 0 Tags
8bbee987ffaaf1757786c42b4bbf930e2dee22c0
Commit Graph
15 Commits
Author SHA1 Message Date
SinachPatandClaude Sonnet 4.6 8bbee987ff fix: resolve false 'static page' detection and missing route discovery on CLI-proxied apps 
Three related fixes for the canvas live-render panel:

1. captureExistingTree() in fiber-hook — retroactively walks the already-
   mounted React fiber tree via __reactFiber$ DOM annotations. Called
   immediately on READY (handles post-hydration race) and again at 2 s
   (handles deferred hydration / Suspense). Prevents the 'Static HTML page'
   false positive on React apps that mounted before the hook script ran.

2. Static-page timer bumped from 4 s → 8 s in LiveArtboard to give the
   2-second captureExistingTree safety-net enough headroom before the
   no-React verdict fires.

3. Route discovery same-origin fix applied to both renderer/fiber-hook.ts
   and live-sdk/hook.ts — root-relative hrefs (starting with '/') are now
   accepted regardless of origin so CLI-proxied pages (where links still
   point to the original domain) expose their navigation routes correctly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-05-07 08:36:20 +01:00
SinachPat f21969f018 made tiny updates 2026-05-06 18:51:17 +01:00
SinachPat fdf64ee72c made tiny updates 2026-05-05 22:06:31 +01:00
SinachPat 3f029e15c2 made tiny updates 2026-05-03 20:34:18 +01:00
SinachPat 548cd11719 made tiny updates 2026-05-01 09:54:14 +01:00
SinachPat 84ddd2e248 made some updates 2026-05-01 07:30:29 +01:00
SinachPat b9bc234d1d made tiny updates 2026-05-01 06:28:49 +01:00
SinachPatandClaude Sonnet 4.6 82dddb1801 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>
 2026-05-01 01:05:16 +01:00
SinachPatandClaude Sonnet 4.6 edada3091e feat: Design tab, live style editing, route-aware artboards, canvas onboarding 
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>
 2026-04-30 22:04:37 +01:00
SinachPat e98fbb31f7 improved a lot of things 2026-04-30 16:56:27 +01:00
SinachPat 42ba668399 improved a lot of things 2026-04-30 16:47:26 +01:00
SinachPat 0c3ac48a3b improved a lot of things 2026-04-30 01:21:48 +01:00
SinachPat 45be1b935d improved a lot of things 2026-04-29 12:09:18 +01:00
SinachPat 97315846be improved a lot of things 2026-04-26 09:09:55 +01:00
SinachPat dc177c7689 made system changes 2026-04-23 09:39:01 +01:00