@bygghammar/cms-platform 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -96,7 +96,8 @@
     "./backoffice/media/ReviewImageUpload": "./src/backoffice/media/ReviewImageUpload.tsx",
     "./migrations/*": "./migrations/*",
     "./backoffice/seo/PageSeoPanelView": "./src/backoffice/seo/PageSeoPanelView.tsx",
-    "./backoffice/SectionFormView": "./src/backoffice/SectionFormView.tsx"
+    "./backoffice/SectionFormView": "./src/backoffice/SectionFormView.tsx",
+    "./backoffice/PageEditorView": "./src/backoffice/PageEditorView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -120,7 +121,10 @@
     "@tiptap/extension-subscript": ">=3",
     "@tiptap/extension-superscript": ">=3",
     "@tiptap/extension-text-style": ">=3",
-    "@tiptap/extension-table": ">=3"
+    "@tiptap/extension-table": ">=3",
+    "@dnd-kit/core": ">=6",
+    "@dnd-kit/sortable": ">=3",
+    "@dnd-kit/utilities": ">=3"
   },
   "peerDependenciesMeta": {
     "@supabase/supabase-js": {

package/src/backoffice/PageEditorView.tsx

@@ -0,0 +1,880 @@
+import { useEffect, useMemo, useRef, useState, useCallback, type ComponentType } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  Monitor,
+  Tablet,
+  Smartphone,
+  Undo2,
+  Redo2,
+  GripVertical,
+  Trash2,
+  Eye,
+  EyeOff,
+  Copy,
+  ChevronDown,
+  ExternalLink,
+  X,
+  BookmarkPlus,
+  Globe,
+  Pencil,
+  Check,
+} from "lucide-react";
+import type { BlockInstance, BlockProps } from "../blocks/types";
+import { subscribeSharedDrafts } from "../cms/shared-draft-store";
+import { SaveGlobalDialog, type SaveGlobalResult } from "./SaveGlobalDialog";
+
+function uid(prefix = "b") {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+type Device = "desktop" | "tablet" | "mobile";
+const DEVICE_WIDTHS: Record<Device, number | null> = {
+  desktop: null,
+  tablet: 820,
+  mobile: 420,
+};
+
+export type GlobalSectionOption = {
+  key: string;
+  name: string;
+  kind?: "block" | "section";
+  blocks?: BlockInstance[];
+};
+
+/** Host-provided plumbing: locales, block registry labels, UI and persistence. */
+export type PageEditorDeps = {
+  locales: readonly string[];
+  localeLabels: Record<string, string>;
+  defaultLocale: string;
+  /** Human label for a block type (from the host's block registry). */
+  labelForType: (type: string) => string;
+  /** Block library / add-block control. */
+  BlockPickerComponent: ComponentType<{
+    onAdd: (block: BlockInstance) => void;
+    globalSections: GlobalSectionOption[];
+    templates: unknown[];
+    onDeleteTemplate: (id: string) => void;
+    hideGlobals?: boolean;
+  }>;
+  /** Per-block property editor. */
+  InspectorComponent: ComponentType<{
+    block: BlockInstance;
+    patch: (props: BlockProps) => void;
+    globalSections: GlobalSectionOption[];
+  }>;
+  /** Optional tooltip primitives; plain titles are used when omitted. */
+  tooltip?: {
+    Tooltip: ComponentType<{ children?: React.ReactNode }>;
+    TooltipTrigger: ComponentType<{ asChild?: boolean; children?: React.ReactNode }>;
+    TooltipContent: ComponentType<{
+      side?: string;
+      className?: string;
+      children?: React.ReactNode;
+    }>;
+  };
+  templates: unknown[];
+  onDeleteTemplate: (id: string) => void | Promise<void>;
+  onSaveTemplate: (args: {
+    name: string;
+    description: string | null;
+    block: BlockInstance;
+  }) => Promise<void>;
+  onCreateGlobalSection: (args: {
+    key: string;
+    name: string;
+    kind: "block" | "section";
+    blocks: BlockInstance[];
+  }) => Promise<void>;
+  /** Mirror the canvas so a standalone preview tab shows unsaved changes. */
+  writeDraft: (
+    pageKey: string,
+    payload: { blocks: BlockInstance[]; globals: Record<string, BlockInstance[]>; locale: string },
+  ) => void;
+  /** Preview URL for the iframe and the "open preview" button. */
+  previewUrl: (pageKey: string, locale?: string) => string;
+  notify?: {
+    success?: (msg: string) => void;
+    error?: (msg: string) => void;
+    info?: (msg: string) => void;
+  };
+};
+
+/* ---------------- Outline row ---------------- */
+function OutlineRow({
+  block,
+  selected,
+  onSelect,
+  onDuplicate,
+  onDelete,
+  onToggleVisible,
+  onRename,
+  globalSections,
+  labelForType,
+  singleBlock = false,
+}: {
+  block: BlockInstance;
+  selected: boolean;
+  onSelect: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  onToggleVisible: () => void;
+  onRename: (name: string) => void;
+  globalSections: GlobalSectionOption[];
+  labelForType: (type: string) => string;
+  singleBlock?: boolean;
+}) {
+  const isGlobalRef = block.type === "globalRef";
+  const sectionKey = isGlobalRef
+    ? String((block.props as { sectionKey?: string })?.sectionKey ?? "")
+    : "";
+  const typeName = isGlobalRef
+    ? (globalSections.find((g) => g.key === sectionKey)?.name ?? labelForType(block.type))
+    : labelForType(block.type);
+  const displayName = block.name?.trim() || typeName;
+  const [renaming, setRenaming] = useState(false);
+  const [draftName, setDraftName] = useState(block.name ?? "");
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: block.id,
+  });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      data-outline-id={block.id}
+      data-selected={selected ? "true" : "false"}
+      className={`group flex items-center gap-1.5 border px-2 py-1.5 text-xs cursor-pointer ${
+        selected ? "border-sea bg-ice/40" : "border-ink/10 bg-white hover:border-ink/30"
+      } ${block.visible === false ? "opacity-50" : ""}`}
+      onClick={onSelect}
+    >
+      {!singleBlock && (
+        <button
+          {...attributes}
+          {...listeners}
+          className="cursor-grab active:cursor-grabbing text-ink/30 hover:text-ink/70"
+          title="Drag"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <GripVertical className="size-3.5" />
+        </button>
+      )}
+      {renaming ? (
+        <input
+          autoFocus
+          value={draftName}
+          placeholder={typeName}
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => setDraftName(e.target.value)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter") {
+              onRename(draftName.trim());
+              setRenaming(false);
+            }
+            if (e.key === "Escape") {
+              setDraftName(block.name ?? "");
+              setRenaming(false);
+            }
+          }}
+          onBlur={() => {
+            onRename(draftName.trim());
+            setRenaming(false);
+          }}
+          className="flex-1 min-w-0 border border-sea bg-white px-1 py-0.5 text-xs focus:outline-none"
+        />
+      ) : (
+        <span
+          className="flex-1 truncate text-ink flex items-center gap-1.5"
+          title={block.name ? `${block.name} · ${typeName}` : typeName}
+          onDoubleClick={(e) => {
+            e.stopPropagation();
+            setDraftName(block.name ?? "");
+            setRenaming(true);
+          }}
+        >
+          {displayName}
+          {block.name?.trim() ? (
+            <span className="shrink-0 text-[0.6rem] uppercase tracking-[0.12em] text-ink/35">
+              {typeName}
+            </span>
+          ) : null}
+          {isGlobalRef && (
+            <Globe className="size-3 text-ink/40 shrink-0" aria-label="Global block" />
+          )}
+        </span>
+      )}
+
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          if (renaming) {
+            onRename(draftName.trim());
+            setRenaming(false);
+          } else {
+            setDraftName(block.name ?? "");
+            setRenaming(true);
+          }
+        }}
+        className="text-ink/40 hover:text-ink"
+        title={renaming ? "Save name" : "Rename block"}
+      >
+        {renaming ? <Check className="size-3.5" /> : <Pencil className="size-3.5" />}
+      </button>
+
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleVisible();
+        }}
+        className="text-ink/40 hover:text-ink"
+        title={block.visible === false ? "Show" : "Hide"}
+      >
+        {block.visible === false ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+      </button>
+      {!singleBlock && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onDuplicate();
+          }}
+          className="text-ink/40 hover:text-ink opacity-0 group-hover:opacity-100"
+          title="Duplicate"
+        >
+          <Copy className="size-3.5" />
+        </button>
+      )}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete();
+        }}
+        className="text-red-500 hover:text-red-700 opacity-0 group-hover:opacity-100"
+        title="Delete"
+      >
+        <Trash2 className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+/* ---------------- PageEditorView ---------------- */
+
+export function PageEditorView({
+  pageKey,
+  initialBlocks,
+  globals,
+  globalSections,
+  onDirtyChange,
+  onBlocksChange,
+  blocks: controlledBlocks,
+  locale: controlledLocale,
+  onLocaleChange,
+  singleBlock = false,
+  deps,
+}: {
+  pageKey: string;
+  initialBlocks: BlockInstance[];
+  globals: Record<string, BlockInstance[]>;
+  globalSections: GlobalSectionOption[];
+  onDirtyChange: (dirty: boolean) => void;
+  onBlocksChange: (blocks: BlockInstance[]) => void;
+  blocks?: BlockInstance[];
+  /** When provided, the parent owns the preview language. */
+  locale?: string;
+  onLocaleChange?: (locale: string) => void;
+  /** Global blocks hold exactly one block: no adding, reordering or duplicating. */
+  singleBlock?: boolean;
+  deps: PageEditorDeps;
+}) {
+  const {
+    locales,
+    localeLabels,
+    defaultLocale,
+    labelForType,
+    BlockPickerComponent,
+    InspectorComponent,
+    templates,
+    onDeleteTemplate,
+    onSaveTemplate,
+    onCreateGlobalSection,
+    writeDraft,
+    previewUrl,
+    notify,
+  } = deps;
+
+  const Tooltip = deps.tooltip?.Tooltip;
+  const TooltipTrigger = deps.tooltip?.TooltipTrigger;
+  const TooltipContent = deps.tooltip?.TooltipContent;
+
+  const [blocks, setBlocksInternal] = useState<BlockInstance[]>(initialBlocks);
+  useEffect(() => {
+    setBlocksInternal(initialBlocks);
+    setPast([]);
+    setFuture([]);
+    onDirtyChange(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialBlocks]);
+
+  // History
+  const [past, setPast] = useState<BlockInstance[][]>([]);
+  const [future, setFuture] = useState<BlockInstance[][]>([]);
+
+  const commit = useCallback(
+    (next: BlockInstance[]) => {
+      setPast((p) => [...p, blocks].slice(-50));
+      setFuture([]);
+      setBlocksInternal(next);
+      onBlocksChange(next);
+      onDirtyChange(true);
+    },
+    [blocks, onBlocksChange, onDirtyChange],
+  );
+
+  const undo = useCallback(() => {
+    setPast((p) => {
+      if (!p.length) return p;
+      const prev = p[p.length - 1];
+      setFuture((f) => [blocks, ...f]);
+      setBlocksInternal(prev);
+      onBlocksChange(prev);
+      onDirtyChange(true);
+      return p.slice(0, -1);
+    });
+  }, [blocks, onBlocksChange, onDirtyChange]);
+
+  const redo = useCallback(() => {
+    setFuture((f) => {
+      if (!f.length) return f;
+      const [nxt, ...rest] = f;
+      setPast((p) => [...p, blocks]);
+      setBlocksInternal(nxt);
+      onBlocksChange(nxt);
+      onDirtyChange(true);
+      return rest;
+    });
+  }, [blocks, onBlocksChange, onDirtyChange]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const meta = e.metaKey || e.ctrlKey;
+      if (!meta) return;
+      if (e.key.toLowerCase() === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      } else if ((e.key.toLowerCase() === "z" && e.shiftKey) || e.key.toLowerCase() === "y") {
+        e.preventDefault();
+        redo();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [undo, redo]);
+
+  // Selection & preview state
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [device, setDevice] = useState<Device>("desktop");
+  const [localeInternal, setLocaleInternal] = useState<string>(defaultLocale);
+  const locale = controlledLocale ?? localeInternal;
+  const setLocale = useCallback(
+    (l: string) => {
+      setLocaleInternal(l);
+      onLocaleChange?.(l);
+    },
+    [onLocaleChange],
+  );
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [previewReady, setPreviewReady] = useState(false);
+
+  const currentBlocks = controlledBlocks ?? blocks;
+
+  // Unsaved shared-content edits made from the inspector, mirrored into the
+  // canvas so shared sections update live.
+  const [sharedDrafts, setSharedDrafts] = useState<Record<string, unknown>>({});
+  useEffect(() => subscribeSharedDrafts(setSharedDrafts), []);
+
+  // Push draft to iframe whenever blocks/locale/selection change.
+  useEffect(() => {
+    if (!previewReady) return;
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        source: "lovable-editor",
+        type: "draft",
+        blocks: currentBlocks,
+        globals,
+        selectedId,
+        locale,
+        sharedContent: sharedDrafts,
+      },
+      "*",
+    );
+  }, [currentBlocks, globals, selectedId, locale, previewReady, sharedDrafts]);
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      writeDraft(pageKey, { blocks: currentBlocks, globals, locale });
+    }, 250);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageKey, currentBlocks, globals, locale]);
+
+  /** Select a block from the outline and scroll the preview to it. */
+  const selectAndReveal = useCallback((id: string) => {
+    setSelectedId(id);
+    iframeRef.current?.contentWindow?.postMessage(
+      { source: "lovable-editor", type: "scrollTo", blockId: id },
+      "*",
+    );
+  }, []);
+
+  // Listen for iframe messages.
+  useEffect(() => {
+    const onMsg = (ev: MessageEvent) => {
+      const d = ev.data as { source?: string; type?: string; blockId?: string };
+      if (d?.source !== "lovable-preview") return;
+      if (d.type === "ready") setPreviewReady(true);
+      if (d.type === "select" && d.blockId) {
+        if (currentBlocks.some((b) => b.id === d.blockId)) setSelectedId(d.blockId);
+      }
+    };
+    window.addEventListener("message", onMsg);
+    return () => window.removeEventListener("message", onMsg);
+  }, [currentBlocks]);
+
+  // Keep the outline highlight visible whenever the selection changes.
+  useEffect(() => {
+    if (!selectedId) return;
+    const el = document.querySelector(
+      `[data-outline-id="${window.CSS.escape(selectedId)}"]`,
+    ) as HTMLElement | null;
+    el?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [selectedId]);
+
+  // Mutations
+  const addBlock = (b: BlockInstance) => {
+    commit([...blocks, b]);
+    setSelectedId(b.id);
+  };
+  const patchBlock = (id: string, props: BlockProps) => {
+    commit(blocks.map((b) => (b.id === id ? { ...b, props } : b)));
+  };
+  const removeBlock = (id: string) => {
+    commit(blocks.filter((b) => b.id !== id));
+    if (selectedId === id) setSelectedId(null);
+  };
+  const duplicateBlock = (id: string) => {
+    const i = blocks.findIndex((b) => b.id === id);
+    if (i < 0) return;
+    const src = blocks[i];
+    const clone: BlockInstance = {
+      ...src,
+      id: uid(src.type),
+      props: structuredClone(src.props ?? {}),
+    };
+    const next = blocks.slice();
+    next.splice(i + 1, 0, clone);
+    commit(next);
+    setSelectedId(clone.id);
+  };
+  const renameBlock = (id: string, name: string) => {
+    commit(
+      blocks.map((b) => (b.id === id ? { ...b, ...(name ? { name } : { name: undefined }) } : b)),
+    );
+  };
+  const toggleVisible = (id: string) => {
+    commit(
+      blocks.map((b) => (b.id === id ? { ...b, visible: b.visible === false ? true : false } : b)),
+    );
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const onDragEnd = (e: DragEndEvent) => {
+    const { active, over } = e;
+    if (!over || active.id === over.id) return;
+    const oi = blocks.findIndex((b) => b.id === active.id);
+    const ni = blocks.findIndex((b) => b.id === over.id);
+    if (oi < 0 || ni < 0) return;
+    commit(arrayMove(blocks, oi, ni));
+  };
+
+  const selected = useMemo(
+    () => blocks.find((b) => b.id === selectedId) ?? null,
+    [blocks, selectedId],
+  );
+  const selectedLabel = useMemo(() => {
+    if (!selected) return "Nothing selected";
+    if (selected.name?.trim()) return selected.name.trim();
+    if (selected.type === "globalRef") {
+      const key = String((selected.props as { sectionKey?: string })?.sectionKey ?? "");
+      const name = globalSections.find((g) => g.key === key)?.name;
+      return name ?? labelForType(selected.type);
+    }
+    return labelForType(selected.type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, globalSections]);
+
+  const suggestName = useCallback((b: BlockInstance): string => {
+    const props = (b.props ?? {}) as Record<string, unknown>;
+    if (b.name?.trim()) return b.name.trim();
+    const pick = (v: unknown): string => {
+      if (typeof v === "string") return v;
+      if (v && typeof v === "object") {
+        const first = Object.values(v as Record<string, unknown>)[0];
+        if (typeof first === "string") return first;
+      }
+      return "";
+    };
+    for (const key of ["title", "heading", "name", "eyebrow", "label"]) {
+      const s = pick(props[key]).trim();
+      if (s) return s.slice(0, 60);
+    }
+    return "";
+  }, []);
+
+  const [saveDialog, setSaveDialog] = useState<null | "global" | "template">(null);
+  const [saveDialogError, setSaveDialogError] = useState<string | null>(null);
+  const [saveBusy, setSaveBusy] = useState(false);
+
+  const saveDialogDefaultName = useMemo(() => {
+    if (!selected) return "";
+    return suggestName(selected) || labelForType(selected.type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, suggestName]);
+
+  const saveSelectedAsTemplate = useCallback(() => {
+    if (!selected) return;
+    setSaveDialogError(null);
+    setSaveDialog("template");
+  }, [selected]);
+
+  const saveSelectedAsGlobalSection = useCallback(() => {
+    if (!selected) return;
+    if (selected.type === "globalRef") {
+      notify?.info?.("This block is already a global block.");
+      return;
+    }
+    setSaveDialogError(null);
+    setSaveDialog("global");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected]);
+
+  const handleSaveDialogSubmit = useCallback(
+    async (result: SaveGlobalResult) => {
+      if (!selected) return;
+      setSaveBusy(true);
+      setSaveDialogError(null);
+      try {
+        if (saveDialog === "template") {
+          await onSaveTemplate({
+            name: result.name,
+            description: result.description || null,
+            block: structuredClone(selected),
+          });
+          notify?.success?.("Saved to the Blocks library");
+        } else {
+          await onCreateGlobalSection({
+            key: result.key,
+            name: result.name,
+            kind: result.kind,
+            blocks: [{ ...structuredClone(selected), id: uid() }],
+          });
+          // Replace the block on this page with a reference to the new global entry.
+          commit(
+            currentBlocks.map((b) =>
+              b.id === selected.id
+                ? {
+                    id: b.id,
+                    type: "globalRef",
+                    name: result.name,
+                    props: { sectionKey: result.key },
+                    visible: b.visible,
+                  }
+                : b,
+            ),
+          );
+          notify?.success?.(
+            result.kind === "section"
+              ? "Saved to Global Sections — this page now references it"
+              : "Saved as a global block — this page now references it",
+          );
+        }
+        setSaveDialog(null);
+      } catch (e) {
+        const msg = String((e as { message?: string })?.message ?? "Save failed");
+        setSaveDialogError(
+          /duplicate|unique|already exists/i.test(msg)
+            ? "That key is already used. Pick a different key."
+            : msg,
+        );
+      } finally {
+        setSaveBusy(false);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selected, saveDialog, commit, currentBlocks],
+  );
+
+  const iframeWidth = DEVICE_WIDTHS[device];
+
+  const openPreviewInTab = () => {
+    window.open(previewUrl(pageKey, locale), "_blank");
+  };
+
+  const withTooltip = (
+    trigger: React.ReactElement,
+    title: string,
+    body: string,
+  ): React.ReactElement =>
+    Tooltip && TooltipTrigger && TooltipContent ? (
+      <Tooltip>
+        <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+        <TooltipContent side="bottom" className="max-w-[260px] p-3">
+          <p className="font-medium">{title}</p>
+          <p className="mt-1 text-[0.7rem] opacity-90 leading-relaxed">{body}</p>
+        </TooltipContent>
+      </Tooltip>
+    ) : (
+      trigger
+    );
+
+  return (
+    <div className="border border-ink/10 bg-ice/20">
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-3 border-b border-ink/10 bg-white px-3 py-2">
+        <div className="flex items-center gap-1">
+          {(["desktop", "tablet", "mobile"] as Device[]).map((d) => {
+            const Icon = d === "desktop" ? Monitor : d === "tablet" ? Tablet : Smartphone;
+            return (
+              <button
+                key={d}
+                onClick={() => setDevice(d)}
+                className={`p-1.5 border ${device === d ? "border-sea bg-ice/50 text-ink" : "border-transparent text-ink/50 hover:text-ink"}`}
+                title={d}
+              >
+                <Icon className="size-4" />
+              </button>
+            );
+          })}
+        </div>
+        <div className="h-4 w-px bg-ink/10" />
+        <div className="flex items-center gap-1">
+          {locales.map((loc) => (
+            <button
+              key={loc}
+              onClick={() => setLocale(loc)}
+              className={`px-2 py-1 text-[0.7rem] uppercase tracking-widest border ${
+                locale === loc
+                  ? "border-sea bg-ice/50 text-ink"
+                  : "border-transparent text-ink/50 hover:text-ink"
+              }`}
+            >
+              {localeLabels[loc] ?? loc}
+            </button>
+          ))}
+        </div>
+        <div className="h-4 w-px bg-ink/10" />
+        <button
+          onClick={undo}
+          disabled={!past.length}
+          className="p-1.5 text-ink/70 hover:text-ink disabled:opacity-30"
+          title="Undo (⌘Z)"
+        >
+          <Undo2 className="size-4" />
+        </button>
+        <button
+          onClick={redo}
+          disabled={!future.length}
+          className="p-1.5 text-ink/70 hover:text-ink disabled:opacity-30"
+          title="Redo (⌘⇧Z)"
+        >
+          <Redo2 className="size-4" />
+        </button>
+        <div className="ml-auto flex items-center gap-2">
+          <button
+            onClick={openPreviewInTab}
+            className="inline-flex items-center gap-1.5 border border-ink/15 px-2 py-1 text-xs hover:border-sea"
+          >
+            <ExternalLink className="size-3.5" /> Open preview
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_360px] xl:grid-cols-[minmax(0,1fr)_420px]">
+        {/* Preview */}
+        <div className="p-4 lg:p-6 flex justify-center overflow-x-auto bg-[repeating-linear-gradient(45deg,rgba(0,0,0,0.02)_0_10px,transparent_10px_20px)]">
+          <div
+            style={{
+              width: iframeWidth ? `${iframeWidth}px` : "100%",
+              maxWidth: "100%",
+              transition: "width .2s ease",
+            }}
+            className="bg-white shadow-[0_10px_40px_-15px_rgba(0,0,0,0.25)] border border-ink/10"
+          >
+            <iframe
+              ref={iframeRef}
+              src={previewUrl(pageKey)}
+              title="Page preview"
+              className="w-full block"
+              style={{ height: "calc(100vh - 220px)", minHeight: "600px", border: 0 }}
+            />
+          </div>
+        </div>
+
+        {/* Inspector */}
+        <div className="min-w-0 border-t lg:border-t-0 lg:border-l border-ink/10 bg-white flex flex-col max-h-[calc(100vh-120px)]">
+          <div className="border-b border-ink/10 px-4 py-3 flex items-center justify-between">
+            <div>
+              <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50">
+                Inspector
+              </div>
+              <div className="text-sm font-medium text-ink truncate flex items-center gap-1.5">
+                {selected?.type === "globalRef" && (
+                  <Globe className="size-3.5 text-ink/40 shrink-0" aria-label="Global block" />
+                )}
+                {selectedLabel}
+              </div>
+            </div>
+            <div className="flex items-center gap-1">
+              {selected &&
+                withTooltip(
+                  <button
+                    onClick={() => saveSelectedAsTemplate()}
+                    className="inline-flex items-center gap-1 border border-ink/15 px-2 py-1 text-[0.7rem] hover:border-sea"
+                  >
+                    <BookmarkPlus className="size-3" /> Save one-off copy
+                  </button>,
+                  "Save a standalone copy",
+                  "Stores this block in the Blocks library as a one-off copy. Reusing it places an independent duplicate, so later edits only affect this page.",
+                )}
+              {selected &&
+                selected.type !== "globalRef" &&
+                withTooltip(
+                  <button
+                    onClick={() => saveSelectedAsGlobalSection()}
+                    className="inline-flex items-center gap-1 border border-ink/15 px-2 py-1 text-[0.7rem] hover:border-sea"
+                  >
+                    <Globe className="size-3" /> Save as global block
+                  </button>,
+                  "Save as a global block",
+                  "Creates a global block in the library. Every page or section that references it stays in sync — edit once, update everywhere.",
+                )}
+              {selected && (
+                <button
+                  onClick={() => setSelectedId(null)}
+                  className="text-ink/40 hover:text-ink"
+                  title="Deselect"
+                >
+                  <X className="size-4" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="p-4 overflow-y-auto flex-1 space-y-5">
+            {selected ? (
+              <InspectorComponent
+                block={selected}
+                patch={(next) => patchBlock(selected.id, next)}
+                globalSections={globalSections}
+              />
+            ) : (
+              <div className="text-sm text-ink/60 space-y-2">
+                <p>Click any section in the preview to edit it, or add a new block below.</p>
+                <p className="text-[0.7rem] text-ink/45">Tip: use ⌘Z / ⌘⇧Z to undo & redo.</p>
+              </div>
+            )}
+          </div>
+
+          {/* Outline */}
+          <div className="border-t border-ink/10 p-3 space-y-2 max-h-[45%] overflow-y-auto">
+            <div className="flex items-center justify-between">
+              <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50 flex items-center gap-1">
+                <ChevronDown className="size-3" /> {singleBlock ? "Block" : "Page outline"}
+              </div>
+              <div className="text-[0.65rem] text-ink/40">
+                {singleBlock ? "one block only" : `${blocks.length} blocks`}
+              </div>
+            </div>
+            {(!singleBlock || blocks.length === 0) && (
+              <BlockPickerComponent
+                onAdd={addBlock}
+                globalSections={globalSections}
+                templates={templates}
+                onDeleteTemplate={onDeleteTemplate}
+                hideGlobals={singleBlock}
+              />
+            )}
+
+            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+              <SortableContext
+                items={blocks.map((b) => b.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <div className="space-y-1">
+                  {blocks.map((b) => (
+                    <OutlineRow
+                      key={b.id}
+                      block={b}
+                      selected={selectedId === b.id}
+                      onSelect={() => selectAndReveal(b.id)}
+                      onDuplicate={() => duplicateBlock(b.id)}
+                      onDelete={() => removeBlock(b.id)}
+                      onToggleVisible={() => toggleVisible(b.id)}
+                      onRename={(name) => renameBlock(b.id, name)}
+                      globalSections={globalSections}
+                      labelForType={labelForType}
+                      singleBlock={singleBlock}
+                    />
+                  ))}
+                </div>
+              </SortableContext>
+            </DndContext>
+            {!singleBlock && (
+              <BlockPickerComponent
+                onAdd={addBlock}
+                globalSections={globalSections}
+                templates={templates}
+                onDeleteTemplate={onDeleteTemplate}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+
+      <SaveGlobalDialog
+        open={saveDialog !== null}
+        mode={saveDialog === "template" ? "template" : "global"}
+        defaultName={saveDialogDefaultName}
+        error={saveDialogError}
+        busy={saveBusy}
+        onCancel={() => setSaveDialog(null)}
+        onSubmit={handleSaveDialogSubmit}
+      />
+    </div>
+  );
+}