@drawnagency/primitives 0.1.109 → 0.1.111

package/src/collab/recovery.ts

@@ -34,6 +34,24 @@ export interface RecoveryBaseline {
  *  nothing). This is deliberately NOT derived from the published mainIndex: a
  *  main-based baseline would silently local-win every dirty section that already
  *  exists on main — the exact lost-update this path exists to prevent. */
+/** Key-order-insensitive serialization, for comparing two snapshots of the same
+ *  section that took different routes to memory. Plain `JSON.stringify` is
+ *  order-sensitive, and the two sides are built differently — the baseline by
+ *  `buildCommittedBaseline` from what the save sent, the remote by the loader's
+ *  Zod parse of the file on the branch. Any drift between those orderings marks
+ *  an untouched section as remote-changed, which surfaces as a keep-mine /
+ *  take-theirs dialog for a section nobody edited. */
+function canonicalize(value: unknown): string {
+  if (Array.isArray(value)) return `[${value.map(canonicalize).join(",")}]`;
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>)
+      .filter(([, v]) => v !== undefined)
+      .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+    return `{${entries.map(([k, v]) => `${JSON.stringify(k)}:${canonicalize(v)}`).join(",")}}`;
+  }
+  return JSON.stringify(value) ?? "null";
+}
+
 export function deriveRecoveryInputs({ baseline, remote, dirtyRows, deletedIds }: {
   baseline: RecoveryBaseline | null;
   remote: { sections: LoadedSection[]; index: SiteIndex };
@@ -51,10 +69,10 @@ export function deriveRecoveryInputs({ baseline, remote, dirtyRows, deletedIds }
     };
   }
 
-  const baselineById = new Map(baseline.sections.map((s) => [s.section.id, JSON.stringify(s.section)]));
+  const baselineById = new Map(baseline.sections.map((s) => [s.section.id, canonicalize(s.section)]));
   const remoteChangedIds = new Set(
     remote.sections
-      .filter((s) => baselineById.has(s.section.id) && baselineById.get(s.section.id) !== JSON.stringify(s.section))
+      .filter((s) => baselineById.has(s.section.id) && baselineById.get(s.section.id) !== canonicalize(s.section))
       .map((s) => s.section.id),
   );
   // Safety: a dirty id that exists remotely but was never in the baseline means
@@ -137,7 +155,15 @@ export function buildCommittedBaseline({ baselineSections, fallbackSections, sav
     .filter((s) => s.section.id in sentIndex.sections)
     .map((s) => {
       const sent = sentById.get(s.section.id);
-      return sent ? { ...s, section: { ...s.section, ...sent } } : s;
+      // REPLACE the content, never merge it over the old section: a save that
+      // dropped a key (clearing a section's options, say) left the stale key on
+      // the baseline, so the next fetch of that section differed from the
+      // baseline and the section reported as remote-changed — a keep-mine /
+      // take-theirs dialog for an edit this editor had just made itself.
+      // `{ id, ...content }` is the shell's own canonical section shape
+      // (onSectionChange, onAddSection).
+      if (!sent) return s;
+      return { ...s, section: { id: s.section.id, ...sent }, meta: sentIndex.sections[s.section.id] ?? s.meta };
     });
 
   const present = new Set(out.map((s) => s.section.id));

package/src/components/brandguide/ColorSwatchSettings.tsx

@@ -1,31 +1,53 @@
 import { useState } from "react";
 import { Input } from "../shared/Input";
 import type { ColorItem, ColorSpace } from "../sections/Colors/schema";
+import { COLOR_SPACE_KEYS } from "./colors-shared";
 
 interface Props {
   color: ColorItem;
   onChange: (color: ColorItem) => void;
 }
 
-function mergeSpaces(spaces: ColorSpace[]): ColorSpace {
-  return Object.assign({}, ...spaces);
+const KEYS = COLOR_SPACE_KEYS;
+
+function hasAnyValue(color: ColorItem): boolean {
+  return color.spaces.some((s) => KEYS.some((k) => s[k]));
 }
 
 export default function ColorSwatchSettings({ color, onChange }: Props) {
-  const [localColor, setLocalColor] = useState(() => ({
-    ...color,
-    spaces: [mergeSpaces(color.spaces)],
-  }));
-  const space = localColor.spaces[0] || {};
+  const [localColor, setLocalColor] = useState(color);
+  const spaces = localColor.spaces.length > 0 ? localColor.spaces : [{} as ColorSpace];
+
+  // A colour can be authored as several grouped spaces (e.g. [{hex,rgb},{cmyk,pantone}])
+  // and the swatch renders those groups. The form shows one input per key, sourced
+  // from whichever space defines it, and writes back into that same space — flattening
+  // everything into spaces[0] would silently destroy the grouping.
+  const valueOf = (key: (typeof KEYS)[number]) => spaces.find((s) => s[key])?.[key] ?? "";
 
   const update = (updated: ColorItem) => {
     setLocalColor(updated);
-    onChange(updated);
+    // ColorSpaceSchema requires at least one populated space. Emitting an all-empty
+    // colour passes here and fails much later as an unattributable save error, so
+    // hold it locally and tell the editor why instead.
+    if (hasAnyValue(updated)) onChange(updated);
   };
 
-  const updateSpace = (key: keyof ColorSpace, value: string) => {
-    const newSpace = { ...space, [key]: value || undefined };
-    update({ ...localColor, spaces: [newSpace] });
+  const updateSpace = (key: (typeof KEYS)[number], value: string) => {
+    const owner = spaces.findIndex((s) => s[key] !== undefined);
+    const target = owner === -1 ? 0 : owner;
+    const next = spaces
+      .map((s, i) => {
+        if (i !== target) return s;
+        if (!value) {
+          const { [key]: _dropped, ...rest } = s;
+          return rest;
+        }
+        return { ...s, [key]: value };
+      })
+      // Drop a group the last of its values just left, but always keep one space
+      // so the inputs stay bound to something.
+      .filter((s, i) => i === 0 || Object.keys(s).length > 0);
+    update({ ...localColor, spaces: next });
   };
 
   return (
@@ -35,14 +57,19 @@ export default function ColorSwatchSettings({ color, onChange }: Props) {
         value={localColor.name || ""}
         onChange={(name) => update({ ...localColor, name })}
       />
-      {(["hex", "rgb", "cmyk", "pantone"] as const).map((key) => (
+      {KEYS.map((key) => (
         <Input
           key={key}
           label={key.toUpperCase()}
-          value={space[key] || ""}
+          value={valueOf(key)}
           onChange={(value) => updateSpace(key, value)}
         />
       ))}
+      {!hasAnyValue(localColor) && (
+        <p role="alert" className="mt-1 text-xs text-red-600">
+          Enter at least one value — this color won&rsquo;t be saved until you do.
+        </p>
+      )}
     </div>
   );
 }

package/src/components/brandguide/ColorsEditable.tsx

@@ -5,7 +5,7 @@ import { EditableGrid } from "../primitives/EditableGrid";
 import { EditablePlainText } from "../primitives/EditablePlainText";
 import type { ReactNode } from "react";
 import ColorSwatchSettings from "./ColorSwatchSettings";
-import { getContrastClass, createColorItem } from "./colors-shared";
+import { getContrastClass, createColorItem, orderedSpaceEntries } from "./colors-shared";
 import type { ColorItem } from "../sections/Colors/schema";
 import type { SectionContent } from "../../schemas/sections";
 import type { OpenModal } from "../../lib/registry";
@@ -140,14 +140,12 @@ function ColorSwatchEditable({
         // flex-1 so every swatch's label block grows to the tallest in its row.
         <div className="flex-1 space-y-1 bg-base-accent p-3 text-sm">
           {color.spaces.map((space, j) =>
-            Object.entries(space).map(([key, value]) =>
-              value ? (
-                <div key={`${j}-${key}`} className="flex w-full justify-between">
-                  <span className="font-medium uppercase">{key}</span>
-                  <span>{value}</span>
-                </div>
-              ) : null
-            )
+            orderedSpaceEntries(space).map(([key, value]) => (
+              <div key={`${j}-${key}`} className="flex w-full justify-between">
+                <span className="font-medium uppercase">{key}</span>
+                <span>{value}</span>
+              </div>
+            ))
           )}
         </div>
       )}

package/src/components/brandguide/ColorsView.tsx

@@ -1,8 +1,8 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { containerGridClass } from "../../lib/container-grid";
-import { getContrastClass } from "./colors-shared";
+import { getContrastClass, orderedSpaceEntries } from "./colors-shared";
 import type { ColorItem } from "../sections/Colors/schema";
 
 export default function ColorsView({
@@ -20,6 +20,8 @@ export default function ColorsView({
 }) {
   const [expanded, setExpanded] = useState(!collapsing);
   const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current); }, []);
 
   const handleCopy = (value: string, colorIndex: number) => {
     if (navigator.clipboard?.writeText) {
@@ -35,7 +37,8 @@ export default function ColorsView({
       document.body.removeChild(ta);
     }
     setCopiedIndex(colorIndex);
-    setTimeout(() => setCopiedIndex(null), 1500);
+    if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+    copiedTimerRef.current = setTimeout(() => setCopiedIndex(null), 1500);
   };
 
   return (
@@ -79,14 +82,12 @@ export default function ColorsView({
                   // flex-1 so every swatch's label block grows to the tallest in its row.
                   <div className="flex-1 space-y-1 bg-base-accent p-3 text-sm">
                     {color.spaces.map((space, j) =>
-                      Object.entries(space).map(([key, value]) =>
-                        value ? (
-                          <button key={`${j}-${key}`} onClick={() => handleCopy(value, i)} className="cursor-pointer flex w-full justify-between hover:text-primary">
-                            <span className="font-medium uppercase">{key}</span>
-                            <span>{value}</span>
-                          </button>
-                        ) : null
-                      )
+                      orderedSpaceEntries(space).map(([key, value]) => (
+                        <button key={`${j}-${key}`} onClick={() => handleCopy(value, i)} className="cursor-pointer flex w-full justify-between hover:text-primary">
+                          <span className="font-medium uppercase">{key}</span>
+                          <span>{value}</span>
+                        </button>
+                      ))
                     )}
                   </div>
                 )}

package/src/components/brandguide/colors-shared.ts

@@ -1,4 +1,20 @@
-import type { ColorItem } from "../sections/Colors/schema";
+import type { ColorItem, ColorSpace } from "../sections/Colors/schema";
+
+/**
+ * Canonical display order for a colour space's values. Rendering
+ * `Object.entries(space)` instead put them in whatever order the JSON happened
+ * to carry, so two swatches on the same page could list their values
+ * differently — and the settings form, which is always hex/rgb/cmyk/pantone,
+ * disagreed with the swatch it edits.
+ */
+export const COLOR_SPACE_KEYS = ["hex", "rgb", "cmyk", "pantone"] as const;
+
+export function orderedSpaceEntries(space: ColorSpace): [string, string][] {
+  return COLOR_SPACE_KEYS.flatMap((key) => {
+    const value = space[key];
+    return value ? [[key, value] as [string, string]] : [];
+  });
+}
 
 export function getContrastClass(hex: string | undefined): string {
   if (!hex) return "text-white";

package/src/components/chat/ChatPanel.tsx

@@ -195,6 +195,13 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
     return convoIdRef.current;
   }
   const abortRef = useRef<AbortController | null>(null);
+  // Bumped by every run() and by anything that replaces the transcript out from
+  // under an in-flight one (New conversation, restore-from-history). run()'s
+  // post-await writes are all keyed to the generation it started with, so an
+  // aborted request can no longer resurrect the transcript the user just
+  // cleared — abort resolves `{ok: true}`, and the tail wrote back the history
+  // captured before the request.
+  const runGenRef = useRef(0);
   const composerRef = useRef<HTMLTextAreaElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
@@ -355,6 +362,8 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
   }
 
   async function run(history: ChatMessage[]) {
+    const gen = ++runGenRef.current;
+    const superseded = () => runGenRef.current !== gen;
     setNotice(null);
     setCanRetry(false);
     setBusy(true);
@@ -367,6 +376,7 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
     const result = await streamChat(
       { messages: history, sessionId: sessionId(), ...(taskId ? { taskId } : {}), ...(draftChatbot !== undefined ? { draftChatbot } : {}), ...(simulateAudience ? { simulateAudience } : {}) },
       (delta) => {
+        if (superseded()) return;
         streamingRef.current += delta;
         const streamed = streamingRef.current;
         setMessages([...history, { role: "assistant", content: streamed }]);
@@ -375,6 +385,9 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
     );
     abortRef.current = null;
     setBusy(false);
+    // Everything below writes the transcript captured before the request. If it
+    // has since been replaced, leave it alone.
+    if (superseded()) return;
     if (!result.ok) {
       setMessages(history); // drop the empty assistant stub
       setNotice(ERROR_COPY[result.error] ?? ERROR_COPY.upstream_error);
@@ -404,6 +417,9 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
   // Starts fresh; the previous conversation stays in the history archive.
   function clearConversation() {
     if (busy) stop();
+    // Invalidate any in-flight run, so its tail can't write the old transcript
+    // back over the empty one.
+    runGenRef.current++;
     setMessages([]);
     setNotice(null);
     setCanRetry(false);
@@ -423,6 +439,9 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
 
   function restoreConversation(c: StoredConversation) {
     if (busy) stop();
+    // Same as clearConversation: this replaces the transcript, so an in-flight
+    // run must not finish by restoring the one it started from.
+    runGenRef.current++;
     convoIdRef.current = c.id;
     try { window.sessionStorage.setItem(CONVO_ID_KEY, c.id); } catch {}
     setMessages(c.messages);

package/src/components/docfile/DocFilePane.tsx

@@ -8,6 +8,7 @@ import {
   ZoomIn,
   ZoomOut,
 } from "lucide-react";
+import { useInitialFocus } from "../../hooks/useFocusTrap";
 import type { SiteDocument } from "../../lib/documents";
 import { documentFileUrl } from "../../schemas/documents";
 import { lockBodyScroll } from "../../lib/scroll-lock";
@@ -48,13 +49,22 @@ export default function DocFilePane({
   const [page, setPage] = useState(1);
   const [numPages, setNumPages] = useState(0);
   const frameRef = useRef<HTMLIFrameElement | null>(null);
+  const paneRef = useRef<HTMLDivElement | null>(null);
   const viewerRef = useRef<PdfCanvasViewerHandle | null>(null);
 
   useEffect(() => lockBodyScroll(), []);
 
+  // Focus moves into the pane on open and back to the trigger on close. It is
+  // aria-modal-less by design (the page behind stays reachable), so this is
+  // initial focus only, not a trap.
+  useInitialFocus(paneRef, true);
+
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key !== "Escape") return;
+      // A modal opened on top of the pane owns Escape. Without this one keypress
+      // dismissed both — the same stacking rule Popover applies.
+      if (document.querySelector("[data-modal-layer]")) return;
       e.preventDefault();
       onClose();
     };
@@ -87,6 +97,7 @@ export default function DocFilePane({
 
   return (
     <div
+      ref={paneRef}
       role="dialog"
       aria-label={doc.title}
       data-testid="doc-file-pane"

package/src/components/docfile/PdfCanvasViewer.tsx

@@ -65,6 +65,8 @@ interface PageSlot {
   pendingKey: string | null;
   task: RenderTask | null;
   textLayerStarted: boolean;
+  /** Kept so a page leaving the visible band can cancel it, like `task`. */
+  textLayer: { cancel: () => void } | null;
 }
 
 const emptySlot = (): PageSlot => ({
@@ -72,6 +74,7 @@ const emptySlot = (): PageSlot => ({
   pendingKey: null,
   task: null,
   textLayerStarted: false,
+  textLayer: null,
 });
 
 /**
@@ -111,6 +114,11 @@ export default function PdfCanvasViewer({
   useEffect(() => {
     let cancelled = false;
     let loadingTask: ReturnType<PdfjsModule["getDocument"]> | null = null;
+    // Page indices carry no identity across documents, so a set left over from
+    // the previous one makes the new document's first render believe those pages
+    // are on screen — it renders canvases for a band nobody is looking at, and
+    // pages that really are visible wait for the observer's first callback.
+    setVisible(new Set());
     void (async () => {
       try {
         const lib = await loadPdfjs();
@@ -203,7 +211,9 @@ export default function PdfCanvasViewer({
 
   const fitScale = useMemo(() => {
     if (!dims?.length || !containerWidth) return null;
-    const maxW = Math.max(...dims.map((d) => d.w));
+    // reduce, not Math.max(...): the spread is an argument list, and a document
+    // with enough pages would blow the call-stack limit outright.
+    const maxW = dims.reduce((m, d) => (d.w > m ? d.w : m), 0);
     return Math.max(0.1, (containerWidth - GUTTER_PX) / maxW);
   }, [dims, containerWidth]);
   const scale = fitScale == null ? null : fitScale * zoom;
@@ -277,6 +287,7 @@ export default function PdfCanvasViewer({
           container: textDiv,
           viewport: page.getViewport({ scale: renderScale }),
         });
+        slot.textLayer = textLayer;
         textLayer.render().catch(() => {
           slot.textLayerStarted = false;
         });
@@ -289,6 +300,9 @@ export default function PdfCanvasViewer({
     slots.current.forEach((slot, i) => {
       if (visible.has(i)) return;
       slot.task?.cancel();
+      // The text layer went on streaming into a container React had already
+      // unmounted, and a return trip started a second one on top of it.
+      slot.textLayer?.cancel();
       Object.assign(slot, emptySlot());
     });
   }, [doc, dims, renderScale, visible]);
@@ -382,19 +396,46 @@ export default function PdfCanvasViewer({
   }, [doc]);
 
   const scrollRaf = useRef(0);
+  // Wrapper tops, snapshotted once per layout instead of read inside the rAF:
+  // scrolling a 300-page document forced 300 layout reads every frame. They only
+  // move when the page geometry does, which is `scale` and `dims`.
+  const offsetsRef = useRef<number[] | null>(null);
+  useEffect(() => {
+    offsetsRef.current = null;
+  }, [scale, dims]);
+
   const onScroll = () => {
     if (scrollRaf.current) return;
     scrollRaf.current = requestAnimationFrame(() => {
       scrollRaf.current = 0;
       const container = containerRef.current;
       if (!container) return;
+      if (!offsetsRef.current) {
+        // A wrapper that hasn't mounted inherits its predecessor's top, keeping
+        // the list non-decreasing so the search below stays valid.
+        let last = -1;
+        offsetsRef.current = wrapperRefs.current.map((el) => {
+          last = el?.offsetTop ?? last;
+          return last;
+        });
+      }
+      const offsets = offsetsRef.current;
       // Current page = the last one whose top has passed the upper 40% of the
       // viewport — matches how the native viewer flips its indicator.
       const threshold = container.scrollTop + container.clientHeight * 0.4;
-      let current = 1;
-      wrapperRefs.current.forEach((el, i) => {
-        if (el && el.offsetTop <= threshold) current = i + 1;
-      });
+      let lo = 0;
+      let hi = offsets.length - 1;
+      let found = 0;
+      while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        if (offsets[mid] <= threshold) {
+          found = mid;
+          lo = mid + 1;
+        } else {
+          hi = mid - 1;
+        }
+      }
+      const current = found + 1;
       if (current !== currentPageRef.current) {
         currentPageRef.current = current;
         callbacks.current.onPageChange(current);

package/src/components/docfile/doc-file-state.ts

@@ -159,6 +159,13 @@ export function subscribeDocFile(cb: (sectionId: string | null) => void): () =>
       window.removeEventListener("hashchange", onHash);
       window.removeEventListener("popstate", onPop);
       unlistenRequest();
+      // The return-glide timer would otherwise outlive the last subscriber and
+      // strip a class off a document nothing is watching any more.
+      if (s.closingTimer !== null) {
+        clearTimeout(s.closingTimer);
+        s.closingTimer = null;
+        document.documentElement.classList.remove(DOC_CLOSING_CLASS);
+      }
     };
     // Deep link: the hash is an INPUT, read once when the first listener wires up.
     syncFromHash();

package/src/components/editor/IndicatorPill.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, type ReactNode } from "react";
+import { useEffect, useRef, useState, useCallback, type ReactNode } from "react";
 import { cn } from "../../lib/cn";
 import { Popover } from "../shared/Popover";
 
@@ -43,6 +43,10 @@ export function IndicatorPill({
     }
   }, []);
 
+  // The close-delay timer outlives the pill otherwise — a hover-then-navigate
+  // leaves it pending with nothing to update.
+  useEffect(() => clearHoverTimeout, [clearHoverTimeout]);
+
   function handleMouseEnter() {
     clearHoverTimeout();
     if (!disabled && !clickOpen && hoverContent) {

package/src/components/editor/NavGroupRow.tsx

@@ -25,8 +25,13 @@ interface Props {
   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;
+   *  the drag reads as moving only the header.
+   *
+   *  Takes the group id (rather than closing over it in the parent) so the
+   *  handler can be a single stable callback: an identity that changed every
+   *  parent render re-fired this effect in EVERY mounted row, and the
+   *  non-dragging ones then cleared the dragging row's state. */
+  onDragStateChange?: (groupId: string, dragging: boolean) => void;
 }
 
 export function NavGroupRow({
@@ -44,7 +49,7 @@ export function NavGroupRow({
 
   // 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]);
+  useEffect(() => { onDragStateChange?.(group.id, isDragging); }, [group.id, isDragging, onDragStateChange]);
 
   const label = groupDisplayLabel(group.label);
   const labelError = group.label.trim() === "" ? "Label is required." : null;

package/src/components/editor/PagesModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useCallback, useState, useEffect } from "react";
 import { Check, ChevronDown, Home } from "lucide-react";
 import type { SiteIndex, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
@@ -54,6 +54,14 @@ export function PagesModal(props: PagesModalProps) {
   // 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);
+  // Stable identity, and a guarded clear. An inline arrow per row re-fired every
+  // NavGroupRow's drag effect on every render of this modal, and the rows that
+  // weren't dragging then reset the dragging one's id — so with two or more
+  // groups the collapse never engaged (and A/B fought over the state for the
+  // drag's duration). Only the row that claimed the id may release it.
+  const handleGroupDragState = useCallback((groupId: string, dragging: boolean) => {
+    setDraggingGroupId((cur) => (dragging ? groupId : cur === groupId ? null : cur));
+  }, []);
 
   if (deletingId) {
     const page = index.pages.find((p) => p.id === deletingId);
@@ -132,7 +140,7 @@ export function PagesModal(props: PagesModalProps) {
                 onSetStartCollapsed={(v) => props.onSetGroupStartCollapsed(entry.id, v)}
                 onDelete={() => props.onDeleteGroup(entry.id)}
                 onMove={props.onMoveNavEntry}
-                onDragStateChange={(dragging) => setDraggingGroupId(dragging ? entry.id : null)}
+                onDragStateChange={handleGroupDragState}
               />
               {expanded && (
                 <div data-testid={`nav-group-members-${entry.id}`} className="ml-6 flex flex-col gap-2">

package/src/components/primitives/EditableList.tsx

@@ -89,6 +89,14 @@ function ListRow({
   const rowRef = useRef<HTMLDivElement>(null);
   const handleRef = useRef<HTMLButtonElement>(null);
 
+  // onReorder's identity chains back to the editor shell's inline onChange, so it
+  // changes on every editor render. Listing it in the deps below re-registered the
+  // draggable — re-awaiting the dynamic import — on every one of those, and a
+  // re-registration landing mid-drag cancels the drag. Read it through a ref, as
+  // IconList's monitor and EditableGrid already do.
+  const onReorderRef = useRef(onReorder);
+  onReorderRef.current = onReorder;
+
   useEffect(() => {
     const row = rowRef.current;
     const handle = handleRef.current;
@@ -116,7 +124,7 @@ function ListRow({
         onDrop: ({ source }) => {
           const fromIndex = source.data.index as number;
           if (fromIndex !== index) {
-            onReorder(fromIndex, index);
+            onReorderRef.current(fromIndex, index);
           }
         },
       });
@@ -131,7 +139,7 @@ function ListRow({
       cancelled = true;
       cleanup?.();
     };
-  }, [id, index, onReorder, setDragState]);
+  }, [id, index, setDragState]);
 
   const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
 

package/src/components/primitives/EditableRichText.tsx

@@ -1,7 +1,7 @@
 import { useRef, useCallback, useEffect } from "react";
 import { EditorContent } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { sanitizeHtml } from "../../lib/sanitize";
+import { useSanitizedHtml } from "../../hooks/useSanitizedHtml";
 import { useEditableRichText } from "./useEditableRichText";
 import { RichTextToolbar } from "./RichTextToolbar";
 import type { PresetName } from "./tiptap-presets";
@@ -32,6 +32,7 @@ export function EditableRichText({
   const { isEditorActive, editor, activate, deactivate } =
     useEditableRichText({ value, onChange, preset, placeholder });
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const safeHtml = useSanitizedHtml(value);
   const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const clickCoordsRef = useRef<{ left: number; top: number } | null>(null);
 
@@ -100,7 +101,7 @@ export function EditableRichText({
     return (
       <div
         className={className}
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(value) }}
+        dangerouslySetInnerHTML={{ __html: safeHtml }}
       />
     );
   }
@@ -122,7 +123,7 @@ export function EditableRichText({
         onClick={handleClick}
         // Content is sanitized via DOMPurify — safe for trusted project JSON.
         // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(value) }}
+        dangerouslySetInnerHTML={{ __html: safeHtml }}
       />
     );
   }

package/src/components/primitives/LinkPopover.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Editor } from "@tiptap/core";
 import { Button } from "../shared/Button";
 import { usePages } from "../shared/PagesContext";
@@ -27,6 +27,27 @@ export function LinkPopover({ editor, onClose }: LinkPopoverProps) {
   );
   const hasLink = Boolean(existingAttrs.href);
   const headings = pageId ? getPageHeadings(pageId) : [];
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Every sibling picker (IconPicker, FontPicker, SectionTypePicker) dismisses on
+  // an outside mousedown; this one only closed through its own buttons, so clicking
+  // back into the prose left it floating over the document. Escape is bound at the
+  // document too, because focus can be anywhere by the time the editor wants out —
+  // the container's own keydown only fires while focus is inside the panel.
+  useEffect(() => {
+    function onMouseDown(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) onClose();
+    }
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onClose]);
 
   const handleApply = () => {
     if (mode === "internal") {
@@ -66,6 +87,7 @@ export function LinkPopover({ editor, onClose }: LinkPopoverProps) {
 
   return (
     <div
+      ref={panelRef}
       className="flex w-64 flex-col gap-2 rounded bg-base-accent p-3 shadow-lg"
       onMouseDown={(e) => e.stopPropagation()}
       onKeyDown={handleKeyDown}