twico-ui 1.31.0 → 1.32.0

package/dist/index.mjs

@@ -8191,7 +8191,6 @@ function classifyDiff(from = [], to = [], columns = [], rowKey, opts = {}) {
   return { rows, counts };
 }
 var DT_FILTER_PANEL_W = 620;
-var DT_FILTER_LOGIC_W = 68;
 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);
@@ -8433,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);
@@ -8498,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);
@@ -8616,8 +8634,11 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__link:hover { background: var(--color-primary-subtle); }
 /* #330: MUI DataGrid-style per-row And/Or connector. Row 1 shows a static "Where"; the first connector
    row (row 2) hosts an editable And/Or Select bound to the single filterLogic; rows 3+ echo it as static
-   text. Fixed-width leading cell so the Column/Operator/Value cells stay aligned across rows. */
-.twc-dt__f-logic { position: relative; flex: none; width: 68px; }
+   text. Leading cell aligns the Column/Operator/Value cells across rows. It is a first-class resizable
+   filter field like col/op: auto-fit to its content (-fit, from the #289 measurer) with a user drag tier
+   (-usr) winning in the clamp cascade, so it no longer truncates and the width can be adjusted manually. */
+.twc-dt__f-logic { position: relative; flex: none; min-width: 84px;
+  width: clamp(84px, var(--twc-dt-flogic-usr, var(--twc-dt-flogic-fit, 84px)), var(--twc-dt-flogic-cap, 180px)); }
 .twc-dt__f-where { display: inline-flex; align-items: center; height: 38px; padding-inline: 6px; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--font-medium); }
 
 /* Filter panel \u2014 user-resizable (#292): panel size + per-field widths resolve through a two-tier CSS var
@@ -8829,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;
@@ -9209,6 +9258,7 @@ function Datatable({
   aggregationValues = null,
   disableColumnReorder = false,
   disableColumnResize = false,
+  columnCombining = false,
   emptyMessage,
   renderEmpty,
   editMode = false,
@@ -9275,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,
@@ -9317,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) => {
@@ -9352,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) => {
@@ -9413,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),
@@ -9431,9 +9546,13 @@ function Datatable({
     density,
     // #292: additive, optional — user-resized filter panel + field widths (panel-global, not per column).
     filterPanelSize: fPanelSize || void 0,
-    filterFieldWidths: fWidths.col != null || fWidths.op != null || fWidths.val != null ? fWidths : 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;
@@ -9461,7 +9580,7 @@ function Datatable({
     if (s.density === "compact" || s.density === "standard" || s.density === "comfortable") setDensity(s.density);
     if (s.filterFieldWidths && typeof s.filterFieldWidths === "object") {
       const fw = {};
-      for (const k of ["col", "op", "val"]) if (typeof s.filterFieldWidths[k] === "number") fw[k] = s.filterFieldWidths[k];
+      for (const k of ["col", "op", "val", "logic"]) if (typeof s.filterFieldWidths[k] === "number") fw[k] = s.filterFieldWidths[k];
       if (Object.keys(fw).length) setFWidths(fw);
     }
     if (s.filterPanelSize && typeof s.filterPanelSize === "object") {
@@ -9478,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);
@@ -9495,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) {
@@ -9636,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);
@@ -9736,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)
   );
@@ -9755,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;
@@ -10832,9 +10984,11 @@ function Datatable({
       const pad2 = trigger ? (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) : 24;
       const chrome = pad2 + 8 + 16 + 4;
       const widest = (labels) => labels.reduce((m, l) => Math.max(m, ctx.measureText(String(l)).width), 0);
-      const colCap = Math.max(118, Math.min(210, el.clientWidth - DT_FILTER_LOGIC_W - 118 - 30 - 30 - 140 - 5 * 6 - 2 * 4));
+      const logicW = Math.min(180, Math.max(84, Math.ceil(widest(["And", "Or"]) + chrome)));
+      const colCap = Math.max(118, Math.min(210, el.clientWidth - logicW - 118 - 30 - 30 - 140 - 5 * 6 - 2 * 4));
       const colW = Math.min(colCap, Math.max(118, Math.ceil(widest(filterableCols.map((c) => c.headerName ?? c.field)) + chrome)));
       const opW = Math.min(170, Math.max(118, Math.ceil(widest(ALL_OP_LABELS) + chrome)));
+      if (Number.isFinite(logicW)) el.style.setProperty("--twc-dt-flogic-fit", `${logicW}px`);
       if (Number.isFinite(colW)) el.style.setProperty("--twc-dt-fcol-fit", `${colW}px`);
       if (Number.isFinite(opW)) el.style.setProperty("--twc-dt-fop-fit", `${opW}px`);
     };
@@ -10848,10 +11002,10 @@ function Datatable({
     }
     return () => ro?.disconnect();
   }, [panel, filterableCols, filters.length]);
-  const F_MIN = { col: 118, op: 118, val: 140 };
-  const F_VAR = { col: "--twc-dt-fcol-usr", op: "--twc-dt-fop-usr", val: "--twc-dt-fval-usr" };
-  const F_SEL = { col: ".twc-dt__f-col", op: ".twc-dt__f-op", val: ".twc-dt__f-val" };
-  const F_LABEL = { col: "column", op: "operator", val: "value" };
+  const F_MIN = { col: 118, op: 118, val: 140, logic: 84 };
+  const F_VAR = { col: "--twc-dt-fcol-usr", op: "--twc-dt-fop-usr", val: "--twc-dt-fval-usr", logic: "--twc-dt-flogic-usr" };
+  const F_SEL = { col: ".twc-dt__f-col", op: ".twc-dt__f-op", val: ".twc-dt__f-val", logic: ".twc-dt__f-logic" };
+  const F_LABEL = { col: "column", op: "operator", val: "value", logic: "connector" };
   const fMaxW = () => typeof window === "undefined" ? 9999 : window.innerWidth - 32;
   const fMaxH = () => typeof window === "undefined" ? 9999 : window.innerHeight - 32;
   const clampNum = (v, lo, hi) => Math.max(lo, Math.min(hi, Math.round(v)));
@@ -10860,11 +11014,12 @@ function Datatable({
     return el ? el.getBoundingClientRect().width : F_MIN[field];
   };
   const fCap = (field) => {
+    if (field === "logic") return 180;
     if (field === "col") return filterFieldMaxWidth || 360;
     if (field === "op") return filterFieldMaxWidth || 260;
     const p = filterPanelRef.current;
     if (!p) return 640;
-    return clampNum(p.clientWidth - DT_FILTER_LOGIC_W - fLiveW("col") - fLiveW("op") - 30 - 30 - 5 * 6 - 2 * 4, F_MIN.val, 640);
+    return clampNum(p.clientWidth - fLiveW("logic") - fLiveW("col") - fLiveW("op") - 30 - 30 - 5 * 6 - 2 * 4, F_MIN.val, 640);
   };
   const isRtl = () => {
     const p = filterPanelRef.current;
@@ -10927,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();
@@ -10997,12 +11200,12 @@ function Datatable({
     setFPanelSize(null);
     const p = filterPanelRef.current;
     if (p) {
-      ["--twc-dt-fcol-usr", "--twc-dt-fop-usr", "--twc-dt-fval-usr", "--twc-dt-panel-w", "--twc-dt-panel-h"].forEach((v) => p.style.removeProperty(v));
+      ["--twc-dt-fcol-usr", "--twc-dt-fop-usr", "--twc-dt-fval-usr", "--twc-dt-flogic-usr", "--twc-dt-panel-w", "--twc-dt-panel-h"].forEach((v) => p.style.removeProperty(v));
       p.removeAttribute("data-val-fixed");
       p.removeAttribute("data-panel-sized");
     }
   };
-  const hasFilterSizeOverride = fWidths.col != null || fWidths.op != null || fWidths.val != null || fPanelSize != null;
+  const hasFilterSizeOverride = fWidths.col != null || fWidths.op != null || fWidths.val != null || fWidths.logic != null || fPanelSize != null;
   const POP_MIN_W = { columns: 240, agg: 240, pivot: 260, batchedit: 260 };
   const popMinW = (id) => POP_MIN_W[id] || 200;
   const clearPop = (id, node) => {
@@ -11149,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) {
@@ -11307,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 },
@@ -12004,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 ",
@@ -12025,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,
@@ -12143,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;
@@ -12310,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: [
@@ -12349,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 }
                   }
                 )
               ]
@@ -12372,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" }),
@@ -12552,6 +12861,7 @@ function Datatable({
           "--twc-dt-fcol-usr": fWidths.col != null ? `${fWidths.col}px` : void 0,
           "--twc-dt-fop-usr": fWidths.op != null ? `${fWidths.op}px` : void 0,
           "--twc-dt-fval-usr": fWidths.val != null ? `${fWidths.val}px` : void 0,
+          "--twc-dt-flogic-usr": fWidths.logic != null ? `${fWidths.logic}px` : void 0,
           "--twc-dt-panel-w": fPanelSize?.w != null ? `${fPanelSize.w}px` : void 0,
           "--twc-dt-panel-h": fPanelSize?.h != null ? `${fPanelSize.h}px` : void 0,
           "--twc-dt-fcol-cap": filterFieldMaxWidth ? `${filterFieldMaxWidth}px` : void 0,
@@ -12572,17 +12882,20 @@ function Datatable({
             const ops = opsFor(filterTypeOf(col));
             const op = ops.find((o) => o.value === f.op) || ops[0];
             return /* @__PURE__ */ jsxs("div", { className: "twc-dt__frow", children: [
-              /* @__PURE__ */ jsx("div", { className: "twc-dt__f-logic", children: i === 0 ? /* @__PURE__ */ jsx("span", { className: "twc-dt__f-where", children: "Where" }) : i === 1 ? /* @__PURE__ */ jsx(
-                Select,
-                {
-                  size: "sm",
-                  portal: true,
-                  "aria-label": "Combine with the other filters",
-                  value: filterLogic,
-                  options: [{ value: "and", label: "And" }, { value: "or", label: "Or" }],
-                  onChange: (v) => setFilterLogic(v)
-                }
-              ) : /* @__PURE__ */ jsx("span", { className: "twc-dt__f-where", children: filterLogic === "or" ? "Or" : "And" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "twc-dt__f-logic", children: [
+                i === 0 ? /* @__PURE__ */ jsx("span", { className: "twc-dt__f-where", children: "Where" }) : i === 1 ? /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    size: "sm",
+                    portal: true,
+                    "aria-label": "Combine with the other filters",
+                    value: filterLogic,
+                    options: [{ value: "and", label: "And" }, { value: "or", label: "Or" }],
+                    onChange: (v) => setFilterLogic(v)
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "twc-dt__f-where", children: filterLogic === "or" ? "Or" : "And" }),
+                fieldHandle("logic", i)
+              ] }),
               /* @__PURE__ */ jsxs("div", { className: "twc-dt__f-col", children: [
                 /* @__PURE__ */ jsx(
                   Select,
@@ -15520,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
@@ -15538,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,
@@ -15546,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: [
@@ -15762,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;
@@ -15774,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: [
@@ -15830,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;
@@ -15853,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
@@ -16642,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,
@@ -18362,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;
@@ -18410,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
@@ -18418,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;
@@ -18435,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,
     {
@@ -18466,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;
@@ -18494,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,
@@ -18549,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;
@@ -18566,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);
@@ -18591,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;
@@ -18613,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,
     {
@@ -18660,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;
@@ -18680,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,