@tensor_1/react 2.11.0 → 2.13.0

package/dist/components/ChartCore.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "../cx.js";
+function readToken(name) {
+  if (typeof getComputedStyle === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function uixChartPalette() {
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
+}
+function ChartCore({
+  engine,
+  option,
+  title,
+  subtitle,
+  height = 280,
+  className,
+  style,
+  ariaLabel,
+  tableData,
+  tableHeaders,
+  onReady,
+  header
+}) {
+  const containerRef = useRef(null);
+  const chartRef = useRef(null);
+  const appliedOptionRef = useRef(null);
+  const latestOptionRef = useRef(option);
+  const onReadyRef = useRef(onReady);
+  const tableId = useId();
+  latestOptionRef.current = option;
+  onReadyRef.current = onReady;
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const chart = engine.init(element, null, { renderer: "svg" });
+    chartRef.current = chart;
+    chart.setOption(latestOptionRef.current);
+    appliedOptionRef.current = latestOptionRef.current;
+    onReadyRef.current?.(chart);
+    let frame = 0;
+    let width = element.clientWidth;
+    let height2 = element.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      const nextHeight = element.clientHeight;
+      if (nextWidth === width && nextHeight === height2) return;
+      width = nextWidth;
+      height2 = nextHeight;
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        chart.resize();
+      });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+      chart.dispose();
+      chartRef.current = null;
+      appliedOptionRef.current = null;
+    };
+  }, [engine]);
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart || appliedOptionRef.current === option) return;
+    chart.setOption(option, { notMerge: false });
+    appliedOptionRef.current = option;
+  }, [option]);
+  const heightValue = typeof height === "number" ? `${height}px` : height;
+  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const hasTable = Boolean(tableData?.length && tableHeaders?.length);
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart", className), style, children: [
+    title != null || subtitle != null || header != null ? /* @__PURE__ */ jsxs("div", { children: [
+      header,
+      title ? /* @__PURE__ */ jsx("div", { className: "uix-chart__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsx("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: { height: heightValue },
+        role: "img",
+        "aria-label": effectiveAriaLabel,
+        "aria-describedby": hasTable ? tableId : void 0
+      }
+    ),
+    hasTable ? /* @__PURE__ */ jsxs("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("td", { children: row[label] }, label)) }, index)) })
+    ] }) : null
+  ] });
+}
+export {
+  ChartCore,
+  uixChartPalette
+};

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+
+interface ColorPickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    foreground: string;
+    presets?: string[];
+    recent?: string[];
+    minimumContrast?: number;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** Token-friendly HSV/hex picker with a fully keyboard-operable path and contrast feedback. */
+declare function ColorPicker({ value, onChange, foreground, presets, recent, minimumContrast, label, disabled, className, }: ColorPickerProps): react.JSX.Element;
+
+export { ColorPicker, type ColorPickerProps };

