@tensor_1/react 2.19.2 → 2.21.0

package/dist/components/MatchReview.js

@@ -3,6 +3,48 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { cx } from "../cx.js";
 import { StatusPill } from "./StatusPill.js";
+import { fillLabel } from "../fill-label.js";
+const DEFAULT_MATCH_REVIEW_LABELS = {
+  region: "Match review",
+  loading: "Loading match candidates\u2026",
+  retry: "Try again",
+  empty: "No candidate matches found.",
+  emptyDetail: "Choose another record source or continue without a match.",
+  pendingOf: "{pending} pending of {total}",
+  bulk: "Bulk candidate actions",
+  selectedCount: "{count} selected",
+  applying: "Applying\u2026",
+  acceptSelected: "Accept selected",
+  dismissSelected: "Dismiss selected",
+  caption: "Candidate matches and available decisions",
+  select: "Select",
+  confidence: "Confidence",
+  status: "Status",
+  actions: "Actions",
+  selectCandidate: "Select candidate {id}",
+  notScored: "Not scored",
+  resolved: "Resolved",
+  pending: "Pending",
+  decisionAccepted: "Accepted",
+  decisionDismissed: "Dismissed",
+  decisionSplit: "Split",
+  decisionOther: "Other match",
+  accept: "Accept",
+  dismiss: "Dismiss",
+  split: "Split",
+  pickOther: "Pick other",
+  acceptingOne: "Accepting {count} candidate\u2026",
+  acceptingMany: "Accepting {count} candidates\u2026",
+  dismissingOne: "Dismissing {count} candidate\u2026",
+  dismissingMany: "Dismissing {count} candidates\u2026",
+  acceptedOne: "{count} candidate accepted",
+  acceptedMany: "{count} candidates accepted",
+  dismissedOne: "{count} candidate dismissed",
+  dismissedMany: "{count} candidates dismissed",
+  failedSuffix: "; {count} failed",
+  bulkAcceptFailed: "Bulk accept failed. Try again.",
+  bulkDismissFailed: "Bulk dismiss failed. Try again."
+};
 const valueText = (value) => value == null ? "\u2014" : typeof value === "string" ? value : JSON.stringify(value);
 function MatchReview({
   incoming,
@@ -16,8 +58,13 @@ function MatchReview({
   loading,
   error,
   onRetry,
-  className
+  className,
+  labels: labelOverrides
 }) {
+  const labels = { ...DEFAULT_MATCH_REVIEW_LABELS, ...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 };
   const [internalSelection, setInternalSelection] = useState(/* @__PURE__ */ new Set());
   const [announcement, setAnnouncement] = useState("");
   const [bulkPending, setBulkPending] = useState(false);
@@ -37,67 +84,61 @@ function MatchReview({
     if (!onBulkDecision || selection.size === 0 || bulkPending) return;
     const ids = [...selection];
     setBulkPending(true);
-    setAnnouncement(`${action === "accept" ? "Accepting" : "Dismissing"} ${ids.length} candidate${ids.length === 1 ? "" : "s"}\u2026`);
+    setAnnouncement(action === "accept" ? plural(ids.length, labels.acceptingOne, labels.acceptingMany) : plural(ids.length, labels.dismissingOne, labels.dismissingMany));
     try {
       const result = await onBulkDecision(ids, action);
       const succeeded = result?.succeeded ?? ids.length;
       const failed = result?.failed ?? 0;
-      setAnnouncement(`${succeeded} candidate${succeeded === 1 ? "" : "s"} ${action === "accept" ? "accepted" : "dismissed"}${failed ? `; ${failed} failed` : ""}.`);
+      const done = action === "accept" ? plural(succeeded, labels.acceptedOne, labels.acceptedMany) : plural(succeeded, labels.dismissedOne, labels.dismissedMany);
+      setAnnouncement(`${done}${failed ? fillLabel(labels.failedSuffix, { count: failed }) : ""}.`);
       if (!failed) setSelection(/* @__PURE__ */ new Set());
     } catch {
-      setAnnouncement(`Bulk ${action} failed. Try again.`);
+      setAnnouncement(action === "accept" ? labels.bulkAcceptFailed : labels.bulkDismissFailed);
     } finally {
       setBulkPending(false);
     }
   };
-  if (loading) return /* @__PURE__ */ jsx("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: "Loading match candidates\u2026" });
+  if (loading) return /* @__PURE__ */ jsx("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: labels.loading });
   if (error) return /* @__PURE__ */ jsxs("div", { className: cx("uix-match-review uix-match-review--state", className), role: "alert", children: [
     /* @__PURE__ */ jsx("p", { children: error }),
-    onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
+    onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
   ] });
   if (candidates.length === 0) return /* @__PURE__ */ jsxs("div", { className: cx("uix-match-review uix-match-review--state", className), children: [
-    /* @__PURE__ */ jsx("p", { children: "No candidate matches found." }),
-    /* @__PURE__ */ jsx("p", { children: "Choose another record source or continue without a match." })
+    /* @__PURE__ */ jsx("p", { children: labels.empty }),
+    /* @__PURE__ */ jsx("p", { children: labels.emptyDetail })
   ] });
-  return /* @__PURE__ */ jsxs("section", { className: cx("uix-match-review", className), "aria-label": "Match review", children: [
+  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: [
         /* @__PURE__ */ jsx("strong", { children: incomingLabel }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          pending.length,
-          " pending of ",
-          candidates.length
-        ] })
+        /* @__PURE__ */ jsx("span", { children: fillLabel(labels.pendingOf, { pending: pending.length, total: candidates.length }) })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "uix-match-review__incoming", children: fields.map((field) => /* @__PURE__ */ jsxs("span", { children: [
         /* @__PURE__ */ jsx("b", { children: field.label }),
         field.render?.(incoming[field.id], incoming) ?? valueText(incoming[field.id])
       ] }, field.id)) })
     ] }),
-    onBulkDecision && /* @__PURE__ */ jsxs("div", { className: "uix-match-review__bulk", "aria-label": "Bulk candidate actions", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        selection.size,
-        " selected"
-      ] }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("accept"), children: bulkPending ? "Applying\u2026" : "Accept selected" }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("dismiss"), children: bulkPending ? "Applying\u2026" : "Dismiss selected" })
+    onBulkDecision && /* @__PURE__ */ jsxs("div", { className: "uix-match-review__bulk", "aria-label": labels.bulk, children: [
+      /* @__PURE__ */ jsx("span", { children: fillLabel(labels.selectedCount, { count: selection.size }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("accept"), children: bulkPending ? labels.applying : labels.acceptSelected }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("dismiss"), children: bulkPending ? labels.applying : labels.dismissSelected })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "uix-table uix-match-review__table", children: [
-      /* @__PURE__ */ jsx("caption", { className: "uix-visually-hidden", children: "Candidate matches and available decisions" }),
+      /* @__PURE__ */ jsx("caption", { className: "uix-visually-hidden", children: labels.caption }),
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { scope: "col", children: /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "Select" }) }),
-        /* @__PURE__ */ jsx("th", { scope: "col", children: "Confidence" }),
+        /* @__PURE__ */ jsx("th", { scope: "col", children: /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: labels.select }) }),
+        /* @__PURE__ */ jsx("th", { scope: "col", children: labels.confidence }),
         fields.map((field) => /* @__PURE__ */ jsx("th", { scope: "col", children: field.label }, field.id)),
