Add analysis-keyed mutations (edit, merge, delete)

.github/dependabot.yml

@@ -28,6 +28,9 @@ updates:
       - dependency-name: platform-bible-react
     allow:
       # dependencies
+      - dependency-name: '@dnd-kit/core'
+      - dependency-name: '@dnd-kit/sortable'
+      - dependency-name: '@dnd-kit/utilities'
       - dependency-name: '@reduxjs/toolkit'
       - dependency-name: react-redux
       # devDependencies
@@ -52,6 +55,7 @@ updates:
         applies-to: version-updates
         update-types: ['minor', 'patch']
         patterns:
+          - '@dnd-kit/*'
           - '@reduxjs/toolkit'
           - react-redux
       dev-tooling:

__mocks__/lucide-react.tsx

@@ -12,6 +12,20 @@ export function LocateFixed(props: Readonly<{ className?: string }>): ReactEleme
   return <svg data-testid="locate-fixed-icon" {...props} />;
 }
 
+/**
+ * Stub for the ArrowUpToLine icon.
+ */
+export function ArrowUpToLine(props: Readonly<{ className?: string }>): ReactElement {
+  return <svg data-testid="arrow-up-to-line-icon" {...props} />;
+}
+
+/**
+ * Stub for the GripVertical icon.
+ */
+export function GripVertical(props: Readonly<{ className?: string }>): ReactElement {
+  return <svg data-testid="grip-vertical-icon" {...props} />;
+}
+
 /**
  * Stub for the Info icon.
  */
@@ -77,6 +91,11 @@ export function Merge(props: Readonly<{ className?: string }>): ReactElement {
   return <svg data-testid="merge-icon" {...props} />;
 }
 