package/dist/components/ColorPicker.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { contrastRatio, hexToRgb, hsvToHex, normalizeHex, rgbToHsv } from "../color-model.js";
+const EMPTY_COLORS = [];
+function ColorPicker({
+  value,
+  onChange,
+  foreground,
+  presets = EMPTY_COLORS,
+  recent = EMPTY_COLORS,
+  minimumContrast = 4.5,
+  label = "Choose color",
+  disabled,
+  className
+}) {
+  const id = useId();
+  const triggerRef = useRef(null);
+  const dialogRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const normalized = normalizeHex(value) ?? "#000000";
+  const [hexText, setHexText] = useState(normalized);
+  const hsv = useMemo(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
+  const ratio = contrastRatio(normalized, foreground) ?? 0;
+  const passes = ratio >= minimumContrast;
+  useEffect(() => setHexText(normalized), [normalized]);
+  useEffect(() => {
+    if (!open) return;
+    const dialog = dialogRef.current;
+    dialog?.querySelector("input,button")?.focus();
+    const onPointer = (event) => {
+      if (!dialog?.contains(event.target) && !triggerRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointer);
+    return () => document.removeEventListener("mousedown", onPointer);
+  }, [open]);
+  const close = () => {
+    setOpen(false);
+    requestAnimationFrame(() => triggerRef.current?.focus());
+  };
+  const onDialogKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const focusable = Array.from(dialogRef.current?.querySelectorAll('button:not([disabled]),input:not([disabled]),[tabindex="0"]') ?? []);
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  const updateHsv = (part) => onChange(hsvToHex({ ...hsv, ...part }));
+  const commitHex = () => {
+    const next = normalizeHex(hexText);
+    if (next) onChange(next);
+  };
+  const choose = (candidate) => {
+    const next = normalizeHex(candidate);
+    if (next) onChange(next);
+  };
+  const sampleStyle = { backgroundColor: normalized };
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-color-picker", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: "uix-color-picker__trigger",
+        "aria-label": `${label}: ${normalized}`,
+        "aria-expanded": open,
+        "aria-controls": `${id}-dialog`,
+        onClick: () => setOpen((current) => !current),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: normalized })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dialogRef,
+        id: `${id}-dialog`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": label,
+        className: "uix-color-picker__popover",
+        onKeyDown: onDialogKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ jsx("span", { style: { color: foreground }, children: "Aa" }) }),
+          /* @__PURE__ */ jsxs("label", { className: "uix-color-picker__range", children: [
+            "Hue ",
+            /* @__PURE__ */ jsxs("span", { children: [
+              Math.round(hsv.h),
+              "\xB0"
+            ] }),
+            /* @__PURE__ */ jsx("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "uix-color-picker__range", children: [
+            "Saturation ",
+            /* @__PURE__ */ jsxs("span", { children: [
+              Math.round(hsv.s * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "uix-color-picker__range", children: [
+            "Brightness ",
+            /* @__PURE__ */ jsxs("span", { children: [
+              Math.round(hsv.v * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "uix-color-picker__hex", children: [
+            "Hex",
+            /* @__PURE__ */ jsxs("span", { className: "uix-color-picker__hex-row", children: [
+              /* @__PURE__ */ jsx("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
+                if (event.key === "Enter") commitHex();
+              }, "aria-invalid": !normalizeHex(hexText) }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: "Set" })
+            ] })
+          ] }),
+          (presets.length > 0 || recent.length > 0) && /* @__PURE__ */ jsxs("div", { className: "uix-color-picker__palettes", children: [
+            presets.length > 0 && /* @__PURE__ */ jsxs("fieldset", { children: [
+              /* @__PURE__ */ jsx("legend", { children: "Presets" }),
+              /* @__PURE__ */ jsx("div", { children: presets.map((color) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use preset ${color}` }, color)) })
+            ] }),
+            recent.length > 0 && /* @__PURE__ */ jsxs("fieldset", { children: [
+              /* @__PURE__ */ jsx("legend", { children: "Recent" }),
+              /* @__PURE__ */ jsx("div", { children: recent.map((color) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use recent color ${color}` }, color)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: [
+            "Contrast ",
+            ratio.toFixed(2),
+            ":1 \u2014 ",
+            passes ? `passes WCAG AA (${minimumContrast}:1)` : `does not meet WCAG AA (${minimumContrast}:1)`
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: "Done" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ColorPicker
+};

package/dist/components/DateRangePicker.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { DateRangeValue } from '../calendar-model.js';
+
+interface DateRangePickerProps {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    visibleMonth?: string;
+    onVisibleMonthChange?: (month: string) => void;
+    months?: number;
+    min?: string;
+    max?: string;
+    isDateDisabled?: (date: string) => boolean;
+    locale?: string;
+    label?: string;
+    invalid?: boolean;
+    invalidMessage?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** Controlled, two-month range picker using the UIx calendar language. */
+declare function DateRangePicker({ value, onChange, visibleMonth: controlledMonth, onVisibleMonthChange, months, min, max, isDateDisabled, locale, label, invalid, invalidMessage, disabled, className, }: DateRangePickerProps): react.JSX.Element;
+
+export { DateRangePicker, type DateRangePickerProps };

package/dist/components/DateRangePicker.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { addCalendarDays, addCalendarMonths, buildMonthGrid, isDateInRange, isDateUnavailable, selectRangeDate, startOfMonth } from "../calendar-model.js";
+import { cx } from "../cx.js";
+const monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
+const dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
+function DateRangePicker({
+  value,
+  onChange,
+  visibleMonth: controlledMonth,
+  onVisibleMonthChange,
+  months = 2,
+  min,
+  max,
+  isDateDisabled,
+  locale,
+  label = "Choose date range",
+  invalid,
+  invalidMessage = "The selected date range is invalid.",
+  disabled,
+  className
+}) {
+  const id = useId();
+  const [internalMonth, setInternalMonth] = useState(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
+  const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
+  const [activeDate, setActiveDate] = useState(value.end ?? value.start ?? visibleMonth);
+  const rootRef = useRef(null);
+  const pendingFocus = useRef(false);
+  const count = Math.max(1, Math.min(3, months));
+  const calendars = useMemo(() => Array.from({ length: count }, (_, index) => {
+    const month = startOfMonth(addCalendarMonths(visibleMonth, index));
+    return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
+  }), [visibleMonth, count]);
+  const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
+  useEffect(() => {
+    const first = calendars[0]?.days[0]?.date;
+    const finalDays = calendars[calendars.length - 1]?.days;
+    const last = finalDays?.[finalDays.length - 1]?.date;
+    if (first && last && (activeDate < first || activeDate > last)) setActiveDate(first);
+  }, [activeDate, calendars]);
+  useEffect(() => {
+    if (!pendingFocus.current) return;
+    rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus();
+    pendingFocus.current = false;
+  }, [activeDate, visibleMonth]);
+  const setMonth = (month) => {
+    const next = startOfMonth(month);
+    if (controlledMonth === void 0) setInternalMonth(next);
+    onVisibleMonthChange?.(next);
+  };
+  const focusDate = (date) => {
+    setActiveDate(date);
+    if (date < calendars[0].month || date.slice(0, 7) > calendars[calendars.length - 1].month.slice(0, 7)) setMonth(startOfMonth(date));
+    pendingFocus.current = true;
+  };
+  const choose = (date) => {
+    if (disabled || isDateUnavailable(date, { min, max, isDisabled: isDateDisabled })) return;
+    onChange(selectRangeDate(value, date));
+    setActiveDate(date);
+  };
+  const onDateKeyDown = (event, date) => {
+    const offsets = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+    if (event.key in offsets) {
+      event.preventDefault();
+      focusDate(addCalendarDays(date, offsets[event.key]));
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const weekday = (/* @__PURE__ */ new Date(`${date}T00:00:00Z`)).getUTCDay();
+      const mondayIndex = (weekday + 6) % 7;
+      focusDate(addCalendarDays(date, event.key === "Home" ? -mondayIndex : 6 - mondayIndex));
+    } else if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      focusDate(addCalendarMonths(date, event.key === "PageUp" ? -1 : 1));
+    }
+  };
+  const announcement = !value.start ? "No date range selected." : !value.end ? `Start date ${dateLabel(value.start, locale)} selected. Choose an end date.` : `${dateLabel(value.start, locale)} to ${dateLabel(value.end, locale)} selected.`;
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-date-range-picker", rangeInvalid && "uix-date-range-picker--invalid", className), "aria-labelledby": `${id}-label`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-date-range-picker__header", children: [
+      /* @__PURE__ */ jsx("h3", { id: `${id}-label`, children: label }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, -1)), "aria-label": "Show previous month", children: "Previous" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, 1)), "aria-label": "Show next month", children: "Next" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: rootRef, className: "uix-date-range-picker__months", children: calendars.map(({ month, days }) => /* @__PURE__ */ jsxs("div", { className: "uix-date-range-picker__month", children: [
+      /* @__PURE__ */ jsx("h4", { children: monthLabel(month, locale) }),
+      /* @__PURE__ */ jsx("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((day) => /* @__PURE__ */ jsx("span", { children: day }, day)) }),
+      /* @__PURE__ */ jsxs("div", { className: "uix-date-range-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
+        Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }, `blank-${index}`)),
+        days.map((day) => {
+          const unavailable = disabled || isDateUnavailable(day.date, { min, max, isDisabled: isDateDisabled });
+          const edge = day.date === value.start ? "start" : day.date === value.end ? "end" : void 0;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-date": day.date,
+              "data-range-edge": edge,
+              "data-in-range": isDateInRange(day.date, value) || void 0,
+              "aria-pressed": edge != null || isDateInRange(day.date, value),
+              "aria-label": `${dateLabel(day.date, locale)}${edge ? `, ${edge} of selected range` : isDateInRange(day.date, value) ? ", in selected range" : ""}`,
+              tabIndex: activeDate === day.date ? 0 : -1,
+              disabled: unavailable,
+              onFocus: () => setActiveDate(day.date),
+              onKeyDown: (event) => onDateKeyDown(event, day.date),
+              onClick: () => choose(day.date),
+              children: day.day
+            },
+            day.date
+          );
+        })
+      ] })
+    ] }, month)) }),
+    /* @__PURE__ */ jsx("p", { className: "uix-date-range-picker__selection", "aria-live": "polite", children: announcement }),
+    rangeInvalid && /* @__PURE__ */ jsx("p", { className: "uix-field__error", role: "alert", children: invalidMessage })
+  ] });
+}
+export {
+  DateRangePicker
+};

package/dist/components/DiffViewer.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { JsonValue } from '../json-value.js';
+import { DiffEntry, DiffResolution } from '../diff-model.js';
+
+interface DiffViewerProps {
+    base?: JsonValue;
+    current?: JsonValue;
+    incoming?: JsonValue;
+    entries?: DiffEntry[];
+    resolutions?: Record<string, DiffResolution>;
+    onResolutionChange?: (path: string, resolution: DiffResolution) => void;
+    labels?: Partial<Record<'base' | 'current' | 'incoming', string>>;
+    className?: string;
+}
+/** Three-way configuration diff with per-entry keyboard-operable resolution. */
+declare function DiffViewer({ base, current, incoming, entries: providedEntries, resolutions: controlledResolutions, onResolutionChange, labels, className, }: DiffViewerProps): react.JSX.Element;
+
+export { DiffViewer, type DiffViewerProps };

package/dist/components/DiffViewer.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { buildThreeWayDiff, summarizeDiff } from "../diff-model.js";
+import { cx } from "../cx.js";
+import { StatusPill } from "./StatusPill.js";
+const GROUPS = [
+  { kind: "conflicted", label: "Conflicted" },
+  { kind: "changed", label: "Changed" },
+  { kind: "added", label: "Added" },
+  { kind: "removed", label: "Removed" }
+];
+const DEFAULT_LABELS = {};
+const renderValue = (value) => value === void 0 ? "Not present" : JSON.stringify(value, null, 2);
+function DiffViewer({
+  base,
+  current,
+  incoming,
+  entries: providedEntries,
+  resolutions: controlledResolutions,
+  onResolutionChange,
+  labels = DEFAULT_LABELS,
+  className
+}) {
+  const id = useId();
+  const entries = useMemo(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
+  const [internalResolutions, setInternalResolutions] = useState({});
+  const resolutions = controlledResolutions ?? internalResolutions;
+  const summary = summarizeDiff(entries, resolutions);
+  const resolve = (path, resolution) => {
+    if (controlledResolutions === void 0) setInternalResolutions((currentState) => ({ ...currentState, [path]: resolution }));
+    onResolutionChange?.(path, resolution);
+  };
+  if (entries.length === 0) return /* @__PURE__ */ jsxs("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": "Configuration differences", children: [
+    /* @__PURE__ */ jsx("h3", { children: "No differences" }),
+    /* @__PURE__ */ jsx("p", { children: "Base, current, and incoming values are aligned." })
+  ] });
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-diff-viewer", className), "aria-label": "Configuration differences", children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-diff-viewer__summary", "aria-label": "Difference summary", children: [
+      GROUPS.map((group) => /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("b", { children: summary[group.kind] }),
+        " ",
+        group.label.toLowerCase()
+      ] }, group.kind)),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("b", { children: summary.resolved }),
+        " resolved"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("b", { children: summary.pending }),
+        " pending"
+      ] })
+    ] }),
+    GROUPS.map((group) => {
+      const grouped = entries.filter((entry) => entry.kind === group.kind);
+      if (!grouped.length) return null;
+      return /* @__PURE__ */ jsxs("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${group.kind}`, children: [
+        /* @__PURE__ */ jsxs("h3", { id: `${id}-${group.kind}`, children: [
+          group.label,
+          " ",
+          /* @__PURE__ */ jsx("span", { children: grouped.length })
+        ] }),
+        grouped.map((entry) => {
+          const resolution = resolutions[entry.path] ?? "pending";
+          return /* @__PURE__ */ jsxs("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
+            /* @__PURE__ */ jsxs("summary", { children: [
+              /* @__PURE__ */ jsx("code", { children: entry.path }),
+              /* @__PURE__ */ jsx(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolution })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ jsxs("div", { role: "region", "aria-label": `${labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}`} value for ${entry.path}`, children: [
+              /* @__PURE__ */ jsx("strong", { children: labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}` }),
+              /* @__PURE__ */ jsx("pre", { children: renderValue(entry[version]) })
+            ] }, version)) }),
+            /* @__PURE__ */ jsxs("div", { className: "uix-diff-viewer__actions", "aria-label": `Resolve ${entry.path}`, children: [
+              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: "Accept incoming" }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: "Keep current" }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: "Mark pending" })
+            ] })
+          ] }, entry.path);
+        })
+      ] }, group.kind);
+    }),
+    /* @__PURE__ */ jsxs("p", { className: "uix-visually-hidden", "aria-live": "polite", children: [
+      summary.resolved,
+      " of ",
+      entries.length,
+      " differences resolved."
+    ] })
+  ] });
+}
+export {
+  DiffViewer
+};

