@tensor_1/react 2.53.0 → 2.54.0

package/dist/index.cjs

@@ -177,6 +177,8 @@ __export(src_exports, {
   LocaleSwitcher: () => LocaleSwitcher,
   Mark: () => Mark,
   MatchReview: () => MatchReview,
+  MatrixHeatmap: () => MatrixHeatmap,
+  MatrixInput: () => MatrixInput,
   Menu: () => Menu,
   MenuGroup: () => MenuGroup,
   MenuItem: () => MenuItem,
@@ -23539,9 +23541,355 @@ function AdoptCandidate({ candidate, incoming, fields, labels, heading, provenan
   ] });
 }
 
-// src/components/MetricInput.tsx
+// src/components/MatrixInput.tsx
+var import_react110 = require("react");
+
+// src/hooks/useMatrixGrid.ts
 var import_react109 = require("react");
 
+// src/matrix-model.ts
+function matrixStep(from, size, key, options = {}) {
+  const { corner = false, rtl = false } = options;
+  const lastRow = size.rows - 1;
+  const lastColumn = size.columns - 1;
+  const clamp3 = (row, column) => ({
+    row: Math.max(0, Math.min(lastRow, row)),
+    column: Math.max(0, Math.min(lastColumn, column))
+  });
+  switch (key) {
+    case "ArrowUp":
+      return clamp3(from.row - 1, from.column);
+    case "ArrowDown":
+      return clamp3(from.row + 1, from.column);
+    case "ArrowLeft":
+      return clamp3(from.row, from.column + (rtl ? 1 : -1));
+    case "ArrowRight":
+      return clamp3(from.row, from.column + (rtl ? -1 : 1));
+    case "Home":
+      return corner ? clamp3(0, 0) : clamp3(from.row, 0);
+    case "End":
+      return corner ? clamp3(lastRow, lastColumn) : clamp3(from.row, lastColumn);
+    default:
+      return null;
+  }
+}
+
+// src/hooks/useMatrixGrid.ts
+var useIsomorphicLayoutEffect26 = typeof document !== "undefined" ? import_react109.useLayoutEffect : import_react109.useEffect;
+var CELL = "[data-uix-matrix-cell]";
+function useMatrixGrid(rows, columns) {
+  const gridRef = (0, import_react109.useRef)(null);
+  const stop2 = (0, import_react109.useRef)({ node: null, index: 0 });
+  const size = (0, import_react109.useRef)({ rows, columns });
+  size.current = { rows, columns };
+  const cells = () => Array.from(gridRef.current?.querySelectorAll(CELL) ?? []);
+  useIsomorphicLayoutEffect26(() => {
+    stop2.current = syncRovingStop(cells(), stop2.current);
+  });
+  const onGridFocus = (0, import_react109.useCallback)((event) => {
+    const cell = event.target.closest(CELL);
+    if (cell) stop2.current = syncRovingStop(cells(), stop2.current, cell);
+  }, []);
+  const onCellKeyDown = (0, import_react109.useCallback)((event) => {
+    const cell = event.currentTarget;
+    if (cell.getAttribute("aria-expanded") === "true") return;
+    const { key, altKey, shiftKey } = event;
+    const corner = event.ctrlKey || event.metaKey;
+    if (altKey || shiftKey || corner && key !== "Home" && key !== "End") return;
+    const to = matrixStep(
+      { row: Number(cell.dataset.row), column: Number(cell.dataset.column) },
+      size.current,
+      key,
+      { corner, rtl: getComputedStyle(cell).direction === "rtl" }
+    );
+    if (!to) return;
+    event.preventDefault();
+    const next = gridRef.current?.querySelector(`${CELL}[data-row="${to.row}"][data-column="${to.column}"]`);
+    if (!next || next === cell) return;
+    next.focus({ preventScroll: true });
+    next.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    const grid = gridRef.current;
+    const header = grid?.tHead?.rows[0]?.cells[0];
+    const scroller = grid?.parentElement;
+    if (!header || !scroller) return;
+    const under = header.getBoundingClientRect().bottom - next.getBoundingClientRect().top;
+    if (under > 0) scroller.scrollTop -= under;
+  }, []);
+  return { gridRef, onCellKeyDown, onGridFocus };
+}
+
+// src/components/MatrixParts.tsx
+var import_jsx_runtime124 = require("react/jsx-runtime");
+function MatrixFrame({
+  gridRef,
+  rows,
+  columns,
+  rowAxisLabel,
+  columnAxisLabel,
+  ariaLabel,
+  ariaLabelledBy,
+  readOnly,
+  onFocus,
+  gridProps,
+  renderCell
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "uix-matrix__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    "table",
+    {
+      ...gridProps,
+      ref: gridRef,
+      role: "grid",
+      className: "uix-matrix__grid",
+      style: { "--uix-matrix-columns": columns.length },
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-readonly": readOnly || void 0,
+      onFocus,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("th", { scope: "col", className: "uix-matrix__corner", children: [
+            columnAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "uix-matrix__axis uix-matrix__axis--column", children: columnAxisLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "uix-matrix__axis", children: rowAxisLabel })
+          ] }),
+          columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("th", { scope: "col", className: "uix-matrix__column", children: [
+            column.label,
+            column.description != null && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "uix-matrix__note", children: column.description })
+          ] }, column.id))
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("th", { scope: "row", className: "uix-matrix__row", children: [
+            row.label,
+            row.description != null && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "uix-matrix__note", children: row.description })
+          ] }),
+          columns.map((column, columnIndex) => renderCell(row, column, rowIndex, columnIndex))
+        ] }, row.id)) })
+      ]
+    }
+  ) });
+}
+var matrixClass = (className, modifier) => cx("uix-matrix", modifier && `uix-matrix--${modifier}`, className);
+
+// src/components/MatrixInput.tsx
+var import_jsx_runtime125 = require("react/jsx-runtime");
+var Cell = (0, import_react110.memo)(function Cell2({
+  rowId,
+  columnId,
+  rowIndex,
+  columnIndex,
+  name,
+  value,
+  options,
+  option,
+  empty,
+  help,
+  error,
+  disabled,
+  readOnly,
+  id,
+  onKeyDown,
+  onPick
+}) {
+  const locked = disabled || readOnly;
+  const helpId = help ? `${id}-help` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const describedBy = [errorId, helpId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("td", { role: "gridcell", className: "uix-matrix__cell", "aria-readonly": locked || void 0, "aria-invalid": error ? true : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      Select,
+      {
+        size: "sm",
+        "aria-label": name,
+        "aria-describedby": describedBy,
+        "aria-disabled": disabled || void 0,
+        tabIndex: rowIndex === 0 && columnIndex === 0 ? 0 : -1,
+        options,
+        value,
+        placeholder: empty,
+        readOnly: locked,
+        invalid: !!error,
+        "data-uix-matrix-cell": "",
+        "data-row": rowIndex,
+        "data-column": columnIndex,
+        "data-tone": option?.tone,
+        "data-unrated": option?.unrated || void 0,
+        "data-locked": disabled || void 0,
+        "data-help": help,
+        onKeyDown,
+        onValueChange: (next) => onPick(rowId, columnId, next)
+      }
+    ),
+    help && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { id: helpId, className: "uix-visually-hidden", children: help }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { id: errorId, className: "uix-matrix__error", children: error })
+  ] });
+});
+function MatrixInput({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  rows,
+  columns,
+  options,
+  value,
+  onChange,
+  rowAxisLabel,
+  columnAxisLabel,
+  labels,
+  getCell,
+  disabled = false,
+  readOnly = false,
+  className,
+  ...props
+}) {
+  const uid = (0, import_react110.useId)();
+  const { gridRef, onCellKeyDown, onGridFocus } = useMatrixGrid(rows.length, columns.length);
+  const helpRef = (0, import_react110.useRef)(null);
+  const latest = (0, import_react110.useRef)({ value, onChange });
+  latest.current = { value, onChange };
+  const onPick = (0, import_react110.useCallback)((rowId, columnId, next) => {
+    const current = latest.current;
+    current.onChange(
+      { ...current.value, [rowId]: { ...current.value[rowId], [columnId]: next } },
+      { rowId, columnId, value: next }
+    );
+  }, []);
+  const choices = (0, import_react110.useMemo)(() => options.map(({ value: v, label, description, disabled: off }) => ({
+    value: v,
+    label,
+    ...description ? { description } : {},
+    ...off ? { disabled: true } : {}
+  })), [options]);
+  const byValue = (0, import_react110.useMemo)(() => new Map(options.map((o) => [o.value, o])), [options]);
+  const showHelp = (cell) => {
+    if (helpRef.current) helpRef.current.textContent = cell?.getAttribute("data-help") ?? "";
+  };
+  const cellOf = (target) => target?.closest?.("[data-uix-matrix-cell]") ?? null;
+  const onFocus = (event) => {
+    onGridFocus(event);
+    showHelp(cellOf(event.target));
+  };
+  const onPointerOver = (event) => {
+    const cell = cellOf(event.target);
+    if (cell && event.pointerType === "mouse") showHelp(cell);
+  };
+  const onPointerLeave = () => showHelp(cellOf(document.activeElement));
+  const onBlur = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) showHelp(null);
+  };
+  (0, import_react110.useEffect)(() => {
+    const focused = cellOf(document.activeElement);
+    if (focused && gridRef.current?.contains(focused)) showHelp(focused);
+  });
+  const anyHelp = !!getCell && rows.some((row) => columns.some((column) => getCell(row.id, column.id)?.help));
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { ...props, className: matrixClass(className, "input"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      MatrixFrame,
+      {
+        gridRef,
+        rows,
+        columns,
+        rowAxisLabel,
+        columnAxisLabel,
+        ariaLabel,
+        ariaLabelledBy,
+        readOnly,
+        onFocus,
+        gridProps: { onPointerOver, onPointerLeave, onBlur },
+        renderCell: (row, column, rowIndex, columnIndex) => {
+          const state = getCell?.(row.id, column.id);
+          const current = value[row.id]?.[column.id] ?? "";
+          return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+            Cell,
+            {
+              rowId: row.id,
+              columnId: column.id,
+              rowIndex,
+              columnIndex,
+              name: `${row.label}, ${column.label}`,
+              value: current,
+              options: choices,
+              option: byValue.get(current),
+              empty: labels.empty,
+              help: state?.help,
+              error: state?.error,
+              disabled: disabled || !!state?.disabled,
+              readOnly: readOnly || !!state?.readOnly,
+              id: `${uid}-${rowIndex}-${columnIndex}`,
+              onKeyDown: onCellKeyDown,
+              onPick
+            },
+            column.id
+          );
+        }
+      }
+    ),
+    anyHelp && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("p", { ref: helpRef, className: "uix-matrix__help", "aria-hidden": "true" })
+  ] });
+}
+
+// src/components/MatrixHeatmap.tsx
+var import_react111 = require("react");
+var import_jsx_runtime126 = require("react/jsx-runtime");
+var cellKey = (rowId, columnId) => JSON.stringify([rowId, columnId]);
+function MatrixHeatmap({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  rows,
+  columns,
+  cells,
+  onOpenCell,
+  renderLink,
+  rowAxisLabel,
+  columnAxisLabel,
+  labels,
+  className,
+  ...props
+}) {
+  const { gridRef, onCellKeyDown, onGridFocus } = useMatrixGrid(rows.length, columns.length);
+  const byCell = (0, import_react111.useMemo)(() => new Map(cells.map((cell) => [cellKey(cell.rowId, cell.columnId), cell])), [cells]);
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { ...props, className: matrixClass(className, "heatmap"), children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    MatrixFrame,
+    {
+      gridRef,
+      rows,
+      columns,
+      rowAxisLabel,
+      columnAxisLabel,
+      ariaLabel,
+      ariaLabelledBy,
+      readOnly: true,
+      onFocus: onGridFocus,
+      renderCell: (row, column, rowIndex, columnIndex) => {
+        const cell = byCell.get(cellKey(row.id, column.id));
+        const figure = cell && !cell.hideCount && cell.count != null ? String(cell.count) : null;
+        const empty = figure == null && !cell?.band;
+        const detail = empty ? labels.empty : [cell?.band?.label, figure].filter(Boolean).join(", ");
+        const name = `${row.label}, ${column.label}${detail ? `: ${detail}` : ""}`;
+        const opened = cell ?? { rowId: row.id, columnId: column.id };
+        const control = {
+          className: "uix-matrix__tile",
+          "aria-label": name,
+          tabIndex: rowIndex === 0 && columnIndex === 0 ? 0 : -1,
+          "data-uix-matrix-cell": "",
+          "data-row": rowIndex,
+          "data-column": columnIndex,
+          "data-tone": cell?.band?.tone,
+          "data-empty": empty || void 0,
+          "aria-disabled": cell?.href == null && !onOpenCell || void 0,
+          onKeyDown: onCellKeyDown,
+          onClick: cell?.href != null ? void 0 : () => onOpenCell?.(opened)
+        };
+        const content = /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
+          figure != null && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "uix-matrix__count", children: figure }),
+          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "uix-matrix__band", children: empty ? labels.empty : cell?.band?.label })
+        ] });
+        return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("td", { role: "gridcell", className: "uix-matrix__cell", children: cell?.href != null ? renderUixLink(renderLink, { ...control, href: cell.href, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("button", { type: "button", ...control, children: content }) }, column.id);
+      }
+    }
+  ) });
+}
+
+// src/components/MetricInput.tsx
+var import_react112 = require("react");
+
 // src/metric-model.ts
 function decimals(value) {
   const text = String(value).toLowerCase();
@@ -23565,7 +23913,7 @@ function parseMetricValue(value) {
 }
 
 // src/components/MetricInput.tsx
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var defaultMetricFormat = (input) => input == null ? "" : String(input);
 function MetricInput({
   value,
@@ -23586,14 +23934,14 @@ function MetricInput({
   className,
   id: providedId
 }) {
-  const generatedId = (0, import_react109.useId)();
+  const generatedId = (0, import_react112.useId)();
   const id = providedId ?? generatedId;
   const errorId = `${id}-error`;
   const hintId = `${id}-hint`;
   const showError = Boolean(invalid && errorMessage);
   const describedBy = [hint ? hintId : null, showError ? errorId : null].filter(Boolean).join(" ") || void 0;
-  const [text, setText] = (0, import_react109.useState)(() => format(value));
-  (0, import_react109.useEffect)(() => setText(format(value)), [value, format]);
+  const [text, setText] = (0, import_react112.useState)(() => format(value));
+  (0, import_react112.useEffect)(() => setText(format(value)), [value, format]);
   const commit = (input) => {
     const parsed = parse(input);
     if (input.trim() === "" || parsed !== null) {
@@ -23619,10 +23967,10 @@ function MetricInput({
     const parsed = parse(event.currentTarget.value);
     setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("label", { className: "uix-field__label", htmlFor: id, "data-required": required || void 0, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "uix-metric-input__control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("label", { className: "uix-field__label", htmlFor: id, "data-required": required || void 0, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "uix-metric-input__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
         Input,
         {
           id,
@@ -23643,23 +23991,23 @@ function MetricInput({
           readOnly
         }
       ),
-      unit && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("span", { className: "uix-metric-input__steps", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(PlusIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(MinusIcon, {}) })
+      unit && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("span", { className: "uix-metric-input__steps", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(PlusIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(MinusIcon, {}) })
       ] })
     ] }),
-    unit && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("span", { className: "uix-visually-hidden", children: [
+    unit && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("span", { className: "uix-visually-hidden", children: [
       "Unit: ",
       unit
     ] }),
-    hint && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { id: hintId, className: "uix-field__hint", children: hint }),
-    showError && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
+    hint && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { id: hintId, className: "uix-field__hint", children: hint }),
+    showError && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
   ] });
 }
 
 // src/components/LicensePositionBar.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var defaultCapacityFormat = (value) => new Intl.NumberFormat().format(value);
 function LicensePositionBar({
   consumed,
@@ -23680,18 +24028,18 @@ function LicensePositionBar({
   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__ */ (0, import_jsx_runtime125.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "uix-license-position__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { className: "uix-license-position__value", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "uix-license-position__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { className: "uix-license-position__value", children: [
         format(safeConsumed),
         " / ",
         format(safeEntitled)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "uix-license-position__track", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
-      over > 0 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "uix-license-position__track", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
+      over > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
         "span",
         {
           className: "uix-license-position__overflow",
@@ -23700,12 +24048,12 @@ function LicensePositionBar({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "uix-visually-hidden", children: summary })
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "uix-visually-hidden", children: summary })
   ] });
 }
 
 // src/components/BrandProfiles.tsx
-var import_react111 = require("react");
+var import_react114 = require("react");
 
 // src/color-model.ts
 var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -23774,8 +24122,8 @@ function meetsContrast(background, foreground, minimum = 4.5) {
 }
 
 // src/components/ColorPicker.tsx
-var import_react110 = require("react");
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_react113 = require("react");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var DEFAULT_COLOR_PICKER_LABELS = {
   trigger: "{label}: {color}",
   sample: "Aa",
@@ -23806,17 +24154,17 @@ function ColorPicker({
   labels: labelOverrides
 }) {
   const labels = { ...DEFAULT_COLOR_PICKER_LABELS, ...labelOverrides };
-  const id = (0, import_react110.useId)();
-  const triggerRef = (0, import_react110.useRef)(null);
-  const dialogRef = (0, import_react110.useRef)(null);
-  const [open, setOpen] = (0, import_react110.useState)(false);
+  const id = (0, import_react113.useId)();
+  const triggerRef = (0, import_react113.useRef)(null);
+  const dialogRef = (0, import_react113.useRef)(null);
+  const [open, setOpen] = (0, import_react113.useState)(false);
   const normalized = normalizeHex(value) ?? "#000000";
-  const [hexText, setHexText] = (0, import_react110.useState)(normalized);
-  const hsv = (0, import_react110.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
+  const [hexText, setHexText] = (0, import_react113.useState)(normalized);
+  const hsv = (0, import_react113.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
   const ratio = contrastRatio(normalized, foreground) ?? 0;
   const passes = ratio >= minimumContrast;
-  (0, import_react110.useEffect)(() => setHexText(normalized), [normalized]);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react113.useEffect)(() => setHexText(normalized), [normalized]);
+  (0, import_react113.useEffect)(() => {
     if (!open) return;
     const dialog = dialogRef.current;
     dialog?.querySelector("input,button")?.focus();
@@ -23859,8 +24207,8 @@ function ColorPicker({
     if (next) onChange(next);
   };
   const sampleStyle = { backgroundColor: normalized };
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: cx("uix-color-picker", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: cx("uix-color-picker", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -23872,12 +24220,12 @@ function ColorPicker({
         onClick: () => setOpen((current) => !current),
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { children: normalized })
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: normalized })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
       "div",
       {
         ref: dialogRef,
@@ -23888,55 +24236,55 @@ function ColorPicker({
         className: "uix-color-picker__popover",
         onKeyDown: onDialogKeyDown,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { style: { color: foreground }, children: labels.sample }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("label", { className: "uix-color-picker__range", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { style: { color: foreground }, children: labels.sample }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("label", { className: "uix-color-picker__range", children: [
             labels.hue,
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { children: [
               Math.round(hsv.h),
               "\xB0"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("label", { className: "uix-color-picker__range", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("label", { className: "uix-color-picker__range", children: [
             labels.saturation,
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { children: [
               Math.round(hsv.s * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("label", { className: "uix-color-picker__range", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("label", { className: "uix-color-picker__range", children: [
             labels.brightness,
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { children: [
               Math.round(hsv.v * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("label", { className: "uix-color-picker__hex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("label", { className: "uix-color-picker__hex", children: [
             labels.hex,
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime129.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__ */ (0, import_jsx_runtime126.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: labels.set })
+              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: labels.set })
             ] })
           ] }),
-          (presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "uix-color-picker__palettes", children: [
-            presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("fieldset", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("legend", { children: labels.presets }),
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.usePreset, { color }) }, color)) })
+          (presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "uix-color-picker__palettes", children: [
+            presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("fieldset", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("legend", { children: labels.presets }),
+              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.usePreset, { color }) }, color)) })
             ] }),
-            recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("fieldset", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("legend", { children: labels.recent }),
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.useRecent, { color }) }, color)) })
+            recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("fieldset", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("legend", { children: labels.recent }),
+              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.useRecent, { color }) }, color)) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: fillLabel(passes ? labels.contrastPasses : labels.contrastFails, { ratio: ratio.toFixed(2), minimum: minimumContrast }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: labels.done })
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: fillLabel(passes ? labels.contrastPasses : labels.contrastFails, { ratio: ratio.toFixed(2), minimum: minimumContrast }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: labels.done })
         ]
       }
     )
@@ -23944,7 +24292,7 @@ function ColorPicker({
 }
 
 // src/components/BrandProfiles.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var PROFILE_PROPERTIES = {
   brand: "--uix-brand",
   brandForeground: "--uix-brand-fg",
@@ -24036,7 +24384,7 @@ function BrandProfileEditor({
   labels: labelOverrides
 }) {
   const labels = { ...DEFAULT_BRAND_PROFILE_EDITOR_LABELS, ...labelOverrides };
-  const [announcement, setAnnouncement] = (0, import_react111.useState)("");
+  const [announcement, setAnnouncement] = (0, import_react114.useState)("");
   const update = (patch) => onChange({ ...value, ...patch });
   const apply = () => {
     if (applyTarget !== null) applyBrandProfile(value, applyTarget);
@@ -24053,54 +24401,54 @@ function BrandProfileEditor({
     ...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
     ...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": labels.region, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "uix-brand-profiles__form", children: [
-      profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { className: "uix-field__label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": labels.region, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "uix-brand-profiles__form", children: [
+      profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("label", { className: "uix-field__label", children: [
         labels.profile,
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Select, { value: value.id, options: profiles.map((profile) => ({ value: profile.id, label: profile.name })), onValueChange: (next) => {
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Select, { value: value.id, options: profiles.map((profile) => ({ value: profile.id, label: profile.name })), onValueChange: (next) => {
           const selected = profiles.find((profile) => profile.id === next);
           if (selected) onSelectProfile?.(selected);
         } })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { className: "uix-field__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("label", { className: "uix-field__label", children: [
         labels.name,
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("label", { children: [
           labels.brand,
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ColorPicker, { label: labels.brandColor, value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ColorPicker, { label: labels.brandColor, value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("label", { children: [
           labels.onBrand,
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ColorPicker, { label: labels.onBrandColor, value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ColorPicker, { label: labels.onBrandColor, value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { className: "uix-field__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("label", { className: "uix-field__label", children: [
         labels.bodyFont,
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { className: "uix-field__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("label", { className: "uix-field__label", children: [
         labels.headingFont,
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
         labels.logoFile,
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: labels.apply }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: labels.apply }),
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": fillLabel(labels.preview, { name: value.name }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
-        value.logo ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: labels.logoPlaceholder }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: value.name || labels.previewTitleFallback })
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": fillLabel(labels.preview, { name: value.name }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
+        value.logo ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: labels.logoPlaceholder }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("strong", { children: value.name || labels.previewTitleFallback })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("h3", { children: labels.previewHeading }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("p", { children: labels.previewBody }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: labels.previewPrimary }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("a", { href: "#brand-profile-preview", children: labels.previewLink })
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("h3", { children: labels.previewHeading }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { children: labels.previewBody }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: labels.previewPrimary }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("a", { href: "#brand-profile-preview", children: labels.previewLink })
       ] })
     ] })
   ] });
@@ -24108,7 +24456,7 @@ function BrandProfileEditor({
 var BrandProfiles = BrandProfileEditor;
 
 // src/components/DiffViewer.tsx
-var import_react112 = require("react");
+var import_react115 = require("react");
 
 // src/diff-model.ts
 function isJsonObject(value) {
@@ -24159,7 +24507,7 @@ function summarizeDiff(entries, resolutions = {}) {
 }
 
 // src/components/DiffViewer.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var DEFAULT_DIFF_VIEWER_LABELS = {
   base: "Base",
   current: "Current",
@@ -24207,38 +24555,38 @@ function DiffViewer({
   const labels = { ...DEFAULT_DIFF_VIEWER_LABELS, ...useUixLabels().diffViewer, ...labelOverrides };
   const nameOf = (path) => {
     const node = labelFor?.(path);
-    if (node == null || node === false) return { node: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("code", { children: path }), text: path };
+    if (node == null || node === false) return { node: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("code", { children: path }), text: path };
     return { node, text: typeof node === "string" || typeof node === "number" ? String(node) : path };
   };
   const resolutionLabel = { accept: labels.resolutionAccept, skip: labels.resolutionSkip, pending: labels.resolutionPending };
   const buttonSize = controlSize === "md" ? void 0 : `uix-btn--${controlSize}`;
-  const id = (0, import_react112.useId)();
-  const entries = (0, import_react112.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
-  const [internalResolutions, setInternalResolutions] = (0, import_react112.useState)({});
+  const id = (0, import_react115.useId)();
+  const entries = (0, import_react115.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
+  const [internalResolutions, setInternalResolutions] = (0, import_react115.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__ */ (0, import_jsx_runtime128.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": labels.region, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("h3", { children: labels.noDifferences }),
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { children: labels.noDifferencesDetail })
+  if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": labels.region, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h3", { children: labels.noDifferences }),
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { children: labels.noDifferencesDetail })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": labels.region, "data-control-size": controlSize, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "uix-diff-viewer__summary", role: "group", "aria-label": labels.summary, children: [
-      GROUPS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("b", { children: summary[kind] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": labels.region, "data-control-size": controlSize, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "uix-diff-viewer__summary", role: "group", "aria-label": labels.summary, children: [
+      GROUPS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("b", { children: summary[kind] }),
         " ",
         labels[kind].toLowerCase()
       ] }, kind)),
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("b", { children: summary.resolved }),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("b", { children: summary.resolved }),
         " ",
         labels.resolved
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("b", { children: summary.pending }),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("b", { children: summary.pending }),
         " ",
         labels.pending
       ] })
@@ -24246,43 +24594,43 @@ function DiffViewer({
     GROUPS.map((kind) => {
       const grouped = entries.filter((entry) => entry.kind === kind);
       if (!grouped.length) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${kind}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("h3", { id: `${id}-${kind}`, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${kind}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("h3", { id: `${id}-${kind}`, children: [
           labels[kind],
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { children: grouped.length })
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { children: grouped.length })
         ] }),
         grouped.map((entry) => {
           const resolution = resolutions[entry.path] ?? "pending";
           const name = nameOf(entry.path);
-          return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("summary", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "uix-diff-viewer__name", children: name.node }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolutionLabel[resolution] })
+          return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("summary", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "uix-diff-viewer__name", children: name.node }),
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolutionLabel[resolution] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => {
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => {
               const origin = provenance?.(entry.path, version);
-              return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { role: "region", "aria-label": fillLabel(labels.valueFor, { version: labels[version], path: name.text }), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("strong", { children: labels[version] }),
-                renderValue ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "uix-diff-viewer__value", children: renderValue(entry[version], entry.path, version) ?? labels.notPresent }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("pre", { children: jsonText(entry[version], labels.notPresent) }),
-                origin != null && origin !== false && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "uix-diff-viewer__provenance", children: origin })
+              return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { role: "region", "aria-label": fillLabel(labels.valueFor, { version: labels[version], path: name.text }), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("strong", { children: labels[version] }),
+                renderValue ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "uix-diff-viewer__value", children: renderValue(entry[version], entry.path, version) ?? labels.notPresent }) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("pre", { children: jsonText(entry[version], labels.notPresent) }),
+                origin != null && origin !== false && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "uix-diff-viewer__provenance", children: origin })
               ] }, version);
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: name.text }), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: name.text }), "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: labels.acceptIncoming }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: name.text }), "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: labels.keepCurrent }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: name.text }), "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: labels.markPending })
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: name.text }), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: name.text }), "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: labels.acceptIncoming }),
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: name.text }), "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: labels.keepCurrent }),
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: name.text }), "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: labels.markPending })
             ] })
           ] }, entry.path);
         })
       ] }, kind);
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: fillLabel(labels.progress, { resolved: summary.resolved, total: entries.length }) })
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: fillLabel(labels.progress, { resolved: summary.resolved, total: entries.length }) })
   ] });
 }
 
 // src/components/TextDiff.tsx
