@drawnagency/primitives 0.1.49 → 0.1.50

package/src/components/shell/EditorShell.tsx

@@ -3,7 +3,7 @@ import { Fragment, useState, useCallback, useEffect, useRef, useMemo, type React
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import type { LoadedSection } from "../../lib/loader";
 import type { SectionContent } from "../../schemas/sections";
-import type { SiteIndex, SiteConfig } from "../../schemas/site-config";
+import type { SiteIndex, SiteConfig, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 import type { MediaManifest } from "../../media/types";
 import type { QueueItem } from "../../media/queue";
@@ -24,6 +24,7 @@ ensureSectionsRegistered();
 import { BugReportFAB } from "./BugReportFAB";
 import { SectionWrapper } from "../editor/SectionWrapper";
 import { SectionOrderingModal } from "../editor/SectionOrderingModal";
+import { MoveSectionModal } from "../editor/MoveSectionModal";
 import { SectionLayout } from "../sections/SectionLayout";
 import {
   initEditorStore,
@@ -44,8 +45,16 @@ import { useContentLifecycle } from "../../hooks/useContentLifecycle";
 import { useBuildStatus } from "../../hooks/useBuildStatus";
 import { useMediaPipeline } from "../../hooks/useMediaPipeline";
 import { formatTimestamp } from "../../lib/timestamp";
-import { generateNavLinks } from "../../lib/nav";
-import { navChangeEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
+import { generateSiteNav } from "../../lib/nav";
+import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
+import {
+  homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
+  reorderSectionInPage,
+  setHomePage, setPageArchived, setPageFields, setPageAudience, deletePage, addPage, reorderPages,
+  moveSection as moveSectionReducer,
+} from "../../lib/pages";
+import { PagesContext } from "../shared/PagesContext";
+import { PagesModal } from "../editor/PagesModal";
 import { cn } from "../../lib/cn";
 import { UploadRejectionAlert, formatRejections } from "../shared/UploadRejectionAlert";
 import { Button } from "../shared/Button";
@@ -53,7 +62,7 @@ import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { SettingsIcon } from "../shared/icons";
-import { ImageIcon, ListOrderedIcon, X } from "lucide-react";
+import { ImageIcon, ListOrderedIcon, FilesIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
@@ -91,7 +100,7 @@ export default function EditorShell({
 }: Props) {
   const [shellState, setShellState] = useState<ShellState>({ phase: "loading-content" });
   const [sections, setSections] = useState<LoadedSection[]>([]);
-  const [siteIndex, setSiteIndex] = useState<SiteIndex>({ siteId, order: [], sections: {} });
+  const [siteIndex, setSiteIndex] = useState<SiteIndex>({ siteId, pages: [], sections: {} });
   const [audiences, setAudiences] = useState<Audience[]>(initialAudiences);
   const [localChangesExist, setLocalChangesExist] = useState(false);
   const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
@@ -111,10 +120,13 @@ export default function EditorShell({
   const [viewSections, setViewSections] = useState<LoadedSection[] | null>(null);
   const [showRestoreModal, setShowRestoreModal] = useState(false);
   const [showOrderingModal, setShowOrderingModal] = useState(false);
+  const [showPagesModal, setShowPagesModal] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
   const [rejectedUploads, setRejectedUploads] = useState<{ name: string; reason: "size" | "type" }[]>([]);
+  const [activePageId, setActivePageId] = useState<string | null>(null);
+  const [movingSectionId, setMovingSectionId] = useState<string | null>(null);
 
-  const siteIndexRef = useRef<SiteIndex>({ siteId, order: [], sections: {} });
+  const siteIndexRef = useRef<SiteIndex>({ siteId, pages: [], sections: {} });
   // Ids of sections that exist on the remote (loaded from server, or persisted by
   // a prior save). Used so deleting a section that was only ever added locally
   // doesn't enqueue a GitHub file deletion for a path that was never committed.
@@ -125,6 +137,51 @@ export default function EditorShell({
 
   const persistence = useEditorPersistence(siteIndexRef);
 
+  const sectionsById = useMemo(() => {
+    const map: Record<string, LoadedSection> = {};
+    for (const s of sections) map[s.section.id] = s;
+    return map;
+  }, [sections]);
+
+  const activePage = activePageId ? pageById(siteIndex, activePageId) : null;
+  const resolvedActivePage = activePage ?? (siteIndex.pages.length ? homePage(siteIndex) : null);
+
+  const activeSections = useMemo(() => {
+    if (!resolvedActivePage) return [] as LoadedSection[];
+    return resolvedActivePage.order.map((id) => sectionsById[id]).filter((s): s is LoadedSection => !!s);
+  }, [resolvedActivePage, sectionsById]);
+
+  const pageAudiences = useMemo(() => {
+    if (!resolvedActivePage || resolvedActivePage.access.length === 0) return audiences;
+    return audiences.filter((a) => resolvedActivePage.access.includes(a.name));
+  }, [resolvedActivePage, audiences]);
+
+  const getPageHeadings = useCallback(
+    (pageId: string) => {
+      const page = pageById(siteIndex, pageId);
+      if (!page) return [] as { id: string; label: string }[];
+      // Offer nav-eligible headings only (spec §6: "the same nav-eligible
+      // headings") — skip excludeFromNav, matching generateNavLinks. Note: link
+      // *resolution* (headingById in buildViewerPage) is intentionally lenient and
+      // resolves any heading's anchor, so a stored link still works if the heading
+      // is later marked excludeFromNav.
+      return page.order
+        .map((id) => sectionsById[id])
+        .filter((s): s is LoadedSection => {
+          if (!s) return false;
+          const content = s.section.content as { heading?: string; excludeFromNav?: boolean };
+          return !!getSection(s.section.type)?.navRole && !!content.heading && !content.excludeFromNav;
+        })
+        .map((s) => ({ id: s.section.id, label: (s.section.content as { heading?: string }).heading! }));
+    },
+    [siteIndex, sectionsById],
+  );
+
+  const pagesContextValue = useMemo(
+    () => ({ pages: siteIndex.pages.map((p) => ({ id: p.id, title: pageDisplayTitle(p.title) })), getPageHeadings }),
+    [siteIndex.pages, getPageHeadings],
+  );
+
   const mediaPipeline = useMediaPipeline({
     siteConfig,
     mediaManifest,
@@ -152,7 +209,7 @@ export default function EditorShell({
       setDeletedSections(new Set());
       setLocalChangesExist(false);
       // Everything in the index now exists remotely (it was just saved).
-      remoteSectionIdsRef.current = new Set(siteIndexRef.current.order);
+      remoteSectionIdsRef.current = new Set(siteIndexRef.current.pages.flatMap((p) => p.order));
     },
     mediaManifest,
     manifestDirty: mediaPipeline.manifestDirty,
@@ -202,11 +259,42 @@ export default function EditorShell({
     hasLocalChanges: localChangesExist,
   });
 
+  // Push the current SiteNav (active page + its headings) to the Navigation island.
   useEffect(() => {
-    if (sections.length === 0) return;
-    const navLinks = generateNavLinks(sections);
-    navChangeEvent.dispatch(navLinks);
-  }, [sections]);
+    if (!resolvedActivePage) return;
+    const nav = generateSiteNav({
+      index: siteIndex, activeSections, activePageId: resolvedActivePage.id, mode: "editor", audience: null,
+    });
+    siteNavChangeEvent.dispatch(nav);
+  }, [siteIndex, activeSections, resolvedActivePage]);
+
+  const goToPage = useCallback((pageId: string) => {
+    const page = pageById(siteIndexRef.current, pageId);
+    if (!page) return;
+    setActivePageId(pageId);
+    if (typeof window !== "undefined") {
+      const path = page.slug === "" ? "/edit" : `/edit/${page.slug}`;
+      if (window.location.pathname !== path) window.history.pushState({ pageId }, "", path);
+    }
+  }, []);
+
+  // Nav island → shell page selection.
+  useEffect(() => pageSelectEvent.listen((id) => goToPage(id)), [goToPage]);
+
+  // Back/forward maps the URL back to the active page (no reload).
+  useEffect(() => {
+    const onPop = (e: PopStateEvent) => {
+      const statePageId = e.state?.pageId as string | undefined;
+      const slug = window.location.pathname.replace(/^\/edit\/?/, "").replace(/\/+$/, "");
+      const page =
+        (statePageId ? pageById(siteIndexRef.current, statePageId) : undefined) ??
+        pageBySlug(siteIndexRef.current, slug) ??
+        homePage(siteIndexRef.current);
+      setActivePageId(page.id);
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, []);
 
   const applySiteConfigPreview = useCallback((config: SiteConfig) => {
     const root = document.documentElement;
@@ -289,7 +377,19 @@ export default function EditorShell({
       if (cancelled) return;
       setSections(loadedSections);
       setSiteIndex(loadedIndex);
-      remoteSectionIdsRef.current = new Set(loadedIndex.order);
+      const statePageId = typeof window !== "undefined" ? (window.history.state?.pageId as string | undefined) : undefined;
+      const initialSlug = typeof window !== "undefined"
+        ? window.location.pathname.replace(/^\/edit\/?/, "").replace(/\/+$/, "")
+        : "";
+      // Prefer the page id stashed in history.state (survives in-session reloads
+      // and back/forward across unsaved slug renames); fall back to slug→page,
+      // then home. A hard reload of an unsaved-renamed slug resolves to home.
+      const initialPage =
+        (statePageId ? pageById(loadedIndex, statePageId) : undefined) ??
+        pageBySlug(loadedIndex, initialSlug) ??
+        homePage(loadedIndex);
+      setActivePageId(initialPage.id);
+      remoteSectionIdsRef.current = new Set(loadedIndex.pages.flatMap((p) => p.order));
       setSiteConfig(loadedConfig);
       setMediaManifest(loadedManifest);
       siteIndexRef.current = loadedIndex;
@@ -336,7 +436,7 @@ export default function EditorShell({
     if (restored.siteIndex) {
       const restoredIndex = restored.siteIndex;
       setSections(() =>
-        restoredIndex.order.map((id) => {
+        restoredIndex.pages.flatMap((p) => p.order).map((id) => {
           const restoredContent = restored.sections[id];
           const existing = sections.find((s) => s.section.id === id);
           if (restoredContent) {
@@ -356,7 +456,7 @@ export default function EditorShell({
       // restored index was deleted locally before this reload. The deletion intent
       // isn't persisted directly, so reconstruct it here — otherwise the section's
       // GitHub file would be orphaned (index omits it, but it's never deleted).
-      const restoredIds = new Set(restoredIndex.order);
+      const restoredIds = new Set(restoredIndex.pages.flatMap((p) => p.order));
       const rediscoveredDeletions = new Set(
         [...remoteSectionIdsRef.current].filter((id) => !restoredIds.has(id)),
       );
@@ -404,7 +504,7 @@ export default function EditorShell({
       setSections(cached.sections);
       setSiteIndex(cached.index);
       siteIndexRef.current = cached.index;
-      remoteSectionIdsRef.current = new Set(cached.index.order);
+      remoteSectionIdsRef.current = new Set(cached.index.pages.flatMap((p) => p.order));
       const parsed = SiteConfigSchema.safeParse(cached.siteConfig);
       if (parsed.success) {
         setSiteConfig(parsed.data);
@@ -443,39 +543,21 @@ export default function EditorShell({
   const onAddSection = useCallback(
     (insertIndex: number, type: string) => {
       const definition = getSection(type);
-      if (!definition) return;
-
+      if (!definition || !resolvedActivePage) return;
       const id = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
-        ? crypto.randomUUID()
-        : `_id_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+        ? crypto.randomUUID() : `_id_${Date.now()}_${Math.random().toString(36).slice(2)}`;
       const content = definition.defaults() as object;
-      const newSection: LoadedSection = {
-        section: { id, ...content } as LoadedSection["section"],
-        meta: { type, status: "draft", access: ["internal"] },
-      };
-
-      setSections((prev) => {
-        const next = [...prev];
-        next.splice(insertIndex, 0, newSection);
-        return next;
-      });
-
-      setSiteIndex((prev) => {
-        const newOrder = [...prev.order];
-        newOrder.splice(insertIndex, 0, id);
-        return {
-          ...prev,
-          order: newOrder,
-          sections: { ...prev.sections, [id]: { type, status: "draft", access: ["internal"] } },
-        };
-      });
+      const meta = { type, status: "draft" as const, access: [] as string[] };
+      const newSection: LoadedSection = { section: { id, ...content } as LoadedSection["section"], meta };
 
+      setSections((prev) => [...prev, newSection]);
+      setSiteIndex((prev) => addSectionToPage(prev, resolvedActivePage.id, id, meta, insertIndex));
       persistence.markSectionDirty(id, content as SectionContent);
       persistence.markIndexDirty();
       setLocalChangesExist(true);
       setDirtySectionIds((prev) => new Set(prev).add(id));
     },
-    [persistence],
+    [persistence, resolvedActivePage],
   );
 
   // Runs after the confirmation modal is accepted. Removes the section from the
@@ -484,15 +566,7 @@ export default function EditorShell({
   const performDeleteSection = useCallback(
     (sectionId: string) => {
       setSections((prev) => prev.filter((loaded) => loaded.section.id !== sectionId));
-      setSiteIndex((prev) => {
-        const nextSections = { ...prev.sections };
-        delete nextSections[sectionId];
-        return {
-          ...prev,
-          order: prev.order.filter((id) => id !== sectionId),
-          sections: nextSections,
-        };
-      });
+      setSiteIndex((prev) => removeSectionFromPages(prev, sectionId));
       // Only schedule a GitHub file deletion if the section exists remotely. A
       // section that was added locally and never saved has no committed file, so
       // sending a deletion for it would target a non-existent path.
@@ -517,25 +591,77 @@ export default function EditorShell({
 
   const onReorderSections = useCallback(
     (fromIndex: number, toIndex: number) => {
-      setSections((prev) => {
-        const next = [...prev];
-        const [moved] = next.splice(fromIndex, 1);
-        next.splice(toIndex, 0, moved);
-        return next;
-      });
-      setSiteIndex((prev) => {
-        const newOrder = [...prev.order];
-        const [movedId] = newOrder.splice(fromIndex, 1);
-        newOrder.splice(toIndex, 0, movedId);
-        return { ...prev, order: newOrder };
-      });
-
+      if (!resolvedActivePage) return;
+      setSiteIndex((prev) => reorderSectionInPage(prev, resolvedActivePage.id, fromIndex, toIndex));
       persistence.markIndexDirty();
       setLocalChangesExist(true);
     },
-    [persistence],
+    [persistence, resolvedActivePage],
   );
 
+  const handleMoveSection = useCallback((sectionId: string, destPageId: string, position: "top" | "bottom") => {
+    const next = moveSectionReducer(siteIndexRef.current, sectionId, destPageId, position);
+    setSiteIndex(next);
+    const meta = next.sections[sectionId];
+    if (meta) setSections((prev) => prev.map((s) => (s.section.id === sectionId ? { ...s, meta } : s)));
+    persistence.markIndexDirty();
+    setLocalChangesExist(true);
+    setMovingSectionId(null);
+  }, [persistence]);
+
+  const handleAddPage = useCallback(() => {
+    const id = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `page_${Date.now()}`;
+    setSiteIndex((prev) => addPage(prev, id));
+    persistence.markIndexDirty();
+    setLocalChangesExist(true);
+    return id;
+  }, [persistence]);
+
+  const handleReorderPages = useCallback((from: number, to: number) => {
+    setSiteIndex((prev) => reorderPages(prev, from, to));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleSetHome = useCallback((id: string) => {
+    setSiteIndex((prev) => setHomePage(prev, id));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleSetArchived = useCallback((id: string, archived: boolean) => {
+    setSiteIndex((prev) => setPageArchived(prev, id, archived));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleSetPageFields = useCallback((id: string, patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => {
+    setSiteIndex((prev) => setPageFields(prev, id, patch));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleSetPageAudience = useCallback((id: string, access: string[]) => {
+    const { index: next, resetSectionIds } = setPageAudience(siteIndexRef.current, id, access);
+    setSiteIndex(next);
+    if (resetSectionIds.length > 0) {
+      setSections((prev) => prev.map((s) =>
+        resetSectionIds.includes(s.section.id) ? { ...s, meta: { ...s.meta, access: [] } } : s));
+    }
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleDeletePage = useCallback((id: string) => {
+    const { index: next, removedSectionIds } = deletePage(siteIndexRef.current, id);
+    setSiteIndex(next);
+    setSections((prev) => prev.filter((s) => !removedSectionIds.includes(s.section.id)));
+    for (const sid of removedSectionIds) {
+      if (remoteSectionIdsRef.current.has(sid)) setDeletedSections((prev) => new Set(prev).add(sid));
+      persistence.removeSection(sid);
+    }
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+    if (resolvedActivePage?.id === id) {
+      const home = next.pages.find((p) => p.isHome);
+      if (home) goToPage(home.id);
+    }
+  }, [persistence, resolvedActivePage, goToPage]);
+
   const onAccessChange = useCallback(
     (sectionId: string, access: string[]) => {
       setSections((prev) =>
@@ -651,6 +777,7 @@ export default function EditorShell({
   }
 
   return (
+    <PagesContext.Provider value={pagesContextValue}>
     <EditorProvider>
       <ViewBranchWatcher
         setViewSections={setViewSections}
@@ -687,6 +814,7 @@ export default function EditorShell({
             onBuildDismiss={buildStatus.dismiss}
             onRestoreClick={() => setShowRestoreModal(true)}
             onOrderingClick={() => setShowOrderingModal(true)}
+            onPagesClick={() => setShowPagesModal(true)}
           />
 
           <BugReportFAB />
@@ -700,16 +828,22 @@ export default function EditorShell({
             </div>
           )}
 
-          <HistoryOrEditorContent sections={sections}>
+          <HistoryOrEditorContent
+            index={siteIndex}
+            activeSections={activeSections}
+            activePageId={resolvedActivePage?.id ?? null}
+          >
             <EditorContent
-              sections={sections}
-              audiences={audiences}
+              sections={activeSections}
+              activePageSectionIds={resolvedActivePage?.order ?? []}
+              audiences={pageAudiences}
               dirtySectionIds={dirtySectionIds}
               isPublishing={publishAction !== "idle"}
               onSectionChange={onSectionChange}
               onAddSection={onAddSection}
               onDeleteSection={setPendingDeleteSectionId}
               onReorderSections={onReorderSections}
+              onMoveSection={siteIndex.pages.length > 1 ? setMovingSectionId : undefined}
               onAccessChange={onAccessChange}
               onStatusChange={onStatusChange}
               mainIndex={mainIndex}
@@ -798,11 +932,38 @@ export default function EditorShell({
             size="settings"
           >
             <SectionOrderingModal
-              sections={sections}
+              sections={activeSections}
               mediaManifest={mediaManifest}
               onReorder={onReorderSections}
             />
           </EditorModal>
+          <EditorModal isOpen={showPagesModal} onClose={() => setShowPagesModal(false)} title="Pages" size="settings">
+            <PagesModal
+              index={siteIndex}
+              audiences={audiences}
+              onReorder={handleReorderPages}
+              onAddPage={handleAddPage}
+              onSetHome={handleSetHome}
+              onSetArchived={handleSetArchived}
+              onSetFields={handleSetPageFields}
+              onSetAudience={handleSetPageAudience}
+              onConfirmDelete={handleDeletePage}
+              onNavigate={(id) => {
+                goToPage(id);
+                setShowPagesModal(false);
+              }}
+            />
+          </EditorModal>
+          <EditorModal isOpen={movingSectionId !== null} onClose={() => setMovingSectionId(null)} title="Move to page">
+            {movingSectionId && resolvedActivePage && (
+              <MoveSectionModal
+                pages={siteIndex.pages.map((p) => ({ id: p.id, title: pageDisplayTitle(p.title) }))}
+                currentPageId={resolvedActivePage.id}
+                onMove={(destId, position) => handleMoveSection(movingSectionId, destId, position)}
+                onCancel={() => setMovingSectionId(null)}
+              />
+            )}
+          </EditorModal>
           <RestoreHandler
             showRestoreModal={showRestoreModal}
             setShowRestoreModal={setShowRestoreModal}
@@ -813,6 +974,7 @@ export default function EditorShell({
         </MediaLibraryContext.Provider>
       </EditorModalProvider>
     </EditorProvider>
+    </PagesContext.Provider>
   );
 }
 
@@ -858,8 +1020,9 @@ function HistoryWatcher() {
           index: data.index,
           siteConfig: data.siteConfig,
         });
-        const navLinks = generateNavLinks(data.sections);
-        navChangeEvent.dispatch(navLinks);
+        siteNavChangeEvent.dispatch(
+          generateSiteNav({ index: data.index, activeSections: [], activePageId: null, mode: "editor", audience: null }),
+        );
       } catch (err) {
         console.error("Failed to load historical content:", err);
       }
@@ -870,7 +1033,17 @@ function HistoryWatcher() {
   return null;
 }
 
-function HistoryOrEditorContent({ children, sections }: { children: ReactNode; sections: LoadedSection[] }) {
+function HistoryOrEditorContent({
+  children,
+  index,
+  activeSections,
+  activePageId,
+}: {
+  children: ReactNode;
+  index: SiteIndex;
+  activeSections: LoadedSection[];
+  activePageId: string | null;
+}) {
   const { historyState } = useEditorContext();
   const wasInHistory = useRef(false);
 
@@ -879,12 +1052,13 @@ function HistoryOrEditorContent({ children, sections }: { children: ReactNode; s
       wasInHistory.current = true;
     } else if (wasInHistory.current) {
       wasInHistory.current = false;
-      if (sections.length > 0) {
-        const navLinks = generateNavLinks(sections);
-        navChangeEvent.dispatch(navLinks);
+      if (index.pages.length > 0) {
+        siteNavChangeEvent.dispatch(
+          generateSiteNav({ index, activeSections, activePageId, mode: "editor", audience: null }),
+        );
       }
     }
-  }, [historyState, sections]);
+  }, [historyState, index, activeSections, activePageId]);
 
   if (historyState) {
     return <ViewRenderer sections={historyState.sections} />;
@@ -923,6 +1097,7 @@ function RestoreHandler({
 
 function EditorContent({
   sections,
+  activePageSectionIds,
   audiences,
   dirtySectionIds,
   isPublishing,
@@ -930,6 +1105,7 @@ function EditorContent({
   onAddSection,
   onDeleteSection,
   onReorderSections,
+  onMoveSection,
   onAccessChange,
   onStatusChange,
   mainIndex,
@@ -937,6 +1113,7 @@ function EditorContent({
   viewSections,
 }: {
   sections: LoadedSection[];
+  activePageSectionIds: string[];
   audiences: Audience[];
   dirtySectionIds: Set<string>;
   isPublishing: boolean;
@@ -944,6 +1121,7 @@ function EditorContent({
   onAddSection: (insertIndex: number, type: string) => void;
   onDeleteSection: (sectionId: string) => void;
   onReorderSections: (fromIndex: number, toIndex: number) => void;
+  onMoveSection?: (sectionId: string) => void;
   onAccessChange: (sectionId: string, access: string[]) => void;
   onStatusChange: (sectionId: string, status: "draft" | "live" | "archived") => void;
   mainIndex: SiteIndex | null;
@@ -967,10 +1145,13 @@ function EditorContent({
 
   const editingEnabled = isEditMode && !isPublishing;
 
-  // In view mode, render viewSections (fetched from the selected branch).
-  // When viewBranch is "live", additionally filter to only live sections.
+  // View mode: render the active page's sections from the fetched branch, in page
+  // order (Live additionally filters to status === "live"). Edit mode: the active
+  // page's in-memory sections (the `sections` prop is already `activeSections`).
   const displaySections = !isEditMode && viewSections !== null
-    ? (viewBranch === "live" ? viewSections.filter((s) => s.meta.status === "live") : viewSections)
+    ? activePageSectionIds
+        .map((id) => viewSections.find((s) => s.section.id === id))
+        .filter((s): s is LoadedSection => !!s && (viewBranch !== "live" || s.meta.status === "live"))
     : sections;
 
   useEffect(() => {
@@ -1052,6 +1233,7 @@ function EditorContent({
                     }
                   } : undefined}
                   onReorder={editingEnabled ? onReorderSections : undefined}
+                  onMoveSection={editingEnabled && onMoveSection ? () => onMoveSection(section.id) : undefined}
                   onRequestInsert={editingEnabled ? (i) => setPendingInsertIndex(i) : undefined}
                   onDelete={editingEnabled ? () => onDeleteSection(section.id) : undefined}
                 >
@@ -1069,7 +1251,11 @@ function EditorContent({
         );
       })}
 
-      {editingEnabled && pendingInsertIndex === displaySections.length && (
+      {/* Trailing selector: shown when an insert was requested after the last
+          section, or always on an empty page — an empty page has no section
+          chrome to insert from, so the selector IS its default state (not
+          dismissible; there is nothing behind it). */}
+      {editingEnabled && (displaySections.length === 0 || pendingInsertIndex === displaySections.length) && (
         <SectionSkeleton
           types={typeOptions}
           onSelect={(type) => {
@@ -1197,6 +1383,7 @@ function EditorToolbar({
   onBuildDismiss,
   onRestoreClick,
   onOrderingClick,
+  onPagesClick,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -1214,6 +1401,7 @@ function EditorToolbar({
   onBuildDismiss: () => void;
   onRestoreClick: () => void;
   onOrderingClick: () => void;
+  onPagesClick: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState } = useEditorContext();
 
@@ -1278,6 +1466,13 @@ function EditorToolbar({
             </div>
             <div className="flex items-center justify-end gap-2">
               <ProcessingIndicator items={processingItems} />
+              <IconButton
+                icon={<FilesIcon size={16} />}
+                label="Pages"
+                size="md"
+                onClick={onPagesClick}
+                className="border border-base-200 bg-base-accent"
+              />
               <IconButton
                 icon={<ListOrderedIcon size={16} />}
                 label="Reorder sections"

package/src/hooks/useEditorPublish.ts

@@ -158,7 +158,7 @@ export function useEditorPublish({
       }
       siteIndex = {
         ...siteIndex,
-        order: siteIndex.order.filter((id) => !deleteSet.has(id)),
+        pages: siteIndex.pages.map((p) => ({ ...p, order: p.order.filter((id) => !deleteSet.has(id)) })),
         sections: filteredSections,
       };
     }

package/src/lib/dexie.ts

@@ -1,6 +1,6 @@
 import Dexie from "dexie";
 import type { SectionContent } from "../schemas/sections";
-import type { SiteIndex, SectionMeta, SiteConfig } from "../schemas/site-config";
+import type { SiteIndex, SectionMeta, SiteConfig, Page } from "../schemas/site-config";
 import type { LoadedSection } from "./loader";
 import type { MediaManifest, MediaItem } from "../media/types";
 
@@ -13,7 +13,7 @@ interface SectionRow {
 
 interface SiteIndexRow {
   key: string;
-  order: string[];
+  pages: Page[];
   sections: Record<string, SectionMeta>;
   deletedSections: string[];
   updatedAt: string;
@@ -123,6 +123,19 @@ class EditorDatabase extends Dexie {
     }).upgrade((tx) => {
       return tx.table("pendingMedia").clear();
     });
+    this.version(7).stores({
+      sections: "sectionId",
+      siteIndex: "key",
+      meta: "key",
+      siteConfig: "key",
+      contentCache: "key",
+      mediaManifest: "key",
+      pendingMedia: "id",
+      pendingMediaDeletions: "id",
+    }).upgrade(async (tx) => {
+      await tx.table("siteIndex").clear();
+      await tx.table("contentCache").clear();
+    });
   }
 }
 
@@ -173,7 +186,7 @@ export async function restoreLocalChanges(): Promise<{
     const siteId = metaRow?.siteId ?? "";
     return {
       sections,
-      siteIndex: { siteId, order: indexRow.order, sections: indexRow.sections },
+      siteIndex: { siteId, pages: indexRow.pages, sections: indexRow.sections },
       siteConfig: configRow?.config,
       deletedSections: indexRow.deletedSections ?? [],
     };
@@ -200,7 +213,7 @@ export async function persistSiteIndex(index: SiteIndex, deletedSections: string
   await database.transaction("rw", [database.siteIndex, database.meta], async () => {
     await database.siteIndex.put({
       key: "current",
-      order: index.order,
+      pages: index.pages,
       sections: index.sections,
       deletedSections,
       updatedAt: now,
@@ -323,7 +336,7 @@ export async function persistAll(
       if (siteIndex) {
         await database.siteIndex.put({
           key: "current",
-          order: siteIndex.order,
+          pages: siteIndex.pages,
           sections: siteIndex.sections,
           deletedSections: [],
           updatedAt: now,