@launchdarkly/toolbar 0.11.1-beta.1 → 0.13.0-beta.1

package/dist/types/events.d.ts

@@ -0,0 +1,64 @@
+export interface SyntheticEventContext {
+    readonly kind: EventKind;
+    readonly key?: string;
+    readonly context?: object;
+    readonly creationDate: number;
+    readonly data?: unknown;
+    readonly metricValue?: number;
+    readonly url?: string;
+    readonly value?: any;
+    readonly variation?: number | null;
+    readonly default?: any;
+    readonly reason?: object;
+    readonly version?: number;
+    readonly trackEvents?: boolean;
+    readonly debugEventsUntilDate?: number;
+    readonly contextKind?: string;
+}
+/**
+ * Valid event kinds that can be emitted by the LaunchDarkly SDK
+ */
+declare const VALID_EVENT_KINDS: readonly ["identify", "feature", "custom", "debug", "summary", "diagnostic"];
+/**
+ * Valid event categories used for organizing events
+ */
+declare const VALID_EVENT_CATEGORIES: readonly ["flag", "custom", "identify", "debug"];
+/**
+ * Strict typing for event kinds based on LaunchDarkly's event system
+ */
+export type EventKind = (typeof VALID_EVENT_KINDS)[number];
+/**
+ * Event categories for UI organization
+ */
+export type EventCategory = (typeof VALID_EVENT_CATEGORIES)[number];
+/**
+ * Enhanced processed event
+ */
+export interface ProcessedEvent {
+    readonly id: string;
+    readonly kind: EventKind;
+    readonly key?: string;
+    readonly timestamp: number;
+    readonly context: SyntheticEventContext;
+    readonly displayName: string;
+    readonly category: EventCategory;
+    readonly metadata?: Readonly<Record<string, unknown>>;
+}
+/**
+ * Event filter configuration
+ */
+export interface EventFilter {
+    readonly kinds?: ReadonlyArray<EventKind>;
+    readonly categories?: ReadonlyArray<EventCategory>;
+    readonly flagKeys?: ReadonlyArray<string>;
+    readonly timeRange?: {
+        readonly start: number;
+        readonly end: number;
+    };
+}
+/**
+ * Type guards for event validation
+ */
+export declare function isValidEventKind(kind: string): kind is EventKind;
+export declare function isValidEventCategory(category: string): category is EventCategory;
+export {};

package/dist/types/plugin.d.ts

@@ -1,4 +1,5 @@
 import type { LDClient, LDDebugOverride, LDFlagSet, LDFlagValue, LDPlugin } from 'launchdarkly-js-client-sdk';
+import type { ProcessedEvent } from './events';
 /**
  * Interface for flag override plugins that can be used with the LaunchDarkly Toolbar
  */
@@ -29,3 +30,23 @@ export interface IFlagOverridePlugin extends LDPlugin, LDDebugOverride {
      */
     getClient(): LDClient | null;
 }
+/**
+ * Interface for event interception plugins that can be used with the LaunchDarkly Toolbar
+ */
+export interface IEventInterceptionPlugin extends LDPlugin {
+    /**
+     * Gets all intercepted events from the event store
+     * @returns Array of processed events
+     */
+    getEvents(): ProcessedEvent[];
+    /**
+     * Subscribes to event store changes
+     * @param listener - Callback function to be called when events change
+     * @returns Unsubscribe function
+     */
+    subscribe(listener: () => void): () => void;
+    /**
+     * Clears all events from the event store
+     */
+    clearEvents(): void;
+}

package/dist/ui/Toolbar/LaunchDarklyToolbar.d.ts

@@ -1,14 +1,16 @@
 import { ToolbarMode, ToolbarPosition } from './types/toolbar';
-import type { IFlagOverridePlugin } from '../../types/plugin';
+import type { IEventInterceptionPlugin, IFlagOverridePlugin } from '../../types/plugin';
 export interface LdToolbarProps {
-    flagOverridePlugin?: IFlagOverridePlugin;
     mode: ToolbarMode;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
 }
 export declare function LdToolbar(props: LdToolbarProps): import("react/jsx-runtime").JSX.Element;
 export interface LaunchDarklyToolbarProps {
     devServerUrl?: string;
     projectKey?: string;
     flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
     pollIntervalInMs?: number;
     position?: ToolbarPosition;
 }

package/dist/ui/Toolbar/TabContent/EventsTabContent.css.d.ts