-var import_react113 = require("react");
+var import_react116 = require("react");
 
 // src/text-diff-model.ts
 var WORD_TOKENS = /\s+|[\p{L}\p{M}\p{N}_]+|[^\s\p{L}\p{M}\p{N}_]/gu;
@@ -24542,7 +24890,7 @@ function textDiffRows(result, { context } = {}) {
 }
 
 // src/components/TextDiff.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var DEFAULT_TEXT_DIFF_LABELS = {
   before: "Before",
   after: "After",
@@ -24555,47 +24903,47 @@ var DEFAULT_TEXT_DIFF_LABELS = {
 };
 function Marked({ segments, side, labels, whole: whole2 }) {
   const Tag = side === "before" ? "del" : "ins";
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_jsx_runtime129.Fragment, { children: segments.map((segment, i) => segment.changed ? /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(Tag, { "data-whole": whole2 || void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { className: "uix-visually-hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_jsx_runtime132.Fragment, { children: segments.map((segment, i) => segment.changed ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(Tag, { "data-whole": whole2 || void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "uix-visually-hidden", children: [
       side === "before" ? labels.removed : labels.added,
       ": "
     ] }),
     segment.text
-  ] }, i) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react113.Fragment, { children: segment.text }, i)) });
+  ] }, i) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react116.Fragment, { children: segment.text }, i)) });
 }
