twico-ui 1.31.1 → 1.32.0

package/dist/index.mjs

@@ -8432,7 +8432,13 @@ var DT_CSS = `
 /* #244: batch editor = pick columns (searchable), then set a value for each. */
 .twc-dt__be-add { padding: 6px 6px 8px; border-bottom: var(--border-thin) solid var(--color-divider); }
 .twc-dt__be-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; }
-.twc-dt__be-name { width: 108px; flex: none; font-size: var(--text-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #341: cap width at min(260, row \u2212 160px) so the value control keeps ~120px (+ gaps + remove) and never
+   collapses \u2014 panel-width-aware in pure CSS, so it also grows if the (resizable) panel is widened. */
+.twc-dt__be-name { position: relative; flex: none; width: clamp(88px, var(--twc-dt-be-name-usr, 108px), min(260px, 100% - 160px)); font-size: var(--text-sm); color: var(--color-text); }
+/* #341: ellipsis lives on the inner text span so the outer field can host the (edge-overhanging) resize handle without clipping it. */
+.twc-dt__be-name-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #341: reveal the batch-name resize handle (reused .twc-dt__f-rz) on row hover, like the filter fields. */
+.twc-dt__be-row:hover .twc-dt__f-rz { opacity: 1; }
 .twc-dt__be-ctl { flex: 1; min-width: 0; }
 .twc-dt__be-x { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none;
   background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm);
@@ -8497,6 +8503,19 @@ var DT_CSS = `
    clipping to one line. height stays a per-row minimum, so single-line cells are unchanged. */
 .twc-dt__td[data-wrap="true"] { white-space: normal; overflow: hidden; text-overflow: clip;
   word-break: break-word; overflow-wrap: anywhere; vertical-align: top; padding-block: 10px; line-height: 1.45; }
