@drawnagency/primitives 0.1.96 → 0.1.98

package/src/components/editor/PagesModal.tsx

@@ -11,8 +11,10 @@ import { Input } from "../shared/Input";
 import { Toggle } from "../shared/Toggle";
 import { AudienceIndicator } from "./AudienceIndicator";
 import { DragHandle } from "./DragHandle";
-import { useSortableRow } from "../../hooks/useSortableRow";
+import { useSortableNavRow } from "../../hooks/useSortableNavRow";
 import { DropEdgeIndicator } from "./DropEdgeIndicator";
+import { navEntries, type NavLocation } from "../../lib/nav-tree";
+import { NavGroupRow } from "./NavGroupRow";
 import { slugifyPageSlug, uniquePageSlug, pageDisplayTitle } from "../../lib/pages";
 import { pluralize } from "../../lib/text";
 import { RESERVED_SLUGS } from "../../schemas/site-config";
@@ -21,9 +23,14 @@ import { cn } from "../../lib/cn";
 export interface PagesModalProps {
   index: SiteIndex;
   audiences: Audience[];
-  onReorder: (fromIndex: number, toIndex: number) => void;
   /** Creates the page and returns its id so the modal can expand the new row. */
   onAddPage: () => string;
+  /** Creates the group and returns its id so the modal can open its settings. */
+  onAddGroup: () => string;
+  onRenameGroup: (groupId: string, label: string) => void;
+  onSetGroupStartCollapsed: (groupId: string, v: boolean) => void;
+  onDeleteGroup: (groupId: string) => void;
+  onMoveNavEntry: (from: NavLocation, to: NavLocation) => void;
   onSetHome: (pageId: string) => void;
   onSetArchived: (pageId: string, archived: boolean) => void;
   onSetFields: (pageId: string, patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
@@ -39,13 +46,20 @@ export function PagesModal(props: PagesModalProps) {
   // The page created via "+ Add page" this session: its title gets auto-focus and
   // its slug follows the title until the user edits the slug by hand.
   const [newPageId, setNewPageId] = useState<string | null>(null);
+  // The group created via "+ Add group" this session: its settings panel opens
+  // with the label input focused, mirroring newPageId for pages.
+  const [newGroupId, setNewGroupId] = useState<string | null>(null);
+  // The group currently being dragged. Its members unmount for the duration, so
+  // the drag reads as moving the whole block rather than just the header.
+  // Groups are otherwise always expanded — there is no editor-side collapse, so
+  // no collapsed-group rescue (spring-load, reveal-on-drop) is needed.
+  const [draggingGroupId, setDraggingGroupId] = useState<string | null>(null);
 
   if (deletingId) {
     const page = index.pages.find((p) => p.id === deletingId);
     if (page) return <DeleteConfirm page={page} onCancel={() => setDeletingId(null)} onConfirm={() => { props.onConfirmDelete(page.id); setDeletingId(null); }} />;
   }
 
-  const live = index.pages.filter((p) => p.status === "live");
   const archived = index.pages.filter((p) => p.status === "archived");
 
   // Collapsing the new row — or expanding any other — ends its "new page"
@@ -56,7 +70,9 @@ export function PagesModal(props: PagesModalProps) {
     if (newPageId !== null && next !== newPageId) setNewPageId(null);
   };
 
-  const renderPage = (page: Page, dragIndex?: number) => (
+  // `location` is optional: the archived flat block renders inert rows with no
+  // nav position, exactly as it did when draggability keyed off `dragIndex`.
+  const renderPage = (page: Page, location?: NavLocation, entryIndex?: number) => (
     <PageRow
       key={page.id}
       page={page}
@@ -64,8 +80,9 @@ export function PagesModal(props: PagesModalProps) {
       expanded={expandedId === page.id}
       isNew={newPageId === page.id}
       otherSlugs={index.pages.filter((p) => p.id !== page.id).map((p) => p.slug)}
-      dragIndex={dragIndex}
-      onReorder={props.onReorder}
+      location={location}
+      entryIndex={entryIndex}
+      onMove={props.onMoveNavEntry}
       onToggleExpand={() => toggleExpand(page.id)}
       onSetHome={() => props.onSetHome(page.id)}
       onSetArchived={(v) => {
@@ -86,20 +103,78 @@ export function PagesModal(props: PagesModalProps) {
   return (
     <div className="flex flex-col gap-2 overflow-y-auto">
       <div className="flex flex-col gap-2">
-        {live.map((page) => renderPage(page, index.pages.indexOf(page)))}
+        {navEntries(index).map((entry, entryIndex) => {
+          if (entry.kind === "page") {
+            const page = index.pages.find((p) => p.id === entry.pageId);
+            if (!page || page.status !== "live") return null;
+            return renderPage(page, { groupId: null, index: entryIndex }, entryIndex);
+          }
+
+          // CRITICAL: carry the ORIGINAL pageIds index (`pi`) through the filter.
+          // moveNavEntry splices `group.pageIds`, which retains ARCHIVED member
+          // ids — archiving only flips `status`, and reconcileNav keeps any id
+          // that still exists in pages[]. Renumbering members 0..n over the
+          // live-filtered list would make the visible row for a member claim the
+          // archived member's slot, so dragging it would move the wrong page.
+          const members = entry.pageIds
+            .map((id, pi) => ({ page: index.pages.find((p) => p.id === id), pi }))
+            .filter((m): m is { page: Page; pi: number } => !!m.page && m.page.status === "live");
+          const expanded = draggingGroupId !== entry.id;
+
+          return (
+            <div key={entry.id} className="flex flex-col gap-2">
+              <NavGroupRow
+                group={entry}
+                entryIndex={entryIndex}
+                memberCount={members.length}
+                autoOpenSettings={newGroupId === entry.id}
+                onRename={(label) => props.onRenameGroup(entry.id, label)}
+                onSetStartCollapsed={(v) => props.onSetGroupStartCollapsed(entry.id, v)}
+                onDelete={() => props.onDeleteGroup(entry.id)}
+                onMove={props.onMoveNavEntry}
+                onDragStateChange={(dragging) => setDraggingGroupId(dragging ? entry.id : null)}
+              />
+              {expanded && (
+                <div data-testid={`nav-group-members-${entry.id}`} className="ml-6 flex flex-col gap-2">
+                  {members.length === 0
+                    ? <EmptyGroupDropzone groupId={entry.id} onMove={props.onMoveNavEntry} />
+                    : members.map(({ page, pi }) => renderPage(page, { groupId: entry.id, index: pi }, entryIndex))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* The only target for "after the last entry" when that entry is a group:
+          every edge of a trailing group resolves to a position inside it. */}
+      <TailDropzone entryCount={navEntries(index).length} onMove={props.onMoveNavEntry} />
+
+      <div className="mt-2 flex gap-2">
+        <Button
+          variant="secondary"
+          size="md"
+          onClick={() => {
+            const id = props.onAddPage();
+            setNewPageId(id);
+            setExpandedId(id);
+          }}
+        >
+          + Add page
+        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          onClick={() => {
+            // Keep the returned id — it drives autoOpenSettings so the new
+            // group lands with its label input focused, mirroring + Add page.
+            const id = props.onAddGroup();
+            setNewGroupId(id);
+          }}
+        >
+          + Add group
+        </Button>
       </div>
-      <Button
-        variant="secondary"
-        size="md"
-        onClick={() => {
-          const id = props.onAddPage();
-          setNewPageId(id);
-          setExpandedId(id);
-        }}
-        className="mt-2 self-start"
-      >
-        + Add page
-      </Button>
       {archived.length > 0 && (
         <div className="mt-4 border-t border-base-200 pt-3">
           <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-base-contrast/70">Archive</p>
@@ -111,23 +186,22 @@ export function PagesModal(props: PagesModalProps) {
 }
 
 function PageRow({
-  page, audiences, expanded, isNew, otherSlugs, dragIndex, onReorder, onToggleExpand, onSetHome, onSetArchived, onSetFields, onSetAudience, onSetDocument, onRequestDelete,
+  page, audiences, expanded, isNew, otherSlugs, location, entryIndex, onMove, onToggleExpand, onSetHome, onSetArchived, onSetFields, onSetAudience, onSetDocument, onRequestDelete,
 }: {
   page: Page; audiences: Audience[]; expanded: boolean;
   isNew: boolean; otherSlugs: string[];
-  dragIndex?: number; onReorder: (fromIndex: number, toIndex: number) => void;
+  location?: NavLocation; entryIndex?: number;
+  onMove: (from: NavLocation, to: NavLocation) => void;
   onToggleExpand: () => void; onSetHome: () => void; onSetArchived: (v: boolean) => void;
   onSetFields: (patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
   onSetAudience: (access: string[]) => void;
   onSetDocument: (patch: Partial<DocumentOptions>) => void;
   onRequestDelete: () => void;
 }) {
-  const draggable = dragIndex !== undefined;
-  const { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
-    index: dragIndex ?? 0,
-    dragType: "page-ordering-row",
-    onReorder,
-    enabled: draggable,
+  const draggable = location !== undefined;
+  const { rowRef, handleRef, isDragging, closestEdge } = useSortableNavRow<HTMLDivElement, HTMLButtonElement>({
+    row: { kind: "page", pageId: page.id, groupId: location?.groupId ?? null, index: location?.index ?? 0 },
+    entryIndex: entryIndex ?? 0, kind: "page", onMove, enabled: draggable,
   });
 
   // The slug input edits a local draft; only valid values commit to the index,
@@ -205,21 +279,31 @@ function PageRow({
   return (
     <div
       ref={rowRef}
+      // Drag-and-drop has no jsdom coverage (atlaskit does not run there), so the
+      // Playwright pass in e2e/page-groups.spec.ts is its only automated check —
+      // and it needs a row anchor that outlives styling changes. Same reason for
+      // the group, member-list and dropzone testids below.
+      data-testid={`nav-row-page-${page.id}`}
+      data-nav-group={location?.groupId ?? ""}
       className={cn("relative flex items-start gap-1", isDragging && "opacity-50")}
     >
-      <DropEdgeIndicator edge={closestEdge} />
+      <DropEdgeIndicator edge={closestEdge} inset={location?.groupId != null} />
       {draggable && (
         <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
           <DragHandle ref={handleRef} />
         </div>
       )}
       <div className={cn("min-w-0 flex-1 rounded-md border border-base-200 bg-base", isDragging && "outline outline-2 outline-primary/50")}>
+        {/* w-full, not flex-1: the card wrapper is a block, so flex-1 is inert
+            here. A button's `width: auto` is fit-content (form controls size
+            intrinsically), which shrink-wraps the hover target and caret to the
+            text instead of spanning the row. */}
         <button
           type="button"
           aria-label={`Edit settings for ${pageDisplayTitle(page.title)}`}
           aria-expanded={expanded}
           onClick={handleHeaderClick}
-          className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded py-2 pr-3 pl-4 text-left hover:bg-base-accent"
+          className="flex w-full min-w-0 cursor-pointer items-center gap-2 rounded py-2 pr-3 pl-4 text-left hover:bg-base-accent"
         >
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
@@ -319,6 +403,43 @@ function PageRow({
   );
 }
 
+function TailDropzone({ entryCount, onMove }: { entryCount: number; onMove: (from: NavLocation, to: NavLocation) => void }) {
+  const { rowRef, isDropTarget } = useSortableNavRow<HTMLDivElement, HTMLButtonElement>({
+    // entryIndex IS the top-level entry count for a tail row — see
+    // computeNavDropTarget's tail branch.
+    row: { kind: "tail" }, entryIndex: entryCount, kind: "page", onMove,
+  });
+  return (
+    <div
+      ref={rowRef}
+      aria-hidden="true"
+      data-testid="nav-tail-dropzone"
+      className={cn(
+        "h-6 rounded-md border border-dashed transition-colors",
+        isDropTarget ? "border-primary" : "border-transparent",
+      )}
+    />
+  );
+}
+
+function EmptyGroupDropzone({ groupId, onMove }: { groupId: string; onMove: (from: NavLocation, to: NavLocation) => void }) {
+  const { rowRef, isDropTarget } = useSortableNavRow<HTMLDivElement, HTMLButtonElement>({
+    row: { kind: "empty-group", groupId }, entryIndex: 0, kind: "page", onMove,
+  });
+  return (
+    <div
+      ref={rowRef}
+      data-testid={`nav-empty-group-${groupId}`}
+      className={cn(
+        "rounded-md border border-dashed px-3 py-4 text-center text-xs transition-colors",
+        isDropTarget ? "border-primary text-primary" : "border-base-200 text-base-contrast/60",
+      )}
+    >
+      Drag pages here
+    </div>
+  );
+}
+
 function DeleteConfirm({ page, onCancel, onConfirm }: { page: Page; onCancel: () => void; onConfirm: () => void }) {
   const [typed, setTyped] = useState("");
   const n = page.order.length;

package/src/components/shared/Navigation.tsx

@@ -2,7 +2,8 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import { ChevronRight } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
-import type { SiteNav, NavItem } from "../../lib/nav";
+import type { SiteNav, NavItem, GroupNavItem, PageNavItem } from "../../lib/nav";
+import { groupDisplayLabel } from "../../lib/nav-tree";
 import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, editorDirtyEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
 import { formatDate } from "../../lib/timestamp";
@@ -43,6 +44,9 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
   const [isDark, setIsDark] = useState(false);
   const [siteNav, setSiteNav] = useState<SiteNav>(initialNav);
   const [showHistory, setShowHistory] = useState(false);
+  // Keyed by group id for authored groups and by label for the derived editor
+  // buckets ("Hidden from Menu", "Archive"). Generated ids never collide with
+  // those two literals, so one record safely serves both.
   const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({});
   // Anchors the history panel to the "Last updated" block rather than the button
   // inside it: the block's top edge is the divider the panel sits above, and its
@@ -77,8 +81,9 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
 
   // The active page can live in any tier (editors navigate to hidden and
   // archived pages via the Pages modal).
+  const treePages = siteNav.entries.flatMap((e) => (e.kind === "group" ? e.pages : [e]));
   const activePage =
-    [...siteNav.pages, ...siteNav.hidden, ...siteNav.archive].find((p) => p.isActive) ?? null;
+    [...treePages, ...siteNav.hidden, ...siteNav.archive].find((p) => p.isActive) ?? null;
   const headings: NavItem[] = activePage?.headings ?? [];
 
   const parentIds = headings.map((h) => h.href.replace("#", ""));
@@ -178,7 +183,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
   // a same-island handler is supplied; otherwise a real <a> for the viewer.
   const asButton = isEditMode || !!onPageSelect;
 
-  const renderPage = (page: SiteNav["pages"][number]) => (
+  const renderPage = (page: PageNavItem) => (
     <li key={page.id}>
       {asButton ? (
         <button
@@ -201,23 +206,54 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     </li>
   );
 
-  const renderPageGroup = (label: string, pages: SiteNav["pages"]) => {
-    if (pages.length === 0) return null;
-    // Closed by default; auto-open when it holds the active page so the
-    // editor's current location (and its heading tree) stays visible.
-    const isOpen = openGroups[label] ?? pages.some((p) => p.isActive);
+  // The one collapsible-section body, shared by authored groups and the derived
+  // editor buckets so the two can never drift apart visually. Callers supply the
+  // wrapper element, because authored groups are interleaved <li>s inside the
+  // main nav list while the buckets are their own blocks below it.
+  const renderGroupBody = (key: string, label: string, pages: PageNavItem[], defaultOpen: boolean) => {
+    const isOpen = openGroups[key] ?? defaultOpen;
     return (
-      <div className="mx-4 mt-2 border-t border-base-200 pt-2">
+      <>
         <button
           type="button"
           aria-expanded={isOpen}
-          onClick={() => setOpenGroups((g) => ({ ...g, [label]: !isOpen }))}
+          onClick={() => setOpenGroups((g) => ({ ...g, [key]: !isOpen }))}
           className="flex w-full cursor-pointer items-center justify-between rounded-inner px-3 py-1 text-xs font-semibold uppercase tracking-wide text-base-contrast/70 transition-colors hover:text-primary"
         >
-          <span>{`${label} (${pages.length})`}</span>
+          <span>{label}</span>
           <ChevronRight size={14} aria-hidden="true" className={cn("transition-transform", isOpen && "rotate-90")} />
         </button>
         {isOpen && <ul className="space-y-1">{pages.map(renderPage)}</ul>}
+      </>
+    );
+  };
+
+  const renderAuthoredGroup = (group: GroupNavItem) => (
+    // No mx-4: the enclosing list is already padded, unlike the bucket blocks.
+    <li key={group.id} className="mt-2 border-t border-base-200 pt-2">
+      {renderGroupBody(
+        group.id,
+        groupDisplayLabel(group.label),
+        group.pages,
+        // Force-open when the group holds the active page, so the current
+        // location and its heading tree are never hidden behind a collapsed
+        // label. Otherwise the authored startCollapsed default applies.
+        group.pages.some((p) => p.isActive) || !group.startCollapsed,
+      )}
+    </li>
+  );
+
+  // `showCount` is Archive-only: it is the one bucket where how much is in there
+  // is the point. Every other section header — Hidden from Menu and authored
+  // groups alike — reads as a plain label.
+  const renderPageGroup = (label: string, pages: PageNavItem[], showCount = false) => {
+    // Unlike an authored group, an empty bucket is pure noise — there is no
+    // user-created thing to keep on screen.
+    if (pages.length === 0) return null;
+    return (
+      <div className="mx-4 mt-2 border-t border-base-200 pt-2">
+        {/* Closed by default; auto-open when it holds the active page. */}
+        {renderGroupBody(label, showCount ? `${label} (${pages.length})` : label, pages, pages.some((p) => p.isActive))}
       </div>
     );
   };
@@ -251,11 +287,13 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
         </div>
 
         <ul className="space-y-1 px-4 py-2">
-          {siteNav.pages.map(renderPage)}
+          {siteNav.entries.map((entry) =>
+            entry.kind === "group" ? renderAuthoredGroup(entry) : renderPage(entry),
+          )}
         </ul>
 
         {isEditMode && renderPageGroup("Hidden from Menu", siteNav.hidden)}
-        {isEditMode && renderPageGroup("Archive", siteNav.archive)}
+        {isEditMode && renderPageGroup("Archive", siteNav.archive, true)}
 
         <div className="mt-auto">
           {currentDarkMode === "optional" && (

package/src/components/shell/EditorShell.tsx

@@ -18,7 +18,7 @@ import { getMediaProvider } from "../../media";
 // Document mode toggle wiring needs the patch shape it edits (mirrors the same
 // sanctioned import in schemas/site-config.ts and lib/pages.ts).
 import type { DocumentOptions } from "../../document/engine/settings";
-import { SiteConfigSchema, IndexSchema } from "../../schemas/site-config";
+import { SiteConfigSchema } from "../../schemas/site-config";
 import { ensureSanitizer } from "../../lib/sanitize";
 import { resolveChatbotName } from "../../lib/chatbot";
 import { EditorProvider, useEditorContext, type HistoryState } from "./EditorContext";
@@ -75,7 +75,7 @@ import {
   deleteSectionRows,
   preserveEdit,
 } from "../../lib/dexie";
-import { rebaseContent, reconcileRemoteIndex } from "../../collab/rebase";
+import { rebaseContent, applyRemoteIndexUpdate } from "../../collab/rebase";
 import { deriveRecoveryInputs, applyConflictChoices } from "../../collab/recovery";
 import { getCollabProvider } from "../../collab/provider-registry";
 import type { CollabBootstrap, CollabPeer, CollabStatus, SavedMessage, TakeoverMessage } from "../../collab/types";
@@ -89,11 +89,12 @@ import { useBuildStatus } from "../../hooks/useBuildStatus";
 import { useMediaPipeline } from "../../hooks/useMediaPipeline";
 import { formatTimestamp } from "../../lib/timestamp";
 import { generateSiteNav } from "../../lib/nav";
+import { pagesInNavOrder, moveNavEntry, addGroup, renameGroup, setGroupStartCollapsed, deleteGroup, type NavLocation } from "../../lib/nav-tree";
 import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, historyRestoreEvent, historyRestoreFailedEvent, editorDirtyEvent } from "../../lib/events";
 import {
   homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
   reorderSectionInPage, audiencePasses,
-  setHomePage, setPageArchived, setPageFields, setPageAudience, setPageDocument, deletePage, addPage, reorderPages,
+  setHomePage, setPageArchived, setPageFields, setPageAudience, setPageDocument, deletePage, addPage,
   moveSection as moveSectionReducer,
 } from "../../lib/pages";
 import { PagesContext } from "../shared/PagesContext";
@@ -195,6 +196,13 @@ export default function EditorShell({
   const [mediaModalMode, setMediaModalMode] = useState<"select" | "manage">("manage");
   const [mediaSelectCallback, setMediaSelectCallback] = useState<((id: string) => void) | null>(null);
   const [deletedSections, setDeletedSections] = useState<Set<string>>(new Set());
+  // Ref mirror so the debounced Dexie flush can persist the deletion set. Without
+  // it the snapshot records the index minus the deleted sections but not the
+  // INTENT, and the restore path has to re-derive deletions by diffing the stale
+  // snapshot against a fresh remote read — which mistakes anything a third party
+  // (the MCP connector, a peer editor) added since for a local deletion.
+  const deletedSectionsRef = useRef<Set<string>>(deletedSections);
+  useEffect(() => { deletedSectionsRef.current = deletedSections; }, [deletedSections]);
   const [pendingDeleteSectionId, setPendingDeleteSectionId] = useState<string | null>(null);
   const [savedSha, setSavedSha] = useState<string | null>(null);
   const [mainSha, setMainSha] = useState<string | null>(null);
@@ -318,7 +326,7 @@ export default function EditorShell({
     [],
   );
 
-  const persistence = useEditorPersistence(siteIndexRef, { onFlush });
+  const persistence = useEditorPersistence(siteIndexRef, { onFlush, deletedSectionsRef });
 
   const sectionsById = useMemo(() => {
     const map: Record<string, LoadedSection> = {};
@@ -678,8 +686,6 @@ export default function EditorShell({
       // the overlap — don't clobber local structure with the peer's. Durable
       // signal (survives the flush debounce), not isIndexDirty().
       if (persistence.hasUnsavedIndex()) return;
-      const parsed = IndexSchema.safeParse(msg.index);
-      if (!parsed.success) return;
       // Withhold ids our current index doesn't know before applying the peer's:
       // (a) the peer's unsaved ADD — its file isn't on the branch yet, so letting
       // it into siteIndexRef would poison OUR next save with a dangling index ref
@@ -689,7 +695,11 @@ export default function EditorShell({
       // loaded section bodies: a live section whose body the loader skipped
       // (schema/registry miss, depth trip) is still indexed and must survive —
       // guaranteed because we only reach here with no unsaved index work.
-      const pruned = reconcileRemoteIndex(parsed.data, siteIndexRef.current);
+      // Parses, preserves the peer's nav across IndexSchema's key strip, and
+      // prunes — see applyRemoteIndexUpdate. Null means the payload wasn't a
+      // valid index.
+      const pruned = applyRemoteIndexUpdate(msg.index, siteIndexRef.current);
+      if (!pruned) return;
       setSiteIndex(pruned);
       siteIndexRef.current = pruned;
     },
@@ -1086,15 +1096,27 @@ export default function EditorShell({
         }).filter((s): s is LoadedSection => s !== null),
       );
       setSiteIndex(restoredIndex);
-      // Re-derive pending deletions: any remotely-existing section absent from the
-      // 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).
+      // Pending deletions come from the snapshot's own persisted intent, and are
+      // intersected with what the branch still has so an already-applied deletion
+      // can't be replayed.
+      //
+      // They are deliberately NOT re-derived by diffing the restored index against
+      // a fresh remote read. That inference cannot distinguish "this editor deleted
+      // it" from "someone else added it after this snapshot was taken" — every
+      // section the MCP connector or a peer created in the meantime is absent from
+      // the stale local index, so it would be queued for deletion and destroyed by
+      // the next save. Deleting real content is far worse than the failure mode the
+      // re-derivation guarded against (a section's file left orphaned when the
+      // snapshot predates persisted intent, which validate_site reports and
+      // pruneOrphans cleans up).
       const restoredIds = new Set(restoredIndex.pages.flatMap((p) => p.order));
-      const rediscoveredDeletions = new Set(
-        [...remoteSectionIdsRef.current].filter((id) => !restoredIds.has(id)),
+      setDeletedSections(
+        new Set(
+          restored.deletedSections.filter(
+            (id) => remoteSectionIdsRef.current.has(id) && !restoredIds.has(id),
+          ),
+        ),
       );
-      setDeletedSections(rediscoveredDeletions);
       // A restored Dexie siteIndex row IS unsaved structural work from the
       // prior session — prime the durable signal even though no markIndexDirty
       // ran this session.
@@ -1292,8 +1314,31 @@ export default function EditorShell({
     return id;
   }, [persistence]);
 
-  const handleReorderPages = useCallback((from: number, to: number) => {
-    setSiteIndex((prev) => reorderPages(prev, from, to));
+  const handleMoveNavEntry = useCallback((from: NavLocation, to: NavLocation) => {
+    setSiteIndex((prev) => moveNavEntry(prev, from, to));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleAddGroup = useCallback(() => {
+    // Mirror handleAddPage's id scheme, including its non-crypto fallback.
+    const id = typeof crypto !== "undefined" && crypto.randomUUID ? `grp_${crypto.randomUUID()}` : `grp_${Date.now()}`;
+    setSiteIndex((prev) => addGroup(prev, id));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+    return id;
+  }, [persistence]);
+
+  const handleRenameGroup = useCallback((groupId: string, label: string) => {
+    setSiteIndex((prev) => renameGroup(prev, groupId, label));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleSetGroupStartCollapsed = useCallback((groupId: string, v: boolean) => {
+    setSiteIndex((prev) => setGroupStartCollapsed(prev, groupId, v));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleDeleteGroup = useCallback((groupId: string) => {
+    setSiteIndex((prev) => deleteGroup(prev, groupId));
     persistence.markIndexDirty(); setLocalChangesExist(true);
   }, [persistence]);
 
@@ -1826,8 +1871,12 @@ export default function EditorShell({
             <PagesModal
               index={siteIndex}
               audiences={audiences}
-              onReorder={handleReorderPages}
               onAddPage={handleAddPage}
+              onAddGroup={handleAddGroup}
+              onRenameGroup={handleRenameGroup}
+              onSetGroupStartCollapsed={handleSetGroupStartCollapsed}
+              onDeleteGroup={handleDeleteGroup}
+              onMoveNavEntry={handleMoveNavEntry}
               onSetHome={handleSetHome}
               onSetArchived={handleSetArchived}
               onSetFields={handleSetPageFields}
@@ -1839,7 +1888,7 @@ export default function EditorShell({
           <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) }))}
+                pages={pagesInNavOrder(siteIndex).map((p) => ({ id: p.id, title: pageDisplayTitle(p.title) }))}
                 currentPageId={resolvedActivePage.id}
                 onMove={(destId, position) => handleMoveSection(movingSectionId, destId, position)}
                 onCancel={() => setMovingSectionId(null)}

package/src/hooks/useEditorPersistence.ts

@@ -34,6 +34,13 @@ interface PersistenceOptions {
    *  updates + index updates to peers from here. Stored in a ref so its identity
    *  can churn without recreating the debounce machinery. */
   onFlush?: (entries: { sectionId: string; content: SectionContent }[], indexFlushed: boolean) => void;
+  /** Ref mirror of the shell's pending-deletion set, read at flush time and
+   *  persisted alongside the index snapshot. Deletion is INTENT that cannot be
+   *  inferred back from the snapshot: the restore path would otherwise diff the
+   *  stale local index against a fresh remote read and treat sections a third
+   *  party added in the meantime (MCP connector, peer editor) as local
+   *  deletions — then delete them on the next save. */
+  deletedSectionsRef?: React.RefObject<Set<string>>;
 }
 
 export function useEditorPersistence(
@@ -52,6 +59,8 @@ export function useEditorPersistence(
   const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const onFlushRef = useRef(options?.onFlush);
   useEffect(() => { onFlushRef.current = options?.onFlush; });
+  const deletedSectionsRef = useRef(options?.deletedSectionsRef);
+  useEffect(() => { deletedSectionsRef.current = options?.deletedSectionsRef; });
 
   const flushToDexie = useCallback(async () => {
     const s = state.current;
@@ -68,9 +77,14 @@ export function useEditorPersistence(
     s.indexDirty = false;
 
     try {
+      // The deletion set is cumulative in shell state (cleared only on save or
+      // discard), so every flush rewrites the whole current set — a later flush
+      // can never narrow an earlier record.
+      const pendingDeletions = deletedSectionsRef.current?.current;
       await persistAll(
         entries,
         wasIndexDirty ? siteIndexRef.current : undefined,
+        pendingDeletions && pendingDeletions.size > 0 ? [...pendingDeletions] : undefined,
       );
       // Fire only after a successful persist — broadcasting an edit that failed
       // to persist would let peers diverge from what this editor can recover.