@drawnagency/primitives 0.1.95 → 0.1.97

package/src/components/editor/NavGroupRow.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import type { NavGroupEntry } from "../../schemas/nav";
+import type { NavLocation } from "../../lib/nav-tree";
+import { groupDisplayLabel } from "../../lib/nav-tree";
+import { pluralize } from "../../lib/text";
+import { cn } from "../../lib/cn";
+import { Button } from "../shared/Button";
+import { Input } from "../shared/Input";
+import { Toggle } from "../shared/Toggle";
+import { DragHandle } from "./DragHandle";
+import { DropEdgeIndicator } from "./DropEdgeIndicator";
+import { useSortableNavRow } from "../../hooks/useSortableNavRow";
+
+interface Props {
+  group: NavGroupEntry;
+  entryIndex: number;
+  memberCount: number;
+  /** Opens the settings panel on mount. The `+ Add group` flow sets this so a
+   *  brand-new group lands with its label input focused. */
+  autoOpenSettings?: boolean;
+  onRename: (label: string) => void;
+  onSetStartCollapsed: (v: boolean) => void;
+  onDelete: () => void;
+  onMove: (from: NavLocation, to: NavLocation) => void;
+  /** Fires when THIS group starts/stops being dragged, so the modal can collapse
+   *  it for the duration. Without that, its members stay rendered in place and
+   *  the drag reads as moving only the header. */
+  onDragStateChange?: (dragging: boolean) => void;
+}
+
+export function NavGroupRow({
+  group, entryIndex, memberCount, autoOpenSettings = false,
+  onRename, onSetStartCollapsed, onDelete, onMove, onDragStateChange,
+}: Props) {
+  const [settingsOpen, setSettingsOpen] = useState(autoOpenSettings);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+  const [showError, setShowError] = useState(false);
+
+  const { rowRef, handleRef, isDragging, closestEdge } = useSortableNavRow<HTMLDivElement, HTMLButtonElement>({
+    row: { kind: "group", groupId: group.id, index: entryIndex },
+    entryIndex, kind: "group", onMove,
+  });
+
+  // Surface the hook's drag state upward so the modal can collapse this group
+  // while it is the one being dragged.
+  useEffect(() => { onDragStateChange?.(isDragging); }, [isDragging, onDragStateChange]);
+
+  const label = groupDisplayLabel(group.label);
+  const labelError = group.label.trim() === "" ? "Label is required." : null;
+
+  // A blank label is viewer-visible with no URL to disambiguate it, so the
+  // panel refuses to close until one is typed — mirrors PageRow's title guard.
+  const handleHeaderClick = () => {
+    if (settingsOpen && labelError) { setShowError(true); return; }
+    setSettingsOpen((v) => !v);
+    setShowError(false);
+  };
+
+  return (
+    <div ref={rowRef} data-testid={`nav-row-group-${group.id}`} className={cn("relative flex items-start gap-1", isDragging && "opacity-50")}>
+      <DropEdgeIndicator edge={closestEdge} />
+      <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
+        <DragHandle ref={handleRef} />
+      </div>
+      <div className="min-w-0 flex-1 rounded-md border border-base-200 bg-base">
+        <div className="flex items-center">
+          {/* pl-4 matches PageRow's header, so group and page labels align now
+              that no caret occupies the leading slot. */}
+          <button
+            type="button"
+            aria-label={`Group settings for ${label}`}
+            aria-expanded={settingsOpen}
+            onClick={handleHeaderClick}
+            className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 py-2 pr-3 pl-4 text-left hover:bg-base-accent"
+          >
+            <span className={cn("truncate text-sm font-medium text-base-contrast", !group.label && "italic text-base-contrast/60")}>
+              {label}
+            </span>
+            <span className="ml-auto shrink-0 text-xs text-base-contrast/60">{pluralize(memberCount, "page")}</span>
+            <ChevronDown size={16} aria-hidden="true" className={cn("shrink-0 text-base-contrast/50 transition-transform", settingsOpen && "rotate-180")} />
+          </button>
+        </div>
+
+        {settingsOpen && (
+          <div className="flex flex-col gap-3 border-t border-base-200 px-3 py-3">
+            <Input
+              label="Label"
+              value={group.label}
+              placeholder="Group name"
+              autoFocus
+              error={showError && labelError ? labelError : undefined}
+              onChange={onRename}
+            />
+            <div className="flex items-center justify-between gap-4 rounded-inner border border-base-200 px-3 py-2.5">
+              <div className="min-w-0">
+                <div className="text-sm text-base-contrast">Start collapsed</div>
+                <div className="text-xs text-base-contrast/70">Viewers see this group closed until they open it.</div>
+              </div>
+              <Toggle label="Start collapsed" checked={group.startCollapsed} onChange={onSetStartCollapsed} />
+            </div>
+
+            {confirmingDelete ? (
+              <div className="flex flex-col gap-2 rounded-inner border border-base-200 p-3">
+                <p className="text-sm text-base-contrast">
+                  Delete this group? {pluralize(memberCount, "page")} will move to the top level.
+                </p>
+                <div className="flex justify-end gap-2">
+                  <Button variant="secondary" size="sm" onClick={() => setConfirmingDelete(false)}>Cancel</Button>
+                  <Button variant="destructive" size="sm" aria-label="Confirm delete" onClick={onDelete}>Delete</Button>
+                </div>
+              </div>
+            ) : (
+              <Button
+                variant="destructive" size="sm" aria-label="Delete group" className="self-start"
+                onClick={() => (memberCount === 0 ? onDelete() : setConfirmingDelete(true))}
+              >
+                Delete group
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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";
@@ -678,8 +679,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 +688,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;
     },
@@ -1292,8 +1295,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 +1852,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 +1869,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)}