@launchdarkly/toolbar 2.0.0-beta.1 → 2.2.0-beta.1

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

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

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

@@ -1,7 +1,7 @@
-export { DevServerProvider, useDevServerContext } from './DevServerProvider';
-export { SearchProvider, useSearchContext } from './SearchProvider';
-export { ActiveTabProvider, useActiveTabContext } from './ActiveTabProvider';
-export { ToolbarUIProvider, useToolbarUIContext } from './ToolbarUIProvider';
-export { FlagSdkOverrideProvider, useFlagSdkOverrideContext, type LocalFlag, type FlagSdkOverrideContextType, } from './FlagSdkOverrideProvider';
-export { AnalyticsProvider, useAnalytics } from './AnalyticsProvider';
-export { StarredFlagsProvider, useStarredFlags } from './StarredFlagsProvider';
+export * from './api';
+export * from './state';
+export * from './telemetry';
+export * from './DevServerProvider';
+export * from './FlagSdkOverrideProvider';
+export * from './StarredFlagsProvider';
+export * from './ElementSelectionProvider';

package/dist/core/ui/Toolbar/context/{ActiveTabProvider.d.ts → state/ActiveTabProvider.d.ts}

@@ -1,8 +1,8 @@
-import type { ActiveTabId } from '../types/toolbar';
-type ActiveTabContextType = {
+import type { ActiveTabId } from '../../types';
+interface ActiveTabContextType {
     activeTab: ActiveTabId;
     setActiveTab: (tab: ActiveTabId) => void;
-};
+}
 export declare function ActiveTabProvider({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/core/ui/Toolbar/context/state/PluginsProvider.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { IEventInterceptionPlugin, IFlagOverridePlugin } from '../../../../../types';
+interface PluginsContextValue {
+    baseUrl: string;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
+}
+export interface PluginsProviderProps {
+    children: ReactNode;
+    baseUrl: string;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
+}
+export declare function PluginsProvider({ children, baseUrl, flagOverridePlugin, eventInterceptionPlugin, }: PluginsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function usePlugins(): PluginsContextValue;
+export {};

package/dist/core/ui/Toolbar/context/{SearchProvider.d.ts → state/SearchProvider.d.ts}

@@ -1,8 +1,8 @@
 import React, { Dispatch, type SetStateAction } from 'react';
-type SearchContextType = {
+interface SearchContextType {
     searchTerm: string;
     setSearchTerm: Dispatch<SetStateAction<string>>;
-};
+}
 export declare function SearchProvider({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/core/ui/Toolbar/context/state/ToolbarStateBundleProvider.d.ts

@@ -0,0 +1,13 @@
+import { IEventInterceptionPlugin, IFlagOverridePlugin } from '../../../../../types';
+import { ToolbarPosition } from '../../types';
+interface ToolbarStateBundleProviderProps {
+    initialPosition?: ToolbarPosition;
+    domId: string;
+    devServerUrl?: string;
+    baseUrl: string;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
+    children: React.ReactNode;
+}
+export declare function ToolbarStateBundleProvider(props: ToolbarStateBundleProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/{hooks/useToolbarState.d.ts → context/state/ToolbarStateProvider.d.ts}

@@ -1,9 +1,6 @@
-import { Dispatch, SetStateAction } from 'react';
-import { ActiveTabId } from '../types';
-export interface UseToolbarStateProps {
-    domId: string;
-}
-export interface UseToolbarStateReturn {
+import React, { Dispatch, SetStateAction, ReactNode } from 'react';
+import { ActiveTabId, ToolbarMode } from '../../types';
+export interface ToolbarStateContextValue {
     isExpanded: boolean;
     previousTab: ActiveTabId;
     isAnimating: boolean;
@@ -12,6 +9,7 @@ export interface UseToolbarStateReturn {
     hasBeenExpanded: boolean;
     reloadOnFlagChangeIsEnabled: boolean;
     isAutoCollapseEnabled: boolean;
+    mode: ToolbarMode;
     toolbarRef: React.RefObject<HTMLDivElement | null>;
     handleTabChange: (tabId: string) => void;
     handleClose: () => void;
@@ -22,4 +20,10 @@ export interface UseToolbarStateReturn {
     setIsAnimating: Dispatch<SetStateAction<boolean>>;
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
 }
-export declare function useToolbarState(props: UseToolbarStateProps): UseToolbarStateReturn;
+export interface ToolbarStateProviderProps {
+    children: ReactNode;
+    domId: string;
+    devServerUrl?: string;
+}
+export declare function ToolbarStateProvider({ children, domId, devServerUrl }: ToolbarStateProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useToolbarState(): ToolbarStateContextValue;

package/dist/core/ui/Toolbar/context/{ToolbarUIProvider.d.ts → state/ToolbarUIProvider.d.ts}

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import type { ToolbarPosition } from '../types/toolbar';
+import { ToolbarPosition } from '../../types';
 interface ToolbarUIContextValue {
     position: ToolbarPosition;
     handlePositionChange: (position: ToolbarPosition) => void;

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

@@ -0,0 +1,6 @@
+export * from './ActiveTabProvider';
+export * from './PluginsProvider';
+export * from './SearchProvider';
+export * from './ToolbarStateBundleProvider';
+export * from './ToolbarStateProvider';
+export * from './ToolbarUIProvider';

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/telemetry/TelemetryBundleProvider.d.ts

@@ -0,0 +1,11 @@
+import { ToolbarMode } from '../../types';
+interface TelemetryBundleProviderProps {
+    mode: ToolbarMode;
+    baseUrl?: string;
+    clientSideId?: string;
+    streamUrl?: string;
+    eventsUrl?: 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,3 @@
+export * from './TelemetryBundleProvider';
+export * from './AnalyticsProvider';
+export * from './InternalClientProvider';

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

@@ -1,4 +1,3 @@
-export { useToolbarState } from './useToolbarState';
 export { useToolbarAnimations } from './useToolbarAnimations';
 export { useToolbarVisibility } from './useToolbarVisibility';
 export { useToolbarDrag } from './useToolbarDrag';

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/localStorage.d.ts

@@ -1,14 +1,19 @@
 import { ToolbarPosition } from '../types/toolbar';
 export declare const TOOLBAR_STORAGE_KEYS: {
+    readonly ENVIRONMENT: "ld-toolbar-environment";
     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";
 };
+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;
 }
 export declare const DEFAULT_SETTINGS: ToolbarSettings;
 export declare function saveToolbarPosition(position: ToolbarPosition): void;
@@ -19,3 +24,7 @@ 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;

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

@@ -54,6 +54,10 @@ export declare class ToolbarAnalytics {
      * Track opening a flag deeplink
      */
     trackOpenFlagDeeplink(flagKey: string, baseUrl: string): void;
+    /**
+     * Track clearing events
+     */
+    trackClearEvents(): void;
     /**
      * Track Event clicks
      */
@@ -94,4 +98,8 @@ export declare class ToolbarAnalytics {
      * Track user feedback
      */
     trackFeedback(feedback: string, sentiment: FeedbackSentiment): void;
+    /**
+     * Track flag key copy
+     */
+    trackFlagKeyCopy(flagKey: string): void;
 }

package/dist/flags/toolbarFlags.d.ts

@@ -7,4 +7,7 @@
  * 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 useNewToolbarDesign: () => boolean;
+export declare const enableInteractiveIcon: () => boolean;
+export declare const enableAiIcon: () => boolean;
+export declare const enableOptimizeIcon: () => boolean;

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.0.0-beta.1"}');
+var package_namespaceObject = JSON.parse('{"rE":"2.2.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.0.0-beta.1"}');
+var package_namespaceObject = JSON.parse('{"rE":"2.2.0-beta.1"}');
 function useLaunchDarklyToolbar(args) {
     const { toolbarBundleUrl, enabled, ...initConfig } = args;
     const configRef = useRef(null);

package/package.json

@@ -1,15 +1,17 @@
 {
   "private": false,
   "name": "@launchdarkly/toolbar",
-  "version": "2.0.0-beta.1",
-  "description": "A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development",
+  "version": "2.2.0-beta.1",
+  "description": "A framework-agnostic developer toolbar for interacting with LaunchDarkly during development",
   "keywords": [
     "launchdarkly",
     "feature-flags",
-    "react",
     "toolbar",
+    "react",
     "development",
-    "typescript"
+    "typescript",
+    "javascript",
+    "vanilla-js"
   ],
   "type": "module",
   "license": "Apache-2.0",
@@ -52,12 +54,12 @@
     "@codemirror/lint": "^6.9.2",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.8",
-    "@launchpad-ui/components": "^0.17.5",
+    "@launchpad-ui/components": "^0.17.7",
     "@launchpad-ui/tokens": "^0.15.1",
     "@lezer/highlight": "^1.2.3",
     "@react-aria/focus": "^3.21.2",
     "@react-stately/flags": "^3.1.2",
-    "@rsbuild/core": "^1.6.7",
+    "@rsbuild/core": "^1.6.9",
     "@rsbuild/plugin-react": "^1.4.2",
     "@rslib/core": "^0.18.0",
     "@storybook/addon-docs": "^10.0.8",
@@ -77,20 +79,20 @@
     "@types/react-dom": "19.2.3",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vanilla-extract/webpack-plugin": "^2.3.22",
-    "@vitest/coverage-v8": "4.0.13",
+    "@vanilla-extract/webpack-plugin": "^2.3.24",
+    "@vitest/coverage-v8": "4.0.15",
     "css-loader": "^7.1.2",
     "jsdom": "^27.2.0",
     "launchdarkly-js-client-sdk": "^3.9.0",
-    "motion": "^12.19.2",
-    "oxlint": "^1.29.0",
+    "motion": "^12.23.25",
+    "oxlint": "^1.30.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "storybook": "^10.0.8",
+    "storybook": "^10.1.4",
     "storybook-addon-rslib": "^2.1.6",
     "storybook-react-rsbuild": "^2.1.6",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.13"
+    "vitest": "^4.0.15"
   },
   "peerDependencies": {
     "launchdarkly-js-client-sdk": ">=3.9.0 <4.0.0",
@@ -98,7 +100,8 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "build": "pnpm run build:lib && pnpm run build:cdn",

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

@@ -1,2 +0,0 @@
-export declare const basePopover: string;
-export declare const popover: string;

package/dist/core/ui/Toolbar/{Header → components/legacy/Header}/components/index.d.ts

@@ -1,4 +1,4 @@
 export { LogoSection } from './LogoSection';
 export { EnvironmentLabel } from './EnvironmentLabel';
-export { SearchSection } from './SearchSection';
 export { ActionButtons } from './ActionButtons';
+export { SearchSection } from './SearchSection';