-        /* @__PURE__ */ jsx("th", { scope: "col", children: "Status" }),
-        /* @__PURE__ */ jsx("th", { scope: "col", children: "Actions" })
+        /* @__PURE__ */ jsx("th", { scope: "col", children: labels.status }),
+        /* @__PURE__ */ jsx("th", { scope: "col", children: labels.actions })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: candidates.map((candidate) => {
         const resolved = candidate.status === "resolved";
         return /* @__PURE__ */ jsxs("tr", { "data-status": candidate.status ?? "pending", children: [
-          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": `Select candidate ${candidate.id}` }) }),
-          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? "Not scored" : `${Math.round(candidate.confidence * 100)}%` }) }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": fillLabel(labels.selectCandidate, { id: candidate.id }) }) }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? labels.notScored : `${Math.round(candidate.confidence * 100)}%` }) }),
           fields.map((field) => /* @__PURE__ */ jsx("td", { children: field.render?.(candidate.record[field.id], candidate.record) ?? valueText(candidate.record[field.id]) }, field.id)),
-          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ?? "Resolved" : "Pending" }) }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ? decisionLabel[candidate.decision] : labels.resolved : labels.pending }) }),
           /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("div", { className: "uix-match-review__actions", children: ["accept", "dismiss", "split", "pick-other"].map((action) => /* @__PURE__ */ jsx(
             "button",
             {
@@ -105,7 +146,7 @@ function MatchReview({
               className: "uix-btn uix-btn--ghost uix-btn--sm",
               disabled: resolved,
               onClick: () => onDecision(candidate.id, action),
-              children: action === "pick-other" ? "Pick other" : `${action[0].toUpperCase()}${action.slice(1)}`
+              children: actionLabel[action]
             },
             action
           )) }) })
