@lingjingai/script-editor 0.1.19 → 0.1.20

package/INTEGRATION.md

@@ -20,7 +20,7 @@
   ```ts
   import "@lingjingai/script-editor/style.css";
   ```
-- **构建产物**:消费方一律走 `dist`(`tsup` 编译好的 JS + d.ts + style.css + paper-fibers.png),无需编译包内 TS。`exports` 不带 `development` 条件(早期版本带过,会让 Vite **dev 模式**去找未发布的 `src/` 而报 `Failed to resolve import .../style.css` —— `0.1.1+` 已修)。
+- **构建产物**:发布 / 外部消费走 `dist`(`tsup` 编译好的 JS + d.ts + style.css + paper-fibers.png),无需编译包内 TS。本仓 `apps/web` dev 通过 Vite 的 `conditions:["development"]` 走 `src/index.ts` + `src/styles.css`,这样改包内源码能 HMR 生效;外部没有该 condition 时自动落到 `dist`。
 
 ---
 

package/dist/index.d.ts

@@ -163,7 +163,7 @@ type StudioSelectionFrom = {
  *
  * 不打 origin 时按 'sidebar' 等价处理（保守滚动）。
  */
-type StudioSelectionOrigin = "sidebar" | "scroll" | "reference" | "diff" | "chat" | "init" | "episode-toggle";
+type StudioSelectionOrigin = "sidebar" | "scroll" | "reference" | "diff" | "search" | "chat" | "init" | "episode-toggle";
 declare function buildSelectionFrom(kind: StudioSelectionFrom["kind"], id: string): StudioSelectionFrom | undefined;
 declare function fromToSelection(from: StudioSelectionFrom): StudioSelection;
 /** 公共字段：所有 selection variant 都可携带（origin 防双向联动死循环；from 资产回链）。 */

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, memo, useState, useMemo, useCallback, Fragment, useRef, useContext, useEffect, useLayoutEffect, useDeferredValue } from 'react';
-import { Plus, Trash2, X, Check, Eraser, ArrowUp, ArrowDown, GripVertical, MessageCircle, Film, Brain, BookOpen, Scissors, ArrowUpToLine, BookText, ChevronRight, FileText, Users, MapPin, Package, Undo2, Redo2, MessageSquareQuote, ArrowLeft, ChevronLeft, Loader2, AlertCircle } from 'lucide-react';
+import { Plus, Trash2, X, Check, Eraser, ArrowUp, ArrowDown, GripVertical, MessageCircle, Film, Brain, BookOpen, Scissors, ArrowUpToLine, BookText, ChevronRight, FileText, Users, MapPin, Package, Undo2, Redo2, MessageSquareQuote, ArrowLeft, ChevronLeft, Search, Loader2, AlertCircle } from 'lucide-react';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Virtuoso } from 'react-virtuoso';
 import { createPortal } from 'react-dom';
@@ -596,6 +596,30 @@ function EntityGroup({
     )) : null
   ] });
 }
