@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/Kanban.js

@@ -8,7 +8,7 @@ function Kanban({ announcement, children, className, ...props }) {
     children
   ] });
 }
-function KanbanColumn({ title, count, children, className, ...props }) {
+function KanbanColumn({ title, count, dropTarget, children, className, ...props }) {
   const headId = useId();
   const hasHead = title != null || count != null;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-kanban__col", className), ...props, children: [
@@ -16,7 +16,7 @@ function KanbanColumn({ title, count, children, className, ...props }) {
       title,
       count != null && /* @__PURE__ */ jsx("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, children })
+    /* @__PURE__ */ jsx("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, "data-uix-drop-target": dropTarget || void 0, children })
   ] });
 }
 const MOVE_KEYS = {
@@ -25,7 +25,7 @@ const MOVE_KEYS = {
   ArrowLeft: "left",
   ArrowRight: "right"
 };
-function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }) {
+function KanbanCard({ title, meta, children, className, onMove, onKeyDown, dragging, ...props }) {
   const handleKeyDown = (e) => {
     onKeyDown?.(e);
     if (!onMove || !e.altKey || e.defaultPrevented) return;
@@ -42,6 +42,7 @@ function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...pr
       tabIndex: 0,
       className: cx("uix-kanban__card", className),
       onKeyDown: handleKeyDown,
+      "data-uix-drag": dragging ? "lifted" : void 0,
       ...props,
       children: [
         title && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-title", children: title }),
@@ -51,8 +52,12 @@ function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...pr
     }
   );
 }
+function KanbanDropLine({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cx("uix-drop-line", className), "aria-hidden": "true" });
+}
 export {
   Kanban,
   KanbanCard,
-  KanbanColumn
+  KanbanColumn,
+  KanbanDropLine
 };

package/dist/components/Kbd.d.ts

@@ -26,6 +26,11 @@ type KeyShortcut = readonly string[];
 declare function ariaKeyShortcuts(keys: KeyShortcut, platform: KbdPlatform): string;
 /** A `shortcut` prop that is key names rather than a node (HAR-2031). */
 declare const isKeyShortcut: (value: unknown) => value is KeyShortcut;
+/**
+ * What a screen reader should hear for a shortcut: the key names joined with "+", e.g.
+ * "Control+K" or "Command+K" (HAR-2416). The same text `KbdCombo` speaks. Internal.
+ */
+declare function spokenKeys(keys: KeyShortcut, platform: KbdPlatform, keyLabels?: Partial<Record<string, string>>): string;
 interface KbdComboProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**
      * Keys in order, e.g. `['Mod', 'K']`. `Mod` is ⌘ on Apple and Ctrl elsewhere; `Shift`,
@@ -43,4 +48,4 @@ interface KbdComboProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'
  */
 declare function KbdCombo({ keys, platform, keyLabels, className, ...props }: KbdComboProps): react.JSX.Element;
 
-export { Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps, type KeyShortcut, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform };
+export { Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps, type KeyShortcut, ariaKeyShortcuts, isKeyShortcut, spokenKeys, useKbdPlatform };

package/dist/components/Kbd.js

@@ -48,15 +48,14 @@ function ariaKeyShortcuts(keys, platform) {
   return keys.map((key) => ARIA_KEYS[key]?.[platform] ?? (key.length === 1 ? key.toUpperCase() : key)).join("+");
 }
 const isKeyShortcut = (value) => Array.isArray(value) && value.length > 0 && value.every((key) => typeof key === "string");
+function spokenKeys(keys, platform, keyLabels) {
+  return keys.map((key) => keyLabels?.[key] ?? KEYS[key]?.[platform]?.[1] ?? key).join("+");
+}
 function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
   const active = useKbdPlatform(platform);
-  const parts = keys.map((key) => {
-    const known = KEYS[key]?.[active];
-    return { glyph: known?.[0] ?? key, spoken: keyLabels?.[key] ?? known?.[1] ?? key };
-  });
   return /* @__PURE__ */ jsxs("span", { className: cx("uix-kbd-combo", className), ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: parts.map((p) => p.spoken).join("+") }),