-function Cell({ line, side, kind, labels }) {
-  if (!line) return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__cell", "data-side": side, "data-empty": "", "aria-hidden": "true" });
+function Cell3({ line, side, kind, labels }) {
+  if (!line) return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__cell", "data-side": side, "data-empty": "", "aria-hidden": "true" });
   const changed = kind !== "equal";
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "uix-text-diff__cell", "data-side": side, "data-kind": changed ? side === "before" ? "delete" : "insert" : "equal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "uix-text-diff__num", "aria-hidden": "true", children: line.number }),
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "uix-text-diff__sign", "aria-hidden": "true", children: changed ? side === "before" ? "\u2212" : "+" : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "uix-text-diff__text", children: line.segments.length === 1 && line.segments[0].text === "" ? "\u200B" : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Marked, { segments: line.segments, side, labels, whole: line.segments.length === 1 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "uix-text-diff__cell", "data-side": side, "data-kind": changed ? side === "before" ? "delete" : "insert" : "equal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "uix-text-diff__num", "aria-hidden": "true", children: line.number }),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "uix-text-diff__sign", "aria-hidden": "true", children: changed ? side === "before" ? "\u2212" : "+" : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "uix-text-diff__text", children: line.segments.length === 1 && line.segments[0].text === "" ? "\u200B" : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Marked, { segments: line.segments, side, labels, whole: line.segments.length === 1 }) })
   ] });
 }
 function Rows({ rows, view, labels, focusFirst }) {
-  const [open, setOpen] = (0, import_react113.useState)(() => /* @__PURE__ */ new Set());
-  const first = (0, import_react113.useRef)(null);
-  (0, import_react113.useEffect)(() => {
+  const [open, setOpen] = (0, import_react116.useState)(() => /* @__PURE__ */ new Set());
+  const first = (0, import_react116.useRef)(null);
+  (0, import_react116.useEffect)(() => {
     if (focusFirst) first.current?.focus();
   }, [focusFirst]);
   const firstProps = (index) => focusFirst && index === 0 ? { ref: first, tabIndex: -1 } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_jsx_runtime129.Fragment, { children: rows.map((row, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_jsx_runtime132.Fragment, { children: rows.map((row, index) => {
     if (row.kind === "fold") {
-      if (open.has(index)) return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Rows, { rows: row.rows, view, labels, focusFirst: true }, index);
-      return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__row", "data-kind": "fold", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("button", { type: "button", className: "uix-text-diff__fold", onClick: () => setOpen((s) => new Set(s).add(index)), children: fillLabel(labels.showUnchanged, { count: row.count }) }) }, index);
+      if (open.has(index)) return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Rows, { rows: row.rows, view, labels, focusFirst: true }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__row", "data-kind": "fold", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("button", { type: "button", className: "uix-text-diff__fold", onClick: () => setOpen((s) => new Set(s).add(index)), children: fillLabel(labels.showUnchanged, { count: row.count }) }) }, index);
     }
     const before = row.kind === "insert" ? void 0 : row.before;
     const after = row.kind === "delete" ? void 0 : row.after;
     if (view === "unified") {
-      if (row.kind === "equal") return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__row", "data-kind": "equal", ...firstProps(index), children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Cell, { line: after, side: "after", kind: "equal", labels }) }, index);
-      return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_react113.Fragment, { children: [
-        before && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__row", "data-kind": "delete", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Cell, { line: before, side: "before", kind: row.kind, labels }) }),
-        after && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__row", "data-kind": "insert", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Cell, { line: after, side: "after", kind: row.kind, labels }) })
+      if (row.kind === "equal") return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__row", "data-kind": "equal", ...firstProps(index), children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Cell3, { line: after, side: "after", kind: "equal", labels }) }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_react116.Fragment, { children: [
+        before && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__row", "data-kind": "delete", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Cell3, { line: before, side: "before", kind: row.kind, labels }) }),
+        after && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__row", "data-kind": "insert", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Cell3, { line: after, side: "after", kind: row.kind, labels }) })
       ] }, index);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "uix-text-diff__row", "data-kind": row.kind, ...firstProps(index), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Cell, { line: before, side: "before", kind: row.kind, labels }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Cell, { line: after, side: "after", kind: row.kind, labels })
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "uix-text-diff__row", "data-kind": row.kind, ...firstProps(index), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Cell3, { line: before, side: "before", kind: row.kind, labels }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Cell3, { line: after, side: "after", kind: row.kind, labels })
     ] }, index);
   }) });
 }
