@launchdarkly/toolbar 2.4.0-beta.1 → 2.5.0-beta.1

package/dist/core/ui/Buttons/IconButton.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 interface IconButtonProps {
     icon: React.ReactNode;
     label: string;
-    onClick: () => void;
+    onClick: (event: React.MouseEvent) => void;
     disabled?: boolean;
     className?: string;
     size?: 'small' | 'medium' | 'large';
+    title?: string;
 }
 export declare function IconButton(props: IconButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/core/ui/JsonEditor/JsonEditor.d.ts

@@ -6,12 +6,13 @@ interface JsonEditorProps {
     onFocus?: () => void;
     onBlur?: (e: React.FocusEvent<HTMLDivElement>, value: string) => void;
     onChange?: (value: string, viewUpdate: ViewUpdate) => void;
-    onLintErrors: (errors: Diagnostic[]) => void;
+    onLintErrors?: (errors: Diagnostic[]) => void;
     initialState?: {
         startCursorAtLine?: number;
         autoFocus?: boolean;
     };
     onEditorHeightChange: (height: number) => void;
+    readOnly?: boolean;
 }
 export declare function JsonEditor(props: JsonEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/core/ui/Toolbar/components/{FlagKeyWithCopy.css.d.ts → CopyableText.css.d.ts}

@@ -1,4 +1,4 @@
 export declare const wrapper: string;
 export declare const container: string;
-export declare const flagKeyText: string;
+export declare const text: string;
 export declare const tooltip: string;

package/dist/core/ui/Toolbar/components/CopyableText.d.ts

@@ -0,0 +1,18 @@
+interface CopyableTextProps {
+    /** The text to display and copy to clipboard */
+    text: string;
+    /** Optional callback fired after copying (useful for analytics) */
+    onCopy?: (text: string) => void;
+    /** Custom aria-label for accessibility. Defaults to "Copy {text} to clipboard" */
+    ariaLabel?: string;
+    /** Custom title tooltip. Defaults to "Copy {text} to clipboard" */
+    title?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom tooltip text shown after copying. Defaults to "Copied!" */
+    copiedMessage?: string;
+    /** Duration in ms to show the copied tooltip. Defaults to 2000 */
+    copiedDuration?: number;
+}
+export declare function CopyableText({ text, onCopy, ariaLabel, title, className, copiedMessage, copiedDuration, }: CopyableTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/components/LoadingScreen/LoadingScreen.css.d.ts

@@ -0,0 +1,7 @@
+export declare const loadingContainer: string;
+export declare const loadingHeader: string;
+export declare const headerLogo: string;
+export declare const loadingMainContent: string;
+export declare const loadingContent: string;
+export declare const spinner: string;
+export declare const loadingText: string;

package/dist/core/ui/Toolbar/components/LoadingScreen/LoadingScreen.d.ts

@@ -0,0 +1,5 @@
+interface LoadingScreenProps {
+    onMouseDown?: (event: React.MouseEvent) => void;
+}
+export declare function LoadingScreen(props: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { LoadingScreen } from './LoadingScreen';

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

@@ -23,3 +23,4 @@ export { FlaskIcon } from './FlaskIcon';
 export { ExternalLinkIcon } from './ExternalLinkIcon';
 export { CursorIcon } from './CursorIcon';
 export { InfoIcon } from './InfoIcon';
+export { AddIcon } from './AddIcon';

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

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

package/dist/core/ui/Toolbar/components/new/Contexts/AddContextForm.d.ts

@@ -0,0 +1,6 @@
+interface AddContextFormProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare function AddContextForm({ isOpen, onClose }: AddContextFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/components/new/Contexts/AddContextForm.module.css.d.ts

@@ -0,0 +1,14 @@
+export declare const container: string;
+export declare const header: string;
+export declare const title: string;
+export declare const closeButton: string;
+export declare const form: string;
+export declare const field: string;
+export declare const label: string;
+export declare const required: string;
+export declare const input: string;
+export declare const jsonEditorContainer: string;
+export declare const errorText: string;
+export declare const actions: string;
+export declare const cancelButton: string;
+export declare const submitButton: string;

package/dist/core/ui/Toolbar/components/new/Contexts/ContextItem.d.ts

@@ -0,0 +1,9 @@
+import { Context } from '../../../types/ldApi';
+interface ContextItemProps {
+    context: Context;
+    isActiveContext: boolean;
+    handleHeightChange?: (index: number, height: number) => void;
+    index?: number;
+}
+export declare function ContextItem({ context, isActiveContext, handleHeightChange, index }: ContextItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/components/new/Contexts/ContextItem.module.css.d.ts

@@ -0,0 +1,19 @@
+export declare const container: string;
+export declare const header: string;
+export declare const containerActive: string;
+export declare const containerClickable: string;
+export declare const info: string;
+export declare const nameRow: string;
+export declare const name: string;
+export declare const keyRow: string;
+export declare const key: string;
+export declare const kindBadge: string;
+export declare const anonymousBadge: string;
+export declare const activeDot: string;
+export declare const actions: string;
+export declare const deleteButton: string;
+export declare const iconButton: string;
+export declare const expandButton: string;
+export declare const chevron: string;
+export declare const chevronExpanded: string;
+export declare const editActions: string;

package/dist/core/ui/Toolbar/components/new/Contexts/ContextList.d.ts

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

package/dist/core/ui/Toolbar/components/new/Contexts/ContextList.module.css.d.ts

@@ -0,0 +1,8 @@
+export declare const container: string;
+export declare const statsHeader: string;
+export declare const statsText: string;
+export declare const addButton: string;
+export declare const scrollContainer: string;
+export declare const virtualInner: string;
+export declare const loadingMore: string;
+export declare const loadingMoreText: string;

package/dist/core/ui/Toolbar/components/new/Contexts/ContextListContent.d.ts

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

package/dist/core/ui/Toolbar/components/new/Contexts/index.d.ts

@@ -0,0 +1,4 @@
+export { ContextListContent } from './ContextListContent';
+export { ContextList } from './ContextList';
+export { ContextItem } from './ContextItem';
+export { AddContextForm } from './AddContextForm';

package/dist/core/ui/Toolbar/components/new/context/TabSearchProvider.d.ts

@@ -1,10 +1,12 @@
-import { TabId } from '../../../types';
-type TabSearchContextType = {
-    searchTerms: Record<TabId, string>;
-    setSearchTerm: (tab: TabId, searchTerm: string) => void;
+import { SubTab } from '../types';
+type SubTabSearchContextType = {
+    searchTerms: Record<SubTab, string>;
+    setSearchTerm: (subtab: SubTab, searchTerm: string) => void;
+    clearSearchTerm: (subtab: SubTab) => void;
+    clearAllSearchTerms: () => void;
 };
 export declare function TabSearchProvider({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useTabSearchContext(): TabSearchContextType;
+export declare function useTabSearchContext(): SubTabSearchContextType;
 export {};

package/dist/core/ui/Toolbar/components/new/types.d.ts

@@ -1,4 +1,4 @@
-export type FlagsSubtab = 'flags' | 'context';
+export type FlagsSubtab = 'flags' | 'contexts';
 export type MonitoringSubtab = 'events';
 export type SettingsSubtab = 'general';
 export type InteractiveSubtab = 'workflows';

package/dist/core/ui/Toolbar/context/api/ContextsProvider.d.ts

@@ -0,0 +1,18 @@
+import { Context } from '../../types/ldApi';
+interface ContextsContextType {
+    contexts: Context[];
+    filter: string;
+    setFilter: (filter: string) => void;
+    addContext: (context: Context) => void;
+    removeContext: (id: string) => void;
+    updateContext: (id: string, newContext: Context) => void;
+    setContext: (context: Context) => Promise<void>;
+    activeContext: Context | null;
+    isAddFormOpen: boolean;
+    setIsAddFormOpen: (isOpen: boolean) => void;
+}
+export declare const ContextsProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function useContextsContext(): ContextsContextType;
+export {};

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

@@ -1,6 +1,7 @@
 export * from './ApiBundleProvider';
 export * from './ApiProvider';
 export * from './AuthProvider';
+export * from './ContextsProvider';
 export * from './EnvironmentProvider';
 export * from './FlagsProvider';
 export * from './IFrameProvider';

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

@@ -38,3 +38,10 @@ export interface FlagsPaginationParams {
     offset?: number;
     query?: string;
 }
+export interface Context {
+    id: string;
+    kind: string;
+    key?: string;
+    name: string;
+    anonymous?: boolean;
+}

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

@@ -0,0 +1,15 @@
+import type { LDContext } from 'launchdarkly-js-client-sdk';
+import { Context } from '../types/ldApi';
+/**
+ * Generates a unique ID for a context
+ */
+export declare function generateContextId(): string;
+/**
+ * Extracts normalized context info from an LDContext
+ * Handles both single-kind and multi-kind contexts
+ */
+export declare function extractContextInfo(ldContext: LDContext | undefined): Context | null;
+/**
+ * Helper function to check if a given context matches the current SDK context
+ */
+export declare function isCurrentContext(currentContext: Context | null, contextKind: string, contextKey: string): boolean;

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

@@ -1,3 +1,4 @@
+import { Context } from '../types/ldApi';
 import { ToolbarPosition } from '../types/toolbar';
 export declare const TOOLBAR_STORAGE_KEYS: {
     readonly ENVIRONMENT: "ld-toolbar-environment";
@@ -6,6 +7,8 @@ export declare const TOOLBAR_STORAGE_KEYS: {
     readonly PROJECT: "ld-toolbar-project";
     readonly STARRED_FLAGS: "ld-toolbar-starred-flags";
     readonly MCP_ALERT_DISMISSED: "ld-toolbar-mcp-alert-dismissed";
+    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[];
@@ -28,3 +31,7 @@ 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<Context>;
+export declare function saveContexts(contexts: Array<Context>): void;
+export declare function loadActiveContext(): Context | null;
+export declare function saveActiveContext(context: Context | null): void;

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

@@ -102,4 +102,32 @@ export declare class ToolbarAnalytics {
      * 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;
 }

package/dist/index.cjs

@@ -552,7 +552,7 @@ async function lazyLoad(signal, url) {
         throw new Error(`Could not load LaunchDarkly developer toolbar bundle from ${url}`);
     }
 }
-var package_namespaceObject = JSON.parse('{"rE":"2.4.0-beta.1"}');
+var package_namespaceObject = JSON.parse('{"rE":"2.5.0-beta.1"}');
 function useLaunchDarklyToolbar(args) {
     const { toolbarBundleUrl, enabled, ...initConfig } = args;
     const configRef = (0, external_react_namespaceObject.useRef)(null);

package/dist/js/index.js

@@ -518,7 +518,7 @@ async function lazyLoad(signal, url) {
         throw new Error(`Could not load LaunchDarkly developer toolbar bundle from ${url}`);
     }
 }
-var package_namespaceObject = JSON.parse('{"rE":"2.4.0-beta.1"}');
+var package_namespaceObject = JSON.parse('{"rE":"2.5.0-beta.1"}');
 function useLaunchDarklyToolbar(args) {
     const { toolbarBundleUrl, enabled, ...initConfig } = args;
     const configRef = useRef(null);

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@launchdarkly/toolbar",
-  "version": "2.4.0-beta.1",
+  "version": "2.5.0-beta.1",
   "description": "A framework-agnostic developer toolbar for interacting with LaunchDarkly during development",
   "keywords": [
     "launchdarkly",
@@ -71,7 +71,7 @@
     "@storybook/addon-onboarding": "^10.1.7",
     "@storybook/blocks": "^9.0.0-alpha.17",
     "@storybook/react": "^10.0.8",
-    "@storybook/react-vite": "^10.1.7",
+    "@storybook/react-vite": "^10.1.8",
     "@storybook/test": "^9.0.0-alpha.2",
     "@tanstack/react-virtual": "^3.13.13",
     "@testing-library/jest-dom": "^6.9.1",

package/dist/core/ui/Toolbar/components/FlagKeyWithCopy.d.ts

@@ -1,6 +0,0 @@
-interface FlagKeyWithCopyProps {
-    flagKey: string;
-    className?: string;
-}
-export declare function FlagKeyWithCopy({ flagKey, className }: FlagKeyWithCopyProps): import("react/jsx-runtime").JSX.Element;
-export {};