@infinite-table/infinite-react 6.2.10 → 6.2.12

package/index.dev.mjs

@@ -73,7 +73,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-import * as React71 from "react";
+import * as React70 from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -82,6 +82,49 @@ var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
 import * as React2 from "react";
 import { useRef as useRef2 } from "react";
 
+// src/components/utils/buildSubscriptionCallback.tsx
+function buildSubscriptionCallback(withRaf = false) {
+  let lastCallValue = null;
+  let fns = [];
+  let rafId = null;
+  const updater = (items, callback) => {
+    const results = [];
+    if (withRaf) {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      requestAnimationFrame(() => {
+        lastCallValue = items;
+        rafId = null;
+        for (let i = 0, len = fns.length; i < len; i++) {
+          results.push(fns[i](items));
+        }
+        callback?.(results);
+      });
+    } else {
+      lastCallValue = items;
+      for (let i = 0, len = fns.length; i < len; i++) {
+        results.push(fns[i](items));
+      }
+      callback?.(results);
+    }
+  };
+  updater.get = () => lastCallValue;
+  updater.onChange = (fn) => {
+    fns.push(fn);
+    return () => {
+      fns = fns.filter((f) => f !== fn);
+    };
+  };
+  updater.destroy = () => {
+    updater(null);
+    fns.length = 0;
+  };
+  updater.getListenersCount = () => fns.length;
+  return updater;
+}
+
 // src/utils/DeepMap/once.ts
 function once(fn) {
   let called = false;
@@ -712,6 +755,7 @@ var COLORS = [
 ];
 var COLOR_SYMBOL = Symbol("color");
 var USED_COLORS_MAP = /* @__PURE__ */ new WeakMap();
+var GLOBAL_LOG_INTENT = buildSubscriptionCallback();
 function initUsedColors(colors = COLORS) {
   USED_COLORS_MAP.set(
     colors,
@@ -762,7 +806,7 @@ function isChannelTargeted(channel, permissionToken) {
   }
   return void 0;
 }
-function isLoggingEnabled(channel, permissions) {
+function isChannelEnabled(channel, permissions) {
   const cacheKey = `channel=${channel}_permissions=${permissions}`;
   if (enabledChannelsCache.has(cacheKey)) {
     return enabledChannelsCache.get(cacheKey);
@@ -823,20 +867,32 @@ function debugPackage(channelName) {
   function debugFactory(channelName2, parentChannel) {
     const channel = parentChannel ? `${parentChannel}${CHANNEL_SEPARATOR}${channelName2}` : channelName2;
     const channelParts = channel.split(CHANNEL_SEPARATOR);
-    if (loggers.has(channelParts)) {
-      return loggers.get(channelParts);
+    const foundLogger = loggers.get(channelParts);
+    if (foundLogger) {
+      return foundLogger;
     }
     const parentLogger = loggers.get(channelParts.slice(0, -1));
     const defaultLogFn = (parentLogger ? parentLogger.logFn : debug.logFn) ?? defaultLogger;
     let logFn = defaultLogFn;
     let enabled;
     let lastMessageTimestamp = 0;
-    const isEnabled = () => enabled ?? isLoggingEnabled(channel, storageKeyValue);
+    const isEnabled = () => enabled ?? isChannelEnabled(channel, storageKeyValue);
     const color = getNextColor(debug.colors);
-    const logger3 = Object.defineProperties(
+    const logger2 = Object.defineProperties(
       (...args) => {
-        if (isLoggingEnabled(channel, storageKeyValue)) {
-          const now = Date.now();
+        const intentListenersCount = GLOBAL_LOG_INTENT.getListenersCount();
+        let now;
+        if (intentListenersCount > 0) {
+          now = now ?? Date.now();
+          GLOBAL_LOG_INTENT({
+            color,
+            channel,
+            args,
+            timestamp: now
+          });
+        }
+        if (isEnabled()) {
+          now = now ?? Date.now();
           if (lastMessageTimestamp && logDiffs) {
             const diff = now - lastMessageTimestamp;
             logFn(`%c[${channel}]`, `color: ${color}`, `+${diff}ms:`);
@@ -894,7 +950,10 @@ function debugPackage(channelName) {
           }
         },
         enabled: {
-          get: () => isEnabled()
+          get: () => isEnabled(),
+          set: (value) => {
+            enabled = value;
+          }
         },
         logFn: {
           configurable: false,
@@ -910,8 +969,8 @@ function debugPackage(channelName) {
         }
       }
     );
-    loggers.set(channelParts, logger3);
-    return logger3;
+    loggers.set(channelParts, logger2);
+    return logger2;
   }
   return debugFactory(channelName);
 }
@@ -927,22 +986,45 @@ Object.defineProperty(debugPackage, "enable", {
 var debug = debugPackage;
 debug.colors = COLORS;
 debug.logFn = defaultLogger;
+var onLogIntentGlobal = (intentChannel, fn) => {
+  return GLOBAL_LOG_INTENT.onChange((options) => {
+    if (!options) {
+      return;
+    }
+    const { channel, args, color, timestamp } = options;
+    if (isChannelTargeted(channel, intentChannel)) {
+      fn({
+        channel,
+        color,
+        args,
+        timestamp
+      });
+    }
+  });
+};
+debug.onLogIntent = onLogIntentGlobal;
 debug.destroyAll = () => {
   initUsedColors();
   initUsedColors(debug.colors);
   loggers.clear();
   enabledChannelsCache.clear();
 };
+if (false) {
+  globalThis.debugPackage = debug;
+}
 
-// src/utils/debug.ts
-var debugTable = debug(`InfiniteTable`);
+// src/utils/debugLoggers.ts
 var dbg = (channelName) => {
-  const result = debugTable.extend(channelName);
+  const result = debug(
+    channelName ? `${channelName}:TYPE=debug` : "TYPE=debug"
+  );
   result.logFn = console.log.bind(console);
   return result;
 };
 var err = (channelName) => {
-  const result = debugTable.extend(`${channelName}:error`);
+  const result = debug(
+    channelName ? `${channelName}:TYPE=error` : "TYPE=error"
+  );
   result.logFn = console.error.bind(console);
   return result;
 };
@@ -1304,49 +1386,6 @@ function AvoidReactDiffFn(props) {
 }
 var AvoidReactDiff = React8.memo(AvoidReactDiffFn);
 
-// src/components/utils/buildSubscriptionCallback.tsx
-function buildSubscriptionCallback(withRaf = false) {
-  let lastCallValue = null;
-  let fns = [];
-  let rafId = null;
-  const updater = (items, callback) => {
-    const results = [];
-    if (withRaf) {
-      if (rafId != null) {
-        cancelAnimationFrame(rafId);
-        rafId = null;
-      }
-      requestAnimationFrame(() => {
-        lastCallValue = items;
-        rafId = null;
-        for (let i = 0, len = fns.length; i < len; i++) {
-          results.push(fns[i](items));
-        }
-        callback?.(results);
-      });
-    } else {
-      lastCallValue = items;
-      for (let i = 0, len = fns.length; i < len; i++) {
-        results.push(fns[i](items));
-      }
-      callback?.(results);
-    }
-  };
-  updater.get = () => lastCallValue;
-  updater.onChange = (fn) => {
-    fns.push(fn);
-    return () => {
-      fns = fns.filter((f) => f !== fn);
-    };
-  };
-  updater.destroy = () => {
-    updater(null);
-    fns.length = 0;
-  };
-  updater.getListenersCount = () => fns.length;
-  return updater;
-}
-
 // src/utils/selectParent.ts
 function selectParent(el, selector2) {
   let node = el;
@@ -1394,7 +1433,7 @@ var internalProps = {
 };
 
 // src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)", virtualScrollLeftOffset: "var(--_16hkbkct)", virtualScrollTopOffset: "var(--_16hkbkcu)" };
+var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)" };
 
 // src/components/InfiniteTable/vars.css.ts
 var CSS_LOADED_VALUE = "true";
@@ -1564,6 +1603,15 @@ function getGreatestCountVisibleInSize(availableSize, itemSizes) {
   return maxCount < 0 ? len : Math.min(maxCount, len);
 }
 
+// src/utils/debugChannel.ts
+var PREFIX = "DebugID=";
+function getDebugChannel(debugId, channel) {
+  if (channel && channel.startsWith(PREFIX)) {
+    return channel;
+  }
+  return channel ? `${PREFIX}${debugId}:${channel}` : `${PREFIX}${debugId}`;
+}
+
 // src/components/VirtualBrain/MatrixBrain.ts
 var DEFAULT_EXTEND_BY = {
   start: 0,
@@ -1593,7 +1641,7 @@ function defaultShouldUpdateRenderCount(options) {
 }
 var MatrixBrain = class extends Logger {
   constructor(name) {
-    const logName = `MatrixBrain${name ? `:${name}` : ""}`;
+    const logName = getDebugChannel(name, `${name}:MatrixBrain`);
     super(logName);
     this.scrolling = false;
     this.RENDER_COUNT_SAFETY_MARGIN_START = 1;
@@ -2383,7 +2431,7 @@ var MatrixBrain = class extends Logger {
         height: this.availableRenderHeight ?? this.availableHeight
       };
     };
-    this.name = name || "MatrixBrain";
+    this.name = logName;
     this.update = this.update.bind(this);
     this.destroy = this.destroy.bind(this);
     this.getCellOffset = this.getCellOffset.bind(this);
@@ -4985,9 +5033,9 @@ var HorizontalLayoutTableRenderer = class extends GridRenderer {
 
 // src/components/HeadlessTable/createRenderer.ts
 function createRenderer(brain) {
-  const renderer = !brain.isHorizontalLayoutBrain ? new GridRenderer(brain, `ReactHeadlessTableRenderer:${brain.name}`) : new HorizontalLayoutTableRenderer(
+  const renderer = !brain.isHorizontalLayoutBrain ? new GridRenderer(brain, `${brain.name}:ReactHeadlessTableRenderer`) : new HorizontalLayoutTableRenderer(
     brain,
-    `HorizontalLayoutTableRenderer:${brain.name}`
+    `${brain.name}:HorizontalLayoutTableRenderer`
   );
   const onRenderUpdater = buildSubscriptionCallback();
   brain.onDestroy(() => {
@@ -5348,8 +5396,6 @@ var CELL_DETACHED_CLASSNAMES = [
 ];
 
 // src/components/HeadlessTable/index.tsx
-var virtualScrollLeftOffset = stripVar(InternalVars.virtualScrollLeftOffset);
-var virtualScrollTopOffset = stripVar(InternalVars.virtualScrollTopOffset);
 function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
   if (fixedCellsInfo && (fixedCellsInfo.fixedColsStart || fixedCellsInfo.fixedColsEnd || fixedCellsInfo.fixedRowsStart || fixedCellsInfo.fixedRowsEnd)) {
     brain.updateFixedCells({
@@ -5423,25 +5469,14 @@ function HeadlessTable(props) {
   }, [wrapRowsHorizontally, brain]);
   const updateDOMTransform = useCallback4((scrollPos) => {
     requestAnimationFrame(() => {
-      const scrollVarHost = scrollVarHostRef?.current;
-      if (!scrollVarHost) {
-        if (!domRef.current) {
-          return;
-        }
-        domRef.current.style.setProperty(
-          "transform",
-          `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
-        );
+      if (!domRef.current) {
         return;
       }
-      scrollVarHost.style.setProperty(
-        virtualScrollLeftOffset,
-        `-${scrollPos.scrollLeft}px`
-      );
-      scrollVarHost.style.setProperty(
-        virtualScrollTopOffset,
-        `-${scrollPos.scrollTop}px`
+      domRef.current.style.setProperty(
+        "transform",
+        `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
       );
+      return;
     });
   }, []);
   const onContainerScroll = useCallback4(
@@ -5867,8 +5902,10 @@ function buildManagedComponent(config) {
         }
       });
       if (updatedPropsToStateCount > 0 || newMappedStateCount > 0) {
-        const logger3 = config.debugName ? dbg(`${config.debugName}:rerender`) : dbg("rerender");
-        logger3(
+        const logger2 = config.debugName ? dbg(
+          typeof config.debugName === "function" ? `${config.debugName(currentProps)}:rerender` : `${config.debugName}:rerender`
+        ) : dbg("rerender");
+        logger2(
           "Triggered by new values for the following props",
           ...[
             ...Object.keys(newMappedState ?? {}),
@@ -9667,6 +9704,8 @@ function InfiniteTableColumnCellFn(props) {
     column,
     onMouseLeave,
     onMouseEnter,
+    onRowMouseEnter,
+    onRowMouseLeave,
     // toggleGroupRow,
     rowIndex,
     rowHeight,
@@ -9738,6 +9777,24 @@ function InfiniteTableColumnCellFn(props) {
   const { align: align2, verticalAlign } = renderParams;
   const renderParam = renderParams;
   const renderParamRef = React37.useRef(renderParam);
+  const handleMouseEnter = onRowMouseEnter && onMouseEnter ? (event) => {
+    const rowInfoDiscriminator = formattedValueContext;
+    const rowContext = {
+      ...rowInfoDiscriminator,
+      rowIndex
+    };
+    onRowMouseEnter(rowContext, event);
+    onMouseEnter(event);
+  } : onMouseEnter;
+  const handleMouseLeave = onRowMouseLeave && onMouseLeave ? (event) => {
+    const rowContext = {
+      ...formattedValueContext,
+      rowIndex,
+      rowInfo
+    };
+    onRowMouseLeave(rowContext, event);
+    onMouseLeave(event);
+  } : onMouseLeave;
   const onClick = useCallback12(
     (event) => {
       const colIndex = column.computedVisibleIndex;
@@ -10091,8 +10148,8 @@ function InfiniteTableColumnCellFn(props) {
     rowId: rowInfo.id,
     horizontalLayoutPageIndex,
     style: memoizedStyle,
-    onMouseLeave,
-    onMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter,
     onClick,
     afterChildren,
     onMouseDown,
@@ -11228,7 +11285,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import * as React47 from "react";
-import { useCallback as useCallback16, useRef as useRef18 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef18 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import * as React46 from "react";
@@ -11492,6 +11549,18 @@ function InfiniteTableHeaderFn(props) {
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
   const domRef = useRef18(null);
+  const updateDOMTransform = useCallback16((scrollPosition) => {
+    if (domRef.current) {
+      domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
+    }
+  }, []);
+  useEffect16(() => {
+    const removeOnScroll = headerBrain.onScroll(updateDOMTransform);
+    updateDOMTransform(
+      headerBrain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
+    );
+    return removeOnScroll;
+  }, [headerBrain]);
   const domProps = {
     ref: domRef,
     className: join(
@@ -11722,7 +11791,7 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import * as React49 from "react";
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -11779,7 +11848,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
         ref.current = node;
       }
     }, []);
-    useEffect16(() => {
+    useEffect17(() => {
       const forceStyle = () => {
         setTimeout(() => {
           enforceStyle(domRef.current, defaultStyle);
@@ -13784,7 +13853,6 @@ var RowSelectionState = class {
 };
 
 // src/components/DataSource/CellSelectionState.ts
-var debug3 = dbg("CellSelectionState");
 var WILDCARD = "*";
 var CellSelectionState = class {
   constructor(clone) {
@@ -13795,6 +13863,7 @@ var CellSelectionState = class {
     this.deselectedRowsToColumns = /* @__PURE__ */ new Map();
     this.deselectedColumnsToRows = /* @__PURE__ */ new Map();
     this.defaultSelection = false;
+    this.debugId = "";
     this.deselectAll = () => {
       this.update({
         defaultSelection: false,
@@ -14040,12 +14109,17 @@ var CellSelectionState = class {
     }
     return false;
   }
+  // private debug(message: string) {
+  //   const debug = dbg(`${this.debugId}:CellSelectionState`);
+  //   debug(message);
+  // }
+  error(message) {
+    const error4 = err(`${this.debugId}:CellSelectionState`);
+    error4(message);
+  }
   isCellSelected(rowId, colId) {
     if (rowId === this.wildcard || colId === this.wildcard) {
-      console.error(
-        `CellSelectionState.isCellSelected should not be called with wildcard`
-      );
-      debug3(
+      this.error(
         `CellSelectionState.isCellSelected should not be called with wildcard`
       );
       return false;
@@ -14128,6 +14202,7 @@ var CellSelectionState = class {
 
 // src/utils/logger.ts
 var log = debug("InfiniteTable");
+var COLOR_ERROR_VALUE = `#dc3545`;
 var COLOR_WARN_VALUE = `#eb9316`;
 var warnChannel = "Warn";
 var errorChannel = "Error";
@@ -14140,9 +14215,18 @@ var warnLogger = logger.extend(warnChannel);
 var errorLogger = logger.extend(errorChannel);
 var successLogger = logger.extend(successChannel);
 var logColorWarn = COLOR_WARN_VALUE;
-var warn = (message, logger3) => {
-  logger3 = logger3 ? logger3.extend(warnChannel) : warnLogger;
-  logger3(log.color(logColorWarn, message));
+var logColorError = COLOR_ERROR_VALUE;
+var warn = (message, logger2) => {
+  logger2 = logger2 ? logger2.extend ? logger2.extend(warnChannel) : logger2 : warnLogger;
+  logger2(
+    typeof logger2.color === "function" ? logger2.color(logColorWarn, message) : message
+  );
+};
+var error2 = (message, logger2) => {
+  logger2 = logger2 ? logger2.extend ? logger2.extend(errorChannel) : logger2 : errorLogger;
+  logger2(
+    typeof logger2.color === "function" ? logger2.color(logColorError, message) : message
+  );
 };
 var doOnceFlags = new DeepMap();
 var doOnce = (func, ...keys) => {
@@ -14152,8 +14236,11 @@ var doOnce = (func, ...keys) => {
   doOnceFlags.set(keys, true);
   func();
 };
-var warnOnce = (message, key = message, logger3) => {
-  doOnce(() => warn(message, logger3), key, "warn");
+var warnOnce = (message, key = message, logger2) => {
+  doOnce(() => warn(message, logger2), key, "warn");
+};
+var errorOnce = (message, key = message, logger2) => {
+  doOnce(() => error2(message, logger2), key, "error");
 };
 
 // src/components/InfiniteTable/api/getRowSelectionApi.ts
@@ -14610,10 +14697,10 @@ var Indexer = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect18, useMemo as useMemo7, useRef as useRef21, useState as useState13 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo7, useRef as useRef21, useState as useState13 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect17, useRef as useRef20 } from "react";
+import { useEffect as useEffect18, useRef as useRef20 } from "react";
 function useEffectWithChanges(fn, deps) {
   const prevRef = useRef20({});
   const oldValuesRef = useRef20({});
@@ -14631,7 +14718,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect17(() => {
+  useEffect18(() => {
     const changes2 = changesRef.current;
     let result = void 0;
     if (Object.keys(changes2).length !== 0) {
@@ -14649,7 +14736,7 @@ function useEffectWithObject(fn, deps) {
       useEffectDeps.push(deps[k]);
     }
   }
-  useEffect17(fn, useEffectDeps);
+  useEffect18(fn, useEffectDeps);
 }
 
 // src/utils/composeFunctions.ts
@@ -16057,12 +16144,12 @@ var DataSourceApiImpl = class {
         }
         return this.waitForNodePath(nodePath, { timeout }).then((okay) => {
           if (!okay) {
-            const error2 = `Cannot find node path "${nodePath.join(
+            const error4 = `Cannot find node path "${nodePath.join(
               "/"
             )}" (we waited for it ${timeout}ms)`;
-            console.error(error2);
+            console.error(error4);
             return fn({
-              error: error2,
+              error: error4,
               resolved: false
             });
           }
@@ -16079,8 +16166,8 @@ var DataSourceApiImpl = class {
     this.updateChildrenByNodePath = (childrenOrFn, nodePath, options) => {
       return this.withWaitForNode(
         nodePath,
-        ({ error: error2 }) => {
-          if (error2) {
+        ({ error: error4 }) => {
+          if (error4) {
             return false;
           }
           return this.updateChildrenByNodePath_Internal(
@@ -16108,8 +16195,8 @@ var DataSourceApiImpl = class {
       if (!this.isNodePathAvailable(nodePath)) {
         return this.withWaitForNode(
           nodePath,
-          ({ error: error2 }) => {
-            if (error2) {
+          ({ error: error4 }) => {
+            if (error4) {
               return false;
             }
             return this.updateDataArrayByNodePath_Internal(
@@ -16142,7 +16229,7 @@ var DataSourceApiImpl = class {
       const allNodePaths = updateInfo.map((info) => info.nodePath);
       const promiseWithAll = Promise.allSettled(
         allNodePaths.map((nodePath) => {
-          return this.withWaitForNode(nodePath, ({ error: error2 }) => !error2, options);
+          return this.withWaitForNode(nodePath, ({ error: error4 }) => !error4, options);
         })
       );
       return promiseWithAll.then((allGood) => {
@@ -16261,8 +16348,8 @@ var DataSourceApiImpl = class {
       if (isTree && nodePath?.length) {
         return this.withWaitForNode(
           nodePath,
-          ({ error: error2 }) => {
-            if (error2) {
+          ({ error: error4 }) => {
+            if (error4) {
               return false;
             }
             if (options.position === "before" || options.position === "after") {
@@ -16325,8 +16412,8 @@ var DataSourceApiImpl = class {
       if (nodePath.length && !this.isNodePathAvailable(nodePath)) {
         return this.withWaitForNode(
           nodePath,
-          ({ error: error2 }) => {
-            if (error2) {
+          ({ error: error4 }) => {
+            if (error4) {
               return false;
             }
             const result2 = this.batchOperation({
@@ -16365,6 +16452,9 @@ var DataSourceApiImpl = class {
       this.actions.sortInfo = sortInfo;
       return;
     };
+    this.setGroupBy = (groupBy) => {
+      this.actions.groupBy = groupBy;
+    };
     this.isRowDisabledAt = (rowIndex) => {
       const rowInfo = this.getRowInfoByIndex(rowIndex);
       return rowInfo?.rowDisabled ?? false;
@@ -17111,20 +17201,31 @@ function concludeReducer(params) {
   }
   if (shouldFilterClientSide) {
     state.unfilteredCount = dataArray.length;
-    dataArray = shouldFilterAgain ? filterDataSource({
-      // tree-related stuff
-      getNodeChildren,
-      isLeafNode,
-      nodesKey,
-      treeFilterFunction,
-      // ---
-      dataArray,
-      toPrimaryKey,
-      filterTypes,
-      operatorsByFilterType,
-      filterFunction,
-      filterValue
-    }) : state.lastFilterDataArray;
+    let filterTimestamp = now;
+    if (shouldFilterAgain) {
+      if (state.devToolsDetected) {
+        filterTimestamp = Date.now();
+      }
+      dataArray = filterDataSource({
+        // tree-related stuff
+        getNodeChildren,
+        isLeafNode,
+        nodesKey,
+        treeFilterFunction,
+        // ---
+        dataArray,
+        toPrimaryKey,
+        filterTypes,
+        operatorsByFilterType,
+        filterFunction,
+        filterValue
+      });
+      if (state.devToolsDetected) {
+        state.debugTimings.set("filter", Date.now() - filterTimestamp);
+      }
+    } else {
+      dataArray = state.lastFilterDataArray;
+    }
     state.lastFilterDataArray = dataArray;
     state.filteredAt = now;
   }
@@ -17134,6 +17235,10 @@ function concludeReducer(params) {
     const prevKnownTypes = multisort.knownTypes;
     multisort.knownTypes = { ...prevKnownTypes, ...state.sortTypes };
     if (shouldSortAgain) {
+      let sortTimestamp = now;
+      if (state.devToolsDetected) {
+        sortTimestamp = Date.now();
+      }
       if (state.sortFunction) {
         dataArray = state.sortFunction(sortInfo, [...dataArray]);
       } else {
@@ -17149,6 +17254,10 @@ function concludeReducer(params) {
           dataArray = multisort(sortInfo, [...dataArray]);
         }
       }
+      if (state.devToolsDetected) {
+        const sortDuration = Date.now() - sortTimestamp;
+        state.debugTimings.set("sort", sortDuration);
+      }
     } else {
       dataArray = state.lastSortDataArray;
     }
@@ -17195,6 +17304,10 @@ function concludeReducer(params) {
   const rowInfoReducers = state.rowInfoReducers;
   if (shouldGroup) {
     if (shouldGroupAgain) {
+      let groupTimestamp = now;
+      if (state.devToolsDetected) {
+        groupTimestamp = Date.now();
+      }
       let aggregationReducers = state.aggregationReducers;
       const groupResult = state.lazyLoad ? lazyGroup(
         {
@@ -17277,6 +17390,9 @@ function concludeReducer(params) {
       }) : void 0;
       state.pivotColumns = pivotGroupsAndCols?.columns;
       state.pivotColumnGroups = pivotGroupsAndCols?.columnGroups;
+      if (state.devToolsDetected) {
+        state.debugTimings.set("group-and-pivot", Date.now() - groupTimestamp);
+      }
     } else {
       rowInfoDataArray = state.lastGroupDataArray;
     }
@@ -17284,6 +17400,10 @@ function concludeReducer(params) {
     state.groupedAt = now;
   } else if (shouldTree) {
     if (shouldTreeAgain) {
+      let treeTimestamp = now;
+      if (state.devToolsDetected) {
+        treeTimestamp = Date.now();
+      }
       let aggregationReducers = state.aggregationReducers;
       const treeParams = {
         isLeafNode,
@@ -17353,6 +17473,9 @@ function concludeReducer(params) {
       state.reducerResults = treeResult.reducerResults;
       state.totalLeafNodesCount = treeResult.deepMap.get([])?.totalLeafNodesCount ?? 0;
       state.treeAt = now;
+      if (state.devToolsDetected) {
+        state.debugTimings.set("tree", Date.now() - treeTimestamp);
+      }
     } else {
       rowInfoDataArray = state.lastTreeDataArray;
     }
@@ -17450,6 +17573,155 @@ function getChangeDetect() {
   return `${Date.now()}:${perfNow}`;
 }
 
+// src/components/InfiniteTable/errorCodes.ts
+function buildErrorPayload(code, message, type) {
+  message = message.replaceAll("$ERR_CODE", code);
+  message = `${message}
+
+ERROR_CODE = ${code}
+
+See http://infinite-table.com/docs/reference/error-codes#${code} for more info.`;
+  return {
+    code,
+    message,
+    type: type ?? "error"
+  };
+}
+function buildErrors(errors) {
+  return Object.entries(errors).reduce((acc, [key, message]) => {
+    const code = key;
+    const payload = buildErrorPayload(
+      code,
+      typeof message === "string" ? message : message.message,
+      typeof message === "string" ? void 0 : message.type
+    );
+    acc[code] = payload;
+    return acc;
+  }, {});
+}
+function warn2(strings) {
+  return {
+    message: strings.join(""),
+    type: "warning"
+  };
+}
+function error3(strings) {
+  return {
+    message: strings.join(""),
+    type: "error"
+  };
+}
+var DS_ERROR_CODES = buildErrors({
+  DS001: warn2`The "data" prop of your DataSource seems to be updating too frequently.
+Make sure you don't pass a new reference on every render.`
+});
+var INFINITE_ERROR_CODES = buildErrors({
+  CSS001_CSS: error3`It appears you have not loaded the CSS file for InfiniteTable.
+In most environments, you should be able to fix this by adding the following line:
+  
+import '@infinite-table/infinite-react/index.css'
+  `
+});
+var ERROR_CODES = {
+  ...DS_ERROR_CODES,
+  ...INFINITE_ERROR_CODES
+};
+
+// src/DEV_TOOLS_OVERRIDES.ts
+var DEV_TOOLS_INFINITE_OVERRIDES = /* @__PURE__ */ new Map();
+var DEV_TOOLS_DATASOURCE_OVERRIDES = /* @__PURE__ */ new Map();
+var DEV_TOOLS_INFINITE_INITIALS = /* @__PURE__ */ new Map();
+var DEV_TOOLS_DATASOURCE_INITIALS = /* @__PURE__ */ new Map();
+
+// src/utils/debugModeUtils.ts
+var INSTANCES = /* @__PURE__ */ new Map();
+var deleteInstanceFromDevTools = (debugId) => {
+  INSTANCES.delete(debugId);
+  DEV_TOOLS_INFINITE_INITIALS.delete(debugId);
+  DEV_TOOLS_INFINITE_OVERRIDES.delete(debugId);
+  DEV_TOOLS_DATASOURCE_INITIALS.delete(debugId);
+  DEV_TOOLS_DATASOURCE_OVERRIDES.delete(debugId);
+};
+function setDevToolInfinitePropertyOverride(debugId, property, value) {
+  const instance = INSTANCES.get(debugId);
+  if (!instance) {
+    return;
+  }
+  const initial = DEV_TOOLS_INFINITE_INITIALS.get(debugId);
+  if (!initial || !Object.hasOwn(initial, property)) {
+    DEV_TOOLS_INFINITE_INITIALS.set(debugId, {
+      ...initial || {},
+      [property]: instance.getState()[property]
+    });
+  }
+  DEV_TOOLS_INFINITE_OVERRIDES.set(debugId, {
+    ...DEV_TOOLS_INFINITE_OVERRIDES.get(debugId) || {},
+    [property]: value
+  });
+  instance.actions[property] = value;
+}
+function setDevToolDataSourcePropertyOverride(debugId, property, value) {
+  const instance = INSTANCES.get(debugId);
+  if (!instance) {
+    return;
+  }
+  const initial = DEV_TOOLS_DATASOURCE_INITIALS.get(debugId);
+  if (!initial || !Object.hasOwn(initial, property)) {
+    DEV_TOOLS_DATASOURCE_INITIALS.set(debugId, {
+      ...initial || {},
+      [property]: instance.getDataSourceState()[property]
+    });
+  }
+  DEV_TOOLS_DATASOURCE_OVERRIDES.set(debugId, {
+    ...DEV_TOOLS_DATASOURCE_OVERRIDES.get(debugId) || {},
+    [property]: value
+  });
+  instance.dataSourceActions[property] = value;
+}
+var warnKnownErrorOnce = (error4) => {
+  const logger2 = error4.type === "error" ? err(error4.debugId) : dbg(error4.debugId);
+  const onceLogger = error4.type === "error" ? errorOnce : warnOnce;
+  const onceKey = error4.debugId ? `${error4.code}-${error4.debugId}` : error4.code;
+  let message = error4.message;
+  if (error4.debugId) {
+    message = `${message}
+
+Component DEBUG_ID = "${error4.debugId}"`;
+  }
+  onceLogger(message, onceKey, logger2);
+};
+var logDevToolsWarning = (options) => {
+  const { debugId, key } = options;
+  const knownError = ERROR_CODES[key];
+  if (!knownError) {
+    return;
+  }
+  warnKnownErrorOnce({ ...knownError, debugId });
+  if (debugId && key) {
+    const instance = INSTANCES.get(debugId);
+    if (instance && instance.getState().devToolsDetected && knownError) {
+      instance.getState().debugWarnings.set(key, {
+        ...knownError,
+        debugId,
+        status: "new"
+      });
+      updateDevToolsForInstance(debugId);
+    }
+  }
+};
+globalThis.logDevToolsWarning = logDevToolsWarning;
+var updateDevToolsForInstance = (debugId) => {
+  const hookFn = window.__INFINITE_TABLE_DEVTOOLS_HOOK__;
+  if (!hookFn) {
+    return;
+  }
+  const instance = INSTANCES.get(debugId);
+  if (!instance) {
+    return;
+  }
+  hookFn(debugId, instance);
+};
+
 // src/components/DataSource/privateHooks/useLoadData.ts
 var CACHE_DEFAULT = true;
 var getRafPromise = () => new Promise((resolve) => {
@@ -17607,7 +17879,7 @@ function loadData(data, componentState, actions, overrides, masterContext) {
           const theKey = [LAZY_ROOT_KEY_FOR_GROUPS, ...keys];
           const dataArray2 = remoteData2.data;
           const newGroupRowInfo = {
-            cache: !!remoteData2.cache,
+            cache: remoteData2.cache ?? CACHE_DEFAULT,
             childrenLoading: false,
             childrenAvailable: true,
             totalCount: remoteData2.totalCount ?? dataArray2.length,
@@ -17748,7 +18020,7 @@ function useLoadData(options) {
     horizontal: false
   });
   const scrollbarsRef = useRef21(scrollbars);
-  useEffect18(() => {
+  useEffect19(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -17758,7 +18030,7 @@ function useLoadData(options) {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!livePagination) {
       return;
     }
@@ -17771,7 +18043,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -17784,7 +18056,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect18(() => {
+  useEffect19(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -17840,11 +18112,10 @@ function useLoadData(options) {
       timestamps.push(now);
       const timeDiff = now - timestamps[0];
       if (timeDiff < 200 && timestamps.length >= 10) {
-        console.warn(
-          `The "data" prop of your DataSource seems to be updating too frequently.
-Make sure you don't pass a new reference on every render. ERROR_CODE = DS001
-See http://infinite-table.com/docs/reference/error-codes#DS001 for more info.`
-        );
+        logDevToolsWarning({
+          debugId: componentState2.debugId,
+          key: "DS001"
+        });
       }
       if (typeof componentState2.data !== "function") {
         loadData(
@@ -17915,7 +18186,7 @@ function useLazyLoadRange(options, dependencies) {
     componentActions: actions,
     componentState
   } = options;
-  useEffect18(() => {
+  useEffect19(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -17996,7 +18267,7 @@ function useLazyLoadRange(options, dependencies) {
       groupRowsState
     }
   );
-  useEffect18(() => {
+  useEffect19(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -18113,7 +18384,6 @@ var normalizeSortInfo = (initialSortInfo, weakMap3) => {
 };
 
 // src/components/DataSource/state/getInitialState.ts
-var DataSourceLogger = dbg("DataSource");
 var defaultCursorId = Symbol("cursorId");
 var isNodeReadOnly = (rowInfo) => {
   return rowInfo.totalLeafNodesCount === 0;
@@ -18121,12 +18391,17 @@ var isNodeReadOnly = (rowInfo) => {
 var isNodeSelectable = (rowInfo) => {
   return rowInfo.isParentNode ? !isNodeReadOnly(rowInfo) : true;
 };
-function initSetupState() {
+function initSetupState(props) {
   const now = Date.now();
   const originalDataArray = [];
   const dataArray = [];
   const originalLazyGroupData = new DeepMap();
+  const DataSourceLogger = dbg(`${props.debugId}:DataSource`);
   return {
+    logger: DataSourceLogger,
+    debugTimings: /* @__PURE__ */ new Map(),
+    debugWarnings: /* @__PURE__ */ new Map(),
+    devToolsDetected: !!globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__,
     // TODO cleanup indexer on unmount
     indexer: new Indexer(),
     totalLeafNodesCount: 0,
@@ -18197,7 +18472,8 @@ function initSetupState() {
     postSortDataArray: void 0,
     postGroupDataArray: void 0,
     lastSortDataArray: void 0,
-    lastGroupDataArray: void 0
+    lastGroupDataArray: void 0,
+    forceRerenderTimestamp: 0
   };
 }
 function getCompareObjectForDataParams(dataParams) {
@@ -18233,13 +18509,11 @@ var forwardProps3 = (setupState, props) => {
     isNodeReadOnly: (isReadOnly) => isReadOnly ?? isNodeReadOnly,
     isNodeSelectable: (isSelectable) => isSelectable ?? isNodeSelectable,
     data: 1,
-    debugId: 1,
     nodesKey: 1,
     isNodeExpanded: 1,
     isNodeCollapsed: 1,
     pivotBy: 1,
     primaryKey: 1,
-    debugMode: 1,
     livePagination: 1,
     treeSelection: 1,
     refetchKey: (refetchKey) => refetchKey ?? "",
@@ -18262,7 +18536,7 @@ var forwardProps3 = (setupState, props) => {
           state.idToIndexMap.clear();
         },
         reducer: (_, rowInfo) => {
-          if (props.debugMode && !props.nodesKey && state.idToIndexMap.has(rowInfo.id)) {
+          if (props.debugId && !props.nodesKey && state.idToIndexMap.has(rowInfo.id)) {
             console.warn(`Duplicate id found in data source: ${rowInfo.id}`);
           }
           state.idToIndexMap.set(rowInfo.id, rowInfo.indexInAll);
@@ -18283,7 +18557,7 @@ var forwardProps3 = (setupState, props) => {
           reducer: (_, rowInfo) => {
             if (rowInfo.isTreeNode) {
               state.idToPathMap.set(rowInfo.id, rowInfo.nodePath);
-              if (props.debugMode && state.pathToIndexMap.has(rowInfo.nodePath)) {
+              if (props.debugId && state.pathToIndexMap.has(rowInfo.nodePath)) {
                 console.warn(
                   `Duplicate node path found in data source (debugId: ${props.debugId || "none"}): ${rowInfo.nodePath}`
                 );
@@ -18513,21 +18787,21 @@ function deriveStateFromProps(params) {
     warnOnce(
       `"groupMode" prop is deprecated for the <DataSource />, use "shouldReloadData.groupBy: true|false" instead`,
       "groupMode deprecated",
-      DataSourceLogger
+      state.logger
     );
   }
   if (props.sortMode) {
     warnOnce(
       `"sortMode" prop is deprecated for the <DataSource />, use "shouldReloadData.sortInfo: true|false" instead`,
       "sortMode deprecated",
-      DataSourceLogger
+      state.logger
     );
   }
   if (props.filterMode) {
     warnOnce(
       `"filterMode" prop is deprecated for the <DataSource />, use "shouldReloadData.filterValue: true|false" instead`,
       "filterMode deprecated",
-      DataSourceLogger
+      state.logger
     );
   }
   const groupMode = typeof props.data === "function" ? propsGroupMode ?? "local" : "local";
@@ -18547,7 +18821,8 @@ function deriveStateFromProps(params) {
       weakMap.set(rowDisabledState, isRowDisabled);
     }
   }
-  const result = {
+  let result = {
+    debugId: state.debugId ?? props.debugId,
     isTree,
     selectionMode,
     groupRowsState,
@@ -18587,6 +18862,17 @@ function deriveStateFromProps(params) {
     const livePaginationCursor = typeof props.livePaginationCursor === "function" ? dataArrayChanged ? getLivePaginationCursorValue(props.livePaginationCursor, state) : state.livePaginationCursor : props.livePaginationCursor;
     result.livePaginationCursor = livePaginationCursor;
   }
+  if (state.devToolsDetected && state.debugId) {
+    const devToolsDataSourceOverrides = DEV_TOOLS_DATASOURCE_OVERRIDES.get(
+      state.debugId
+    );
+    if (devToolsDataSourceOverrides) {
+      result = {
+        ...result,
+        ...devToolsDataSourceOverrides
+      };
+    }
+  }
   return result;
 }
 var debugFullLazyLoad = dbg("DataSource:fullLazyLoad");
@@ -18604,7 +18890,6 @@ function onPropChange(params, props, actions) {
     }
   }
 }
-var debugDataParams = dbg("DataSource:dataParams");
 function getMappedCallbacks() {
   return {
     rowSelection: (rowSelection, state) => {
@@ -18780,6 +19065,9 @@ function getInterceptActions() {
       )) {
         return false;
       }
+      const debugDataParams = dbg(
+        getDebugChannel(state.debugId, "DataSource:dataParams")
+      );
       debugDataParams(
         "onDataParamsChange triggered because the following values have changed",
         dataParams?.changes
@@ -18803,7 +19091,7 @@ function getDataSourceStateRestoreForDetails(state) {
 // src/components/DataSource/privateHooks/useDataSource.tsx
 import React51, {
   useCallback as useCallback19,
-  useEffect as useEffect19,
+  useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect10,
   useState as useState14
 } from "react";
@@ -18875,7 +19163,7 @@ function useDataSourceInternal(props) {
     componentActions,
     getComponentState: getState
   });
-  useEffect19(() => {
+  useEffect20(() => {
     componentState.onDataArrayChange?.(
       componentState.originalDataArray,
       componentState.originalDataArrayChangedInfo
@@ -18897,7 +19185,7 @@ function useDataSourceInternal(props) {
       });
     }
   }, [componentState.originalDataArrayChangedInfo]);
-  useEffect19(() => {
+  useEffect20(() => {
     componentState.onReady?.(api);
   }, []);
   return {
@@ -19266,6 +19554,7 @@ var InfiniteTableCellSelectionApiImpl = class {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       const [startRowId, startColId] = this.getCellSelectionPosition(startOptions);
       const [endRowId, endColId] = this.getCellSelectionPosition(endOptions);
       const startCol = this.getComputed().computedVisibleColumnsMap.get(startColId);
@@ -19357,6 +19646,7 @@ var InfiniteTableCellSelectionApiImpl = class {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.deselectAll();
       this.dataSourceActions.cellSelection = newCellSelection;
     };
@@ -19370,6 +19660,7 @@ var InfiniteTableCellSelectionApiImpl = class {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.selectAll();
       this.dataSourceActions.cellSelection = newCellSelection;
     };
@@ -19384,22 +19675,26 @@ var InfiniteTableCellSelectionApiImpl = class {
       return this.getDataSourceState().cellSelection?.isCellSelected(pk, colId) ?? false;
     };
     this.selectCell = (options) => {
-      const cellSelection = this.getDataSourceState().cellSelection;
+      const dataSourceState = this.getDataSourceState();
+      const cellSelection = dataSourceState.cellSelection;
       if (!cellSelection) {
         return;
       }
       const [pk, colId] = this.getCellSelectionPosition(options);
       const newCellSelection = options.clear ? new CellSelectionState() : new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.selectCell(pk, colId);
       this.dataSourceActions.cellSelection = newCellSelection;
     };
     this.deselectCell = (options) => {
-      const cellSelection = this.getDataSourceState().cellSelection;
+      const dataSourceState = this.getDataSourceState();
+      const cellSelection = dataSourceState.cellSelection;
       if (!cellSelection) {
         return;
       }
       const [pk, colId] = this.getCellSelectionPosition(options);
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.deselectCell(pk, colId);
       this.dataSourceActions.cellSelection = newCellSelection;
     };
@@ -19407,20 +19702,24 @@ var InfiniteTableCellSelectionApiImpl = class {
       if (options?.clear) {
         this.deselectAll();
       }
-      const cellSelection = this.getDataSourceState().cellSelection;
+      const dataSourceState = this.getDataSourceState();
+      const cellSelection = dataSourceState.cellSelection;
       if (!cellSelection) {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.selectColumn(colId);
       this.dataSourceActions.cellSelection = newCellSelection;
     };
     this.deselectColumn = (colId) => {
-      const cellSelection = this.getDataSourceState().cellSelection;
+      const dataSourceState = this.getDataSourceState();
+      const cellSelection = dataSourceState.cellSelection;
       if (!cellSelection) {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.deselectColumn(colId);
       this.dataSourceActions.cellSelection = newCellSelection;
     };
@@ -19918,6 +20217,9 @@ var InfiniteTableApiImpl = class {
     this.hideFilterOperatorMenu = () => {
       this.actions.filterOperatorMenuVisibleForColumnId = null;
     };
+    this.setGroupRenderStrategy = (groupRenderStrategy) => {
+      this.actions.groupRenderStrategy = groupRenderStrategy;
+    };
     this.getColumnOrder = () => {
       return this.getComputed().computedColumnOrder;
     };
@@ -20832,7 +21134,7 @@ function getImperativeApi(context) {
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useRef as useRef22,
   useState as useState15
 } from "react";
@@ -20910,7 +21212,7 @@ function useAutoSizeColumns() {
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
   const lastExecutedIdentifierRef = useRef22(null);
-  useEffect20(() => {
+  useEffect21(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -20923,7 +21225,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (theKey == null) {
       return;
     }
@@ -20969,7 +21271,7 @@ function useAutoSizeColumns() {
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 import { useMemo as useMemo9 } from "react";
-import { useCallback as useCallback20, useEffect as useEffect21, useRef as useRef24 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect22, useRef as useRef24 } from "react";
 import * as React54 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -21193,6 +21495,8 @@ function useCellRendering(param) {
   const {
     rowHeight,
     rowDetailHeight,
+    onRowMouseEnter,
+    onRowMouseLeave,
     groupRenderStrategy,
     brain,
     showZebraRows,
@@ -21224,17 +21528,17 @@ function useCellRendering(param) {
     rowspan
   });
   const scrollTopMaxRef = useRef24(0);
-  useEffect21(() => {
+  useEffect22(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect21(() => {
+  useEffect22(() => {
     return brain.onRenderRangeChange((range) => {
       getState().onRenderRangeChange?.(range);
     });
   }, [brain]);
-  useEffect21(() => {
+  useEffect22(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop: scrollTop2, scrollLeft: scrollLeft2 } = scrollPosition;
       if (scrollTop2 === 0) {
@@ -21274,13 +21578,13 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom, onScrollStop]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!bodySize.height) {
       return;
     }
     actions.ready = true;
   }, [!!bodySize.height]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!ready) {
     }
     const { onReady } = getState();
@@ -21289,7 +21593,7 @@ function useCellRendering(param) {
     }
   }, [ready]);
   const [, rerender] = useRerender();
-  useEffect21(() => {
+  useEffect22(() => {
     rerender();
   }, [dataSourceState]);
   const renderCell = useCallback20(
@@ -21334,6 +21638,8 @@ function useCellRendering(param) {
         rowDetailState,
         onMouseEnter,
         onMouseLeave,
+        onRowMouseEnter,
+        onRowMouseLeave,
         domRef,
         width,
         column,
@@ -21349,6 +21655,8 @@ function useCellRendering(param) {
     [
       rowHeight,
       rowDetailHeight,
+      onRowMouseEnter,
+      onRowMouseLeave,
       computedRowSizeCacheForDetails,
       computedRowHeight,
       isRowDetailsExpanded,
@@ -21410,7 +21718,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useEffect as useEffect24, useState as useState17 } from "react";
+import { useEffect as useEffect25, useState as useState17 } from "react";
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -21667,13 +21975,13 @@ function useColumnRowspan(computedVisibleColumns) {
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
 import { useCallback as useCallback21 } from "react";
-var debug4 = dbg("useColumnSizeFn");
+var debug3 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
   const columnSize = useCallback21(
     (index) => {
       const column = columns[index];
       if (false) {
-        debug4("cannot find column at index", index, columns);
+        debug3("cannot find column at index", index, columns);
       }
       return column ? column.computedWidth : 0;
     },
@@ -21683,7 +21991,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect22, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/state/getInitialState.ts
 import { createRef } from "react";
@@ -21765,7 +22073,7 @@ function getRowDetailRendererFromComponent(RowDetail) {
 // src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
 var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
   constructor(name, opts) {
-    super(`HorizontalLayout${name ? `:${name}` : ""}`);
+    super(`${name}:HorizontalLayout`);
     this.visiblePageCount = 0;
     this.isHorizontalLayoutBrain = true;
     this._totalPageCount = 0;
@@ -22044,10 +22352,11 @@ function getCellSelector(cellPosition) {
   return selector2;
 }
 function createBrains(debugId, wrapRowsHorizontally) {
-  const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
+  const debugChannel = getDebugChannel(debugId);
+  const brain = !wrapRowsHorizontally ? new MatrixBrain(debugChannel) : new HorizontalLayoutMatrixBrain(debugChannel, {
     isHeader: false
   });
-  const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
+  const headerBrain = !wrapRowsHorizontally ? new MatrixBrain(debugChannel) : new HorizontalLayoutMatrixBrain(debugChannel, {
     isHeader: true,
     masterBrain: brain
   });
@@ -22078,8 +22387,10 @@ function initSetupState2({
   );
   const domRef = createRef();
   return {
+    debugWarnings: /* @__PURE__ */ new Map(),
     renderer,
     onRenderUpdater,
+    devToolsDetected: !!globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__,
     propsCache: /* @__PURE__ */ new Map([]),
     lastRowToCollapseRef: { current: null },
     lastRowToExpandRef: { current: null },
@@ -22149,7 +22460,6 @@ var forwardProps4 = (_setupState) => {
     groupColumn: 1,
     onReady: 1,
     domProps: 1,
-    debugMode: 1,
     onKeyDown: 1,
     onCellClick: 1,
     onCellDoubleClick: 1,
@@ -22164,6 +22474,8 @@ var forwardProps4 = (_setupState) => {
     onContextMenu: 1,
     onCellContextMenu: 1,
     onRenderRangeChange: 1,
+    onRowMouseEnter: 1,
+    onRowMouseLeave: 1,
     onScrollToTop: 1,
     onScrollToBottom: 1,
     onScrollStop: 1,
@@ -22359,7 +22671,7 @@ var mapPropsToState = (params) => {
     }
   }
   const isRowDetailEnabled = !rowDetailRenderer ? false : props.isRowDetailEnabled || true;
-  return {
+  let result = {
     isTree: parentState.isTree,
     rowDetailRenderer,
     rowDetailState,
@@ -22384,6 +22696,16 @@ var mapPropsToState = (params) => {
     rowDetailHeightCSSVar: typeof props.rowDetailHeight === "string" ? props.rowDetailHeight : "",
     columnHeaderHeightCSSVar: typeof props.columnHeaderHeight === "string" ? props.columnHeaderHeight || ThemeVars.components.Header.columnHeaderHeight : ""
   };
+  if (state.devToolsDetected && state.debugId) {
+    const devToolsOverrides = DEV_TOOLS_INFINITE_OVERRIDES.get(state.debugId);
+    if (devToolsOverrides) {
+      result = {
+        ...result,
+        ...devToolsOverrides
+      };
+    }
+  }
+  return result;
 };
 
 // src/components/InfiniteTable/state/getColumnVisibilityForHideEmptyGroupColumns.ts
@@ -22534,13 +22856,13 @@ function useColumnsWhen() {
       pivotGrandTotalColumnPosition
     }
   } = useManagedComponentState();
-  useEffect22(() => {
+  useEffect23(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect22(() => {
+  useEffect23(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -22623,7 +22945,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return Object.keys(computedColumns).length === 0 ? void 0 : computedColumns;
   }
-  useEffect22(() => {
+  useEffect23(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = isTree ? void 0 : computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -22654,7 +22976,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useManagedComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect22(() => {
+  useEffect23(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -22758,7 +23080,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  useEffect22(() => {
+  useEffect23(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -23169,7 +23491,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState16, useEffect as useEffect23, useLayoutEffect as useLayoutEffect12 } from "react";
+import { useState as useState16, useEffect as useEffect24, useLayoutEffect as useLayoutEffect12 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -23178,7 +23500,7 @@ function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useManagedComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
   const [scrollbars, setScrollbars] = useState16(INITIAL_SCROLLBARS);
-  useEffect23(() => {
+  useEffect24(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -23253,7 +23575,7 @@ function useComputed() {
       }
     );
   });
-  useEffect24(() => {
+  useEffect25(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue, filterTypes } = dataSourceState;
@@ -23561,7 +23883,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.2.10"
+      version: "6.2.12"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23572,18 +23894,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-import { useRef as useRef25, useEffect as useEffect25 } from "react";
+import { useRef as useRef25, useEffect as useEffect26 } from "react";
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef25(false);
   const rafId = useRef25(null);
-  useEffect25(() => {
+  useEffect26(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23611,18 +23933,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-import { useRef as useRef26, useEffect as useEffect26 } from "react";
+import { useRef as useRef26, useEffect as useEffect27 } from "react";
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef26(false);
   const rafId = useRef26(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23651,7 +23973,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-import { useCallback as useCallback23, useMemo as useMemo15, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo15, useEffect as useEffect28 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -23701,10 +24023,11 @@ function updateCellSelectionOnCellClick(context, event) {
     return;
   }
   const { multiCellSelector, computedVisibleColumns } = getComputed();
-  const { brain } = getState();
+  const { brain, debugId } = getState();
   const { rowsPerPage } = brain;
   const columnsPerSet = computedVisibleColumns.length;
   const cellSelection = new CellSelectionState(existingCellSelection);
+  cellSelection.debugId = debugId ?? "";
   multiCellSelector.cellSelectionState = cellSelection;
   const position2 = {
     rowIndex,
@@ -24362,7 +24685,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  useEffect27(() => {
+  useEffect28(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -24418,13 +24741,13 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
 import * as React56 from "react";
 import {
   useCallback as useCallback24,
-  useEffect as useEffect29,
+  useEffect as useEffect30,
   useLayoutEffect as useLayoutEffect13,
   useState as useState18
 } from "react";
@@ -24815,7 +25138,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React56.useRef(null);
-  useEffect29(() => {
+  useEffect30(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignNode(nodeRef.current, handle);
@@ -25412,10 +25735,10 @@ function useMenuContext() {
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback25, useEffect as useEffect30, useRef as useRef28 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect31, useRef as useRef28 } from "react";
 function useMounted() {
   let mountedRef = useRef28(true);
-  useEffect30(() => {
+  useEffect31(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -26227,7 +26550,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect31(() => {
+  useEffect32(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onColumnMenuClick.onChange((info) => {
@@ -26242,7 +26565,7 @@ function useColumnMenu() {
     });
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
-  useEffect31(() => {
+  useEffect32(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -26322,13 +26645,13 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-import { useEffect as useEffect32 } from "react";
+import { useEffect as useEffect33 } from "react";
 function useOnEditCancelled() {
   const context = useInfiniteTable();
   const { getState } = context;
   const { editingCell } = getState();
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -26350,7 +26673,7 @@ function useOnEditRejected() {
     state: { editingCell }
   } = context;
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -26374,7 +26697,7 @@ function useFocusOnEditStop() {
   } = context;
   const active = editingCell?.active;
   const prevActive = usePrevious(active);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -26387,7 +26710,7 @@ function useOnEditAccepted() {
     getState
   } = context;
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  useEffect32(() => {
+  useEffect33(() => {
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
       const { value, rowIndex, columnId, initialValue } = editingCell2;
@@ -26412,7 +26735,7 @@ function useOnEditPersisted() {
     getState
   } = context;
   const persisted = editingCell ? editingCell.persisted : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -26445,7 +26768,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-import { useEffect as useEffect33 } from "react";
+import { useEffect as useEffect34 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 import * as React66 from "react";
@@ -26584,7 +26907,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect33(() => {
+  useEffect34(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -26620,7 +26943,7 @@ function useColumnFilterOperatorMenu() {
       actions2.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  useEffect33(() => {
+  useEffect34(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -26647,7 +26970,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-import { useEffect as useEffect34 } from "react";
+import { useEffect as useEffect35 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 import * as React68 from "react";
@@ -26814,7 +27137,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect34(() => {
+  useEffect35(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -26865,7 +27188,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -26901,7 +27224,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect34(() => {
+  useEffect35(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -26950,7 +27273,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -26981,13 +27304,13 @@ import { useRef as useRef30 } from "react";
 import * as React69 from "react";
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
-import { useCallback as useCallback28, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect36 } from "react";
 function useGridScroll(onScroll, deps) {
   const {
     state: { brain }
   } = useInfiniteTable();
   const memoizedOnScroll = useCallback28(onScroll, deps);
-  useEffect35(() => {
+  useEffect36(() => {
     const removeOnScroll = brain.onScroll(memoizedOnScroll);
     return removeOnScroll;
   }, [brain, memoizedOnScroll]);
@@ -27057,12 +27380,12 @@ function useVisibleColumnSizes() {
 var DEBUG_NAME = "InfiniteTable";
 
 // src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
-import { useEffect as useEffect36 } from "react";
+import { useEffect as useEffect37 } from "react";
 function useToggleWrapRowsHorizontally() {
   const { state, getState, actions } = useInfiniteTable();
   const { wrapRowsHorizontally } = state;
   const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
-  useEffect36(() => {
+  useEffect37(() => {
     if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
       const { brain, headerBrain, renderer, onRenderUpdater } = getState();
       brain.destroy();
@@ -27079,7 +27402,7 @@ function useToggleWrapRowsHorizontally() {
 }
 
 // src/components/InfiniteTable/hooks/useHorizontalLayout.ts
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect38 } from "react";
 function useHorizontalLayout() {
   const { getState, actions, dataSourceActions, getDataSourceState } = useInfiniteTable();
   const { groupBy, isTree } = getDataSourceState();
@@ -27089,7 +27412,7 @@ function useHorizontalLayout() {
   if (!wrapRowsHorizontally) {
     repeatWrappedGroupRows = false;
   }
-  useEffect37(() => {
+  useEffect38(() => {
     if (!wrapRowsHorizontally) {
       if (getDataSourceState().repeatWrappedGroupRows) {
         dataSourceActions.repeatWrappedGroupRows = false;
@@ -27133,37 +27456,414 @@ function useHorizontalLayout() {
 }
 
 // src/components/InfiniteTable/hooks/useDebugMode.ts
-import * as React70 from "react";
-var logWarning = once(() => {
-  console.warn(
-    `It appears you have not loaded the CSS file for InfiniteTable.
-In most environments, you should be able to fix this by adding the following line:
+import { useEffect as useEffect39, useRef as useRef31 } from "react";
 
-import '@infinite-table/infinite-react/index.css'
+// src/components/InfiniteTable/hooks/debugModeDevToolsOverlay.css.ts
+var DevToolsOverlay = createRuntimeFn({ defaultClassName: "_143ofgf0", variantClassNames: { active: { true: "_143ofgf1", false: "_143ofgf2" } }, defaultVariants: {}, compoundVariants: [] });
+var DevToolsOverlayBg = "_143ofgf5";
+var DevToolsOverlayText = "_143ofgf3";
 
-`
-  );
-});
+// src/components/InfiniteTable/hooks/useDebugMode.ts
 var cssFileLoadedVarName = stripVar(ThemeVars.loaded);
-function useDebugMode() {
-  const { getState } = useInfiniteTable();
-  React70.useEffect(() => {
-    runDebugMode(getState);
-  }, []);
+var messageBase = {
+  source: "infinite-table-page",
+  target: "infinite-table-devtools-background"
+};
+function buildMessageForExtension(params, options) {
+  const { type, debugId } = params;
+  if (type === "unmount") {
+    return {
+      ...messageBase,
+      url: getPageUrlOfWindow(),
+      type,
+      payload: {
+        debugId
+      }
+    };
+  }
+  const opts = options;
+  const computedValues = opts.getComputed();
+  const dataSourceState = opts.getDataSourceState();
+  const state = opts.getState();
+  const message = {
+    ...messageBase,
+    url: getPageUrlOfWindow(),
+    type,
+    payload: {
+      debugId,
+      columnVisibility: state.columnVisibility,
+      columnOrder: computedValues.computedColumnOrder,
+      visibleColumnIds: computedValues.computedVisibleColumns.map((c) => c.id),
+      selectionMode: dataSourceState.selectionMode,
+      columns: Object.fromEntries(
+        computedValues.computedVisibleColumns.map((c) => [
+          c.id,
+          {
+            field: c.field,
+            dataType: c.computedDataType,
+            sortType: c.computedSortType,
+            filtered: c.computedFiltered,
+            sorted: c.computedSorted,
+            width: c.computedWidth
+          }
+        ])
+      ),
+      groupRenderStrategy: state.groupRenderStrategy,
+      groupBy: dataSourceState.groupBy.map(
+        (g) => g.field ? `${g.field}` : "<fn>"
+      ),
+      sortInfo: (dataSourceState.sortInfo || []).filter((sortInfo) => typeof sortInfo.field === "string").map((s) => {
+        return {
+          field: `${s.field}`,
+          dir: s.dir,
+          type: Array.isArray(s.type) ? s.type[0] : s.type ?? "string"
+        };
+      }),
+      multiSort: dataSourceState.multiSort,
+      devToolsDetected: state.devToolsDetected,
+      debugTimings: Object.fromEntries(dataSourceState.debugTimings),
+      debugWarnings: {
+        ...Object.fromEntries(dataSourceState.debugWarnings),
+        ...Object.fromEntries(state.debugWarnings)
+      }
+    }
+  };
+  return message;
 }
-function runDebugMode(getState) {
+var getPageUrlOfWindow = once(function() {
+  const url = new URL(window.location.href);
+  return url.origin + url.pathname;
+});
+function postMessage(message) {
+  window.postMessage(message);
+}
+var setupHook = once(() => {
+  console.log("Infinite Table DevTools detected!");
+  const hookFn = (debugId, options) => {
+    if (options) {
+      INSTANCES.set(debugId, options);
+      const { devToolsDetected } = options.getState();
+      if (!devToolsDetected) {
+        options.actions.devToolsDetected = true;
+      }
+      const dataSourceState = options.getDataSourceState();
+      if (dataSourceState.debugId !== debugId) {
+        options.dataSourceActions.debugId = debugId;
+      }
+      if (!dataSourceState.devToolsDetected) {
+        options.dataSourceActions.devToolsDetected = true;
+      }
+      window.postMessage(
+        buildMessageForExtension({ type: "update", debugId }, options)
+      );
+    } else {
+      deleteInstanceFromDevTools(debugId);
+      window.postMessage(
+        buildMessageForExtension({ type: "unmount", debugId }, null)
+      );
+    }
+  };
+  window.__INFINITE_TABLE_DEVTOOLS_HOOK__ = hookFn;
+  debug.onLogIntent("*", (options) => {
+    postMessage({
+      ...messageBase,
+      url: getPageUrlOfWindow(),
+      type: "log",
+      payload: {
+        debugId: void 0,
+        channel: options.channel,
+        color: options.color,
+        args: options.args.map((arg) => {
+          if (typeof arg === "object" && arg !== null) {
+            return JSON.stringify(arg);
+          }
+          return String(arg);
+        }),
+        timestamp: options.timestamp
+      }
+    });
+  });
+  return hookFn;
+});
+function useDebugMode() {
+  const { getState, getDataSourceState, dataSourceActions } = useInfiniteTable();
   const state = getState();
-  const { debugMode, domRef } = state;
-  if (debugMode) {
+  const { domRef, debugId } = state;
+  if (debugId) {
     if (domRef.current) {
       const value = getComputedStyle(domRef.current).getPropertyValue(
         cssFileLoadedVarName
       );
       if (value !== `${CSS_LOADED_VALUE}`) {
-        logWarning();
+        logDevToolsWarning({
+          debugId,
+          key: "CSS001_CSS"
+        });
+      }
+    }
+  }
+  useEffect39(() => {
+    const dataSourceState = getDataSourceState();
+    if (dataSourceState.debugId !== debugId) {
+      dataSourceActions.debugId = debugId;
+    }
+  }, [debugId]);
+  return useDevTools();
+}
+var HOOK_FN_SETUP_CALLBACK = buildSubscriptionCallback();
+var DEVTOOLS_MESSAGES = {
+  revertAll: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      const infiniteInitials = DEV_TOOLS_INFINITE_INITIALS.get(payload.debugId);
+      DEV_TOOLS_INFINITE_INITIALS.delete(payload.debugId);
+      DEV_TOOLS_INFINITE_OVERRIDES.delete(payload.debugId);
+      if (infiniteInitials) {
+        Object.keys(infiniteInitials).forEach((key) => {
+          instance.actions[key] = infiniteInitials[key];
+          delete infiniteInitials[key];
+        });
+      }
+      const dataSourceInitials = DEV_TOOLS_DATASOURCE_INITIALS.get(
+        payload.debugId
+      );
+      DEV_TOOLS_DATASOURCE_INITIALS.delete(payload.debugId);
+      DEV_TOOLS_DATASOURCE_OVERRIDES.delete(payload.debugId);
+      if (dataSourceInitials) {
+        Object.keys(dataSourceInitials).forEach((key) => {
+          instance.dataSourceActions[key] = dataSourceInitials[key];
+          delete dataSourceInitials[key];
+        });
+      }
+    }
+  },
+  revertProperty: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      const property = payload.property;
+      const infiniteOverrides = DEV_TOOLS_INFINITE_OVERRIDES.get(
+        payload.debugId
+      );
+      const infiniteInitials = DEV_TOOLS_INFINITE_INITIALS.get(payload.debugId);
+      const dataSourceOverrides = DEV_TOOLS_DATASOURCE_OVERRIDES.get(
+        payload.debugId
+      );
+      const dataSourceInitials = DEV_TOOLS_DATASOURCE_INITIALS.get(
+        payload.debugId
+      );
+      const infiniteStateProp = property;
+      if (infiniteInitials && infiniteOverrides && infiniteOverrides[infiniteStateProp] !== void 0) {
+        delete infiniteOverrides[infiniteStateProp];
+        instance.actions[infiniteStateProp] = infiniteInitials[infiniteStateProp];
+        delete infiniteInitials[infiniteStateProp];
+      }
+      const dataSourceStateProp = property;
+      if (dataSourceInitials && dataSourceOverrides && dataSourceOverrides[dataSourceStateProp] !== void 0) {
+        const dataSourceInitials2 = DEV_TOOLS_DATASOURCE_INITIALS.get(payload.debugId) || {};
+        delete dataSourceOverrides[dataSourceStateProp];
+        instance.dataSourceActions[dataSourceStateProp] = dataSourceInitials2[dataSourceStateProp];
+        delete dataSourceInitials2[dataSourceStateProp];
+      }
+    }
+  },
+  discardWarning: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      const dsWarningKey = payload.warning;
+      const dsWarnings = instance.getDataSourceState().debugWarnings;
+      const obj = dsWarnings.get(dsWarningKey);
+      if (obj) {
+        dsWarnings.delete(dsWarningKey);
+        updateDevToolsForInstance(payload.debugId);
+      } else {
+        const itWarningKey = payload.warning;
+        const infiniteWarnings = instance.getState().debugWarnings;
+        const obj2 = infiniteWarnings.get(itWarningKey);
+        if (obj2) {
+          infiniteWarnings.delete(itWarningKey);
+          updateDevToolsForInstance(payload.debugId);
+        }
+      }
+    }
+  },
+  discardAllWarnings: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      instance.getDataSourceState().debugWarnings.clear();
+      instance.getState().debugWarnings.clear();
+      updateDevToolsForInstance(payload.debugId);
+    }
+  },
+  setColumnVisibility: (payload) => {
+    setDevToolInfinitePropertyOverride(
+      payload.debugId,
+      "columnVisibility",
+      payload.columnVisibility
+    );
+  },
+  setGroupBy: (payload) => {
+    setDevToolDataSourcePropertyOverride(
+      payload.debugId,
+      "groupBy",
+      payload.groupBy
+    );
+  },
+  setGroupRenderStrategy: (payload) => {
+    setDevToolInfinitePropertyOverride(
+      payload.debugId,
+      "groupRenderStrategy",
+      payload.groupRenderStrategy
+    );
+  },
+  setSortInfo: (payload) => {
+    setDevToolDataSourcePropertyOverride(
+      payload.debugId,
+      "sortInfo",
+      payload.sortInfo
+    );
+  },
+  setMultiSort: (payload) => {
+    setDevToolDataSourcePropertyOverride(
+      payload.debugId,
+      "multiSort",
+      payload.multiSort
+    );
+  },
+  highlight: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      const domNode = instance.getState().domRef.current;
+      if (domNode) {
+        const rect = domNode.getBoundingClientRect();
+        let overlay = document.querySelector(
+          `.${DevToolsOverlay.classNames.base}`
+        );
+        if (!overlay) {
+          overlay = document.createElement("div");
+          overlay.classList.add(DevToolsOverlay.classNames.base);
+          overlay.innerHTML = [
+            `<div class="${DevToolsOverlayText}"></div>`,
+            `<div class="${DevToolsOverlayBg}"></div>`
+          ].join("");
+          document.body.appendChild(overlay);
+        }
+        let textDiv = overlay.firstElementChild;
+        if (overlay) {
+          overlay.style.left = `${rect.left}px`;
+          overlay.style.top = `${rect.top}px`;
+          overlay.style.width = `${rect.width}px`;
+          overlay.style.height = `${rect.height}px`;
+          textDiv.innerHTML = payload.debugId;
+          const overlayBg = overlay.lastElementChild;
+          const handleAnimationEnd = () => {
+            overlay.classList.remove(
+              DevToolsOverlay.classNames.variants.active.true
+            );
+            overlayBg.removeEventListener("animationend", handleAnimationEnd);
+          };
+          overlayBg.addEventListener("animationend", handleAnimationEnd);
+          overlay.classList.add(
+            DevToolsOverlay.classNames.variants.active.true
+          );
+        }
       }
     }
   }
+};
+function listenForDevTools() {
+  if (typeof window !== "undefined") {
+    window.addEventListener("message", (event) => {
+      if (event && event.data && typeof event.data.source === "string" && event.data.source.startsWith("infinite-table-devtools-contentscript") && event.data.target === "infinite-table-page") {
+        if (!window.__INFINITE_TABLE_DEVTOOLS_HOOK__) {
+          setupHook();
+          HOOK_FN_SETUP_CALLBACK(
+            window.__INFINITE_TABLE_DEVTOOLS_HOOK__
+          );
+        }
+        if (typeof event.data.type === "string") {
+          const eventType = event.data.type;
+          const fn = DEVTOOLS_MESSAGES[eventType];
+          if (fn) {
+            fn(event.data.payload);
+          }
+        }
+      }
+    });
+  }
+}
+listenForDevTools();
+function useDevTools() {
+  const {
+    getState,
+    getComputed,
+    getDataSourceState,
+    dataSourceActions,
+    actions,
+    dataSourceApi,
+    api
+  } = useInfiniteTable();
+  const state = getState();
+  const debugId = state.debugId;
+  const debugIdRef = useRef31(debugId);
+  debugIdRef.current = debugId;
+  useEffect39(() => {
+    const debugId2 = debugIdRef.current;
+    if (!debugId2) {
+      return;
+    }
+    const withHookFn = (hookFn2) => {
+      hookFn2(debugId2, {
+        getState,
+        getDataSourceState,
+        getComputed,
+        dataSourceActions,
+        actions,
+        api,
+        dataSourceApi
+      });
+    };
+    const hookFn = HOOK_FN_SETUP_CALLBACK.get();
+    if (hookFn) {
+      withHookFn(hookFn);
+      return;
+    }
+    return HOOK_FN_SETUP_CALLBACK.onChange((hookFn2) => {
+      if (!hookFn2) {
+        return;
+      }
+      withHookFn(hookFn2);
+    });
+  }, []);
+  useEffect39(() => {
+    const debugId2 = debugIdRef.current;
+    if (!debugId2) {
+      return;
+    }
+    const hookFn = HOOK_FN_SETUP_CALLBACK.get();
+    if (hookFn) {
+      hookFn(debugId2, {
+        getState,
+        getDataSourceState,
+        getComputed,
+        dataSourceActions,
+        actions,
+        api,
+        dataSourceApi
+      });
+    }
+  });
+  useEffect39(() => {
+    if (!debugId) {
+      return;
+    }
+    return () => {
+      const devtoolsHookFn = globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__;
+      if (devtoolsHookFn) {
+        devtoolsHookFn(debugId, null);
+      }
+    };
+  }, [debugId]);
+  return debugId;
 }
 
 // src/components/InfiniteTable/hooks/useInfinitePortalContainer.ts
@@ -27196,14 +27896,16 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
   mappedCallbacks: getMappedCallbacks2(),
   // @ts-ignore
   getParentState: () => useDataSourceState(),
-  debugName: DEBUG_NAME
+  debugName: (props) => {
+    return getDebugChannel(props.debugId, DEBUG_NAME);
+  }
 });
 function InfiniteTableHeader2() {
   const context = useInfiniteTable();
   const { state: componentState, getComputed } = context;
   const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
   const { scrollbars } = getComputed();
-  return header ? /* @__PURE__ */ React71.createElement(
+  return header ? /* @__PURE__ */ React70.createElement(
     TableHeaderWrapper,
     {
       wrapRowsHorizontally: !!wrapRowsHorizontally,
@@ -27220,7 +27922,7 @@ var InfiniteTableBodyCls = join(
   transformTranslateZero
 );
 function InfiniteTableBodyContainer(props) {
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       ...props,
@@ -27258,7 +27960,7 @@ function InfiniteTableBody() {
   const {
     componentState: { loading }
   } = useDataSourceContextValue();
-  const onContextMenu = React71.useCallback((event) => {
+  const onContextMenu = React70.useCallback((event) => {
     const state = context.getState();
     const target = event.target;
     if (!masterContext && event._from_row_detail) {
@@ -27304,7 +28006,7 @@ function InfiniteTableBody() {
   });
   const { autoFocus, tabIndex } = domProps ?? {};
   useToggleWrapRowsHorizontally();
-  return /* @__PURE__ */ React71.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React70.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React70.createElement(
     HeadlessTable,
     {
       forceRerenderTimestamp: componentState.forceBodyRerenderTimestamp,
@@ -27326,9 +28028,9 @@ function InfiniteTableBody() {
       scrollerDOMRef,
       scrollVarHostRef: domRef
     }
-  ), /* @__PURE__ */ React71.createElement(LoadMaskCmp, { visible: loading }, loadingText));
+  ), /* @__PURE__ */ React70.createElement(LoadMaskCmp, { visible: loading }, loadingText));
 }
-var InfiniteTableComponent = React71.memo(
+var InfiniteTableComponent = React70.memo(
   function InfiniteTableComponent2() {
     const context = useInfiniteTable();
     const masterContext = useMasterDetailContext();
@@ -27360,7 +28062,7 @@ var InfiniteTableComponent = React71.memo(
     useScrollToActiveRow(activeRowIndex, dataArray.length, api);
     useScrollToActiveCell(activeCellIndex, dataArray.length, api);
     const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
-    React71.useEffect(() => {
+    React70.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -27383,7 +28085,7 @@ var InfiniteTableComponent = React71.memo(
       ...initialDOMProps
     } = componentState.domProps ?? {};
     const domProps = useDOMProps(initialDOMProps);
-    React71.useEffect(() => {
+    React70.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -27394,7 +28096,7 @@ var InfiniteTableComponent = React71.memo(
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
     const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
     const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
-    React71.useEffect(() => {
+    React70.useEffect(() => {
       if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
         globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
           componentState.id,
@@ -27407,59 +28109,75 @@ var InfiniteTableComponent = React71.memo(
         globalThis.infiniteApi = context.api;
       }
     }, [componentState.ready]);
-    useDebugMode();
-    React71.useEffect(() => {
+    const debugId = useDebugMode();
+    React70.useEffect(() => {
       if (masterContext) {
         portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
       }
     }, []);
-    const children = initialChildren ?? /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React71.createElement(InfiniteTableBody, null));
-    return /* @__PURE__ */ React71.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React71.createElement(
+    const children = initialChildren ?? /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React70.createElement(InfiniteTableBody, null));
+    return /* @__PURE__ */ React70.createElement(
       "div",
       {
-        ref: portalDOMRef,
-        className: join(
-          `${rootClassName2}Portal`,
-          zIndex[1e7],
-          position.absolute,
-          top[0],
-          left[0]
-        )
+        "data-debug-id": debugId,
+        onKeyDown: onKeyDown2,
+        ref: domRef,
+        ...domProps
       },
-      menuPortal,
-      cellContextMenuPortal,
-      tableContextMenuPortal,
-      filterOperatorMenuPortal
-    ), rowHeightCSSVar ? /* @__PURE__ */ React71.createElement(
-      CSSNumericVariableWatch,
-      {
-        key: "row-height",
-        varName: rowHeightCSSVar,
-        onChange: onRowHeightCSSVarChange
-      }
-    ) : null, /* @__PURE__ */ React71.createElement(
-      CSSNumericVariableWatch,
-      {
-        key: "flashing-duration",
-        allowInts: true,
-        varName: ThemeVars.components.Cell.flashingDuration,
-        onChange: onFlashingDurationCSSVarChange
-      }
-    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React71.createElement(
-      CSSNumericVariableWatch,
-      {
-        key: "row-detail-height",
-        varName: rowDetailHeightCSSVar,
-        onChange: onRowDetailHeightCSSVarChange
-      }
-    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React71.createElement(
-      CSSNumericVariableWatch,
-      {
-        key: "column-header-height",
-        varName: columnHeaderHeightCSSVar,
-        onChange: onColumnHeaderHeightCSSVarChange
-      }
-    ) : null, licenseValid ? null : /* @__PURE__ */ React71.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React71.createElement(FocusDetect, null));
+      children,
+      /* @__PURE__ */ React70.createElement(
+        "div",
+        {
+          ref: portalDOMRef,
+          className: join(
+            `${rootClassName2}Portal`,
+            zIndex[1e7],
+            position.absolute,
+            top[0],
+            left[0]
+          )
+        },
+        menuPortal,
+        cellContextMenuPortal,
+        tableContextMenuPortal,
+        filterOperatorMenuPortal
+      ),
+      rowHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+        CSSNumericVariableWatch,
+        {
+          key: "row-height",
+          varName: rowHeightCSSVar,
+          onChange: onRowHeightCSSVarChange
+        }
+      ) : null,
+      /* @__PURE__ */ React70.createElement(
+        CSSNumericVariableWatch,
+        {
+          key: "flashing-duration",
+          allowInts: true,
+          varName: ThemeVars.components.Cell.flashingDuration,
+          onChange: onFlashingDurationCSSVarChange
+        }
+      ),
+      rowDetailHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+        CSSNumericVariableWatch,
+        {
+          key: "row-detail-height",
+          varName: rowDetailHeightCSSVar,
+          onChange: onRowDetailHeightCSSVarChange
+        }
+      ) : null,
+      columnHeaderHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+        CSSNumericVariableWatch,
+        {
+          key: "column-header-height",
+          varName: columnHeaderHeightCSSVar,
+          onChange: onColumnHeaderHeightCSSVarChange
+        }
+      ) : null,
+      licenseValid ? null : /* @__PURE__ */ React70.createElement(InfiniteTableLicenseFooter, null),
+      /* @__PURE__ */ React70.createElement(FocusDetect, null)
+    );
   }
 );
 function InfiniteTableContextProvider({
@@ -27476,6 +28194,16 @@ function InfiniteTableContextProvider({
     globalThis.getComputed = getComputed;
     globalThis.componentActions = componentActions;
     globalThis.masterBrain = componentState.brain;
+    globalThis.INFINITE = globalThis.INFINITE || {};
+    if (getState().debugId) {
+      const debugId = getState().debugId;
+      globalThis.INFINITE[debugId] = {
+        // @ts-ignore
+        ...globalThis.INFINITE[debugId] || {},
+        getState,
+        actions: componentActions
+      };
+    }
   }
   const {
     getState: getDataSourceState,
@@ -27483,7 +28211,7 @@ function InfiniteTableContextProvider({
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React71.useState(() => {
+  const [imperativeApi] = React70.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -27519,20 +28247,20 @@ function InfiniteTableContextProvider({
     },
     { earlyAttach: true, debounce: 50 }
   );
-  React71.useEffect(() => {
+  React70.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React71.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React71.createElement(InfiniteTableComponent, null));
+  return /* @__PURE__ */ React70.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React70.createElement(InfiniteTableComponent, null));
 }
 var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_HEADER_HEIGHT = toCSSVarName(columnHeaderHeightName);
 var InfiniteTable = function(props) {
   const table = (
     //@ts-ignore
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React70.createElement(
       InfiniteTableRoot,
       {
         repeatWrappedGroupRows: !!props.wrapRowsHorizontally,
@@ -27540,34 +28268,33 @@ var InfiniteTable = function(props) {
         columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT,
         ...props
       },
-      /* @__PURE__ */ React71.createElement(InfiniteTableContextProvider, { children: props.children })
+      /* @__PURE__ */ React70.createElement(InfiniteTableContextProvider, { children: props.children })
     )
   );
   if (false) {
-    return /* @__PURE__ */ React71.createElement(React71.StrictMode, null, table);
+    return /* @__PURE__ */ React70.createElement(React70.StrictMode, null, table);
   }
   return table;
 };
 InfiniteTable.Header = InfiniteTableHeader2;
 InfiniteTable.Body = InfiniteTableBody;
 InfiniteTable.HScrollSyncContent = HScrollSyncContent;
-InfiniteTable.Footer = () => /* @__PURE__ */ React71.createElement(InfiniteTableFooter, null);
+InfiniteTable.Footer = () => /* @__PURE__ */ React70.createElement(InfiniteTableFooter, null);
 
 // src/components/TreeGrid/TreeDataSource.tsx
-import * as React72 from "react";
+import * as React71 from "react";
 function TreeDataSource(props) {
   const { DataSource: DataSourceComponent } = useDataSourceInternal({ nodesKey: "children", ...props });
-  return /* @__PURE__ */ React72.createElement(DataSourceComponent, null, props.children ?? null);
+  return /* @__PURE__ */ React71.createElement(DataSourceComponent, null, props.children ?? null);
 }
 
 // src/components/TreeGrid/TreeGrid.tsx
-import * as React73 from "react";
+import * as React72 from "react";
 function TreeGrid(props) {
-  return /* @__PURE__ */ React73.createElement(InfiniteTable, { ...props });
+  return /* @__PURE__ */ React72.createElement(InfiniteTable, { ...props });
 }
 
 // src/components/DataSource/DataLoader/DataQuery.ts
-var logger2 = debug("InfiniteTable:DataQuery");
 var DataQuery = class {
   constructor(debugName) {
     this.state = "idle";
@@ -27581,21 +28308,21 @@ var DataQuery = class {
       let resolvePending = () => {
       };
       try {
-        logger2(`Fetching query ${this.debugName}...`);
+        this.logger(`Fetching query ${this.debugName}...`);
         this.pendingPromise = new Promise((resolve) => {
           resolvePending = resolve;
         });
         this.result = await loadFn(...key);
         this.state = "success";
-      } catch (error2) {
+      } catch (error4) {
         this.result = void 0;
-        this.error = error2;
+        this.error = error4;
         this.state = "error";
       }
       this.doneAt = Date.now();
       this.pendingPromise = void 0;
       resolvePending(this);
-      logger2(`Fetched query ${this.debugName}. State: ${this.state}.`);
+      this.logger(`Fetched query ${this.debugName}. State: ${this.state}.`);
       return this.getDoneSnapshot();
     };
     this.getCurrentSnapshot = () => {
@@ -27635,6 +28362,7 @@ var DataQuery = class {
     this.isDone = () => this.state === "success" || this.state === "error";
     this.isSuccess = () => this.state === "success";
     this.debugName = debugName || "";
+    this.logger = debug(`${debugName}:DataQuery`);
   }
 };
 
@@ -27693,7 +28421,7 @@ var _DataClient = class {
           this.removeQueryIfErrored(cachedQuery, stringifiedCacheKey);
         }
       }
-      const dataQuery = new DataQuery(options.name || "");
+      const dataQuery = new DataQuery(`${this.name}:${options.name}`);
       this.queryCache.set(stringifiedCacheKey, dataQuery);
       dataQuery.fetch(options.fn, options.key);
       dataQuery.getCurrentSnapshot().promise?.then(() => {
@@ -27805,7 +28533,7 @@ var keyboardShortcuts = {
 };
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect40 } from "react";
+import { useEffect as useEffect41 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -27967,21 +28695,21 @@ var WeakFixedSizeSet = _WeakFixedSizeSet;
 WeakFixedSizeSet.DEFAULT_SIZE = 10;
 
 // src/components/hooks/useEffectWhenSameDeps.ts
-import { useEffect as useEffect41, useRef as useRef31 } from "react";
+import { useEffect as useEffect42, useRef as useRef32 } from "react";
 var isSameDeps = (deps, prevDeps) => {
   return deps.every((dep, index) => dep === prevDeps[index]);
 };
 var useEffectWhenSameDeps = (callback, deps) => {
-  const depsRef = useRef31(deps);
+  const depsRef = useRef32(deps);
   const sameDeps = isSameDeps(deps, depsRef.current);
-  const isInitialRef = useRef31(true);
+  const isInitialRef = useRef32(true);
   depsRef.current = deps;
-  const effectDepsRef = useRef31(["same"]);
+  const effectDepsRef = useRef32(["same"]);
   const effectDeps = sameDeps ? [Date.now()] : effectDepsRef.current;
   effectDepsRef.current = effectDeps;
-  const callbackRef = useRef31(callback);
+  const callbackRef = useRef32(callback);
   callbackRef.current = callback;
-  useEffect41(() => {
+  useEffect42(() => {
     if (isInitialRef.current) {
       isInitialRef.current = false;
       return;
@@ -27991,7 +28719,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
 };
 
 // src/components/hooks/useEffectWhen.ts
-import { useEffect as useEffect42, useRef as useRef32 } from "react";
+import { useEffect as useEffect43, useRef as useRef33 } from "react";
 var isSameDeps2 = (deps, prevDeps, compare) => {
   return deps.every((dep, index) => {
     if (compare) {
@@ -28002,26 +28730,26 @@ var isSameDeps2 = (deps, prevDeps, compare) => {
 };
 var useEffectWhen = (callback, options) => {
   const { same: depsForSame, different: depsForDifferent, compare } = options;
-  const sameDepsRef = useRef32(depsForSame);
-  const differentDepsRef = useRef32(depsForDifferent);
+  const sameDepsRef = useRef33(depsForSame);
+  const differentDepsRef = useRef33(depsForDifferent);
   const sameRespected = isSameDeps2(depsForSame, sameDepsRef.current, compare);
   const differentRespected = !isSameDeps2(
     depsForDifferent,
     differentDepsRef.current,
     compare
   );
-  const isInitialRef = useRef32(true);
+  const isInitialRef = useRef33(true);
   sameDepsRef.current = depsForSame;
   differentDepsRef.current = depsForDifferent;
-  const effectDepsRef = useRef32(["same"]);
+  const effectDepsRef = useRef33(["same"]);
   const effectDeps = sameRespected && differentRespected ? [Date.now()] : effectDepsRef.current;
   effectDepsRef.current = effectDeps;
-  const callbackRef = useRef32(callback);
+  const callbackRef = useRef33(callback);
   callbackRef.current = callback;
   if (sameRespected && differentRespected) {
     isInitialRef.current = false;
   }
-  useEffect42(() => {
+  useEffect43(() => {
     if (isInitialRef.current) {
       return;
     }
@@ -28030,12 +28758,12 @@ var useEffectWhen = (callback, options) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
-import * as React74 from "react";
+import * as React73 from "react";
 var currentFlashingDurationVar = stripVar(
   InternalVars.currentFlashingDuration
 );
 var defaultRender = ({ children }) => {
-  return /* @__PURE__ */ React74.createElement(React74.Fragment, null, children);
+  return /* @__PURE__ */ React73.createElement(React73.Fragment, null, children);
 };
 var DEFAULT_FLASH_DURATION = 1e3;
 var INTERNAL_FLASH_CLS_FOR_DIRECTION = {
@@ -28057,7 +28785,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
     // fadeClassName,
     render = defaultRender
   } = options;
-  const FlashingColumnCell2 = React74.forwardRef(
+  const FlashingColumnCell2 = React73.forwardRef(
     (props, _ref) => {
       const cellContext = useInfiniteColumnCell();
       const {
@@ -28067,13 +28795,13 @@ var createFlashingColumnCellComponent = (options = {}) => {
       const { domRef, value, column, rowInfo, htmlElementRef } = cellContext;
       const rowId = rowInfo.id;
       const columnId = column.id;
-      const initialRef = React74.useRef(true);
-      const oldValueRef = React74.useRef(value);
+      const initialRef = React73.useRef(true);
+      const oldValueRef = React73.useRef(value);
       const oldValue = initialRef.current ? null : oldValueRef.current;
       initialRef.current = false;
-      const flashTimeoutIdRef = React74.useRef();
-      const flashDirectionRef = React74.useRef();
-      const fadeTimeoutIdRef = React74.useRef();
+      const flashTimeoutIdRef = React73.useRef();
+      const flashDirectionRef = React73.useRef();
+      const fadeTimeoutIdRef = React73.useRef();
       useEffectWhen(
         () => {
           if (value === oldValueRef.current) {
@@ -28120,7 +28848,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
           different: [value]
         }
       );
-      return /* @__PURE__ */ React74.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
+      return /* @__PURE__ */ React73.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
     }
   );
   return FlashingColumnCell2;