@@ -24617,41 +24965,41 @@ function TextDiff({
 }) {
   const uixLabels = useUixLabels();
   const labels = { ...DEFAULT_TEXT_DIFF_LABELS, ...uixLabels.textDiff, ...labelOverrides };
-  const result = (0, import_react113.useMemo)(() => diffText(before, after, { granularity, maxTokens, maxEdits }), [before, after, granularity, maxTokens, maxEdits]);
-  const rows = (0, import_react113.useMemo)(() => granularity === "line" && result.status === "ok" ? textDiffRows(result, { context }) : [], [result, granularity, context]);
-  const heads = /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "uix-text-diff__heads", "aria-hidden": view === "unified" || void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { className: "uix-text-diff__head", "data-side": "before", children: [
-      view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { "aria-hidden": "true", children: "\u2212 " }),
+  const result = (0, import_react116.useMemo)(() => diffText(before, after, { granularity, maxTokens, maxEdits }), [before, after, granularity, maxTokens, maxEdits]);
+  const rows = (0, import_react116.useMemo)(() => granularity === "line" && result.status === "ok" ? textDiffRows(result, { context }) : [], [result, granularity, context]);
+  const heads = /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "uix-text-diff__heads", "aria-hidden": view === "unified" || void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "uix-text-diff__head", "data-side": "before", children: [
+      view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { "aria-hidden": "true", children: "\u2212 " }),
       beforeLabel ?? labels.before
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { className: "uix-text-diff__head", "data-side": "after", children: [
-      view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { "aria-hidden": "true", children: "+ " }),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "uix-text-diff__head", "data-side": "after", children: [
+      view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { "aria-hidden": "true", children: "+ " }),
       afterLabel ?? labels.after
     ] })
   ] });
   const unchanged = result.status === "ok" && result.added === 0 && result.removed === 0 && result.ops.every((op) => op.type === "equal");
   let body;
