Commit Graph
19 Commits
Author SHA1 Message Date
SinachPatandClaude Sonnet 4.6 b59a3dddd3 debug: add console diagnostics to fiber hook to trace React detection failure
Logs at: script activation, React inject() call, onCommitFiberRoot fire,
and captureExistingTree DOM scan result. Temporary — remove after diagnosis.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 10:29:06 +01:00
SinachPatandClaude Sonnet 4.6 8af7dacacc fix: add inject() to legacy buildFiberHookScript hook as well
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-07 14:10:23 +01:00
SinachPatandClaude Sonnet 4.6 d1d5e352c8 fix: add inject() to DevTools hook so React actually calls onCommitFiberRoot
React's injectInternals() calls hook.inject(renderer) before it will ever
invoke onCommitFiberRoot. When inject is missing, React's try/catch silently
bails and injectedHook stays null — our handler is never reached regardless
of how correctly onCommitFiberRoot is set up.

Fix: define inject() on the hook we create (returns a renderer ID and stores
the renderer in hook.renderers, matching the React DevTools spec). Also
patches inject onto any existing stub hook that lacks it, so third-party
minimal hooks don't silently block registration.

This is the root cause of the 'Static HTML page' false positive on apps
that don't have the React DevTools browser extension installed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-07 14:04:29 +01:00
SinachPatandClaude Sonnet 4.6 f707ecd7b3 fix: broaden captureExistingTree to find React root in Next.js App Router
Next.js 13+ App Router calls hydrateRoot on <html> or <body> directly
(not on a #__next div), so __reactFiber$ annotations land on
document.documentElement or document.body.

Changes:
- Add document.documentElement to the candidate list (covers App Router)
- Extract getFiber() helper to remove repeated key-scan loop
- Add DOM-wide fallback scan (querySelectorAll('*')) so any React app
  is found regardless of its root container convention
- Remove the early !tree bail-out — post FIBER_TREE_UPDATE even with a
  sparse tree, matching onCommitFiberRoot's behaviour

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-07 10:52:27 +01:00
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