twico-ui 1.33.0 → 1.34.0

package/dist/index.cjs

@@ -7963,6 +7963,9 @@ var TOOLTIP_CSS = `
 .twc-tooltip-wrap { display: inline-flex; }
 .twc-tooltip {
   position: fixed; z-index: var(--z-tooltip);
+  /* #348: purely presentational \u2014 the bubble must NEVER intercept the pointer, so neither a hidden
+     (opacity:0) nor a shown bubble can block neighbouring cells/buttons (matches MUI/Radix tooltips). */
+  pointer-events: none;
   padding: 6px 10px; border-radius: var(--radius-md);
   background: var(--color-text); color: var(--color-surface);
   font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
@@ -7974,7 +7977,6 @@ var TOOLTIP_CSS = `
   width: max-content; max-width: var(--_tw-maxw, 320px); box-shadow: var(--shadow-md);
   opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
 }
-.twc-tooltip[data-show="true"] { pointer-events: auto; }
 .twc-tooltip[data-show="true"] { opacity: 1; transform: scale(1); }
 .twc-tooltip[data-place="top"]    { transform-origin: bottom center; translate: -50% 0; }
 .twc-tooltip[data-place="bottom"] { transform-origin: top center; translate: -50% 0; }
@@ -8021,9 +8023,6 @@ function Tooltip({
     clearTimeout(closeTimer.current);
     closeTimer.current = setTimeout(() => setShowU(false), 120);
   };
-  const cancelClose = () => {
-    clearTimeout(closeTimer.current);
-  };
   React51__namespace.default.useEffect(() => () => {
     clearTimeout(timer.current);
     clearTimeout(closeTimer.current);
@@ -8099,8 +8098,6 @@ function Tooltip({
         "data-show": show || void 0,
         role: "tooltip",
         "aria-hidden": show ? void 0 : "true",
-        onMouseEnter: anchored ? void 0 : cancelClose,
-        onMouseLeave: anchored ? void 0 : close,
         style: {
           position: "fixed",
           left: coords.left,
@@ -8386,6 +8383,16 @@ var DT_CSS = `
 .twc-dt__group-sub span { font-variant-numeric: tabular-nums; }
 .twc-dt__group-sub span b { color: var(--color-text); }
 
+/* #350: expandable row detail (renderRowDetail) \u2014 leading chevron column + full-width detail row */
+.twc-dt__expand-cell { text-align: center; padding-inline: 0; }
+.twc-dt__expand-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; border: none; padding: 0; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); }
+.twc-dt__expand-btn:hover { color: var(--color-text); background: color-mix(in srgb, currentColor 12%, transparent); }
+.twc-dt__expand-btn:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-dt__expand-chev { display: inline-flex; transform: rotate(-90deg); transition: transform var(--duration-base) var(--ease-spring); }
+.twc-dt__expand-chev[data-open] { transform: rotate(0deg); color: var(--color-primary); }
+.twc-dt__expand-chev svg { width: 16px; height: 16px; }
+.twc-dt__detail-cell { box-sizing: border-box; background: var(--color-surface-sunken); border-bottom: var(--border-thin) solid var(--color-divider); padding: 12px 16px; }
+
 /* Pivot view */
 .twc-dt__pivot { table-layout: auto; width: 100%; }
 .twc-dt__pivot th, .twc-dt__pivot td { white-space: nowrap; }
@@ -9333,6 +9340,13 @@ function Datatable({
   virtualized = false,
   overscan = 8,
   rowHeight,
+  // #350 (first pass): expandable/collapsible rows. `renderRowDetail(row)` returns the detail panel for a
+  // row (return null/undefined ⇒ that row isn't expandable). Presence of the fn enables a leading chevron
+  // column + a full-width detail <tr> under each expanded row. Expansion is uncontrolled unless
+  // `expandedRowIds` is supplied; `onExpandedRowsChange` fires the next expanded-key array on every toggle.
+  renderRowDetail,
+  expandedRowIds,
+  onExpandedRowsChange,
   className = "",
   ...rest
 }) {
@@ -9539,6 +9553,12 @@ function Datatable({
   const gridRef = React51__namespace.default.useRef(null);
   const [groupBy, setGroupBy] = React51__namespace.default.useState(rowGrouping || []);
   const [collapsed, setCollapsed] = React51__namespace.default.useState(() => /* @__PURE__ */ new Set());
+  const [internalExpanded, setInternalExpanded] = React51__namespace.default.useState(() => /* @__PURE__ */ new Set());
+  const expandControlled = expandedRowIds !== void 0;
+  const expandedSet = React51__namespace.default.useMemo(
+    () => new Set(expandControlled ? expandedRowIds : internalExpanded),
+    [expandControlled, expandedRowIds, internalExpanded]
+  );
   const [pinnedRows, setPinnedRows] = React51__namespace.default.useState({ top: [], bottom: [] });
   const [headH, setHeadH] = React51__namespace.default.useState(41);
   const theadRef = React51__namespace.default.useRef(null);
@@ -9940,7 +9960,9 @@ function Datatable({
   }, [pins, effectiveHidden, visibleCols, colByField, order]);
   const NUM_W = 56;
   const CHK_W = checkboxSelection ? rowReorder ? 68 : 44 : 0;
-  const numLeft = CHK_W;
+  const hasRowDetail = typeof renderRowDetail === "function";
+  const EXP_W = hasRowDetail ? 44 : 0;
+  const numLeft = EXP_W + CHK_W;
   const leadW = numLeft + (showRowNum ? NUM_W : 0);
   const visLeft = React51__namespace.default.useMemo(() => pins.left.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.left, colByField, effectiveHidden]);
   const visRight = React51__namespace.default.useMemo(() => pins.right.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.right, colByField, effectiveHidden]);
@@ -10535,6 +10557,12 @@ function Datatable({
       return n;
     });
   }
+  function toggleRowDetail(k) {
+    const n = new Set(expandedSet);
+    n.has(k) ? n.delete(k) : n.add(k);
+    onExpandedRowsChange?.([...n]);
+    if (!expandControlled) setInternalExpanded(n);
+  }
   function handleRowClick(e, k, row) {
     if (selectionMode === "none") return;
     if (e.target.closest("button, a, input, select, .twc-dt__check, .twc-dt__editor-wrap")) return;
@@ -11381,7 +11409,7 @@ function Datatable({
   const manageableCols = cols.filter((c) => c.field !== "__pinactions__");
   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);
+  const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0) + (hasRowDetail ? 1 : 0);
   function renderGroupRow(item) {
     const subs = aggOn ? subtotalText(item.rows) : [];
     return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "twc-dt__group-row", role: "row", children: /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__group-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: [
@@ -11435,6 +11463,9 @@ function Datatable({
   function renderLeaf(row, ri, pinSide, midIdx) {
     const k = keyOf(row, ri);
     const sel = selected.has(k);
+    const detail = hasRowDetail && !pinSide ? renderRowDetail(row) : null;
+    const expandable = detail != null;
+    const open = expandable && expandedSet.has(k);
     const rowActive = selectionMode === "row" && activeRowVal === k;
     const stickyStyle = pinSide === "top" ? { position: "sticky", top: headH, zIndex: 5 } : pinSide === "bottom" ? { position: "sticky", bottom: 0, zIndex: 5 } : void 0;
     const h = rowHeights[k];
@@ -11442,159 +11473,165 @@ function Datatable({
     const reorderable = canReorderRows && !pinSide;
     const grabbed = rowGrab && rowGrab.key === k;
     const grabTarget = rowGrab && !grabbed && midIdx != null && rowGrab.index === midIdx ? rowGrab.index >= keyIndexMid.get(rowGrab.key) ? "after" : "before" : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "tr",
-      {
-        className: "twc-dt__row",
-        role: "row",
-        "aria-rowindex": (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
-        "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
-        "data-op": row.__diffop || void 0,
-        "data-selected": sel || void 0,
-        "data-active": rowActive || void 0,
-        "data-pinned-row": pinSide || void 0,
-        "data-reorderable": reorderable || void 0,
-        "data-row-dragging": rowDrag.from === k || void 0,
-        "data-row-grabbed": grabbed || void 0,
-        "data-row-grabtarget": grabTarget,
-        "data-row-dropbefore": reorderable && rowDrag.over === k && !rowDrag.after || void 0,
-        "data-row-dropafter": reorderable && rowDrag.over === k && rowDrag.after || void 0,
-        "data-vrow": virtualizing && midIdx != null ? String(k) : void 0,
-        "data-selectable": selectionMode !== "none" || void 0,
-        style: Object.keys(rowStyle).length ? rowStyle : void 0,
-        draggable: reorderable || void 0,
-        onDragStart: reorderable ? (e) => {
-          setRowDrag({ from: k, over: null, after: false });
-          e.dataTransfer.effectAllowed = "move";
-          e.dataTransfer.setData("text/plain", String(k));
-        } : void 0,
-        onDragOver: reorderable && rowDrag.from != null ? (e) => {
-          e.preventDefault();
-          const r2 = e.currentTarget.getBoundingClientRect();
-          const after = e.clientY > r2.top + r2.height / 2;
-          setRowDrag((d) => d.over === k && d.after === after ? d : { ...d, over: k, after });
-        } : void 0,
-        onDrop: reorderable && rowDrag.from != null ? (e) => {
-          e.preventDefault();
-          onRowDrop(k);
-        } : void 0,
-        onDragEnd: reorderable ? () => setRowDrag({ from: null, over: null, after: false }) : void 0,
-        onClick: (e) => handleRowClick(e, k, row),
-        children: [
-          checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
-              reorderable ? rowHandle(k, midIdx, row) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
+    return /* @__PURE__ */ jsxRuntime.jsxs(React51__namespace.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "tr",
+        {
+          className: "twc-dt__row",
+          role: "row",
+          "aria-rowindex": (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
+          "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
+          "data-op": row.__diffop || void 0,
+          "data-selected": sel || void 0,
+          "data-active": rowActive || void 0,
+          "data-pinned-row": pinSide || void 0,
+          "data-reorderable": reorderable || void 0,
+          "data-row-dragging": rowDrag.from === k || void 0,
+          "data-row-grabbed": grabbed || void 0,
+          "data-row-grabtarget": grabTarget,
+          "data-row-dropbefore": reorderable && rowDrag.over === k && !rowDrag.after || void 0,
+          "data-row-dropafter": reorderable && rowDrag.over === k && rowDrag.after || void 0,
+          "data-vrow": virtualizing && midIdx != null ? String(k) : void 0,
+          "data-selectable": selectionMode !== "none" || void 0,
+          style: Object.keys(rowStyle).length ? rowStyle : void 0,
+          draggable: reorderable || void 0,
+          onDragStart: reorderable ? (e) => {
+            setRowDrag({ from: k, over: null, after: false });
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("text/plain", String(k));
+          } : void 0,
+          onDragOver: reorderable && rowDrag.from != null ? (e) => {
+            e.preventDefault();
+            const r2 = e.currentTarget.getBoundingClientRect();
+            const after = e.clientY > r2.top + r2.height / 2;
+            setRowDrag((d) => d.over === k && d.after === after ? d : { ...d, over: k, after });
+          } : void 0,
+          onDrop: reorderable && rowDrag.from != null ? (e) => {
+            e.preventDefault();
+            onRowDrop(k);
+          } : void 0,
+          onDragEnd: reorderable ? () => setRowDrag({ from: null, over: null, after: false }) : void 0,
+          onClick: (e) => handleRowClick(e, k, row),
+          children: [
+            hasRowDetail ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W }, children: expandable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__expand-btn", "aria-expanded": open, "aria-controls": open ? `${gridId}-detail-${ri}` : void 0, "aria-label": open ? "Collapse row" : "Expand row", onClick: (e) => {
+              e.stopPropagation();
+              toggleRowDetail(k);
+            }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__expand-chev", "data-open": open || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.chevDown }) }) }) : null }) : null,
+            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: EXP_W, width: CHK_W }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+                reorderable ? rowHandle(k, midIdx, row) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "twc-dt__check",
+                    "data-checked": sel || void 0,
+                    onClick: () => toggleRow(k),
+                    role: "checkbox",
+                    "aria-checked": sel,
+                    "aria-label": "Select row",
+                    tabIndex: 0,
+                    onKeyDown: (e) => {
+                      if (e.key === " " || e.key === "Enter") {
+                        e.preventDefault();
+                        toggleRow(k);
+                      }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.check })
+                  }
+                )
+              ] }),
+              rowResize && !pinSide ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__row-resizer", title: "Drag to resize row", onPointerDown: (e) => startRowResize(e, k, e.currentTarget.closest("tr")), onClick: (e) => e.stopPropagation() }) : null
+            ] }) : null,
+            showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
+            ordered.map((c, ci) => {
+              const st = stickyOf(c.field);
+              const val = getColVal(c, row);
+              const isActions = c.type === "actions";
+              const editable = isColEditable(c);
+              const isEditing = editing && editing.key === k && editing.field === c.field;
+              const cellActive = selectionMode === "cell" && activeCell && activeCell.key === k && activeCell.field === c.field;
+              const cellSelected = selectionMode === "cell" && cellRect && ri >= cellRect.r0 && ri <= cellRect.r1 && ci >= cellRect.c0 && ci <= cellRect.c1;
+              const cellFlash = clipFx && clipFx.rect && ri >= clipFx.rect.r0 && ri <= clipFx.rect.r1 && ci >= clipFx.rect.c0 && ci <= clipFx.rect.c1;
+              const cellId = selectionMode === "cell" ? `${gridId}-${ri}-${ci}` : void 0;
+              const display = c.valueFormatter ? c.valueFormatter(val, row) : val;
+              const cellTitle = !isActions && !c.renderCell && !isEditing && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
+              const cellClass = c.cellClassName ? c.cellClassName(val, row) : void 0;
+              const cellSty = c.cellStyle ? c.cellStyle(val, row) : void 0;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "td",
                 {
-                  className: "twc-dt__check",
-                  "data-checked": sel || void 0,
-                  onClick: () => toggleRow(k),
-                  role: "checkbox",
-                  "aria-checked": sel,
-                  "aria-label": "Select row",
-                  tabIndex: 0,
-                  onKeyDown: (e) => {
-                    if (e.key === " " || e.key === "Enter") {
-                      e.preventDefault();
-                      toggleRow(k);
-                    }
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.check })
-                }
-              )
-            ] }),
-            rowResize && !pinSide ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__row-resizer", title: "Drag to resize row", onPointerDown: (e) => startRowResize(e, k, e.currentTarget.closest("tr")), onClick: (e) => e.stopPropagation() }) : null
-          ] }) : null,
-          showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
-          ordered.map((c, ci) => {
-            const st = stickyOf(c.field);
-            const val = getColVal(c, row);
-            const isActions = c.type === "actions";
-            const editable = isColEditable(c);
-            const isEditing = editing && editing.key === k && editing.field === c.field;
-            const cellActive = selectionMode === "cell" && activeCell && activeCell.key === k && activeCell.field === c.field;
-            const cellSelected = selectionMode === "cell" && cellRect && ri >= cellRect.r0 && ri <= cellRect.r1 && ci >= cellRect.c0 && ci <= cellRect.c1;
-            const cellFlash = clipFx && clipFx.rect && ri >= clipFx.rect.r0 && ri <= clipFx.rect.r1 && ci >= clipFx.rect.c0 && ci <= clipFx.rect.c1;
-            const cellId = selectionMode === "cell" ? `${gridId}-${ri}-${ci}` : void 0;
-            const display = c.valueFormatter ? c.valueFormatter(val, row) : val;
-            const cellTitle = !isActions && !c.renderCell && !isEditing && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
-            const cellClass = c.cellClassName ? c.cellClassName(val, row) : void 0;
-            const cellSty = c.cellStyle ? c.cellStyle(val, row) : void 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "td",
-              {
-                id: cellId,
-                className: cellClass ? `twc-dt__td ${cellClass}` : "twc-dt__td",
-                role: "gridcell",
-                "data-r": ri,
-                "data-c": ci,
-                "aria-colindex": ci + 1 + (checkboxSelection ? 1 : 0),
-                tabIndex: focus.r === ri && focus.c === ci ? 0 : -1,
-                "aria-selected": cellSelected || void 0,
-                "data-num": c.type === "number" || void 0,
-                "data-actions": isActions || void 0,
-                "data-editable": editable && !isEditing || void 0,
-                "data-editing": isEditing || void 0,
-                "data-cell-active": cellActive || void 0,
-                "data-cell-selected": cellSelected || void 0,
-                "data-copied": cellFlash || void 0,
-                "data-wrap": effectiveWrapped.has(c.field) || void 0,
-                "data-pin": st.pin,
-                "data-pin-edge": st.edge,
-                style: { width: widthOf(c), ...cellSty, ...st.style, ...st.pin ? { position: "sticky", zIndex: 2 } : null },
-                "data-ovtext": cellTitle,
-                onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
-                onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
-                onDoubleClick: editable ? () => beginEdit(k, c, row) : void 0,
-                children: [
-                  !checkboxSelection && reorderable && ci === 0 && !isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, maxWidth: "100%" }, children: [
-                    rowHandle(k, midIdx, row),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : display })
-                  ] }) : isEditing ? c.renderEditCell ? (
-                    // #236: full escape hatch — the host drops in its own editor (searchable/creatable/
-                    // async Combobox, …) and drives the lifecycle via commit/cancel. Wrapped in
-                    // .twc-dt__editor-wrap so inline clicks (and any .twc-pop portal dropdown) don't
-                    // trip the outside-click auto-cancel.
-                    // #273: the wrapper handles Escape → cancel so it works for every custom editor without
-                    // each having to wire a keydown (they only get commit/cancel). A custom control that
-                    // wants Escape itself (e.g. to close its own open dropdown) stops propagation first.
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
+                  id: cellId,
+                  className: cellClass ? `twc-dt__td ${cellClass}` : "twc-dt__td",
+                  role: "gridcell",
+                  "data-r": ri,
+                  "data-c": ci,
+                  "aria-colindex": ci + 1 + (checkboxSelection ? 1 : 0) + (hasRowDetail ? 1 : 0),
+                  tabIndex: focus.r === ri && focus.c === ci ? 0 : -1,
+                  "aria-selected": cellSelected || void 0,
+                  "data-num": c.type === "number" || void 0,
+                  "data-actions": isActions || void 0,
+                  "data-editable": editable && !isEditing || void 0,
+                  "data-editing": isEditing || void 0,
+                  "data-cell-active": cellActive || void 0,
+                  "data-cell-selected": cellSelected || void 0,
+                  "data-copied": cellFlash || void 0,
+                  "data-wrap": effectiveWrapped.has(c.field) || void 0,
+                  "data-pin": st.pin,
+                  "data-pin-edge": st.edge,
+                  style: { width: widthOf(c), ...cellSty, ...st.style, ...st.pin ? { position: "sticky", zIndex: 2 } : null },
+                  "data-ovtext": cellTitle,
+                  onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
+                  onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
+                  onDoubleClick: editable ? () => beginEdit(k, c, row) : void 0,
+                  children: [
+                    !checkboxSelection && reorderable && ci === 0 && !isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, maxWidth: "100%" }, children: [
+                      rowHandle(k, midIdx, row),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : display })
+                    ] }) : isEditing ? c.renderEditCell ? (
+                      // #236: full escape hatch — the host drops in its own editor (searchable/creatable/
+                      // async Combobox, …) and drives the lifecycle via commit/cancel. Wrapped in
+                      // .twc-dt__editor-wrap so inline clicks (and any .twc-pop portal dropdown) don't
+                      // trip the outside-click auto-cancel.
+                      // #273: the wrapper handles Escape → cancel so it works for every custom editor without
+                      // each having to wire a keydown (they only get commit/cancel). A custom control that
+                      // wants Escape itself (e.g. to close its own open dropdown) stops propagation first.
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: "twc-dt__editor-wrap",
+                          onKeyDown: (e) => {
+                            if (e.key === "Escape") {
+                              e.stopPropagation();
+                              cancelEdit();
+                            }
+                          },
+                          children: c.renderEditCell({ value: editing.value, row, field: c.field, commit: (v) => commitEdit(v), cancel: cancelEdit })
+                        }
+                      )
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      EditCell,
                       {
-                        className: "twc-dt__editor-wrap",
-                        onKeyDown: (e) => {
-                          if (e.key === "Escape") {
-                            e.stopPropagation();
-                            cancelEdit();
-                          }
-                        },
-                        children: c.renderEditCell({ value: editing.value, row, field: c.field, commit: (v) => commitEdit(v), cancel: cancelEdit })
+                        col: c,
+                        value: editing.value,
+                        options: c.valueOptions ? optionsForField(c.field) : null,
+                        onChange: (v) => setEditing((e) => ({ ...e, value: v })),
+                        onCommit: () => commitEdit(),
+                        onCommitValue: (v) => commitEdit(v),
+                        onCancel: cancelEdit,
+                        onKeyDown: onEditKey
                       }
-                    )
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
-                    EditCell,
-                    {
-                      col: c,
-                      value: editing.value,
-                      options: c.valueOptions ? optionsForField(c.field) : null,
-                      onChange: (v) => setEditing((e) => ({ ...e, value: v })),
-                      onCommit: () => commitEdit(),
-                      onCommitValue: (v) => commitEdit(v),
-                      onCancel: cancelEdit,
-                      onKeyDown: onEditKey
-                    }
-                  ) : isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : display,
-                  editable && !isEditing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__edit-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }) }) : null
-                ]
-              },
-              c.field
-            );
-          })
-        ]
-      },
-      (pinSide ? "p-" : "") + k
-    );
+                    ) : isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : display,
+                    editable && !isEditing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__edit-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }) }) : null
+                  ]
+                },
+                c.field
+              );
+            })
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "twc-dt__detail-row", role: "row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { id: `${gridId}-detail-${ri}`, className: "twc-dt__detail-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: detail }) }) : null
+    ] }, (pinSide ? "p-" : "") + k);
   }
   function renderPivot() {
     const rFields = pivotConfig.rows, cFields = pivotConfig.columns || [], values = pivotConfig.values;
@@ -11931,14 +11968,15 @@ function Datatable({
             role: "grid",
             "aria-label": ariaLabelAttr || ariaLabel,
             "aria-rowcount": totalRows + 1,
-            "aria-colcount": ordered.length + (checkboxSelection ? 1 : 0),
+            "aria-colcount": ordered.length + (checkboxSelection ? 1 : 0) + (hasRowDetail ? 1 : 0),
             "aria-multiselectable": selectionMode === "cell" || void 0,
             "aria-activedescendant": activeCellId,
             "aria-busy": loading || void 0,
             onKeyDown: onGridKeyDown,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
-                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W, minWidth: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                hasRowDetail ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th twc-dt__expand-cell", role: "columnheader", "aria-label": "Expand", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W, minWidth: EXP_W } }) : null,
+                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: EXP_W, width: CHK_W, minWidth: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     className: "twc-dt__check",
@@ -12114,7 +12152,8 @@ function Datatable({
                 })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
-                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
+                hasRowDetail ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
+                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: EXP_W, width: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
                 showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
                 ordered.map((c, ci) => {
                   const st = stickyOf(c.field);
@@ -12136,7 +12175,8 @@ function Datatable({
                 pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
               ] }) }),
               hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", children: [
-                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W } }) : null,
+                hasRowDetail ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
+                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: EXP_W, width: CHK_W } }) : null,
                 showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W } }) : null,
                 ordered.map((c) => {
                   const st = stickyOf(c.field);
@@ -17171,6 +17211,18 @@ var SLIDER_CSS = `
   transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-spring);
 }
 .twc-slider__track[data-show-bubble="true"] .twc-slider__bubble { opacity: 1; transform: translateX(-50%) scale(1); }
+/* #351: editable numeric inputs (manual entry, synced with the thumbs) */
+.twc-slider__inputs { display: inline-flex; align-items: center; gap: var(--space-1-5); }
+.twc-slider__input-sep { color: var(--color-text-muted); font-weight: var(--font-semibold); }
+.twc-slider__input {
+  min-width: 0; text-align: end; font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold);
+  color: var(--_accent); font-variant-numeric: tabular-nums;
+  padding: 2px 6px; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
+  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
+}
+.twc-slider__input:hover:not(:disabled) { border-color: var(--color-border-strong); }
+.twc-slider__input:focus-visible { outline: none; border-color: var(--_accent); box-shadow: var(--ring); }
+.twc-slider[data-disabled="true"] .twc-slider__input { cursor: not-allowed; }
 `;
 function Slider({
   label,
@@ -17189,6 +17241,7 @@ function Slider({
   range: range2 = false,
   showValue = true,
   showTicks = false,
+  editable = false,
   formatValue,
   getAriaValueText,
   name,
@@ -17227,6 +17280,7 @@ function Slider({
   const indices = isRange ? [0, 1] : [0];
   const trackRef = React51__namespace.default.useRef(null);
   const [dragging, setDragging] = React51__namespace.default.useState(false);
+  const [typed, setTyped] = React51__namespace.default.useState({});
   const fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
   const valueTextFor = (v) => {
     if (getAriaValueText) return getAriaValueText(v);
@@ -17250,6 +17304,27 @@ function Slider({
     }
     commit(next);
   };
+  const commitInput = (i) => {
+    const s = typed[i];
+    setTyped((t) => {
+      const n = { ...t };
+      delete n[i];
+      return n;
+    });
+    if (s == null || String(s).trim() === "") return;
+    const num = parseFloat(s);
+    if (Number.isFinite(num)) setThumb(i, num);
+  };
+  const stepInput = (i, dir) => {
+    const base = typed[i] != null && Number.isFinite(parseFloat(typed[i])) ? parseFloat(typed[i]) : clampedVals[i];
+    setTyped((t) => {
+      const n = { ...t };
+      delete n[i];
+      return n;
+    });
+    setThumb(i, base + dir * step);
+  };
+  const inputSize = Math.max(String(min).length, String(max).length, decimals > 0 ? decimals + 2 : 1) + 1;
   const fromClientX = (clientX) => {
     const node = trackRef.current;
     if (!node) return clampedVals[0];
@@ -17305,9 +17380,40 @@ function Slider({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-slider ${className}`, "data-tone": tone, "data-size": size, "data-disabled": disabled || void 0, ...rest, children: [
     __twcStyles,
     name ? clampedVals.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: v, disabled: disabled || void 0 }, i)) : null,
-    label || showValue ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-slider__head", children: [
+    label || showValue || editable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-slider__head", children: [
       label ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "twc-slider__label", id: labelId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-      showValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__value", children: headValue }) : null
+      editable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__inputs", children: indices.map((i) => /* @__PURE__ */ jsxRuntime.jsxs(React51__namespace.default.Fragment, { children: [
+        i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__input-sep", "aria-hidden": "true", children: "\u2013" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            className: "twc-slider__input",
+            type: "text",
+            inputMode: min < 0 ? "text" : "decimal",
+            size: inputSize,
+            value: typed[i] != null ? typed[i] : String(clampedVals[i]),
+            disabled: disabled || void 0,
+            "aria-labelledby": isRange ? void 0 : labelId,
+            "aria-label": isRange ? i === 0 ? "Minimum value" : "Maximum value" : labelId ? void 0 : "Value",
+            onChange: (e) => setTyped((t) => ({ ...t, [i]: e.target.value })),
+            onBlur: () => commitInput(i),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                if (typed[i] != null) {
+                  e.preventDefault();
+                  commitInput(i);
+                }
+              } else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                stepInput(i, 1);
+              } else if (e.key === "ArrowDown") {
+                e.preventDefault();
+                stepInput(i, -1);
+              }
+            }
+          }
+        )
+      ] }, i)) }) : showValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__value", children: headValue }) : null
     ] }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-slider__track", ref: trackRef, "data-show-bubble": dragging || void 0, onPointerDown, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-slider__rail" }),