@launchdarkly/toolbar 2.6.1-beta.1 → 2.8.0-beta.1

package/dist/core/services/DevServerClient.d.ts

@@ -5,6 +5,7 @@ export interface DevServerProjectResponse {
     flagsState: Record<string, FlagState>;
     overrides: Record<string, Override>;
     sourceEnvironmentKey: string;
+    context?: any;
 }
 export interface FlagState {
     value: any;
@@ -24,4 +25,5 @@ export declare class DevServerClient {
         value: any;
     }>;
     clearOverride(flagKey: string): Promise<void>;
+    updateProjectContext(context: any): Promise<DevServerProjectResponse>;
 }

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

@@ -2,3 +2,4 @@ export declare const container: string;
 export declare const filterButton: string;
 export declare const bottomRow: string;
 export declare const statusText: string;
+export declare const buttonGroup: string;

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

@@ -5,6 +5,7 @@ export interface FilterOptionsProps {
     starredCount: number;
     onClearOverrides?: () => void;
     onClearStarred?: () => void;
+    onShareUrl?: () => void;
     isLoading?: boolean;
 }
 export declare function FilterOptions(props: FilterOptionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/core/ui/Toolbar/components/FilterOptions/ShareUrlButton.css.d.ts

@@ -0,0 +1,2 @@
+export declare const shareButton: string;
+export declare const smallIcon: string;

package/dist/core/ui/Toolbar/components/FilterOptions/ShareUrlButton.d.ts

@@ -0,0 +1,7 @@
+interface ShareUrlButtonProps {
+    onClick: () => void;
+    isLoading?: boolean;
+    count: number;
+}
+export declare function ShareUrlButton({ onClick, isLoading, count }: ShareUrlButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,10 @@
+export declare const popover: string;
+export declare const header: string;
+export declare const title: string;
+export declare const content: string;
+export declare const description: string;
+export declare const options: string;
+export declare const option: string;
+export declare const optionLabel: string;
+export declare const count: string;
+export declare const actions: string;

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

@@ -0,0 +1,15 @@
+export interface ShareStateOptions {
+    includeFlagOverrides: boolean;
+    includeContexts: boolean;
+    includeSettings: boolean;
+}
+interface ShareStatePopoverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onShare: (options: ShareStateOptions) => void;
+    overrideCount: number;
+    contextCount: number;
+    anchorRef?: React.RefObject<HTMLElement>;
+}
+export declare function ShareStatePopover(props: ShareStatePopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { ShareStatePopover } from './ShareStatePopover';
+export type { ShareStateOptions } from './ShareStatePopover';

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

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

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

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

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

@@ -1,4 +1,8 @@
 export declare const container: string;
+export declare const searchContainer: string;
+export declare const searchDropdown: string;
+export declare const searchDropdownFlags: string;
+export declare const searchDropdownLeft: string;
 export declare const actionButton: string;
 export declare const clearButton: string;
 export declare const icon: string;

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

@@ -1,4 +1,5 @@
 export declare const overlay: string;
+export declare const overlayFlags: string;
 export declare const header: string;
 export declare const title: string;
 export declare const resetButton: string;

package/dist/core/ui/Toolbar/components/new/Settings/ShareButton.d.ts

@@ -0,0 +1,5 @@
+interface ShareButtonProps {
+    onClick: (e: React.MouseEvent) => void;
+}
+export declare function ShareButton({ onClick }: ShareButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/components/new/Settings/ShareButton.module.css.d.ts

@@ -0,0 +1 @@
+export declare const button: string;

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

@@ -2,6 +2,8 @@ import React from 'react';
 interface TooltipProps {
     content: string;
     children: React.ReactNode;
+    offsetTop?: number;
+    offsetLeft?: number;
 }
-export declare function Tooltip({ content, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ content, children, offsetTop, offsetLeft }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
 import type { FC, ReactNode } from 'react';
+import { DevServerClient } from '../../../services/DevServerClient';
 import { LdToolbarConfig, ToolbarState } from '../../../types/devServer';
 interface DevServerContextValue {
     state: ToolbarState;
@@ -6,6 +7,7 @@ interface DevServerContextValue {
     clearOverride: (flagKey: string) => Promise<void>;
     clearAllOverrides: () => Promise<void>;
     refresh: () => Promise<void>;
+    devServerClient: DevServerClient | null;
 }
 export declare const useDevServerContext: () => DevServerContextValue;
 export interface DevServerProviderProps {

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

@@ -10,6 +10,7 @@ interface ContextsContextType {
     activeContext: LDContext | null;
     isAddFormOpen: boolean;
     setIsAddFormOpen: (isOpen: boolean) => void;
+    clearContexts: () => void;
 }
 export declare const ContextsProvider: ({ children }: {
     children: React.ReactNode;

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

@@ -3,3 +3,4 @@ export { useToolbarVisibility } from './useToolbarVisibility';
 export { useToolbarDrag } from './useToolbarDrag';
 export { useEvents } from './useEvents';
 export { useCurrentDate } from './useCurrentDate';
+export { useLocalStorage } from './useLocalStorage';

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

@@ -1,17 +1,7 @@
 import type { LDContext } from 'launchdarkly-js-client-sdk';
 /**
- * Generates a deterministic ID for a context based on its properties.
- * The same context object will always produce the same ID.
- * This is used to compare contexts for equality.
- *
- * For multi-kind contexts, the deprecated 'user' kind is excluded from
- * hash generation to prevent false duplicate detection.
- *
- * Results are cached to minimize computation during React renders.
- */
-export declare function generateContextId(context?: LDContext | null): string;
-/**
- * Check if two contexts are the same using their generated IDs
+ * 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;
 /**
@@ -32,3 +22,12 @@ export declare function getContextDisplayName(context: LDContext | null | undefi
  * 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

@@ -45,3 +45,5 @@ 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

@@ -135,4 +135,13 @@ export declare class ToolbarAnalytics {
      * 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/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/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.6.1-beta.1"}');
+var package_namespaceObject = JSON.parse('{"rE":"2.8.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.6.1-beta.1"}');
+var package_namespaceObject = JSON.parse('{"rE":"2.8.0-beta.1"}');
 function useLaunchDarklyToolbar(args) {
     const { toolbarBundleUrl, enabled, ...initConfig } = args;
     const configRef = useRef(null);

package/dist/js/react.js

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

package/dist/react.cjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@launchdarkly/toolbar",
-  "version": "2.6.1-beta.1",
+  "version": "2.8.0-beta.1",
   "description": "A framework-agnostic developer toolbar for interacting with LaunchDarkly during development",
   "keywords": [
     "launchdarkly",
@@ -93,51 +93,51 @@
   "devDependencies": {
     "@codemirror/commands": "^6.10.1",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/language": "^6.11.3",
+    "@codemirror/language": "^6.12.1",
     "@codemirror/lint": "^6.9.2",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.8",
-    "@launchdarkly/observability": "^0.4.9",
-    "@launchdarkly/session-replay": "^0.4.9",
-    "@launchpad-ui/components": "^0.17.7",
+    "@codemirror/state": "^6.5.3",
+    "@codemirror/view": "^6.39.7",
+    "@launchdarkly/observability": "^0.5.0",
+    "@launchdarkly/session-replay": "^0.5.0",
+    "@launchpad-ui/components": "^0.17.8",
     "@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.14",
+    "@rsbuild/core": "^1.7.1",
     "@rsbuild/plugin-react": "^1.4.2",
     "@rslib/core": "^0.18.4",
-    "@storybook/addon-docs": "^10.1.5",
+    "@storybook/addon-docs": "^10.1.10",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-interactions": "^9.0.0-alpha.10",
-    "@storybook/addon-links": "^10.1.7",
-    "@storybook/addon-onboarding": "^10.1.7",
+    "@storybook/addon-links": "^10.1.10",
+    "@storybook/addon-onboarding": "^10.1.10",
     "@storybook/blocks": "^9.0.0-alpha.17",
-    "@storybook/react": "^10.0.8",
+    "@storybook/react": "^10.1.10",
     "@storybook/react-vite": "^10.1.10",
     "@storybook/test": "^9.0.0-alpha.2",
     "@tanstack/react-virtual": "^3.13.13",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/node": "^25.0.1",
+    "@types/node": "^25.0.3",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
-    "@vanilla-extract/css": "^1.17.5",
-    "@vanilla-extract/vite-plugin": "^5.1.3",
-    "@vanilla-extract/webpack-plugin": "^2.3.24",
-    "@vitest/coverage-v8": "4.0.15",
+    "@vanilla-extract/css": "^1.18.0",
+    "@vanilla-extract/vite-plugin": "^5.1.4",
+    "@vanilla-extract/webpack-plugin": "^2.3.25",
+    "@vitest/coverage-v8": "4.0.16",
     "css-loader": "^7.1.2",
     "jsdom": "^27.3.0",
     "launchdarkly-js-client-sdk": "^3.9.0",
     "motion": "^12.23.26",
-    "oxlint": "^1.32.0",
+    "oxlint": "^1.35.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "storybook": "^10.1.4",
+    "storybook": "^10.1.10",
     "storybook-addon-rslib": "^3.2.0",
     "storybook-react-rsbuild": "^3.1.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.15"
+    "vitest": "^4.0.16"
   },
   "peerDependencies": {
     "launchdarkly-js-client-sdk": ">=3.9.0 <4.0.0",