@morphika/webframe 0.1.0

package/components/builder/BuilderCanvas.tsx

@@ -0,0 +1,354 @@
+"use client";
+
+import {
+  useRef,
+  useEffect,
+  useCallback,
+  useState,
+  type ReactNode,
+} from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+import { DEVICE_WIDTHS } from "../../lib/builder/types";
+import type { DeviceViewport } from "../../lib/builder/types";
+import CanvasToolbar from "./CanvasToolbar";
+import DeviceFrame from "./DeviceFrame";
+import ReadOnlyFrame from "./ReadOnlyFrame";
+import CanvasMinimap from "./CanvasMinimap";
+import { getSiteConfig } from "../../lib/config";
+
+// ============================================
+// BuilderCanvas — Infinite canvas with zoom/pan
+// Phase 3: Polish — smooth animations, minimap,
+// double-click zoom, cursor changes, sessionStorage
+// ============================================
+
+/** Gap between device frames in canvas pixels */
+const FRAME_GAP = 80;
+
+/** Device order for horizontal layout */
+const DEVICE_ORDER: DeviceViewport[] = ["desktop", "tablet", "phone"];
+
+/** Total canvas content width including gaps */
+const TOTAL_CONTENT_WIDTH =
+  DEVICE_WIDTHS.desktop + FRAME_GAP + DEVICE_WIDTHS.tablet + FRAME_GAP + DEVICE_WIDTHS.phone;
+
+/** sessionStorage key prefix for persisting canvas state per page */
+const CANVAS_STORAGE_PREFIX = `${getSiteConfig().storagePrefix}_canvas_`;
+
+interface BuilderCanvasProps {
+  children: ReactNode;
+}
+
+export default function BuilderCanvas({ children }: BuilderCanvasProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const [isPanning, setIsPanning] = useState(false);
+  const [isSpaceHeld, setIsSpaceHeld] = useState(false);
+  const panStartRef = useRef<{ x: number; y: number; panX: number; panY: number } | null>(null);
+  /** rAF handle for throttled wheel events — prevents jank on rapid scroll */
+  const wheelRafRef = useRef<number | null>(null);
+  /** Accumulated wheel deltas between animation frames */
+  const wheelAccumRef = useRef<{ deltaX: number; deltaY: number; cursorX: number; cursorY: number; isZoom: boolean } | null>(null);
+
+  // Whether to animate the next transform change (for smooth zoom on toolbar clicks, double-click, etc.)
+  const [isAnimating, setIsAnimating] = useState(false);
+  const animTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const zoom = useBuilderStore((s) => s.canvasZoom);
+  const panX = useBuilderStore((s) => s.canvasPanX);
+  const panY = useBuilderStore((s) => s.canvasPanY);
+  const tool = useBuilderStore((s) => s.canvasTool);
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const setCanvasPan = useBuilderStore((s) => s.setCanvasPan);
+  const zoomToPoint = useBuilderStore((s) => s.zoomToPoint);
+  const zoomToFit = useBuilderStore((s) => s.zoomToFit);
+  const zoomToFrame = useBuilderStore((s) => s.zoomToFrame);
+  const setActiveViewport = useBuilderStore((s) => s.setActiveViewport);
+  const bgColor = useBuilderStore((s) => s.pageSettings.background_color);
+  const pageSlug = useBuilderStore((s) => s.pageSlug);
+
+  // Refs for stable wheel/pan handlers — avoids re-creating callbacks on every zoom/pan change
+  const zoomRef = useRef(zoom);
+  const panXRef = useRef(panX);
+  const panYRef = useRef(panY);
+  useEffect(() => { zoomRef.current = zoom; }, [zoom]);
+  useEffect(() => { panXRef.current = panX; }, [panX]);
+  useEffect(() => { panYRef.current = panY; }, [panY]);
+
+  // ---- Trigger smooth animation for programmatic zoom/pan ----
+  const triggerAnimation = useCallback(() => {
+    setIsAnimating(true);
+    if (animTimeoutRef.current) clearTimeout(animTimeoutRef.current);
+    animTimeoutRef.current = setTimeout(() => setIsAnimating(false), 300);
+  }, []);
+
+  // ---- Persist to sessionStorage on changes ----
+  // BUG-020 fix: Include activeViewport in the storage key so different viewport
+  // tabs for the same page don't overwrite each other's canvas state.
+  useEffect(() => {
+    if (!pageSlug) return;
+    const key = `${CANVAS_STORAGE_PREFIX}${pageSlug}_${activeViewport}`;
+    try {
+      sessionStorage.setItem(key, JSON.stringify({ zoom, panX, panY }));
+    } catch {
+      // sessionStorage full or unavailable — ignore
+    }
+  }, [zoom, panX, panY, activeViewport, pageSlug]);
+
+  // ---- Zoom-to-fit on initial mount and editor mode changes ----
+  // Always start with zoom-to-fit when entering a page or switching editor
+  // modes (e.g. entering custom section editor) so the user sees the full
+  // layout overview. sessionStorage still persists the canvas state for
+  // mid-session viewport switches (the save effect above), but on fresh page
+  // entry / mode change we always reset to fit.
+  const editorMode = useBuilderStore((s) => s.editorMode);
+  const [hasInitialized, setHasInitialized] = useState(false);
+
+  // Reset initialization flag when editor mode changes (page ↔ customSection)
+  // so that zoom-to-fit triggers again
+  const prevEditorMode = useRef(editorMode);
+  useEffect(() => {
+    if (prevEditorMode.current !== editorMode) {
+      prevEditorMode.current = editorMode;
+      setHasInitialized(false);
+    }
+  }, [editorMode]);
+
+  useEffect(() => {
+    if (hasInitialized) return;
+    const el = viewportRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return;
+
+    zoomToFit(rect.width, rect.height);
+    setHasInitialized(true);
+  }, [hasInitialized, zoomToFit]);
+
+  // ---- Wheel handler: Ctrl/Cmd+scroll = zoom, plain scroll = pan ----
+  // Throttled via requestAnimationFrame to prevent jank on rapid scroll.
+  // Deltas accumulate between frames so no input is lost.
+
+  // Stable flush — reads current values from refs, never re-created
+  const flushWheel = useCallback(() => {
+    wheelRafRef.current = null;
+    const accum = wheelAccumRef.current;
+    if (!accum) return;
+    wheelAccumRef.current = null;
+
+    if (accum.isZoom) {
+      const zoomDelta = -accum.deltaY * 0.005;
+      const newZoom = zoomRef.current * (1 + zoomDelta);
+      zoomToPoint(newZoom, accum.cursorX, accum.cursorY);
+    } else {
+      setCanvasPan(panXRef.current - accum.deltaX, panYRef.current - accum.deltaY);
+    }
+  }, [zoomToPoint, setCanvasPan]);
+
+  // Stable wheel handler — never re-subscribed during zoom/pan
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      e.preventDefault();
+      const el = viewportRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const cursorX = e.clientX - rect.left;
+      const cursorY = e.clientY - rect.top;
+      const isZoom = e.ctrlKey || e.metaKey;
+
+      // Accumulate deltas (overwrite cursor pos with latest event)
+      const prev = wheelAccumRef.current;
+      if (prev && prev.isZoom === isZoom) {
+        prev.deltaX += e.deltaX;
+        prev.deltaY += e.deltaY;
+        prev.cursorX = cursorX;
+        prev.cursorY = cursorY;
+      } else {
+        wheelAccumRef.current = { deltaX: e.deltaX, deltaY: e.deltaY, cursorX, cursorY, isZoom };
+      }
+
+      // Schedule flush on next animation frame (coalesces rapid events)
+      if (wheelRafRef.current === null) {
+        wheelRafRef.current = requestAnimationFrame(flushWheel);
+      }
+    },
+    [flushWheel]
+  );
+
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+      if (wheelRafRef.current !== null) cancelAnimationFrame(wheelRafRef.current);
+    };
+  }, [handleWheel]);
+
+  // ---- Mouse pan (hand tool, middle-click, or space+drag) ----
+  const shouldPan = tool === "hand" || isSpaceHeld;
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      // Middle-click always pans
+      const isMiddle = e.button === 1;
+      if (isMiddle || (e.button === 0 && shouldPan)) {
+        e.preventDefault();
+        setIsPanning(true);
+        panStartRef.current = { x: e.clientX, y: e.clientY, panX, panY };
+      }
+    },
+    [shouldPan, panX, panY]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isPanning || !panStartRef.current) return;
+      const dx = e.clientX - panStartRef.current.x;
+      const dy = e.clientY - panStartRef.current.y;
+      setCanvasPan(panStartRef.current.panX + dx, panStartRef.current.panY + dy);
+    },
+    [isPanning, setCanvasPan]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsPanning(false);
+    panStartRef.current = null;
+  }, []);
+
+  // ---- Double-click on frame header to zoom to 100% ----
+  const handleFrameDoubleClick = useCallback(
+    (device: DeviceViewport) => {
+      const el = viewportRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      triggerAnimation();
+      setActiveViewport(device);
+      zoomToFrame(device, rect.width, rect.height);
+    },
+    [zoomToFrame, setActiveViewport, triggerAnimation]
+  );
+
+  // ---- Space key for temporary hand tool ----
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      // Skip when inside asset browser modal (portal on document.body)
+      if ((e.target as HTMLElement)?.closest?.("[data-asset-modal]")) return;
+      if (e.code === "Space" && !e.repeat) {
+        const tag = (e.target as HTMLElement)?.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        e.preventDefault();
+        setIsSpaceHeld(true);
+      }
+    }
+    function handleKeyUp(e: KeyboardEvent) {
+      if ((e.target as HTMLElement)?.closest?.("[data-asset-modal]")) return;
+      if (e.code === "Space") {
+        setIsSpaceHeld(false);
+        setIsPanning(false);
+        panStartRef.current = null;
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
+  // ---- Cursor style ----
+  const getCursor = () => {
+    if (isPanning) return "grabbing";
+    if (shouldPan) return "grab";
+    return "default";
+  };
+
+  // Dot grid sizing
+  const dotSpacing = 24 * zoom;
+
+  return (
+    <div
+      ref={viewportRef}
+      className="relative flex-1 overflow-hidden"
+      style={{
+        cursor: getCursor(),
+        backgroundColor: "#f0f0f0",
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      {/* Dot grid background */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: `radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px)`,
+          backgroundSize: `${dotSpacing}px ${dotSpacing}px`,
+          backgroundPosition: `${panX % dotSpacing}px ${panY % dotSpacing}px`,
+          opacity: Math.min(1, zoom * 1.2),
+        }}
+      />
+
+      {/* Canvas layer — GPU-composited via translate3d (no layout reflow on pan/zoom) */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          transform: `translate3d(${panX}px, ${panY}px, 0) scale(${zoom})`,
+          transformOrigin: "0 0",
+          willChange: "transform",
+          transition: isAnimating
+            ? "transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"
+            : "none",
+        }}
+      >
+        {/* 3 device frames side-by-side */}
+        <div className="flex items-start" style={{ gap: FRAME_GAP }}>
+          {DEVICE_ORDER.map((device) => {
+            const isActive = activeViewport === device;
+            return (
+              <DeviceFrame
+                key={device}
+                device={device}
+                isActive={isActive}
+                onActivate={() => setActiveViewport(device)}
+                onDoubleClick={() => handleFrameDoubleClick(device)}
+                backgroundColor={bgColor}
+              >
+                {isActive ? (
+                  // Active frame: editable — receives the full editor tree
+                  children
+                ) : (
+                  // Inactive frame: read-only mirror — click anywhere to activate
+                  <div
+                    style={{ position: "relative", cursor: "pointer" }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setActiveViewport(device);
+                    }}
+                  >
+                    <div style={{ pointerEvents: "none" }}>
+                      <ReadOnlyFrame viewport={device} />
+                    </div>
+                  </div>
+                )}
+              </DeviceFrame>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Floating canvas toolbar */}
+      <CanvasToolbar viewportRef={viewportRef} onAnimatedAction={triggerAnimation} />
+
+      {/* Minimap */}
+      <CanvasMinimap
+        viewportRef={viewportRef}
+        totalContentWidth={TOTAL_CONTENT_WIDTH}
+        totalContentHeight={800}
+      />
+    </div>
+  );
+}

package/components/builder/CanvasMinimap.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+import { DEVICE_WIDTHS } from "../../lib/builder/types";
+
+// ============================================
+// CanvasMinimap — Shows viewport position in canvas
+// Phase 3: Optional minimap overlay
+// ============================================
+
+/** Scale factor for minimap rendering */
+const MINIMAP_SCALE = 0.04;
+const MINIMAP_WIDTH = 160;
+const MINIMAP_HEIGHT = 100;
+
+const FRAME_GAP = 80;
+const DEVICE_ORDER = ["desktop", "tablet", "phone"] as const;
+
+interface CanvasMinimapProps {
+  viewportRef: React.RefObject<HTMLDivElement | null>;
+  totalContentWidth: number;
+  totalContentHeight: number;
+}
+
+export default function CanvasMinimap({
+  viewportRef,
+  totalContentWidth,
+  totalContentHeight,
+}: CanvasMinimapProps) {
+  const zoom = useBuilderStore((s) => s.canvasZoom);
+  const panX = useBuilderStore((s) => s.canvasPanX);
+  const panY = useBuilderStore((s) => s.canvasPanY);
+  const setCanvasPan = useBuilderStore((s) => s.setCanvasPan);
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartRef = useRef<{ x: number; y: number; panX: number; panY: number } | null>(null);
+
+  const el = viewportRef.current;
+  const vpWidth = el?.clientWidth || 800;
+  const vpHeight = el?.clientHeight || 600;
+
+  // Calculate the scale to fit the entire canvas content in the minimap — memoized
+  const { scale, contentEstimateHeight } = useMemo(() => {
+    const h = Math.max(totalContentHeight, 600);
+    const sx = MINIMAP_WIDTH / (totalContentWidth + 200);
+    const sy = MINIMAP_HEIGHT / (h + 200);
+    return { scale: Math.max(0.01, Math.min(sx, sy, 1)), contentEstimateHeight: h };
+  }, [totalContentWidth, totalContentHeight]);
+
+  // Viewport rectangle in minimap space
+  const viewX = (-panX / zoom) * scale;
+  const viewY = (-panY / zoom) * scale;
+  const viewW = (vpWidth / zoom) * scale;
+  const viewH = (vpHeight / zoom) * scale;
+
+  // Frame rectangles in minimap space — memoized since device widths are static
+  const frames = useMemo(() => {
+    const result: { x: number; w: number; label: string; active: boolean }[] = [];
+    let xPos = 0;
+    for (const device of DEVICE_ORDER) {
+      result.push({
+        x: xPos * scale,
+        w: DEVICE_WIDTHS[device] * scale,
+        label: device[0].toUpperCase(),
+        active: activeViewport === device,
+      });
+      xPos += DEVICE_WIDTHS[device] + FRAME_GAP;
+    }
+    return result;
+  }, [scale, activeViewport]);
+
+  // Click on minimap to pan the viewport
+  const handleMinimapMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const clickY = e.clientY - rect.top;
+
+      // Convert minimap click to canvas space, then set pan so that point is centered
+      const canvasX = clickX / scale;
+      const canvasY = clickY / scale;
+      const newPanX = vpWidth / 2 - canvasX * zoom;
+      const newPanY = vpHeight / 2 - canvasY * zoom;
+      setCanvasPan(newPanX, newPanY);
+
+      // Start drag
+      setIsDragging(true);
+      dragStartRef.current = { x: e.clientX, y: e.clientY, panX: newPanX, panY: newPanY };
+    },
+    [scale, zoom, vpWidth, vpHeight, setCanvasPan]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDragging || !dragStartRef.current) return;
+      const dx = e.clientX - dragStartRef.current.x;
+      const dy = e.clientY - dragStartRef.current.y;
+      // Minimap drag is inverted relative to zoom scale
+      const canvasDx = (dx / scale) * zoom;
+      const canvasDy = (dy / scale) * zoom;
+      setCanvasPan(
+        dragStartRef.current.panX - canvasDx,
+        dragStartRef.current.panY - canvasDy
+      );
+    },
+    [isDragging, scale, zoom, setCanvasPan]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    dragStartRef.current = null;
+  }, []);
+
+  if (isCollapsed) {
+    return (
+      <button
+        onClick={() => setIsCollapsed(false)}
+        className="absolute bottom-6 right-4 z-40 w-8 h-8 flex items-center justify-center rounded-lg bg-[#1a1a1a]/80 text-white/60 hover:text-white hover:bg-[#1a1a1a] transition-colors shadow-lg backdrop-blur-sm"
+        title="Show minimap"
+        aria-label="Show minimap"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <rect x="1" y="1" width="12" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+          <rect x="3" y="3" width="4" height="3" rx="0.5" stroke="currentColor" strokeWidth="0.8" opacity="0.6" />
+        </svg>
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className="absolute bottom-6 right-4 z-40 rounded-lg overflow-hidden shadow-lg backdrop-blur-sm"
+      style={{
+        width: MINIMAP_WIDTH,
+        height: MINIMAP_HEIGHT,
+        backgroundColor: "rgba(26, 26, 26, 0.85)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        userSelect: "none",
+      }}
+      onMouseDown={handleMinimapMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      {/* Close/collapse button */}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsCollapsed(true);
+        }}
+        className="absolute top-1 right-1 z-50 w-4 h-4 flex items-center justify-center rounded text-white/40 hover:text-white/80 transition-colors"
+        title="Hide minimap"
+        aria-label="Hide minimap"
+      >
+        <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
+          <path d="M1 1L7 7M7 1L1 7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+        </svg>
+      </button>
+
+      {/* Device frame outlines */}
+      {frames.map((f, i) => (
+        <div
+          key={i}
+          className="absolute"
+          style={{
+            left: f.x,
+            top: 8 * scale,
+            width: f.w,
+            height: (contentEstimateHeight - 40) * scale,
+            border: `1px solid ${f.active ? "rgba(7, 107, 255, 0.6)" : "rgba(255, 255, 255, 0.15)"}`,
+            borderRadius: 2,
+            backgroundColor: f.active ? "rgba(7, 107, 255, 0.08)" : "rgba(255, 255, 255, 0.03)",
+          }}
+        />
+      ))}
+
+      {/* Viewport indicator */}
+      <div
+        className="absolute"
+        style={{
+          left: Math.max(0, viewX),
+          top: Math.max(0, viewY),
+          width: Math.min(viewW, MINIMAP_WIDTH),
+          height: Math.min(viewH, MINIMAP_HEIGHT),
+          border: "1.5px solid rgba(237, 56, 33, 0.7)",
+          borderRadius: 2,
+          backgroundColor: "rgba(237, 56, 33, 0.06)",
+          cursor: isDragging ? "grabbing" : "grab",
+          pointerEvents: "none",
+        }}
+      />
+    </div>
+  );
+}