package/dist/components/Inbox.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Inbox({ children, className, ...props }) {

package/dist/components/LicensePositionBar.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface LicensePositionBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    consumed: number;
+    entitled: number;
+    consumedLabel?: string;
+    entitledLabel?: string;
+    availableLabel?: string;
+    overLabel?: string;
+    unit?: string;
+    formatValue?: (value: number) => string;
+}
+/** Capacity-versus-limit recipe with a visible and textual over-allocation state. */
+declare function LicensePositionBar({ consumed, entitled, consumedLabel, entitledLabel, availableLabel, overLabel, unit, formatValue, className, ...props }: LicensePositionBarProps): react.JSX.Element;
+
+export { LicensePositionBar, type LicensePositionBarProps };

package/dist/components/LicensePositionBar.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { Meter } from "./Meter.js";
+import { StatusPill } from "./StatusPill.js";
+const defaultCapacityFormat = (value) => new Intl.NumberFormat().format(value);
+function LicensePositionBar({
+  consumed,
+  entitled,
+  consumedLabel = "Consumed",
+  entitledLabel = "Entitled",
+  availableLabel = "available",
+  overLabel = "over limit",
+  unit = "",
+  formatValue = defaultCapacityFormat,
+  className,
+  ...props
+}) {
+  const safeConsumed = Math.max(0, consumed);
+  const safeEntitled = Math.max(0, entitled);
+  const over = Math.max(0, safeConsumed - safeEntitled);
+  const available = Math.max(0, safeEntitled - safeConsumed);
+  const percent = safeEntitled === 0 ? safeConsumed > 0 ? 100 : 0 : safeConsumed / safeEntitled * 100;
+  const format = (value) => `${formatValue(value)}${unit ? ` ${unit}` : ""}`;
+  const summary = `${consumedLabel}: ${format(safeConsumed)}. ${entitledLabel}: ${format(safeEntitled)}. ${over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}`}.`;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-license-position__header", children: [
+      /* @__PURE__ */ jsxs("span", { className: "uix-license-position__value", children: [
+        format(safeConsumed),
+        " / ",
+        format(safeEntitled)
+      ] }),
+      /* @__PURE__ */ jsx(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-license-position__track", children: [
+      /* @__PURE__ */ jsx(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
+      over > 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "uix-license-position__overflow",
+          style: { width: `${Math.min(100, safeEntitled === 0 ? 100 : over / safeEntitled * 100)}%` },
+          "aria-hidden": "true"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: summary })
+  ] });
+}
+export {
+  LicensePositionBar
+};

package/dist/components/MatchReview.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { JsonValue } from '../json-value.js';
+
+interface MatchReviewField {
+    id: string;
+    label: string;
+    render?: (value: JsonValue | undefined, record: Record<string, JsonValue>) => ReactNode;
+}
+interface MatchReviewCandidate {
+    id: string;
+    record: Record<string, JsonValue>;
+    confidence?: number;
+    status?: 'pending' | 'resolved';
+    decision?: 'accepted' | 'dismissed' | 'split' | 'other';
+}
+type MatchReviewAction = 'accept' | 'dismiss' | 'split' | 'pick-other';
+interface MatchBulkResult {
+    succeeded: number;
+    failed?: number;
+}
+interface MatchReviewProps {
+    incoming: Record<string, JsonValue>;
+    incomingLabel?: string;
+    fields: MatchReviewField[];
+    candidates: MatchReviewCandidate[];
+    selectedIds?: Set<string>;
+    onSelectionChange?: (ids: Set<string>) => void;
+    onDecision: (candidateId: string, action: MatchReviewAction) => void;
+    onBulkDecision?: (candidateIds: string[], action: Extract<MatchReviewAction, 'accept' | 'dismiss'>) => void | MatchBulkResult | Promise<void | MatchBulkResult>;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    className?: string;
+}
+/** 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, }: MatchReviewProps): react.JSX.Element;
+
+export { type MatchBulkResult, MatchReview, type MatchReviewAction, type MatchReviewCandidate, type MatchReviewField, type MatchReviewProps };