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

package/dist/index.js

@@ -0,0 +1,882 @@
+import { uiBlockingStoreApi } from '@okyrychenko-dev/react-action-guard';
+import { memo, useMemo, useEffect, useCallback } from 'react';
+import { createShallowStore } from '@okyrychenko-dev/react-zustand-toolkit';
+import clsx2, { clsx } from 'clsx';
+import { useStore } from 'zustand';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useShallow } from 'zustand/react/shallow';
+
+// src/components/actionGuardDevtools/ActionGuardDevtools.tsx
+
+// src/store/devtoolsStore.constants.ts
+var DEFAULT_FILTER = {
+  actions: ["add", "remove", "update", "cancel", "timeout"],
+  scopes: [],
+  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;
+    }
+    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: 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 };
+    });
+  }
+});
+
+// src/store/devtoolsStore.store.ts
+var {
+  useStore: useDevtoolsStore,
+  useStoreApi: devtoolsStoreApi
+} = createShallowStore(createDevtoolsActions);
+
+// src/store/devtoolsStore.selectors.ts
+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;
+  });
+}
+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));
+    }
+  });
+  return Array.from(scopes).sort();
+}
+function selectAllEvents(state) {
+  return state.events;
+}
+
+// src/middleware/devtoolsMiddleware.ts
+var DEVTOOLS_MIDDLEWARE_NAME = "action-guard-devtools";
+function createDevtoolsMiddleware() {
+  const addTimestamps = /* @__PURE__ */ new Map();
+  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);
+      }
+    }
+    addEvent({
+      action: context.action,
+      blockerId: context.blockerId,
+      config: context.config,
+      timestamp: context.timestamp,
+      prevState: context.prevState,
+      duration
+    });
+  };
+}
+
+// src/styles/position.module.css
+var position_default = {};
+
+// src/components/devtoolsPanel/DevtoolsPanel.module.css
+var DevtoolsPanel_default = {};
+
+// src/components/devtoolsPanel/DevtoolsPanel.utils.ts
+function getPositionClass(position) {
+  return position === "left" ? position_default.positionLeft : position_default.positionRight;
+}
+function getPanelClassName(position, isMinimized) {
+  return clsx(
+    DevtoolsPanel_default.panel,
+    position_default.positionBase,
+    getPositionClass(position),
+    position_default.overlayLayer,
+    isMinimized ? DevtoolsPanel_default.panelMinimized : DevtoolsPanel_default.panelExpanded
+  );
+}
+
+// src/components/activeBlockers/ActiveBlockers.utils.ts
+function formatScope(scope) {
+  if (Array.isArray(scope)) {
+    return scope.join(", ");
+  }
+  return scope;
+}
+function formatTimestamp(timestamp) {
+  const seconds = Math.floor((Date.now() - timestamp) / 1e3);
+  if (seconds < 60) {
+    return `${String(seconds)}s ago`;
+  }
+  if (seconds < 3600) {
+    return `${String(Math.floor(seconds / 60))}m ago`;
+  }
+  return `${String(Math.floor(seconds / 3600))}h ago`;
+}
+function getSortedBlockers(activeBlockers) {
+  return Array.from(activeBlockers.entries()).sort(([, a], [, b]) => b.priority - a.priority);
+}
+function createSvgIcon(children, { viewBox = "0 0 24 24" } = {}) {
+  return function SvgIcon(props) {
+    const { size = 16, color = "currentColor" } = props;
+    return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox, fill: color, children });
+  };
+}
+var BlockIcon = createSvgIcon(
+  /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12m8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8" })
+);
+var CloseIcon = createSvgIcon(
+  /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+);
+var MinimizeIcon = createSvgIcon(/* @__PURE__ */ jsx("path", { d: "M6 19h12v2H6z" }));
+var PauseIcon = createSvgIcon(/* @__PURE__ */ jsx("path", { d: "M6 19h4V5H6zm8-14v14h4V5z" }));
+var PlayIcon = createSvgIcon(/* @__PURE__ */ jsx("path", { d: "M10 8.64 15.27 12 10 15.36zM8 5v14l11-7z" }));
+var ShieldIcon = createSvgIcon(
+  /* @__PURE__ */ jsx("path", { d: "M12 2 4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5zm6 9.09c0 4-2.55 7.7-6 8.83-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25 6 2.25z" })
+);
+var TrashIcon = createSvgIcon(
+  /* @__PURE__ */ jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5-1-1h-5l-1 1H5v2h14V4z" })
+);
+
+// src/styles/tokens.ts
+var COLORS = {
+  primary: "var(--ag-primary)",
+  textDim: "var(--ag-text-dim)"};
+
+// src/styles/shared.module.css
+var shared_default = {};
+function Badge(props) {
+  const { children, className, style } = props;
+  return /* @__PURE__ */ jsx("span", { className: clsx2(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 });
+}
+var Content_default = Content;
+function EmptyState(props) {
+  const { children, className } = props;
+  return /* @__PURE__ */ jsx("div", { className: clsx2(shared_default.emptyState, className), children });
+}
+var EmptyState_default = EmptyState;
+function EventBadge(props) {
+  const { children, className, style, action } = props;
+  const classes = clsx(shared_default.eventBadge, action && shared_default.eventBadgeAction, className);
+  return /* @__PURE__ */ 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__ */ jsx("button", { type, className: clsx2(shared_default.iconButton, className), ...others, children });
+}
+var IconButton_default = IconButton;
+
+// src/components/activeBlockers/ActiveBlockers.module.css
+var ActiveBlockers_default = {};
+function ActiveBlockersEmptyState() {
+  return /* @__PURE__ */ jsxs(EmptyState_default, { children: [
+    /* @__PURE__ */ jsx("span", { className: ActiveBlockers_default.emptyIcon, children: /* @__PURE__ */ jsx(BlockIcon, { size: 32, color: COLORS.textDim }) }),
+    /* @__PURE__ */ jsx("p", { className: ActiveBlockers_default.emptyTitle, children: "No active blockers" }),
+    /* @__PURE__ */ jsx("p", { className: ActiveBlockers_default.emptySubtext, children: "The UI is currently unblocked." })
+  ] });
+}
+var ActiveBlockersEmptyState_default = ActiveBlockersEmptyState;
+function ActiveBlockerItem(props) {
+  const { id, blocker } = props;
+  return /* @__PURE__ */ jsxs("div", { className: ActiveBlockers_default.blockerItem, children: [
+    /* @__PURE__ */ jsxs("div", { className: ActiveBlockers_default.blockerHeader, children: [
+      /* @__PURE__ */ jsx("span", { className: ActiveBlockers_default.blockerId, children: id }),
+      /* @__PURE__ */ jsx(Badge_default, { className: ActiveBlockers_default.activeBadge, children: "Active" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: ActiveBlockers_default.blockerMeta, children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Scope: ",
+        formatScope(blocker.scope)
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Priority: ",
+        blocker.priority
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Reason: ",
+        blocker.reason
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Started: ",
+        formatTimestamp(blocker.timestamp)
+      ] })
+    ] })
+  ] });
+}
+var ActiveBlockerItem_default = ActiveBlockerItem;
+function ActiveBlockersList(props) {
+  const { blockers } = props;
+  return /* @__PURE__ */ jsx(Content_default, { children: blockers.map(([id, blocker]) => /* @__PURE__ */ jsx(ActiveBlockerItem_default, { id, blocker }, id)) });
+}
+var ActiveBlockersList_default = ActiveBlockersList;
+function ActiveBlockers(props) {
+  const { store } = props;
+  const targetStore = store ?? uiBlockingStoreApi;
+  const activeBlockers = useStore(targetStore, (state) => state.activeBlockers);
+  const blockers = useMemo(() => getSortedBlockers(activeBlockers), [activeBlockers]);
+  if (blockers.length === 0) {
+    return /* @__PURE__ */ jsx(ActiveBlockersEmptyState_default, {});
+  }
+  return /* @__PURE__ */ jsx(ActiveBlockersList_default, { blockers });
+}
+var ActiveBlockers_default2 = ActiveBlockers;
+
+// src/components/eventDetails/EventDetails.module.css
+var EventDetails_default = {};
+
+// src/components/eventItem/EventItem.module.css
+var EventItem_default = {};
+
+// src/components/eventItem/EventItem.utils.ts
+function formatDuration(ms) {
+  if (ms < 1e3) {
+    return `${String(ms)}ms`;
+  }
+  if (ms < 6e4) {
+    return `${(ms / 1e3).toFixed(1)}s`;
+  }
+  return `${(ms / 6e4).toFixed(1)}m`;
+}
+function formatScope2(scope) {
+  if (!scope) {
+    return "global";
+  }
+  if (Array.isArray(scope)) {
+    return scope.join(", ");
+  }
+  return scope;
+}
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function EventItemDetails(props) {
+  const { event } = props;
+  const { config, duration } = event;
+  return /* @__PURE__ */ jsxs("div", { className: EventItem_default.eventDetails, children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      "scope: ",
+      formatScope2(config?.scope)
+    ] }),
+    duration !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+      "duration: ",
+      formatDuration(duration)
+    ] }),
+    config?.priority !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+      "priority: ",
+      config.priority
+    ] })
+  ] });
+}
+var EventItemDetails_default = EventItemDetails;
+function EventItemHeader(props) {
+  const { event } = props;
+  const { action, blockerId, timestamp } = event;
+  return /* @__PURE__ */ jsxs("div", { className: EventItem_default.eventHeader, children: [
+    /* @__PURE__ */ jsx(EventBadge_default, { action, children: action }),
+    /* @__PURE__ */ jsx("span", { className: EventItem_default.eventBlockerId, children: blockerId }),
+    /* @__PURE__ */ jsx("span", { className: EventItem_default.eventTime, children: formatTime(timestamp) })
+  ] });
+}
+var EventItemHeader_default = EventItemHeader;
+function EventItem(props) {
+  const { event, selected, onSelect } = props;
+  const handleSelect = () => {
+    onSelect(selected ? null : event.id);
+  };
+  return /* @__PURE__ */ jsxs("li", { className: clsx(EventItem_default.eventItem, selected && EventItem_default.selected), onClick: handleSelect, children: [
+    /* @__PURE__ */ jsx(EventItemHeader_default, { event }),
+    /* @__PURE__ */ jsx(EventItemDetails_default, { event })
+  ] });
+}
+var EventItem_default2 = memo(EventItem);
+
+// src/components/eventDetails/EventDetails.utils.ts
+function formatFullTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleString("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  });
+}
+function formatRelativeTime(timestamp) {
+  const seconds = Math.floor((Date.now() - timestamp) / 1e3);
+  if (seconds < 60) {
+    return `${String(seconds)}s ago`;
+  }
+  if (seconds < 3600) {
+    return `${String(Math.floor(seconds / 60))}m ago`;
+  }
+  return `${String(Math.floor(seconds / 3600))}h ago`;
+}
+function EventDetailsContent(props) {
+  const { event } = props;
+  return /* @__PURE__ */ jsxs("div", { className: EventDetails_default.content, children: [
+    /* @__PURE__ */ jsxs("div", { className: EventDetails_default.section, children: [
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.label, children: "Blocker ID" }),
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.value, children: event.blockerId })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: EventDetails_default.section, children: [
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.label, children: "Timestamp" }),
+      /* @__PURE__ */ jsxs("div", { className: EventDetails_default.value, children: [
+        formatFullTimestamp(event.timestamp),
+        /* @__PURE__ */ jsxs("span", { className: EventDetails_default.mutedInline, children: [
+          "(",
+          formatRelativeTime(event.timestamp),
+          ")"
+        ] })
+      ] })
+    ] }),
+    event.duration !== void 0 && /* @__PURE__ */ jsxs("div", { className: EventDetails_default.section, children: [
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.label, children: "Duration" }),
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.value, children: formatDuration(event.duration) })
+    ] }),
+    event.config && /* @__PURE__ */ jsxs("div", { className: EventDetails_default.section, children: [
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.label, children: "Config" }),
+      /* @__PURE__ */ jsxs("div", { className: EventDetails_default.config, children: [
+        event.config.scope !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: EventDetails_default.mutedLabel, children: "scope: " }),
+          formatScope2(event.config.scope)
+        ] }),
+        event.config.reason !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: EventDetails_default.mutedLabel, children: "reason: " }),
+          event.config.reason
+        ] }),
+        event.config.priority !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: EventDetails_default.mutedLabel, children: "priority: " }),
+          event.config.priority
+        ] })
+      ] })
+    ] }),
+    event.prevState && /* @__PURE__ */ jsxs("div", { className: EventDetails_default.section, children: [
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.label, children: "Previous State" }),
+      /* @__PURE__ */ jsxs("div", { className: EventDetails_default.config, children: [
+        event.prevState.scope !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: EventDetails_default.mutedLabel, children: "scope: " }),
+          formatScope2(event.prevState.scope)
+        ] }),
+        event.prevState.reason !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: EventDetails_default.mutedLabel, children: "reason: " }),
+          event.prevState.reason
+        ] }),
+        event.prevState.priority !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: EventDetails_default.mutedLabel, children: "priority: " }),
+          event.prevState.priority
+        ] })
+      ] })
+    ] }),
+    event.source && /* @__PURE__ */ jsxs("div", { className: EventDetails_default.section, children: [
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.label, children: "Source" }),
+      /* @__PURE__ */ jsx("div", { className: EventDetails_default.value, children: event.source })
+    ] })
+  ] });
+}
+var EventDetailsContent_default = EventDetailsContent;
+function EventDetailsHeader(props) {
+  const { action, onClose } = props;
+  return /* @__PURE__ */ jsxs("div", { className: EventDetails_default.header, children: [
+    /* @__PURE__ */ jsx(EventBadge_default, { action, children: action }),
+    /* @__PURE__ */ jsx(IconButton_default, { title: "Close details", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { size: 16 }) })
+  ] });
+}
+var EventDetailsHeader_default = EventDetailsHeader;
+function EventDetails(props) {
+  const { event, onClose } = props;
+  return /* @__PURE__ */ jsxs("div", { className: EventDetails_default.panel, children: [
+    /* @__PURE__ */ jsx(EventDetailsHeader_default, { action: event.action, onClose }),
+    /* @__PURE__ */ jsx(EventDetailsContent_default, { event })
+  ] });
+}
+var EventDetails_default2 = EventDetails;
+
+// src/components/timeline/Timeline.utils.ts
+function isFilterActive(filter) {
+  if (filter.search.length > 0 || filter.scopes.length > 0) {
+    return true;
+  }
+  if (filter.actions.length !== DEFAULT_FILTER.actions.length) {
+    return true;
+  }
+  return !DEFAULT_FILTER.actions.every((action) => filter.actions.includes(action));
+}
+
+// src/components/timeline/Timeline.module.css
+var Timeline_default = {};
+function TimelineContent(props) {
+  const { events, selectedEventId, onSelectEvent } = props;
+  return /* @__PURE__ */ jsxs(Content_default, { children: [
+    events.length === 0 && /* @__PURE__ */ jsx(EmptyState_default, { children: "No matching events" }),
+    events.length > 0 && /* @__PURE__ */ jsx("ul", { className: Timeline_default.eventList, children: events.map((event) => /* @__PURE__ */ jsx(
+      EventItem_default2,
+      {
+        event,
+        selected: selectedEventId === event.id,
+        onSelect: onSelectEvent
+      },
+      event.id
+    )) })
+  ] });
+}
+var TimelineContent_default = TimelineContent;
+function TimelineEmptyState() {
+  return /* @__PURE__ */ jsxs(EmptyState_default, { children: [
+    /* @__PURE__ */ jsx("p", { children: "No events recorded yet." }),
+    /* @__PURE__ */ jsx("p", { className: Timeline_default.emptyHint, children: "Events will appear here as blockers are added/removed." })
+  ] });
+}
+var TimelineEmptyState_default = TimelineEmptyState;
+function TimelineToolbar(props) {
+  const { search, onSearchChange } = props;
+  return /* @__PURE__ */ jsx("div", { className: Timeline_default.toolbar, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      placeholder: "Search by ID or reason...",
+      value: search,
+      className: Timeline_default.searchInput,
+      onChange: onSearchChange
+    }
+  ) });
+}
+var TimelineToolbar_default = TimelineToolbar;
+function Timeline() {
+  const events = useDevtoolsStore(selectFilteredEvents);
+  const allEvents = useDevtoolsStore(selectAllEvents);
+  const { selectedEventId, selectEvent, filter, setFilter } = useDevtoolsStore(
+    useShallow((state) => ({
+      selectedEventId: state.selectedEventId,
+      selectEvent: state.selectEvent,
+      filter: state.filter,
+      setFilter: state.setFilter
+    }))
+  );
+  const selectedEvent = selectedEventId ? events.find((e) => e.id === selectedEventId) : null;
+  useEffect(() => {
+    if (selectedEventId && !allEvents.some((e) => e.id === selectedEventId)) {
+      selectEvent(null);
+    }
+  }, [selectedEventId, allEvents, selectEvent]);
+  const handleSearchChange = useCallback(
+    (e) => {
+      setFilter({ search: e.target.value });
+    },
+    [setFilter]
+  );
+  const handleCloseDetails = useCallback(() => {
+    selectEvent(null);
+  }, [selectEvent]);
+  if (events.length === 0 && !isFilterActive(filter)) {
+    return /* @__PURE__ */ jsx(TimelineEmptyState_default, {});
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TimelineToolbar_default, { search: filter.search, onSearchChange: handleSearchChange }),
+    /* @__PURE__ */ jsx(
+      TimelineContent_default,
+      {
+        events,
+        selectedEventId,
+        onSelectEvent: selectEvent
+      }
+    ),
+    selectedEvent && /* @__PURE__ */ jsx(EventDetails_default2, { event: selectedEvent, onClose: handleCloseDetails })
+  ] });
+}
+var Timeline_default2 = Timeline;
+function DevtoolsPanelContent(props) {
+  const { activeTab, store } = props;
+  return activeTab === "timeline" ? /* @__PURE__ */ jsx(Timeline_default2, {}) : /* @__PURE__ */ jsx(ActiveBlockers_default2, { store });
+}
+var DevtoolsPanelContent_default = DevtoolsPanelContent;
+var MaximizeIcon = createSvgIcon(/* @__PURE__ */ jsx("path", { d: "M3 3h18v2H3z" }));
+function getPauseButtonTitle(isPaused) {
+  return isPaused ? "Resume recording" : "Pause recording";
+}
+function getMinimizeButtonTitle(isMinimized) {
+  return isMinimized ? "Maximize" : "Minimize";
+}
+function getPauseButtonClassName(isPaused) {
+  return clsx(isPaused && DevtoolsPanel_default.pauseButtonActive);
+}
+function DevtoolsPanelHeader(props) {
+  const {
+    eventsCount,
+    isPaused,
+    isMinimized,
+    onTogglePause,
+    onClearEvents,
+    onToggleMinimized,
+    onClose
+  } = props;
+  return /* @__PURE__ */ jsxs("div", { className: DevtoolsPanel_default.header, children: [
+    /* @__PURE__ */ jsxs("div", { className: DevtoolsPanel_default.headerTitle, children: [
+      /* @__PURE__ */ jsx(ShieldIcon, { size: 16, color: COLORS.primary }),
+      /* @__PURE__ */ jsx("span", { children: "Action Guard" }),
+      /* @__PURE__ */ jsx(Badge_default, { className: DevtoolsPanel_default.headerCount, children: eventsCount })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: DevtoolsPanel_default.headerActions, children: [
+      /* @__PURE__ */ jsx(
+        IconButton_default,
+        {
+          className: getPauseButtonClassName(isPaused),
+          title: getPauseButtonTitle(isPaused),
+          onClick: onTogglePause,
+          children: isPaused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(IconButton_default, { title: "Clear events", onClick: onClearEvents, children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
+      /* @__PURE__ */ jsx(IconButton_default, { title: getMinimizeButtonTitle(isMinimized), onClick: onToggleMinimized, children: isMinimized ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(MaximizeIcon, {}) }),
+      /* @__PURE__ */ jsx(IconButton_default, { title: "Close", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+    ] })
+  ] });
+}
+var DevtoolsPanelHeader_default = DevtoolsPanelHeader;
+
+// src/components/devtoolsPanel/DevtoolsPanelTabs.utils.ts
+var DEVTOOLS_TABS = [
+  { id: "timeline", label: "Timeline" },
+  { id: "blockers", label: "Active Blockers" }
+];
+function DevtoolsPanelTabs(props) {
+  const { activeTab, onSelectTab } = props;
+  return /* @__PURE__ */ jsx("div", { className: DevtoolsPanel_default.tabs, children: DEVTOOLS_TABS.map((tab) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => {
+        onSelectTab(tab.id);
+      },
+      className: clsx(DevtoolsPanel_default.tab, activeTab === tab.id && DevtoolsPanel_default.tabActive),
+      children: tab.label
+    },
+    tab.id
+  )) });
+}
+var DevtoolsPanelTabs_default = DevtoolsPanelTabs;
+function DevtoolsPanel(props) {
+  const { position, store } = props;
+  const {
+    isOpen,
+    isMinimized,
+    activeTab,
+    setActiveTab,
+    toggleOpen,
+    toggleMinimized,
+    clearEvents,
+    isPaused,
+    togglePause,
+    events
+  } = useDevtoolsStore();
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: getPanelClassName(position, isMinimized), children: [
+    /* @__PURE__ */ jsx(
+      DevtoolsPanelHeader_default,
+      {
+        eventsCount: events.length,
+        isPaused,
+        isMinimized,
+        onTogglePause: togglePause,
+        onClearEvents: clearEvents,
+        onToggleMinimized: toggleMinimized,
+        onClose: toggleOpen
+      }
+    ),
+    !isMinimized && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DevtoolsPanelTabs_default, { activeTab, onSelectTab: setActiveTab }),
+      /* @__PURE__ */ jsx(DevtoolsPanelContent_default, { activeTab, store })
+    ] })
+  ] });
+}
+var DevtoolsPanel_default2 = DevtoolsPanel;
+
+// src/components/toggleButton/ToggleButton.module.css
+var ToggleButton_default = {};
+
+// src/components/toggleButton/ToggleButton.utils.ts
+function getPositionClass2(position) {
+  return position === "left" ? position_default.positionLeft : position_default.positionRight;
+}
+function getToggleButtonClassName(position) {
+  return clsx(
+    ToggleButton_default.toggleButton,
+    position_default.positionBase,
+    getPositionClass2(position),
+    position_default.overlayLayer
+  );
+}
+function shouldShowBadge(count) {
+  return count > 0;
+}
+function getBadgeClassName(isPaused) {
+  return clsx(ToggleButton_default.badgePosition, isPaused ? ToggleButton_default.badgePaused : ToggleButton_default.badgeActive);
+}
+function ToggleButtonBadge(props) {
+  const { count, isPaused } = props;
+  if (!shouldShowBadge(count)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Badge_default, { className: getBadgeClassName(isPaused), children: count });
+}
+var ToggleButtonBadge_default = ToggleButtonBadge;
+function ToggleButton(props) {
+  const { position, store } = props;
+  const { isOpen, toggleOpen, isPaused } = useDevtoolsStore();
+  const targetStore = store ?? uiBlockingStoreApi;
+  const activeBlockers = useStore(targetStore, (state) => state.activeBlockers);
+  const activeCount = activeBlockers.size;
+  if (isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: getToggleButtonClassName(position),
+      title: "Open Action Guard Devtools",
+      onClick: toggleOpen,
+      children: [
+        /* @__PURE__ */ jsx(ShieldIcon, { size: 22 }),
+        /* @__PURE__ */ jsx(ToggleButtonBadge_default, { count: activeCount, isPaused })
+      ]
+    }
+  );
+}
+var ToggleButton_default2 = ToggleButton;
+function ActionGuardDevtoolsContent(props) {
+  const { position, store } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ToggleButton_default2, { position, store }),
+    /* @__PURE__ */ jsx(DevtoolsPanel_default2, { position, store })
+  ] });
+}
+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;
+  const { setOpen, setMaxEvents, isOpen, togglePause, clearEvents } = useDevtoolsStore();
+  const targetStore = useMemo(() => customStore ?? uiBlockingStoreApi, [customStore]);
+  useEffect(() => {
+    const storeState = targetStore.getState();
+    const middleware = createDevtoolsMiddleware();
+    storeState.registerMiddleware(DEVTOOLS_MIDDLEWARE_NAME, middleware);
+    return () => {
+      storeState.unregisterMiddleware(DEVTOOLS_MIDDLEWARE_NAME);
+    };
+  }, [targetStore]);
+  useEffect(() => {
+    setOpen(defaultOpen);
+    setMaxEvents(maxEvents);
+  }, [defaultOpen, maxEvents, setOpen, setMaxEvents]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      const action = getDevtoolsKeyboardAction(event, isOpen);
+      if (!action) {
+        return;
+      }
+      if (action.preventDefault) {
+        event.preventDefault();
+      }
+      switch (action.action) {
+        case "close":
+          setOpen(false);
+          break;
+        case "togglePause":
+          togglePause();
+          break;
+        case "clearEvents":
+          clearEvents();
+          break;
+      }
+    },
+    [isOpen, setOpen, togglePause, clearEvents]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  if (process.env.NODE_ENV === "production" && !showInProduction) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ActionGuardDevtoolsContent_default, { position, store: customStore });
+}
+var ActionGuardDevtools_default = ActionGuardDevtools;
+
+export { ActionGuardDevtools_default as ActionGuardDevtools, DEVTOOLS_MIDDLEWARE_NAME, createDevtoolsMiddleware, selectFilteredEvents, selectUniqueScopes, useDevtoolsStore };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map