-    /* @__PURE__ */ jsx("span", { className: "uix-kbd-combo__keys", "aria-hidden": "true", children: parts.map((p, i) => /* @__PURE__ */ jsx("kbd", { className: "uix-kbd", children: p.glyph }, `${keys[i]}-${i}`)) })
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: spokenKeys(keys, active, keyLabels) }),
+    /* @__PURE__ */ jsx("span", { className: "uix-kbd-combo__keys", "aria-hidden": "true", children: keys.map((key, i) => /* @__PURE__ */ jsx("kbd", { className: "uix-kbd", children: KEYS[key]?.[active]?.[0] ?? key }, `${key}-${i}`)) })
   ] });
 }
 export {
@@ -64,5 +63,6 @@ export {
   KbdCombo,
   ariaKeyShortcuts,
   isKeyShortcut,
+  spokenKeys,
   useKbdPlatform
 };

package/dist/components/Lightbox.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, KeyboardEvent } from 'react';
 
 interface LightboxItem {
     src: string;
@@ -22,6 +22,21 @@ interface LightboxLabels {
     zoomOut: string;
 }
 declare const DEFAULT_LIGHTBOX_LABELS: LightboxLabels;
+/** What `renderOverlay` receives (HAR-1826). */
+interface LightboxOverlayContext {
+    /** The item on show (0-based) and the item itself. */
+    index: number;
+    item: LightboxItem;
+    /** The rendered `<img>` or `<video>`; `naturalWidth` / `videoWidth` give the bitmap size. */
+    media: HTMLImageElement | HTMLVideoElement | null;
+    /**
+     * The overlay's size in CSS pixels. The overlay covers exactly the picture (not the letterbox
+     * around a fitted one), so a point at `(x, y)` in it is bitmap pixel
+     * `(x / width * naturalWidth, y / height * naturalHeight)`. 0 until the media has loaded.
+     */
+    width: number;
+    height: number;
+}
 interface LightboxProps {
     items: readonly LightboxItem[];
     /** The item on show (0-based). */
@@ -33,13 +48,34 @@ interface LightboxProps {
     loop?: boolean;
     labels?: Partial<LightboxLabels>;
     className?: string;
+    /**
+     * Buttons for the toolbar beside Close (HAR-1826), e.g. "Hide area" and "Undo" on a viewer
+     * that redacts a screenshot. Tab order: these, then Close. They sit inside the dialog.
+     */
+    actions?: ReactNode;
+    /**
+     * Content laid over the picture, in the picture's own box: it moves and scales with the
+     * fit / actual-size toggle. Pointer events on it never swipe or page, so it can draw. Each
+     * child positions itself (`position: absolute` in `%`, or px of `width` / `height`).
+     */
+    renderOverlay?: (context: LightboxOverlayContext) => ReactNode;
+    /**
+     * Runs first for every key in the viewer. Call `event.preventDefault()` to claim the key:
+     * the viewer then neither pages (arrows, Home, End) nor closes (Escape). For a draft that
+     * arrow keys move and Escape cancels.
+     */
+    onKeyDown?: (event: KeyboardEvent<HTMLDialogElement>) => void;
+    /** Escape only: `event.preventDefault()` keeps the viewer open. */
+    onEscapeKeyDown?: (event: KeyboardEvent<HTMLDialogElement>) => void;
 }
 /**
  * A full-screen media viewer over `.uix-lightbox` (HAR-1367; TENSOR C12 `capture-viewer.tsx`,
  * MOTUS C-8 programme gallery): previous/next buttons, ←/→ and Home/End, swipe on touch, an
- * announced "n of total" counter, a caption, and a fit/actual-size toggle. Native `<dialog>`,
- * so focus stays inside and Escape closes; focus returns to the control that opened it.
+ * announced "n of total" counter (not for a single item), a caption, and a fit/actual-size
+ * toggle. Native `<dialog>`, so focus stays inside and Escape closes; focus returns to the
+ * control that opened it. An annotating viewer (HAR-1826) adds toolbar `actions`, draws in
+ * `renderOverlay`, and claims Escape and the arrows with `onKeyDown` while a draft is open.
  */
-declare function Lightbox({ items, index, onIndexChange, open, onClose, loop, labels: labelOverrides, className }: LightboxProps): react.JSX.Element;
+declare function Lightbox({ items, index, onIndexChange, open, onClose, loop, labels: labelOverrides, className, actions, renderOverlay, onKeyDown: onKeyDownProp, onEscapeKeyDown, }: LightboxProps): react.JSX.Element;
 
-export { DEFAULT_LIGHTBOX_LABELS, Lightbox, type LightboxItem, type LightboxLabels, type LightboxProps };
+export { DEFAULT_LIGHTBOX_LABELS, Lightbox, type LightboxItem, type LightboxLabels, type LightboxOverlayContext, type LightboxProps };

package/dist/components/Lightbox.js

@@ -1,9 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { fillLabel } from "../fill-label.js";
 import { useDialog } from "../hooks/useDialog.js";
+import { useUixLabels } from "../labels-context.js";
 const DEFAULT_LIGHTBOX_LABELS = {
   region: "Media viewer",
   previous: "Previous",
@@ -13,10 +14,42 @@ const DEFAULT_LIGHTBOX_LABELS = {
   zoomIn: "Show actual size",
   zoomOut: "Fit to screen"
 };
+function containedBox(media) {
+  const boxW = media.clientWidth;
+  const boxH = media.clientHeight;
+  const naturalW = "naturalWidth" in media ? media.naturalWidth : media.videoWidth;
+  const naturalH = "naturalHeight" in media ? media.naturalHeight : media.videoHeight;
+  if (!naturalW || !naturalH || !boxW || !boxH) return { left: media.offsetLeft, top: media.offsetTop, width: boxW, height: boxH };
+  const scale = Math.min(boxW / naturalW, boxH / naturalH);
+  const width = naturalW * scale;
+  const height = naturalH * scale;
+  return { left: media.offsetLeft + (boxW - width) / 2, top: media.offsetTop + (boxH - height) / 2, width, height };
+}
 const Chevron = ({ dir }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: dir === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" }) });
-function Lightbox({ items, index, onIndexChange, open, onClose, loop = false, labels: labelOverrides, className }) {
-  const labels = { ...DEFAULT_LIGHTBOX_LABELS, ...labelOverrides };
-  const ref = useDialog(open, onClose);
+function Lightbox({
+  items,
+  index,
+  onIndexChange,
+  open,
+  onClose,
+  loop = false,
+  labels: labelOverrides,
+  className,
+  actions,
+  renderOverlay,
+  onKeyDown: onKeyDownProp,
+  onEscapeKeyDown
+}) {
+  const labels = { ...DEFAULT_LIGHTBOX_LABELS, ...useUixLabels().lightbox, ...labelOverrides };
+  const escapeClaimed = useRef(false);
+  const ref = useDialog(open, onClose, () => {
+    const claimed = escapeClaimed.current;
+    escapeClaimed.current = false;
+    return claimed;
+  });
+  const mediaRef = useRef(null);
+  const pressedBackdrop = useRef(false);
+  const [overlayBox, setOverlayBox] = useState(null);
   const closeRef = useRef(null);
   const returnTo = useRef(null);
   const swipe = useRef(null);
@@ -37,13 +70,47 @@ function Lightbox({ items, index, onIndexChange, open, onClose, loop = false, la
   useEffect(() => {
     setZoomed(false);
   }, [index]);
+  useEffect(() => {
+    if (!open) return;
+    const reset = () => {
+      escapeClaimed.current = false;
+    };
+    window.addEventListener("keydown", reset, true);
+    return () => window.removeEventListener("keydown", reset, true);
+  }, [open]);
+  const hasOverlay = renderOverlay != null;
+  const measure = useCallback(() => {
+    const media = mediaRef.current;
+    if (!media) {
+      setOverlayBox(null);
+      return;
+    }
+    const box = containedBox(media);
+    setOverlayBox((prev) => prev && prev.left === box.left && prev.top === box.top && prev.width === box.width && prev.height === box.height ? prev : box);
+  }, []);
+  useLayoutEffect(() => {
+    if (!open || !hasOverlay) return;
+    measure();
+    const media = mediaRef.current;
+    if (!media || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(media);
+    return () => observer.disconnect();
+  }, [open, index, zoomed, hasOverlay, measure]);
   const go = (to) => {
     if (total === 0) return;
     const next = loop ? (to + total) % total : Math.min(Math.max(to, 0), total - 1);
     if (next !== index) onIndexChange(next);
   };
   const onKeyDown = (event) => {
+    onKeyDownProp?.(event);
+    if (event.key === "Escape" && !event.defaultPrevented) onEscapeKeyDown?.(event);
+    if (event.defaultPrevented) {
+      if (event.key === "Escape") escapeClaimed.current = true;
+      return;
+    }
     if (event.target.closest("video")) return;
+    if (event.target.closest('input, textarea, select, [contenteditable="true"]')) return;
     if (event.key === "ArrowLeft") {
       event.preventDefault();
       go(index - 1);
@@ -58,8 +125,9 @@ function Lightbox({ items, index, onIndexChange, open, onClose, loop = false, la
       go(total - 1);
     }
   };
+  const onOverlay = (event) => event.target.closest?.(".uix-lightbox__overlay") != null;
   const onPointerDown = (event) => {
-    if (event.pointerType !== "mouse") swipe.current = { x: event.clientX, id: event.pointerId };
+    if (event.pointerType !== "mouse" && !onOverlay(event)) swipe.current = { x: event.clientX, id: event.pointerId };
   };
   const onPointerUp = (event) => {
     const start = swipe.current;
@@ -74,15 +142,30 @@ function Lightbox({ items, index, onIndexChange, open, onClose, loop = false, la
       ref,
       className: cx("uix-lightbox", "uix-lightbox--gallery", className),
       "aria-label": labels.region,
+      "data-actions": actions != null || void 0,
       onKeyDown,
+      onPointerDown: (event) => {
+        pressedBackdrop.current = event.target === event.currentTarget;
+      },
       onClick: (event) => {
-        if (event.target === event.currentTarget) onClose();
+        if (event.target === event.currentTarget && pressedBackdrop.current) onClose();
+        pressedBackdrop.current = false;
       },
       children: [
         current && /* @__PURE__ */ jsxs("figure", { className: "uix-lightbox__figure", children: [
-          /* @__PURE__ */ jsx("div", { className: "uix-lightbox__stage", "data-zoomed": zoomed || void 0, onPointerDown, onPointerUp, children: current.kind === "video" ? /* @__PURE__ */ jsx("video", { className: "uix-lightbox__media", src: current.src, controls: true, "aria-label": current.alt, width: current.width, height: current.height }) : /* @__PURE__ */ jsx("img", { className: "uix-lightbox__media", src: current.src, alt: current.alt, width: current.width, height: current.height }) }),
+          /* @__PURE__ */ jsxs("div", { className: "uix-lightbox__stage", "data-zoomed": zoomed || void 0, onPointerDown, onPointerUp, children: [
+            current.kind === "video" ? /* @__PURE__ */ jsx("video", { ref: mediaRef, className: "uix-lightbox__media", src: current.src, controls: true, "aria-label": current.alt, width: current.width, height: current.height, onLoadedMetadata: hasOverlay ? measure : void 0 }) : /* @__PURE__ */ jsx("img", { ref: mediaRef, className: "uix-lightbox__media", src: current.src, alt: current.alt, width: current.width, height: current.height, onLoad: hasOverlay ? measure : void 0 }),
+            renderOverlay && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "uix-lightbox__overlay",
+                style: overlayBox ? { left: overlayBox.left, top: overlayBox.top, width: overlayBox.width, height: overlayBox.height } : { inset: 0 },
+                children: renderOverlay({ index, item: current, media: mediaRef.current, width: overlayBox?.width ?? 0, height: overlayBox?.height ?? 0 })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs("figcaption", { className: "uix-lightbox__bar", children: [
-            /* @__PURE__ */ jsx("span", { className: "uix-lightbox__counter", "aria-live": "polite", children: fillLabel(labels.counter, { index: index + 1, total }) }),
+            total > 1 && /* @__PURE__ */ jsx("span", { className: "uix-lightbox__counter", "aria-live": "polite", children: fillLabel(labels.counter, { index: index + 1, total }) }),
             current.caption != null && /* @__PURE__ */ jsx("span", { className: "uix-lightbox__caption", children: current.caption }),
             current.kind !== "video" && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__tool", "aria-pressed": zoomed, onClick: () => setZoomed((z) => !z), children: zoomed ? labels.zoomOut : labels.zoomIn })
           ] })
@@ -91,7 +174,10 @@ function Lightbox({ items, index, onIndexChange, open, onClose, loop = false, la
           /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__nav uix-lightbox__nav--prev", "aria-label": labels.previous, disabled: !hasPrev, onClick: () => go(index - 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "left" }) }),
           /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__nav uix-lightbox__nav--next", "aria-label": labels.next, disabled: !hasNext, onClick: () => go(index + 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "right" }) })
         ] }),
-        /* @__PURE__ */ jsx("button", { ref: closeRef, type: "button", className: "uix-lightbox__close", "aria-label": labels.close, onClick: onClose, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })
+        /* @__PURE__ */ jsxs("div", { className: "uix-lightbox__toolbar", children: [
+          actions,
+          /* @__PURE__ */ jsx("button", { ref: closeRef, type: "button", className: "uix-lightbox__close", "aria-label": labels.close, onClick: onClose, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })
+        ] })
       ]
     }
   );

package/dist/components/MatchReview.d.ts

@@ -63,6 +63,33 @@ interface MatchReviewLabels {
     failedSuffix: string;
     bulkAcceptFailed: string;
     bulkDismissFailed: string;
+    /** Adopt mode (HAR-1369): a candidate's heading when `candidateLabel` gives none. `{id}`. */
+    candidate: string;
+    /** Adopt mode: the compare table's caption. `{candidate}`. */
+    compareCaption: string;
+    field: string;
+    /** Adopt mode: the column of the record as it is now. */
+    currentValue: string;
+    /** Adopt mode: the column of the candidate's values. */
+    candidateValue: string;
+    /** Adopt mode: the column of checkboxes. */
+    adopt: string;
+    /** Adopt mode: one checkbox's name. `{field}`, `{candidate}`. */
+    adoptField: string;
+    /** Adopt mode: shown instead of a checkbox when the candidate has the same value. */
+    same: string;
+    /** Adopt mode: the button with one field chosen. `{count}`. */
+    adoptSelectedOne: string;
+    /** Adopt mode: the button with any other number of fields chosen (0 too). `{count}`. */
+    adoptSelectedMany: string;
+    /** Adopt mode: the provenance disclosure. */
+    provenance: string;
+    /** Adopt mode: announced after `onAdopt` resolves, one field. `{count}`, `{candidate}`. */
+    adoptedOne: string;
+    /** Adopt mode: announced after `onAdopt` resolves, more fields. `{count}`, `{candidate}`. */
+    adoptedMany: string;
+    /** Adopt mode: shown when `onAdopt` rejects. */
+    adoptFailed: string;
 }
 declare const DEFAULT_MATCH_REVIEW_LABELS: MatchReviewLabels;
 interface MatchReviewProps {
@@ -79,8 +106,20 @@ interface MatchReviewProps {
     onRetry?: () => void;
     className?: string;
     labels?: Partial<MatchReviewLabels>;
+    /**
+     * `decide` (default): one row per candidate, decided as a whole. `adopt` (HAR-1369, MOTUS B-A9
+     * registry candidates): per candidate a table of the record now against the candidate, field
+     * by field, a checkbox per field that differs, and an Adopt button that calls `onAdopt`.
+     */
+    fieldMode?: 'decide' | 'adopt';
+    /** Adopt mode: take the chosen fields from the candidate. A promise keeps the button busy until it settles. */
+    onAdopt?: (candidateId: string, fieldIds: string[]) => void | Promise<unknown>;
+    /** Adopt mode: the candidate's heading, e.g. its source ("DNB", "Wikidata"). Default `labels.candidate`. */
+    candidateLabel?: (candidate: MatchReviewCandidate) => ReactNode;
+    /** Adopt mode: where a candidate comes from, in a disclosure under its table (source, retrieved, match reason). */
+    provenance?: (candidate: MatchReviewCandidate) => ReactNode;
 }
 /** Generic descriptor-driven incoming-record to candidate-match decision surface. */
-declare function MatchReview({ incoming, incomingLabel, fields, candidates, selectedIds, onSelectionChange, onDecision, onBulkDecision, loading, error, onRetry, className, labels: labelOverrides, }: MatchReviewProps): react.JSX.Element;
+declare function MatchReview({ incoming, incomingLabel, fields, candidates, selectedIds, onSelectionChange, onDecision, onBulkDecision, loading, error, onRetry, className, labels: labelOverrides, fieldMode, onAdopt, candidateLabel, provenance, }: MatchReviewProps): react.JSX.Element;
 
 export { DEFAULT_MATCH_REVIEW_LABELS, type MatchBulkResult, MatchReview, type MatchReviewAction, type MatchReviewCandidate, type MatchReviewField, type MatchReviewLabels, type MatchReviewProps };

package/dist/components/MatchReview.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { cx } from "../cx.js";
 import { StatusPill } from "./StatusPill.js";
+import { Button } from "./Button.js";
 import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { ChevronDownIcon } from "../icons/components.js";
 const DEFAULT_MATCH_REVIEW_LABELS = {
   region: "Match review",
   loading: "Loading match candidates\u2026",
@@ -43,7 +46,21 @@ const DEFAULT_MATCH_REVIEW_LABELS = {
   dismissedMany: "{count} candidates dismissed",
   failedSuffix: "; {count} failed",
   bulkAcceptFailed: "Bulk accept failed. Try again.",
-  bulkDismissFailed: "Bulk dismiss failed. Try again."
+  bulkDismissFailed: "Bulk dismiss failed. Try again.",
+  candidate: "Candidate {id}",
+  compareCaption: "{candidate}: the record now and the candidate, field by field",
+  field: "Field",
+  currentValue: "Now",
+  candidateValue: "Candidate",
+  adopt: "Adopt",
+  adoptField: "Adopt {field} from {candidate}",
+  same: "Same",
+  adoptSelectedOne: "Adopt {count} field",
+  adoptSelectedMany: "Adopt {count} fields",
+  provenance: "Where this candidate comes from",
+  adoptedOne: "{count} field adopted from {candidate}",
+  adoptedMany: "{count} fields adopted from {candidate}",
+  adoptFailed: "Could not adopt the fields. Try again."
 };
 const valueText = (value) => value == null ? "\u2014" : typeof value === "string" ? value : JSON.stringify(value);
 function MatchReview({
@@ -59,9 +76,13 @@ function MatchReview({
   error,
   onRetry,
   className,
-  labels: labelOverrides
+  labels: labelOverrides,
+  fieldMode = "decide",
+  onAdopt,
+  candidateLabel,
+  provenance
 }) {
-  const labels = { ...DEFAULT_MATCH_REVIEW_LABELS, ...labelOverrides };
+  const labels = { ...DEFAULT_MATCH_REVIEW_LABELS, ...useUixLabels().matchReview, ...labelOverrides };
   const plural = (n, one, many) => fillLabel(n === 1 ? one : many, { count: n });
   const decisionLabel = { accepted: labels.decisionAccepted, dismissed: labels.decisionDismissed, split: labels.decisionSplit, other: labels.decisionOther };
   const actionLabel = { accept: labels.accept, dismiss: labels.dismiss, split: labels.split, "pick-other": labels.pickOther };
@@ -107,6 +128,29 @@ function MatchReview({
     /* @__PURE__ */ jsx("p", { children: labels.empty }),
     /* @__PURE__ */ jsx("p", { children: labels.emptyDetail })
   ] });
+  if (fieldMode === "adopt") {
+    return /* @__PURE__ */ jsxs("section", { className: cx("uix-match-review", "uix-match-review--adopt", className), "aria-label": labels.region, children: [
+      /* @__PURE__ */ jsx("div", { className: "uix-match-review__summary", children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("strong", { children: incomingLabel }),
+        /* @__PURE__ */ jsx("span", { children: fillLabel(labels.pendingOf, { pending: pending.length, total: candidates.length }) })
+      ] }) }),
+      candidates.map((candidate) => /* @__PURE__ */ jsx(
+        AdoptCandidate,
+        {
+          candidate,
+          incoming,
+          fields,
+          labels,
+          heading: candidateLabel?.(candidate) ?? fillLabel(labels.candidate, { id: candidate.id }),
+          provenance: provenance?.(candidate),
+          onAdopt,
+          onDecision,
+          decisionLabel
+        },
+        candidate.id
+      ))
+    ] });
+  }
   return /* @__PURE__ */ jsxs("section", { className: cx("uix-match-review", className), "aria-label": labels.region, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-match-review__summary", children: [
       /* @__PURE__ */ jsxs("div", { children: [
@@ -156,6 +200,88 @@ function MatchReview({
     /* @__PURE__ */ jsx("p", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
   ] });
 }
+const sameValue = (a, b) => JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+function AdoptCandidate({ candidate, incoming, fields, labels, heading, provenance, onAdopt, onDecision, decisionLabel }) {
+  const id = useId();
+  const [chosen, setChosen] = useState(/* @__PURE__ */ new Set());
+  const [pending, setPending] = useState(false);
+  const [message, setMessage] = useState(null);
+  const resolved = candidate.status === "resolved";
+  const headingText = typeof heading === "string" ? heading : fillLabel(labels.candidate, { id: candidate.id });
+  const toggle = (fieldId, on) => {
+    if (pending) return;
+    const next = new Set(chosen);
+    if (on) next.add(fieldId);
+    else next.delete(fieldId);
+    setChosen(next);
+    setMessage(null);
+  };
+  const adopt = async () => {
+    if (!onAdopt || chosen.size === 0 || pending) return;
+    const fieldIds = fields.map((f) => f.id).filter((f) => chosen.has(f));
+    setPending(true);
+    setMessage(null);
+    try {
+      await onAdopt(candidate.id, fieldIds);
+      setChosen(/* @__PURE__ */ new Set());
+      setMessage({ text: fillLabel(fieldIds.length === 1 ? labels.adoptedOne : labels.adoptedMany, { count: fieldIds.length, candidate: headingText }), failed: false });
+    } catch {
+      setMessage({ text: labels.adoptFailed, failed: true });
+    } finally {
+      setPending(false);
+    }
+  };
+  const show = (field, record) => field.render?.(record[field.id], record) ?? valueText(record[field.id]);
+  return /* @__PURE__ */ jsxs("section", { className: "uix-match-review__candidate", "aria-labelledby": `${id}-heading`, "data-status": candidate.status ?? "pending", children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-match-review__candidate-head", children: [
+      /* @__PURE__ */ jsx("h3", { id: `${id}-heading`, className: "uix-match-review__candidate-title", children: heading }),
+      candidate.confidence != null && /* @__PURE__ */ jsx("span", { className: "uix-match-review__confidence", children: `${Math.round(candidate.confidence * 100)}%` }),
+      resolved && /* @__PURE__ */ jsx(StatusPill, { tone: "success", children: candidate.decision ? decisionLabel[candidate.decision] : labels.resolved })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "uix-table uix-match-review__compare", role: "table", children: [
+      /* @__PURE__ */ jsx("caption", { className: "uix-visually-hidden", children: fillLabel(labels.compareCaption, { candidate: headingText }) }),
+      /* @__PURE__ */ jsx("thead", { role: "rowgroup", children: /* @__PURE__ */ jsxs("tr", { role: "row", children: [
+        /* @__PURE__ */ jsx("th", { role: "columnheader", scope: "col", children: labels.field }),
+        /* @__PURE__ */ jsx("th", { role: "columnheader", scope: "col", children: labels.currentValue }),
+        /* @__PURE__ */ jsx("th", { role: "columnheader", scope: "col", children: labels.candidateValue }),
+        /* @__PURE__ */ jsx("th", { role: "columnheader", scope: "col", children: labels.adopt })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { role: "rowgroup", children: fields.map((field) => {
+        const same = sameValue(incoming[field.id], candidate.record[field.id]);
+        return /* @__PURE__ */ jsxs("tr", { role: "row", "data-differs": same ? void 0 : "", "data-chosen": chosen.has(field.id) || void 0, children: [
+          /* @__PURE__ */ jsx("th", { role: "rowheader", scope: "row", children: field.label }),
+          /* @__PURE__ */ jsx("td", { role: "cell", "data-label": labels.currentValue, children: show(field, incoming) }),
+          /* @__PURE__ */ jsx("td", { role: "cell", "data-label": labels.candidateValue, children: show(field, candidate.record) }),
+          /* @__PURE__ */ jsx("td", { role: "cell", children: same ? /* @__PURE__ */ jsx("span", { className: "uix-match-review__same", children: labels.same }) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "uix-match-review__adopt",
+              checked: chosen.has(field.id),
+              disabled: resolved,
+              "aria-label": fillLabel(labels.adoptField, { field: field.label, candidate: headingText }),
+              onChange: (event) => toggle(field.id, event.currentTarget.checked)
+            }
+          ) })
+        ] }, field.id);
+      }) })
+    ] }) }),
+    provenance != null && provenance !== false && /* @__PURE__ */ jsxs("details", { className: "uix-match-review__provenance", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "uix-match-review__provenance-summary", children: [
+        /* @__PURE__ */ jsx("span", { children: labels.provenance }),
+        /* @__PURE__ */ jsx("span", { className: "uix-collapsible__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "sm" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "uix-match-review__provenance-body", children: provenance })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-match-review__candidate-actions", children: [
+      !resolved && onAdopt && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", disabled: chosen.size === 0, loading: pending, onClick: () => void adopt(), children: fillLabel(chosen.size === 1 ? labels.adoptSelectedOne : labels.adoptSelectedMany, { count: chosen.size }) }),
+      !resolved && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+        if (!pending) onDecision(candidate.id, "dismiss");
+      }, children: labels.dismiss }),
+      /* @__PURE__ */ jsx("span", { className: cx("uix-match-review__result", message?.failed && "uix-match-review__result--failed"), role: "status", children: message?.text })
+    ] })
+  ] });
+}
 export {
   DEFAULT_MATCH_REVIEW_LABELS,
   MatchReview

package/dist/components/MetricInput.js

@@ -4,6 +4,7 @@ import { useEffect, useId, useState } from "react";
 import { cx } from "../cx.js";
 import { clampMetricValue, parseMetricValue, stepMetricValue } from "../metric-model.js";
 import { Input } from "./Input.js";
+import { MinusIcon, PlusIcon } from "../icons/components.js";
 const defaultMetricFormat = (input) => input == null ? "" : String(input);
 function MetricInput({
   value,
@@ -83,8 +84,8 @@ function MetricInput({
       ),
       unit && /* @__PURE__ */ jsx("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
       /* @__PURE__ */ jsxs("span", { className: "uix-metric-input__steps", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: "+" }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: "\u2212" })
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: /* @__PURE__ */ jsx(PlusIcon, {}) }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: /* @__PURE__ */ jsx(MinusIcon, {}) })
       ] })
     ] }),
     unit && /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [

package/dist/components/Modal.d.ts

@@ -35,6 +35,7 @@ interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
      */
     instant?: boolean;
 }
-declare function Modal({ open, onClose, dirty, pending, discardLabels, title, children, footer, className, closeLabel: closeLabelProp, role, instant, onKeyDown, ...rest }: ModalProps): react.JSX.Element;
+/** A modal `<dialog>`; the ref reaches it (HAR-1831). */
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDialogElement>>;
 
 export { Modal, type ModalProps };

package/dist/components/Modal.js

@@ -1,11 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useRef } from "react";
+import { forwardRef, useCallback, useId, useRef } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
 import { useGuardedDialog } from "./DiscardPrompt.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Modal({
+const Modal = forwardRef(function Modal2({
   open,
   onClose,
   dirty = false,
@@ -20,16 +20,17 @@ function Modal({
   instant = false,
   onKeyDown,
   ...rest
-}) {
+}, ref) {
   const uixLabels = useUixLabels();
   const closeLabel = closeLabelProp ?? uixLabels.modal?.close ?? "Close dialog";
   const closeRef = useRef(null);
   const guard = useGuardedDialog({ open, onClose, dirty, pending, labels: discardLabels, closeRef });
   const titleId = useId();
+  const dialogRef = useMergedRef(guard.ref, ref);
   return /* @__PURE__ */ jsxs(
     "dialog",
     {
-      ref: guard.ref,
+      ref: dialogRef,
       className: cx("uix-dialog", className),
       role,
       "aria-labelledby": title != null ? titleId : void 0,
@@ -65,6 +66,14 @@ function Modal({
       ]
     }
   );
+});
+Modal.displayName = "Modal";
+function useMergedRef(own, forwarded) {
+  return useCallback((el) => {
+    own.current = el;
+    if (typeof forwarded === "function") forwarded(el);
+    else if (forwarded) forwarded.current = el;
+  }, [own, forwarded]);
 }
 export {
   Modal