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

package/dist/index.js

@@ -1,7 +1,7 @@
 import { uiBlockingStoreApi } from '@okyrychenko-dev/react-action-guard';
-import { memo, useMemo, useEffect, useCallback } from 'react';
+import { memo, useMemo, useEffect, useRef, Component, useCallback } from 'react';
 import { createShallowStore } from '@okyrychenko-dev/react-zustand-toolkit';
-import clsx2, { clsx } from 'clsx';
+import { clsx } from 'clsx';
 import { useStore } from 'zustand';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useShallow } from 'zustand/react/shallow';
@@ -10,122 +10,137 @@ import { useShallow } from 'zustand/react/shallow';
 
 // 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 {
@@ -134,40 +149,50 @@ var {
 } = 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();
 }
@@ -179,19 +204,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,
@@ -203,6 +238,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 = {};
 
@@ -274,19 +336,43 @@ var COLORS = {
 var shared_default = {};
 function Badge(props) {
   const { children, className, style } = props;
-  return /* @__PURE__ */ jsx("span", { className: clsx2(shared_default.badge, className), style, children });
+  return /* @__PURE__ */ jsx("span", { className: clsx(shared_default.badge, className), style, children });
 }
 var Badge_default = Badge;
 function Content(props) {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx2(shared_default.content, className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx(shared_default.content, className), children });
 }
 var Content_default = Content;
 function EmptyState(props) {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx2(shared_default.emptyState, className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx(shared_default.emptyState, className), children });
 }
 var EmptyState_default = EmptyState;
+var ErrorBoundary = class extends 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__ */ jsxs("div", { className: shared_default.errorBoundary, children: [
+        /* @__PURE__ */ jsx("span", { className: shared_default.errorTitle, children: "Devtools Error" }),
+        /* @__PURE__ */ 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 = clsx(shared_default.eventBadge, action && shared_default.eventBadgeAction, className);
@@ -295,7 +381,7 @@ function EventBadge(props) {
 var EventBadge_default = EventBadge;
 function IconButton(props) {
   const { children, className, type = "button", ...others } = props;
-  return /* @__PURE__ */ jsx("button", { type, className: clsx2(shared_default.iconButton, className), ...others, children });
+  return /* @__PURE__ */ jsx("button", { type, className: clsx(shared_default.iconButton, className), ...others, children });
 }
 var IconButton_default = IconButton;
 
@@ -595,7 +681,7 @@ function Timeline() {
   );
   const selectedEvent = selectedEventId ? events.find((e) => e.id === selectedEventId) : null;
   useEffect(() => {
-    if (selectedEventId && !allEvents.some((e) => e.id === selectedEventId)) {
+    if (selectedEventId && !allEvents.some((event) => event.id === selectedEventId)) {
       selectEvent(null);
     }
   }, [selectedEventId, allEvents, selectEvent]);
@@ -627,7 +713,7 @@ function Timeline() {
 var Timeline_default2 = Timeline;
 function DevtoolsPanelContent(props) {
   const { activeTab, store } = props;
-  return activeTab === "timeline" ? /* @__PURE__ */ jsx(Timeline_default2, {}) : /* @__PURE__ */ jsx(ActiveBlockers_default2, { store });
+  return /* @__PURE__ */ jsx(ErrorBoundary_default, { children: activeTab === "timeline" ? /* @__PURE__ */ jsx(Timeline_default2, {}) : /* @__PURE__ */ jsx(ActiveBlockers_default2, { store }) });
 }
 var DevtoolsPanelContent_default = DevtoolsPanelContent;
 var MaximizeIcon = createSvgIcon(/* @__PURE__ */ jsx("path", { d: "M3 3h18v2H3z" }));
@@ -792,41 +878,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 = useMemo(() => customStore ?? uiBlockingStoreApi, [customStore]);
   useEffect(() => {
@@ -841,9 +894,14 @@ function ActionGuardDevtools(props) {
     setOpen(defaultOpen);
     setMaxEvents(maxEvents);
   }, [defaultOpen, maxEvents, setOpen, setMaxEvents]);
-  const handleKeyDown = useCallback(
-    (event) => {
-      const action = getDevtoolsKeyboardAction(event, isOpen);
+  const stateRef = useRef({ isOpen, setOpen, togglePause, clearEvents });
+  useEffect(() => {
+    stateRef.current = { isOpen, setOpen, togglePause, clearEvents };
+  }, [isOpen, setOpen, togglePause, clearEvents]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const { isOpen: isOpen2, setOpen: setOpen2, togglePause: togglePause2, clearEvents: clearEvents2 } = stateRef.current;
+      const action = getDevtoolsKeyboardAction(event, isOpen2);
       if (!action) {
         return;
       }
@@ -852,28 +910,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]
-  );
-  useEffect(() => {
+    };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [handleKeyDown]);
+  }, []);
+  return /* @__PURE__ */ 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__ */ jsx(ActionGuardDevtoolsContent_default, { position, store: customStore });
+  return /* @__PURE__ */ jsx(ActionGuardDevtoolsInternal, { ...others });
 }
 var ActionGuardDevtools_default = ActionGuardDevtools;