@launchdarkly/toolbar 2.0.0-beta.1 → 2.1.0

package/dist/core/ui/Toolbar/context/telemetry/AnalyticsPreferencesProvider.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface AnalyticsPreferencesContextValue {
+    isOptedInToAnalytics: boolean;
+    isOptedInToEnhancedAnalytics: boolean;
+    isOptedInToSessionReplay: boolean;
+    handleToggleAnalyticsOptOut: (enabled: boolean) => void;
+    handleToggleEnhancedAnalyticsOptOut: (enabled: boolean) => void;
+    handleToggleSessionReplayOptOut: (enabled: boolean) => void;
+}
+export interface AnalyticsPreferencesProviderProps {
+    children: ReactNode;
+}
+export declare function AnalyticsPreferencesProvider({ children }: AnalyticsPreferencesProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAnalyticsPreferences(): AnalyticsPreferencesContextValue;

package/dist/core/ui/Toolbar/context/{AnalyticsProvider.d.ts → telemetry/AnalyticsProvider.d.ts}

@@ -1,5 +1,5 @@
-import { ToolbarAnalytics } from '../../../utils/analytics';
-import { ToolbarMode } from '../types';
+import { ToolbarAnalytics } from '../../../../utils/analytics';
+import { ToolbarMode } from '../../types';
 interface AnalyticsProviderProps {
     children: React.ReactNode;
     mode?: ToolbarMode;

package/dist/core/ui/Toolbar/context/{InternalClientProvider.d.ts → telemetry/InternalClientProvider.d.ts}

@@ -20,6 +20,10 @@ export interface InternalClientContextValue {
      * Error during initialization, if any.
      */
     error: Error | null;
+    /**
+     * Update the client context with new member/account information.
+     */
+    updateContext: (accountId: string, memberId: string) => Promise<void>;
 }
 export interface InternalClientProviderProps {
     children: ReactNode;
@@ -52,6 +56,16 @@ export interface InternalClientProviderProps {
      * Set this if using a custom LaunchDarkly instance.
      */
     eventsUrl?: string;
+    /**
+     * Backend URL for Observability and Session Replay.
+     * Defaults to standard LaunchDarkly observability backend.
+     */
+    backendUrl?: string;
+    /**
+     * OTLP HTTP endpoint for Observability tracing (OpenTelemetry).
+     * If not provided, Observability will use its default endpoint.
+     */
+    observabilityOtlpEndpoint?: string;
 }
 /**
  * InternalClientProvider manages the toolbar's internal LaunchDarkly client.
@@ -63,7 +77,7 @@ export interface InternalClientProviderProps {
  *
  * The external client (user's app client) is accessed separately via plugins.
  */
-export declare function InternalClientProvider({ children, clientSideId, initialContext, baseUrl, streamUrl, eventsUrl, }: InternalClientProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalClientProvider({ children, clientSideId, initialContext, baseUrl, streamUrl, eventsUrl, backendUrl, observabilityOtlpEndpoint, }: InternalClientProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access the internal LaunchDarkly client.
  */

package/dist/core/ui/Toolbar/context/telemetry/TelemetryBundleProvider.d.ts

@@ -0,0 +1,13 @@
+import { ToolbarMode } from '../../types';
+interface TelemetryBundleProviderProps {
+    mode: ToolbarMode;
+    baseUrl?: string;
+    clientSideId?: string;
+    streamUrl?: string;
+    eventsUrl?: string;
+    backendUrl?: string;
+    observabilityOtlpEndpoint?: string;
+    children: React.ReactNode;
+}
+export declare function TelemetryBundleProvider(props: TelemetryBundleProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/context/telemetry/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TelemetryBundleProvider';
+export * from './AnalyticsProvider';
+export * from './InternalClientProvider';
+export * from './AnalyticsPreferencesProvider';

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

@@ -1,6 +1,7 @@
-export { useToolbarState } from './useToolbarState';
 export { useToolbarAnimations } from './useToolbarAnimations';
 export { useToolbarVisibility } from './useToolbarVisibility';
 export { useToolbarDrag } from './useToolbarDrag';
 export { useEvents } from './useEvents';
 export { useCurrentDate } from './useCurrentDate';
+export { useLocalStorage } from './useLocalStorage';
+export { useReducedMotion } from './useReducedMotion';

package/dist/core/ui/Toolbar/hooks/useLocalStorage.d.ts

@@ -0,0 +1,10 @@
+interface UseLocalStorageOptions<T> {
+    /** Sync across browser tabs (default: false) */
+    syncTabs?: boolean;
+    /** Custom serializer (default: JSON.stringify) */
+    serialize?: (value: T) => string;
+    /** Custom deserializer (default: JSON.parse) */
+    deserialize?: (value: string) => T;
+}
+export declare function useLocalStorage<T>(key: string, defaultValue: T, options?: UseLocalStorageOptions<T>): [T, (value: T | ((prev: T) => T)) => void, () => void];
+export {};

package/dist/core/ui/Toolbar/hooks/useReducedMotion.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to detect user's reduced motion preference.
+ * Returns true if the user has requested reduced motion in their OS settings.
+ */
+export declare function useReducedMotion(): boolean;

package/dist/core/ui/Toolbar/hooks/useToolbarAnimations.d.ts

@@ -6,7 +6,7 @@ export interface UseToolbarAnimationsProps {
     onExpandComplete?: () => void;
     onCollapseComplete?: () => void;
 }
-type AnimationConfig = typeof ANIMATION_CONFIG.containerExpand | typeof ANIMATION_CONFIG.containerCollapse;
+type AnimationConfig = typeof ANIMATION_CONFIG.containerExpand | typeof ANIMATION_CONFIG.containerCollapse | typeof ANIMATION_CONFIG.containerInstant;
 export interface UseToolbarAnimationsReturn {
     containerAnimations: {
         width: number;

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

@@ -1,12 +1,13 @@
-export type TabId = 'flag-sdk' | 'flag-dev-server' | 'events' | 'settings';
+export type TabId = 'flag-sdk' | 'flag-dev-server' | 'events' | 'settings' | 'flags' | 'monitoring' | 'interactive' | 'ai' | 'optimize';
 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 const NEW_TOOLBAR_TABS: readonly TabId[];
 export declare function getToolbarMode(devServerUrl?: string): ToolbarMode;
 export declare function getTabsForMode(mode: ToolbarMode, hasFlagOverridePlugin: boolean, hasEventInterceptionPlugin: boolean): readonly TabId[];
-export declare function getDefaultActiveTab(mode: ToolbarMode, hasFlagOverridePlugin?: boolean, hasEventInterceptionPlugin?: boolean): TabId;
+export declare function getDefaultActiveTab(mode: ToolbarMode, hasFlagOverridePlugin?: boolean, hasEventInterceptionPlugin?: boolean, useNewToolbarDesign?: boolean): TabId;
 export interface FeatureFlag {
     id: string;
     name: string;

package/dist/core/ui/Toolbar/utils/clipboard.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copy text to clipboard with fallback for older browsers
+ * @param text - The text to copy to clipboard
+ * @returns Promise that resolves to true if copy was successful, false otherwise
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;

package/dist/core/ui/Toolbar/utils/context.d.ts

@@ -0,0 +1,33 @@
+import type { LDContext } from 'launchdarkly-js-client-sdk';
+/**
+ * Check if two contexts are the same using their stable IDs (kind+key)
+ * @deprecated Prefer comparing getStableContextId(a) === getStableContextId(b) directly
+ */
+export declare function areContextsEqual(a: LDContext | null | undefined, b: LDContext | null | undefined): boolean;
+/**
+ * Gets the kind of an LDContext (handles multi-kind and single-kind)
+ */
+export declare function getContextKind(context: LDContext | null | undefined): string;
+/**
+ * Gets the key of an LDContext
+ * For multi-kind contexts, returns the key of the first nested context
+ */
+export declare function getContextKey(context: LDContext | null | undefined): string;
+/**
+ * Gets a display name for an LDContext
+ * Uses name if available, otherwise falls back to key
+ */
+export declare function getContextDisplayName(context: LDContext | null | undefined): string;
+/**
+ * Check if a context is anonymous
+ */
+export declare function isContextAnonymous(context: LDContext | null | undefined): boolean;
+/**
+ * Generates a stable identifier for a context based on kind+key.
+ * This identifier remains the same even if other properties change,
+ * allowing contexts to be updated rather than duplicated.
+ *
+ * For single-kind contexts: "kind:key"
+ * For multi-kind contexts: "multi:kind1:key1:kind2:key2" (sorted by kind name)
+ */
+export declare function getStableContextId(context: LDContext | null | undefined): string;

package/dist/core/ui/Toolbar/utils/localStorage.d.ts

@@ -1,14 +1,24 @@
+import type { LDContext } from 'launchdarkly-js-client-sdk';
 import { ToolbarPosition } from '../types/toolbar';
 export declare const TOOLBAR_STORAGE_KEYS: {
     readonly SETTINGS: "ld-toolbar-settings";
     readonly DISABLED: "ld-toolbar-disabled";
-    readonly PROJECT: "ld-toolbar-project";
     readonly STARRED_FLAGS: "ld-toolbar-starred-flags";
+    readonly MCP_ALERT_DISMISSED: "ld-toolbar-mcp-alert-dismissed";
+    readonly ANALYTICS_CONSENT_SHOWN: "ld-toolbar-analytics-consent-shown";
+    readonly CONTEXTS: "ld-toolbar-contexts";
+    readonly ACTIVE_CONTEXT: "ld-toolbar-active-context";
 };
+export type PreferredIde = 'cursor' | 'windsurf' | 'vscode' | 'github-copilot';
+export declare const PREFERRED_IDES: PreferredIde[];
 export interface ToolbarSettings {
     position: ToolbarPosition;
     reloadOnFlagChange: boolean;
     autoCollapse: boolean;
+    preferredIde: PreferredIde;
+    isOptedInToAnalytics: boolean;
+    isOptedInToEnhancedAnalytics: boolean;
+    isOptedInToSessionReplay: boolean;
 }
 export declare const DEFAULT_SETTINGS: ToolbarSettings;
 export declare function saveToolbarPosition(position: ToolbarPosition): void;
@@ -19,3 +29,21 @@ export declare function saveReloadOnFlagChange(isReloadOnFlagChange: boolean): v
 export declare function loadReloadOnFlagChange(): boolean;
 export declare function loadStarredFlags(): Set<string>;
 export declare function saveStarredFlags(starredFlags: Set<string>): void;
+export declare function savePreferredIde(ide: PreferredIde): void;
+export declare function loadPreferredIde(): PreferredIde;
+export declare function saveMCPAlertDismissed(dismissed: boolean): void;
+export declare function loadMCPAlertDismissed(): boolean;
+export declare function loadContexts(): Array<LDContext>;
+export declare function saveContexts(contexts: Array<LDContext>): void;
+export declare function loadActiveContext(): LDContext | null;
+export declare function saveActiveContext(context: LDContext | null): void;
+export declare function saveIsOptedInToAnalytics(isOptedInToAnalytics: boolean): void;
+export declare function loadIsOptedInToAnalytics(): boolean;
+export declare function saveIsOptedInToEnhancedAnalytics(isOptedInToEnhancedAnalytics: boolean): void;
+export declare function saveIsOptedInToSessionReplay(isOptedInToSessionReplay: boolean): void;
+export declare function loadIsOptedInToSessionReplay(): boolean;
+export declare function loadIsOptedInToEnhancedAnalytics(): boolean;
+export declare function saveAnalyticsConsentShown(shown: boolean): void;
+export declare function loadAnalyticsConsentShown(): boolean;
+export declare function loadAllSettings(): Partial<ToolbarSettings>;
+export declare function saveAllSettings(settings: Partial<ToolbarSettings>): void;

package/dist/core/utils/analytics.d.ts

@@ -8,8 +8,9 @@ export declare const ANALYTICS_EVENT_PREFIX = "ld.toolbar";
 export declare class ToolbarAnalytics {
     private ldClient;
     private mode;
+    private isOptedInToAnalytics;
     private searchDebounceTimer;
-    constructor(ldClient?: LDClient | null, mode?: ToolbarMode);
+    constructor(ldClient?: LDClient | null, mode?: ToolbarMode, isOptedInToAnalytics?: boolean);
     /**
      * Internal method to send tracking events
      */
@@ -30,6 +31,10 @@ export declare class ToolbarAnalytics {
      * Track toolbar tab navigation
      */
     trackTabChange(fromTab: string | null, toTab: string): void;
+    /**
+     * Track toolbar subtab navigation
+     */
+    trackSubtabChange(fromSubtab: string | null, toSubtab: string): void;
     /**
      * Track search usage
      */
@@ -54,6 +59,10 @@ export declare class ToolbarAnalytics {
      * Track opening a flag deeplink
      */
     trackOpenFlagDeeplink(flagKey: string, baseUrl: string): void;
+    /**
+     * Track clearing events
+     */
+    trackClearEvents(): void;
     /**
      * Track Event clicks
      */
@@ -93,5 +102,50 @@ export declare class ToolbarAnalytics {
     /**
      * Track user feedback
      */
-    trackFeedback(feedback: string, sentiment: FeedbackSentiment): void;
+    trackFeedback(feedback: string, sentiment: FeedbackSentiment, options?: {
+        flagKey?: string;
+        prompt?: string;
+        customProperties?: Record<string, unknown>;
+    }): void;
+    /**
+     * Track flag key copy
+     */
+    trackFlagKeyCopy(flagKey: string): void;
+    /**
+     * Track context added
+     */
+    trackContextAdded(contextKind: string, contextKey: string, isMultiKind: boolean): void;
+    /**
+     * Track context removed
+     */
+    trackContextRemoved(contextKind: string, contextKey: string): void;
+    /**
+     * Track context updated
+     */
+    trackContextUpdated(oldKind: string, oldKey: string, newKind: string, newKey: string): void;
+    /**
+     * Track context selected/activated
+     */
+    trackContextSelected(contextKind: string, contextKey: string): void;
+    /**
+     * Track context edit started
+     */
+    trackContextEditStarted(contextKind: string, contextKey: string): void;
+    /**
+     * Track context edit cancelled
+     */
+    trackContextEditCancelled(contextKind: string, contextKey: string): void;
+    /**
+     * Track context key copy
+     */
+    trackContextKeyCopy(contextKey: string): void;
+    /**
+     * Track state sharing via URL
+     */
+    trackShareState(options: {
+        includeSettings: boolean;
+        overrideCount: number;
+        contextCount: number;
+        starredFlagCount: number;
+    }): void;
 }

package/dist/core/utils/feedback.d.ts

@@ -0,0 +1,18 @@
+import type { LDClient } from 'launchdarkly-js-client-sdk';
+export type LDFeedbackSentiment = 'positive' | 'neutral' | 'negative';
+export type LDFeedbackData = {
+    feedback_answer: string;
+    flag_key: string;
+    sentiment?: LDFeedbackSentiment;
+    feedback_prompt?: string;
+    o11y_session_id?: string;
+    custom_properties?: Record<string, unknown>;
+};
+export interface SendFeedbackOptions {
+    flagKey: string;
+    feedback: string;
+    sentiment?: LDFeedbackSentiment;
+    prompt?: string;
+    customProperties?: Record<string, unknown>;
+}
+export declare function sendFeedback(client: LDClient, options: SendFeedbackOptions): void;

package/dist/core/utils/urlOverrides.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Utilities for sharing and loading toolbar state via URL query parameters.
+ *
+ * State is encoded as a single base64-encoded JSON object in the ldToolbarState parameter.
+ * The state includes: flag overrides, contexts, settings, starred flags, etc.
+ */
+import { LDContext } from 'launchdarkly-js-client-sdk';
+import { ToolbarSettings } from '../ui/Toolbar/utils/localStorage';
+/** Current version of the shared state format */
+export declare const SHARED_STATE_VERSION = 1;
+/** Default query parameter name for shared toolbar state */
+export declare const DEFAULT_STATE_PARAM = "ldToolbarState";
+/** Maximum size of encoded state in characters (warning threshold) */
+export declare const MAX_STATE_SIZE_WARNING = 2000;
+/** Maximum size of encoded state in characters (hard limit) */
+export declare const MAX_STATE_SIZE_LIMIT = 8192;
+/**
+ * Structure of the shared toolbar state
+ */
+export interface SharedToolbarState {
+    /** Version of the state format */
+    version: number;
+    /** Flag overrides (flag key -> value) */
+    overrides: Record<string, any>;
+    /** Saved contexts */
+    contexts: LDContext[];
+    /** Currently active context */
+    activeContext: LDContext | null;
+    /** Toolbar settings */
+    settings: Partial<ToolbarSettings>;
+    /** Starred flag keys */
+    starredFlags: string[];
+}
+/**
+ * Result of serializing shared state
+ */
+export interface SerializeStateResult {
+    /** The full URL with the state parameter */
+    url: string;
+    /** Size of the encoded state in characters */
+    size: number;
+    /** Whether the size exceeds the warning threshold */
+    exceedsWarning: boolean;
+    /** Whether the size exceeds the hard limit */
+    exceedsLimit: boolean;
+}
+/**
+ * Result of parsing shared state from URL
+ */
+export interface ParseStateResult {
+    /** Whether a state parameter was found in the URL */
+    found: boolean;
+    /** The parsed state (if found and valid) */
+    state: SharedToolbarState | null;
+    /** Error message if parsing failed */
+    error: string | null;
+}
+/**
+ * Serializes toolbar state into a URL with a query parameter
+ *
+ * @param state - The state to serialize
+ * @param baseUrl - The base URL to append the parameter to (defaults to current URL without params)
+ * @param paramName - The query parameter name (defaults to 'ldToolbarState')
+ * @returns Result containing the URL and size information
+ *
+ */
+export declare function serializeToolbarState(state: SharedToolbarState, baseUrl?: string, paramName?: string): SerializeStateResult;
+/**
+ * Parses toolbar state from a URL query parameter
+ *
+ * @param url - The URL to parse (defaults to window.location.href)
+ * @param paramName - The query parameter name (defaults to 'ldToolbarState')
+ * @returns Result containing whether state was found, the parsed state, and any error
+ *
+ */
+export declare function parseToolbarState(url?: string, paramName?: string): ParseStateResult;
+/**
+ * Checks if the current URL contains a toolbar state parameter
+ *
+ * @param url - The URL to check (defaults to window.location.href)
+ * @param paramName - The query parameter name (defaults to 'ldToolbarState')
+ * @returns True if the URL contains a state parameter
+ */
+export declare function hasToolbarState(url?: string, paramName?: string): boolean;
+/**
+ * Removes the toolbar state parameter from the current URL
+ * Uses history.replaceState to avoid affecting browser history
+ *
+ * @param paramName - The query parameter name (defaults to 'ldToolbarState')
+ */
+export declare function clearToolbarStateFromUrl(paramName?: string): void;
+/**
+ * Loads shared toolbar state from URL and applies it to localStorage
+ * Should be called during toolbar initialization, before any components render
+ *
+ * @param paramName - The query parameter name (defaults to 'ldToolbarState')
+ * @param flagOverrideStorageNamespace - The storage namespace for flag overrides (defaults to 'ld-flag-override')
+ * @param flagOverridePlugin - Optional flag override plugin to apply overrides to directly
+ * @returns Object indicating whether state was loaded and if there were any errors
+ *
+ */
+export declare function loadSharedStateFromUrl(paramName?: string, flagOverrideStorageNamespace?: string, flagOverridePlugin?: any): {
+    loaded: boolean;
+    error: string | null;
+};

package/dist/flags/toolbarFlags.d.ts

@@ -7,4 +7,10 @@
  * To add a toolbar feature flag, export it here like:
  * export const myFeature = createToolbarFlagFunction('my-feature-key', defaultValue);
  */
-export declare const __placeholder: () => boolean;
+export declare const ENABLE_SESSION_REPLAY_FLAG_KEY = "toolbar-enable-session-replay";
+export declare const USE_NEW_TOOLBAR_DESIGN_FLAG_KEY = "use-new-toolbar-design";
+export declare const enableAiIcon: () => boolean;
+export declare const enableInteractiveIcon: () => boolean;
+export declare const enableOptimizeIcon: () => boolean;
+export declare const enableSessionReplay: () => boolean;
+export declare const useNewToolbarDesign: () => boolean;

package/dist/index.cjs

@@ -13,7 +13,7 @@ var __webpack_require__ = {};
 })();
 (()=>{
     __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
         Object.defineProperty(exports1, '__esModule', {
@@ -127,7 +127,7 @@ class AfterTrackHook {
                 data: hookContext.data,
                 metricValue: hookContext.metricValue,
                 creationDate: Date.now(),
-                url: 'undefined' != typeof window ? window.location.href : void 0
+                url: "u" > typeof window ? window.location.href : void 0
             };
             if (!this.shouldProcessEvent()) return;
             const processedEvent = this.processEvent(syntheticContext);
@@ -462,7 +462,7 @@ class FlagOverridePlugin {
         return this.ldClient;
     }
     getStorage() {
-        if ('undefined' == typeof window) return null;
+        if ("u" < typeof window) return null;
         return window.localStorage;
     }
     persistOverride(flagKey, value) {
@@ -552,7 +552,9 @@ async function lazyLoad(signal, url) {
         throw new Error(`Could not load LaunchDarkly developer toolbar bundle from ${url}`);
     }
 }
-var package_namespaceObject = JSON.parse('{"rE":"2.0.0-beta.1"}');
+var package_namespaceObject = {
+    rE: "2.1.0"
+};
 function useLaunchDarklyToolbar(args) {
     const { toolbarBundleUrl, enabled, ...initConfig } = args;
     const configRef = (0, external_react_namespaceObject.useRef)(null);
@@ -591,7 +593,7 @@ exports.TOOLBAR_POSITIONS = __webpack_exports__.TOOLBAR_POSITIONS;
 exports.isValidEventCategory = __webpack_exports__.isValidEventCategory;
 exports.isValidEventKind = __webpack_exports__.isValidEventKind;
 exports.useLaunchDarklyToolbar = __webpack_exports__.useLaunchDarklyToolbar;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __rspack_i in __webpack_exports__)if (-1 === [
     "ANALYTICS_EVENT_PREFIX",
     "EventInterceptionPlugin",
     "FlagOverridePlugin",
@@ -599,7 +601,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "isValidEventCategory",
     "isValidEventKind",
     "useLaunchDarklyToolbar"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });