@morphika/webframe 0.1.0

package/app/admin/pages/[slug]/page.tsx

@@ -0,0 +1,849 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useParams, usePathname } from "next/navigation";
+import Link from "next/link";
+import { useBuilderStore } from "../../../../lib/builder/store";
+import {
+  DndWrapper,
+  SortableRow,
+  SortableBlock,
+  SectionTypePicker,
+  BlockTypePicker,
+  SettingsPanel,
+  BuilderCanvas,
+  makeRowId,
+} from "../../../../components/builder";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import type { Page, PageSection, PageSectionV2, ParallaxGroup, SectionColumn, CustomSectionInstance, CustomSectionListItem } from "../../../../lib/sanity/types";
+import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../../../lib/sanity/types";
+import SectionEditorBar from "../../../../components/builder/SectionEditorBar";
+import CustomSectionInstanceCard from "../../../../components/builder/CustomSectionInstanceCard";
+import { ColumnDragProvider } from "../../../../components/builder/ColumnDragContext";
+import type { BlockType } from "../../../../lib/builder/types";
+import { findGaps } from "../../../../lib/builder/cascade";
+import { isSectionBlockType } from "../../../../lib/builder/types";
+import BlockLivePreview from "../../../../components/builder/BlockLivePreview";
+import SectionV2Canvas from "../../../../components/builder/SectionV2Canvas";
+import ParallaxGroupCanvas from "../../../../components/builder/ParallaxGroupCanvas";
+import { ThumbStatusProvider } from "../../../../lib/contexts/ThumbStatusContext";
+import PublishToggle from "../../../../components/admin/PublishToggle";
+
+// ============================================
+// Preview helper — opens the page in a new tab
+// ============================================
+
+function openPreview(store: { pageSlug: string }) {
+  // Use the dedicated /preview route which includes draft pages.
+  // All pages are fetched by slug.
+  const params = new URLSearchParams();
+  params.set("slug", store.pageSlug);
+  window.open(`/preview?${params}`, "_blank");
+}
+
+// ============================================
+// Help Modal — shows all keyboard shortcuts
+// ============================================
+
+function HelpModal({ onClose }: { onClose: () => void }) {
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape" || e.key === "?") {
+        e.preventDefault();
+        onClose();
+      }
+    }
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+
+  const shortcuts = [
+    { keys: "Ctrl+S", action: "Save page" },
+    { keys: "Ctrl+Z", action: "Undo" },
+    { keys: "Ctrl+Shift+Z", action: "Redo" },
+    { keys: "Ctrl+D", action: "Duplicate selected block" },
+    { keys: "Delete / Backspace", action: "Delete selected block" },
+    { keys: "Escape", action: "Clear selection" },
+    { keys: "P", action: "Open preview in new tab" },
+    { keys: "V", action: "Select tool" },
+    { keys: "H", action: "Hand (pan) tool" },
+    { keys: "Space + drag", action: "Temporary pan" },
+    { keys: "Ctrl + / Ctrl −", action: "Zoom in / out" },
+    { keys: "Ctrl+0", action: "Zoom to fit" },
+    { keys: "Scroll", action: "Pan canvas" },
+    { keys: "Ctrl+Scroll", action: "Zoom at cursor" },
+    { keys: "?", action: "Toggle this help" },
+  ];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white border border-neutral-200 rounded-lg p-6 max-w-md w-full mx-4 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-sm font-semibold text-neutral-900">Keyboard Shortcuts</h2>
+          <button
+            onClick={onClose}
+            className="text-neutral-400 hover:text-neutral-900 transition-colors text-sm"
+          >
+            &times;
+          </button>
+        </div>
+        <div className="space-y-2">
+          {shortcuts.map((s) => (
+            <div key={s.keys} className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-neutral-500">{s.action}</span>
+              <kbd className="text-[10px] bg-neutral-100 border border-neutral-200 rounded px-2 py-0.5 text-neutral-600">
+                {s.keys}
+              </kbd>
+            </div>
+          ))}
+        </div>
+        <div className="mt-5 pt-4 border-t border-neutral-200">
+          <p className="text-[10px] text-neutral-400">
+            Right-click a block for context menu (duplicate, delete)
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Context Menu for blocks
+// ============================================
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  rowKey: string;
+  colKey: string;
+  blockKey: string;
+}
+
+function BlockContextMenu({
+  menu,
+  onClose,
+  onDuplicate,
+  onDelete,
+}: {
+  menu: ContextMenuState;
+  onClose: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+}) {
+  useEffect(() => {
+    const close = () => onClose();
+    window.addEventListener("click", close);
+    window.addEventListener("contextmenu", close);
+    return () => {
+      window.removeEventListener("click", close);
+      window.removeEventListener("contextmenu", close);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed z-50 bg-white border border-neutral-200 rounded-xl shadow-xl py-1 min-w-[160px]"
+      style={{ left: menu.x, top: menu.y }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <button
+        onClick={() => {
+          onDuplicate();
+          onClose();
+        }}
+        className="w-full text-left px-3 py-1.5 text-sm text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900 transition-colors flex items-center gap-2"
+      >
+        <span className="text-neutral-400">⧉</span> Duplicate
+        <span className="ml-auto text-[9px] text-neutral-400">Ctrl+D</span>
+      </button>
+      <button
+        onClick={() => {
+          onDelete();
+          onClose();
+        }}
+        className="w-full text-left px-3 py-1.5 text-sm text-neutral-600 hover:bg-[var(--admin-error)]/10 hover:text-[var(--admin-error)] transition-colors flex items-center gap-2"
+      >
+        <span className="text-neutral-400">&times;</span> Delete
+        <span className="ml-auto text-[9px] text-neutral-400">Del</span>
+      </button>
+    </div>
+  );
+}
+
+// ============================================
+// Editor Shell
+// ============================================
+
+export default function PageEditorPage() {
+  const params = useParams();
+  const pathname = usePathname();
+  const slug = params.slug as string;
+  const isProjectRoute = pathname.startsWith("/admin/projects/");
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showSectionPicker, setShowSectionPicker] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [addBlockTarget, setAddBlockTarget] = useState<{
+    rowKey: string;
+    colKey: string;
+    insertIndex?: number;
+    isV2?: boolean;
+  } | null>(null);
+
+  // Preloaded custom sections list (fetched once, avoids per-modal-open fetch)
+  const [cachedCustomSections, setCachedCustomSections] = useState<CustomSectionListItem[] | null>(null);
+
+  // Preload custom sections list on mount
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/admin/custom-sections")
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => {
+        if (!cancelled && data?.sections) setCachedCustomSections(data.sections);
+      })
+      .catch(() => { /* silently fail — SectionTypePicker will retry if needed */ });
+    return () => { cancelled = true; };
+  }, []);
+
+  /** Refresh the cached custom sections list (call after create/delete) */
+  const refreshCustomSections = useCallback(() => {
+    fetch("/api/admin/custom-sections")
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => {
+        if (data?.sections) setCachedCustomSections(data.sections);
+      })
+      .catch(() => {});
+  }, []);
+
+  // Canvas viewport ref (for zoom-to-fit from keyboard shortcut)
+  const canvasViewportRef = useRef<HTMLDivElement>(null);
+
+  // Zustand store
+  const store = useBuilderStore();
+
+  // Refresh custom sections list when returning from section editor (may have created a new one)
+  const prevEditorMode = useRef(store.editorMode);
+  useEffect(() => {
+    if (prevEditorMode.current === "customSection" && store.editorMode !== "customSection") {
+      refreshCustomSections();
+    }
+    prevEditorMode.current = store.editorMode;
+  }, [store.editorMode, refreshCustomSections]);
+
+  // Load page data on mount
+  useEffect(() => {
+    async function loadPage() {
+      try {
+        const res = await fetch(`/api/admin/pages/${slug}`);
+        if (!res.ok) {
+          setError(res.status === 404 ? "Page not found" : "Failed to load page");
+          return;
+        }
+        const data = await res.json();
+        store.loadFromDocument(data.page as Page);
+        // Apply global styles as page defaults (background, text color)
+        store.applyGlobalStyles();
+      } catch {
+        setError("Network error");
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadPage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug]);
+
+  // Warn before leaving with unsaved changes
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (store.isDirty) {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [store.isDirty]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      // Skip all shortcuts when inside asset browser modal (portal on document.body)
+      if ((e.target as HTMLElement)?.closest?.("[data-asset-modal]")) return;
+
+      // Don't intercept when typing in inputs
+      const tag = (e.target as HTMLElement)?.tagName;
+      const isEditable = (e.target as HTMLElement)?.isContentEditable;
+      const isInput = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || isEditable;
+
+      // Ctrl/Cmd+S to save
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        if (store.isDirty && !store.isSaving) {
+          store.save();
+        }
+        return;
+      }
+
+      // Ctrl/Cmd+Z to undo (without Shift)
+      if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        store.undo();
+        return;
+      }
+
+      // Ctrl/Cmd+Shift+Z to redo
+      if ((e.metaKey || e.ctrlKey) && e.key === "Z" && e.shiftKey) {
+        e.preventDefault();
+        store.redo();
+        return;
+      }
+      // Also support Ctrl+Y for redo
+      if ((e.metaKey || e.ctrlKey) && e.key === "y") {
+        e.preventDefault();
+        store.redo();
+        return;
+      }
+
+      // Ctrl/Cmd+D to duplicate selected block
+      if ((e.metaKey || e.ctrlKey) && e.key === "d") {
+        e.preventDefault();
+        if (store.selectedBlockKey) {
+          store.duplicateBlock(store.selectedBlockKey);
+        }
+        return;
+      }
+
+      // Escape to clear selection / close modals
+      if (e.key === "Escape") {
+        if (contextMenu) {
+          setContextMenu(null);
+        } else {
+          store.clearSelection();
+        }
+        return;
+      }
+
+      // Delete/Backspace to delete selected block
+      if ((e.key === "Delete" || e.key === "Backspace") && store.selectedBlockKey && !isInput) {
+        store.deleteBlock(store.selectedBlockKey);
+      }
+
+      // P to open preview in new tab
+      if (e.key === "p" && !isInput && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        openPreview(store);
+        return;
+      }
+
+      // ? to toggle help modal
+      if (e.key === "?" && !isInput) {
+        e.preventDefault();
+        setShowHelp((prev) => !prev);
+        return;
+      }
+
+      // ---- Canvas shortcuts ----
+
+      // V → Select tool
+      if (e.key === "v" && !isInput && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        store.setCanvasTool("select");
+        return;
+      }
+
+      // H → Hand tool
+      if (e.key === "h" && !isInput && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        store.setCanvasTool("hand");
+        return;
+      }
+
+      // Ctrl/Cmd + = or + → Zoom in
+      if ((e.metaKey || e.ctrlKey) && (e.key === "=" || e.key === "+")) {
+        e.preventDefault();
+        store.setCanvasZoom(store.canvasZoom + 0.1);
+        return;
+      }
+
+      // Ctrl/Cmd + - → Zoom out
+      if ((e.metaKey || e.ctrlKey) && e.key === "-") {
+        e.preventDefault();
+        store.setCanvasZoom(store.canvasZoom - 0.1);
+        return;
+      }
+
+      // Ctrl/Cmd + 0 → Zoom to fit
+      if ((e.metaKey || e.ctrlKey) && e.key === "0") {
+        e.preventDefault();
+        const el = canvasViewportRef.current;
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          store.zoomToFit(rect.width, rect.height);
+        }
+        return;
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [store, contextMenu]);
+
+  // Handle save
+  const handleSave = useCallback(async () => {
+    await store.save();
+  }, [store]);
+
+  // Handle add empty section (with column layout preset)
+  // Handle add V2 empty section (with preset)
+  // afterRowKey=null → always appends to end of page (bottom "Add Section" button)
+  const handleAddEmptySectionV2 = useCallback(
+    (preset: "full" | "halves" | "thirds" | "quarters" | "1/3+2/3" | "2/3+1/3") => {
+      store.addSectionV2(preset, null);
+      setShowSectionPicker(false);
+    },
+    [store]
+  );
+
+  // Handle add page section (project grid)
+  // afterRowKey=null → always appends to end of page (bottom "Add Section" button)
+  const handleAddSection = useCallback(
+    (blockType: "projectGridBlock") => {
+      store.addSection(blockType, null);
+      setShowSectionPicker(false);
+    },
+    [store]
+  );
+
+  // Handle insert custom section instance
+  const handleSelectCustomSection = useCallback(
+    (section: CustomSectionListItem) => {
+      store.addCustomSectionInstance(section._id, section.slug.current, section.title, null);
+      setShowSectionPicker(false);
+    },
+    [store]
+  );
+
+  // Handle create new custom section (enter section editor with blank section)
+  const handleCreateCustomSection = useCallback(() => {
+    store.enterSectionEditor(null, null, null);
+    setShowSectionPicker(false);
+  }, [store]);
+
+  // Handle add parallax group
+  const handleAddParallaxGroup = useCallback(() => {
+    store.addParallaxGroup(null);
+    setShowSectionPicker(false);
+  }, [store]);
+
+  // Handle add block — V2 sections only
+  const handleAddBlock = useCallback(
+    (type: BlockType) => {
+      if (!addBlockTarget) return;
+      store.addBlockV2(addBlockTarget.rowKey, addBlockTarget.colKey, type, addBlockTarget.insertIndex);
+      setAddBlockTarget(null);
+    },
+    [store, addBlockTarget]
+  );
+
+  // Handle add block target from V2 sections
+  const handleAddBlockTargetV2 = useCallback(
+    (sectionKey: string, colKey: string, insertIndex?: number) => {
+      setAddBlockTarget({ rowKey: sectionKey, colKey, insertIndex, isV2: true });
+    },
+    []
+  );
+
+  // Handle block context menu
+  const handleBlockContextMenu = useCallback(
+    (e: React.MouseEvent, rowKey: string, colKey: string, blockKey: string) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setContextMenu({ x: e.clientX, y: e.clientY, rowKey, colKey, blockKey });
+    },
+    []
+  );
+
+  // Row IDs for sortable context
+  const rowIds = store.rows.map((r) => makeRowId(r._key));
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-xs text-neutral-400 animate-pulse">
+          Loading editor...
+        </p>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <p className="text-sm text-[var(--admin-error)]">{error}</p>
+        <Link
+          href={isProjectRoute ? "/admin/projects" : "/admin/pages"}
+          className="text-xs text-neutral-400 hover:text-neutral-900"
+        >
+          &larr; Back to {isProjectRoute ? "projects" : "pages"}
+        </Link>
+      </div>
+    );
+  }
+
+  const editorMode = store.editorMode;
+  const isInSectionEditor = editorMode === "customSection";
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* ---- Section Editor Bar (replaces toolbar in customSection mode) ---- */}
+      {isInSectionEditor && <SectionEditorBar />}
+
+      {/* ---- Toolbar (hidden in section editor mode) ---- */}
+      {!isInSectionEditor && <div className="flex items-center justify-between bg-white border-b border-neutral-200 px-4 h-14 shrink-0">
+        <div className="flex items-center gap-3">
+          <Link
+            href={store.pageType === "project" ? "/admin/projects" : "/admin/pages"}
+            className="text-xs text-neutral-400 hover:text-neutral-700 transition-colors flex items-center gap-1"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><polyline points="15 18 9 12 15 6" /></svg>
+            {store.pageType === "project" ? "Projects" : "Pages"}
+          </Link>
+          <span className="text-neutral-200">|</span>
+          <span className="text-sm font-semibold text-neutral-800">{store.pageTitle}</span>
+          <span className="text-xs text-neutral-400 uppercase px-2 py-0.5 border border-neutral-200 rounded-lg bg-neutral-50">
+            {store.pageType}
+          </span>
+          <PublishToggle
+            mode="builder"
+            isDraft={store.draftMode}
+            onPublish={() => store.publishPage()}
+            onUnpublish={() => store.unpublishPage()}
+          />
+          {store.isDirty && (
+            <span className="text-xs text-amber-500 animate-pulse">
+              Unsaved changes
+            </span>
+          )}
+
+        </div>
+        <div className="flex items-center gap-2">
+          {/* Undo/Redo buttons */}
+          <button
+            onClick={() => store.undo()}
+            disabled={!store.canUndo()}
+            className="rounded-lg px-2 py-1 text-xs text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-20 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-neutral-400"
+            title="Undo (Ctrl+Z)"
+          >
+            ↶
+          </button>
+          <button
+            onClick={() => store.redo()}
+            disabled={!store.canRedo()}
+            className="rounded-lg px-2 py-1 text-xs text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-20 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-neutral-400"
+            title="Redo (Ctrl+Shift+Z)"
+          >
+            ↷
+          </button>
+          <span className="text-neutral-200 mx-1">|</span>
+
+          {/* Help button */}
+          <button
+            onClick={() => setShowHelp(true)}
+            className="rounded-lg px-2 py-1 text-xs text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
+            title="Keyboard shortcuts (?)"
+          >
+            ?
+          </button>
+
+          {/* Page settings gear button */}
+          <button
+            onClick={() => store.clearSelection()}
+            className="rounded-lg px-2 py-1 text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
+            title="Page settings"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="3" />
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+            </svg>
+          </button>
+          <span className="text-neutral-200 mx-1">|</span>
+
+          {store.saveError && (
+            <span className="text-xs text-red-500">
+              {store.saveError}
+            </span>
+          )}
+          {store.lastSavedAt && !store.isDirty && (
+            <span className="text-xs text-neutral-400">
+              Saved {new Date(store.lastSavedAt).toLocaleTimeString()}
+            </span>
+          )}
+          <span className="text-xs text-neutral-300">
+            Ctrl+S
+          </span>
+          {/* Preview in new tab */}
+          <button
+            onClick={() => openPreview(store)}
+            className="flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 transition-colors"
+            title="Open page preview in new tab"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="shrink-0">
+              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+              <polyline points="15 3 21 3 21 9" />
+              <line x1="10" y1="14" x2="21" y2="3" />
+            </svg>
+            Preview
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={store.isSaving || !store.isDirty}
+            className="rounded-lg bg-[#076bff] px-5 py-1.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          >
+            {store.isSaving ? "Saving..." : "Save"}
+          </button>
+        </div>
+      </div>}
+
+      {/* ---- Canvas + Settings ---- */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Canvas viewport */}
+        <ThumbStatusProvider>
+        <BuilderCanvas>
+          <div onClick={() => store.clearSelection()}>
+            <DndWrapper>
+            <ColumnDragProvider>
+              {isInSectionEditor ? (
+                /* Section editor mode: render single V2 section without SortableRow chrome */
+                <div>
+                  {store.rows.length > 0 && isPageSectionV2(store.rows[0]) && (
+                    <SectionV2Canvas
+                      section={store.rows[0] as PageSectionV2}
+                      onAddBlockTarget={handleAddBlockTargetV2}
+                    />
+                  )}
+                </div>
+              ) : store.rows.length === 0 ? (
+                /* Empty state */
+                <div className="flex flex-col items-center justify-center h-full min-h-[400px] border border-dashed border-neutral-300 rounded-lg py-20">
+                  <div className="w-12 h-12 rounded-full border border-neutral-300 flex items-center justify-center mb-4">
+                    <span className="text-neutral-400 text-lg">+</span>
+                  </div>
+                  <p className="text-sm text-neutral-500 mb-2">
+                    This page has no content yet
+                  </p>
+                  <p className="text-[10px] text-neutral-400 mb-6">
+                    Add your first section to start building
+                  </p>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowSectionPicker(true);
+                    }}
+                    className="rounded-lg bg-[#076bff] px-4 py-2 text-xs text-white hover:bg-[#0559d4] transition-colors"
+                  >
+                    + Add First Section
+                  </button>
+                </div>
+              ) : (
+                /* Canvas with rows */
+                <div>
+                  <SortableContext
+                    items={rowIds}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {store.rows.map((item, rowIndex) => {
+                      const isV2Section = isPageSectionV2(item);
+                      const isSection = isPageSection(item);
+                      const isInstance = isCustomSectionInstance(item);
+                      const isParallax = isParallaxGroup(item);
+                      const section = isSection ? (item as PageSection) : null;
+                      const v2Section = isV2Section ? (item as PageSectionV2) : null;
+
+                      // Custom Section Instance — rendered directly without SortableRow chrome
+                      if (isInstance) {
+                        return (
+                          <SortableRow
+                            key={item._key}
+                            rowKey={item._key}
+                            row={item}
+                            isSelected={store.selectedRowKey === item._key}
+                            columnCount={0}
+                            onSelect={() => store.selectRow(item._key)}
+                            onDelete={() => store.deleteSection(item._key)}
+                            onAddColumn={() => {}}
+                            onDuplicate={() => {}}
+                            onMoveUp={() => { if (rowIndex > 0) store.reorderRows(rowIndex, rowIndex - 1); }}
+                            onMoveDown={() => { if (rowIndex < store.rows.length - 1) store.reorderRows(rowIndex, rowIndex + 1); }}
+                            isFirst={rowIndex === 0}
+                            isLast={rowIndex === store.rows.length - 1}
+                          >
+                            <CustomSectionInstanceCard
+                              instance={item as CustomSectionInstance}
+                              onAddBlockTarget={handleAddBlockTargetV2}
+                            />
+                          </SortableRow>
+                        );
+                      }
+
+                      // Parallax Group — rendered with its own canvas component
+                      if (isParallax) {
+                        const group = item as ParallaxGroup;
+                        return (
+                          <SortableRow
+                            key={item._key}
+                            rowKey={item._key}
+                            row={item}
+                            isSelected={store.selectedRowKey === item._key}
+                            columnCount={0}
+                            onSelect={() => store.selectRow(item._key)}
+                            onDelete={() => store.deleteSection(item._key)}
+                            onAddColumn={() => {}}
+                            onDuplicate={() => store.duplicateSection(item._key)}
+                            onMoveUp={() => { if (rowIndex > 0) store.reorderRows(rowIndex, rowIndex - 1); }}
+                            onMoveDown={() => { if (rowIndex < store.rows.length - 1) store.reorderRows(rowIndex, rowIndex + 1); }}
+                            isFirst={rowIndex === 0}
+                            isLast={rowIndex === store.rows.length - 1}
+                          >
+                            <ParallaxGroupCanvas
+                              group={group}
+                              onAddBlockTarget={handleAddBlockTargetV2}
+                            />
+                          </SortableRow>
+                        );
+                      }
+
+                      return (
+                        <SortableRow
+                          key={item._key}
+                          rowKey={item._key}
+                          row={item}
+                          isSelected={store.selectedRowKey === item._key}
+                          columnCount={isV2Section ? (v2Section!.columns || []).length : 0}
+                          onSelect={() => {
+                            store.selectRow(item._key);
+                          }}
+                          onDelete={() => {
+                            store.deleteSection(item._key);
+                          }}
+                          onAddColumn={() => {
+                            if (isV2Section) {
+                              const sec = v2Section!;
+                              const gridCols = sec.settings.grid_columns || 12;
+                              const cascadeCols = sec.columns.map((c: SectionColumn) => ({
+                                _key: c._key, grid_column: c.grid_column, grid_row: c.grid_row, span: c.span,
+                              }));
+                              const gapList = findGaps(cascadeCols, gridCols);
+                              if (gapList.length > 0) {
+                                store.addColumnV2(sec._key, gapList[0].grid_row, gapList[0].grid_column, gapList[0].span);
+                              } else {
+                                const maxRow = cascadeCols.reduce((max, c) => Math.max(max, c.grid_row), 1);
+                                store.addColumnV2(sec._key, maxRow + 1, 1, gridCols);
+                              }
+                            }
+                          }}
+                          onDuplicate={() => {
+                            store.duplicateSection(item._key);
+                          }}
+                          onMoveUp={() => {
+                            if (rowIndex > 0) store.reorderRows(rowIndex, rowIndex - 1);
+                          }}
+                          onMoveDown={() => {
+                            if (rowIndex < store.rows.length - 1) store.reorderRows(rowIndex, rowIndex + 1);
+                          }}
+                          isFirst={rowIndex === 0}
+                          isLast={rowIndex === store.rows.length - 1}
+                        >
+                          {isV2Section && v2Section ? (
+                            <SectionV2Canvas
+                              section={v2Section}
+                              onAddBlockTarget={handleAddBlockTargetV2}
+                            />
+                          ) : isSection && section?.block?.[0] ? (
+                            <BlockLivePreview block={section.block[0]} viewport={store.activeViewport} />
+                          ) : null}
+                        </SortableRow>
+                      );
+                    })}
+                  </SortableContext>
+
+                  {/* Add section button — hidden in section editor mode */}
+                  {!isInSectionEditor && (
+                  <div className="relative" style={{ height: 0 }}>
+                    <div className="absolute left-0 right-0 top-2" style={{ zIndex: 4 }}>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setShowSectionPicker(true);
+                        }}
+                        className="w-full rounded-xl py-3 text-xs font-medium text-white bg-[#93278f] hover:bg-[#7a1f76] transition-colors shadow-sm"
+                      >
+                        + Add Section
+                      </button>
+                    </div>
+                  </div>
+                  )}
+                </div>
+              )}
+            </ColumnDragProvider>
+            </DndWrapper>
+          </div>
+        </BuilderCanvas>
+        </ThumbStatusProvider>
+
+        {/* Section type picker modal */}
+        {showSectionPicker && (
+          <SectionTypePicker
+            onSelectEmptyV2={handleAddEmptySectionV2}
+            onSelectSection={handleAddSection}
+            onSelectParallaxGroup={handleAddParallaxGroup}
+            onSelectCustomSection={handleSelectCustomSection}
+            onCreateCustomSection={handleCreateCustomSection}
+            onClose={() => setShowSectionPicker(false)}
+            preloadedSections={cachedCustomSections}
+          />
+        )}
+
+        {/* Block type picker modal */}
+        {addBlockTarget && (
+          <BlockTypePicker
+            onSelect={handleAddBlock}
+            onClose={() => setAddBlockTarget(null)}
+            insertIndex={addBlockTarget.insertIndex}
+          />
+        )}
+
+        {/* Settings Panel */}
+        <SettingsPanel />
+      </div>
+
+      {/* ---- Help Modal ---- */}
+      {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
+
+      {/* ---- Block Context Menu ---- */}
+      {contextMenu && (
+        <BlockContextMenu
+          menu={contextMenu}
+          onClose={() => setContextMenu(null)}
+          onDuplicate={() => {
+            store.duplicateBlock(contextMenu.blockKey);
+          }}
+          onDelete={() =>
+            store.deleteBlock(contextMenu.blockKey)
+          }
+        />
+      )}
+    </div>
+  );
+}