@okyrychenko-dev/react-action-guard-devtools 0.1.1 → 0.1.3

package/README.md

@@ -10,7 +10,7 @@
 
 - 📊 **Real-time Timeline** - Visual timeline of all blocking events with duration tracking
 - 🎯 **Active Blockers View** - See all currently active blockers at a glance
-- 🔍 **Filtering** - Search by blocker ID or reason (advanced filters via store API)
+- 🔍 **Filtering** - Search by blocker ID, reason, or scope (advanced filters via store API)
 - ⏸️ **Pause/Resume** - Pause event recording to inspect specific moments
 - 📝 **Detailed Event Info** - View full configuration, duration, and state changes
 - 🎨 **Customizable Position** - Place devtools panel on the left or right
@@ -31,7 +31,7 @@ pnpm add @okyrychenko-dev/react-action-guard-devtools
 
 This package requires the following peer dependencies:
 
-- [@okyrychenko-dev/react-action-guard](https://github.com/okyrychenko-dev/react-action-guard) ^0.5.0
+- [@okyrychenko-dev/react-action-guard](https://github.com/okyrychenko-dev/react-action-guard) ^0.6.0
 - [React](https://react.dev/) ^17.0.0 || ^18.0.0 || ^19.0.0
 
 ## Quick Start
@@ -216,7 +216,7 @@ See all currently active blockers with:
 
 Filter events by:
 
-- **Search**: Search by blocker ID or reason
+- **Search**: Search by blocker ID, reason, or scope
 
 For action/scope filtering, use `useDevtoolsStore` and `setFilter` in your own UI.
 
@@ -241,9 +241,6 @@ The package is written in TypeScript and includes full type definitions:
 
 ```typescript
 import type {
-  // Component types
-  ActionGuardDevtoolsProps,
-
   // Event types
   DevtoolsEvent,
   DevtoolsFilter,

package/dist/index.cjs

@@ -3,135 +3,146 @@
 var reactActionGuard = require('@okyrychenko-dev/react-action-guard');
 var react = require('react');
 var reactZustandToolkit = require('@okyrychenko-dev/react-zustand-toolkit');
-var clsx2 = require('clsx');
+var clsx = require('clsx');
 var zustand = require('zustand');
 var jsxRuntime = require('react/jsx-runtime');
 var shallow = require('zustand/react/shallow');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
-
 // src/components/actionGuardDevtools/ActionGuardDevtools.tsx
 
 // src/store/devtoolsStore.constants.ts
 var DEFAULT_FILTER = {
-  actions: ["add", "remove", "update", "cancel", "timeout"],
+  actions: ["add", "remove", "update", "timeout", "clear", "clear_scope"],
   scopes: [],
   search: ""
 };
+var createDefaultFilter = () => ({
+  actions: [...DEFAULT_FILTER.actions],
+  scopes: [...DEFAULT_FILTER.scopes],
+  search: DEFAULT_FILTER.search
+});
 var DEFAULT_MAX_EVENTS = 200;
 var DEFAULT_TAB = "timeline";
 
 // src/store/devtoolsStore.actions.ts
-var createDevtoolsActions = (set, get) => ({
-  // Initial State
-  events: [],
-  maxEvents: DEFAULT_MAX_EVENTS,
-  isOpen: false,
-  isMinimized: false,
-  activeTab: DEFAULT_TAB,
-  filter: DEFAULT_FILTER,
-  selectedEventId: null,
-  isPaused: false,
-  // Actions
-  /**
-   * Add a new event to history
-   *
-   * @param eventData - Event data without ID (auto-generated)
-   */
-  addEvent: (eventData) => {
-    if (get().isPaused) {
-      return;
+var createDevtoolsActions = (set, get) => {
+  let eventCounter = 0;
+  const createEventId = (eventData) => {
+    eventCounter += 1;
+    return `${String(eventData.timestamp)}-${eventData.blockerId}-${eventCounter.toString(36)}`;
+  };
+  const trimEvents = (events, maxEvents) => {
+    if (events.length <= maxEvents) {
+      return events;
     }
-    const event = {
-      ...eventData,
-      id: `${String(eventData.timestamp)}-${eventData.blockerId}-${Math.random().toString(36).slice(2, 8)}`
-    };
-    set((state) => {
-      const newEvents = [event, ...state.events];
-      if (newEvents.length > state.maxEvents) {
-        newEvents.pop();
+    return events.slice(0, maxEvents);
+  };
+  return {
+    // Initial State
+    events: [],
+    maxEvents: DEFAULT_MAX_EVENTS,
+    isOpen: false,
+    isMinimized: false,
+    activeTab: DEFAULT_TAB,
+    filter: createDefaultFilter(),
+    selectedEventId: null,
+    isPaused: false,
+    // Actions
+    /**
+     * Add a new event to history
+     *
+     * @param eventData - Event data without ID (auto-generated)
+     */
+    addEvent: (eventData) => {
+      if (get().isPaused) {
+        return;
       }
-      return { events: newEvents };
-    });
-  },
-  /**
-   * Clear all events from history
-   */
-  clearEvents: () => {
-    set({ events: [], selectedEventId: null });
-  },
-  /**
-   * Toggle panel open/closed state
-   */
-  toggleOpen: () => {
-    set((state) => ({ isOpen: !state.isOpen }));
-  },
-  /**
-   * Set panel open state
-   *
-   * @param open - Whether panel should be open
-   */
-  setOpen: (open) => {
-    set({ isOpen: open });
-  },
-  /**
-   * Toggle minimized state
-   */
-  toggleMinimized: () => {
-    set((state) => ({ isMinimized: !state.isMinimized }));
-  },
-  /**
-   * Set active tab
-   *
-   * @param tab - Tab to activate
-   */
-  setActiveTab: (tab) => {
-    set({ activeTab: tab, selectedEventId: null });
-  },
-  /**
-   * Update filter settings (partial update)
-   *
-   * @param filterUpdate - Partial filter update
-   */
-  setFilter: (filterUpdate) => {
-    set((state) => ({
-      filter: { ...state.filter, ...filterUpdate }
-    }));
-  },
-  /**
-   * Reset filters to default
-   */
-  resetFilter: () => {
-    set({ filter: DEFAULT_FILTER });
-  },
-  /**
-   * Select an event for detail view
-   *
-   * @param eventId - Event ID to select (null to deselect)
-   */
-  selectEvent: (eventId) => {
-    set({ selectedEventId: eventId });
-  },
-  /**
-   * Toggle pause state (stops/resumes recording)
-   */
-  togglePause: () => {
-    set((state) => ({ isPaused: !state.isPaused }));
-  },
-  /**
-   * Set maximum events limit
-   *
-   * @param max - Maximum number of events to keep
-   */
-  setMaxEvents: (max) => {
-    set((state) => {
-      const events = state.events.length > max ? state.events.slice(0, max) : state.events;
-      return { maxEvents: max, events };
-    });
-  }
-});
+      const event = {
+        ...eventData,
+        id: createEventId(eventData)
+      };
+      set((state) => {
+        const newEvents = [event, ...state.events];
+        return { events: trimEvents(newEvents, state.maxEvents) };
+      });
+    },
+    /**
+     * Clear all events from history
+     */
+    clearEvents: () => {
+      set({ events: [], selectedEventId: null });
+    },
+    /**
+     * Toggle panel open/closed state
+     */
+    toggleOpen: () => {
+      set((state) => ({ isOpen: !state.isOpen }));
+    },
+    /**
+     * Set panel open state
+     *
+     * @param open - Whether panel should be open
+     */
+    setOpen: (open) => {
+      set({ isOpen: open });
+    },
+    /**
+     * Toggle minimized state
+     */
+    toggleMinimized: () => {
+      set((state) => ({ isMinimized: !state.isMinimized }));
+    },
+    /**
+     * Set active tab
+     *
+     * @param tab - Tab to activate
+     */
+    setActiveTab: (tab) => {
+      set({ activeTab: tab, selectedEventId: null });
+    },
+    /**
+     * Update filter settings (partial update)
+     *
+     * @param filterUpdate - Partial filter update
+     */
+    setFilter: (filterUpdate) => {
+      set((state) => ({
+        filter: { ...state.filter, ...filterUpdate }
+      }));
+    },
+    /**
+     * Reset filters to default
+     */
+    resetFilter: () => {
+      set({ filter: createDefaultFilter() });
+    },
+    /**
+     * Select an event for detail view
+     *
+     * @param eventId - Event ID to select (null to deselect)
+     */
+    selectEvent: (eventId) => {
+      set({ selectedEventId: eventId });
+    },
+    /**
+     * Toggle pause state (stops/resumes recording)
+     */
+    togglePause: () => {
+      set((state) => ({ isPaused: !state.isPaused }));
+    },
+    /**
+     * Set maximum events limit
+     *
+     * @param max - Maximum number of events to keep
+     */
+    setMaxEvents: (max) => {
+      set((state) => ({
+        maxEvents: max,
+        events: trimEvents(state.events, max)
+      }));
+    }
+  };
+};
 
 // src/store/devtoolsStore.store.ts
 var {
@@ -140,40 +151,50 @@ var {
 } = reactZustandToolkit.createShallowStore(createDevtoolsActions);
 
 // src/store/devtoolsStore.selectors.ts
+function normalizeScopes(scope) {
+  if (!scope) {
+    return [];
+  }
+  if (typeof scope === "string") {
+    return [scope];
+  }
+  return scope;
+}
+function matchesActionFilter(event, actions) {
+  return actions.length === 0 || actions.includes(event.action);
+}
+function matchesScopeFilter(event, scopes) {
+  if (scopes.length === 0) {
+    return true;
+  }
+  const eventScopes = normalizeScopes(event.config?.scope);
+  if (eventScopes.length === 0) {
+    return false;
+  }
+  return eventScopes.some((scope) => scopes.includes(scope));
+}
+function matchesSearchQuery(event, search) {
+  if (!search) {
+    return true;
+  }
+  const searchLower = search.toLowerCase();
+  const matchesId = event.blockerId.toLowerCase().includes(searchLower);
+  const matchesReason = (event.config?.reason ?? "").toLowerCase().includes(searchLower);
+  const matchesScope = normalizeScopes(event.config?.scope).some(
+    (scope) => scope.toLowerCase().includes(searchLower)
+  );
+  return matchesId || matchesReason || matchesScope;
+}
 function selectFilteredEvents(state) {
   const { events, filter } = state;
   return events.filter((event) => {
-    if (filter.actions.length > 0 && !filter.actions.includes(event.action)) {
-      return false;
-    }
-    if (filter.scopes.length > 0) {
-      if (!event.config?.scope) {
-        return false;
-      }
-      const eventScopes = Array.isArray(event.config.scope) ? event.config.scope : [event.config.scope];
-      const hasMatchingScope = eventScopes.some((s) => filter.scopes.includes(s));
-      if (!hasMatchingScope) {
-        return false;
-      }
-    }
-    if (filter.search) {
-      const searchLower = filter.search.toLowerCase();
-      const matchesId = event.blockerId.toLowerCase().includes(searchLower);
-      const matchesReason = event.config?.reason?.toLowerCase().includes(searchLower);
-      if (!matchesId && !matchesReason) {
-        return false;
-      }
-    }
-    return true;
+    return matchesActionFilter(event, filter.actions) && matchesScopeFilter(event, filter.scopes) && matchesSearchQuery(event, filter.search);
   });
 }
 function selectUniqueScopes(state) {
   const scopes = /* @__PURE__ */ new Set();
   state.events.forEach((event) => {
-    if (event.config?.scope) {
-      const eventScopes = Array.isArray(event.config.scope) ? event.config.scope : [event.config.scope];
-      eventScopes.forEach((s) => scopes.add(s));
-    }
+    normalizeScopes(event.config?.scope).forEach((scope) => scopes.add(scope));
   });
   return Array.from(scopes).sort();
 }
@@ -185,19 +206,29 @@ function selectAllEvents(state) {
 var DEVTOOLS_MIDDLEWARE_NAME = "action-guard-devtools";
 function createDevtoolsMiddleware() {
   const addTimestamps = /* @__PURE__ */ new Map();
+  const terminalActions = /* @__PURE__ */ new Set([
+    "remove",
+    "timeout",
+    "clear",
+    "clear_scope"
+  ]);
+  const getDuration = (action, blockerId, timestamp) => {
+    if (!terminalActions.has(action)) {
+      return void 0;
+    }
+    const addTime = addTimestamps.get(blockerId);
+    if (addTime === void 0) {
+      return void 0;
+    }
+    addTimestamps.delete(blockerId);
+    return timestamp - addTime;
+  };
   return (context) => {
     const { addEvent } = devtoolsStoreApi.getState();
     if (context.action === "add") {
       addTimestamps.set(context.blockerId, context.timestamp);
     }
-    let duration;
-    if (context.action === "remove" || context.action === "timeout" || context.action === "cancel") {
-      const addTime = addTimestamps.get(context.blockerId);
-      if (addTime !== void 0) {
-        duration = context.timestamp - addTime;
-        addTimestamps.delete(context.blockerId);
-      }
-    }
+    const duration = getDuration(context.action, context.blockerId, context.timestamp);
     addEvent({
       action: context.action,
       blockerId: context.blockerId,
@@ -209,6 +240,33 @@ function createDevtoolsMiddleware() {
   };
 }
 
+// src/components/actionGuardDevtools/ActionGuardDevtools.utils.ts
+function isTypingTarget(target) {
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+}
+function getDevtoolsKeyboardAction(event, isOpen) {
+  if (!isOpen) {
+    return null;
+  }
+  if (isTypingTarget(event.target)) {
+    return null;
+  }
+  switch (event.key) {
+    case "Escape":
+      return { action: "close", preventDefault: false };
+    case " ":
+      return { action: "togglePause", preventDefault: true };
+    case "c":
+    case "C":
+      if (!event.metaKey && !event.ctrlKey) {
+        return { action: "clearEvents", preventDefault: false };
+      }
+      return null;
+    default:
+      return null;
+  }
+}
+
 // src/styles/position.module.css
 var position_default = {};
 
@@ -220,7 +278,7 @@ function getPositionClass(position) {
   return position === "left" ? position_default.positionLeft : position_default.positionRight;
 }
 function getPanelClassName(position, isMinimized) {
-  return clsx2.clsx(
+  return clsx.clsx(
     DevtoolsPanel_default.panel,
     position_default.positionBase,
     getPositionClass(position),
@@ -280,28 +338,52 @@ var COLORS = {
 var shared_default = {};
 function Badge(props) {
   const { children, className, style } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx2__default.default(shared_default.badge, className), style, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(shared_default.badge, className), style, children });
 }
 var Badge_default = Badge;
 function Content(props) {
   const { children, className } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default(shared_default.content, className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(shared_default.content, className), children });
 }
 var Content_default = Content;
 function EmptyState(props) {
   const { children, className } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default(shared_default.emptyState, className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(shared_default.emptyState, className), children });
 }
 var EmptyState_default = EmptyState;
+var ErrorBoundary = class extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  render() {
+    const { hasError, error } = this.state;
+    const { children, fallback } = this.props;
+    if (hasError) {
+      if (fallback) {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shared_default.errorBoundary, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shared_default.errorTitle, children: "Devtools Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shared_default.errorMessage, children: error?.message ?? "Unknown error" })
+      ] });
+    }
+    return children;
+  }
+};
+var ErrorBoundary_default = ErrorBoundary;
 function EventBadge(props) {
   const { children, className, style, action } = props;
-  const classes = clsx2.clsx(shared_default.eventBadge, action && shared_default.eventBadgeAction, className);
+  const classes = clsx.clsx(shared_default.eventBadge, action && shared_default.eventBadgeAction, className);
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes, style, "data-action": action, children });
 }
 var EventBadge_default = EventBadge;
 function IconButton(props) {
   const { children, className, type = "button", ...others } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("button", { type, className: clsx2__default.default(shared_default.iconButton, className), ...others, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type, className: clsx.clsx(shared_default.iconButton, className), ...others, children });
 }
 var IconButton_default = IconButton;
 
@@ -428,7 +510,7 @@ function EventItem(props) {
   const handleSelect = () => {
     onSelect(selected ? null : event.id);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: clsx2.clsx(EventItem_default.eventItem, selected && EventItem_default.selected), onClick: handleSelect, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: clsx.clsx(EventItem_default.eventItem, selected && EventItem_default.selected), onClick: handleSelect, children: [
     /* @__PURE__ */ jsxRuntime.jsx(EventItemHeader_default, { event }),
     /* @__PURE__ */ jsxRuntime.jsx(EventItemDetails_default, { event })
   ] });
@@ -601,7 +683,7 @@ function Timeline() {
   );
   const selectedEvent = selectedEventId ? events.find((e) => e.id === selectedEventId) : null;
   react.useEffect(() => {
-    if (selectedEventId && !allEvents.some((e) => e.id === selectedEventId)) {
+    if (selectedEventId && !allEvents.some((event) => event.id === selectedEventId)) {
       selectEvent(null);
     }
   }, [selectedEventId, allEvents, selectEvent]);
@@ -633,7 +715,7 @@ function Timeline() {
 var Timeline_default2 = Timeline;
 function DevtoolsPanelContent(props) {
   const { activeTab, store } = props;
-  return activeTab === "timeline" ? /* @__PURE__ */ jsxRuntime.jsx(Timeline_default2, {}) : /* @__PURE__ */ jsxRuntime.jsx(ActiveBlockers_default2, { store });
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary_default, { children: activeTab === "timeline" ? /* @__PURE__ */ jsxRuntime.jsx(Timeline_default2, {}) : /* @__PURE__ */ jsxRuntime.jsx(ActiveBlockers_default2, { store }) });
 }
 var DevtoolsPanelContent_default = DevtoolsPanelContent;
 var MaximizeIcon = createSvgIcon(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3h18v2H3z" }));
@@ -644,7 +726,7 @@ function getMinimizeButtonTitle(isMinimized) {
   return isMinimized ? "Maximize" : "Minimize";
 }
 function getPauseButtonClassName(isPaused) {
-  return clsx2.clsx(isPaused && DevtoolsPanel_default.pauseButtonActive);
+  return clsx.clsx(isPaused && DevtoolsPanel_default.pauseButtonActive);
 }
 function DevtoolsPanelHeader(props) {
   const {
@@ -693,7 +775,7 @@ function DevtoolsPanelTabs(props) {
       onClick: () => {
         onSelectTab(tab.id);
       },
-      className: clsx2.clsx(DevtoolsPanel_default.tab, activeTab === tab.id && DevtoolsPanel_default.tabActive),
+      className: clsx.clsx(DevtoolsPanel_default.tab, activeTab === tab.id && DevtoolsPanel_default.tabActive),
       children: tab.label
     },
     tab.id
@@ -746,7 +828,7 @@ function getPositionClass2(position) {
   return position === "left" ? position_default.positionLeft : position_default.positionRight;
 }
 function getToggleButtonClassName(position) {
-  return clsx2.clsx(
+  return clsx.clsx(
     ToggleButton_default.toggleButton,
     position_default.positionBase,
     getPositionClass2(position),
@@ -757,7 +839,7 @@ function shouldShowBadge(count) {
   return count > 0;
 }
 function getBadgeClassName(isPaused) {
-  return clsx2.clsx(ToggleButton_default.badgePosition, isPaused ? ToggleButton_default.badgePaused : ToggleButton_default.badgeActive);
+  return clsx.clsx(ToggleButton_default.badgePosition, isPaused ? ToggleButton_default.badgePaused : ToggleButton_default.badgeActive);
 }
 function ToggleButtonBadge(props) {
   const { count, isPaused } = props;
@@ -798,41 +880,8 @@ function ActionGuardDevtoolsContent(props) {
   ] });
 }
 var ActionGuardDevtoolsContent_default = ActionGuardDevtoolsContent;
-
-// src/components/actionGuardDevtools/ActionGuardDevtools.utils.ts
-function isTypingTarget(target) {
-  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
-}
-function getDevtoolsKeyboardAction(event, isOpen) {
-  if (!isOpen) {
-    return null;
-  }
-  if (isTypingTarget(event.target)) {
-    return null;
-  }
-  switch (event.key) {
-    case "Escape":
-      return { action: "close", preventDefault: false };
-    case " ":
-      return { action: "togglePause", preventDefault: true };
-    case "c":
-    case "C":
-      if (!event.metaKey && !event.ctrlKey) {
-        return { action: "clearEvents", preventDefault: false };
-      }
-      return null;
-    default:
-      return null;
-  }
-}
-function ActionGuardDevtools(props) {
-  const {
-    position = "right",
-    defaultOpen = false,
-    maxEvents = 200,
-    showInProduction = false,
-    store: customStore
-  } = props;
+function ActionGuardDevtoolsInternal(props) {
+  const { position = "right", defaultOpen = false, maxEvents = 200, store: customStore } = props;
   const { setOpen, setMaxEvents, isOpen, togglePause, clearEvents } = useDevtoolsStore();
   const targetStore = react.useMemo(() => customStore ?? reactActionGuard.uiBlockingStoreApi, [customStore]);
   react.useEffect(() => {
@@ -847,9 +896,14 @@ function ActionGuardDevtools(props) {
     setOpen(defaultOpen);
     setMaxEvents(maxEvents);
   }, [defaultOpen, maxEvents, setOpen, setMaxEvents]);
-  const handleKeyDown = react.useCallback(
-    (event) => {
-      const action = getDevtoolsKeyboardAction(event, isOpen);
+  const stateRef = react.useRef({ isOpen, setOpen, togglePause, clearEvents });
+  react.useEffect(() => {
+    stateRef.current = { isOpen, setOpen, togglePause, clearEvents };
+  }, [isOpen, setOpen, togglePause, clearEvents]);
+  react.useEffect(() => {
+    const handleKeyDown = (event) => {
+      const { isOpen: isOpen2, setOpen: setOpen2, togglePause: togglePause2, clearEvents: clearEvents2 } = stateRef.current;
+      const action = getDevtoolsKeyboardAction(event, isOpen2);
       if (!action) {
         return;
       }
@@ -858,28 +912,29 @@ function ActionGuardDevtools(props) {
       }
       switch (action.action) {
         case "close":
-          setOpen(false);
+          setOpen2(false);
           break;
         case "togglePause":
-          togglePause();
+          togglePause2();
           break;
         case "clearEvents":
-          clearEvents();
+          clearEvents2();
           break;
       }
-    },
-    [isOpen, setOpen, togglePause, clearEvents]
-  );
-  react.useEffect(() => {
+    };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [handleKeyDown]);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ActionGuardDevtoolsContent_default, { position, store: customStore });
+}
+function ActionGuardDevtools(props) {
+  const { showInProduction = false, ...others } = props;
   if (process.env.NODE_ENV === "production" && !showInProduction) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ActionGuardDevtoolsContent_default, { position, store: customStore });
+  return /* @__PURE__ */ jsxRuntime.jsx(ActionGuardDevtoolsInternal, { ...others });
 }
 var ActionGuardDevtools_default = ActionGuardDevtools;