+var HighlightContext = createContext("");
+function HighlightedText({ text }) {
+  const highlight = useContext(HighlightContext);
+  return /* @__PURE__ */ jsx(Fragment$1, { children: renderHighlightedText(text, highlight) });
+}
+function renderHighlightedText(value, query) {
+  const needle = query.trim();
+  if (!needle) return value;
+  const lowerValue = value.toLocaleLowerCase();
+  const lowerNeedle = needle.toLocaleLowerCase();
+  const out = [];
+  let from = 0;
+  let hit = lowerValue.indexOf(lowerNeedle);
+  while (hit >= 0) {
+    if (hit > from) out.push(value.slice(from, hit));
+    out.push(
+      /* @__PURE__ */ jsx("mark", { className: "lj-se-search-hit", children: value.slice(hit, hit + needle.length) }, `${hit}-${out.length}`)
+    );
+    from = hit + needle.length;
+    hit = lowerValue.indexOf(lowerNeedle, from);
+  }
+  if (from < value.length) out.push(value.slice(from));
+  return out.length > 0 ? out : value;
+}
 var EditingSignalContext = createContext(null);
 var LIVE_COMMIT_MS = 400;
 function caretOffsetFromPoint(x, y) {
@@ -627,6 +651,7 @@ function EditableText({
   const inputRef = useRef(null);
   const committedRef = useRef(value);
   const editingSignal = useContext(EditingSignalContext);
+  const highlight = useContext(HighlightContext);
   const liveTimerRef = useRef(null);
   const composingRef = useRef(false);
   const draftRef = useRef(value);
@@ -710,13 +735,14 @@ function EditableText({
     onEditEnd?.();
   }
   if (!editing) {
+    const content = value ? renderHighlightedText(value, highlight) : /* @__PURE__ */ jsx("span", { className: "lj-se-ph", children: placeholder ?? "" });
     return /* @__PURE__ */ jsx(
       "span",
       {
         ...spanProps,
         className: "lj-se-editable" + (className ? " " + className : "") + (disabled ? " lj-se-editable--ro" : ""),
         onClick: beginEdit,
-        children: value || /* @__PURE__ */ jsx("span", { className: "lj-se-ph", children: placeholder ?? "" })
+        children: content
       }
     );
   }
@@ -1746,6 +1772,9 @@ function SelectField({
   style,
   emptyOptionLabel
 }) {
+  const highlight = useContext(HighlightContext).trim();
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? (value ? value : placeholder ?? emptyOptionLabel ?? "\u2014");
+  const highlighted = !!highlight && selectedLabel.toLocaleLowerCase().includes(highlight.toLocaleLowerCase());
   return /* @__PURE__ */ jsxs(
     "select",
     {
@@ -1754,7 +1783,7 @@ function SelectField({
       title,
       onChange: (e) => onChange(e.target.value),
       style,
-      className: cn("lj-se-select", mono && "lj-se-mono", className),
+      className: cn("lj-se-select", mono && "lj-se-mono", highlighted && "is-search-hit", className),
       children: [
         !value || !options.some((o) => o.value === value) ? /* @__PURE__ */ jsx("option", { value, children: placeholder ?? emptyOptionLabel ?? "\u2014" }) : null,
         options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
@@ -1778,7 +1807,7 @@ function AssetStateChip({
   const opts = stateOptions(states2);
   const trimmed = (currentStateId ?? "").trim();
   return /* @__PURE__ */ jsxs("span", { className: cn("lj-se-chip", orphan && "is-orphan"), title: orphan ? `${name} \u4E0D\u5B58\u5728` : void 0, children: [
-    onNavigate ? /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-chip-name lj-se-chip-name--link", title: `\u8DF3\u5230 ${name}`, onClick: onNavigate, children: name }) : /* @__PURE__ */ jsx("span", { className: "lj-se-chip-name", children: name }),
+    onNavigate ? /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-chip-name lj-se-chip-name--link", title: `\u8DF3\u5230 ${name}`, onClick: onNavigate, children: /* @__PURE__ */ jsx(HighlightedText, { text: name }) }) : /* @__PURE__ */ jsx("span", { className: "lj-se-chip-name", children: /* @__PURE__ */ jsx(HighlightedText, { text: name }) }),
     /* @__PURE__ */ jsx("span", { className: "lj-se-chip-sep", children: "\xB7" }),
     /* @__PURE__ */ jsx(
       SelectField,
@@ -2267,7 +2296,7 @@ function SceneItemRowImpl({
       className: "lj-se-cue lj-se-cue--structured",
       style: resolvedActor ? { color: getActorCueVar(resolvedActorId, tone) } : void 0,
       children: [
-        getDialogueSpeakerLabel(item, actorMap, speakerMap) || "\u672A\u77E5\u53D1\u58F0\u6E90",
+        /* @__PURE__ */ jsx(HighlightedText, { text: getDialogueSpeakerLabel(item, actorMap, speakerMap) || "\u672A\u77E5\u53D1\u58F0\u6E90" }),
         getDialogueDeliveryLabel(item.delivery) ? /* @__PURE__ */ jsxs("span", { className: "lj-se-cue-delivery", children: [
           "\uFF08",
           getDialogueDeliveryLabel(item.delivery),
@@ -2359,7 +2388,7 @@ function SceneItemRowImpl({
     const tone = isInner ? "inner" : "dialogue";
     const tag = isInner ? emotion ? `OS\xB7${emotion}` : "OS" : emotion;
     body = /* @__PURE__ */ jsxs("p", { className: cn("lj-se-asian-cueline", isInner && "is-inner"), children: [
-      multiSpeaker ? /* @__PURE__ */ jsx("strong", { className: "lj-se-asian-speaker", style: resolvedActor ? { color: getActorCueVar(resolvedActorId, tone) } : void 0, children: getDialogueSpeakerLabel(item, actorMap, speakerMap) }) : /* @__PURE__ */ jsx(
+      multiSpeaker ? /* @__PURE__ */ jsx("strong", { className: "lj-se-asian-speaker", style: resolvedActor ? { color: getActorCueVar(resolvedActorId, tone) } : void 0, children: /* @__PURE__ */ jsx(HighlightedText, { text: getDialogueSpeakerLabel(item, actorMap, speakerMap) }) }) : /* @__PURE__ */ jsx(
         SelectField,
         {
           value: resolvedActorId,
@@ -3075,7 +3104,7 @@ function AssetCardImpl({
   const description = rawDescription.trim();
   const states2 = entity.states ?? [];
   const fromRef = buildSelectionFrom(kind, assetId);
-  return /* @__PURE__ */ jsx("div", { className: "lj-se-assetcard-row", children: /* @__PURE__ */ jsxs("article", { className: "lj-se-assetcard", "data-no-quote-selection": true, children: [
+  return /* @__PURE__ */ jsx("div", { className: "lj-se-assetcard-row", children: /* @__PURE__ */ jsx(HighlightContext.Provider, { value: "", children: /* @__PURE__ */ jsxs("article", { className: "lj-se-assetcard", "data-no-quote-selection": true, children: [
     /* @__PURE__ */ jsxs("div", { className: "lj-se-assetcard-head", children: [
       /* @__PURE__ */ jsx("span", { className: "lj-se-assetcard-name", children: /* @__PURE__ */ jsx(
         EditableText,
@@ -3181,7 +3210,7 @@ function AssetCardImpl({
         }
       )
     ) : null
-  ] }) });
+  ] }) }) });
 }
 function areEqual(prev, next) {
   if (prev.group !== next.group || prev.assetId !== next.assetId || prev.disabled !== next.disabled) return false;
@@ -3884,6 +3913,250 @@ function QuoteLayer({
     }
   );
 }
+function ScriptSearchBox({
+  query,
+  current,
+  total,
+  inputRef,
+  onQueryChange,
+  onPrev,
+  onNext,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "lj-se-search", children: [
+    /* @__PURE__ */ jsx(Search, { className: "lj-se-ic-3", strokeWidth: 2 }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        className: "lj-se-search-input",
+        value: query,
+        placeholder: "\u641C\u7D22",
+        "aria-label": "\u641C\u7D22\u5267\u672C",
+        onChange: (e) => onQueryChange(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            if (e.shiftKey) onPrev();
+            else onNext();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "lj-se-search-count", children: [
+      total > 0 ? current + 1 : 0,
+      "/",
+      total
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-search-btn", title: "\u4E0A\u4E00\u5904", disabled: total === 0, onClick: onPrev, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "lj-se-ic-3", strokeWidth: 2.25 }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-search-btn", title: "\u4E0B\u4E00\u5904", disabled: total === 0, onClick: onNext, children: /* @__PURE__ */ jsx(ChevronRight, { className: "lj-se-ic-3", strokeWidth: 2.25 }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-search-btn", title: "\u5173\u95ED\u641C\u7D22", onClick: onClose, children: /* @__PURE__ */ jsx(X, { className: "lj-se-ic-3", strokeWidth: 2.25 }) })
+  ] });
+}
+
+// src/search/search-index.ts
+var SPACE_LABEL = {
+  interior: "INT. \u5185",
+  exterior: "EXT. \u5916"
+};
+var TIME_LABEL = {
+  day: "DAY \u65E5",
+  night: "NIGHT \u591C",
+  dawn: "DAWN \u6668",
+  dusk: "DUSK \u66AE"
+};
+function add(parts, value) {
+  const text = value?.trim();
+  if (text) parts.push(text);
+}
+function findStateName(states2, stateId) {
+  const id = stateId?.trim();
+  if (!id) return "";
+  return getStateDisplayName(states2?.find((state) => state.state_id?.trim() === id));
+}
+function normalize(value) {
+  return value.trim().toLocaleLowerCase();
+}
+function sceneSearchText(scene, sceneIdx, maps) {
+  const parts = [];
+  const context = getSceneContext(scene);
+  const primaryLocationId = getPrimarySceneLocationId(scene);
+  const location = primaryLocationId ? maps.locationMap.get(primaryLocationId) : void 0;
+  add(parts, String(getSceneNumber(scene, sceneIdx)));
+  add(parts, SPACE_LABEL[scene.environment?.space ?? ""] ?? scene.environment?.space);
+  add(parts, location ? getLocationDisplayName(location) : primaryLocationId);
+  add(parts, TIME_LABEL[scene.environment?.time ?? ""] ?? scene.environment?.time);
+  for (const ref of context.actors ?? []) {
+    const id = ref.actor_id?.trim();
+    if (!id) continue;
+    const actor = maps.actorMap.get(id);
+    add(parts, actor ? getActorDisplayName(actor) : id);
+    add(parts, findStateName(actor?.states, ref.state_id));
+  }
+  for (const ref of context.props ?? []) {
+    const id = ref.prop_id?.trim();
+    if (!id) continue;
+    const prop = maps.propMap.get(id);
+    add(parts, prop ? getPropDisplayName(prop) : id);
+    add(parts, findStateName(prop?.states, ref.state_id));
+  }
+  for (const item of scene.actions ?? []) {
+    addItemSearchText(parts, item, maps.actorMap, maps.speakerMap);
+  }
+  return parts.join("\n");
+}
+function addItemSearchText(parts, item, actorMap, speakerMap) {
+  add(parts, item.content);
+  add(parts, translateEmotionLabel(item.emotion));
+  if (isActorBearingContentType(item.type)) {
+    add(parts, getDialogueSpeakerLabel(item, actorMap, speakerMap));
+  }
+  for (const line of item.lines ?? []) {
+    add(parts, getDialogueSpeakerLabel({ speaker_id: line.speaker_id }, actorMap, speakerMap));
+    add(parts, line.content);
+  }
+}
+function buildScriptSearchEntries(value) {
+  const entries = [];
+  const maps = {
+    actorMap: getActorMap(value.actors ?? []),
+    speakerMap: getSpeakerMap(value.speakers ?? []),
+    locationMap: getLocationMap(value.locations ?? []),
+    propMap: getPropMap(value.props ?? [])
+  };
+  const title = value.title?.trim();
+  if (title && (value.episodes?.length ?? 0) > 0) {
+    entries.push({
+      key: "title",
+      text: title,
+      selection: { kind: "episode", episodeIdx: 0 }
+    });
+  }
+  (value.episodes ?? []).forEach((episode, episodeIdx) => {
+    entries.push({
+      key: `episode:${episodeIdx}`,
+      text: getEpisodeTitle(episode, episodeIdx),
+      selection: { kind: "episode", episodeIdx }
+    });
+    (episode.scenes ?? []).forEach((scene, sceneIdx) => {
+      entries.push({
+        key: `scene:${episodeIdx}:${sceneIdx}`,
+        text: sceneSearchText(scene, sceneIdx, maps),
+        selection: { kind: "scene", episodeIdx, sceneIdx }
+      });
+    });
+  });
+  return entries;
+}
+function findScriptSearchMatches(entries, query) {
+  const needle = normalize(query);
+  if (!needle) return [];
+  const matches = [];
+  for (const entry of entries) {
+    if (normalize(entry.text).includes(needle)) {
+      matches.push({ entry, index: matches.length });
+    }
+  }
+  return matches;
+}
+function ScriptSearchLayer({
+  value,
+  disabled,
+  rootRef,
+  selection,
+  onSelectionChange,
+  children
+}) {
+  const editorActiveRef = useRef(false);
+  const inputRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [cursor, setCursor] = useState(0);
+  const entries = useMemo(() => buildScriptSearchEntries(value), [value]);
+  const matches = useMemo(() => findScriptSearchMatches(entries, query), [entries, query]);
+  const total = matches.length;
+  const current = total > 0 ? Math.min(cursor, total - 1) : 0;
+  const selectMatch = useCallback(
+    (index) => {
+      const match = matches[index];
+      if (!match) return;
+      const next = withOrigin(match.entry.selection, "search");
+      setCursor(index);
+      if (!isSameSelectionTarget(next, selection)) onSelectionChange(next);
+    },
+    [matches, onSelectionChange, selection]
+  );
+  const openSearch = useCallback(() => {
+    setOpen(true);
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  }, []);
+  const closeSearch = useCallback(() => setOpen(false), []);
+  const updateQuery = useCallback((next) => {
+    setQuery(next);
+    setCursor(0);
+  }, []);
+  const nextMatch = useCallback(() => {
+    if (total > 0) selectMatch((current + 1) % total);
+  }, [current, selectMatch, total]);
+  const prevMatch = useCallback(() => {
+    if (total > 0) selectMatch((current - 1 + total) % total);
+  }, [current, selectMatch, total]);
+  useEffect(() => {
+    if (open && total > 0) selectMatch(current);
+  }, [current, open, selectMatch, total]);
+  useEffect(() => {
+    if (!disabled && open) openSearch();
+  }, [disabled, open, openSearch]);
+  useEffect(() => {
+    if (disabled) return;
+    const rememberActive = (target) => {
+      editorActiveRef.current = target instanceof Node && !!rootRef.current?.contains(target);
+    };
+    const onPointerDown = (e) => rememberActive(e.target);
+    const onFocusIn = (e) => rememberActive(e.target);
+    const onKeyDown = (e) => {
+      if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "f") return;
+      const target = e.target;
+      const targetInside = target instanceof Node && !!rootRef.current?.contains(target);
+      if (!targetInside) {
+        if (target instanceof HTMLElement && target !== document.body) return;
+        if (!editorActiveRef.current) return;
+      }
+      e.preventDefault();
+      openSearch();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("focusin", onFocusIn, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("focusin", onFocusIn, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [disabled, openSearch, rootRef]);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    open ? /* @__PURE__ */ jsx(
+      ScriptSearchBox,
+      {
+        query,
+        current,
+        total,
+        inputRef,
+        onQueryChange: updateQuery,
+        onPrev: prevMatch,
+        onNext: nextMatch,
+        onClose: closeSearch
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(HighlightContext.Provider, { value: open ? query : "", children })
+  ] });
+}
 function ScriptEditor({
   value,
   onEdit,
@@ -3968,6 +4241,7 @@ function ScriptEditor({
     },
     [onFormatChange]
   );
+  const rootRef = useRef(null);
   const sceneKindByKey = useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     for (const s of diff?.scenes ?? []) m.set(sceneChangeKey(s.episodeIdx, s.sceneId), s.kind);
@@ -4057,54 +4331,71 @@ function ScriptEditor({
       onRequestAssetDelete
     }
   );
-  return /* @__PURE__ */ jsx(EditingSignalContext.Provider, { value: editingSignal, children: /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
-    toc === "sidebar" ? /* @__PURE__ */ jsx(
-      StudioToc,
-      {
-        data: value,
-        selection,
-        onSelect: setSelection,
-        onAddEpisode: disabled ? void 0 : () => onEdit((p) => addEpisode(p))
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs("div", { className: "lj-se-main", children: [
-      /* @__PURE__ */ jsx(
-        CanvasTopBar,
-        {
-          title: value.title,
-          onTitleChange: disabled ? void 0 : onTitleChange,
-          titleDisabled: disabled,
-          contextLabel,
-          format,
-          onFormatChange: setFormat,
-          canUndo,
-          canRedo,
-          onUndo,
-          onRedo,
-          actions: topBarActions
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "lj-se-canvas", ref: canvasRef, children: [
-        center,
-        onAddChatReferences ? /* @__PURE__ */ jsx(QuoteLayer, { containerRef: canvasRef, onAddChatReferences }) : null,
-        /* @__PURE__ */ jsx(
-          SaveCapsule,
+  return /* @__PURE__ */ jsx(EditingSignalContext.Provider, { value: editingSignal, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: rootClass,
+      ref: rootRef,
+      children: [
+        toc === "sidebar" ? /* @__PURE__ */ jsx(
+          StudioToc,
           {
-            saveStatus,
-            diffCount,
-            baselineStatus: diff?.baselineStatus,
-            canApplyDiff: !!(diff?.onAcceptAll || diff?.onRejectAll),
-            onDiffPrev: changedSelections.length > 0 ? () => navDiff(-1) : void 0,
-            onDiffNext: changedSelections.length > 0 ? () => navDiff(1) : void 0,
-            onAcceptAll: diff?.onAcceptAll,
-            onRejectAll: diff?.onRejectAll,
-            returnLabel: returnTarget?.label,
-            onReturn: returnTarget ? () => setSelection(returnTarget.selection) : void 0
+            data: value,
+            selection,
+            onSelect: setSelection,
+            onAddEpisode: disabled ? void 0 : () => onEdit((p) => addEpisode(p))
           }
-        )
-      ] })
-    ] })
-  ] }) });
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "lj-se-main", children: [
+          /* @__PURE__ */ jsx(
+            CanvasTopBar,
+            {
+              title: value.title,
+              onTitleChange: disabled ? void 0 : onTitleChange,
+              titleDisabled: disabled,
+              contextLabel,
+              format,
+              onFormatChange: setFormat,
+              canUndo,
+              canRedo,
+              onUndo,
+              onRedo,
+              actions: topBarActions
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "lj-se-canvas", ref: canvasRef, children: [
+            /* @__PURE__ */ jsx(
+              ScriptSearchLayer,
+              {
+                value,
+                disabled,
+                rootRef,
+                selection,
+                onSelectionChange: setSelection,
+                children: center
+              }
+            ),
+            onAddChatReferences ? /* @__PURE__ */ jsx(QuoteLayer, { containerRef: canvasRef, onAddChatReferences }) : null,
+            /* @__PURE__ */ jsx(
+              SaveCapsule,
+              {
+                saveStatus,
+                diffCount,
+                baselineStatus: diff?.baselineStatus,
+                canApplyDiff: !!(diff?.onAcceptAll || diff?.onRejectAll),
+                onDiffPrev: changedSelections.length > 0 ? () => navDiff(-1) : void 0,
+                onDiffNext: changedSelections.length > 0 ? () => navDiff(1) : void 0,
+                onAcceptAll: diff?.onAcceptAll,
+                onRejectAll: diff?.onRejectAll,
+                returnLabel: returnTarget?.label,
+                onReturn: returnTarget ? () => setSelection(returnTarget.selection) : void 0
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  ) });
 }
 function buildContextLabel(value, selection) {
   if (selection.kind === "worldview") {