@bygghammar/cms-platform 0.29.0 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.30.0
+
+- Added `backoffice/PagesListView` — the page-builder index with public URLs per
+  locale, rename inline, trash bin with restore/purge and page creation.
+- Added `backoffice/BlocksLibraryView` — the blocks library (block types, global
+  blocks and legacy one-off copies) with previews; the block registry, preview
+  draft store and navigation are host-supplied.
+
 ## 0.29.0
 
 - Added `backoffice/GlobalSectionsListView` — the global-sections library with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.29.0",
+  "version": "0.30.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,
@@ -133,7 +133,9 @@
     "./backoffice/FormSettingsView": "./src/backoffice/FormSettingsView.tsx",
     "./backoffice/GlobalSectionsListView": "./src/backoffice/GlobalSectionsListView.tsx",
     "./backoffice/GlobalSectionBuilderView": "./src/backoffice/GlobalSectionBuilderView.tsx",
-    "./backoffice/ReviewsView": "./src/backoffice/ReviewsView.tsx"
+    "./backoffice/ReviewsView": "./src/backoffice/ReviewsView.tsx",
+    "./backoffice/PagesListView": "./src/backoffice/PagesListView.tsx",
+    "./backoffice/BlocksLibraryView": "./src/backoffice/BlocksLibraryView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/BlocksLibraryView.tsx

