makersclaw 0.2.0 → 0.3.1

package/registry/blocks/page-builder/page-builder.jsx

@@ -0,0 +1,704 @@
+"use client";
+
+// PageBuilder — a visual page editor (GrapesJS core) in the workspace
+// theme, behind one set of props.
+//
+// What is ours and what is GrapesJS's: GrapesJS keeps the page model, the
+// canvas (an iframe), selection, drag and drop, text editing, undo and the
+// HTML/CSS export. Everything around the canvas is ours, in the kit: the
+// top bar (title, save state, device toggle, undo/redo, preview, Save),
+// the Add / Layers panel, the Design panel (token choices only), the empty
+// state with templates, and a bottom bar with sheets on a narrow screen.
+// GrapesJS runs with <Canvas> from @grapesjs/react, so it creates none of
+// its own panels; theme.js repaints the few things it still draws.
+//
+// Client only, one static bundle: the modules load with the page (they are
+// safe on the server — see grapes.js); the editor is created in an effect
+// after the mount guard. Until then — on the server and in the first client
+// paint — the same frame shows with a skeleton.
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, IconButton, Menu, Sheet, Skeleton, Tabs, TabPanel, ToggleGroup, Tooltip, cx, toast } from "../../ui";
+import { BlocksProvider, Canvas, GjsEditor, grapesjs, useEditorMaybe } from "./grapes";
+import { cleanCss, cleanHtml, normalizeBlock, templatePage } from "./page";
+import { AddPanel, DesignPanel, LayersPanel, TemplateGrid, nameOf, topLevel, useLatest } from "./panels";
+import { BASE_CSS, BASIC_BLOCKS, SECTION_BLOCKS, STARTER_TEMPLATES } from "./sections";
+import { FRAME_CSS, GJS_THEME, GJS_VARS } from "./theme";
+import { KEEP_TOKENS, STYLE_GROUPS, fontFaceCss, fontLinks, tokenCss } from "./tokens";
+
+/** A ref for the builder's handle: `const page = usePageBuilder()`, then
+ *  `<PageBuilder builderRef={page} />` and `page.current?.getPage()`. */
+export function usePageBuilder() {
+  return useRef(null);
+}
+
+export const DEVICES = [
+  { id: "desktop", label: "Desktop", icon: "monitor", width: "" },
+  { id: "tablet", label: "Tablet", icon: "tablet", width: "768px", widthMedia: "992px" },
+  { id: "mobile", label: "Phone", icon: "smartphone", width: "390px", widthMedia: "480px" },
+];
+
+/** The page as it goes out: { html, css, project }. */
+export function readPage(editor) {
+  if (!editor) return { html: "", css: "", project: null };
+  return {
+    html: cleanHtml(editor.getHtml()),
+    css: cleanCss(editor.getCss({ avoidProtected: true }) ?? ""),
+    project: editor.getProjectData(),
+  };
+}
+
+function builtInBlocks(builtIns) {
+  if (builtIns === false || builtIns === "none") return [];
+  if (builtIns === "basics") return BASIC_BLOCKS;
+  if (builtIns === "sections") return SECTION_BLOCKS;
+  return [...SECTION_BLOCKS, ...BASIC_BLOCKS];
+}
+
+export function PageBuilder(props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted ? <Builder {...props} /> : <Placeholder {...props} />;
+}
+
+const ROOT = cx(
+  "@container relative isolate flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-background text-foreground",
+  KEEP_TOKENS,
+);
+
+function Placeholder({ title = "Untitled page", height = 720, className }) {
+  return (
+    <div className={cx(ROOT, className)} style={{ height }} aria-busy="true">
+      <div className="flex h-14 shrink-0 items-center gap-3 border-b border-border px-4">
+        <span className="truncate text-sm font-medium">{title}</span>
+        <span className="ml-auto">
+          <Skeleton className="h-9 w-20" />
+        </span>
+      </div>
+      <div className="flex min-h-0 flex-1">
+        <div className="hidden w-72 shrink-0 border-r border-border p-4 @5xl:block">
+          <Skeleton className="mb-4 h-9 w-full" />
+          <div className="grid grid-cols-2 gap-2">
+            {[0, 1, 2, 3, 4, 5].map((i) => (
+              <Skeleton key={i} shape="block" className="aspect-[16/10] w-full" />
+            ))}
+          </div>
+        </div>
+        <div className="grid min-w-0 flex-1 place-items-center bg-muted p-6">
+          <span className="sr-only">Loading the page editor…</span>
+          <div className="grid w-full max-w-xl gap-3" aria-hidden="true">
+            <Skeleton className="mx-auto h-4 w-40" />
+            <Skeleton className="mx-auto h-8 w-4/5" />
+            <Skeleton className="mx-auto h-4 w-3/5" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Builder(props) {
+  const { page, height = 720, className } = props;
+  const rootRef = useRef(null);
+  // Read once: GrapesJS takes its options when the editor is created. To
+  // open another page, change the component's `key` (or use the handle).
+  const [options] = useState(() => {
+    const opts = {
+      height: "100%",
+      width: "100%",
+      storageManager: false,
+      undoManager: { trackSelection: false },
+      telemetry: false,
+      noticeOnUnload: false,
+      cssIcons: "",
+      jsInHtml: false,
+      avoidInlineStyle: true,
+      selectorManager: { componentFirst: true },
+      richTextEditor: { actions: ["bold", "italic", "link"] },
+      deviceManager: {
+        default: "desktop",
+        devices: DEVICES.map((d) => ({ id: d.id, name: d.label, width: d.width, widthMedia: d.widthMedia ?? "" })),
+      },
+      canvas: { frameStyle: "", styles: fontLinks() },
+      protectedCss: "* { box-sizing: border-box; } body { margin: 0; }",
+      parser: { optionsHtml: { allowScripts: false, allowUnsafeAttr: false, allowUnsafeAttrValue: false } },
+    };
+    if (page?.project) opts.projectData = page.project;
+    else {
+      opts.components = cleanHtml(page?.html ?? "");
+      opts.style = cleanCss(page?.css ?? "");
+    }
+    return opts;
+  });
+
+  return (
+    <div ref={rootRef} className={cx(ROOT, GJS_VARS, GJS_THEME, className)} style={{ height }}>
+      <GjsEditor grapesjs={grapesjs} options={options} className="flex min-h-0 flex-1 flex-col">
+        <Shell {...props} rootRef={rootRef} />
+      </GjsEditor>
+    </div>
+  );
+}
+
+function Shell({
+  rootRef,
+  title = "Untitled page",
+  onSave,
+  onChange,
+  blocks: extraBlocks,
+  builtIns = true,
+  templates = STARTER_TEMPLATES,
+  styles = STYLE_GROUPS,
+  actions,
+  saveLabel = "Save",
+  onUploadImage,
+  builderRef,
+}) {
+  const editor = useEditorMaybe();
+  const [ready, setReady] = useState(false);
+  const [rev, setRev] = useState(0);
+  const [selected, setSelected] = useState(null);
+  const [device, setDevice] = useState("desktop");
+  const [preview, setPreview] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [empty, setEmpty] = useState(false);
+  const [startBlank, setStartBlank] = useState(false);
+  const [dirty, setDirty] = useState(false);
+  const [status, setStatus] = useState("idle"); // idle · saving · saved · error
+  const [history, setHistory] = useState({ undo: false, redo: false });
+  const [tab, setTab] = useState("add");
+  const [sheet, setSheet] = useState(null); // add · layers · design · templates
+  const saving = useRef(false);
+  const outline = useRef(false);
+
+  const blocks = useMemo(
+    () => [...builtInBlocks(builtIns), ...(extraBlocks ?? [])].map((b, i) => ({ ...normalizeBlock(b, i), level: b.level ?? (b.category === "Sections" || b.id === "section" ? "section" : "element") })),
+    [builtIns, extraBlocks],
+  );
+  const blockCss = useMemo(() => [BASE_CSS, ...blocks.map((b) => b.css).filter(Boolean)].join("\n"), [blocks]);
+  const onChangeRef = useLatest(onChange);
+  const onSaveRef = useLatest(onSave);
+
+  // ---- the editor's life -----------------------------------------------------
+
+  // Register (and re-register) the blocks with GrapesJS; their CSS joins
+  // the page's rules (only rules a page uses are exported).
+  useEffect(() => {
+    if (!editor) return;
+    const bm = editor.Blocks;
+    bm.getAll().reset([]);
+    for (const b of blocks) {
+      bm.add(b.id, { label: b.label, category: b.category, content: b.content ?? b.html, select: true, activate: false });
+    }
+    if (ready) editor.Css.addRules(blockCss);
+  }, [editor, blocks, blockCss, ready]);
+
+  useEffect(() => {
+    if (!editor) return;
+    const bump = () => setRev((r) => r + 1);
+    const sync = () => {
+      const um = editor.UndoManager;
+      setHistory({ undo: um.hasUndo(), redo: um.hasRedo() });
+      setDirty(editor.getDirtyCount() > 0);
+      setEmpty(editor.getWrapper()?.components().length === 0);
+    };
+    const onSelect = () => {
+      setSelected(editor.getSelected() ?? null);
+      bump();
+    };
+    let timer = null;
+    const onUpdate = () => {
+      bump();
+      sync();
+      if (!onChangeRef.current) return;
+      clearTimeout(timer);
+      timer = setTimeout(() => onChangeRef.current?.(readPage(editor)), 500);
+    };
+    // Picture double-click opens GrapesJS's asset modal by default; ours is
+    // the Design panel's picture field.
+    const openAssets = {
+      run: () => {
+        const c = editor.getSelected();
+        if (rootRef.current && rootRef.current.getBoundingClientRect().width < 1024) setSheet("design");
+        // The Design panel may be drawn twice (the side panel, hidden on a
+        // narrow screen, and the sheet): focus the one that shows.
+        setTimeout(() => {
+          const fields = rootRef.current?.ownerDocument.querySelectorAll(`[id="pb-src-${c?.cid}"]`) ?? [];
+          [...fields].find((el) => el.offsetParent !== null)?.focus();
+        }, 80);
+      },
+    };
+    editor.Commands.add("core:open-assets", openAssets);
+    editor.Commands.add("open-assets", openAssets);
+
+    const onLoad = () => {
+      editor.Css.addRules(blockCss);
+      const wrapper = editor.getWrapper();
+      wrapper?.set({ selectable: false, hoverable: false, highlightable: false, name: "Page" });
+      editor.runCommand("core:component-outline");
+      outline.current = true;
+      editor.UndoManager.clear();
+      editor.clearDirtyCount();
+      sync();
+      setReady(true);
+    };
+    editor.on("component:toggled", onSelect);
+    // "update" is GrapesJS's "the page changed" (it counts toward the dirty
+    // count); hover and selection changes do not fire it.
+    editor.on("update undo redo", onUpdate);
+    editor.on("component:styleUpdate component:add component:remove layer:component", bump);
+    editor.onReady(onLoad);
+    return () => {
+      clearTimeout(timer);
+      editor.off("component:toggled", onSelect);
+      editor.off("update undo redo", onUpdate);
+      editor.off("component:styleUpdate component:add component:remove layer:component", bump);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+
+  // Paint the frame in the theme: the resolved tokens, the app's fonts and
+  // the frame's base. Again whenever the light/dark scheme or theme changes.
+  useEffect(() => {
+    if (!editor || !ready) return;
+    let fonts = null;
+    let raf = 0;
+    const paint = () => {
+      const doc = editor.Canvas.getDocument();
+      if (!doc?.head) return;
+      fonts ??= fontFaceCss();
+      let el = doc.getElementById("pb-theme");
+      if (!el) {
+        el = doc.createElement("style");
+        el.id = "pb-theme";
+        doc.head.appendChild(el);
+      }
+      el.textContent = `${fonts}\n${tokenCss(rootRef.current)}\n${FRAME_CSS}`;
+      // A link in the page never navigates the editor's frame.
+      if (!doc.__pbLinks) {
+        doc.__pbLinks = true;
+        doc.addEventListener("click", (e) => e.target?.closest?.("a[href]") && e.preventDefault(), true);
+      }
+    };
+    const later = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(paint);
+    };
+    paint();
+    editor.on("canvas:frame:load:body", later);
+    const watch = new MutationObserver(later);
+    const opts = { attributes: true, attributeFilter: ["class", "style", "data-theme", "data-scheme"] };
+    watch.observe(document.documentElement, opts);
+    if (document.body) watch.observe(document.body, opts);
+    const scoped = rootRef.current?.closest?.("[data-theme]");
+    if (scoped && scoped !== document.documentElement) watch.observe(scoped, opts);
+    const mq = typeof matchMedia !== "undefined" ? matchMedia("(prefers-color-scheme: dark)") : null;
+    mq?.addEventListener?.("change", later);
+    return () => {
+      cancelAnimationFrame(raf);
+      editor.off("canvas:frame:load:body", later);
+      watch.disconnect();
+      mq?.removeEventListener?.("change", later);
+    };
+  }, [editor, ready, rootRef]);
+
+  // The canvas follows its box (panels folding, preview, the window).
+  useEffect(() => {
+    if (!editor || !ready) return;
+    const box = editor.Canvas.getElement()?.parentElement;
+    if (!box || typeof ResizeObserver === "undefined") return;
+    let raf = 0;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => editor.refresh());
+    });
+    ro.observe(box);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, [editor, ready]);
+
+  // ---- actions ---------------------------------------------------------------------
+
+  const select = useCallback(
+    (c) => {
+      if (!editor || !c) return;
+      editor.select(c);
+      editor.Canvas.scrollTo(c, { behavior: "smooth", block: "center" });
+    },
+    [editor],
+  );
+
+  const addBlock = useCallback(
+    (block) => {
+      if (!editor) return;
+      const content = block.content ?? block.html;
+      const wrapper = editor.getWrapper();
+      const sel = editor.getSelected();
+      let target = wrapper;
+      let at;
+      if (sel && sel !== wrapper) {
+        if (block.level === "section") {
+          at = topLevel(editor, sel).index() + 1;
+        } else if (!sel.is("text") && !sel.is("link") && !sel.is("image") && sel.get("droppable") !== false) {
+          target = sel;
+        } else {
+          target = sel.parent() ?? wrapper;
+          at = sel.index() + 1;
+        }
+      }
+      const added = target.append(content, at === undefined ? {} : { at });
+      setStartBlank(true);
+      setSheet(null);
+      if (added?.[0]) setTimeout(() => select(added[0]), 30);
+    },
+    [editor, select],
+  );
+
+  const applyTemplate = useCallback(
+    (template, { quiet = false } = {}) => {
+      if (!editor) return;
+      const before = editor.getProjectData();
+      const wasEmpty = editor.getWrapper()?.components().length === 0;
+      const next = templatePage(template);
+      if (next?.project) editor.loadProjectData(next.project);
+      else {
+        editor.setComponents(cleanHtml(next?.html ?? ""));
+        if (next?.css) editor.Css.addRules(cleanCss(next.css));
+      }
+      editor.Css.addRules(blockCss);
+      editor.UndoManager.clear();
+      editor.select();
+      setSheet(null);
+      setStartBlank(true);
+      setRev((r) => r + 1);
+      setEmpty(editor.getWrapper()?.components().length === 0);
+      if (!wasEmpty && !quiet) {
+        toast(`Started from “${template.label}”`, {
+          description: "Your previous page was replaced.",
+          action: {
+            label: "Undo",
+            onClick: () => {
+              editor.loadProjectData(before);
+              editor.Css.addRules(blockCss);
+              setRev((r) => r + 1);
+            },
+          },
+        });
+      }
+    },
+    [editor, blockCss],
+  );
+
+  const act = useCallback(
+    (what) => {
+      const c = editor?.getSelected();
+      if (!c) return;
+      const parent = c.parent();
+      const i = c.index();
+      if (what === "parent" && parent && parent !== editor.getWrapper()) select(parent);
+      else if ((what === "up" || what === "down") && parent) {
+        if (what === "up" ? i <= 0 : i >= parent.components().length - 1) return;
+        // move() takes the slot to insert before, counted before the move.
+        c.move(parent, { at: what === "up" ? i - 1 : i + 2 });
+        select(c);
+      } else if (what === "duplicate" && parent) {
+        const copy = c.clone();
+        parent.append(copy, { at: i + 1 });
+        select(copy);
+      } else if (what === "delete") {
+        const name = nameOf(editor, c);
+        c.remove();
+        editor.select();
+        setSheet((s) => (s === "design" ? null : s));
+        toast(`${name} deleted`, { action: { label: "Undo", onClick: () => editor.UndoManager.undo() } });
+      }
+    },
+    [editor, select],
+  );
+
+  const save = useCallback(async () => {
+    if (!editor || saving.current) return { ok: false };
+    saving.current = true;
+    setStatus("saving");
+    const snapshot = editor.getDirtyCount();
+    let res;
+    try {
+      res = onSaveRef.current ? await onSaveRef.current(readPage(editor)) : { ok: true };
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    saving.current = false;
+    if (res?.ok) {
+      // Edits made while saving stay unsaved.
+      if (editor.getDirtyCount() === snapshot) editor.clearDirtyCount();
+      setDirty(editor.getDirtyCount() > 0);
+      setStatus("saved");
+    } else {
+      setStatus("error");
+      toast.error("The page was not saved", {
+        description: res?.error ?? "Your changes are still here. Try again in a moment.",
+        action: { label: "Try again", onClick: () => saveRef.current?.() },
+      });
+    }
+    return res ?? { ok: false };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  const saveRef = useLatest(save);
+
+  const pickDevice = useCallback(
+    (id) => {
+      if (!id || !editor) return;
+      editor.Devices.select(id);
+      setDevice(id);
+    },
+    [editor],
+  );
+
+  const togglePreview = useCallback(
+    (on) => {
+      if (!editor) return;
+      if (on) {
+        editor.select();
+        if (editor.Commands.isActive("core:component-outline")) editor.stopCommand("core:component-outline");
+        editor.getModel().stopDefault();
+      } else {
+        editor.getModel().runDefault();
+        if (outline.current) editor.runCommand("core:component-outline");
+      }
+      setSheet(null);
+      setPreview(on);
+    },
+    [editor],
+  );
+
+  // ⌘/Ctrl+S saves; Esc leaves preview. Undo, redo and delete are
+  // GrapesJS's own keymaps (⌘Z, ⇧⌘Z, Backspace), live in the frame too.
+  useEffect(() => {
+    if (!editor) return;
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        saveRef.current?.();
+      } else if (e.key === "Escape" && preview) togglePreview(false);
+    };
+    const frameWin = () => editor.Canvas.getWindow();
+    document.addEventListener("keydown", onKey);
+    let fw = null;
+    const attach = () => {
+      fw?.removeEventListener("keydown", onKey);
+      fw = frameWin();
+      fw?.addEventListener("keydown", onKey);
+    };
+    if (ready) attach();
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      fw?.removeEventListener("keydown", onKey);
+    };
+  }, [editor, ready, preview, togglePreview, saveRef]);
+
+  // The handle.
+  useEffect(() => {
+    if (!builderRef) return;
+    builderRef.current = editor
+      ? {
+          editor,
+          getPage: () => readPage(editor),
+          save: () => saveRef.current?.(),
+          addBlock: (id) => {
+            const b = blocks.find((x) => x.id === id);
+            if (b) addBlock(b);
+            return Boolean(b);
+          },
+          loadTemplate: (t) => {
+            const tpl = typeof t === "string" ? templates.find((x) => x.id === t) : t;
+            if (tpl) applyTemplate(tpl);
+            return Boolean(tpl);
+          },
+          setPage: (p) => applyTemplate(p ?? {}, { quiet: true }),
+          undo: () => editor.UndoManager.undo(),
+          redo: () => editor.UndoManager.redo(),
+          setDevice: pickDevice,
+          preview: (on = true) => togglePreview(on),
+        }
+      : null;
+  }, [builderRef, editor, blocks, templates, addBlock, applyTemplate, pickDevice, togglePreview, saveRef]);
+
+  // ---- render ------------------------------------------------------------------------
+
+  const showEmpty = ready && empty && !startBlank && !dragging && !preview;
+  const statusText =
+    status === "saving" ? "Saving…" : status === "error" ? "Not saved" : dirty ? "Unsaved changes" : status === "saved" ? "All changes saved" : "No changes yet";
+
+  const addPanel = (
+    <AddPanel editor={editor} blocks={blocks} templates={templates} onAdd={addBlock} onDragging={setDragging} onTemplates={() => setSheet("templates")} />
+  );
+  const layersPanel = <LayersPanel editor={editor} selected={selected} rev={rev} onSelect={select} />;
+  const designPanel = <DesignPanel editor={editor} selected={selected} rev={rev} groups={styles} onUploadImage={onUploadImage} onAction={act} />;
+
+  const devices = (
+    <ToggleGroup
+      aria-label="Preview width"
+      size="sm"
+      value={device}
+      onChange={pickDevice}
+      items={DEVICES.map((d) => ({ value: d.id, label: d.label, icon: d.icon, iconOnly: true }))}
+    />
+  );
+
+  return (
+    <>
+      {/* top bar */}
+      <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border px-3 @3xl:px-4">
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium leading-tight">{title}</p>
+          <p className={cx("truncate text-xs leading-tight", status === "error" ? "text-destructive" : "text-muted-foreground")} aria-live="polite">
+            {statusText}
+          </p>
+        </div>
+        <div className="hidden @3xl:block">{devices}</div>
+        <div className="flex items-center gap-0.5">
+          <Tooltip label="Undo (⌘Z)">
+            <IconButton icon="undo" label="Undo" size="sm" disabled={!history.undo || preview} onClick={() => editor?.UndoManager.undo()} />
+          </Tooltip>
+          <Tooltip label="Redo (⇧⌘Z)">
+            <IconButton icon="redo" label="Redo" size="sm" disabled={!history.redo || preview} onClick={() => editor?.UndoManager.redo()} />
+          </Tooltip>
+        </div>
+        <span className="hidden @xl:block">
+          <Button variant={preview ? "primary" : "secondary"} size="sm" icon={preview ? "eye-off" : "eye"} onClick={() => togglePreview(!preview)} aria-pressed={preview}>
+            {preview ? "Exit preview" : "Preview"}
+          </Button>
+        </span>
+        <span className="@3xl:hidden">
+          <Menu
+            label="More"
+            items={[
+              { type: "radio", label: "Width", value: device, onValueChange: pickDevice, options: DEVICES.map((d) => ({ value: d.id, label: d.label })) },
+              { type: "separator" },
+              { label: preview ? "Exit preview" : "Preview", icon: "eye", onSelect: () => togglePreview(!preview) },
+              templates?.length ? { label: "Start from a template", icon: "file", onSelect: () => setSheet("templates") } : null,
+            ]}
+          />
+        </span>
+        {actions}
+        <Button variant="primary" size="sm" loading={status === "saving"} disabled={!ready || (!dirty && status !== "error")} onClick={save}>
+          {saveLabel}
+        </Button>
+      </header>
+
+      <div className="relative flex min-h-0 flex-1">
+        {/* left: add + layers */}
+        {!preview ? (
+          <aside aria-label="Blocks and layers" className="hidden w-72 shrink-0 flex-col border-r border-border bg-background @5xl:flex">
+            <Tabs
+              aria-label="Panel"
+              tabs={[
+                { key: "add", label: "Add" },
+                { key: "layers", label: "Layers" },
+              ]}
+              value={tab}
+              onChange={setTab}
+              className="shrink-0 px-2"
+            />
+            <TabPanel tab="add" value={tab} className="flex min-h-0 flex-1 flex-col">
+              {addPanel}
+            </TabPanel>
+            <TabPanel tab="layers" value={tab} className="min-h-0 flex-1 overflow-y-auto">
+              {layersPanel}
+            </TabPanel>
+          </aside>
+        ) : null}
+
+        {/* the canvas */}
+        <div className="relative min-w-0 flex-1 bg-muted">
+          <Canvas className="absolute inset-0" />
+          {!ready ? (
+            <div className="absolute inset-0 grid place-items-center bg-muted p-6" aria-hidden="true">
+              <div className="grid w-full max-w-xl gap-3">
+                <Skeleton className="mx-auto h-4 w-40" />
+                <Skeleton className="mx-auto h-8 w-4/5" />
+                <Skeleton className="mx-auto h-4 w-3/5" />
+              </div>
+            </div>
+          ) : null}
+          {showEmpty ? (
+            <div className="pointer-events-none absolute inset-0 grid place-items-center overflow-y-auto p-4">
+              <div className="pointer-events-auto grid w-full max-w-2xl gap-5 rounded-xl border border-border bg-popover p-5 text-popover-foreground shadow-sm @3xl:p-6">
+                <div className="grid gap-1">
+                  <p className="text-lg font-semibold">Start your page</p>
+                  <p className="text-sm text-muted-foreground">
+                    {templates?.length ? "Pick a template to begin with, or start blank and add sections one at a time." : "Add a section from the Add panel, or drag one onto the page."}
+                  </p>
+                </div>
+                {templates?.length ? <TemplateGrid templates={templates} onPick={applyTemplate} compact /> : null}
+                <div className="flex flex-wrap items-center gap-2">
+                  <Button
+                    variant={templates?.length ? "secondary" : "primary"}
+                    size="sm"
+                    icon="plus"
+                    onClick={() => {
+                      setStartBlank(true);
+                      setTab("add");
+                      if (rootRef.current && rootRef.current.getBoundingClientRect().width < 1024) setSheet("add");
+                    }}
+                  >
+                    {templates?.length ? "Start blank" : "Add a section"}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ) : null}
+          {preview ? (
+            <div className="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center">
+              <Button variant="primary" size="sm" icon="eye-off" onClick={() => togglePreview(false)} className="pointer-events-auto shadow-md">
+                Exit preview · Esc
+              </Button>
+            </div>
+          ) : null}
+        </div>
+
+        {/* right: design */}
+        {!preview ? (
+          <aside aria-label="Design" className="hidden w-72 shrink-0 flex-col border-l border-border bg-background @5xl:flex">
+            <div className="flex h-11 shrink-0 items-center border-b border-border px-4">
+              <h2 className="text-sm font-medium">Design</h2>
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto pt-4">{designPanel}</div>
+          </aside>
+        ) : null}
+      </div>
+
+      {/* narrow: a bottom bar and sheets */}
+      {!preview ? (
+        <nav aria-label="Editor panels" className="grid shrink-0 grid-cols-3 border-t border-border bg-background @5xl:hidden">
+          <Button variant="quiet" icon="plus" onClick={() => setSheet("add")}>
+            Add
+          </Button>
+          <Button variant="quiet" icon="layers" onClick={() => setSheet("layers")}>
+            Layers
+          </Button>
+          <Button variant="quiet" icon="palette" onClick={() => setSheet("design")} disabled={!ready}>
+            <span className="truncate">{selected ? `Design · ${nameOf(editor, selected)}` : "Design"}</span>
+          </Button>
+        </nav>
+      ) : null}
+
+      <Sheet open={sheet === "add"} onClose={() => setSheet(null)} title="Add a block" description="Tap a block to add it below the selection.">
+        <div className="-mx-4 -my-4 flex min-h-[60vh] flex-col pt-3">{sheet === "add" ? addPanel : null}</div>
+      </Sheet>
+      <Sheet open={sheet === "layers"} onClose={() => setSheet(null)} title="Layers">
+        <div className="-mx-2">{sheet === "layers" ? layersPanel : null}</div>
+      </Sheet>
+      <Sheet open={sheet === "design"} onClose={() => setSheet(null)} title="Design">
+        <div className="-mx-4">{sheet === "design" ? designPanel : null}</div>
+      </Sheet>
+      <Sheet open={sheet === "templates"} onClose={() => setSheet(null)} side="center" title="Start from a template" description="A template replaces the page. You can undo it right after.">
+        {sheet === "templates" ? <TemplateGrid templates={templates ?? []} onPick={applyTemplate} /> : null}
+      </Sheet>
+
+      {/* GrapesJS needs the blocks flagged custom before it is created. */}
+      <BlocksProvider>{() => <></>}</BlocksProvider>
+    </>
+  );
+}