@@ -116,5 +157,6 @@ function MatchReview({
   ] });
 }
 export {
+  DEFAULT_MATCH_REVIEW_LABELS,
   MatchReview
 };

package/dist/components/Meter.d.ts

@@ -10,8 +10,10 @@ interface MeterProps extends HTMLAttributes<HTMLDivElement> {
     tone?: MeterTone;
     /** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
     label?: string;
+    /** TENSOR RX-125 (UIX-04): the spoken tone words; English defaults. */
+    toneLabels?: Partial<Record<Exclude<MeterTone, 'success'>, string>>;
 }
 /** Horizontal utilization / threshold bar backed by `.uix-meter`. */
-declare function Meter({ value, tone, label, className, ...props }: MeterProps): react.JSX.Element;
+declare function Meter({ value, tone, label, toneLabels, className, ...props }: MeterProps): react.JSX.Element;
 
 export { Meter, type MeterProps, type MeterTone };

package/dist/components/Meter.js

@@ -6,7 +6,8 @@ const toneText = {
   attention: "needs attention",
   overdue: "overdue"
 };
-function Meter({ value = 0, tone, label, className, ...props }) {
+function Meter({ value = 0, tone, label, toneLabels, className, ...props }) {
+  const spoken = { ...toneText, ...toneLabels };
   const pct = Math.max(0, Math.min(100, value));
   return /* @__PURE__ */ jsx(
     "div",
@@ -15,7 +16,7 @@ function Meter({ value = 0, tone, label, className, ...props }) {
       "aria-valuenow": pct,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuetext": tone && tone !== "success" ? `${pct}%, ${toneText[tone]}` : void 0,
+      "aria-valuetext": tone && tone !== "success" ? `${pct}%, ${spoken[tone]}` : void 0,
       "aria-label": label,
       className: cx("uix-meter", className),
       ...props,

package/dist/components/Pagination.d.ts

@@ -1,11 +1,19 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
 
+/** TENSOR RX-125 (UIX-04): the pager's accessible names. */
+interface PaginationLabels {
+    region: string;
+    previous: string;
+    next: string;
+}
+declare const DEFAULT_PAGINATION_LABELS: PaginationLabels;
 interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     page: number;
     pageCount: number;
     onChange: (page: number) => void;
+    labels?: Partial<PaginationLabels>;
 }
-declare function Pagination({ page, pageCount, onChange, className, ...props }: PaginationProps): react.JSX.Element;
+declare function Pagination({ page, pageCount, onChange, labels: labelOverrides, className, ...props }: PaginationProps): react.JSX.Element;
 
-export { Pagination, type PaginationProps };
+export { DEFAULT_PAGINATION_LABELS, Pagination, type PaginationLabels, type PaginationProps };

package/dist/components/Pagination.js

@@ -11,16 +11,22 @@ function getPageNumbers(page, total) {
   pages.push(total);
   return pages;
 }
-function Pagination({ page, pageCount, onChange, className, ...props }) {
+const DEFAULT_PAGINATION_LABELS = {
+  region: "Pagination",
+  previous: "Previous page",
+  next: "Next page"
+};
+function Pagination({ page, pageCount, onChange, labels: labelOverrides, className, ...props }) {
+  const labels = { ...DEFAULT_PAGINATION_LABELS, ...labelOverrides };
   const pages = getPageNumbers(page, pageCount);
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: cx("uix-pagination", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": labels.region, className: cx("uix-pagination", className), ...props, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         className: "uix-pagination__btn",
         onClick: () => onChange(page - 1),
         disabled: page <= 1,
-        "aria-label": "Previous page",
+        "aria-label": labels.previous,
         children: "\u2039"
       }
     ),
@@ -42,12 +48,13 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
         className: "uix-pagination__btn",
         onClick: () => onChange(page + 1),
         disabled: page >= pageCount,
-        "aria-label": "Next page",
+        "aria-label": labels.next,
         children: "\u203A"
       }
     )
   ] });
 }
 export {
+  DEFAULT_PAGINATION_LABELS,
   Pagination
 };

