@tensor_1/react 2.46.0 → 2.48.0

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

@@ -4,6 +4,7 @@ import { DialogCloseEvent, DiscardPromptLabels } from './DiscardPrompt.js';
 import './Button.js';
 import '../link.js';
 import './Kbd.js';
+import './ButtonFeedback.js';
 
 interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     open: boolean;
@@ -34,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

package/dist/components/NavFavourites.d.ts

@@ -20,6 +20,11 @@ interface NavFavouritesLabels {
     readonly remove: string;
     /** Per-row overflow-trigger accessible-name template with `{label}`. Defaults to "{label} favourite options". */
     readonly options?: string;
+    /**
+     * Polite announcement after a move: `{label}`, `{position}`, `{count}`. Defaults to
+     * "{label} moved to position {position} of {count}" (it was English only before HAR-1375).
+     */
+    readonly moved?: string;
 }
 interface NavFavouritesProps {
     /** The already-resolved favourites, in display order. */

package/dist/components/NavFavourites.js

@@ -2,6 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { placeId } from "../reorder.js";
 const ChevronDownIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -91,15 +93,13 @@ function NavFavourites({
     const idx = order.indexOf(id);
     const next = idx + dir;
     if (idx < 0 || next < 0 || next >= order.length) return;
-    const reordered = [...order];
-    const [it] = reordered.splice(idx, 1);
-    if (it === void 0) return;
-    reordered.splice(next, 0, it);
+    const reordered = placeId(order, id, next);
+    if (reordered === order) return;
     focusAfterRef.current = id;
     const moved = items.find((i) => i.id === id);
-    if (moved) setAnnouncement(`${moved.label} moved to position ${next + 1} of ${order.length}`);
-    onReorder(reordered);
-  }, [onReorder, order]);
+    if (moved) setAnnouncement(fillLabel(labels.moved ?? "{label} moved to position {position} of {count}", { label: moved.label, position: next + 1, count: order.length }));
+    onReorder([...reordered]);
+  }, [onReorder, order, items, labels.moved]);
   const remove = useCallback((id) => {
     const idx = order.indexOf(id);
     const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;

package/dist/components/OtpInput.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { InputHTMLAttributes, AriaAttributes, CSSProperties } from 'react';
+
+interface OtpInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size' | 'maxLength' | 'pattern' | 'inputMode'> {
+    /** How many characters the code has. Default 6. */
+    length?: number;
+    /** Controlled value: the characters typed so far. */
+    value?: string;
+    defaultValue?: string;
+    /** Every change, with the cleaned code (only allowed characters, at most `length`). */
+    onValueChange?: (value: string) => void;
+    /** Called once each time the code reaches `length` characters. */
+    onComplete?: (code: string) => void;
+    /** `numeric` (default): digits, with the phone's number pad. `alphanumeric`: letters and digits, upper-cased. */
+    mode?: 'numeric' | 'alphanumeric';
+    /** Draw a gap after every n cells (3 → "123 456"). Visual only: the value has no separator. */
+    groupSize?: number;
+    invalid?: boolean;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A one-time code (HAR-1376): ONE native input, so screen readers, the phone's code autofill
+ * (`autoComplete="one-time-code"`) and password managers see a single field, drawn as `length`
+ * cells. Pasting "123 456" or "123-456" keeps the characters; typing past the end is ignored;
+ * Backspace deletes the last one. `onComplete(code)` runs when the last character arrives. Put it in
+ * a `Field` for its label, hint and error (the cells turn red with `aria-invalid`). `name` submits
+ * the code. `ref` is the input.
+ */
+declare const OtpInput: react.ForwardRefExoticComponent<OtpInputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { OtpInput, type OtpInputProps };