twico-ui 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.15.0](https://github.com/EncryptionL/twico-ui/compare/v1.14.1...v1.15.0) (2026-07-14)
+
+
+### Features
+
+* **datatable:** add `diff` mode — re-home DiffTable on the Datatable engine ([#239](https://github.com/EncryptionL/twico-ui/issues/239)) ([d7cf524](https://github.com/EncryptionL/twico-ui/commit/d7cf524e44e579318b36ead62aa13b832142cd89)), closes [#205](https://github.com/EncryptionL/twico-ui/issues/205)
+
+## [1.14.1](https://github.com/EncryptionL/twico-ui/compare/v1.14.0...v1.14.1) (2026-07-14)
+
+
+### Bug Fixes
+
+* **styles:** input renders invisibly under React 19 hoist dedup; add Datatable external-search + renderEditCell ([#234](https://github.com/EncryptionL/twico-ui/issues/234), [#235](https://github.com/EncryptionL/twico-ui/issues/235), [#236](https://github.com/EncryptionL/twico-ui/issues/236)) ([f661ea9](https://github.com/EncryptionL/twico-ui/commit/f661ea90dab1bf4b97ee02e8f103fb44ce668f43)), closes [#232](https://github.com/EncryptionL/twico-ui/issues/232)
+
 # [1.14.0](https://github.com/EncryptionL/twico-ui/compare/v1.13.0...v1.14.0) (2026-07-13)
 
 

package/dist/index.cjs

@@ -7091,7 +7091,8 @@ var FIELD_CSS2 = `
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
-
+`;
+var INPUT_EXTRA_CSS = `
 .twc-input {
   --_h: var(--control-h-md);
   display: flex; align-items: center; gap: var(--space-2);
@@ -7100,6 +7101,7 @@ var FIELD_CSS2 = `
   background: var(--color-surface);
   border: var(--border-thin) solid var(--color-border);
   border-radius: var(--radius-md);
+  overflow: hidden;
   transition: border-color var(--duration-fast) var(--ease-standard),
               box-shadow var(--duration-fast) var(--ease-standard),
               background-color var(--duration-fast) var(--ease-standard);
@@ -7133,9 +7135,6 @@ var FIELD_CSS2 = `
 .twc-input__reveal:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-input__reveal:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-input__reveal svg { width: 17px; height: 17px; }
-`;
-var INPUT_EXTRA_CSS = `
-.twc-input { overflow: hidden; }
 .twc-input__addon { align-self: stretch; display: inline-flex; align-items: center; padding-inline: var(--space-3);
   background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm);
   font-weight: var(--font-semibold); white-space: nowrap; flex: none; }
@@ -8035,6 +8034,78 @@ function Tooltip({
     }
   );
 }
+
+// components/_diff.js
+var DIFF_OPS = {
+  added: { label: "Added", tone: "success" },
+  removed: { label: "Removed", tone: "danger" },
+  modified: { label: "Modified", tone: "warning" },
+  moved: { label: "Moved", tone: "info" },
+  unchanged: { label: "Unchanged", tone: "neutral" }
+};
+function lisIndexSet(seq) {
+  const n = seq.length;
+  if (n === 0) return /* @__PURE__ */ new Set();
+  const dp = new Array(n).fill(1), prev = new Array(n).fill(-1);
+  let best = 0;
+  for (let i = 0; i < n; i++) {
+    for (let j = 0; j < i; j++) {
+      if (seq[j] < seq[i] && dp[j] + 1 > dp[i]) {
+        dp[i] = dp[j] + 1;
+        prev[i] = j;
+      }
+    }
+    if (dp[i] > dp[best]) best = i;
+  }
+  const set = /* @__PURE__ */ new Set();
+  for (let i = best; i !== -1; i = prev[i]) set.add(i);
+  return set;
+}
+var cellVal = (col, row) => col.valueGetter ? col.valueGetter(row) : row == null ? void 0 : row[col.field];
+function classifyDiff(from = [], to = [], columns = [], rowKey, opts = {}) {
+  const { moveDetection = true, compare } = opts;
+  const k = rowKey || ((r2) => r2 == null ? r2 : r2.id);
+  const valEq = (a, b, col) => {
+    if (col.compare) return col.compare(a, b);
+    if (compare) return compare(a, b, col.field);
+    if (a === b) return true;
+    if (a == null || b == null) return a === b;
+    return JSON.stringify(a) === JSON.stringify(b);
+  };
+  const fromMap = /* @__PURE__ */ new Map(), toMap = /* @__PURE__ */ new Map();
+  from.forEach((r2, i) => fromMap.set(k(r2), { row: r2, i }));
+  to.forEach((r2, i) => toMap.set(k(r2), { row: r2, i }));
+  const movedKeys = /* @__PURE__ */ new Set();
+  if (moveDetection) {
+    const commonFrom = from.filter((r2) => toMap.has(k(r2)));
+    const seq = commonFrom.map((r2) => toMap.get(k(r2)).i);
+    const stable = lisIndexSet(seq);
+    commonFrom.forEach((r2, idx) => {
+      if (!stable.has(idx)) movedKeys.add(k(r2));
+    });
+  }
+  const classify = (key) => {
+    const a = fromMap.get(key), b = toMap.get(key);
+    if (a && !b) return { op: "removed", from: a.row, to: null, changed: /* @__PURE__ */ new Set() };
+    if (!a && b) return { op: "added", from: null, to: b.row, changed: /* @__PURE__ */ new Set() };
+    const changed = /* @__PURE__ */ new Set();
+    for (const col of columns) if (col.field && !valEq(cellVal(col, a.row), cellVal(col, b.row), col)) changed.add(col.field);
+    if (changed.size) return { op: "modified", from: a.row, to: b.row, changed };
+    if (movedKeys.has(key)) return { op: "moved", from: a.row, to: b.row, changed };
+    return { op: "unchanged", from: a.row, to: b.row, changed };
+  };
+  const rows = [];
+  to.forEach((r2) => rows.push({ key: k(r2), ...classify(k(r2)) }));
+  from.forEach((r2) => {
+    const key = k(r2);
+    if (!toMap.has(key)) rows.push({ key, ...classify(key) });
+  });
+  const counts = { added: 0, removed: 0, modified: 0, moved: 0, unchanged: 0 };
+  rows.forEach((r2) => {
+    counts[r2.op] += 1;
+  });
+  return { rows, counts };
+}
 var DT_CSS = `
 .twc-dt { display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--color-text);
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
@@ -8273,6 +8344,18 @@ var DT_CSS = `
 /* Row reordering */
 .twc-dt__row[data-reorderable] { cursor: grab; }
 .twc-dt__row[data-row-dragging] { opacity: 0.4; }
+/* #239 diff mode: row op tint + before\u2192after cells (single-line, clipped by the td's own overflow). */
+.twc-dt__row[data-op="added"] > .twc-dt__td { background: color-mix(in srgb, var(--color-success) 7%, transparent); }
+.twc-dt__row[data-op="removed"] > .twc-dt__td { background: color-mix(in srgb, var(--color-danger) 7%, transparent); }
+.twc-dt__row[data-op="modified"] > .twc-dt__td { background: color-mix(in srgb, var(--color-warning) 6%, transparent); }
+.twc-dt__diff-change { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
+.twc-dt__diff-old { text-decoration: line-through; color: var(--color-text-subtle); }
+.twc-dt__diff-new { color: var(--color-success-subtle-fg); font-weight: var(--font-medium); }
+.twc-dt__diff-arrow { color: var(--color-text-subtle); flex: none; }
+[dir="rtl"] .twc-dt__diff-arrow { transform: scaleX(-1); display: inline-block; }
+.twc-dt__diff-summary { display: inline-flex; align-items: center; gap: 4px; flex: none; }
+.twc-dt__diff-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; flex: none; }
+.twc-dt__diff-toggle input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; margin: 0; }
 .twc-dt__row[data-row-dropbefore] > .twc-dt__td { box-shadow: inset 0 3px 0 var(--color-primary); }
 .twc-dt__row[data-row-dropafter] > .twc-dt__td { box-shadow: inset 0 -3px 0 var(--color-primary); }
 /* Keyboard row reorder (grabbed) */
@@ -8534,6 +8617,38 @@ var NUM_OPS = [
 var opsFor = (type) => type === "number" ? NUM_OPS : STR_OPS;
 var isMultiOp = (op) => op === "isAnyOf";
 var getColVal = (col, row) => col && col.valueGetter ? col.valueGetter(row) : row == null ? void 0 : row[col && col.field];
+var diffValueNode = (col, v, row) => col.renderCell ? col.renderCell(v, row) : col.valueFormatter ? col.valueFormatter(v, row) : v == null ? "" : v;
+function renderDiffCell(col, val, row) {
+  const meta = row && row.__diffMeta;
+  if (!meta) return diffValueNode(col, val, row);
+  if (meta.op === "removed") return React51__namespace.default.createElement("span", { className: "twc-dt__diff-old" }, diffValueNode(col, getColVal(col, meta.from), meta.from));
+  if (meta.op === "added") return React51__namespace.default.createElement("span", { className: "twc-dt__diff-new" }, diffValueNode(col, getColVal(col, meta.to), meta.to));
+  if (meta.op === "modified" && meta.changed.has(col.field)) {
+    return React51__namespace.default.createElement(
+      "span",
+      { className: "twc-dt__diff-change" },
+      React51__namespace.default.createElement("span", { className: "twc-dt__diff-old" }, diffValueNode(col, getColVal(col, meta.from), meta.from)),
+      React51__namespace.default.createElement("span", { className: "twc-dt__diff-arrow", "aria-hidden": "true" }, "\u2192"),
+      React51__namespace.default.createElement("span", { className: "twc-dt__diff-new" }, diffValueNode(col, getColVal(col, meta.to), meta.to))
+    );
+  }
+  return diffValueNode(col, val, row);
+}
+var DIFF_OP_COLUMN = {
+  field: "__diffop",
+  headerName: "Change",
+  width: 122,
+  pinned: "left",
+  sortable: true,
+  filterable: false,
+  groupable: true,
+  reorderable: false,
+  resizable: true,
+  wrappable: false,
+  hideable: false,
+  renderCell: (v) => v && DIFF_OPS[v] ? React51__namespace.default.createElement(Badge, { size: "sm", variant: "soft", tone: DIFF_OPS[v].tone }, DIFF_OPS[v].label) : null,
+  exportValue: (v) => v && DIFF_OPS[v] ? DIFF_OPS[v].label : ""
+};
 function testFilter(raw, op, target, type) {
   if (op === "isEmpty") return raw == null || raw === "";
   if (op === "isNotEmpty") return !(raw == null || raw === "");
@@ -8852,11 +8967,12 @@ function xlsxPackage(sheetXml) {
   ]);
 }
 function Datatable({
-  columns,
-  rows,
+  columns: columnsProp,
+  rows: rowsProp = [],
   loading = false,
-  rowKey,
+  rowKey: rowKeyProp,
   checkboxSelection = false,
+  diff,
   density: densityProp = "comfortable",
   pageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
@@ -8893,6 +9009,9 @@ function Datatable({
   rowGrouping = [],
   rowNumbers = false,
   searchFields = null,
+  searchable = true,
+  quickFilter,
+  onQuickFilterChange,
   rowPinning = false,
   rowReorder = false,
   rowResize = false,
@@ -8906,6 +9025,29 @@ function Datatable({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
+  const isDiff = !!diff;
+  const [diffOnly, setDiffOnly] = React51__namespace.default.useState(diff && diff.onlyChanged !== void 0 ? diff.onlyChanged : true);
+  const diffRowKey = diff && diff.rowKey || rowKeyProp || ((r2) => r2 == null ? r2 : r2.id);
+  const diffData = React51__namespace.default.useMemo(
+    () => isDiff ? classifyDiff(diff.from || [], diff.to || [], columnsProp, diffRowKey, { moveDetection: diff.moveDetection, compare: diff.compare }) : null,
+    [isDiff, diff, columnsProp]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const onClassifiedRef = React51__namespace.default.useRef(diff && diff.onClassified);
+  onClassifiedRef.current = diff && diff.onClassified;
+  React51__namespace.default.useEffect(() => {
+    if (diffData && onClassifiedRef.current) onClassifiedRef.current(diffData.counts);
+  }, [diffData]);
+  const diffRowKeyFn = React51__namespace.default.useCallback((r2) => r2.__diffKey, []);
+  const columns = React51__namespace.default.useMemo(
+    () => isDiff ? [DIFF_OP_COLUMN, ...columnsProp.map((c) => ({ ...c, renderCell: (val, row) => renderDiffCell(c, val, row) }))] : columnsProp,
+    [isDiff, columnsProp]
+  );
+  const rows = React51__namespace.default.useMemo(
+    () => isDiff ? diffData.rows.filter((r2) => !diffOnly || r2.op !== "unchanged").map((r2) => ({ ...r2.to || r2.from, __diffop: r2.op, __diffMeta: r2, __diffKey: r2.key })) : rowsProp,
+    [isDiff, diffData, diffOnly, rowsProp]
+  );
+  const rowKey = isDiff ? diffRowKeyFn : rowKeyProp;
   const cols = React51__namespace.default.useMemo(() => {
     const out = columns.map((c) => {
       const isActions = c.type === "actions";
@@ -8975,7 +9117,13 @@ function Datatable({
     return { left, right };
   });
   const [density, setDensity] = React51__namespace.default.useState(densityProp);
-  const [quick, setQuick] = React51__namespace.default.useState("");
+  const [internalQuick, setInternalQuick] = React51__namespace.default.useState("");
+  const quick = quickFilter !== void 0 ? quickFilter : internalQuick;
+  const commitQuick = (v) => {
+    onQuickFilterChange?.(v);
+    if (quickFilter === void 0) setInternalQuick(v);
+    commitPage(0);
+  };
   const [selected, setSelected] = React51__namespace.default.useState(() => /* @__PURE__ */ new Set());
   const [activeRow, setActiveRow] = React51__namespace.default.useState(null);
   const [activeCell, setActiveCell] = React51__namespace.default.useState(null);
@@ -9855,7 +10003,7 @@ function Datatable({
     setSelected(/* @__PURE__ */ new Set());
   }
   const [editing, setEditing] = React51__namespace.default.useState(null);
-  const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
+  const isColEditable = (c) => c.type !== "actions" && c.editable !== false && (c.editable === true || c.renderEditCell != null || editMode);
   function beginEdit(rowK, col, row) {
     if (!isColEditable(col)) return;
     setEditing({ key: rowK, field: col.field, value: row[col.field] ?? "" });
@@ -10096,6 +10244,7 @@ function Datatable({
         role: "row",
         "aria-rowindex": (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
         "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
+        "data-op": row.__diffop || void 0,
         "data-selected": sel || void 0,
         "data-active": rowActive || void 0,
         "data-pinned-row": pinSide || void 0,
@@ -10186,7 +10335,13 @@ function Datatable({
                   !checkboxSelection && reorderable && ci === 0 && !isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, maxWidth: "100%" }, children: [
                     rowHandle(k, midIdx, row),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : c.valueFormatter ? c.valueFormatter(val, row) : val })
-                  ] }) : isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+                  ] }) : isEditing ? c.renderEditCell ? (
+                    // #236: full escape hatch — the host drops in its own editor (searchable/creatable/
+                    // async Combobox, …) and drives the lifecycle via commit/cancel. Wrapped in
+                    // .twc-dt__editor-wrap so inline clicks (and any .twc-pop portal dropdown) don't
+                    // trip the outside-click auto-cancel.
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__editor-wrap", children: c.renderEditCell({ value: editing.value, row, field: c.field, commit: (v) => commitEdit(v), cancel: cancelEdit }) })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
                     EditCell,
                     {
                       col: c,
@@ -10340,6 +10495,28 @@ function Datatable({
           ))
         ] })
       ] }) : null,
+      isDiff && diff.showSummary !== false ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__diff-summary", "aria-label": "Diff summary", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", variant: "soft", tone: "success", children: [
+          "+",
+          diffData.counts.added
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", variant: "soft", tone: "warning", children: [
+          "~",
+          diffData.counts.modified
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", variant: "soft", tone: "danger", children: [
+          "\u2212",
+          diffData.counts.removed
+        ] }),
+        diffData.counts.moved ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", variant: "soft", tone: "info", children: [
+          "\u21C5",
+          diffData.counts.moved
+        ] }) : null
+      ] }) : null,
+      isDiff && diff.showToggle !== false ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-dt__diff-toggle", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: diffOnly, onChange: (e) => setDiffOnly(e.target.checked) }),
+        diff.toggleLabel != null ? diff.toggleLabel : "Only changed"
+      ] }) : null,
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -10476,13 +10653,10 @@ function Datatable({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__search", children: [
+      searchable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__search", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => {
-          setQuick(e.target.value);
-          commitPage(0);
-        } })
-      ] })
+        /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) })
+      ] }) : null
     ] }),
     !pivotActive && activeGroupBy.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__groupbar", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.group }),
@@ -11679,55 +11853,13 @@ function CardGrid({
     ] }) : null
   ] });
 }
-var DIFFTABLE_CSS = `
-.twc-difft { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-text); }
-.twc-difft__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
-.twc-difft__label { font-size: var(--text-sm); font-weight: var(--font-semibold); }
-.twc-difft__summary { display: inline-flex; flex-wrap: wrap; gap: var(--space-1-5); }
-.twc-difft__toggle { margin-inline-start: auto; }
-.twc-difft__scroll { overflow-x: auto; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); }
-.twc-difft__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
-.twc-difft__table th, .twc-difft__table td { text-align: start; padding: var(--space-2) var(--space-3); border-bottom: var(--border-thin) solid var(--color-divider); vertical-align: top; }
-.twc-difft__table thead th { position: sticky; top: 0; background: var(--color-surface-sunken); font-weight: var(--font-semibold); color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; z-index: 1; }
-.twc-difft__table tbody tr:last-child td { border-bottom: none; }
-.twc-difft__table tbody tr[data-op="added"] { background: color-mix(in srgb, var(--color-success) 8%, transparent); }
-.twc-difft__table tbody tr[data-op="removed"] { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
-.twc-difft__table tbody tr[data-op="modified"] { background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
-.twc-difft__op { white-space: nowrap; }
-.twc-difft__change { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
-.twc-difft__old { text-decoration: line-through; color: var(--color-text-subtle); }
-.twc-difft__new { color: var(--color-success-subtle-fg); font-weight: var(--font-medium); }
-.twc-difft__arrow { margin-inline: 6px; color: var(--color-text-subtle); }
-.twc-difft__empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); }
-[dir="rtl"] .twc-difft__arrow { transform: scaleX(-1); display: inline-block; }
-`;
-var OPS = {
-  added: { label: "Added", tone: "success" },
-  removed: { label: "Removed", tone: "danger" },
-  modified: { label: "Modified", tone: "warning" },
-  moved: { label: "Moved", tone: "info" },
-  unchanged: { label: "Unchanged", tone: "neutral" }
-};
-function lisIndexSet(seq) {
-  const n = seq.length;
-  if (n === 0) return /* @__PURE__ */ new Set();
-  const dp = new Array(n).fill(1), prev = new Array(n).fill(-1);
-  let best = 0;
-  for (let i = 0; i < n; i++) {
-    for (let j = 0; j < i; j++) {
-      if (seq[j] < seq[i] && dp[j] + 1 > dp[i]) {
-        dp[i] = dp[j] + 1;
-        prev[i] = j;
-      }
-    }
-    if (dp[i] > dp[best]) best = i;
-  }
-  const set = /* @__PURE__ */ new Set();
-  for (let i = best; i !== -1; i = prev[i]) set.add(i);
-  return set;
-}
-var getVal = (col, row) => col.valueGetter ? col.valueGetter(row) : row == null ? void 0 : row[col.field];
-var fmtVal = (col, v) => col.valueFormatter ? col.valueFormatter(v) : v == null ? "" : String(v);
+var toDatatableColumn = (c) => ({
+  field: c.field,
+  headerName: typeof c.headerName === "string" ? c.headerName : c.field,
+  valueGetter: c.valueGetter,
+  valueFormatter: c.valueFormatter,
+  compare: c.compare
+});
 function DiffTable({
   from = [],
   to = [],
@@ -11745,104 +11877,24 @@ function DiffTable({
   className = "",
   ...rest
 }) {
-  const styles = useScopedStyles("twc-difftable-styles", DIFFTABLE_CSS);
-  const autoId = React51__namespace.default.useId();
-  const fieldId = id || autoId;
-  const [only, setOnly] = React51__namespace.default.useState(onlyChanged);
-  const valEq = React51__namespace.default.useCallback((a, b, col) => {
-    if (col.compare) return col.compare(a, b);
-    if (compare) return compare(a, b, col.field);
-    if (a === b) return true;
-    if (a == null || b == null) return a === b;
-    return JSON.stringify(a) === JSON.stringify(b);
-  }, [compare]);
-  const diff = React51__namespace.default.useMemo(() => {
-    const k = rowKey || ((r2) => r2 == null ? r2 : r2.id);
-    const fromMap = /* @__PURE__ */ new Map(), toMap = /* @__PURE__ */ new Map();
-    from.forEach((r2, i) => fromMap.set(k(r2), { row: r2, i }));
-    to.forEach((r2, i) => toMap.set(k(r2), { row: r2, i }));
-    const movedKeys = /* @__PURE__ */ new Set();
-    if (moveDetection) {
-      const commonFrom = from.filter((r2) => toMap.has(k(r2)));
-      const seq = commonFrom.map((r2) => toMap.get(k(r2)).i);
-      const stable = lisIndexSet(seq);
-      commonFrom.forEach((r2, idx) => {
-        if (!stable.has(idx)) movedKeys.add(k(r2));
-      });
-    }
-    const classify = (key) => {
-      const a = fromMap.get(key), b = toMap.get(key);
-      if (a && !b) return { op: "removed", from: a.row, to: null, changed: /* @__PURE__ */ new Set() };
-      if (!a && b) return { op: "added", from: null, to: b.row, changed: /* @__PURE__ */ new Set() };
-      const changed = /* @__PURE__ */ new Set();
-      for (const col of columns) if (!valEq(getVal(col, a.row), getVal(col, b.row), col)) changed.add(col.field);
-      if (changed.size) return { op: "modified", from: a.row, to: b.row, changed };
-      if (movedKeys.has(key)) return { op: "moved", from: a.row, to: b.row, changed };
-      return { op: "unchanged", from: a.row, to: b.row, changed };
-    };
-    const rows = [];
-    to.forEach((r2) => rows.push({ key: k(r2), ...classify(k(r2)) }));
-    from.forEach((r2) => {
-      const key = k(r2);
-      if (!toMap.has(key)) rows.push({ key, ...classify(key) });
-    });
-    const counts = { added: 0, removed: 0, modified: 0, moved: 0, unchanged: 0 };
-    rows.forEach((r2) => {
-      counts[r2.op] += 1;
-    });
-    return { rows, counts };
-  }, [from, to, columns, rowKey, moveDetection, valEq]);
-  const visible = only ? diff.rows.filter((r2) => r2.op !== "unchanged") : diff.rows;
-  const renderCell = (r2, col) => {
-    if (r2.op === "removed") return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-difft__old", children: fmtVal(col, getVal(col, r2.from)) });
-    if (r2.op === "added") return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-difft__new", children: fmtVal(col, getVal(col, r2.to)) });
-    if (r2.op === "modified" && r2.changed.has(col.field)) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-difft__change", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-difft__old", children: fmtVal(col, getVal(col, r2.from)) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-difft__arrow", "aria-hidden": "true", children: "\u2192" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-difft__new", children: fmtVal(col, getVal(col, r2.to)) })
-      ] });
+  const dtColumns = React51__namespace.default.useMemo(() => columns.map(toDatatableColumn), [columns]);
+  const diff = React51__namespace.default.useMemo(
+    () => ({ from, to, rowKey, onlyChanged, showToggle, showSummary, moveDetection, compare, toggleLabel }),
+    [from, to, rowKey, onlyChanged, showToggle, showSummary, moveDetection, compare, toggleLabel]
+  );
+  const table = /* @__PURE__ */ jsxRuntime.jsx(
+    Datatable,
+    {
+      columns: dtColumns,
+      diff,
+      emptyMessage: emptyState,
+      ...label ? {} : { id, className, ...rest }
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: fmtVal(col, getVal(col, r2.to ?? r2.from)) });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-difft ${className}`, id: fieldId, ...rest, children: [
-    styles,
-    label || showSummary || showToggle ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-difft__head", children: [
-      label ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-difft__label", children: label }) : null,
-      showSummary ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-difft__summary", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", variant: "soft", tone: "success", children: [
-          "+",
-          diff.counts.added,
-          " added"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", variant: "soft", tone: "warning", children: [
-          "~",
-          diff.counts.modified,
-          " modified"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", variant: "soft", tone: "danger", children: [
-          "-",
-          diff.counts.removed,
-          " removed"
-        ] }),
-        diff.counts.moved ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { size: "sm", variant: "soft", tone: "info", children: [
-          "\u21C5 ",
-          diff.counts.moved,
-          " moved"
-        ] }) : null
-      ] }) : null,
-      showToggle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-difft__toggle", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { label: toggleLabel, checked: only, onChange: (e) => setOnly(e.target.checked) }) }) : null
-    ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-difft__scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "twc-difft__table", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Change" }),
-        columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: c.headerName || c.field }, c.field))
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-difft__empty", colSpan: columns.length + 1, children: emptyState }) }) : visible.map((r2) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { "data-op": r2.op, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-difft__op", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: "sm", variant: "soft", tone: OPS[r2.op].tone, children: OPS[r2.op].label }) }),
-        columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: renderCell(r2, c) }, c.field))
-      ] }, r2.key)) })
-    ] }) })
+  );
+  if (!label) return table;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className, ...rest, style: { display: "flex", flexDirection: "column", gap: "var(--space-2)", fontFamily: "var(--font-sans)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "var(--text-sm)", fontWeight: "var(--font-semibold)", color: "var(--color-text)" }, children: label }),
+    table
   ] });
 }
 var FIELD_CSS3 = `