twico-ui 1.14.1 → 1.15.1

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.1](https://github.com/EncryptionL/twico-ui/compare/v1.15.0...v1.15.1) (2026-07-14)
+
+
+### Bug Fixes
+
+* **datatable:** keep pinned cells opaque in diff mode ([#242](https://github.com/EncryptionL/twico-ui/issues/242)) ([072b15e](https://github.com/EncryptionL/twico-ui/commit/072b15ea73443ad535b3f149d8b620618702b389)), closes [#239](https://github.com/EncryptionL/twico-ui/issues/239)
+
+# [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)
 
 

package/dist/index.cjs

@@ -8034,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);
@@ -8272,6 +8344,24 @@ 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); }
+/* #242: pinned cells in a diff row must stay OPAQUE (composite the tint over the surface, not over
+   transparent) or the cells scrolling under a sticky column bleed through. Specificity (0,4,0) wins
+   over the (0,3,0) tint above and matches the non-pinned cells' effective color (tint over surface). */
+.twc-dt__row[data-op="added"] > .twc-dt__td[data-pin] { background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface)); }
+.twc-dt__row[data-op="removed"] > .twc-dt__td[data-pin] { background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface)); }
+.twc-dt__row[data-op="modified"] > .twc-dt__td[data-pin] { background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface)); }
+.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) */
@@ -8533,6 +8623,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 === "");
@@ -8851,11 +8973,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],
@@ -8908,6 +9031,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";
@@ -10104,6 +10250,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,
@@ -10354,6 +10501,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",
         {
@@ -11690,55 +11859,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 = [],
@@ -11756,104 +11883,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 = `