-  if (result.status === "too-large") body = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__note", children: labels.tooLarge });
-  else if (granularity === "line") body = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__body", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Rows, { rows, view, labels }) });
+  if (result.status === "too-large") body = /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__note", children: labels.tooLarge });
+  else if (granularity === "line") body = /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__body", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Rows, { rows, view, labels }) });
   else {
-    const prose = (side2) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__prose", "data-side": side2, children: result.ops.map((op, i) => {
+    const prose = (side2) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__prose", "data-side": side2, children: result.ops.map((op, i) => {
       const text = op.tokens.join("");
-      if (op.type === "equal") return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react113.Fragment, { children: text }, i);
+      if (op.type === "equal") return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react116.Fragment, { children: text }, i);
       if (op.type === "delete" && side2 === "after") return null;
       if (op.type === "insert" && side2 === "before") return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Marked, { segments: [{ text, changed: true }], side: op.type === "delete" ? "before" : "after", labels }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Marked, { segments: [{ text, changed: true }], side: op.type === "delete" ? "before" : "after", labels }, i);
     }) });
-    const side = (which) => /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "uix-text-diff__side", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__head", children: which === "before" ? beforeLabel ?? labels.before : afterLabel ?? labels.after }),
+    const side = (which) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "uix-text-diff__side", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__head", children: which === "before" ? beforeLabel ?? labels.before : afterLabel ?? labels.after }),
       prose(which)
     ] });