@@ -0,0 +1,463 @@
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { Eye, Layers, Pencil, Trash2, Search, Globe, Plus } from "lucide-react";
+import { DataThumb } from "./SectionThumb";
+import { PreviewLightbox } from "./PreviewLightbox";
+
+/** Minimal shape of a block instance used by this screen. */
+export type LibraryBlock = {
+  id: string;
+  type: string;
+  props?: Record<string, unknown>;
+  visible?: boolean;
+};
+
+/** A block type as described by the host registry. */
+export type LibraryBlockDef = {
+  type: string;
+  label: string;
+  description: string;
+  category: string;
+  defaultProps: Record<string, unknown>;
+};
+
+/** A legacy one-off block copy. */
+export type LibraryTemplate = {
+  id: string;
+  name: string;
+  description?: string | null;
+  blockType: string;
+  block: LibraryBlock;
+};
+
+/** A saved global block/section row. */
+export type LibraryGlobalRow = {
+  id: string;
+  key: string;
+  name: string;
+  blocks?: unknown;
+  kind?: string;
+};
+
+export type BlocksLibraryDeps = {
+  defs: LibraryBlockDef[];
+  globals: LibraryGlobalRow[];
+  templates: LibraryTemplate[];
+  /** Fallback thumbnail per block type. */
+  typeImages: Record<string, string | null | undefined>;
+  /** Human label for a block type. */
+  blockTypeLabel: (type: string) => string;
+  /** Persists the preview payload so the preview route can render it. */
+  writePreviewDraft: (payload: { blocks: LibraryBlock[]; globals: Record<string, LibraryBlock[]> }) => void;
+  /** Preview iframe URL. */
+  previewSrc: string;
+  createGlobal: (input: {
+    key: string;
+    name: string;
+    kind: "block" | "section";
+    blocks: LibraryBlock[];
+  }) => Promise<unknown>;
+  renameGlobal: (input: { sectionId: string; name: string }) => Promise<unknown>;
+  deleteGlobal: (sectionId: string) => Promise<unknown>;
+  saveTemplate: (input: {
+    id: string;
+    name: string;
+    description?: string | null;
+    block: LibraryBlock;
+  }) => Promise<unknown>;
+  deleteTemplate: (id: string) => Promise<unknown>;
+  refetchGlobals: () => Promise<unknown> | void;
+  refetchTemplates: () => Promise<unknown> | void;
+  /** Navigates to the global block editor. */
+  openGlobal: (key: string) => void;
+};
+
+function uid(prefix = "b") {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+/** Turn a name into a url-safe global block key. */
+export function slugifyKey(name: string) {
+  const base = name
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 48);
+  return base || "section";
+}
+
+/** Library screen for block types, global blocks and legacy one-off copies. */
+export function BlocksLibraryView({ deps }: { deps: BlocksLibraryDeps }): ReactNode {
+  const {
+    defs: allDefs,
+    globals,
+    templates,
+    typeImages,
+    blockTypeLabel,
+    writePreviewDraft,
+    previewSrc,
+    createGlobal,
+    renameGlobal,
+    deleteGlobal,
+    saveTemplate,
+    deleteTemplate,
+    refetchGlobals,
+    refetchTemplates,
+    openGlobal,
+  } = deps;
+
+  const [tab, setTab] = useState<"types" | "saved" | "copies">("saved");
+  const [q, setQ] = useState("");
+  const [preview, setPreview] = useState<{ title: string } | null>(null);
+
+  const fail = (e: unknown) => toast.error(e instanceof Error ? e.message : "Failed");
+
+  const globalsMap = useMemo(() => {
+    const m: Record<string, LibraryBlock[]> = {};
+    for (const g of globals) m[g.key] = ((g.blocks ?? []) as LibraryBlock[]) ?? [];
+    return m;
+  }, [globals]);
+
+  const openPreview = useCallback(
+    (blocks: LibraryBlock[], title: string) => {
+      writePreviewDraft({ blocks, globals: globalsMap });
+      setPreview({ title });
+    },
+    [globalsMap, writePreviewDraft],
+  );
+
+  const toSavedBlock = useCallback(
+    async (block: LibraryBlock, defaultName: string) => {
+      const name = window.prompt("Global block name", defaultName);
+      if (!name) return;
+      const key = window.prompt("Key (url-safe, unique)", slugifyKey(name));
+      if (!key) return;
+      try {
+        await createGlobal({
+          key,
+          name,
+          kind: "block",
+          blocks: [{ ...structuredClone(block), id: uid() }],
+        });
+        toast.success("Global block created");
+        await refetchGlobals();
+        openGlobal(key);
+      } catch (e) {
+        fail(e);
+      }
+    },
+    [createGlobal, openGlobal, refetchGlobals],
+  );
+
+  const convertTemplate = useCallback(
+    async (t: LibraryTemplate) => {
+      const key = window.prompt("Key (url-safe, unique)", slugifyKey(t.name));
+      if (!key) return;
+      try {
+        await createGlobal({
+          key,
+          name: t.name,
+          kind: "block",
+          blocks: [{ ...structuredClone(t.block), id: uid() }],
+        });
+        await deleteTemplate(t.id);
+        toast.success("Converted to a global block");
+        await refetchTemplates();
+        await refetchGlobals();
+        openGlobal(key);
+      } catch (e) {
+        fail(e);
+      }
+    },
+    [createGlobal, deleteTemplate, openGlobal, refetchGlobals, refetchTemplates],
+  );
+
+  const onRenameTpl = async (t: LibraryTemplate) => {
+    const name = window.prompt("Name", t.name);
+    if (!name || name === t.name) return;
+    try {
+      await saveTemplate({ id: t.id, name, description: t.description, block: t.block });
+      toast.success("Renamed");
+      await refetchTemplates();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onDeleteTpl = async (t: LibraryTemplate) => {
+    if (!confirm(`Delete copy "${t.name}"?`)) return;
+    try {
+      await deleteTemplate(t.id);
+      toast.success("Deleted");
+      await refetchTemplates();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onRenameSaved = async (id: string, current: string) => {
+    const name = window.prompt("Global block name", current);
+    if (!name || name === current) return;
+    try {
+      await renameGlobal({ sectionId: id, name });
+      toast.success("Renamed");
+      await refetchGlobals();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onDeleteSaved = async (id: string, name: string) => {
+    if (!confirm(`Delete global block "${name}"? Pages using it will render nothing there.`)) return;
+    try {
+      await deleteGlobal(id);
+      toast.success("Deleted");
+      await refetchGlobals();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const needle = q.trim().toLowerCase();
+  const defs = allDefs.filter(
+    (d) =>
+      !needle ||
+      d.label.toLowerCase().includes(needle) ||
+      d.description.toLowerCase().includes(needle) ||
+      d.type.toLowerCase().includes(needle),
+  );
+  const savedBlocks = globals
+    .filter((g) => (g.kind ?? "section") === "block")
+    .filter(
+      (g) =>
+        !needle || g.name.toLowerCase().includes(needle) || g.key.toLowerCase().includes(needle),
+    );
+  const copies = templates.filter(
+    (t) =>
+      !needle ||
+      t.name.toLowerCase().includes(needle) ||
+      (t.description ?? "").toLowerCase().includes(needle) ||
+      t.blockType.toLowerCase().includes(needle),
+  );
+
+  const tabBtn = (id: typeof tab, label: string) => (
+    <button
+      type="button"
+      onClick={() => setTab(id)}
+      className={`px-4 py-2 text-[0.7rem] uppercase tracking-[0.18em] ${tab === id ? "bg-ink text-paper" : "text-ink/60 hover:text-ink"}`}
+    >
+      {label}
+    </button>
+  );
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Library</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Blocks</h1>
+      <p className="mt-4 max-w-2xl text-sm text-ink/60">
+        Block types are the building bricks. A <strong>global block</strong> is a named, editable
+        block you reuse on pages and inside global sections — edit it once here and every place that
+        uses it updates at the same time. A global block always holds exactly one block; for several
+        blocks together, use Global Sections.
+      </p>
+
+      <div className="mt-8 flex flex-wrap items-center gap-3">
+        <div className="inline-flex border border-ink/15 bg-white">
+          {tabBtn("saved", `Global blocks (${savedBlocks.length})`)}
+          {tabBtn("types", `Block types (${defs.length})`)}
+          {copies.length > 0 && tabBtn("copies", `One-off copies (${copies.length})`)}
+        </div>
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink/40" />
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search blocks…"
+            className="border border-ink/15 bg-white py-2 pl-9 pr-3 text-sm outline-none focus:border-sea"
+          />
+        </div>
+      </div>
+
+      {tab === "types" && (
+        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          {defs.map((def) => {
+            const block: LibraryBlock = {
+              id: "preview",
+              type: def.type,
+              props: structuredClone(def.defaultProps),
+            };
+            return (
+              <div key={def.type} className="border border-ink/10 bg-white p-4">
+                <button
+                  type="button"
+                  title="Preview block"
+                  onClick={() => openPreview([block], def.label)}
+                  className="group relative block"
+                >
+                  <DataThumb
+                    data={def.defaultProps}
+                    fallbackImage={typeImages[def.type]}
+                    blockType={def.type}
+                  />
+                  <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
+                    <Eye className="size-4" />
+                  </span>
+                </button>
+                <div className="mt-3 flex items-center gap-2">
+                  <div className="font-serif text-lg text-ink">{def.label}</div>
+                  <span className="rounded bg-ink/[0.06] px-1.5 py-1 text-[0.6rem] uppercase tracking-[0.16em] text-ink/55">
+                    {def.category}
+                  </span>
+                </div>
+                <p className="mt-1 text-sm text-ink/60">{def.description}</p>
+                <div className="mt-3 flex items-center justify-between gap-2">
+                  <span className="font-mono text-[0.7rem] text-ink/40">{def.type}</span>
+                  <button
+                    onClick={() => toSavedBlock(block, def.label)}
+                    className="inline-flex items-center gap-1 text-[0.75rem] text-sea hover:underline"
+                  >
+                    <Plus className="size-3.5" /> Save as global block
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {tab === "saved" && (
+        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          {savedBlocks.length === 0 && (
+            <p className="text-sm text-ink/55">
+              No global blocks yet. Open a block type above and choose "Save as global block", or
+              select a block in the page builder and choose "Save as global block".
+            </p>
+          )}
+          {savedBlocks.map((g) => {
+            const blocks = (g.blocks ?? []) as LibraryBlock[];
+            const labels = blocks
+              .filter((b) => b.visible !== false)
+              .map((b) => blockTypeLabel(b.type));
+            return (
+              <div key={g.id} className="border border-ink/10 bg-white p-4">
+                <button
+                  type="button"
+                  title="Preview global block"
+                  onClick={() => openPreview(blocks, g.name)}
+                  className="group relative block"
+                >
+                  <DataThumb
+                    data={blocks}
+                    fallbackImage={blocks.map((b) => typeImages[b.type]).find(Boolean) ?? null}
+                  />
+                  <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
+                    <Eye className="size-4" />
+                  </span>
+                </button>
+                <div className="mt-3 flex items-center gap-2">
+                  <div className="font-serif text-lg text-ink">{g.name}</div>
+                  <Globe className="size-3.5 text-ink/40" aria-label="Global block" />
+                </div>
+                {labels.length > 0 && (
+                  <div className="mt-1 flex flex-wrap gap-1.5">
+                    {labels.map((label, i) => (
+                      <span
+                        key={i}
+                        className="inline-block rounded bg-ink/[0.06] px-1.5 py-1 text-[0.65rem] leading-none text-ink/60"
+                      >
+                        {label}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                <div className="mt-3 font-mono text-[0.7rem] text-ink/40">{g.key}</div>
+                <div className="mt-4 flex flex-wrap gap-3 text-[0.75rem]">
+                  <button
+                    onClick={() => openGlobal(g.key)}
+                    className="inline-flex items-center gap-1 text-sea hover:underline"
+                  >
+                    <Pencil className="size-3.5" /> Edit
+                  </button>
+                  <button
+                    onClick={() => onRenameSaved(g.id, g.name)}
+                    className="inline-flex items-center gap-1 text-ink/60 hover:text-ink"
+                  >
+                    <Layers className="size-3.5" /> Rename
+                  </button>
+                  <button
+                    onClick={() => onDeleteSaved(g.id, g.name)}
+                    className="inline-flex items-center gap-1 text-red-600/80 hover:text-red-700"
+                  >
+                    <Trash2 className="size-3.5" /> Delete
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {tab === "copies" && (
+        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          {copies.map((t) => (
+            <div key={t.id} className="border border-ink/10 bg-white p-4">
+              <button
+                type="button"
+                title="Preview block"
+                onClick={() => openPreview([t.block], t.name)}
+                className="group relative block"
+              >
+                <DataThumb
+                  data={t.block.props ?? {}}
+                  fallbackImage={typeImages[t.blockType]}
+                  blockType={t.blockType}
+                />
+                <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
+                  <Eye className="size-4" />
+                </span>
+              </button>
+              <div className="mt-3 flex items-center gap-2">
+                <div className="font-serif text-lg text-ink">{t.name}</div>
+                <span className="rounded bg-ink/[0.06] px-1.5 py-1 text-[0.6rem] uppercase tracking-[0.16em] text-ink/55">
+                  {blockTypeLabel(t.blockType)}
+                </span>
+              </div>
+              <p className="mt-1 text-sm text-ink/60">
+                {t.description || "A one-off copy: pages using it keep their own version."}
+              </p>
+              <div className="mt-4 flex flex-wrap gap-3 text-[0.75rem]">
+                <button
+                  onClick={() => convertTemplate(t)}
+                  className="inline-flex items-center gap-1 text-sea hover:underline"
+                >
+                  <Globe className="size-3.5" /> Convert to global block
+                </button>
+                <button
+                  onClick={() => onRenameTpl(t)}
+                  className="inline-flex items-center gap-1 text-ink/60 hover:text-ink"
+                >
+                  <Pencil className="size-3.5" /> Rename
+                </button>
+                <button
+                  onClick={() => onDeleteTpl(t)}
+                  className="inline-flex items-center gap-1 text-red-600/80 hover:text-red-700"
+                >
+                  <Trash2 className="size-3.5" /> Delete
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <PreviewLightbox
+        open={preview != null}
+        onClose={() => setPreview(null)}
+        src={previewSrc}
+        title={preview?.title ?? ""}
+      />
+    </div>
+  );
+}

package/src/backoffice/PagesListView.tsx

@@ -0,0 +1,369 @@
+import { useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { Plus, Trash2, Pencil, Globe as GlobeIcon, ExternalLink, Undo2 } from "lucide-react";
+
+/** A page row as listed by the host. */
+export type PageListRow = {
+  id: string;
+  key: string;
+  name: string;
+  status: string;
+  updated_at: string;
+  is_system?: boolean | null;
+};
+
+/** A soft-deleted page kept in the trash bin. */
+export type DeletedPageRow = {
+  id: string;
+  key: string;
+  name: string;
+  deleted_at?: string | null;
+  deleted_by?: string | null;
+  deleted_by_email?: string | null;
+};
+
+export type PagesListDeps = {
+  pages: PageListRow[] | undefined;
+  trash: { rows: DeletedPageRow[]; canPurge: boolean } | undefined;
+  /** Locale switcher — pass a single locale to hide the switcher. */
+  locales: { value: string; label: string }[];
+  locale: string;
+  setLocale: (locale: string) => void;
+  /** Public path for a page key in the active locale. */
+  pathFor: (key: string) => string;
+  /** Absolute URL for a page key, including the locale's domain when known. */
+  hrefFor: (key: string) => string;
+  createPage: (input: { key: string; name: string }) => Promise<unknown>;
+  renamePage: (input: { pageId: string; name: string }) => Promise<unknown>;
+  deletePage: (pageId: string) => Promise<unknown>;
+  restorePage: (pageId: string) => Promise<unknown>;
+  purgePage: (pageId: string) => Promise<unknown>;
+  refetchPages: () => void;
+  refetchTrash: () => void;
+  openEditor: (key: string) => void;
+  GlobalsLink: (props: { className?: string; children: ReactNode }) => ReactNode;
+};
+
+/** Page builder index: page list with public URLs, trash bin and page creation. */
+export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
+  const {
+    pages,
+    trash,
+    locales,
+    locale,
+    setLocale,
+    pathFor,
+    hrefFor,
+    createPage,
+    renamePage,
+    deletePage,
+    restorePage,
+    purgePage,
+    refetchPages,
+    refetchTrash,
+    openEditor,
+    GlobalsLink,
+  } = deps;
+
+  const [newKey, setNewKey] = useState("");
+  const [newName, setNewName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [renaming, setRenaming] = useState<{ id: string; name: string } | null>(null);
+
+  const fail = (e: unknown) => toast.error(e instanceof Error ? e.message : "Failed");
+
+  const onRename = async () => {
+    if (!renaming || !renaming.name.trim()) return;
+    try {
+      await renamePage({ pageId: renaming.id, name: renaming.name.trim() });
+      toast.success("Page renamed");
+      setRenaming(null);
+      refetchPages();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onCreate = async () => {
+    if (!newKey || !newName) return;
+    setBusy(true);
+    try {
+      await createPage({ key: newKey, name: newName });
+      toast.success("Page created");
+      setNewKey("");
+      setNewName("");
+      refetchPages();
+    } catch (e) {
+      fail(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDelete = async (id: string, name: string) => {
+    if (!confirm(`Move page "${name}" to the trash bin? It can be restored later.`)) return;
+    try {
+      await deletePage(id);
+      toast.success("Moved to trash");
+      refetchPages();
+      refetchTrash();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onRestore = async (id: string) => {
+    try {
+      await restorePage(id);
+      toast.success("Page restored");
+      refetchPages();
+      refetchTrash();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onPurge = async (id: string, name: string) => {
+    if (!confirm(`Permanently delete "${name}"? This cannot be undone.`)) return;
+    try {
+      await purgePage(id);
+      toast.success("Permanently deleted");
+      refetchTrash();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Page builder</div>
+      <div className="mt-2 flex flex-wrap items-end justify-between gap-4">
+        <h1 className="font-serif text-3xl md:text-4xl text-ink">Pages</h1>
+        <div className="flex items-center gap-3">
+          {locales.length > 1 && (
+            <div className="flex items-center gap-1">
+              {locales.map((loc) => (
+                <button
+                  key={loc.value}
+                  onClick={() => setLocale(loc.value)}
+                  className={`px-2 py-1 text-[0.7rem] uppercase tracking-widest border ${
+                    locale === loc.value
+                      ? "border-sea bg-ice/50 text-ink"
+                      : "border-ink/15 text-ink/50 hover:text-ink"
+                  }`}
+                >
+                  {loc.label}
+                </button>
+              ))}
+            </div>
+          )}
+          <GlobalsLink className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-sm text-ink hover:border-sea">
+            <>
+              <GlobeIcon className="size-4" /> Global blocks
+            </>
+          </GlobalsLink>
+        </div>
+      </div>
+
+      <p className="mt-4 max-w-2xl text-sm text-ink/60">
+        Compose each page from blocks and global blocks. Every save creates a new version — publish
+        when ready.
+      </p>
+
+      <div className="mt-8 border border-ink/10 bg-white">
+        <table className="w-full text-sm">
+          <thead className="bg-ink/[0.03] text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/60">
+            <tr>
+              <th className="px-4 py-3">Name</th>
+              <th className="px-4 py-3">Key</th>
+              <th className="px-4 py-3">URL</th>
+              <th className="px-4 py-3">Status</th>
+              <th className="px-4 py-3">Updated</th>
+              <th className="px-4 py-3 w-40"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {pages?.map((p) => (
+              <tr key={p.id} className="border-t border-ink/10">
+                <td className="px-4 py-3 text-ink">
+                  {renaming?.id === p.id ? (
+                    <span className="flex items-center gap-2">
+                      <input
+                        autoFocus
+                        value={renaming.name}
+                        onChange={(e) => setRenaming({ id: p.id, name: e.target.value })}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") onRename();
+                          if (e.key === "Escape") setRenaming(null);
+                        }}
+                        className="border border-ink/20 px-2 py-1 text-sm"
+                      />
+                      <button onClick={onRename} className="text-sea hover:underline text-xs">
+                        Save
+                      </button>
+                      <button
+                        onClick={() => setRenaming(null)}
+                        className="text-ink/50 hover:underline text-xs"
+                      >
+                        Cancel
+                      </button>
+                    </span>
+                  ) : (
+                    <>
+                      {p.name}{" "}
+                      {p.is_system && (
+                        <span className="ml-2 text-[0.65rem] text-ink/50">SYSTEM</span>
+                      )}
+                      <button
+                        onClick={() => setRenaming({ id: p.id, name: p.name })}
+                        className="ml-3 text-[0.7rem] text-ink/50 hover:text-sea underline"
+                      >
+                        rename
+                      </button>
+                    </>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-ink/70 font-mono">{p.key}</td>
+                <td className="px-4 py-3">
+                  <a
+                    href={hrefFor(p.key)}
+                    target="_blank"
+                    rel="noreferrer"
+                    title={`Open ${hrefFor(p.key)}`}
+                    className="inline-flex items-center gap-1.5 font-mono text-xs text-sea hover:underline"
+                  >
+                    {pathFor(p.key)}
+                    <ExternalLink className="size-3 text-ink/40" />
+                  </a>
+                </td>
+                <td className="px-4 py-3 text-ink/70">{p.status}</td>
+                <td className="px-4 py-3 text-ink/50">{new Date(p.updated_at).toLocaleString()}</td>
+                <td className="px-4 py-3 text-right">
+                  <button
+                    onClick={() => openEditor(p.key)}
+                    className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
+                  >
+                    <Pencil className="size-3.5" /> Edit
+                  </button>
+                  {!p.is_system && (
+                    <button
+                      onClick={() => onDelete(p.id, p.name)}
+                      className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                    >
+                      <Trash2 className="size-3.5" /> Delete
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+            {pages?.length === 0 && (
+              <tr>
+                <td colSpan={6} className="px-4 py-8 text-center text-ink/50">
+                  No pages yet.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-10 border border-ink/10 bg-white">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-ink/10">
+          <div>
+            <div className="font-serif text-lg text-ink">Trash bin</div>
+            <p className="text-sm text-ink/60 mt-1">
+              Deleted pages are kept here with a record of who deleted them. Only a superadmin can
+              delete them permanently.
+            </p>
+          </div>
+        </div>
+        <table className="w-full text-sm">
+          <thead className="bg-ink/[0.03] text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/60">
+            <tr>
+              <th className="px-4 py-3">Name</th>
+              <th className="px-4 py-3">Key</th>
+              <th className="px-4 py-3">Deleted by</th>
+              <th className="px-4 py-3">Deleted at</th>
+              <th className="px-4 py-3 w-56"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {trash?.rows.map((p) => (
+              <tr key={p.id} className="border-t border-ink/10">
+                <td className="px-4 py-3 text-ink">{p.name}</td>
+                <td className="px-4 py-3 font-mono text-ink/70">{p.key}</td>
+                <td className="px-4 py-3 text-ink/70">
+                  {p.deleted_by_email ?? p.deleted_by ?? "Unknown user"}
+                </td>
+                <td className="px-4 py-3 text-ink/50">
+                  {p.deleted_at ? new Date(p.deleted_at).toLocaleString() : "—"}
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <button
+                    onClick={() => onRestore(p.id)}
+                    className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
+                  >
+                    <Undo2 className="size-3.5" /> Restore
+                  </button>
+                  {trash?.canPurge ? (
+                    <button
+                      onClick={() => onPurge(p.id, p.name)}
+                      className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                    >
+                      <Trash2 className="size-3.5" /> Delete forever
+                    </button>
+                  ) : (
+                    <span className="text-[0.7rem] uppercase tracking-widest text-ink/40">
+                      Superadmin only
+                    </span>
+                  )}
+                </td>
+              </tr>
+            ))}
+            {(trash?.rows.length ?? 0) === 0 && (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-ink/50">
+                  Trash bin is empty.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-10 border border-ink/10 bg-white p-6">
+        <div className="font-serif text-lg text-ink">New page</div>
+        <p className="text-sm text-ink/60 mt-1">Create a blank page — you can add blocks after.</p>
+        <div className="mt-4 grid gap-3 md:grid-cols-[1fr_1fr_auto]">
+          <label className="block">
+            <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">Name</span>
+            <input
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              className="w-full border border-ink/20 px-3 py-2 text-sm"
+              placeholder="About us"
+            />
+          </label>
+          <label className="block">
+            <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+              Key (URL-safe)
+            </span>
+            <input
+              value={newKey}
+              onChange={(e) => setNewKey(e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, ""))}
+              className="w-full border border-ink/20 px-3 py-2 text-sm font-mono"
+              placeholder="about-us"
+            />
+          </label>
+          <button
+            disabled={busy || !newKey || !newName}
+            onClick={onCreate}
+            className="inline-flex items-center gap-2 bg-ink text-white px-5 py-2 text-sm disabled:opacity-40 self-end"
+          >
+            <Plus className="size-4" /> Create
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}