@@ -1,3 +1,21 @@
+export declare const statsHeader: string;
+export declare const statsText: string;
 export declare const eventInfo: string;
 export declare const eventName: string;
 export declare const eventMeta: string;
+export declare const eventBadge: string;
+export declare const eventBadgeFeature: string;
+export declare const eventBadgeIdentify: string;
+export declare const eventBadgeCustom: string;
+export declare const eventBadgeDebug: string;
+export declare const eventBadgeSummary: string;
+export declare const eventBadgeDiagnostic: string;
+export declare const eventBadgeDefault: string;
+export declare const virtualContainer: string;
+export declare const virtualInner: string;
+export declare const virtualItem: string;
+export declare const liveTailContainer: string;
+export declare const liveTailIndicator: string;
+export declare const liveTailDot: string;
+export declare const liveTailText: string;
+export declare const liveTailSubtext: string;

package/dist/ui/Toolbar/TabContent/EventsTabContent.d.ts

@@ -1 +1,6 @@
-export declare function EventsTabContent(): import("react/jsx-runtime").JSX.Element;
+import type { IEventInterceptionPlugin } from '../../../types/plugin';
+interface EventsTabContentProps {
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
+}
+export declare function EventsTabContent(props: EventsTabContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/Toolbar/components/DoNotTrackWarning.css.d.ts

@@ -0,0 +1,5 @@
+export declare const warningContainer: string;
+export declare const warningMessage: string;
+export declare const warningTitle: string;
+export declare const warningText: string;
+export declare const warningHelp: string;

package/dist/ui/Toolbar/components/DoNotTrackWarning.d.ts

@@ -0,0 +1 @@
+export declare function DoNotTrackWarning(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toolbar/components/ExpandedToolbarContent.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { ActiveTabId, ToolbarMode } from '../types';
-import type { IFlagOverridePlugin } from '../../../types/plugin';
+import type { IFlagOverridePlugin, IEventInterceptionPlugin } from '../../../types/plugin';
 interface ExpandedToolbarContentProps {
     isExpanded: boolean;
     activeTab: ActiveTabId;
@@ -11,8 +11,9 @@ interface ExpandedToolbarContentProps {
     onClose: () => void;
     onTabChange: (tabId: string) => void;
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
-    flagOverridePlugin?: IFlagOverridePlugin;
     mode: ToolbarMode;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
 }
 export declare function ExpandedToolbarContent(props: ExpandedToolbarContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/Toolbar/components/TabContentRenderer.d.ts

@@ -1,10 +1,11 @@
 import { TabId, ToolbarMode } from '../types';
-import type { IFlagOverridePlugin } from '../../../types/plugin';
+import type { IFlagOverridePlugin, IEventInterceptionPlugin } from '../../../types/plugin';
 interface TabContentRendererProps {
     activeTab: TabId;
     slideDirection: number;
-    flagOverridePlugin?: IFlagOverridePlugin;
     mode: ToolbarMode;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
 }
 export declare function TabContentRenderer(props: TabContentRendererProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/ui/Toolbar/components/index.d.ts

@@ -1,6 +1,7 @@
 export { ActionButtonsContainer } from './ActionButtonsContainer';
 export { CircleLogo } from './CircleLogo';
 export { ConnectionStatus } from './ConnectionStatus';
+export { DoNotTrackWarning } from './DoNotTrackWarning';
 export { ExpandedToolbarContent } from './ExpandedToolbarContent';
 export { LaunchDarklyIcon } from './icons/LaunchDarklyIcon';
 export { StatusDot } from './StatusDot';

package/dist/ui/Toolbar/constants/animations.d.ts

@@ -75,6 +75,33 @@ export declare const ANIMATION_CONFIG: {
         };
         readonly delay: 0.3;
     };
+    readonly eventList: {
+        readonly liveTail: {
+            readonly dot: {
+                readonly scale: number[];
+                readonly opacity: number[];
+                readonly transition: {
+                    readonly duration: 1.5;
+                    readonly repeat: number;
+                    readonly ease: "easeInOut";
+                };
+            };
+            readonly container: {
+                readonly initial: {
+                    readonly opacity: 0;
+                    readonly y: 20;
+                };
+                readonly animate: {
+                    readonly opacity: 1;
+                    readonly y: 0;
+                };
+                readonly transition: {
+                    readonly duration: 0.4;
+                    readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+                };
+            };
+        };
+    };
 };
 export declare const DIMENSIONS: {
     readonly collapsed: {

package/dist/ui/Toolbar/hooks/index.d.ts

@@ -3,3 +3,5 @@ export { useToolbarAnimations } from './useToolbarAnimations';
 export { useToolbarVisibility } from './useToolbarVisibility';
 export { useToolbarDrag } from './useToolbarDrag';
 export { useKeyPressed } from './useKeyPressed';
+export { useEvents } from './useEvents';
+export { useCurrentDate } from './useCurrentDate';

package/dist/ui/Toolbar/hooks/useCurrentDate.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook that provides the current date and updates it at a specified interval
+ * Useful for displaying relative timestamps that update in real-time
+ */
+export declare function useCurrentDate(updateInterval?: number): Date;

package/dist/ui/Toolbar/hooks/useEvents.d.ts

@@ -0,0 +1,13 @@
+import type { ProcessedEvent } from '../../../types/events';
+import { IEventInterceptionPlugin } from '../../../types/plugin';
+interface EventStats {
+    totalEvents: number;
+    eventsByKind: Record<string, number>;
+    eventsByFlag: Record<string, number>;
+}
+interface UseEventsReturn {
+    events: ProcessedEvent[];
+    eventStats: EventStats;
+}
+export declare function useEvents(eventInterceptionPlugin: IEventInterceptionPlugin | undefined, searchTerm?: string): UseEventsReturn;
+export {};

package/dist/ui/Toolbar/types/toolbar.d.ts

@@ -1,12 +1,12 @@
-export type TabId = 'flag-sdk' | 'flag-dev-server' | 'settings';
+export type TabId = 'flag-sdk' | 'flag-dev-server' | 'events' | 'settings';
 export type ActiveTabId = TabId | undefined;
 export declare const TAB_ORDER: readonly TabId[];
 export type ToolbarMode = 'dev-server' | 'sdk';
 export declare const DEV_SERVER_TABS: readonly TabId[];
 export declare const SDK_MODE_TABS: readonly TabId[];
 export declare function getToolbarMode(devServerUrl?: string): ToolbarMode;
-export declare function getTabsForMode(mode: ToolbarMode, hasFlagOverridePlugin: boolean): readonly TabId[];
-export declare function getDefaultActiveTab(mode: ToolbarMode): TabId;
+export declare function getTabsForMode(mode: ToolbarMode, hasFlagOverridePlugin: boolean, hasEventInterceptionPlugin: boolean): readonly TabId[];
+export declare function getDefaultActiveTab(mode: ToolbarMode, hasFlagOverridePlugin?: boolean, hasEventInterceptionPlugin?: boolean): TabId;
 export interface FeatureFlag {
     id: string;
     name: string;

package/dist/utils/browser.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Utility function to detect if Do Not Track is enabled
+ * Based on the same logic used in LaunchDarkly SDK
+ *
+ * @returns {boolean} true if Do Not Track is enabled, false otherwise
+ */
+export declare function isDoNotTrackEnabled(): boolean;

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export { deepEqual } from './deepEqual';
+export { isDoNotTrackEnabled } from './browser';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchdarkly/toolbar",
-  "version": "0.11.1-beta.1",
+  "version": "0.13.0-beta.1",
   "description": "A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development",
   "keywords": [
     "launchdarkly",
@@ -23,10 +23,23 @@
   "homepage": "https://github.com/launchdarkly/launchdarkly-toolbar#readme",
   "main": "./dist/js/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "./dist/js/index.js",
+    "./dist/static/**/*",
+    "*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/js/index.js"
+    },
+    "./plugins": {
+      "types": "./dist/plugins/index.d.ts",
+      "import": "./dist/js/plugins/index.js"
+    },
+    "./plugins/FlagOverridePlugin": {
+      "types": "./dist/plugins/FlagOverridePlugin.d.ts",
+      "import": "./dist/js/plugins/FlagOverridePlugin.js"
     }
   },
   "files": [
@@ -62,9 +75,9 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.53.1",
-    "@rsbuild/core": "1.4.12",
-    "@rsbuild/plugin-react": "^1.3.4",
-    "@rslib/core": "^0.11.1",
+    "@rsbuild/core": "1.5.4",
+    "@rsbuild/plugin-react": "^1.4.0",
+    "@rslib/core": "^0.13.0",
     "@storybook/addon-docs": "^9.0.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-interactions": "^9.0.0-alpha.10",
@@ -93,8 +106,7 @@
   },
   "peerDependencies": {
     "launchdarkly-js-client-sdk": "^3.9.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "private": false,
   "publishConfig": {