+/* #338: "combined" column cell \u2014 one column showing several source columns' values. */
+.twc-dt__combine--stack { display: flex; flex-direction: column; gap: 1px; }
+.twc-dt__combine-sep { color: var(--color-text-subtle); padding-inline: 3px; }
+.twc-dt__combine-label { color: var(--color-text-muted); font-weight: var(--font-medium); }
+/* #339: the runtime combine-columns editor panel. */
+.twc-dt__combine-hint { padding: 2px 12px 8px; font-size: var(--text-xs); color: var(--color-text-muted); }
+.twc-dt__combine-opts { padding: 8px 12px; border-top: var(--border-thin) solid var(--color-divider); display: flex; flex-direction: column; gap: 8px; }
+.twc-dt__combine-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--text-sm); color: var(--color-text); }
+.twc-dt__combine-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: var(--border-thin) solid var(--color-divider); }
+.twc-dt__combine-apply { border: none; background: var(--color-primary); color: var(--color-primary-fg); font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); padding: 6px 14px; border-radius: var(--radius-md); cursor: pointer; }
+.twc-dt__combine-apply:hover { opacity: 0.9; }
+.twc-dt__combine-apply:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-dt__col-combined { color: var(--color-text-subtle); font-size: var(--text-xs); font-style: italic; }
 .twc-dt__td[data-num="true"] { text-align: end; font-variant-numeric: tabular-nums; }
 /* Auto row-number gutter (rowNumbers) \u2014 a sticky-left ordinal column. */
 .twc-dt__rownum { text-align: end; font-variant-numeric: tabular-nums; color: var(--color-text-subtle);
@@ -8831,6 +8850,34 @@ function mergeColOrder(saved, propFields) {
   return result;
 }
 var getColVal = (col, row) => col && col.valueGetter ? col.valueGetter(row) : row == null ? void 0 : row[col && col.field];
+function combineCfg(combine) {
+  if (!combine) return null;
+  const cfg = Array.isArray(combine) ? { fields: combine } : combine;
+  const fields = Array.isArray(cfg.fields) ? cfg.fields.filter((f) => f != null) : [];
+  if (!fields.length) return null;
+  return { fields, separator: cfg.separator != null ? cfg.separator : " \xB7 ", labels: !!cfg.labels, layout: cfg.layout === "stack" ? "stack" : "inline" };
+}
+var combineSrcCols = (cfg, byField) => cfg.fields.map((f) => byField && byField[f] || { field: f, headerName: String(f) });
+var combineValueGetter = (srcCols, cfg) => (row) => srcCols.map((sc) => {
+  const v = getColVal(sc, row);
+  const s = v == null ? "" : String(v);
+  return cfg.labels && s ? `${sc.headerName ?? sc.field}: ${s}` : s;
+}).filter(Boolean).join(cfg.separator);
+function renderCombined(srcCols, row, cfg) {
+  const nodes = [];
+  let count = 0;
+  srcCols.forEach((sc, idx) => {
+    const v = getColVal(sc, row);
+    if (v == null || v === "") return;
+    const disp = sc.valueFormatter ? sc.valueFormatter(v, row) : v;
+    const label = cfg.labels ? React51__default.createElement("span", { className: "twc-dt__combine-label" }, (sc.headerName ?? sc.field) + ": ") : null;
+    if (count > 0 && cfg.layout !== "stack") nodes.push(React51__default.createElement("span", { key: "sep" + idx, className: "twc-dt__combine-sep", "aria-hidden": "true" }, cfg.separator));
+    nodes.push(React51__default.createElement("span", { key: idx, className: "twc-dt__combine-item" }, label, disp));
+    count++;
+  });
+  if (!nodes.length) return "";
+  return React51__default.createElement("span", { className: cfg.layout === "stack" ? "twc-dt__combine twc-dt__combine--stack" : "twc-dt__combine" }, nodes);
+}
 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;
@@ -9211,6 +9258,7 @@ function Datatable({
   aggregationValues = null,
   disableColumnReorder = false,
   disableColumnResize = false,
+  columnCombining = false,
   emptyMessage,
   renderEmpty,
   editMode = false,
@@ -9277,9 +9325,19 @@ function Datatable({
     if (diffData && onClassifiedRef.current) onClassifiedRef.current(diffData.counts);
   }, [diffData]);
   const diffRowKeyFn = React51__default.useCallback((r2) => r2.__diffKey, []);
+  const [userCombine, setUserCombine] = React51__default.useState({});
   const columns = React51__default.useMemo(
-    () => isDiff ? [DIFF_OP_COLUMN, ...columnsProp.map((c) => ({ ...c, renderCell: (val, row) => renderDiffCell(c, val, row) }))] : columnsProp,
-    [isDiff, columnsProp]
+    () => {
+      if (!isDiff) return columnsProp;
+      const byField = {};
+      for (const c of columnsProp) if (c && c.field != null) byField[c.field] = c;
+      return [DIFF_OP_COLUMN, ...columnsProp.map((c) => {
+        const cfg = combineCfg(userCombine[c.field] || c.combine);
+        const base = cfg && !c.valueGetter ? { ...c, valueGetter: combineValueGetter(combineSrcCols(cfg, byField), cfg) } : c;
+        return { ...base, renderCell: (val, row) => renderDiffCell(base, val, row) };
+      })];
+    },
+    [isDiff, columnsProp, userCombine]
   );
   const rows = React51__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,
@@ -9319,8 +9377,26 @@ function Datatable({
         getActions: () => []
       });
     }
+    const byField = {};
+    for (const c of out) if (c.field != null) byField[c.field] = c;
+    for (let i = 0; i < out.length; i++) {
+      const c = out[i];
+      const cfg = combineCfg(userCombine[c.field] || c.combine);
+      if (!cfg) continue;
+      const srcCols = combineSrcCols(cfg, byField);
+      out[i] = {
+        ...c,
+        editable: false,
+        // the combined value is synthetic — inline editing would write to a phantom field
+        valueGetter: c.valueGetter || combineValueGetter(srcCols, cfg),
+        // Consumer renderCell wins. If they overrode only valueGetter, fall back to the DEFAULT cell render
+        // (renderCell: undefined) so the cell shows THEIR value — keeping display in sync with what
+        // sort/filter/search/export use — rather than the auto source-join. Otherwise render the combined cell.
+        renderCell: c.renderCell || (c.valueGetter ? void 0 : ((value, row) => renderCombined(srcCols, row, cfg)))
+      };
+    }
     return out;
-  }, [columns, rowPinning]);
+  }, [columns, rowPinning, userCombine]);
   const _autoKey = React51__default.useRef();
   if (!_autoKey.current) _autoKey.current = { map: /* @__PURE__ */ new WeakMap(), n: 0 };
   const keyOf = rowKey || ((r2, i) => {
@@ -9354,6 +9430,42 @@ function Datatable({
     n.has(field) ? n.delete(field) : n.add(field);
     return n;
   });
+  const openCombineEditor = (field) => {
+    const existing = userCombine[field];
+    setCombineTarget(field);
+    setCombineDraft({
+      selected: existing ? existing.fields.filter((f) => f !== field) : [],
+      layout: existing && existing.layout === "stack" ? "stack" : "inline",
+      labels: !!(existing && existing.labels)
+    });
+  };
+  const closeCombineEditor = () => {
+    setPanel(null);
+    closePanel();
+    setCombineTarget(null);
+    setCombineDraft(null);
+    restoreTriggerFocus();
+  };
+  const applyCombine = () => {
+    if (!combineTarget || !combineDraft) return;
+    const field = combineTarget;
+    const sources = combineDraft.selected.filter((f) => f !== field);
+    setUserCombine((m) => {
+      const next = { ...m };
+      if (sources.length) next[field] = { fields: [field, ...sources], layout: combineDraft.layout === "stack" ? "stack" : "inline", separator: " \xB7 ", labels: !!combineDraft.labels };
+      else delete next[field];
+      return next;
+    });
+    closeCombineEditor();
+  };
+  const uncombine = (field) => {
+    setUserCombine((m) => {
+      const next = { ...m };
+      delete next[field];
+      return next;
+    });
+    closeCombineEditor();
+  };
   const [pins, setPins] = React51__default.useState(() => {
     const left = [], right = [];
     columns.forEach((c) => {
@@ -9415,6 +9527,7 @@ function Datatable({
   const rowFocusRef = React51__default.useRef(null);
   const [fWidths, setFWidths] = React51__default.useState({});
   const [fPanelSize, setFPanelSize] = React51__default.useState(null);
+  const [batchNameW, setBatchNameW] = React51__default.useState(null);
   const [popSizes, setPopSizes] = React51__default.useState({});
   const serializeState = () => ({
     filters: filters.map(({ id, ...f }) => f),
@@ -9435,7 +9548,11 @@ function Datatable({
     filterPanelSize: fPanelSize || void 0,
     filterFieldWidths: fWidths.col != null || fWidths.op != null || fWidths.val != null || fWidths.logic != null ? fWidths : void 0,
     // #304: additive, optional — user-resized sizes of the other toolbar popovers, keyed by popover id.
-    popoverSizes: Object.keys(popSizes).length ? popSizes : void 0
+    popoverSizes: Object.keys(popSizes).length ? popSizes : void 0,
+    // #339: additive, optional — runtime user-defined combined columns, keyed by target field.
+    columnCombine: Object.keys(userCombine).length ? userCombine : void 0,
+    // #341: additive, optional — user-resized batch-editor column-name field width (px).
+    batchNameWidth: batchNameW != null ? batchNameW : void 0
   });
   const applyState = (s) => {
     if (!s || typeof s !== "object") return;
@@ -9480,6 +9597,16 @@ function Datatable({
       }
       if (Object.keys(next).length) setPopSizes(next);
     }
+    if (s.columnCombine && typeof s.columnCombine === "object") {
+      const uc = {};
+      for (const [f, cfg] of Object.entries(s.columnCombine)) {
+        if (!known.has(f) || !cfg || !Array.isArray(cfg.fields)) continue;
+        const rest2 = cfg.fields.filter((x) => known.has(x) && x !== f);
+        if (rest2.length) uc[f] = { fields: [f, ...rest2], layout: cfg.layout === "stack" ? "stack" : "inline", separator: typeof cfg.separator === "string" ? cfg.separator : " \xB7 ", labels: !!cfg.labels };
+      }
+      if (Object.keys(uc).length) setUserCombine(uc);
+    }
+    if (typeof s.batchNameWidth === "number") setBatchNameW(clampNum(s.batchNameWidth, 88, 260));
   };
   const stateReadyRef = React51__default.useRef(false);
   const stateRestoredRef = React51__default.useRef(false);
@@ -9497,7 +9624,7 @@ function Datatable({
       }
     }
     return void 0;
-  }, [filters, filterLogic, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, fWidths, fPanelSize, popSizes, stateKey]);
+  }, [filters, filterLogic, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, fWidths, fPanelSize, popSizes, userCombine, batchNameW, stateKey]);
   const restoreState = () => {
     let saved = null;
     if (stateKey) {
@@ -9638,6 +9765,15 @@ function Datatable({
   const [menuPos, openMenu, closeMenu] = useFloating();
   const [panel, setPanel] = React51__default.useState(null);
   const [panelPos, openPanel, closePanel] = useFloating();
+  const [combineTarget, setCombineTarget] = React51__default.useState(null);
+  const [combineDraft, setCombineDraft] = React51__default.useState(null);
+  const combinePanelRef = React51__default.useRef(null);
+  React51__default.useEffect(() => {
+    if (panel === "combine" && combinePanelRef.current) {
+      const el = combinePanelRef.current.querySelector('[role="switch"], button, [tabindex]');
+      (el || combinePanelRef.current).focus?.();
+    }
+  }, [panel]);
   const [rowMenu, setRowMenu] = React51__default.useState(null);
   const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
   const [exportOpen, setExportOpen] = React51__default.useState(false);
@@ -9738,7 +9874,21 @@ function Datatable({
     };
   }, [exportOpen]);
   const colByField = React51__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
-  const visibleCols = cols.filter((c) => !hidden.has(c.field));
+  const combineSources = React51__default.useMemo(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const cfg of Object.values(userCombine)) (cfg && cfg.fields ? cfg.fields : []).slice(1).forEach((f) => s.add(f));
+    return s;
+  }, [userCombine]);
+  const stackCombineTargets = React51__default.useMemo(
+    () => new Set(cols.filter((c) => {
+      const cfg = combineCfg(userCombine[c.field] || c.combine);
+      return cfg && cfg.layout === "stack";
+    }).map((c) => c.field)),
+    [cols, userCombine]
+  );
+  const effectiveHidden = React51__default.useMemo(() => combineSources.size ? /* @__PURE__ */ new Set([...hidden, ...combineSources]) : hidden, [hidden, combineSources]);
+  const effectiveWrapped = React51__default.useMemo(() => stackCombineTargets.size ? /* @__PURE__ */ new Set([...wrapped, ...stackCombineTargets]) : wrapped, [wrapped, stackCombineTargets]);
+  const visibleCols = cols.filter((c) => !effectiveHidden.has(c.field));
   const colFieldsKey = JSON.stringify(
     cols.filter((c) => typeof c.field === "string" && c.type !== "actions").map((c) => c.field)
   );
@@ -9757,17 +9907,17 @@ function Datatable({
       const i = order.indexOf(f);
       return i === -1 ? 9999 : i;
     };
-    const L = pins.left.map((f) => colByField[f]).filter((c) => c && !hidden.has(c.field));
-    const R = pins.right.map((f) => colByField[f]).filter((c) => c && !hidden.has(c.field));
+    const L = pins.left.map((f) => colByField[f]).filter((c) => c && !effectiveHidden.has(c.field));
+    const R = pins.right.map((f) => colByField[f]).filter((c) => c && !effectiveHidden.has(c.field));
     const mid = visibleCols.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field)).sort((a, b) => orderIdx(a.field) - orderIdx(b.field));
     return [...L, ...mid, ...R];
-  }, [pins, hidden, visibleCols, colByField, order]);
+  }, [pins, effectiveHidden, visibleCols, colByField, order]);
   const NUM_W = 56;
   const CHK_W = checkboxSelection ? rowReorder ? 68 : 44 : 0;
   const numLeft = CHK_W;
   const leadW = numLeft + (showRowNum ? NUM_W : 0);
-  const visLeft = React51__default.useMemo(() => pins.left.filter((f) => colByField[f] && !hidden.has(f)), [pins.left, colByField, hidden]);
-  const visRight = React51__default.useMemo(() => pins.right.filter((f) => colByField[f] && !hidden.has(f)), [pins.right, colByField, hidden]);
+  const visLeft = React51__default.useMemo(() => pins.left.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.left, colByField, effectiveHidden]);
+  const visRight = React51__default.useMemo(() => pins.right.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.right, colByField, effectiveHidden]);
   const stickyOf = (field) => {
     if (visLeft.includes(field)) {
       let off = leadW;
@@ -10932,6 +11082,54 @@ function Datatable({
       if (field === "val") p.removeAttribute("data-val-fixed");
     }
   };
+  const BE_NAME_MIN = 88, BE_NAME_MAX = 260;
+  const startBeNameResize = (e) => {
+    if (e.button != null && e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const handle = e.currentTarget;
+    const panel2 = handle.closest(".twc-dt__cfg"), nameEl = handle.closest(".twc-dt__be-name");
+    if (!panel2 || !nameEl) return;
+    const startX = e.clientX, startW = nameEl.getBoundingClientRect().width;
+    const dir = getComputedStyle(panel2).direction === "rtl" ? -1 : 1;
+    handle.setAttribute("data-active", "true");
+    let last = startW;
+    const onMove = (ev) => {
+      last = clampNum(startW + (ev.clientX - startX) * dir, BE_NAME_MIN, BE_NAME_MAX);
+      panel2.style.setProperty("--twc-dt-be-name-usr", `${last}px`);
+    };
+    const onUp = () => {
+      setBatchNameW(last);
+      handle.removeAttribute("data-active");
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const onBeNameResizeKey = (e) => {
+    const panel2 = e.currentTarget.closest(".twc-dt__cfg");
+    if (e.key === "Enter" || e.key === " " || e.key === "Backspace") {
+      e.preventDefault();
+      e.stopPropagation();
+      setBatchNameW(null);
+      if (panel2) panel2.style.removeProperty("--twc-dt-be-name-usr");
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const nameEl = e.currentTarget.closest(".twc-dt__be-name");
+    const cur = nameEl ? nameEl.getBoundingClientRect().width : batchNameW ?? 108;
+    const dir = panel2 && getComputedStyle(panel2).direction === "rtl" ? -1 : 1;
+    const step = e.shiftKey ? 2 : 10;
+    let next = cur;
+    if (e.key === "ArrowRight") next = cur + step * dir;
+    else if (e.key === "ArrowLeft") next = cur - step * dir;
+    else if (e.key === "Home") next = BE_NAME_MIN;
+    else if (e.key === "End") next = BE_NAME_MAX;
+    setBatchNameW(clampNum(next, BE_NAME_MIN, BE_NAME_MAX));
+  };
   const startPanelResize = (e) => {
     if (e.button != null && e.button !== 0) return;
     e.preventDefault();
@@ -11154,7 +11352,7 @@ function Datatable({
   const shownColRows = cols.filter((c) => c.field !== "__pinactions__" && c.headerName.toLowerCase().includes(colQuery.trim().toLowerCase())).sort((a, b) => orderIdxOf(a.field) - orderIdxOf(b.field));
   const rowNumMatch = rowNumbers && "row number".includes(colQuery.trim().toLowerCase());
   const manageableCols = cols.filter((c) => c.field !== "__pinactions__");
-  const visibleColCount = manageableCols.filter((c) => !hidden.has(c.field)).length;
+  const visibleColCount = manageableCols.filter((c) => !effectiveHidden.has(c.field)).length;
   const rppOptions = Array.from(new Set([...pageSizeOptions || [], pageSize].filter((n) => n > 0))).sort((a, b) => a - b).map((n) => ({ value: String(n), label: String(n) }));
   const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0);
   function renderGroupRow(item) {
@@ -11312,7 +11510,7 @@ function Datatable({
                 "data-cell-active": cellActive || void 0,
                 "data-cell-selected": cellSelected || void 0,
                 "data-copied": cellFlash || void 0,
-                "data-wrap": wrapped.has(c.field) || void 0,
+                "data-wrap": effectiveWrapped.has(c.field) || void 0,
                 "data-pin": st.pin,
                 "data-pin-edge": st.edge,
                 style: { width: widthOf(c), ...st.style },
@@ -12009,7 +12207,7 @@ function Datatable({
         delete values[f];
         return { ...b, fields, values };
       });
-      return /* @__PURE__ */ jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: batchEditPos.top, left: batchEditPos.left, width: 320, ...popStyle("batchedit") }, "data-pop-sized": popSizes.batchedit ? "" : void 0, children: [
+      return /* @__PURE__ */ jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: batchEditPos.top, left: batchEditPos.left, width: 320, "--twc-dt-be-name-usr": batchNameW != null ? `${batchNameW}px` : void 0, ...popStyle("batchedit") }, "data-pop-sized": popSizes.batchedit ? "" : void 0, children: [
         /* @__PURE__ */ jsx(Caret, { pos: batchEditPos }),
         /* @__PURE__ */ jsxs("div", { className: "twc-dt__cfg-head", children: [
           "Edit ",
@@ -12030,10 +12228,25 @@ function Datatable({
             onChange: addField
           }
         ) }) : null,
-        /* @__PURE__ */ jsx("div", { className: "twc-dt__cfg-list", children: pickedCols.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__be-empty", children: "Pick a column to set its value on all selected rows." }) : pickedCols.map((c) => {
+        /* @__PURE__ */ jsx("div", { className: "twc-dt__cfg-list", children: pickedCols.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__be-empty", children: "Pick a column to set its value on all selected rows." }) : pickedCols.map((c, i) => {
           const opts = c.valueOptions ? c.valueOptions.map((o) => typeof o === "string" ? { value: o, label: o } : o) : null;
           return /* @__PURE__ */ jsxs("div", { className: "twc-dt__be-row", children: [
-            /* @__PURE__ */ jsx("span", { className: "twc-dt__be-name", title: String(c.headerName ?? c.field), children: c.headerName }),
+            /* @__PURE__ */ jsxs("span", { className: "twc-dt__be-name", title: String(c.headerName ?? c.field), children: [
+              /* @__PURE__ */ jsx("span", { className: "twc-dt__be-name-txt", children: c.headerName }),
+              resizableFilters && i === 0 ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "twc-dt__f-rz",
+                  role: "separator",
+                  "aria-orientation": "vertical",
+                  tabIndex: 0,
+                  "aria-label": "Resize column name field (Enter to reset)",
+                  onPointerDown: startBeNameResize,
+                  onClick: (e) => e.stopPropagation(),
+                  onKeyDown: onBeNameResizeKey
+                }
+              ) : null
+            ] }),
             /* @__PURE__ */ jsx("div", { className: "twc-dt__be-ctl", children: c.renderBatchEditCell ? c.renderBatchEditCell({
               value: batchEdit.values[c.field],
               field: c.field,
@@ -12148,6 +12361,18 @@ function Datatable({
                 " ",
                 groupBy.includes(c.field) ? "Stop grouping" : "Group by this column"
               ] }) : null,
+              columnCombining && c.type !== "actions" ? /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", "data-active": !!userCombine[c.field] || void 0, onClick: () => {
+                const anchor = menuTriggerRef.current;
+                setColMenu(null);
+                closeMenu();
+                openCombineEditor(c.field);
+                setPanel("combine");
+                openPanel(anchor, "right", 300);
+              }, children: [
+                /* @__PURE__ */ jsx(Svg, { d: I.columns }),
+                " ",
+                userCombine[c.field] ? "Edit combined column\u2026" : "Combine columns\u2026"
+              ] }) : null,
               !disableColumnReorder && c.reorderable !== false && c.type !== "actions" && !pins.left.includes(c.field) && !pins.right.includes(c.field) && movableMidFields.length > 1 ? (() => {
                 const midIdx = movableMidFields.indexOf(c.field);
                 const atFirst = midIdx === 0;
@@ -12315,10 +12540,13 @@ function Datatable({
                 e.preventDefault();
                 onColDrop(c.field);
               } : void 0,
-              onClick: () => c.hideable && toggleHiddenField(c.field),
+              onClick: () => c.hideable && !combineSources.has(c.field) && toggleHiddenField(c.field),
               children: [
                 canDrag ? /* @__PURE__ */ jsx("span", { className: "twc-dt__col-grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Svg, { d: I.grip }) }) : null,
-                /* @__PURE__ */ jsx("span", { className: "twc-dt__col-name", children: c.headerName }),
+                /* @__PURE__ */ jsxs("span", { className: "twc-dt__col-name", children: [
+                  c.headerName,
+                  combineSources.has(c.field) ? /* @__PURE__ */ jsx("span", { className: "twc-dt__col-combined", children: " \xB7 combined" }) : null
+                ] }),
                 c.pinnable && c.type !== "actions" ? (
                   // Pin from here too, so columns scrolled out of view (no reachable header ⋮) can still be pinned.
                   /* @__PURE__ */ jsxs("span", { className: "twc-dt__col-pins", draggable: false, onClick: (e) => e.stopPropagation(), children: [
@@ -12354,19 +12582,19 @@ function Datatable({
                   "span",
                   {
                     className: "twc-dt__sw",
-                    "data-on": !hidden.has(c.field) || void 0,
+                    "data-on": !effectiveHidden.has(c.field) || void 0,
                     role: "switch",
-                    "aria-checked": !hidden.has(c.field),
+                    "aria-checked": !effectiveHidden.has(c.field),
                     "aria-label": c.headerName,
-                    "aria-disabled": !c.hideable || void 0,
-                    tabIndex: c.hideable ? 0 : -1,
+                    "aria-disabled": !c.hideable || combineSources.has(c.field) || void 0,
+                    tabIndex: c.hideable && !combineSources.has(c.field) ? 0 : -1,
                     onKeyDown: (e) => {
-                      if ((e.key === "Enter" || e.key === " ") && c.hideable) {
+                      if ((e.key === "Enter" || e.key === " ") && c.hideable && !combineSources.has(c.field)) {
                         e.preventDefault();
                         toggleHiddenField(c.field);
                       }
                     },
-                    style: c.hideable ? void 0 : { opacity: 0.4 }
+                    style: c.hideable && !combineSources.has(c.field) ? void 0 : { opacity: 0.4 }
                   }
                 )
               ]
@@ -12377,6 +12605,82 @@ function Datatable({
       ] }),
       popGrip("columns")
     ] }) : null,
+    panel === "combine" && panelPos && combineTarget && combineDraft ? (() => {
+      const target = colByField[combineTarget];
+      const candidates = cols.filter((c) => c.field !== combineTarget && c.type !== "actions" && c.field !== "__pinactions__" && c.hideable !== false && !userCombine[c.field]);
+      const toggle = (f) => setCombineDraft((d) => ({ ...d, selected: d.selected.includes(f) ? d.selected.filter((x) => x !== f) : [...d.selected, f] }));
+      return /* @__PURE__ */ jsxs("div", { ref: combinePanelRef, tabIndex: -1, className: "twc-dt__pop twc-dt__cols", style: { top: panelPos.top, left: panelPos.left, ...popStyle("combine") }, "data-pop-sized": popSizes.combine ? "" : void 0, role: "dialog", "aria-label": `Combine columns into ${target?.headerName || combineTarget}`, children: [
+        /* @__PURE__ */ jsx("div", { className: "twc-dt__panel-head", children: /* @__PURE__ */ jsxs("span", { className: "twc-dt__panel-title", children: [
+          "Combine into \u201C",
+          target?.headerName || combineTarget,
+          "\u201D"
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "twc-dt__combine-hint", children: "Pick columns to merge into this one \u2014 their data shows in this cell and their own columns hide." }),
+        /* @__PURE__ */ jsx("div", { className: "twc-dt__col-list", children: candidates.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__empty", style: { padding: "18px 12px" }, children: "No other columns" }) : candidates.map((c) => {
+          const on = combineDraft.selected.includes(c.field);
+          return /* @__PURE__ */ jsxs("div", { className: "twc-dt__col-row", onClick: () => toggle(c.field), children: [
+            /* @__PURE__ */ jsx("span", { className: "twc-dt__col-name", children: c.headerName }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "twc-dt__sw",
+                "data-on": on || void 0,
+                role: "switch",
+                "aria-checked": on,
+                "aria-label": c.headerName,
+                tabIndex: 0,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    toggle(c.field);
+                  }
+                }
+              }
+            )
+          ] }, c.field);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "twc-dt__combine-opts", children: [
+          /* @__PURE__ */ jsxs("label", { className: "twc-dt__combine-opt", children: [
+            /* @__PURE__ */ jsx("span", { children: "Layout" }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                size: "sm",
+                portal: true,
+                matchTriggerWidth: false,
+                value: combineDraft.layout,
+                options: [{ value: "inline", label: "Inline" }, { value: "stack", label: "Stacked" }],
+                onChange: (v) => setCombineDraft((d) => ({ ...d, layout: v }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "twc-dt__combine-opt", onClick: () => setCombineDraft((d) => ({ ...d, labels: !d.labels })), style: { cursor: "pointer" }, children: [
+            /* @__PURE__ */ jsx("span", { children: "Show labels" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "twc-dt__sw",
+                "data-on": combineDraft.labels || void 0,
+                role: "switch",
+                "aria-checked": combineDraft.labels,
+                "aria-label": "Show labels",
+                tabIndex: 0,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    setCombineDraft((d) => ({ ...d, labels: !d.labels }));
+                  }
+                }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "twc-dt__combine-foot", children: [
+          userCombine[combineTarget] ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__link", onClick: () => uncombine(combineTarget), children: "Uncombine" }) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__combine-apply", onClick: applyCombine, children: "Apply" })
+        ] })
+      ] });
+    })() : null,
     panel === "agg" && panelPos ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: panelPos.top, left: panelPos.left, width: 300, ...popStyle("agg") }, "data-pop-sized": popSizes.agg ? "" : void 0, role: "dialog", "aria-label": "Aggregation settings", children: [
       /* @__PURE__ */ jsxs("div", { className: "twc-dt__panel-head", children: [
         /* @__PURE__ */ jsx("span", { className: "twc-dt__panel-title", children: "Aggregation" }),
@@ -15529,6 +15833,8 @@ var ICONBTN_CSS = `
 .twc-iconbtn:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-iconbtn:active:not(:disabled) { transform: scale(var(--press-scale)); }
 .twc-iconbtn:disabled { opacity: 0.5; cursor: not-allowed; }
+/* #342: disabled state for the anchor form (as="a") \u2014 :disabled doesn't apply to <a>. */
+.twc-iconbtn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
 .twc-iconbtn svg { width: 1.25em; height: 1.25em; }
 
 /* tone supplies the accent set; variant decides how it's applied \u2014 mirrors Button. Default tone
@@ -15547,6 +15853,11 @@ var ICONBTN_CSS = `
 .twc-iconbtn[data-variant="outline"]:hover:not(:disabled) { border-color: var(--_accent); color: var(--_accent); background: var(--color-surface-sunken); }
 .twc-iconbtn[data-variant="ghost"]:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--_accent); }
 `;
+function safeHref6(url) {
+  if (url == null) return void 0;
+  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
+  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
+}
 function IconButton({
   children,
   icon,
@@ -15555,21 +15866,28 @@ function IconButton({
   size = "md",
   round = false,
   disabled = false,
+  as = "button",
+  href,
   className = "",
   "aria-label": ariaLabel,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-iconbtn-styles", ICONBTN_CSS);
+  const Tag2 = as;
+  const inert = Tag2 === "a" && disabled;
   return /* @__PURE__ */ jsxs(
-    "button",
+    Tag2,
     {
       className: `twc-iconbtn ${className}`,
       "data-variant": variant,
       "data-tone": tone,
       "data-size": size,
       "data-round": round || void 0,
-      disabled,
-      type: "button",
+      disabled: Tag2 === "button" ? disabled : void 0,
+      type: Tag2 === "button" ? "button" : void 0,
+      href: Tag2 === "a" && !inert ? safeHref6(href) : void 0,
+      "aria-disabled": inert || void 0,
+      tabIndex: inert ? -1 : void 0,
       "aria-label": ariaLabel,
       ...rest,
       children: [
@@ -15771,7 +16089,7 @@ var LIST_CSS = `
 `;
 function List({ items, plain = false, emptyMessage, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-list-styles", LIST_CSS);
-  const safeHref13 = (url) => {
+  const safeHref14 = (url) => {
     if (url == null) return void 0;
     const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
     return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -15783,7 +16101,7 @@ function List({ items, plain = false, emptyMessage, className = "", ...rest }) {
     /* @__PURE__ */ jsxs("ul", { className: `twc-list ${className}`, role: "list", "data-plain": plain || void 0, ...rest, children: [
       __twcStyles,
       items.length === 0 ? /* @__PURE__ */ jsx("li", { role: "presentation", style: { display: "contents" }, children: /* @__PURE__ */ jsx("div", { className: "twc-list__empty", children: emptyMessage ?? "Nothing here yet" }) }) : items.map((it, i) => {
-        const href = safeHref13(it.href);
+        const href = safeHref14(it.href);
         const interactive = Boolean(it.onClick || href);
         const Tag2 = href ? "a" : interactive ? "button" : "div";
         const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -15839,7 +16157,7 @@ button.twc-navbar__brand, a.twc-navbar__brand { cursor: pointer; }
   .twc-navbar__menu-btn { display: inline-grid; }
 }
 `;
-function safeHref6(url) {
+function safeHref7(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -15862,9 +16180,9 @@ function Navbar({
   return /* @__PURE__ */ jsxs("header", { className: `twc-navbar ${className}`, "data-sticky": sticky || void 0, ...rest, children: [
     __twcStyles,
     onMenuClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-navbar__menu-btn", "aria-expanded": menuOpen, "aria-controls": menuControls, "aria-label": menuOpen ? "Close menu" : "Open menu", onClick: onMenuClick, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) }) }) : null,
-    brand ? brandHref ? /* @__PURE__ */ jsx("a", { className: "twc-navbar__brand", href: safeHref6(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
+    brand ? brandHref ? /* @__PURE__ */ jsx("a", { className: "twc-navbar__brand", href: safeHref7(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
     /* @__PURE__ */ jsx("nav", { className: "twc-navbar__links", "aria-label": navLabel, children: links.map((l, i) => {
-      const href = safeHref6(l.href);
+      const href = safeHref7(l.href);
       const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
         l.icon,
         l.label
@@ -16651,13 +16969,13 @@ function Sidebar({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [overlay, open, openProp, onOpenChange]);
-  const safeHref13 = (url) => {
+  const safeHref14 = (url) => {
     if (url == null) return void 0;
     const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
     return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
   };
   const renderItem = (it, i) => {
-    const href = safeHref13(it.href);
+    const href = safeHref14(it.href);
     const labelStr = typeof it.label === "string" ? it.label : void 0;
     const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
       it.icon ? /* @__PURE__ */ jsx("span", { className: "twc-sidebar__ic", "aria-hidden": "true", children: it.icon }) : labelStr != null ? /* @__PURE__ */ jsx("span", { className: "twc-sidebar__ic twc-sidebar__ic--initial", "aria-hidden": "true", children: labelStr.charAt(0) }) : null,
@@ -18371,7 +18689,7 @@ function bgValue(bg) {
   if (BG[bg]) return `var(${BG[bg]})`;
   return String(bg).startsWith("--") ? `var(${bg})` : bg;
 }
-function safeHref7(url) {
+function safeHref8(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -18419,7 +18737,7 @@ var Box = React51__default.forwardRef(function Box2({
     ...style,
     ...flatStyle
   };
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
   return /* @__PURE__ */ jsxs(Tag2, { ref, className: `twc-box ${className}`.trim(), style: s, "data-twc-sx": sxAttr, ...rest, children: [
     styleNode,
     children
@@ -18427,7 +18745,7 @@ var Box = React51__default.forwardRef(function Box2({
 });
 Box.displayName = "Box";
 var SIZES = { sm: 640, md: 768, lg: 1024, xl: 1280, full: "100%" };
-function safeHref8(url) {
+function safeHref9(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -18444,7 +18762,7 @@ var Container = React51__default.forwardRef(function Container2({
 }, ref) {
   const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const max = SIZES[size] ?? size;
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
   return /* @__PURE__ */ jsxs(
     Tag2,
     {
@@ -18475,7 +18793,7 @@ function space2(v) {
   if (typeof v === "number") return `var(--space-${String(v).replace(".", "-")})`;
   return v;
 }
-function safeHref9(url) {
+function safeHref10(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -18503,7 +18821,7 @@ var Stack = React51__default.forwardRef(function Stack2({
   ...rest
 }, ref) {
   const { flatStyle, styleNode, sxAttr } = useSx(sx);
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
   const kids = divider != null ? React51__default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsx(React51__default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
   return /* @__PURE__ */ jsxs(
     Tag2,
@@ -18558,7 +18876,7 @@ var CODE_CSS = `
 .twc-code__copy:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-code__copy svg { width: 15px; height: 15px; display: block; }
 `;
-function safeHref10(url) {
+function safeHref11(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -18575,7 +18893,7 @@ function Code({
 }) {
   const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
   const Tag2 = as ?? (block ? "pre" : "code");
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
   const rootRef = React51__default.useRef(null);
   const [copied, setCopied] = React51__default.useState(false);
   const timerRef = React51__default.useRef(null);
@@ -18600,7 +18918,7 @@ function Code({
   ] });
 }
 var LEVEL_SIZE = { 1: "4xl", 2: "2xl", 3: "xl", 4: "lg", 5: "base", 6: "sm" };
-function safeHref11(url) {
+function safeHref12(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -18622,7 +18940,7 @@ var Heading = React51__default.forwardRef(function Heading2({
   const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const Tag2 = as || `h${level}`;
   const sz = size || (display ? "display" : LEVEL_SIZE[level]) || "2xl";
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref12(rest.href);
   return /* @__PURE__ */ jsxs(
     Tag2,
     {
@@ -18669,7 +18987,7 @@ var TONE = {
   // Adopt the surrounding color (e.g. inside a solid Button/Badge/Alert or a link).
   inherit: "inherit"
 };
-function safeHref12(url) {
+function safeHref13(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -18689,7 +19007,7 @@ var Text = React51__default.forwardRef(function Text2({
   ...rest
 }, ref) {
   const { flatStyle, styleNode, sxAttr } = useSx(sx);
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref12(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref13(rest.href);
   const toneToken = TONE[tone] || TONE.default;
   return /* @__PURE__ */ jsxs(
     Tag2,