@drawnagency/primitives 0.1.108 → 0.1.110

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}

package/src/components/primitives/index.ts

@@ -9,3 +9,8 @@ export { ResolvedMedia } from "./ResolvedMedia";
 export { LinkPopover } from "./LinkPopover";
 export { defineHeadingSection } from "./defineHeadingSection";
 export { MediaBlock } from "../sections/Media/MediaBlock";
+// Link selector (external URL / internal page + section) plus the pages context
+// that feeds its dropdowns, so custom sections can reuse the same link picker the
+// Button/Media sections use and derive labels from the live page/heading list.
+export { LinkField } from "../shared/LinkField";
+export { usePages, PagesContext, type PagesContextValue } from "../shared/PagesContext";

package/src/components/primitives/useEditableCollection.ts

@@ -40,79 +40,99 @@ export function useEditableCollection<T>({
     wrapItems(items)
   );
   const prevItemsRef = useRef(items);
+  // State updaters must be pure. Every mutator below used to call the parent's
+  // onChange from inside setWrappedItems, so React 18/19 StrictMode's dev
+  // double-invoke fired it twice (deleting one icon-list row emitted two
+  // changes), and React is free to re-run or discard an updater at any time.
+  // Mirroring the list here lets each mutator compute `next` outside the
+  // updater; the eager write keeps two mutations in one tick consistent.
+  const wrappedRef = useRef(wrappedItems);
+  wrappedRef.current = wrappedItems;
+
+  const commit = useCallback(
+    (next: WrappedItem<T>[]) => {
+      wrappedRef.current = next;
+      setWrappedItems(next);
+      onChange(next.map((w) => w.data));
+    },
+    [onChange],
+  );
 
   useEffect(() => {
     if (items === prevItemsRef.current) return;
     prevItemsRef.current = items;
 
     setWrappedItems((prev) => {
-      return items.map((data, i) => {
-        if (i < prev.length) {
-          return { id: prev[i].id, data };
-        }
-        return { id: uid(), data };
+      // Identity first, position only for the remainder. Keyed purely by index,
+      // a parent-side removal or reorder re-pointed every id one slot over:
+      // React reused the wrong row's DOM, so the focused input, the in-progress
+      // edit and the drag registration all belonged to a different item than
+      // the one now rendered there. Pure identity would be worse in the other
+      // direction — an in-place edit hands back a fresh object for that row, and
+      // minting a new id there remounts the field the user is typing into.
+      const taken = new Array<boolean>(prev.length).fill(false);
+      const slotsByData = new Map<unknown, number[]>();
+      prev.forEach((w, i) => {
+        const bucket = slotsByData.get(w.data);
+        if (bucket) bucket.push(i);
+        else slotsByData.set(w.data, [i]);
       });
+
+      const matched = items.map((data) => {
+        const slot = slotsByData.get(data)?.shift();
+        if (slot === undefined) return null;
+        taken[slot] = true;
+        return prev[slot].id;
+      });
+
+      // Unmatched rows (edited in place, or genuinely new) take the surviving
+      // ids in their original order, which for a pure edit is the same id the
+      // row already had.
+      const spare = prev.filter((_, i) => !taken[i]).map((w) => w.id);
+      let next = 0;
+      return items.map((data, i) => ({ id: matched[i] ?? spare[next++] ?? uid(), data }));
     });
   }, [items]);
 
   const onReorder = useCallback(
     (fromIndex: number, toIndex: number) => {
-      setWrappedItems((prev) => {
-        const next = [...prev];
-        const [moved] = next.splice(fromIndex, 1);
-        next.splice(toIndex, 0, moved);
-        onChange(next.map((w) => w.data));
-        return next;
-      });
+      const next = [...wrappedRef.current];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
+      commit(next);
     },
-    [onChange]
+    [commit]
   );
 
   const onAdd = useCallback(() => {
-    const newItem = createItem();
-    setWrappedItems((prev) => {
-      const next = [...prev, { id: uid(), data: newItem }];
-      onChange(next.map((w) => w.data));
-      return next;
-    });
-  }, [createItem, onChange]);
+    commit([...wrappedRef.current, { id: uid(), data: createItem() }]);
+  }, [createItem, commit]);
 
   const onInsert = useCallback(
     (index: number) => {
-      const newItem = createItem();
-      setWrappedItems((prev) => {
-        const next = [...prev];
-        next.splice(index, 0, { id: uid(), data: newItem });
-        onChange(next.map((w) => w.data));
-        return next;
-      });
+      const next = [...wrappedRef.current];
+      next.splice(index, 0, { id: uid(), data: createItem() });
+      commit(next);
     },
-    [createItem, onChange],
+    [createItem, commit],
   );
 
   // Insert an externally-provided item (e.g. one dragged in from another grid)
   // at a specific index. Distinct from onInsert, which creates a blank item.
   const onInsertItem = useCallback(
     (index: number, data: T) => {
-      setWrappedItems((prev) => {
-        const next = [...prev];
-        next.splice(index, 0, { id: uid(), data });
-        onChange(next.map((w) => w.data));
-        return next;
-      });
+      const next = [...wrappedRef.current];
+      next.splice(index, 0, { id: uid(), data });
+      commit(next);
     },
-    [onChange]
+    [commit]
   );
 
   const onRemove = useCallback(
     (id: string) => {
-      setWrappedItems((prev) => {
-        const next = prev.filter((w) => w.id !== id);
-        onChange(next.map((w) => w.data));
-        return next;
-      });
+      commit(wrappedRef.current.filter((w) => w.id !== id));
     },
-    [onChange]
+    [commit]
   );
 
   return { wrappedItems, onReorder, onAdd, onInsert, onInsertItem, onRemove };