-    body = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__body", children: view === "unified" ? prose("both") : /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "uix-text-diff__row", "data-kind": "prose", children: [
+    body = /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__body", children: view === "unified" ? prose("both") : /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "uix-text-diff__row", "data-kind": "prose", children: [
       side("before"),
       side("after")
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { role: "group", "aria-label": label, className: cx("uix-text-diff", className), "data-view": view, "data-granularity": granularity, ...props, children: [
-    !hideSummary && result.status === "ok" && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "uix-text-diff__summary", children: unchanged ? labels.noChanges : fillLabel(labels.summary, { added: result.added, removed: result.removed }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { role: "group", "aria-label": label, className: cx("uix-text-diff", className), "data-view": view, "data-granularity": granularity, ...props, children: [
+    !hideSummary && result.status === "ok" && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "uix-text-diff__summary", children: unchanged ? labels.noChanges : fillLabel(labels.summary, { added: result.added, removed: result.removed }) }),
     !(granularity === "word" && view === "split" && result.status === "ok") && heads,
     body
   ] });
@@ -24815,6 +25163,8 @@ function TextDiff({
   LocaleSwitcher,
   Mark,
   MatchReview,
+  MatrixHeatmap,
+  MatrixInput,
   Menu,
   MenuGroup,
   MenuItem,