made some updates

2026-05-01 07:30:29 +01:00
parent b9bc234d1d
commit 84ddd2e248
7 changed files with 267 additions and 106 deletions
@@ -68,17 +68,24 @@ export function Artboard({ id, label, x, y, width, height, renderUrl, route, onR
      setComponentStyles(null);
      return;
    }
-    if (!localFiberRoot) return;
+    // If the fiber tree hasn't arrived yet, still commit the selection so
+    // REQUEST_ELEMENT_STYLES fires — just pass null for the fiber data.
+    if (!localFiberRoot) {
+      selectComponent(nodeId, null);
+      return;
+    }
    const node = findFiberNode(localFiberRoot, nodeId);
    selectComponent(nodeId, node ?? null);
  }, [localFiberRoot, selectComponent, setComponentStyles]);

-  const handleComponentStylesUpdate = useCallback((_nodeId: string, styles: Record<string, string>) => {
-    // Only update styles if this artboard is the one currently selected
-    if (selectedArtboardId === id) {
+  const handleComponentStylesUpdate = useCallback((nodeId: string, styles: Record<string, string>) => {
+    // Guard against stale responses arriving after the user has already clicked
+    // a different component — only apply if artboard and node both still match.
+    const { selectedComponentId: currentId, selectedArtboardId: currentArtboard } = useCanvas.getState();
+    if (currentArtboard === id && currentId === nodeId) {
      setComponentStyles(styles);
    }
-  }, [id, selectedArtboardId, setComponentStyles]);
+  }, [id, setComponentStyles]);

  // ── Drag to reposition ─────────────────────────────────────────────────────
  const isDragging    = useRef(false);
@@ -359,6 +366,7 @@ export function Artboard({ id, label, x, y, width, height, renderUrl, route, onR
              width={width}
              height={height}
              onSelectionChange={(sel) => {
+                if (sel) selectArtboard(id);
                handleComponentSelected(sel?.nodeId ?? '');
              }}
            />
@@ -288,81 +288,157 @@ export function Canvas() {

      {/* Empty canvas onboarding — shown only when the project has no artboards yet */}
      {artboards.length === 0 && (
-        <div style={{
-          position: 'absolute', inset: 0, display: 'flex',
-          alignItems: 'center', justifyContent: 'center',
-          pointerEvents: 'none', zIndex: 3,
-        }}>
+        <UrlOnboardingOverlay
+          workspaceId={workspaceId}
+          projectId={projectId}
+          queryClient={queryClient}
+        />
+      )}
+    </div>
+  );
+}
+
+/* ── URL onboarding overlay ───────────────────────────────── */
+// Shown when the canvas has no artboards. Lets the user paste their CLI proxy
+// URL to auto-create the first artboard; route discovery will then fire and
+// populate the remaining pages automatically.
+function UrlOnboardingOverlay({
+  workspaceId,
+  projectId,
+  queryClient,
+}: {
+  workspaceId: string | null;
+  projectId: string | null;
+  queryClient: ReturnType<typeof useQueryClient>;
+}) {
+  const [url, setUrl] = useState('');
+  const [status, setStatus] = useState<'idle' | 'loading' | 'error'>('idle');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  const handleConnect = useCallback(async () => {
+    if (!workspaceId) return;
+    const trimmed = url.trim();
+    try {
+      const parsed = new URL(trimmed);
+      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') throw new Error('bad protocol');
+    } catch {
+      setErrorMsg('Enter a valid http:// or https:// URL');
+      return;
+    }
+    setStatus('loading');
+    setErrorMsg('');
+    try {
+      await createArtboardMutation({
+        workspace_id: workspaceId,
+        project_id: projectId ?? null,
+        name: 'Home',
+        origin_id: null,
+        parent_artboard_id: null,
+        metadata_jsonb: { x: 100, y: 100, width: 1280, height: 800, renderUrl: trimmed, route: '/' },
+      });
+      queryClient.invalidateQueries({ queryKey: ['artboards', workspaceId, projectId ?? undefined] });
+    } catch (e) {
+      console.error('[Canvas] Failed to create artboard', e);
+      setStatus('error');
+      setErrorMsg('Failed to create artboard — try again');
+    }
+  }, [url, workspaceId, projectId, queryClient]);
+
+  return (
+    <div style={{
+      position: 'absolute', inset: 0, display: 'flex',
+      alignItems: 'center', justifyContent: 'center',
+      pointerEvents: 'none', zIndex: 3,
+    }}>
+      <div
+        style={{
+          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20,
+          maxWidth: 360, pointerEvents: 'auto',
+        }}
+        onMouseDown={e => e.stopPropagation()}
+      >
+        {/* Icon */}
+        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+          <rect x="3" y="3" width="15" height="15" rx="3" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3.5 2"/>
+          <rect x="22" y="3" width="15" height="15" rx="3" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3.5 2"/>
+          <rect x="3" y="22" width="15" height="15" rx="3" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3.5 2"/>
+          <rect x="22" y="22" width="15" height="15" rx="3" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3.5 2"/>
+        </svg>
+
+        <div style={{ textAlign: 'center' }}>
          <div style={{
-            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20,
-            opacity: 0.55, maxWidth: 320,
+            fontFamily: "'JetBrains Mono', monospace",
+            fontSize: '0.65rem', color: 'rgba(255,255,255,0.7)',
+            letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4,
          }}>
-            {/* Icon */}
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
-              <rect x="3" y="3" width="15" height="15" rx="3" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3.5 2"/>
-              <rect x="22" y="3" width="15" height="15" rx="3" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3.5 2"/>
-              <rect x="3" y="22" width="15" height="15" rx="3" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3.5 2"/>
-              <rect x="22" y="22" width="15" height="15" rx="3" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3.5 2"/>
-            </svg>
-
-            <div style={{ textAlign: 'center' }}>
-              <div style={{
-                fontFamily: "'JetBrains Mono', monospace",
-                fontSize: '0.65rem', color: 'rgba(255,255,255,0.7)',
-                letterSpacing: '0.1em', textTransform: 'uppercase',
-                marginBottom: 4,
-              }}>
-                Get started
-              </div>
-              <div style={{ fontFamily: "'Inter', sans-serif", fontSize: '0.7rem', color: 'rgba(255,255,255,0.35)', lineHeight: 1.5 }}>
-                Live render your running app into design frames
-              </div>
-            </div>
-
-            {/* Steps */}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, width: '100%' }}>
-              {[
-                { n: '1', text: 'Press A and click the canvas to place a screen' },
-                { n: '2', text: 'Start the CLI proxy pointing at your dev server', code: 'npx @originmain/cli dev --target http://localhost:3000' },
-                { n: '3', text: "Paste the proxy URL into the screen's Connect field" },
-              ].map(({ n, text, code }) => (
-                <div key={n} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
-                  <div style={{
-                    width: 18, height: 18, borderRadius: '50%', flexShrink: 0,
-                    border: '1px solid rgba(51,133,255,0.5)',
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    fontFamily: "'JetBrains Mono', monospace",
-                    fontSize: '0.5rem', color: 'rgba(51,133,255,0.9)',
-                    fontWeight: 600,
-                  }}>
-                    {n}
-                  </div>
-                  <div>
-                    <div style={{ fontFamily: "'Inter', sans-serif", fontSize: '0.6875rem', color: 'rgba(255,255,255,0.55)', lineHeight: 1.45 }}>
-                      {text}
-                    </div>
-                    {code && (
-                      <div style={{
-                        marginTop: 5,
-                        padding: '4px 8px',
-                        background: 'rgba(51,133,255,0.1)',
-                        border: '1px solid rgba(51,133,255,0.2)',
-                        borderRadius: 5,
-                        fontFamily: "'JetBrains Mono', monospace",
-                        fontSize: '0.5625rem',
-                        color: 'rgba(51,133,255,0.85)',
-                        letterSpacing: '-0.01em',
-                      }}>
-                        {code}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
+            Connect your app
+          </div>
+          <div style={{ fontFamily: "'Inter', sans-serif", fontSize: '0.7rem', color: 'rgba(255,255,255,0.35)', lineHeight: 1.5 }}>
+            Paste the CLI proxy URL — all your app&apos;s pages will be auto-rendered as artboards
          </div>
        </div>
-      )}
+
+        {/* CLI hint */}
+        <div style={{
+          width: '100%', padding: '6px 10px',
+          background: 'rgba(51,133,255,0.08)', border: '1px solid rgba(51,133,255,0.18)',
+          borderRadius: 6, fontFamily: "'JetBrains Mono', monospace",
+          fontSize: '0.5625rem', color: 'rgba(51,133,255,0.75)', letterSpacing: '-0.01em',
+        }}>
+          npx @originmain/cli dev --target http://localhost:3000
+        </div>
+
+        {/* URL input */}
+        <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div style={{ display: 'flex', gap: 6 }}>
+            <input
+              type="url"
+              value={url}
+              onChange={e => { setUrl(e.target.value); setErrorMsg(''); }}
+              onKeyDown={e => { if (e.key === 'Enter') void handleConnect(); e.stopPropagation(); }}
+              placeholder="http://localhost:4170"
+              style={{
+                flex: 1, background: 'rgba(255,255,255,0.05)',
+                border: '1px solid rgba(255,255,255,0.12)', borderRadius: 6,
+                padding: '8px 10px', fontSize: '0.75rem',
+                color: 'rgba(255,255,255,0.85)',
+                fontFamily: "'JetBrains Mono', monospace",
+                outline: 'none', letterSpacing: '-0.01em',
+              }}
+              onFocus={e => (e.currentTarget.style.borderColor = '#3385FF')}
+              onBlur={e => (e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)')}
+            />
+            <button
+              onClick={() => void handleConnect()}
+              disabled={status === 'loading' || !url.trim()}
+              style={{
+                padding: '8px 14px', borderRadius: 6,
+                background: !url.trim() ? 'rgba(51,133,255,0.3)' : '#3385FF',
+                border: 'none', color: '#fff', fontSize: '0.75rem', fontWeight: 600,
+                cursor: status === 'loading' || !url.trim() ? 'not-allowed' : 'pointer',
+                fontFamily: "'Inter', sans-serif",
+                opacity: status === 'loading' ? 0.7 : 1, whiteSpace: 'nowrap',
+              }}
+            >
+              {status === 'loading' ? 'Connecting…' : 'Connect →'}
+            </button>
+          </div>
+          {errorMsg && (
+            <p style={{ margin: 0, fontSize: '0.625rem', color: '#FF8080', fontFamily: "'Inter', sans-serif" }}>
+              {errorMsg}
+            </p>
+          )}
+        </div>
+
+        <div style={{
+          fontFamily: "'Inter', sans-serif", fontSize: '0.625rem',
+          color: 'rgba(255,255,255,0.2)', lineHeight: 1.5, textAlign: 'center',
+        }}>
+          Or press{' '}
+          <kbd style={{ fontFamily: "'JetBrains Mono', monospace", padding: '1px 4px', background: 'rgba(255,255,255,0.08)', borderRadius: 3 }}>A</kbd>
+          {' '}and click the canvas to place a screen manually
+        </div>
+      </div>
    </div>
  );
 }
@@ -53,12 +53,17 @@ export function LiveArtboard({
  const iframeRef  = useRef<HTMLIFrameElement>(null);
  // Track whether the iframe has sent READY so we don't send messages too early.
  const isReadyRef = useRef(false);
+  // After READY fires the nodeMap inside the iframe is still empty — we can't
+  // request styles until after the first FIBER_TREE_UPDATE (which populates it).
+  // This ref holds the nodeId to re-request styles for after that first commit.
+  const pendingStylesFetchRef = useRef<string | null>(null);

  // Reset ready state whenever src changes.  Without this, isReadyRef stays
  // true from the previous page, causing design-token / selection effects to
  // fire against a half-loaded iframe between navigation and the new READY.
  useEffect(() => {
    isReadyRef.current = false;
+    pendingStylesFetchRef.current = null;
  }, [src]);

  // ── Send a typed message to the iframe ───────────────────────────────────
@@ -87,19 +92,26 @@ export function LiveArtboard({
          isReadyRef.current = true;
          // Push current design tokens into the iframe immediately.
          if (designTokens) sendMessage('SET_DESIGN_TOKENS', { tokens: designTokens });
-          // Restore any active selection that existed before the iframe loaded.
+          // Restore the highlight ring for any active selection.
+          // We cannot send REQUEST_ELEMENT_STYLES here — nodeMap is empty until
+          // the first React commit fires FIBER_TREE_UPDATE. Defer it via ref.
          if (selectedComponentId) {
            sendMessage('SELECT_COMPONENT', { nodeId: selectedComponentId });
+            pendingStylesFetchRef.current = selectedComponentId;
          }
          onReady?.();
          break;
        case 'FIBER_TREE_UPDATE':
          onFiberTreeUpdate?.(msg.root);
+          // If READY deferred a style fetch (nodeMap was empty at that point),
+          // the first commit has now populated nodeMap — request styles now.
+          if (pendingStylesFetchRef.current) {
+            sendMessage('REQUEST_ELEMENT_STYLES', { nodeId: pendingStylesFetchRef.current });
+            pendingStylesFetchRef.current = null;
+          }
          break;
        case 'COMPONENT_SELECTED':
          onComponentSelected?.(msg.nodeId);
-          // Request computed styles so the Design tab can populate immediately.
-          sendMessage('REQUEST_ELEMENT_STYLES', { nodeId: msg.nodeId });
          break;
        case 'COMPONENT_DESELECTED':
          // Renderer clicked empty space — clear the host-side selection.
@@ -124,24 +136,23 @@ export function LiveArtboard({
    sendMessage('SET_DESIGN_TOKENS', { tokens: designTokens });
  }, [designTokens, sendMessage]);

-  // ── Style edit mailbox ─────────────────────────────────────────────────────
-  // Watches the Zustand mailbox for PATCH_ELEMENT_STYLE events addressed to
-  // this artboard and forwards them to the iframe immediately.
-  const styleEditEvent = useCanvas((s) => s.styleEditEvent);
-  const clearStyleEdit = useCanvas((s) => s.clearStyleEdit);
+  // ── Style edit queue ───────────────────────────────────────────────────────
+  // Drains all PATCH_ELEMENT_STYLE events addressed to this artboard and
+  // forwards them to the iframe. Uses a queue (not a single slot) so that
+  // simultaneous width + height patches from resize are both delivered.
+  const styleEditQueue = useCanvas((s) => s.styleEditQueue);
+  const clearStyleEdits = useCanvas((s) => s.clearStyleEdits);
  const removeElementEvent = useCanvas((s) => s.removeElementEvent);
  const clearRemoveElement = useCanvas((s) => s.clearRemoveElement);

  useEffect(() => {
-    if (styleEditEvent?.artboardId === id && isReadyRef.current) {
-      sendMessage('PATCH_ELEMENT_STYLE', {
-        nodeId: styleEditEvent.nodeId,
-        property: styleEditEvent.property,
-        value: styleEditEvent.value,
-      });
-      clearStyleEdit();
+    const mine = styleEditQueue.filter((e) => e.artboardId === id);
+    if (mine.length === 0 || !isReadyRef.current) return;
+    for (const e of mine) {
+      sendMessage('PATCH_ELEMENT_STYLE', { nodeId: e.nodeId, property: e.property, value: e.value });
    }
-  }, [id, styleEditEvent, sendMessage, clearStyleEdit]);
+    clearStyleEdits(id);
+  }, [id, styleEditQueue, sendMessage, clearStyleEdits]);

  useEffect(() => {
    if (removeElementEvent?.artboardId === id && isReadyRef.current) {
@@ -36,12 +36,14 @@ interface CanvasStore {
  selectedComponentStyles: Record<string, string> | null;
  setComponentStyles: (styles: Record<string, string> | null) => void;

-  // ── Style edit mailbox ──────────────────────────────────────────────────────
-  // The Design tab drops a patch here; the owning LiveArtboard picks it up,
-  // forwards it to the iframe, then clears it.
-  styleEditEvent: { artboardId: string; nodeId: string; property: string; value: string } | null;
+  // ── Style edit queue ────────────────────────────────────────────────────────
+  // The Design tab and resize handles push patches here; each owning
+  // LiveArtboard drains entries addressed to it, then removes them.
+  // A queue (not a single slot) is required because resize sends width + height
+  // in the same synchronous event — a single slot would silently drop the first.
+  styleEditQueue: Array<{ artboardId: string; nodeId: string; property: string; value: string }>;
  patchStyleEdit: (artboardId: string, nodeId: string, property: string, value: string) => void;
-  clearStyleEdit: () => void;
+  clearStyleEdits: (artboardId: string) => void;

  // ── Element removal mailbox ─────────────────────────────────────────────────
  removeElementEvent: { artboardId: string; nodeId: string } | null;
@@ -81,10 +83,11 @@ export const useCanvas = create<CanvasStore>((set) => ({
  selectedComponentStyles: null,
  setComponentStyles: (styles) => set({ selectedComponentStyles: styles }),

-  styleEditEvent: null,
+  styleEditQueue: [],
  patchStyleEdit: (artboardId, nodeId, property, value) =>
-    set({ styleEditEvent: { artboardId, nodeId, property, value } }),
-  clearStyleEdit: () => set({ styleEditEvent: null }),
+    set((s) => ({ styleEditQueue: [...s.styleEditQueue, { artboardId, nodeId, property, value }] })),
+  clearStyleEdits: (artboardId) =>
+    set((s) => ({ styleEditQueue: s.styleEditQueue.filter((e) => e.artboardId !== artboardId) })),

  removeElementEvent: null,
  dispatchRemoveElement: (artboardId, nodeId) =>
@@ -1,6 +1,6 @@
 {
  "name": "@originmain/cli",
-  "version": "0.0.4",
+  "version": "0.0.5",
  "private": false,
  "description": "Originmain CLI — reverse proxy for live React component inspection.",
  "type": "module",
@@ -216,13 +216,16 @@ export function buildProxyFiberHookScript(): string {
  }

  // Walk a fiber subtree to find the nearest host DOM node (div, span, etc.).
-  // Composite components have stateNode = null or class instance; host elements
-  // have stateNode = actual DOM element with a .style property.
+  // Traverses both .child and .sibling so that components whose first child
+  // branch is a non-DOM composite (e.g. a Context.Provider sibling to a div)
+  // are handled correctly.
  function findDomElement(fiber) {
    if (!fiber) return null;
    var sn = fiber.stateNode;
    if (sn && typeof sn.style !== 'undefined') return sn;
-    return findDomElement(fiber.child);
+    var fromChild = findDomElement(fiber.child);
+    if (fromChild) return fromChild;
+    return findDomElement(fiber.sibling);
  }

  // Collect all NAMED descendants of fiber.child into out[], transparently
@@ -439,7 +442,16 @@ export function buildProxyFiberHookScript(): string {
          var dInfo = nodeMap[msg.nodeId];
          if (dInfo) {
            var dEl = findDomElement(dInfo.fiber);
-            if (dEl) dEl.style.setProperty('display', 'none');
+            if (dEl) {
+              dEl.style.setProperty('display', 'none');
+              // Clear the selection so the highlight ring doesn't linger over
+              // the now-invisible element on the next React commit.
+              if (selectedNodeId === msg.nodeId) {
+                selectedNodeId = null;
+                removeHighlight();
+                post({ type: 'COMPONENT_DESELECTED' });
+              }
+            }
          }
        }
        break;
@@ -465,8 +477,59 @@ export function buildProxyFiberHookScript(): string {
    } catch (e) { /* navigation not available in this context */ }
  }

+  // ── Route discovery ───────────────────────────────────────────────────────
+  // Scans <a href> links and the fiber nodeMap for same-origin routes, then
+  // posts ROUTES_DISCOVERED so the host canvas can auto-create artboards for
+  // every page. Called once 800 ms after READY (giving React time to paint)
+  // and again on every SPA popstate so navigation is reflected in the canvas.
+  function humanLabel(path) {
+    var seg = path.replace(/\/+$/, '').split('/').filter(function(s) { return s.length > 0; });
+    if (seg.length === 0) return 'Home';
+    var last = seg[seg.length - 1];
+    return last.replace(/[-_]/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+  }
+
+  function discoverRoutes() {
+    var seen = {};
+    var routes = [];
+
+    function addRoute(path, hint) {
+      if (!path || seen[path]) return;
+      if (path.charAt(0) === '#') return;
+      seen[path] = true;
+      var label = (hint && typeof hint === 'string' && hint.trim().slice(0, 50)) || humanLabel(path);
+      routes.push({ path: path, label: label });
+    }
+
+    addRoute(window.location.pathname, document.title || undefined);
+
+    var anchors = document.querySelectorAll('a[href]');
+    for (var i = 0; i < anchors.length; i++) {
+      try {
+        var url = new URL(anchors[i].href, window.location.href);
+        if (url.origin !== window.location.origin) continue;
+        addRoute(url.pathname, anchors[i].textContent || undefined);
+      } catch (e) { /* skip malformed hrefs */ }
+    }
+
+    Object.keys(nodeMap).forEach(function(nid) {
+      var entry = nodeMap[nid];
+      var fiber = entry && entry.fiber;
+      var name = fiber ? getDisplayName(fiber) : null;
+      if (name && /^(Link|NavLink|NextLink|RouterLink|a)$/.test(name)) {
+        var props = fiber.memoizedProps;
+        var href = props && (props.href || props.to);
+        if (typeof href === 'string' && href.charAt(0) === '/') addRoute(href);
+      }
+    });
+
+    if (routes.length > 0) post({ type: 'ROUTES_DISCOVERED', routes: routes });
+  }
+
  // ── Ready signal ──────────────────────────────────────────────────────────
  post({ type: 'READY' });
+  setTimeout(discoverRoutes, 800);
+  window.addEventListener('popstate', function() { setTimeout(discoverRoutes, 100); });
 })();`;
 }