@unleash/toolbar 1.0.0

package/README.md

@@ -0,0 +1,599 @@
+# Unleash Toolbar
+
+A client-side debugging toolbar for [Unleash](https://www.getunleash.io/) feature flags. Override flag values and context in real-time without server changes.
+
+## Features
+
+- **Flag Overrides**: Force boolean flags ON/OFF or override variant values
+- **Context Overrides**: Modify userId, sessionId, environment, and custom properties
+- **Persistence**: Save overrides in memory, sessionStorage, or localStorage
+- **React Integration**: Seamlessly wraps the official `@unleash/proxy-client-react` SDK
+- **Next.js SSR Support**: Server-side rendering with cookie-based state sync using `@unleash/nextjs`
+- **Customizable UI**: Theming support and positioning options
+- **SDK Compatible**: Works with Unleash JavaScript SDK
+
+## Bundle Size
+
+The toolbar is optimized for minimal impact on your application:
+
+- **Core**: ~8 KB gzipped
+- **React**: ~0.2 KB gzipped (thin wrapper)
+- **Next.js**: ~0.6 KB gzipped (server utilities)
+- **CSS**: ~2.4 KB gzipped
+
+## Installation
+
+```bash
+npm install @unleash/toolbar
+
+# For React integration
+npm install @unleash/toolbar @unleash/proxy-client-react unleash-proxy-client
+
+# For Next.js SSR integration
+npm install @unleash/toolbar @unleash/nextjs
+```
+
+## Quick Start
+
+### Vanilla JavaScript
+
+```javascript
+import { initUnleashToolbar } from '@unleash/toolbar';
+import { UnleashClient } from 'unleash-proxy-client';
+import '@unleash/toolbar/toolbar.css';
+
+// Initialize toolbar with new Unleash client - returns wrapped client
+const client = initUnleashToolbar(new UnleashClient({
+  url: 'https://your-unleash-instance.com/api/frontend',
+  clientKey: 'your-client-key',
+  appName: 'my-app'
+}), {
+  storageMode: 'local',
+  position: 'bottom-right',
+  initiallyVisible: true
+});
+
+// Start the client
+await client.start();
+
+// Use the client for all flag evaluations
+const isEnabled = client.isEnabled('my-feature');
+const variant = client.getVariant('my-experiment');
+
+// Listen for changes (from toolbar or SDK updates)
+client.on('update', () => {
+  // Re-evaluate flags when overrides change
+  const newValue = client.isEnabled('my-feature');
+  updateUI(newValue);
+});
+```
+
+### React
+
+The toolbar integrates seamlessly with the official **`@unleash/proxy-client-react`** SDK. Just pass your configuration - the toolbar handles everything automatically!
+
+```bash
+npm install @unleash/toolbar @unleash/proxy-client-react unleash-proxy-client
+```
+
+```tsx
+import { useFlag, useVariant } from '@unleash/proxy-client-react';
+import { UnleashToolbarProvider } from '@unleash/toolbar/react';
+import '@unleash/toolbar/toolbar.css';
+
+// Same config format as the official React SDK
+const config = {
+  url: 'https://your-unleash-instance.com/api/frontend',
+  clientKey: 'your-client-key',
+  appName: 'my-app',
+  refreshInterval: 15
+};
+
+// That's it! No need to import FlagProvider or manage the SDK client
+function App() {
+  return (
+    <UnleashToolbarProvider 
+      config={config}
+      toolbarOptions={{
+        storageMode: 'local',
+        position: 'bottom-right'
+      }}
+    >
+      <MyComponent />
+    </UnleashToolbarProvider>
+  );
+}
+
+// Use hooks from the official React SDK - they work with toolbar overrides!
+function MyComponent() {
+  const isEnabled = useFlag('my-feature');
+  const variant = useVariant('my-experiment');
+  
+  return (
+    <div>
+      {isEnabled && <NewFeature />}
+      {variant.name === 'variant-a' && <VariantA />}
+    </div>
+  );
+}
+```
+
+**Key Points:**
+- Pass `config` directly to `UnleashToolbarProvider` - no other imports needed!
+- The toolbar automatically uses `FlagProvider` from the React SDK
+- Import hooks from `@unleash/proxy-client-react` (the official SDK)
+- All official React SDK hooks work seamlessly with toolbar overrides
+
+**Advanced: Custom FlagProvider or pre-instantiated client**
+```tsx
+import { FlagProvider } from '@unleash/proxy-client-react';
+import { UnleashClient } from 'unleash-proxy-client';
+
+// Option 1: Custom FlagProvider
+<UnleashToolbarProvider 
+  FlagProvider={FlagProvider}  // Optional - use if you need customization
+  config={config}
+>
+  <MyApp />
+</UnleashToolbarProvider>
+
+// Option 2: Pre-instantiated client
+const client = new UnleashClient({ /* config */ });
+
+<UnleashToolbarProvider 
+  client={client}  // Pass client instead of config
+  toolbarOptions={{ /* ... */ }}
+>
+  <MyApp />
+</UnleashToolbarProvider>
+```
+```
+
+### Next.js App Router (Client & Server Components)
+
+The toolbar provides full Next.js App Router support with server-side rendering and cookie-based state synchronization.
+
+#### Client Components
+
+```tsx
+// app/layout.tsx
+import { UnleashToolbarProvider } from '@unleash/toolbar/next';
+import '@unleash/toolbar/toolbar.css';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <UnleashToolbarProvider
+          config={{
+            url: process.env.NEXT_PUBLIC_UNLEASH_URL!,
+            clientKey: process.env.NEXT_PUBLIC_UNLEASH_CLIENT_KEY!,
+            appName: 'my-next-app',
+          }}
+        >
+          {children}
+        </UnleashToolbarProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+```tsx
+// app/page.tsx
+'use client';
+
+import { useFlag, useVariant } from '@unleash/toolbar/next';
+
+export default function HomePage() {
+  const isEnabled = useFlag('new-checkout');
+  const variant = useVariant('payment-provider');
+
+  return (
+    <div>
+      {isEnabled && <NewCheckout />}
+      <PaymentForm provider={variant.name} />
+    </div>
+  );
+}
+```
+
+#### Server Components with SSR
+
+```tsx
+// app/server-page/page.tsx
+import { cookies } from 'next/headers';
+import { getDefinitions, evaluateFlags, flagsClient } from '@unleash/nextjs';
+import { applyToolbarOverrides } from '@unleash/toolbar/next/server';
+
+export default async function ServerPage() {
+  // Fetch definitions from Unleash API (uses env config)
+  const definitions = await getDefinitions({
+    fetchOptions: { next: { revalidate: 15 } },
+  });
+
+  // Apply toolbar overrides from cookies
+  const cookieStore = await cookies();
+  const modifiedDefinitions = applyToolbarOverrides(definitions, cookieStore);
+
+  // Evaluate flags with context
+  const { toggles } = evaluateFlags(modifiedDefinitions, {
+    sessionId: 'session-id',
+    userId: 'user-id',
+  });
+
+  // Create offline client
+  const flags = flagsClient(toggles);
+
+  // Check flags server-side
+  const isEnabled = flags.isEnabled('new-feature');
+
+  return <div>{isEnabled ? 'Feature ON' : 'Feature OFF'}</div>;
+}
+```
+
+**Environment Variables for Next.js:**
+```env
+# Used by @unleash/nextjs SDK
+UNLEASH_SERVER_API_URL=https://your-unleash-instance.com/api
+UNLEASH_SERVER_API_TOKEN=your-server-token
+UNLEASH_APP_NAME=my-app
+
+# Used by client-side toolbar
+NEXT_PUBLIC_UNLEASH_URL=https://your-unleash-instance.com/api/frontend
+NEXT_PUBLIC_UNLEASH_CLIENT_KEY=your-client-key
+NEXT_PUBLIC_UNLEASH_APP_NAME=my-app
+```
+
+**How it works:**
+1. Client-side toolbar automatically syncs state to cookies
+2. Server components read toolbar state from cookies
+3. `applyToolbarOverrides()` modifies flag definitions before evaluation
+4. Flags evaluate server-side with toolbar overrides applied
+5. Changes in toolbar immediately affect both client and server rendering
+
+### Vue 3 (Composition API)
+
+```vue
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useUnleash } from './composables/useUnleash'
+
+// Initialize Unleash with the composable
+const { unleashClient, isReady, updateTrigger } = useUnleash()
+
+// Reactive flag states
+const isEnabled = ref(false)
+
+// Evaluate flags
+const evaluateFlags = () => {
+  if (!unleashClient.value) return
+  isEnabled.value = unleashClient.value.isEnabled('my-feature')
+}
+
+// Evaluate when ready
+watch(isReady, (ready) => {
+  if (ready) evaluateFlags()
+})
+</script>
+```
+
+## Configuration Options
+
+### `initUnleashToolbar(client, options)`
+
+```typescript
+interface InitToolbarOptions {
+  // Persistence mode (default: 'local')
+  // - 'local': Persists across tabs and browser restarts (RECOMMENDED for development)
+  // - 'session': Persists only in current tab, cleared when tab closes
+  // - 'memory': No persistence, cleared on page reload
+  storageMode?: 'memory' | 'session' | 'local';
+  
+  // Storage key for persistence (default: 'unleash-toolbar-state')
+  storageKey?: string;
+  
+  // UI position (default: 'bottom-right')
+  // Corner positions: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  // Side positions (vertically centered): 'left' | 'right'
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+  
+  // Initial visibility (default: false, but respects persisted state if available)
+  initiallyVisible?: boolean;
+  
+  // Sort flags alphabetically instead of by evaluation order (default: false)
+  sortAlphabetically?: boolean;
+  
+  // Theme preset (default: 'light')
+  themePreset?: 'light' | 'dark';
+  
+  // Theme customization (overrides preset)
+  theme?: {
+    primaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    fontFamily?: string;
+  };
+  
+  // Custom container element (default: document.body)
+  container?: HTMLElement | null;
+
+  // Enable cookie sync for SSR (default: false)
+  // Set to true for Next.js or other SSR frameworks
+  enableCookieSync?: boolean;
+}
+```
+
+### Next.js Server Utilities
+
+```typescript
+import { applyToolbarOverrides, applyToolbarOverridesToToggles, getToolbarStateFromCookies } from '@unleash/toolbar/next/server';
+import type { ClientFeaturesResponse, IToggle } from '@unleash/nextjs';
+
+// Apply overrides before evaluation (recommended)
+const modifiedDefinitions = applyToolbarOverrides(
+  definitions: ClientFeaturesResponse,
+  cookieStore: CookieStore
+): ClientFeaturesResponse;
+
+// Apply overrides after evaluation (alternative)
+const modifiedToggles = applyToolbarOverridesToToggles(
+  toggles: IToggle[],
+  cookieStore: CookieStore
+): IToggle[];
+
+// Read toolbar state from cookies
+const state = getToolbarStateFromCookies(
+  cookieStore: CookieStore
+): ToolbarState | null;
+```
+
+### Storage Modes Explained
+
+**`local` (default)**: Best for development workflows
+- ✅ Persists across all browser tabs
+- ✅ Survives page reloads and browser restarts
+- ✅ Set overrides once, test everywhere
+- Use case: Daily feature development and debugging
+
+**`session`**: Useful for isolated testing
+- ✅ Persists within current tab only
+- ✅ Survives page reloads in the same tab
+- ❌ Lost when tab is closed
+- Use case: Testing different configurations in multiple tabs simultaneously
+
+**`memory`**: Temporary testing only
+- ❌ Lost on every page reload
+- ❌ No persistence whatsoever
+- Use case: Quick one-off tests or strict security requirements
+
+## API Reference
+
+### Toolbar Instance
+
+```typescript
+const toolbar = window.unleashToolbar;
+
+// Show/hide the toolbar
+toolbar.show();
+toolbar.hide();
+
+// Get current state
+const state = toolbar.getState();
+
+// Set flag overrides
+toolbar.setFlagOverride('my-feature', { type: 'flag', value: true });
+toolbar.setFlagOverride('my-variant', { type: 'variant', variantKey: 'variant-b' });
+toolbar.setFlagOverride('my-feature', null); // Clear override
+
+// Set context overrides
+toolbar.setContextOverride({
+  userId: 'test-user-123',
+  properties: { tier: 'premium' }
+});
+
+// Reset overrides
+toolbar.resetOverrides();
+toolbar.resetContextOverrides();
+
+// Cleanup
+toolbar.destroy();
+```
+
+### Listening to Changes
+
+The toolbar automatically triggers the Unleash SDK's `'update'` event when overrides change. Use the standard SDK pattern to listen for changes:
+
+```typescript
+// Listen to flag/context changes from the toolbar
+client.on('update', () => {
+  console.log('Flags updated - re-evaluate your flags');
+  // Re-render your UI, re-check flags, etc.
+});
+```
+
+This works for both toolbar changes (flag overrides, context overrides) and SDK changes (new config from server).
+
+### React Hooks
+
+Use hooks from the official `@unleash/proxy-client-react` SDK - they automatically work with toolbar overrides!
+
+```typescript
+import {
+  useFlag,
+  useVariant,
+  useUnleashClient,
+  useUnleashContext,
+  useFlagsStatus
+} from '@unleash/proxy-client-react';
+
+// Check flag status - updates automatically when toolbar overrides change
+const isEnabled = useFlag('my-feature');
+
+// Get variant - updates automatically when toolbar overrides change
+const variant = useVariant('my-experiment');
+
+// Access client (the wrapped client from the toolbar)
+const client = useUnleashClient();
+
+// Update context dynamically
+const updateContext = useUnleashContext();
+await updateContext({ userId: 'new-user-id' });
+
+// Check loading/ready state
+const { flagsReady, flagsError } = useFlagsStatus();
+```
+
+### Next.js Hooks
+
+For Next.js, import hooks from `@unleash/toolbar/next`, they're re-exported for convenience:
+
+```typescript
+import { useFlag, useVariant, useUnleashClient } from '@unleash/toolbar/next';
+
+const isEnabled = useFlag('my-feature');
+const variant = useVariant('my-experiment');
+```
+
+## UI Features
+
+### Flag List Tab
+
+- **Override Controls**: Dropdown to set boolean or variant overrides
+- **Flag Info**: See default vs. effective values for each flag
+- **Quick Actions**: Reset individual flag overrides
+
+### Context Tab
+
+- **Standard Fields**: userId, sessionId, remoteAddress, environment, appName
+- **Custom Properties**: Edit or reset property values
+- **Live Updates**: Changes apply immediately to all evaluations
+
+### Header Actions
+
+- **Reset Flags**: Clear all flag overrides
+- **Reset Context**: Clear all context overrides
+- **Close**: Hide the toolbar
+
+## Theme Customization
+
+Override CSS variables or use the theme option:
+
+```javascript
+const toolbar = initUnleashSessionToolbar({
+  theme: {
+    primaryColor: '#ff6b6b',
+    backgroundColor: '#ffffff',
+    textColor: '#2d3436',
+    borderColor: '#dfe6e9',
+    fontFamily: 'Inter, sans-serif'
+  }
+});
+```
+
+Or override CSS variables globally:
+
+```css
+:root {
+  --unleash-toolbar-primary: #your-color;
+  --unleash-toolbar-bg: #your-bg;
+  --unleash-toolbar-text: #your-text;
+  --unleash-toolbar-border: #your-border;
+  --unleash-toolbar-font: your-font;
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Run tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run tests with coverage
+npm run test:coverage
+
+# Run type checking
+npm run type-check
+
+# Run linter
+npm run lint
+
+# Auto-fix linting issues
+npm run lint:fix
+```
+
+### Example Applications
+
+The repository includes example applications demonstrating integration with different frameworks:
+
+- **Vanilla JS** - Basic HTML/JavaScript integration
+  ```bash
+  npm run serve:example:vanilla
+  ```
+
+- **React** - Hooks and provider pattern with official React SDK
+  ```bash
+  npm run serve:example:react
+  ```
+
+- **Next.js App Router** - Server-side rendering with client and server components
+  ```bash
+  npm run serve:example:nextjs
+  ```
+
+- **Angular** - Service-based integration
+  ```bash
+  npm run serve:example:angular
+  ```
+
+- **Vue 3** - Composition API with composables
+  ```bash
+  npm run serve:example:vue
+  ```
+
+All examples include:
+- Environment configuration setup
+- Multiple feature flags for testing
+- Variant flag demonstrations
+- Toolbar integration best practices
+- Server-side rendering examples (Next.js)
+
+## Requirements
+
+- **Browser**: Modern browsers with ES2020 support (Chrome 90+, Firefox 88+, Safari 14+)
+- **Unleash SDKs**:
+  - `unleash-proxy-client` ^3.0.0 (required)
+  - `@unleash/proxy-client-react` ^5.0.0 (optional, for React)
+  - `@unleash/nextjs` ^1.0.0 (optional, for Next.js SSR)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+Apache-2.0
+
+## Links
+
+- [Unleash Documentation](https://docs.getunleash.io/)
+- [Unleash JavaScript SDK](https://github.com/Unleash/unleash-proxy-client-js)
+- [Unleash React SDK](https://github.com/Unleash/proxy-client-react)
+- [Unleash Next.js SDK](https://github.com/Unleash/unleash-nextjs-sdk)
+- [npm Package](https://www.npmjs.com/package/@unleash/toolbar)
+
+## Support
+
+- [GitHub Issues](https://github.com/Unleash/toolbar/issues)
+- [Unleash Slack Community](https://unleash-community.slack.com/)
+- [Unleash Documentation](https://docs.getunleash.io/)

package/dist/__tests__/setup.d.ts

@@ -0,0 +1,5 @@
+interface GlobalWithLit {
+    litIssuedWarnings?: Set<string>;
+}
+declare const g: GlobalWithLit;
+//# sourceMappingURL=setup.d.ts.map

package/dist/__tests__/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAGA,UAAU,aAAa;IACrB,iBAAiB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,QAAA,MAAM,CAAC,EAA4B,aAAa,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { UnleashClient } from 'unleash-proxy-client';
+import { ToolbarStateManager } from './state';
+import { FlagOverride, InitToolbarOptions, ToolbarState, UnleashContext, UnleashToolbarInstance, WrappedUnleashClient } from './types';
+/**
+ * Main toolbar instance implementation
+ */
+export declare class UnleashToolbar implements UnleashToolbarInstance {
+    private stateManager;
+    private ui;
+    readonly client: WrappedUnleashClient;
+    constructor(stateManager: ToolbarStateManager, wrappedClient: WrappedUnleashClient, options: InitToolbarOptions);
+    private initUI;
+    show(): void;
+    hide(): void;
+    destroy(): void;
+    getState(): ToolbarState;
+    getFlagNames(): string[];
+    setFlagOverride(name: string, override: FlagOverride | null): void;
+    setContextOverride(context: Partial<UnleashContext>): void;
+    removeContextOverride(fieldName: keyof UnleashContext): void;
+    resetOverrides(): void;
+    resetContextOverrides(): void;
+}
+/**
+ * Initialize the Unleash Toolbar with a client
+ * This is the main entry point - handles both toolbar creation and client wrapping
+ * Returns the wrapped client directly for immediate use
+ *
+ * @param client - The Unleash client to wrap
+ * @param options - Toolbar configuration options
+ */
+export declare function initUnleashToolbar(client: UnleashClient, options?: InitToolbarOptions): WrappedUnleashClient;
+export { ToolbarStateManager } from './state';
+export * from './types';
+export { wrapUnleashClient } from './wrapper';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAElB,YAAY,EACZ,cAAc,EACd,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAGjB;;GAEG;AACH,qBAAa,cAAe,YAAW,sBAAsB;IAC3D,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,EAAE,CAAoB;IAC9B,SAAgB,MAAM,EAAE,oBAAoB,CAAC;gBAG3C,YAAY,EAAE,mBAAmB,EACjC,aAAa,EAAE,oBAAoB,EACnC,OAAO,EAAE,kBAAkB;YAUf,MAAM;IASpB,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAIZ,OAAO,IAAI,IAAI;IAKf,QAAQ,IAAI,YAAY;IAIxB,YAAY,IAAI,MAAM,EAAE;IAIxB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,IAAI;IAIlE,kBAAkB,CAAC,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAI1D,qBAAqB,CAAC,SAAS,EAAE,MAAM,cAAc,GAAG,IAAI;IAI5D,cAAc,IAAI,IAAI;IAItB,qBAAqB,IAAI,IAAI;CAG9B;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,aAAa,EACrB,OAAO,GAAE,kBAAuB,GAC/B,oBAAoB,CAuBtB;AAUD,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,2 @@
+class e{listeners=/* @__PURE__ */new Set;subscribe(e){return this.listeners.add(e),()=>this.listeners.delete(e)}emit(e){this.listeners.forEach(t=>{try{t(e)}catch(a){console.error("[Unleash Toolbar] Error in event listener:",a)}})}}class t{constructor(e,t){this.mode=e,this.key=t}enableCookieSync=!1;setCookieSyncEnabled(e){this.enableCookieSync=e}getStorage(){if("undefined"==typeof window)return null;switch(this.mode){case"local":return window.localStorage;case"session":return window.sessionStorage;default:return null}}syncToCookies(e){if(this.enableCookieSync&&"undefined"!=typeof document)try{!async function(e,t){if("undefined"==typeof document)return;const a=encodeURIComponent(t);if("cookieStore"in window)try{return void(await window.cookieStore.set({name:e,value:a,path:"/",sameSite:"lax",expires:Date.now()+6048e5}))}catch{}document.cookie=[`${e}=${a}`,"path=/","max-age=604800","SameSite=Lax"].join("; ")}("unleash-toolbar-state",JSON.stringify(e))}catch(t){console.error("[Unleash Toolbar] Failed to sync state to cookies:",t)}}load(){const e=this.getStorage();if(!e)return null;try{const t=e.getItem(this.key);return t?JSON.parse(t):null}catch(t){return console.error("[Unleash Toolbar] Failed to load state from storage:",t),null}}save(e){const t=this.getStorage();if(t)try{t.setItem(this.key,JSON.stringify(e)),this.syncToCookies(e)}catch(a){console.error("[Unleash Toolbar] Failed to save state to storage:",a)}}clear(){const e=this.getStorage();if(e)try{e.removeItem(this.key),this.enableCookieSync&&async function(e){if("undefined"!=typeof document){if("cookieStore"in window)try{return void(await window.cookieStore.delete(e))}catch{}document.cookie=`${e}=; path=/; max-age=0`}}("unleash-toolbar-state")}catch(t){console.error("[Unleash Toolbar] Failed to clear storage:",t)}}}class a{state;eventEmitter;storage;sortAlphabetically;constructor(a="local",s="unleash-toolbar-state",r=!1){this.eventEmitter=new e,this.storage=new t(a,s),this.sortAlphabetically=r;const i=this.storage.load();this.state=i||this.getInitialState()}getInitialState(){return{flags:{},contextOverrides:{}}}persist(){this.storage.save(this.state)}applyOverride(e,t){return t?"flag"===t.type?t.value:"variant"===t.type?"object"==typeof e&&null!==e&&"name"in e?{...e,name:t.variantKey,enabled:!0}:{name:t.variantKey,enabled:!0}:t:e}reEvaluateAllFlags(e){Object.keys(this.state.flags).forEach(t=>{const a=this.state.flags[t];if(a)try{const{defaultValue:s,effectiveValue:r}=e(t);this.state.flags[t]={...a,lastDefaultValue:s,lastEffectiveValue:r}}catch(s){console.error(`[Unleash Toolbar] Failed to re-evaluate flag ${t}:`,s)}}),this.persist(),this.eventEmitter.emit({type:"sdk_updated",timestamp:Date.now()})}getState(){return JSON.parse(JSON.stringify(this.state))}subscribe(e){return this.eventEmitter.subscribe(e)}recordEvaluation(e,t,a,s,r){const i=this.state.flags[e],n=!i;this.state.flags[e]={flagType:t,lastDefaultValue:a,lastEffectiveValue:s,lastContext:r,override:i?.override||null},this.persist(),n&&this.eventEmitter.emit({type:"sdk_updated",timestamp:Date.now()})}setFlagOverride(e,t){this.state.flags[e]?(this.state.flags[e].override=t,this.state.flags[e].lastEffectiveValue=this.applyOverride(this.state.flags[e].lastDefaultValue,t)):this.state.flags[e]={flagType:"variant"===t?.type?"variant":"flag",lastDefaultValue:null,lastEffectiveValue:this.applyOverride(null,t),lastContext:null,override:t},this.persist(),this.eventEmitter.emit({type:"flag_override_changed",name:e,override:t,timestamp:Date.now()})}getFlagOverride(e){return this.state.flags[e]?.override||null}setContextOverride(e){this.state.contextOverrides={...this.state.contextOverrides,...e},this.persist(),this.eventEmitter.emit({type:"context_override_changed",contextOverrides:this.state.contextOverrides})}removeContextOverride(e){const t={...this.state.contextOverrides};delete t[e],this.state.contextOverrides=t,this.persist(),this.eventEmitter.emit({type:"context_override_changed",contextOverrides:this.state.contextOverrides})}getMergedContext(e={}){return{...e,...this.state.contextOverrides,properties:{...e.properties||{},...this.state.contextOverrides.properties||{}}}}resetOverrides(){Object.keys(this.state.flags).forEach(e=>{this.state.flags[e].override=null,this.state.flags[e].lastEffectiveValue=this.state.flags[e].lastDefaultValue,this.eventEmitter.emit({type:"flag_override_changed",name:e,override:null,timestamp:Date.now()})}),this.persist()}resetContextOverrides(){this.state.contextOverrides={},this.persist(),this.eventEmitter.emit({type:"context_override_changed",contextOverrides:{}})}setVisibility(e){this.state.isVisible=e,this.persist()}getVisibility(){return this.state.isVisible}clearPersistence(){this.storage.clear()}getFlagNames(){const e=Object.keys(this.state.flags);return this.sortAlphabetically?e.sort():e}getFlagMetadata(e){return this.state.flags[e]||null}enableCookieSync(){this.storage.setCookieSyncEnabled(!0)}}function s(e,t){if("__original"in e)return e;const a=e.getContext(),s=/* @__PURE__ */new Set;let i;const n={__original:e,isEnabled:function(a){const s=e.getContext(),i=t.getMergedContext(s),n=e.isEnabled(a),o=r(n,t.getFlagOverride(a));return t.recordEvaluation(a,"flag",n,o,i),o},getVariant:function(a){const s=e.getContext(),i=t.getMergedContext(s),n=e.getVariant(a),o=r(n,t.getFlagOverride(a));return t.recordEvaluation(a,"variant",n,o,i),o},getContext:function(){const a=e.getContext();return{appName:"",...t.getMergedContext(a)}},on:function(t,a){return"update"===t&&s.add(a),e.on(t,a),i}};function o(){s.forEach(e=>{try{e()}catch(t){console.error("[Unleash Toolbar] Error in update listener:",t)}})}return e.on("update",()=>{t.reEvaluateAllFlags(a=>{const s=t.getFlagMetadata(a),i="variant"===s?.flagType?e.getVariant(a):e.isEnabled(a);return{defaultValue:i,effectiveValue:r(i,t.getFlagOverride(a))}})}),t.subscribe(s=>{if("context_override_changed"===s.type){const s=t.getMergedContext(a),{appName:i,environment:n,...l}=s;e.updateContext(l).then(()=>{t.reEvaluateAllFlags(a=>{const s=t.getFlagMetadata(a),i="variant"===s?.flagType?e.getVariant(a):e.isEnabled(a);return{defaultValue:i,effectiveValue:r(i,t.getFlagOverride(a))}}),o()}).catch(e=>{console.error("[Unleash Toolbar] Failed to update context:",e)})}"flag_override_changed"===s.type&&o()}),i=new Proxy(n,{get(t,a){if(a in t)return Reflect.get(t,a);const s=Reflect.get(e,a);return"function"==typeof s?s.bind(e):s},set:(t,a,s)=>a in t?(Reflect.set(t,a,s),!0):(Reflect.set(e,a,s),!0)}),i}function r(e,t){return t?"flag"===t.type?t.value:"variant"===t.type?"object"==typeof e&&null!==e&&"name"in e?{...e,name:t.variantKey,enabled:!0}:{name:t.variantKey,enabled:!0}:e:e}class i{stateManager;ui;client;constructor(e,t,a){this.stateManager=e,this.client=t,this.ui=null,this.initUI(e,t,a)}async initUI(e,t,a){const{ToolbarUI:s}=await import("./ui-LKEosjLO.js");this.ui=new s(e,t,a)}show(){this.ui&&this.ui.show()}hide(){this.ui&&this.ui.hide()}destroy(){this.ui&&this.ui.destroy(),this.stateManager.clearPersistence()}getState(){return this.stateManager.getState()}getFlagNames(){return this.stateManager.getFlagNames()}setFlagOverride(e,t){this.stateManager.setFlagOverride(e,t)}setContextOverride(e){this.stateManager.setContextOverride(e)}removeContextOverride(e){this.stateManager.removeContextOverride(e)}resetOverrides(){this.stateManager.resetOverrides()}resetContextOverrides(){this.stateManager.resetContextOverrides()}}function n(e,t={}){const r=t.enableCookieSync||!1,n=new a(t.storageMode||"local",t.storageKey||"unleash-toolbar-state",t.sortAlphabetically||!1);r&&n.enableCookieSync();const o=s(e,n),l=new i(n,o,t);return"undefined"!=typeof window&&(window.unleashToolbar=l),o}"undefined"!=typeof window&&(window.UnleashToolbar={init:n});export{a as ToolbarStateManager,i as UnleashToolbar,n as initUnleashToolbar,s as wrapUnleashClient};
+//# sourceMappingURL=index.es.js.map