+/** Stub for the ArrowRight icon. */
+export function ArrowRight(props: Readonly<{ className?: string }>): ReactElement {
+  return <svg data-testid="arrow-right-icon" {...props} />;
+}
+
 /**
  * Stub for the Split icon: one stroke diverging into two, the mirror of the {@link Merge} glyph's
  * join.

__mocks__/platform-bible-react.tsx

@@ -20,6 +20,7 @@ import {
 } from 'react';
 import type {
   ChangeEventHandler,
+  FocusEventHandler,
   CSSProperties,
   KeyboardEventHandler,
   MouseEventHandler,
@@ -420,6 +421,7 @@ export const Input = forwardRef<
     className?: string;
     style?: CSSProperties;
     disabled?: boolean;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     'aria-label'?: string;
@@ -434,6 +436,7 @@ export const Input = forwardRef<
     className,
     style,
     disabled,
+    onBlur,
     onChange,
     onKeyDown,
     'aria-label': ariaLabel,
@@ -451,6 +454,7 @@ export const Input = forwardRef<
       className={className}
       style={style}
       disabled={disabled}
+      onBlur={onBlur}
       onChange={onChange}
       onKeyDown={onKeyDown}
       aria-label={ariaLabel}
@@ -610,6 +614,42 @@ export function Switch({
   );
 }
 
+/**
+ * Stub checkbox rendered as a native `<input type="checkbox">` so `toBeChecked`, `toBeDisabled`, and
+ * click interactions work in tests. (The real component renders a `<button role="checkbox">`; a
+ * native checkbox plays nicely with jest-dom's checked/disabled matchers.)
+ */
+export function Checkbox({
+  'aria-label': ariaLabel,
+  checked,
+  className,
+  'data-testid': testId,
+  disabled,
+  id,
+  onCheckedChange,
+}: Readonly<{
+  'aria-label'?: string;
+  checked?: boolean;
+  className?: string;
+  'data-testid'?: string;
+  disabled?: boolean;
+  id?: string;
+  onCheckedChange?: (checked: boolean) => void;
+}>): ReactElement {
+  return (
+    <input
+      aria-label={ariaLabel}
+      checked={checked ?? false}
+      className={className}
+      data-testid={testId}
+      disabled={disabled}
+      id={id}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      type="checkbox"
+    />
+  );
+}
+
 /**
  * Context carrying the {@link RadioGroup}'s selected value and change handler down to each
  * {@link RadioGroupItem}, mirroring how the real Radix-based component coordinates its items.
@@ -651,27 +691,33 @@ export function RadioGroup({
  * plays nicely with jest-dom's checked/disabled matchers.)
  */
 export function RadioGroupItem({
+  'aria-label': ariaLabel,
   className,
   'data-testid': testId,
   disabled,
   id,
+  style,
   value,
 }: Readonly<{
+  'aria-label'?: string;
   className?: string;
   'data-testid'?: string;
   disabled?: boolean;
   id?: string;
+  style?: CSSProperties;
   value: string;
 }>): ReactElement {
   const { onValueChange, value: groupValue } = useContext(RadioGroupContext);
   return (
     <input
+      aria-label={ariaLabel}
       checked={groupValue === value}
       className={className}
       data-testid={testId}
       disabled={disabled}
       id={id}
       onChange={() => onValueChange?.(value)}
+      style={style}
       type="radio"
     />
   );
@@ -918,25 +964,26 @@ const mountedDialogs: { current?: (open: boolean) => void }[] = [];
 /**
  * Stub dialog surface rendered as a `<div role="dialog" data-slot="dialog-content">` — the slot
  * being what tells a modal apart from a popover, since both carry the dialog role — that reports
- * Escape back through the root's change handler, which is the one dismissal path the extension's
- * own code implements. The
- * real component additionally traps focus, locks scrolling, and restores focus on close; those are
- * behaviors of the platform package rather than of this extension, so they are left to end-to-end
- * coverage rather than faked here.
+ * Escape and outside clicks back through the root's change handler, those being the dismissal
+ * paths the extension's own code implements. The real component additionally traps focus, locks
+ * scrolling, and restores focus on close; those are behaviors of the platform package rather than
+ * of this extension, so they are left to end-to-end coverage rather than faked here.
  *
- * `onInteractOutside` is accepted and ignored — there is no outside region to click in this stub.
- * A close button is never rendered because the extension always suppresses it.
+ * A sentinel `data-testid="dialog-outside"` button stands in for the region outside the surface:
+ * clicking it invokes `onInteractOutside` and, unless that prevents the event, reports the
+ * dismissal. The ref lands on the surface, as the real component's does. A close button is never
+ * rendered because the extension always suppresses it.
  */
-export function DialogContent({
-  children,
-  className,
-}: Readonly<{
-  'aria-describedby'?: undefined;
-  children?: ReactNode;
-  className?: string;
-  onInteractOutside?: (event: { preventDefault: () => void }) => void;
-  showCloseButton?: boolean;
-}>): ReactElement {
+export const DialogContent = forwardRef<
+  HTMLDivElement,
+  Readonly<{
+    'aria-describedby'?: undefined;
+    children?: ReactNode;
+    className?: string;
+    onInteractOutside?: (event: { preventDefault: () => void }) => void;
+    showCloseButton?: boolean;
+  }>
+>(function DialogContent({ children, className, onInteractOutside }, ref): ReactElement {
   const { onOpenChange, titleId } = useContext(DialogContext);
   const onOpenChangeRef = useRef(onOpenChange);
   useEffect(() => {
@@ -959,17 +1006,38 @@ export function DialogContent({
   }, []);
 
   return (
-    <div
-      aria-labelledby={titleId}
-      aria-modal="true"
-      className={className}
-      data-slot="dialog-content"
-      role="dialog"
-    >
-      {children}
-    </div>
+    <>
+      <div
+        ref={ref}
+        aria-labelledby={titleId}
+        aria-modal="true"
+        className={className}
+        data-slot="dialog-content"
+        role="dialog"
+      >
+        {children}
+      </div>
+      {/* Hidden from the accessibility tree: scaffolding standing in for the region outside the
+          surface is no control of the real component's. */}
+      <button
+        aria-hidden="true"
+        data-testid="dialog-outside"
+        type="button"
+        onClick={() => {
+          let prevented = false;
+          onInteractOutside?.({
+            preventDefault: () => {
+              prevented = true;
+            },
+          });
+          if (!prevented) onOpenChangeRef.current?.(false);
+        }}
+      >
+        outside
+      </button>
+    </>
   );
-}
+});
 
 /**
  * Stub dialog title rendered as the `<h2>` the real component produces, keeping the heading role and
@@ -997,10 +1065,14 @@ export function DialogTitle({
  * Context carrying the {@link Popover}'s open state and change handler down to
  * {@link PopoverTrigger}, mirroring how the real Radix-based component coordinates the two.
  */
-const PopoverContext = createContext<{
-  onOpenChange?: (open: boolean) => void;
-  open?: boolean;
-}>({});
+// Undefined outside a Popover, so PopoverAnchor can refuse as the real component does.
+const PopoverContext = createContext<
+  | {
+      onOpenChange?: (open: boolean) => void;
+      open?: boolean;
+    }
+  | undefined
+>(undefined);
 
 /**
  * Stub popover root that renders its children unconditionally. The extension conditionally mounts
@@ -1048,14 +1120,27 @@ export function PopoverTrigger({
  * Stub popover anchor that renders its children as-is, matching the real component's `asChild`
  * pass-through behavior.
  */
+/**
+ * Stub portal-container provider, rendering its children where they stand — jsdom has no portal
+ * behavior worth reproducing.
+ */
+export function PopoverPortalContainerProvider({
+  children,
+}: Readonly<{ children?: ReactNode; container?: HTMLElement | null }>): ReactElement {
+  return <>{children}</>;
+}
+
 export function PopoverAnchor({
   children,
 }: Readonly<{ children?: ReactNode; asChild?: boolean }>): ReactElement {
+  // Throws outside a Popover as the real component does.
+  if (useContext(PopoverContext) === undefined)
+    throw new Error('`PopoverAnchor` must be used within `Popover`');
   return <>{children}</>;
 }
 
 /**
- * Stub popover content rendered as a `<div role="dialog" data-testid="popover-content">` — the role
+ * Stub popover content rendered as a `<div role="dialog" data-slot="popover-content">` — the role
  * matching the real component, which is what makes its `aria-label` meaningful, and which is why a
  * test that must reach a modal instead selects on `[data-slot="dialog-content"]`. The real component
  * implements positioning, portaling, and dismissal internally; this stub exposes the dismissal
@@ -1140,6 +1225,7 @@ export function PopoverContent({
         ref={contentRef}
         aria-label={ariaLabel}
         className={className}
+        data-slot="popover-content"
         data-testid={testId}
         id={id}
         role={role}

contributions/localizedStrings.json

@@ -47,11 +47,65 @@
       "%interlinearizer_analysisCatalog_confidence_low%": "Low",
       "%interlinearizer_analysisCatalog_confidence_guess%": "Guess",
       "%interlinearizer_analysisCatalog_noGloss%": "(no gloss)",
+      "%interlinearizer_analysisCatalog_morphemeNoGloss%": "(no gloss)",
+      "%interlinearizer_analysisCatalog_noBreakdown%": "(not split into morphemes)",
       "%interlinearizer_analysisCatalog_usageCount%": "Uses in the whole draft",
       "%interlinearizer_analysisCatalog_usageCountInBook%": "Uses in {book}",
       "%interlinearizer_analysisCatalog_noUsages%": "Not used anywhere",
       "%interlinearizer_analysisCatalog_showAllUsages%": "Show {count} more",
 
+      "%interlinearizer_analysisCatalog_editGloss%": "Gloss",
+      "%interlinearizer_analysisCatalog_editMorphemes%": "Split into morphemes",
+      "%interlinearizer_analysisCatalog_editMorphemesHint%": "Enter morpheme forms separated by spaces",
+      "%interlinearizer_analysisCatalog_editMorphemesSave%": "Save breakdown",
+      "%interlinearizer_analysisCatalog_editMorphemesCancel%": "Cancel",
+      "%interlinearizer_analysisCatalog_editMorphemesReset%": "Discard breakdown",
+      "%interlinearizer_analysisCatalog_editMorphemesOpen%": "Edit breakdown for {form}",
+      "%interlinearizer_analysisCatalog_confirmResetPrompt%": "Discard this breakdown, with the glosses and lexicon links on it, everywhere {form} is used?",
+      "%interlinearizer_analysisCatalog_confirmResetAction%": "Discard breakdown",
+      "%interlinearizer_analysisCatalog_confirmResplitPrompt%": "This breakdown drops {forms}, discarding the glosses and lexicon links on them everywhere this analysis is used. Save anyway?",
+      "%interlinearizer_analysisCatalog_confirmResplitAction%": "Save and discard",
+      "%interlinearizer_analysisCatalog_morphemeGloss%": "Gloss for morpheme {form}",
+      "%interlinearizer_analysisCatalog_appliesToAll%": "Edits here apply to all {count} uses of this analysis.",
+      "%interlinearizer_analysisCatalog_merge%": "Merge…",
+      "%interlinearizer_analysisCatalog_mergeTitle%": "Merge an analysis",
+      "%interlinearizer_analysisCatalog_mergeForm%": "Form",
+      "%interlinearizer_analysisCatalog_mergeUsageCount%": "{count} uses",
+      "%interlinearizer_analysisCatalog_mergePromote%": "Merge the others into {gloss}",
+      "%interlinearizer_analysisCatalog_mergeReorder%": "Reorder {gloss}",
+      "%interlinearizer_analysisCatalog_mergeRevertField%": "Undo this edit",
+      "%interlinearizer_analysisCatalog_mergeMorphemeGlosses%": "Morpheme glosses",
+      "%interlinearizer_analysisCatalog_mergeClearMorphemeGloss%": "Clear the gloss for {form}",
+      "%interlinearizer_analysisCatalog_mergeConfidence%": "Confidence",
+      "%interlinearizer_analysisCatalog_mergeConfidenceNone%": "Not recorded",
+      "%interlinearizer_analysisCatalog_mergeReset%": "Undo all edits",
+      "%interlinearizer_analysisCatalog_mergeWillCollapse%": "This will also absorb the identical analysis {gloss}, which is not selected.",
+      "%interlinearizer_analysisCatalog_mergeCancel%": "Cancel",
+      "%interlinearizer_analysisCatalog_mergeConfirm%": "Merge",
+      "%interlinearizer_analysisCatalog_merged%": "Merged into {gloss} — now {count} uses.",
+      "%interlinearizer_analysisCatalog_mergedNoGloss%": "Merged into {form} — now {count} uses.",
+      "%interlinearizer_analysisCatalog_mergedDismiss%": "Dismiss",
+      "%interlinearizer_analysisCatalog_draftStranded%": "An edit elsewhere removed the analysis of {form}, discarding the breakdown you were typing for it.",
+      "%interlinearizer_analysisCatalog_delete%": "Delete",
+      "%interlinearizer_analysisCatalog_deleteTitle%": "Delete the analysis of {form}?",
+      "%interlinearizer_analysisCatalog_deleteBlank%": "{count} uses will be left with no analysis.",
+      "%interlinearizer_analysisCatalog_deleteBlankNone%": "No token is analyzed as this, so nothing on screen changes.",
+      "%interlinearizer_analysisCatalog_deleteFallback%": "{count} uses will fall back to {gloss}.",
+      "%interlinearizer_analysisCatalog_deleteFallbackNoGloss%": "{count} uses will fall back to another analysis of the same form.",
+      "%interlinearizer_analysisCatalog_deleteFallbackDrifted%": "{count} uses will fall back to another analysis, which one depending on the text beneath each of them.",
+      "%interlinearizer_analysisCatalog_deleteUnapplied%": "{count} tokens also record this analysis without using it; those records are deleted too.",
+      "%interlinearizer_analysisCatalog_deleteUndoWarning%": "This cannot be undone.",
+      "%interlinearizer_analysisCatalog_deleteCancel%": "Cancel",
+      "%interlinearizer_analysisCatalog_deleteConfirm%": "Delete",
+      "%interlinearizer_analysisCatalog_closeConfirmTitle%": "Discard the unsaved breakdown?",
+      "%interlinearizer_analysisCatalog_closeConfirmPrompt%": "You have typed a morpheme breakdown but not saved it. Closing the catalog discards it.",
+      "%interlinearizer_analysisCatalog_closeConfirmCancel%": "Keep editing",
+      "%interlinearizer_analysisCatalog_closeConfirmDiscard%": "Discard and close",
+      "%interlinearizer_analysisCatalog_discardForDeletePrompt%": "You have typed a morpheme breakdown but not saved it. Deleting this analysis discards it.",
+      "%interlinearizer_analysisCatalog_discardForDeleteConfirm%": "Discard and delete",
+      "%interlinearizer_analysisCatalog_discardForMergePrompt%": "You have typed a morpheme breakdown but not saved it. Merging this analysis discards it.",
+      "%interlinearizer_analysisCatalog_discardForMergeConfirm%": "Discard and merge",
+
       "%interlinearizer_projectSettings_title%": "Interlinearizer",
       "%interlinearizer_projectSettings_continuousScroll%": "Continuous Scroll",
       "%interlinearizer_projectSettings_continuousScrollDescription%": "Display words in a continuous horizontal scroll strip instead of chapter-segmented rows",
@@ -83,8 +137,10 @@
       "%interlinearizer_morphemeEditor_cancel%": "Cancel",
       "%interlinearizer_morphemeEditor_done%": "Done",
       "%interlinearizer_morphemeEditor_emptyHint%": "Enter morpheme forms separated by spaces",
-      "%interlinearizer_morphemeEditor_confirmResetPrompt%": "Discard this breakdown and its glosses?",
+      "%interlinearizer_morphemeEditor_confirmResetPrompt%": "Discard this breakdown, with the glosses and lexicon links on it?",
       "%interlinearizer_morphemeEditor_confirmResetAction%": "Reset",
+      "%interlinearizer_morphemeEditor_confirmResplitPrompt%": "This breakdown drops {forms}, discarding the glosses and lexicon links on them. Save anyway?",
+      "%interlinearizer_morphemeEditor_confirmResplitAction%": "Save and discard",
       "%interlinearizer_morphemeGloss_label%": "Gloss for morpheme {form}",
       "%interlinearizer_tokenChip_editMorphemes%": "Edit morpheme breakdown for {token}",
       "%interlinearizer_tokenChip_defineMorphemes%": "Define morpheme breakdown for {token}",