package/dist/components/Peek.d.ts

@@ -2,6 +2,12 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    previousLabel?: string;
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    nextLabel?: string;
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    closeLabel?: string;
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
@@ -11,6 +17,6 @@ interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     onNavNext?: () => void;
     hint?: string;
 }
-declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }: PeekProps): react.JSX.Element;
+declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, previousLabel, nextLabel, closeLabel, className, onClick, ...rest }: PeekProps): react.JSX.Element;
 
 export { Peek, type PeekProps };

package/dist/components/Peek.js

@@ -6,7 +6,7 @@ import { useDialog } from "../hooks/useDialog.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" }) });
 const ChevronUp = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 8l4-4 4 4" }) });
 const ChevronDown = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
-function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }) {
+function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, previousLabel = "Previous record", nextLabel = "Next record", closeLabel = "Close preview", className, onClick, ...rest }) {
   const ref = useDialog(open, onClose);
   const hasNav = onNavPrev != null || onNavNext != null;
   const titleId = useId();
@@ -21,12 +21,12 @@ function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hi
   return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: onBackdropClick, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ jsxs("div", { className: "uix-peek__nav", children: [
-        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": "Previous record", children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
-        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavNext?.(), "aria-disabled": onNavNext ? void 0 : true, "aria-label": "Next record", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": previousLabel, children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
+        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavNext?.(), "aria-disabled": onNavNext ? void 0 : true, "aria-label": nextLabel, children: /* @__PURE__ */ jsx(ChevronDown, {}) })
       ] }),
       title && /* @__PURE__ */ jsx("h2", { className: "uix-peek__title", id: titleId, children: title }),
       hint && /* @__PURE__ */ jsx("span", { className: "uix-peek__hint", children: hint }),
-      onClose && /* @__PURE__ */ jsx("button", { className: "uix-peek__close", onClick: onClose, "aria-label": "Close preview", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      onClose && /* @__PURE__ */ jsx("button", { className: "uix-peek__close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
     ] }),
     children != null && /* @__PURE__ */ jsx("div", { className: "uix-peek__body", children }),
     footer != null && /* @__PURE__ */ jsx("div", { className: "uix-peek__footer", children: footer })

package/dist/components/RelationshipGraph.js

@@ -102,6 +102,10 @@ function RadialRelationshipGraph({
 }) {
   const bounded = useMemo(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
   const positioned = useMemo(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
+  const typeColor = useMemo(
+    () => new Map(legend.map((item, index) => [item.id, `var(--uix-chart-${index % 8 + 1})`])),
+    [legend]
+  );
   const positionedById = useMemo(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
   const [zoom, setZoom] = useState(1);
   const [pan, setPan] = useState({ x: 0, y: 0 });
@@ -145,7 +149,7 @@ function RadialRelationshipGraph({
       bounded.edges.map((edge) => {
         const source = positionedById.get(edge.source);
         const target = positionedById.get(edge.target);
-        return /* @__PURE__ */ jsx("line", { x1: source.x * RADIAL_SCALE_X, y1: source.y * RADIAL_SCALE_Y, x2: target.x * RADIAL_SCALE_X, y2: target.y * RADIAL_SCALE_Y, className: "uix-relationship-graph__edge", "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
+        return /* @__PURE__ */ jsx("line", { x1: source.x * RADIAL_SCALE_X, y1: source.y * RADIAL_SCALE_Y, x2: target.x * RADIAL_SCALE_X, y2: target.y * RADIAL_SCALE_Y, className: "uix-relationship-graph__edge", "data-typed": edge.type != null && typeColor.has(edge.type) || void 0, style: edge.type != null && typeColor.has(edge.type) ? { "--uix-graph-type-color": typeColor.get(edge.type) } : void 0, "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
       }),
       positioned.map((node) => /* @__PURE__ */ jsxs(
         "g",
@@ -171,7 +175,7 @@ function RadialRelationshipGraph({
         node.id
       ))
     ] }) }) }),
-    legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((item) => /* @__PURE__ */ jsx("li", { "data-type": item.id, children: item.label }, item.id)) }),
+    legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((item) => /* @__PURE__ */ jsx("li", { "data-type": item.id, style: { "--uix-graph-type-color": typeColor.get(item.id) }, children: item.label }, item.id)) }),
     showList && /* @__PURE__ */ jsx(EquivalentRelationshipList, { nodes: bounded.nodes, edges: bounded.edges, selectedId, labels, onSelect: select, onExpandNeighbors, onOpenDetails })
   ] });
 }

package/dist/components/RuleBuilder.d.ts

@@ -25,6 +25,42 @@ interface RuleActionDefinition {
     label: string;
     renderParameters?: (action: RuleAction, onChange: (parameters: Record<string, JsonValue>) => void, disabled: boolean) => ReactNode;
 }
+/**
+ * Every word the rule builder renders (TENSOR RX-125, UIX-12). `{item}` is one of
+ * `itemGroup` / `itemCondition` / `itemAction`; `{field}` a field label; `{count}` a number.
+ */
+interface RuleBuilderLabels {
+    region: string;
+    summary: string;
+    when: string;
+    group: string;
+    match: string;
+    all: string;
+    any: string;
+    field: string;
+    operator: string;
+    valueFor: string;
+    itemGroup: string;
+    itemCondition: string;
+    itemAction: string;
+    moveUp: string;
+    moveUpNamed: string;
+    moveDown: string;
+    moveDownNamed: string;
+    remove: string;
+    removeNamed: string;
+    then: string;
+    actionType: string;
+    valid: string;
+    issuesOne: string;
+    issuesMany: string;
+    summaryIssuesOne: string;
+    summaryIssuesMany: string;
+    addCondition: string;
+    addGroup: string;
+    addAction: string;
+}
+declare const DEFAULT_RULE_BUILDER_LABELS: RuleBuilderLabels;
 interface RuleBuilderProps {
     value: RuleDefinition;
     onChange: (value: RuleDefinition) => void;
@@ -35,11 +71,15 @@ interface RuleBuilderProps {
     readOnly?: boolean;
     validate?: (value: RuleDefinition) => RuleValidationIssue[];
     className?: string;
+    /** @deprecated use `labels.addCondition` */
     addConditionLabel?: string;
+    /** @deprecated use `labels.addGroup` */
     addGroupLabel?: string;
+    /** @deprecated use `labels.addAction` */
     addActionLabel?: string;
+    labels?: Partial<RuleBuilderLabels>;
 }
 /** Declarative controlled when-conditions-to-actions editor with bounded nesting. */
-declare function RuleBuilder({ value, onChange, fields, operators, actions, maxDepth, readOnly, validate, className, addConditionLabel, addGroupLabel, addActionLabel, }: RuleBuilderProps): react.JSX.Element;
+declare function RuleBuilder({ value, onChange, fields, operators, actions, maxDepth, readOnly, validate, className, addConditionLabel, addGroupLabel, addActionLabel, labels: labelOverrides, }: RuleBuilderProps): react.JSX.Element;
 
-export { type RuleActionDefinition, RuleBuilder, type RuleBuilderProps, type RuleFieldDefinition, type RuleOperatorDefinition, type RuleValueEditorProps };
+export { DEFAULT_RULE_BUILDER_LABELS, type RuleActionDefinition, RuleBuilder, type RuleBuilderLabels, type RuleBuilderProps, type RuleFieldDefinition, type RuleOperatorDefinition, type RuleValueEditorProps };

package/dist/components/RuleBuilder.js

@@ -10,6 +10,38 @@ import {
   summarizeRule,
   validateRuleDefinition
 } from "../rule-builder-model.js";
+import { fillLabel } from "../fill-label.js";
+const DEFAULT_RULE_BUILDER_LABELS = {
+  region: "Rule builder",
+  summary: "Rule summary",
+  when: "When",
+  group: "Group",
+  match: "Match",
+  all: "all (AND)",
+  any: "any (OR)",
+  field: "Field",
+  operator: "Operator",
+  valueFor: "Value for {field}",
+  itemGroup: "group",
+  itemCondition: "condition",
+  itemAction: "action",
+  moveUp: "Up",
+  moveUpNamed: "Move {item} up",
+  moveDown: "Down",
+  moveDownNamed: "Move {item} down",
+  remove: "Remove",
+  removeNamed: "Remove {item}",
+  then: "Then",
+  actionType: "Action type",
+  valid: "Rule is valid.",
+  issuesOne: "{count} validation issue",
+  issuesMany: "{count} validation issues",
+  summaryIssuesOne: "Rule has {count} validation issue.",
+  summaryIssuesMany: "Rule has {count} validation issues.",
+  addCondition: "Add condition",
+  addGroup: "Add group",
+  addAction: "Add action"
+};
 let ruleId = 0;
 const nextId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(++ruleId).toString(36)}`;
 function defaultCondition(fields, operators) {
@@ -27,27 +59,28 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
   }, maxDepth));
   return /* @__PURE__ */ jsxs("fieldset", { className: "uix-rule-builder__group", "data-depth": depth, children: [
     /* @__PURE__ */ jsxs("legend", { className: "uix-rule-builder__group-heading", children: [
-      /* @__PURE__ */ jsx("span", { children: depth === 1 ? "When" : "Group" }),
+      /* @__PURE__ */ jsx("span", { children: depth === 1 ? labels.when : labels.group }),
       /* @__PURE__ */ jsxs("label", { children: [
-        "Match",
+        labels.match,
         /* @__PURE__ */ jsxs("select", { className: "uix-select uix-select--sm", value: group.combinator, disabled, onChange: (event) => updateNode(group.id, (node) => ({ ...node, combinator: event.currentTarget.value })), children: [
-          /* @__PURE__ */ jsx("option", { value: "and", children: "all (AND)" }),
-          /* @__PURE__ */ jsx("option", { value: "or", children: "any (OR)" })
+          /* @__PURE__ */ jsx("option", { value: "and", children: labels.all }),
+          /* @__PURE__ */ jsx("option", { value: "or", children: labels.any })
         ] })
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__rows", children: group.conditions.map((node, index) => isRuleGroup(node) ? /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__nested", children: [
       /* @__PURE__ */ jsx(RuleGroupEditor, { ...{ group: node, depth: depth + 1, root, fields, operators, maxDepth, disabled, onRootChange, labels } }),
-      /* @__PURE__ */ jsx(RowControls, { label: "group", first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
+      /* @__PURE__ */ jsx(RowControls, { labels, label: labels.itemGroup, first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
     ] }, node.id) : /* @__PURE__ */ jsx(
       ConditionRow,
       {
+        labels,
         condition: node,
         fields,
         operators,
         disabled,
         onChange: (condition) => updateNode(node.id, () => condition),
-        controls: /* @__PURE__ */ jsx(RowControls, { label: "condition", first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
+        controls: /* @__PURE__ */ jsx(RowControls, { labels, label: labels.itemCondition, first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
       },
       node.id
     )) }),
@@ -57,7 +90,7 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
     ] })
   ] });
 }
-function ConditionRow({ condition, fields, operators, disabled, onChange, controls }) {
+function ConditionRow({ labels, condition, fields, operators, disabled, onChange, controls }) {
   const field = fields.find((item) => item.id === condition.field);
   const availableOperators = field?.operators?.length ? operators.filter((item) => field.operators.includes(item.id)) : operators;
   const operator = operators.find((item) => item.id === condition.operator);
@@ -68,22 +101,22 @@ function ConditionRow({ condition, fields, operators, disabled, onChange, contro
   };
   return /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__condition", children: [
     /* @__PURE__ */ jsxs("label", { children: [
-      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "Field" }),
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: labels.field }),
       /* @__PURE__ */ jsx("select", { className: "uix-select", value: condition.field, onChange: (event) => setField(event.currentTarget.value), disabled, children: fields.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) })
     ] }),
     /* @__PURE__ */ jsxs("label", { children: [
-      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "Operator" }),
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: labels.operator }),
       /* @__PURE__ */ jsx("select", { className: "uix-select", value: condition.operator, onChange: (event) => onChange({ ...condition, operator: event.currentTarget.value }), disabled, children: availableOperators.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) })
     ] }),
-    operator?.requiresValue !== false && /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__value", children: field?.renderValueEditor?.({ condition, onChange: (value) => onChange({ ...condition, value }), disabled }) ?? /* @__PURE__ */ jsx("input", { className: "uix-input", value: typeof condition.value === "string" || typeof condition.value === "number" ? condition.value : condition.value == null ? "" : JSON.stringify(condition.value), onChange: (event) => onChange({ ...condition, value: event.currentTarget.value }), disabled, "aria-label": `Value for ${field?.label ?? "condition"}` }) }),
+    operator?.requiresValue !== false && /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__value", children: field?.renderValueEditor?.({ condition, onChange: (value) => onChange({ ...condition, value }), disabled }) ?? /* @__PURE__ */ jsx("input", { className: "uix-input", value: typeof condition.value === "string" || typeof condition.value === "number" ? condition.value : condition.value == null ? "" : JSON.stringify(condition.value), onChange: (event) => onChange({ ...condition, value: event.currentTarget.value }), disabled, "aria-label": fillLabel(labels.valueFor, { field: field?.label ?? labels.itemCondition }) }) }),
     controls
   ] });
 }
-function RowControls({ label, first, last, disabled, onUp, onDown, onRemove }) {
+function RowControls({ labels, label, first, last, disabled, onUp, onDown, onRemove }) {
   return /* @__PURE__ */ jsxs("span", { className: "uix-rule-builder__row-actions", children: [
-    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onUp, disabled: disabled || first, "aria-label": `Move ${label} up`, children: "Up" }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onDown, disabled: disabled || last, "aria-label": `Move ${label} down`, children: "Down" }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onRemove, disabled, "aria-label": `Remove ${label}`, children: "Remove" })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onUp, disabled: disabled || first, "aria-label": fillLabel(labels.moveUpNamed, { item: label }), children: labels.moveUp }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onDown, disabled: disabled || last, "aria-label": fillLabel(labels.moveDownNamed, { item: label }), children: labels.moveDown }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onRemove, disabled, "aria-label": fillLabel(labels.removeNamed, { item: label }), children: labels.remove })
   ] });
 }
 function RuleBuilder({
@@ -96,38 +129,42 @@ function RuleBuilder({
   readOnly = false,
   validate,
   className,
-  addConditionLabel = "Add condition",
-  addGroupLabel = "Add group",
-  addActionLabel = "Add action"
+  addConditionLabel,
+  addGroupLabel,
+  addActionLabel,
+  labels: labelOverrides
 }) {
+  const labels = {
+    ...DEFAULT_RULE_BUILDER_LABELS,
+    ...addConditionLabel != null ? { addCondition: addConditionLabel } : {},
+    ...addGroupLabel != null ? { addGroup: addGroupLabel } : {},
+    ...addActionLabel != null ? { addAction: addActionLabel } : {},
+    ...labelOverrides
+  };
+  const issuesText = (template1, templateN) => fillLabel(issues.length === 1 ? template1 : templateN, { count: issues.length });
   const issues = [...validateRuleDefinition(value, maxDepth), ...validate?.(value) ?? []];
   const fieldLabels = Object.fromEntries(fields.map((field) => [field.id, field.label]));
   const operatorLabels = Object.fromEntries(operators.map((operator) => [operator.id, operator.label]));
   const actionLabels = Object.fromEntries(actions.map((action) => [action.id, action.label]));
-  if (readOnly) return /* @__PURE__ */ jsxs("section", { className: cx("uix-rule-builder uix-rule-builder--summary", className), "aria-label": "Rule summary", children: [
+  if (readOnly) return /* @__PURE__ */ jsxs("section", { className: cx("uix-rule-builder uix-rule-builder--summary", className), "aria-label": labels.summary, children: [
     /* @__PURE__ */ jsx("p", { children: summarizeRule(value, { fields: fieldLabels, operators: operatorLabels, actions: actionLabels }) }),
-    issues.length > 0 && /* @__PURE__ */ jsxs("p", { className: "uix-rule-builder__invalid", children: [
-      "Rule has ",
-      issues.length,
-      " validation issue",
-      issues.length === 1 ? "" : "s",
-      "."
-    ] })
+    issues.length > 0 && /* @__PURE__ */ jsx("p", { className: "uix-rule-builder__invalid", children: issuesText(labels.summaryIssuesOne, labels.summaryIssuesMany) })
   ] });
   const updateActions = (next) => onChange({ ...value, then: next });
-  return /* @__PURE__ */ jsxs("section", { className: cx("uix-rule-builder", className), "aria-label": "Rule builder", children: [
-    /* @__PURE__ */ jsx(RuleGroupEditor, { group: value.when, depth: 1, root: value.when, fields, operators, maxDepth, disabled: readOnly, onRootChange: (when) => onChange({ ...value, when }), labels: { addCondition: addConditionLabel, addGroup: addGroupLabel } }),
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-rule-builder", className), "aria-label": labels.region, children: [
+    /* @__PURE__ */ jsx(RuleGroupEditor, { group: value.when, depth: 1, root: value.when, fields, operators, maxDepth, disabled: readOnly, onRootChange: (when) => onChange({ ...value, when }), labels }),
     /* @__PURE__ */ jsxs("fieldset", { className: "uix-rule-builder__actions", children: [
-      /* @__PURE__ */ jsx("legend", { children: "Then" }),
+      /* @__PURE__ */ jsx("legend", { children: labels.then }),
       value.then.map((action, index) => {
         const definition = actions.find((item) => item.id === action.type);
         return /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__action", children: [
-          /* @__PURE__ */ jsx("select", { className: "uix-select", value: action.type, onChange: (event) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, type: event.currentTarget.value } : item)), "aria-label": "Action type", children: actions.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) }),
+          /* @__PURE__ */ jsx("select", { className: "uix-select", value: action.type, onChange: (event) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, type: event.currentTarget.value } : item)), "aria-label": labels.actionType, children: actions.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) }),
           definition?.renderParameters?.(action, (parameters) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, parameters } : item)), false),
           /* @__PURE__ */ jsx(
             RowControls,
             {
-              label: "action",
+              labels,
+              label: labels.itemAction,
               first: index === 0,
               last: index === value.then.length - 1,
               disabled: false,
@@ -146,18 +183,15 @@ function RuleBuilder({
           )
         ] }, action.id);
       }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: actions.length === 0, onClick: () => updateActions([...value.then, { id: nextId("action"), type: actions[0]?.id ?? "", parameters: {} }]), children: addActionLabel })
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: actions.length === 0, onClick: () => updateActions([...value.then, { id: nextId("action"), type: actions[0]?.id ?? "", parameters: {} }]), children: labels.addAction })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__validation", "aria-live": "polite", children: issues.length === 0 ? /* @__PURE__ */ jsx("span", { children: "Rule is valid." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("strong", { children: [
-        issues.length,
-        " validation issue",
-        issues.length === 1 ? "" : "s"
-      ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__validation", "aria-live": "polite", children: issues.length === 0 ? /* @__PURE__ */ jsx("span", { children: labels.valid }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("strong", { children: issuesText(labels.issuesOne, labels.issuesMany) }),
       /* @__PURE__ */ jsx("ul", { children: issues.map((issue, index) => /* @__PURE__ */ jsx("li", { children: issue.message }, `${issue.path}-${index}`)) })
     ] }) })
   ] });
 }
 export {
+  DEFAULT_RULE_BUILDER_LABELS,
   RuleBuilder
 };