ngx-dev-toolbar 3.1.0 → 3.2.0

package/fesm2022/ngx-dev-toolbar.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, ChangeDetectionStrategy, Component, input, model, ElementRef, output, viewChild, contentChild, effect, DestroyRef, ViewEncapsulation, EnvironmentInjector, createComponent, TemplateRef, Directive, contentChildren } from '@angular/core';
+import { InjectionToken, signal, computed, Injectable, ChangeDetectionStrategy, Component, input, inject, model, ElementRef, output, viewChild, contentChild, effect, DestroyRef, ViewEncapsulation, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, ApplicationRef, EnvironmentInjector, createComponent, TemplateRef, Directive, contentChildren } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { CommonModule, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, combineLatest, map, firstValueFrom, fromEvent } from 'rxjs';
-import { trigger, state, transition, style, animate } from '@angular/animations';
-import { CommonModule, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { filter, throttleTime } from 'rxjs/operators';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -12,6 +12,13 @@ import { CdkMenuModule } from '@angular/cdk/menu';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
 
+/**
+ * InjectionToken for the Toolbar configuration.
+ *
+ * Provided automatically by `provideToolbar(config)`.
+ * Can be injected to access the toolbar configuration at runtime.
+ */
+const TOOLBAR_CONFIG = new InjectionToken('TOOLBAR_CONFIG');
 /**
  * InjectionToken for the Feature Flags service.
  *
@@ -175,1367 +182,257 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
-class ToolbarStorageService {
+class AngularIconComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AngularIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: AngularIconComponent, isStandalone: true, selector: "ngt-angular-icon", ngImport: i0, template: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <defs>
+        <linearGradient
+          id="angular-gradient"
+          x1="6"
+          x2="18"
+          y1="20"
+          y2="4"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#E40035" />
+          <stop offset=".24" stop-color="#F60A48" />
+          <stop offset=".352" stop-color="#F20755" />
+          <stop offset=".494" stop-color="#DC087D" />
+          <stop offset=".745" stop-color="#9717E7" />
+          <stop offset="1" stop-color="#6C00F5" />
+        </linearGradient>
+      </defs>
+      <g fill="url(#angular-gradient)">
+        <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
+        <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
+        <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
+        <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
+      </g>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AngularIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-angular-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <defs>
+        <linearGradient
+          id="angular-gradient"
+          x1="6"
+          x2="18"
+          y1="20"
+          y2="4"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#E40035" />
+          <stop offset=".24" stop-color="#F60A48" />
+          <stop offset=".352" stop-color="#F20755" />
+          <stop offset=".494" stop-color="#DC087D" />
+          <stop offset=".745" stop-color="#9717E7" />
+          <stop offset="1" stop-color="#6C00F5" />
+        </linearGradient>
+      </defs>
+      <g fill="url(#angular-gradient)">
+        <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
+        <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
+        <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
+        <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
+      </g>
+    </svg>
+  `,
+                }]
+        }] });
+
+class BoltIconComponent {
     constructor() {
-        this.PREFIX = 'AngularToolbar.';
-        this.TOOLS_KEY = `${this.PREFIX}keys`;
-        this.SETTINGS_KEY = `${this.PREFIX}settings`;
-    }
-    set(key, value) {
-        const toolKey = this.getToolKey(key);
-        this.addToolKey(toolKey);
-        localStorage.setItem(toolKey, JSON.stringify(value));
-    }
-    get(key) {
-        const toolKey = this.getToolKey(key);
-        const item = localStorage.getItem(toolKey);
-        return item ? JSON.parse(item) : null;
-    }
-    remove(key) {
-        const toolKey = this.getToolKey(key);
-        localStorage.removeItem(toolKey);
-        this.removeToolKey(toolKey);
-    }
-    getAllSettings() {
-        const settings = {};
-        const keys = this.getToolKeys();
-        keys.forEach((key) => {
-            const value = this.get(key);
-            if (value !== null) {
-                settings[key] = value;
-            }
-        });
-        return settings;
-    }
-    setAllSettings(settings) {
-        Object.entries(settings).forEach(([key, value]) => {
-            this.set(key, value);
-        });
-    }
-    clearAllSettings() {
-        const keys = this.getToolKeys();
-        keys.forEach((key) => {
-            this.remove(key);
-        });
-    }
-    getToolKeys() {
-        return JSON.parse(localStorage.getItem(this.TOOLS_KEY) ?? '[]');
-    }
-    addToolKey(key) {
-        const currentKeys = this.getToolKeys();
-        if (currentKeys.includes(key)) {
-            return;
-        }
-        currentKeys.push(key);
-        localStorage.setItem(this.TOOLS_KEY, JSON.stringify(currentKeys));
-    }
-    removeToolKey(key) {
-        const currentKeys = this.getToolKeys();
-        const index = currentKeys.indexOf(key);
-        if (index !== -1) {
-            currentKeys.splice(index, 1);
-        }
-        localStorage.setItem(this.TOOLS_KEY, JSON.stringify(currentKeys));
-    }
-    getToolKey(key) {
-        return key.includes(this.PREFIX) ? key : this.PREFIX + key;
+        this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BoltIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: BoltIconComponent, isStandalone: true, selector: "ngt-bolt-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M160,16,144,96H208l-96,144,16-80H64Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStorageService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BoltIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-bolt-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M160,16,144,96H208l-96,144,16-80H64Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
+      ></path>
+    </svg>
+  `,
+                }]
         }] });
 
-class ToolbarInternalFeatureFlagService {
+class BugIconComponent {
     constructor() {
-        this.STORAGE_KEY = 'feature-flags';
-        this.storageService = inject(ToolbarStorageService);
-        this.stateService = inject(ToolbarStateService);
-        this.appFlags$ = new BehaviorSubject([]);
-        this.forcedFlagsSubject = new BehaviorSubject({
-            enabled: [],
-            disabled: [],
-        });
-        this.forcedFlags$ = this.forcedFlagsSubject.asObservable();
-        this.flags$ = combineLatest([
-            this.appFlags$,
-            this.forcedFlags$,
-        ]).pipe(map(([appFlags, { enabled, disabled }]) => {
-            // If toolbar is disabled, return app flags without overrides
-            if (!this.stateService.isEnabled()) {
-                return appFlags;
-            }
-            return appFlags.map((flag) => {
-                const isForced = enabled.includes(flag.id) || disabled.includes(flag.id);
-                return {
-                    ...flag,
-                    isForced,
-                    isEnabled: enabled.includes(flag.id)
-                        ? true
-                        : disabled.includes(flag.id)
-                            ? false
-                            : flag.isEnabled,
-                    originalValue: isForced ? flag.isEnabled : undefined,
-                };
-            });
-        }));
-        this.flags = toSignal(this.flags$, { initialValue: [] });
-        this.loadForcedFlags();
-    }
-    setAppFlags(flags) {
-        this.appFlags$.next(flags);
-    }
-    getAppFlags() {
-        return this.appFlags$.asObservable();
-    }
-    getForcedFlags() {
-        return this.flags$.pipe(map((flags) => {
-            // If toolbar is disabled, return empty array (no forced values)
-            if (!this.stateService.isEnabled()) {
-                return [];
-            }
-            return flags.filter((flag) => flag.isForced);
-        }));
-    }
-    setFlag(flagId, isEnabled) {
-        const { enabled, disabled } = this.forcedFlagsSubject.value;
-        const newEnabled = enabled.filter((id) => id !== flagId);
-        const newDisabled = disabled.filter((id) => id !== flagId);
-        if (isEnabled) {
-            newEnabled.push(flagId);
-        }
-        else {
-            newDisabled.push(flagId);
-        }
-        const newState = { enabled: newEnabled, disabled: newDisabled };
-        this.forcedFlagsSubject.next(newState);
-        this.storageService.set(this.STORAGE_KEY, newState);
+        this.fill = input('#FFFF');
     }
-    removeFlagOverride(flagId) {
-        const { enabled, disabled } = this.forcedFlagsSubject.value;
-        const newState = {
-            enabled: enabled.filter((id) => id !== flagId),
-            disabled: disabled.filter((id) => id !== flagId),
-        };
-        this.forcedFlagsSubject.next(newState);
-        this.storageService.set(this.STORAGE_KEY, newState);
-    }
-    loadForcedFlags() {
-        const savedFlags = this.storageService.get(this.STORAGE_KEY);
-        if (savedFlags) {
-            this.forcedFlagsSubject.next(savedFlags);
-        }
-    }
-    /**
-     * Apply feature flags from a preset (used by Presets Tool)
-     * This method directly sets the forced flags state without user interaction
-     */
-    applyPresetFlags(presetState) {
-        this.forcedFlagsSubject.next(presetState);
-        this.storageService.set(this.STORAGE_KEY, presetState);
-    }
-    /**
-     * Get current forced state for saving to preset
-     * Returns the raw state of enabled and disabled flag IDs
-     */
-    getCurrentForcedState() {
-        return this.forcedFlagsSubject.value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalFeatureFlagService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BugIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: BugIconComponent, isStandalone: true, selector: "ngt-bug-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M140,88a16,16,0,1,1,16,16A16,16,0,0,1,140,88ZM100,72a16,16,0,1,0,16,16A16,16,0,0,0,100,72Zm120,72a91.84,91.84,0,0,1-2.34,20.64L236.81,173a12,12,0,0,1-9.62,22l-18-7.85a92,92,0,0,1-162.46,0l-18,7.85a12,12,0,1,1-9.62-22l19.15-8.36A91.84,91.84,0,0,1,36,144v-4H16a12,12,0,0,1,0-24H36v-4a91.84,91.84,0,0,1,2.34-20.64L19.19,83a12,12,0,0,1,9.62-22l18,7.85a92,92,0,0,1,162.46,0l18-7.85a12,12,0,1,1,9.62,22l-19.15,8.36A91.84,91.84,0,0,1,220,112v4h20a12,12,0,0,1,0,24H220ZM60,116H196v-4a68,68,0,0,0-136,0Zm56,94.92V140H60v4A68.1,68.1,0,0,0,116,210.92ZM196,144v-4H140v70.92A68.1,68.1,0,0,0,196,144Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalFeatureFlagService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BugIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-bug-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M140,88a16,16,0,1,1,16,16A16,16,0,0,1,140,88ZM100,72a16,16,0,1,0,16,16A16,16,0,0,0,100,72Zm120,72a91.84,91.84,0,0,1-2.34,20.64L236.81,173a12,12,0,0,1-9.62,22l-18-7.85a92,92,0,0,1-162.46,0l-18,7.85a12,12,0,1,1-9.62-22l19.15-8.36A91.84,91.84,0,0,1,36,144v-4H16a12,12,0,0,1,0-24H36v-4a91.84,91.84,0,0,1,2.34-20.64L19.19,83a12,12,0,0,1,9.62-22l18,7.85a92,92,0,0,1,162.46,0l18-7.85a12,12,0,1,1,9.62,22l-19.15,8.36A91.84,91.84,0,0,1,220,112v4h20a12,12,0,0,1,0,24H220ZM60,116H196v-4a68,68,0,0,0-136,0Zm56,94.92V140H60v4A68.1,68.1,0,0,0,116,210.92ZM196,144v-4H140v70.92A68.1,68.1,0,0,0,196,144Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
 
-class ToolbarFeatureFlagService {
+class CodeIconComponent {
     constructor() {
-        this.internalService = inject(ToolbarInternalFeatureFlagService);
-    }
-    /**
-     * Sets the available flags that will be displayed in the tool on the dev toolbar
-     * @param flags The flags to be displayed
-     */
-    setAvailableOptions(flags) {
-        this.internalService.setAppFlags(flags);
-    }
-    /**
-     * Gets the flags that were forced/modified through the tool on the dev toolbar
-     * @returns Observable of forced flags array
-     */
-    getForcedValues() {
-        return this.internalService.getForcedFlags();
-    }
-    /**
-     * Gets ALL flag values with overrides already applied.
-     * Returns the complete set of flags where overridden values replace base values.
-     * Each flag includes an `isForced` property indicating if it was overridden.
-     *
-     * This method simplifies integration by eliminating the need to manually merge
-     * base flags with overrides using combineLatest.
-     *
-     * @returns Observable of all flags with overrides applied
-     *
-     * @example
-     * ```typescript
-     * // Get a specific flag value with overrides applied
-     * this.featureFlagsService.getValues().pipe(
-     *   map(flags => flags.find(f => f.id === 'newFeature')),
-     *   map(flag => flag?.isEnabled ?? false)
-     * ).subscribe(isEnabled => {
-     *   if (isEnabled) {
-     *     // Enable feature
-     *   }
-     * });
-     * ```
-     */
-    getValues() {
-        return this.internalService.flags$;
+        this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CodeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: CodeIconComponent, isStandalone: true, selector: "ngt-code-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path>
+      <path
+        d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CodeIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-code-icon',
+                    standalone: true,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path>
+      <path
+        d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
+      ></path>
+    </svg>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
-class ToolbarInternalPermissionsService {
+class DatabaseIconComponent {
     constructor() {
-        this.STORAGE_KEY = 'permissions';
-        this.storageService = inject(ToolbarStorageService);
-        this.stateService = inject(ToolbarStateService);
-        this.appPermissions$ = new BehaviorSubject([]);
-        this.forcedStateSubject = new BehaviorSubject({
-            granted: [],
-            denied: [],
-        });
-        this.forcedState$ = this.forcedStateSubject.asObservable();
-        this.permissions$ = combineLatest([
-            this.appPermissions$,
-            this.forcedState$,
-        ]).pipe(map(([appPermissions, { granted, denied }]) => {
-            // If toolbar is disabled, return app permissions without overrides
-            if (!this.stateService.isEnabled()) {
-                return appPermissions;
-            }
-            return appPermissions.map((permission) => {
-                const isForced = granted.includes(permission.id) || denied.includes(permission.id);
-                return {
-                    ...permission,
-                    isForced,
-                    isGranted: granted.includes(permission.id)
-                        ? true
-                        : denied.includes(permission.id)
-                            ? false
-                            : permission.isGranted,
-                    originalValue: isForced ? permission.isGranted : undefined,
-                };
-            });
-        }));
-        this.permissions = toSignal(this.permissions$, { initialValue: [] });
-        this.loadForcedState();
-    }
-    setAppPermissions(permissions) {
-        this.appPermissions$.next(permissions);
-        this.validateAndCleanForcedState(permissions);
+        this.fill = input('#FFFF');
     }
-    setPermission(id, granted) {
-        const { granted: grantedIds, denied: deniedIds } = this.forcedStateSubject.value;
-        const newGranted = grantedIds.filter((permId) => permId !== id);
-        const newDenied = deniedIds.filter((permId) => permId !== id);
-        if (granted) {
-            newGranted.push(id);
-        }
-        else {
-            newDenied.push(id);
-        }
-        const newState = { granted: newGranted, denied: newDenied };
-        this.forcedStateSubject.next(newState);
-        this.storageService.set(this.STORAGE_KEY, newState);
-    }
-    removePermissionOverride(id) {
-        const { granted, denied } = this.forcedStateSubject.value;
-        const newState = {
-            granted: granted.filter((permId) => permId !== id),
-            denied: denied.filter((permId) => permId !== id),
-        };
-        this.forcedStateSubject.next(newState);
-        this.storageService.set(this.STORAGE_KEY, newState);
-    }
-    getForcedPermissions() {
-        return this.permissions$.pipe(map((permissions) => {
-            // If toolbar is disabled, return empty array (no forced values)
-            if (!this.stateService.isEnabled()) {
-                return [];
-            }
-            return permissions.filter((permission) => permission.isForced);
-        }));
-    }
-    /**
-     * Apply a preset permissions state, replacing the current forced state.
-     * Useful for automated testing or restoring saved configurations.
-     * @param state The preset forced permissions state to apply
-     */
-    applyPresetPermissions(state) {
-        this.forcedStateSubject.next(state);
-        this.storageService.set(this.STORAGE_KEY, state);
-    }
-    /**
-     * Get the current forced permissions state.
-     * Returns a deep copy to prevent external mutations.
-     * @returns Current forced permissions state
-     */
-    getCurrentForcedState() {
-        const currentState = this.forcedStateSubject.value;
-        return {
-            granted: [...currentState.granted],
-            denied: [...currentState.denied],
-        };
-    }
-    loadForcedState() {
-        try {
-            const savedState = this.storageService.get(this.STORAGE_KEY);
-            if (savedState && this.isValidForcedState(savedState)) {
-                this.forcedStateSubject.next(savedState);
-            }
-        }
-        catch (error) {
-            console.warn('Error loading forced permissions state from localStorage:', error);
-        }
-    }
-    isValidForcedState(state) {
-        if (!state || typeof state !== 'object') {
-            return false;
-        }
-        const candidate = state;
-        return (Array.isArray(candidate['granted']) &&
-            Array.isArray(candidate['denied']));
-    }
-    validateAndCleanForcedState(permissions) {
-        const currentState = this.forcedStateSubject.value;
-        const validIds = new Set(permissions.map((p) => p.id));
-        const cleanedGranted = currentState.granted.filter((id) => validIds.has(id));
-        const cleanedDenied = currentState.denied.filter((id) => validIds.has(id));
-        const hasInvalidIds = cleanedGranted.length !== currentState.granted.length ||
-            cleanedDenied.length !== currentState.denied.length;
-        if (hasInvalidIds) {
-            const cleanedState = {
-                granted: cleanedGranted,
-                denied: cleanedDenied,
-            };
-            this.forcedStateSubject.next(cleanedState);
-            this.storageService.set(this.STORAGE_KEY, cleanedState);
-            const invalidIds = [
-                ...currentState.granted.filter((id) => !validIds.has(id)),
-                ...currentState.denied.filter((id) => !validIds.has(id)),
-            ];
-            if (invalidIds.length > 0) {
-                console.warn('Removed invalid permission IDs from forced state:', invalidIds);
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalPermissionsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalPermissionsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-/**
- * Public service for integrating the Permissions Tool with your application.
- * Use this service to:
- * 1. Register your application's permissions with setAvailableOptions()
- * 2. Listen for toolbar permission overrides with getForcedValues()
- * 3. Apply preset permission states for testing with applyPreset()
- *
- * @example
- * ```typescript
- * constructor(private permissionsService: ToolbarPermissionsService) {
- *   // Register permissions
- *   this.permissionsService.setAvailableOptions([
- *     { id: 'can-edit', name: 'Can Edit', isGranted: false, isForced: false }
- *   ]);
- *
- *   // Listen for overrides
- *   this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
- *     // Update your app's permission state
- *   });
- * }
- * ```
- */
-class ToolbarPermissionsService {
-    constructor() {
-        this.internalService = inject(ToolbarInternalPermissionsService);
-    }
-    /**
-     * Sets the available permissions that will be displayed in the toolbar tool.
-     * Call this in your app initialization to register permissions.
-     *
-     * @param permissions Array of permissions to display in the toolbar
-     *
-     * @example
-     * ```typescript
-     * this.permissionsService.setAvailableOptions([
-     *   {
-     *     id: 'can-edit-posts',
-     *     name: 'Edit Posts',
-     *     description: 'Can edit blog posts',
-     *     isGranted: false,
-     *     isForced: false
-     *   }
-     * ]);
-     * ```
-     */
-    setAvailableOptions(permissions) {
-        this.internalService.setAppPermissions(permissions);
-    }
-    /**
-     * Gets an observable of permissions that were forced/overridden through the toolbar.
-     * Subscribe to this to update your application's permission state.
-     *
-     * @returns Observable emitting array of forced permissions whenever changes occur
-     *
-     * @example
-     * ```typescript
-     * this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
-     *   forcedPermissions.forEach(permission => {
-     *     this.updatePermission(permission.id, permission.isGranted);
-     *   });
-     * });
-     * ```
-     */
-    getForcedValues() {
-        return this.internalService.getForcedPermissions();
-    }
-    /**
-     * Gets ALL permission values with overrides already applied.
-     * Returns the complete set of permissions where overridden values replace base values.
-     * Each permission includes an `isForced` property indicating if it was overridden.
-     *
-     * This method simplifies integration by eliminating the need to manually merge
-     * base permissions with overrides using combineLatest.
-     *
-     * @returns Observable of all permissions with overrides applied
-     *
-     * @example
-     * ```typescript
-     * // Simple permission check with overrides applied
-     * this.permissionsService.getValues().pipe(
-     *   map(permissions => permissions.find(p => p.id === 'can-edit')),
-     *   map(permission => permission?.isGranted ?? false)
-     * ).subscribe(canEdit => {
-     *   if (canEdit) {
-     *     // Enable edit functionality
-     *   }
-     * });
-     * ```
-     */
-    getValues() {
-        return this.internalService.permissions$;
-    }
-    /**
-     * Apply a preset permission state. Useful for automated testing scenarios.
-     *
-     * @param state The forced permissions state to apply
-     *
-     * @example
-     * ```typescript
-     * this.permissionsService.applyPreset({
-     *   granted: ['can-edit-posts'],
-     *   denied: ['can-delete-posts']
-     * });
-     * ```
-     */
-    applyPreset(state) {
-        this.internalService.applyPresetPermissions(state);
-    }
-    /**
-     * Get the current forced permission state.
-     *
-     * @returns Current forced permissions state
-     */
-    getCurrentState() {
-        return this.internalService.getCurrentForcedState();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class ToolbarInternalLanguageService {
-    constructor() {
-        this.STORAGE_KEY = 'language';
-        this.storageService = inject(ToolbarStorageService);
-        this.stateService = inject(ToolbarStateService);
-        this.languages$ = new BehaviorSubject([]);
-        this.forcedLanguage$ = new BehaviorSubject(null);
-        this.languages = toSignal(this.languages$, { initialValue: [] });
-        this.loadForcedLanguage();
-    }
-    setAppLanguages(languages) {
-        this.languages$.next(languages);
-    }
-    getAppLanguages() {
-        return this.languages$.asObservable();
-    }
-    setForcedLanguage(language) {
-        this.forcedLanguage$.next(language);
-        this.storageService.set(this.STORAGE_KEY, language);
-    }
-    getForcedLanguage() {
-        return this.forcedLanguage$.pipe(map((language) => {
-            // If toolbar is disabled, return empty array (no forced values)
-            if (!this.stateService.isEnabled()) {
-                return [];
-            }
-            return language ? [language] : [];
-        }));
-    }
-    removeForcedLanguage() {
-        this.forcedLanguage$.next(null);
-        this.storageService.remove(this.STORAGE_KEY);
-    }
-    loadForcedLanguage() {
-        const savedLanguage = this.storageService.get(this.STORAGE_KEY);
-        if (savedLanguage) {
-            this.forcedLanguage$.next(savedLanguage);
-        }
-    }
-    /**
-     * Apply language from a preset (used by Presets Tool)
-     * Accepts a language ID and finds the corresponding Language object from available languages
-     */
-    async applyPresetLanguage(languageId) {
-        if (languageId === null) {
-            this.removeForcedLanguage();
-            return;
-        }
-        // Get available languages and find matching one
-        const languages = await firstValueFrom(this.languages$);
-        const language = languages.find((lang) => lang.id === languageId);
-        if (language) {
-            this.setForcedLanguage(language);
-        }
-        else {
-            console.warn(`Language ${languageId} not found in available languages. Skipping.`);
-        }
-    }
-    /**
-     * Get current forced language ID for saving to preset
-     * Returns the language ID or null if no language is forced
-     */
-    getCurrentForcedLanguage() {
-        return this.forcedLanguage$.value?.id ?? null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalLanguageService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalLanguageService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-class ToolbarLanguageService {
-    constructor() {
-        this.internalService = inject(ToolbarInternalLanguageService);
-    }
-    /**
-     * Sets the available languages that will be displayed in the tool on the dev toolbar
-     * @param languages The languages to be displayed
-     */
-    setAvailableOptions(languages) {
-        this.internalService.setAppLanguages(languages);
-    }
-    /**
-     * Gets the languages that were forced/modified through the tool on the dev toolbar
-     * @returns Observable of forced languages array
-     */
-    getForcedValues() {
-        return this.internalService.getForcedLanguage();
-    }
-    /**
-     * Gets the forced language value.
-     * For the language tool, this returns the same as getForcedValues() since
-     * only one language can be selected at a time.
-     * @returns Observable of forced language array (single item or empty)
-     */
-    getValues() {
-        return this.internalService.getForcedLanguage();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * Internal service for managing app features state and forced overrides.
- *
- * This service handles:
- * - Feature configuration storage
- * - Forced feature state management
- * - localStorage persistence
- * - State validation and cleanup
- *
- * @internal This service is for internal toolbar use only. Consumers should use ToolbarAppFeaturesService.
- */
-class ToolbarInternalAppFeaturesService {
-    constructor() {
-        this.STORAGE_KEY = 'app-features';
-        this.storageService = inject(ToolbarStorageService);
-        this.stateService = inject(ToolbarStateService);
-        this.appFeaturesSubject = new BehaviorSubject([]);
-        this.forcedFeaturesSubject = new BehaviorSubject({
-            enabled: [],
-            disabled: [],
-        });
-        this.forcedFeatures$ = this.forcedFeaturesSubject.asObservable();
-        /**
-         * Observable stream of all features with merged forced state
-         */
-        this.features$ = combineLatest([
-            this.appFeaturesSubject.asObservable(),
-            this.forcedFeatures$,
-        ]).pipe(map(([appFeatures, forcedState]) => this.mergeForcedState(appFeatures, forcedState)));
-        /**
-         * Signal containing current features with merged forced state
-         */
-        this.features = toSignal(this.features$, { initialValue: [] });
-        this.loadForcedFeatures();
-    }
-    /**
-     * Set available app features for the application.
-     * Validates features, trims whitespace, and triggers validation of forced state.
-     *
-     * @param features - Array of app features to configure
-     * @throws Error if duplicate feature IDs or empty IDs are detected
-     */
-    setAppFeatures(features) {
-        // Validate for empty IDs
-        const emptyIdFeature = features.find((f) => !f.id || f.id.trim() === '');
-        if (emptyIdFeature) {
-            throw new Error('Feature ID cannot be empty');
-        }
-        // Validate for duplicate IDs
-        const ids = features.map((f) => f.id);
-        const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index);
-        if (duplicateIds.length > 0) {
-            throw new Error(`Duplicate feature IDs detected: ${duplicateIds.join(', ')}`);
-        }
-        // Trim whitespace from names and warn about empty names
-        const processedFeatures = features.map((feature) => {
-            const trimmedName = feature.name.trim();
-            if (!trimmedName) {
-                console.warn(`Feature '${feature.id}' has empty name`);
-            }
-            return {
-                ...feature,
-                name: trimmedName || feature.name,
-            };
-        });
-        this.appFeaturesSubject.next(processedFeatures);
-        this.validateAndCleanForcedState();
-    }
-    /**
-     * Get observable stream of app features (natural state, no forced state merged)
-     */
-    getAppFeatures() {
-        return this.appFeaturesSubject.asObservable();
-    }
-    /**
-     * Get observable stream of features that have forced overrides
-     */
-    getForcedFeatures() {
-        return this.features$.pipe(map((features) => {
-            // If toolbar is disabled, return empty array (no forced values)
-            if (!this.stateService.isEnabled()) {
-                return [];
-            }
-            return features.filter((feature) => feature.isForced);
-        }));
-    }
-    /**
-     * Force a feature to enabled or disabled state.
-     * Persists the forced state to localStorage.
-     *
-     * @param featureId - ID of the feature to force
-     * @param isEnabled - Whether to force feature to enabled (true) or disabled (false)
-     */
-    setFeature(featureId, isEnabled) {
-        const { enabled, disabled } = this.forcedFeaturesSubject.value;
-        // Remove feature from both arrays
-        const newEnabled = enabled.filter((id) => id !== featureId);
-        const newDisabled = disabled.filter((id) => id !== featureId);
-        // Add to appropriate array
-        if (isEnabled) {
-            newEnabled.push(featureId);
-        }
-        else {
-            newDisabled.push(featureId);
-        }
-        const newState = { enabled: newEnabled, disabled: newDisabled };
-        this.forcedFeaturesSubject.next(newState);
-        this.saveForcedFeatures(newState);
-    }
-    /**
-     * Remove forced override for a feature, returning it to natural state.
-     * Persists the change to localStorage.
-     *
-     * @param featureId - ID of the feature to unforce
-     */
-    removeFeatureOverride(featureId) {
-        const { enabled, disabled } = this.forcedFeaturesSubject.value;
-        const newState = {
-            enabled: enabled.filter((id) => id !== featureId),
-            disabled: disabled.filter((id) => id !== featureId),
-        };
-        this.forcedFeaturesSubject.next(newState);
-        this.saveForcedFeatures(newState);
-    }
-    /**
-     * Apply a preset forced state (for preset integration).
-     * Validates and cleans invalid feature IDs before applying.
-     *
-     * @param state - Forced features state from preset
-     */
-    applyForcedState(state) {
-        const configuredFeatureIds = this.appFeaturesSubject.value.map((f) => f.id);
-        // Validate and filter to only valid IDs
-        const validEnabled = state.enabled.filter((id) => configuredFeatureIds.includes(id));
-        const validDisabled = state.disabled.filter((id) => configuredFeatureIds.includes(id));
-        const invalidIds = [
-            ...state.enabled.filter((id) => !configuredFeatureIds.includes(id)),
-            ...state.disabled.filter((id) => !configuredFeatureIds.includes(id)),
-        ];
-        if (invalidIds.length > 0) {
-            console.warn(`Preset contains invalid feature IDs (ignored): ${invalidIds.join(', ')}`);
-        }
-        const cleanedState = { enabled: validEnabled, disabled: validDisabled };
-        this.forcedFeaturesSubject.next(cleanedState);
-        this.saveForcedFeatures(cleanedState);
-    }
-    /**
-     * Get current forced state as a snapshot (defensive copy).
-     * Useful for preset exports and debugging.
-     *
-     * @returns Current forced features state
-     */
-    getCurrentForcedState() {
-        const state = this.forcedFeaturesSubject.value;
-        return {
-            enabled: [...state.enabled],
-            disabled: [...state.disabled],
-        };
-    }
-    /**
-     * Merge natural app features with forced state.
-     *
-     * @param appFeatures - Natural feature configuration
-     * @param forcedState - Forced overrides from localStorage/toolbar
-     * @returns Features with merged forced state
-     */
-    mergeForcedState(appFeatures, forcedState) {
-        // If toolbar is disabled, return app features without overrides
-        if (!this.stateService.isEnabled()) {
-            return appFeatures;
-        }
-        return appFeatures.map((feature) => {
-            const isInEnabled = forcedState.enabled.includes(feature.id);
-            const isInDisabled = forcedState.disabled.includes(feature.id);
-            const isForced = isInEnabled || isInDisabled;
-            return {
-                ...feature,
-                isEnabled: isInEnabled ? true : isInDisabled ? false : feature.isEnabled,
-                isForced,
-                originalValue: isForced ? feature.isEnabled : undefined,
-            };
-        });
-    }
-    /**
-     * Load forced features state from localStorage on initialization.
-     * Handles missing or corrupted data gracefully.
-     */
-    loadForcedFeatures() {
-        try {
-            const savedState = this.storageService.get(this.STORAGE_KEY);
-            if (savedState) {
-                this.forcedFeaturesSubject.next(savedState);
-            }
-        }
-        catch (error) {
-            console.error('Failed to load forced app features from localStorage:', error);
-            // Use default empty state on error
-        }
-    }
-    /**
-     * Persist forced features state to localStorage.
-     * Handles quota exceeded errors gracefully.
-     *
-     * @param state - Forced state to persist
-     */
-    saveForcedFeatures(state) {
-        try {
-            this.storageService.set(this.STORAGE_KEY, state);
-        }
-        catch (error) {
-            console.error('Failed to persist app features to localStorage:', error);
-            // Continue execution - state is still valid in memory for current session
-        }
-    }
-    /**
-     * Validate forced feature IDs against configured features and clean up invalid ones.
-     * Called after setAppFeatures() to ensure forced state references valid features.
-     */
-    validateAndCleanForcedState() {
-        const configuredFeatureIds = this.appFeaturesSubject.value.map((f) => f.id);
-        const currentForcedState = this.forcedFeaturesSubject.value;
-        const validEnabled = currentForcedState.enabled.filter((id) => configuredFeatureIds.includes(id));
-        const validDisabled = currentForcedState.disabled.filter((id) => configuredFeatureIds.includes(id));
-        const removedIds = [
-            ...currentForcedState.enabled.filter((id) => !configuredFeatureIds.includes(id)),
-            ...currentForcedState.disabled.filter((id) => !configuredFeatureIds.includes(id)),
-        ];
-        if (removedIds.length > 0) {
-            console.warn(`Removed invalid feature IDs from forced state: ${removedIds.join(', ')}`);
-            const cleanedState = { enabled: validEnabled, disabled: validDisabled };
-            this.forcedFeaturesSubject.next(cleanedState);
-            this.saveForcedFeatures(cleanedState);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalAppFeaturesService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalAppFeaturesService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-/**
- * Public service for managing app features in the dev toolbar.
- *
- * This service implements the ToolbarService interface and provides methods for:
- * - Configuring available product features
- * - Retrieving forced feature overrides
- * - Applying preset feature configurations
- * - Exporting current forced state for presets
- *
- * @example
- * ```typescript
- * import { ToolbarAppFeaturesService } from 'ngx-dev-toolbar';
- *
- * @Component({...})
- * export class AppComponent implements OnInit {
- *   private appFeaturesService = inject(ToolbarAppFeaturesService);
- *
- *   ngOnInit() {
- *     // Configure available features based on current tier
- *     const features: ToolbarAppFeature[] = [
- *       { id: 'analytics', name: 'Analytics Dashboard', isEnabled: true, isForced: false },
- *       { id: 'multi-user', name: 'Multi-User Support', isEnabled: false, isForced: false }
- *     ];
- *     this.appFeaturesService.setAvailableOptions(features);
- *
- *     // Subscribe to forced overrides
- *     this.appFeaturesService.getForcedValues().subscribe(forcedFeatures => {
- *       forcedFeatures.forEach(feature => {
- *         // Apply forced feature state to application logic
- *         this.applyFeatureState(feature.id, feature.isEnabled);
- *       });
- *     });
- *   }
- * }
- * ```
- */
-class ToolbarAppFeaturesService {
-    constructor() {
-        this.internalService = inject(ToolbarInternalAppFeaturesService);
-    }
-    /**
-     * Set available app features for the application.
-     *
-     * Configures the list of product features that can be toggled in the dev toolbar.
-     * Features should represent product-level capabilities like license tiers,
-     * deployment configurations, or environment flags.
-     *
-     * @param features - Array of app features to display in the toolbar
-     * @throws Error if duplicate feature IDs or empty IDs are detected
-     *
-     * @example
-     * ```typescript
-     * const features: ToolbarAppFeature[] = [
-     *   {
-     *     id: 'advanced-analytics',
-     *     name: 'Advanced Analytics Dashboard',
-     *     description: 'Access premium reporting and data visualization',
-     *     isEnabled: false,  // Not available in current tier
-     *     isForced: false
-     *   },
-     *   {
-     *     id: 'multi-user-support',
-     *     name: 'Multi-User Collaboration',
-     *     description: 'Enable team features and user management',
-     *     isEnabled: true,   // Available in current tier
-     *     isForced: false
-     *   }
-     * ];
-     * this.appFeaturesService.setAvailableOptions(features);
-     * ```
-     */
-    setAvailableOptions(features) {
-        this.internalService.setAppFeatures(features);
-    }
-    /**
-     * Get observable stream of features that have forced overrides.
-     *
-     * Emits an array of features that have been forced via the dev toolbar.
-     * Only features with `isForced = true` are included in the emissions.
-     * Use this to react to feature override changes and update application behavior.
-     *
-     * @returns Observable that emits array of forced features whenever state changes
-     *
-     * @example
-     * ```typescript
-     * this.appFeaturesService.getForcedValues()
-     *   .pipe(takeUntilDestroyed())
-     *   .subscribe(forcedFeatures => {
-     *     forcedFeatures.forEach(feature => {
-     *       if (feature.isEnabled) {
-     *         this.enableFeature(feature.id);
-     *       } else {
-     *         this.disableFeature(feature.id);
-     *       }
-     *     });
-     *   });
-     * ```
-     */
-    getForcedValues() {
-        return this.internalService.getForcedFeatures();
-    }
-    /**
-     * Gets ALL app feature values with overrides already applied.
-     * Returns the complete set of features where overridden values replace base values.
-     * Each feature includes an `isForced` property indicating if it was overridden.
-     *
-     * This method simplifies integration by eliminating the need to manually merge
-     * base features with overrides using combineLatest.
-     *
-     * @returns Observable of all features with overrides applied
-     *
-     * @example
-     * ```typescript
-     * // Check if a feature is enabled with overrides applied
-     * this.appFeaturesService.getValues().pipe(
-     *   map(features => features.find(f => f.id === 'premium-analytics')),
-     *   map(feature => feature?.isEnabled ?? false)
-     * ).subscribe(isEnabled => {
-     *   if (isEnabled) {
-     *     // Enable premium analytics
-     *   }
-     * });
-     * ```
-     */
-    getValues() {
-        return this.internalService.features$;
-    }
-    /**
-     * Apply a preset feature configuration (for preset tool integration).
-     *
-     * Accepts a forced features state object and applies it to the current configuration.
-     * Invalid feature IDs (not in configured features) are filtered out with a warning.
-     *
-     * @param state - Forced features state containing enabled/disabled arrays
-     *
-     * @example
-     * ```typescript
-     * // Apply "Enterprise Tier" preset
-     * const enterprisePreset: ForcedAppFeaturesState = {
-     *   enabled: ['analytics', 'multi-user', 'white-label', 'sso'],
-     *   disabled: []
-     * };
-     * this.appFeaturesService.applyPresetFeatures(enterprisePreset);
-     *
-     * // Apply "Basic Tier" preset
-     * const basicPreset: ForcedAppFeaturesState = {
-     *   enabled: [],
-     *   disabled: ['analytics', 'multi-user', 'white-label', 'sso']
-     * };
-     * this.appFeaturesService.applyPresetFeatures(basicPreset);
-     * ```
-     */
-    applyPresetFeatures(state) {
-        this.internalService.applyForcedState(state);
-    }
-    /**
-     * Get current forced feature state as a snapshot (for preset export).
-     *
-     * Returns the current forced features state with enabled/disabled arrays.
-     * Useful for exporting toolbar state to save as a preset or for debugging.
-     * Returns a defensive copy - mutations will not affect internal state.
-     *
-     * @returns Current forced features state
-     *
-     * @example
-     * ```typescript
-     * // Export current toolbar state to save as preset
-     * const currentState = this.appFeaturesService.getCurrentForcedState();
-     * this.presetsService.savePreset('my-config', {
-     *   appFeatures: currentState,
-     *   // ... other tool states
-     * });
-     *
-     * console.log(currentState);
-     * // { enabled: ['analytics'], disabled: ['white-label'] }
-     * ```
-     */
-    getCurrentForcedState() {
-        return this.internalService.getCurrentForcedState();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * Provides all ngx-dev-toolbar services using InjectionTokens.
- *
- * Use this function for tree-shakeable toolbar integration. When combined with
- * dynamic imports, the toolbar code is completely excluded from production builds.
- *
- * ## Basic Usage (Development Only)
- *
- * ```typescript
- * // main.ts
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { AppComponent } from './app/app.component';
- * import { environment } from './environments/environment';
- *
- * async function bootstrap() {
- *   const providers = [];
- *
- *   // Only import toolbar in development - completely tree-shaken in prod
- *   if (!environment.production) {
- *     const { provideToolbar } = await import('ngx-dev-toolbar');
- *     providers.push(...provideToolbar());
- *   }
- *
- *   bootstrapApplication(AppComponent, { providers });
- * }
- *
- * bootstrap();
- * ```
- *
- * ## Using Services with Tokens
- *
- * ```typescript
- * import { inject } from '@angular/core';
- * import { TOOLBAR_FEATURE_FLAGS } from 'ngx-dev-toolbar';
- * import type { ToolbarService, ToolbarFlag } from 'ngx-dev-toolbar';
- *
- * @Injectable({ providedIn: 'root' })
- * export class FeatureFlagsService {
- *   // Optional injection - null in production
- *   private devToolbar = inject<ToolbarService<ToolbarFlag>>(
- *     TOOLBAR_FEATURE_FLAGS,
- *     { optional: true }
- *   );
- *
- *   constructor() {
- *     // Safe to call - no-op if devToolbar is null
- *     this.devToolbar?.setAvailableOptions(this.flags);
- *
- *     // Subscribe to forced values only if toolbar exists
- *     this.devToolbar?.getForcedValues().subscribe(forced => {
- *       // Merge forced values
- *     });
- *   }
- * }
- * ```
- *
- * ## Production Bundle Impact
- *
- * | What's Included | Production | Development |
- * |-----------------|------------|-------------|
- * | InjectionTokens | ~500 bytes | ~500 bytes |
- * | Type interfaces | 0 (types only) | 0 (types only) |
- * | Service implementations | 0 | ~15KB |
- * | UI Components | 0 | ~30KB |
- * | Total | **~500 bytes** | ~45KB |
- *
- * @returns Array of Angular providers for all toolbar services
- */
-function provideToolbar() {
-    return [
-        { provide: TOOLBAR_FEATURE_FLAGS, useClass: ToolbarFeatureFlagService },
-        { provide: TOOLBAR_PERMISSIONS, useClass: ToolbarPermissionsService },
-        { provide: TOOLBAR_LANGUAGE, useClass: ToolbarLanguageService },
-        { provide: TOOLBAR_APP_FEATURES, useClass: ToolbarAppFeaturesService },
-    ];
-}
-
-class AngularIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AngularIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: AngularIconComponent, isStandalone: true, selector: "ngt-angular-icon", ngImport: i0, template: `
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-      <defs>
-        <linearGradient
-          id="angular-gradient"
-          x1="6"
-          x2="18"
-          y1="20"
-          y2="4"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stop-color="#E40035" />
-          <stop offset=".24" stop-color="#F60A48" />
-          <stop offset=".352" stop-color="#F20755" />
-          <stop offset=".494" stop-color="#DC087D" />
-          <stop offset=".745" stop-color="#9717E7" />
-          <stop offset="1" stop-color="#6C00F5" />
-        </linearGradient>
-      </defs>
-      <g fill="url(#angular-gradient)">
-        <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
-        <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
-        <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
-        <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
-      </g>
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AngularIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngt-angular-icon',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-      <defs>
-        <linearGradient
-          id="angular-gradient"
-          x1="6"
-          x2="18"
-          y1="20"
-          y2="4"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stop-color="#E40035" />
-          <stop offset=".24" stop-color="#F60A48" />
-          <stop offset=".352" stop-color="#F20755" />
-          <stop offset=".494" stop-color="#DC087D" />
-          <stop offset=".745" stop-color="#9717E7" />
-          <stop offset="1" stop-color="#6C00F5" />
-        </linearGradient>
-      </defs>
-      <g fill="url(#angular-gradient)">
-        <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
-        <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
-        <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
-        <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
-      </g>
-    </svg>
-  `,
-                }]
-        }] });
-
-class BoltIconComponent {
-    constructor() {
-        this.fill = input('#FFFF');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BoltIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: BoltIconComponent, isStandalone: true, selector: "ngt-bolt-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <svg
-      [attr.fill]="fill()"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 256 256"
-    >
-      <path
-        d="M160,16,144,96H208l-96,144,16-80H64Z"
-        opacity="0.2"
-      ></path>
-      <path
-        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
-      ></path>
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BoltIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngt-bolt-icon',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <svg
-      [attr.fill]="fill()"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 256 256"
-    >
-      <path
-        d="M160,16,144,96H208l-96,144,16-80H64Z"
-        opacity="0.2"
-      ></path>
-      <path
-        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
-      ></path>
-    </svg>
-  `,
-                }]
-        }] });
-
-class BugIconComponent {
-    constructor() {
-        this.fill = input('#FFFF');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BugIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: BugIconComponent, isStandalone: true, selector: "ngt-bug-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <svg
-      [attr.fill]="fill()"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 256 256"
-    >
-      <path
-        d="M140,88a16,16,0,1,1,16,16A16,16,0,0,1,140,88ZM100,72a16,16,0,1,0,16,16A16,16,0,0,0,100,72Zm120,72a91.84,91.84,0,0,1-2.34,20.64L236.81,173a12,12,0,0,1-9.62,22l-18-7.85a92,92,0,0,1-162.46,0l-18,7.85a12,12,0,1,1-9.62-22l19.15-8.36A91.84,91.84,0,0,1,36,144v-4H16a12,12,0,0,1,0-24H36v-4a91.84,91.84,0,0,1,2.34-20.64L19.19,83a12,12,0,0,1,9.62-22l18,7.85a92,92,0,0,1,162.46,0l18-7.85a12,12,0,1,1,9.62,22l-19.15,8.36A91.84,91.84,0,0,1,220,112v4h20a12,12,0,0,1,0,24H220ZM60,116H196v-4a68,68,0,0,0-136,0Zm56,94.92V140H60v4A68.1,68.1,0,0,0,116,210.92ZM196,144v-4H140v70.92A68.1,68.1,0,0,0,196,144Z"
-      ></path>
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BugIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngt-bug-icon',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <svg
-      [attr.fill]="fill()"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 256 256"
-    >
-      <path
-        d="M140,88a16,16,0,1,1,16,16A16,16,0,0,1,140,88ZM100,72a16,16,0,1,0,16,16A16,16,0,0,0,100,72Zm120,72a91.84,91.84,0,0,1-2.34,20.64L236.81,173a12,12,0,0,1-9.62,22l-18-7.85a92,92,0,0,1-162.46,0l-18,7.85a12,12,0,1,1-9.62-22l19.15-8.36A91.84,91.84,0,0,1,36,144v-4H16a12,12,0,0,1,0-24H36v-4a91.84,91.84,0,0,1,2.34-20.64L19.19,83a12,12,0,0,1,9.62-22l18,7.85a92,92,0,0,1,162.46,0l18-7.85a12,12,0,1,1,9.62,22l-19.15,8.36A91.84,91.84,0,0,1,220,112v4h20a12,12,0,0,1,0,24H220ZM60,116H196v-4a68,68,0,0,0-136,0Zm56,94.92V140H60v4A68.1,68.1,0,0,0,116,210.92ZM196,144v-4H140v70.92A68.1,68.1,0,0,0,196,144Z"
-      ></path>
-    </svg>
-  `,
-                }]
-        }] });
-
-class CodeIconComponent {
-    constructor() {
-        this.fill = input('#FFFF');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CodeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: CodeIconComponent, isStandalone: true, selector: "ngt-code-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <svg
-      [attr.fill]="fill()"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 256 256"
-    >
-      <path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path>
-      <path
-        d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
-      ></path>
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CodeIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngt-code-icon',
-                    standalone: true,
-                    template: `
-    <svg
-      [attr.fill]="fill()"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 256 256"
-    >
-      <path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path>
-      <path
-        d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
-      ></path>
-    </svg>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class DatabaseIconComponent {
-    constructor() {
-        this.fill = input('#FFFF');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DatabaseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DatabaseIconComponent, isStandalone: true, selector: "ngt-database-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <svg
-      [attr.fill]="fill()"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 256 256"
-    >
-      <path
-        d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z"
-        opacity="0.2"
-      ></path>
-      <path
-        d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"
-      ></path>
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DatabaseIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngt-database-icon',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <svg
-      [attr.fill]="fill()"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 256 256"
-    >
-      <path
-        d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z"
-        opacity="0.2"
-      ></path>
-      <path
-        d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"
-      ></path>
-    </svg>
-  `,
-                }]
-        }] });
-
-class DiscordIconComponent {
-    constructor() {
-        this.fill = input('#000000');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DatabaseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DatabaseIconComponent, isStandalone: true, selector: "ngt-database-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DatabaseIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-database-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class DiscordIconComponent {
+    constructor() {
+        this.fill = input('#000000');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DiscordIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: DiscordIconComponent, isStandalone: true, selector: "ngt-discord-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
@@ -3045,14 +1942,19 @@ class ToolbarSelectComponent {
         this.ariaLabel = input('');
         this.label = input('');
         this.size = input('medium');
+        this.placeholder = input('Select an option');
         this.theme = computed(() => this.devToolbarStateService.theme());
         this.selectMenuId = `select-menu-${Math.random()
             .toString(36)
             .slice(2, 11)}`;
         this.isOpen = signal(false);
+        this.isPlaceholder = computed(() => {
+            const options = this.options();
+            return !!options?.length && !options.some((opt) => opt.value === this.value());
+        });
         this.selectedLabel = computed(() => {
             const selected = this.options()?.find((opt) => opt.value === this.value());
-            return selected?.label ?? '';
+            return selected?.label ?? this.placeholder();
         });
         this.positions = [
             {
@@ -3082,11 +1984,12 @@ class ToolbarSelectComponent {
         this.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarSelectComponent, isStandalone: true, selector: "ngt-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarSelectComponent, isStandalone: true, selector: "ngt-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
     <div
       class="ngt-select"
       [class.small]="size() === 'small'"
       [class.open]="isOpen()"
+      [class.placeholder]="isPlaceholder()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-expanded]="isOpen()"
       [attr.aria-controls]="selectMenuId"
@@ -3119,20 +2022,20 @@ class ToolbarSelectComponent {
         [attr.data-theme]="theme()"
       >
         @for (option of options(); track option.value) {
-        <button
-          class="select-menu-item"
-          [class.selected]="option.value === value()"
-          [attr.aria-selected]="option.value === value()"
-          cdkMenuItem
-          type="button"
-          (click)="selectOption(option)"
-        >
-          {{ option.label }}
-        </button>
+          <button
+            class="select-menu-item"
+            [class.selected]="option.value === value()"
+            [attr.aria-selected]="option.value === value()"
+            cdkMenuItem
+            type="button"
+            (click)="selectOption(option)"
+          >
+            {{ option.label }}
+          </button>
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-small);background-color:var(--ngt-bg-primary);color:var(--ngt-text-primary);font-size:var(--ngt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ngt-transition-default);outline:none;min-height:36px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ngt-select:hover{background-color:var(--ngt-hover-bg);border-color:var(--ngt-primary);box-shadow:0 1px 3px #0000001a}.ngt-select:focus-visible{outline:none;border-color:var(--ngt-primary);box-shadow:0 0 0 2px rgba(var(--ngt-primary-rgb),.2),0 1px 3px #0000001a}.ngt-select.small{padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);font-size:var(--ngt-font-size-sm);height:24px}.ngt-select.open{border-color:var(--ngt-primary);box-shadow:0 0 0 2px rgba(var(--ngt-primary-rgb),.2),0 1px 3px #0000001a}.ngt-select.open .select__arrow{transform:rotate(180deg)}.ngt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ngt-spacing-sm);min-width:0;display:flex;align-items:center}.ngt-select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.ngt-select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ngt-bg-primary);padding:var(--ngt-spacing-sm) 0;border:2px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-large);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ngt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ngt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ngt-select-menu::-webkit-scrollbar-track{background:transparent}.ngt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ngt-border-primary);border-radius:4px;border:2px solid var(--ngt-bg-primary)}.ngt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ngt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ngt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md) var(--ngt-spacing-sm) var(--ngt-spacing-lg);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ngt-font-size-xs);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:400;line-height:1.5;transition:background-color .15s ease}.select-menu-item:hover{background-color:#0000000f}.select-menu-item:active{background-color:rgba(var(--ngt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ngt-primary);background-color:rgba(var(--ngt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ngt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ngt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:var(--ngt-spacing-xs)}.select-menu-item:last-child{margin-bottom:var(--ngt-spacing-xs)}.select-overlay{backdrop-filter:blur(8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-small);background-color:var(--ngt-bg-primary);color:var(--ngt-text-primary);font-size:var(--ngt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ngt-transition-default);outline:none;min-height:36px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ngt-select:hover{background-color:var(--ngt-hover-bg);border-color:var(--ngt-primary);box-shadow:0 1px 3px #0000001a}.ngt-select:focus-visible{outline:none;border-color:var(--ngt-primary);box-shadow:0 0 0 2px rgba(var(--ngt-primary-rgb),.2),0 1px 3px #0000001a}.ngt-select.small{padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);font-size:var(--ngt-font-size-sm);height:24px}.ngt-select.open{border-color:var(--ngt-primary);box-shadow:0 0 0 2px rgba(var(--ngt-primary-rgb),.2),0 1px 3px #0000001a}.ngt-select.open .select__arrow{transform:rotate(180deg)}.ngt-select.placeholder{color:var(--ngt-text-muted)}.ngt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ngt-spacing-sm);min-width:0;display:flex;align-items:center}.ngt-select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.ngt-select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ngt-bg-primary);padding:var(--ngt-spacing-sm) 0;border:2px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-large);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ngt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ngt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ngt-select-menu::-webkit-scrollbar-track{background:transparent}.ngt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ngt-border-primary);border-radius:4px;border:2px solid var(--ngt-bg-primary)}.ngt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ngt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ngt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md) var(--ngt-spacing-sm) var(--ngt-spacing-lg);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ngt-font-size-xs);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:400;line-height:1.5;transition:background-color .15s ease}.select-menu-item:hover{background-color:#0000000f}.select-menu-item:active{background-color:rgba(var(--ngt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ngt-primary);background-color:rgba(var(--ngt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ngt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ngt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:var(--ngt-spacing-xs)}.select-menu-item:last-child{margin-bottom:var(--ngt-spacing-xs)}.select-overlay{backdrop-filter:blur(8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarSelectComponent, decorators: [{
             type: Component,
@@ -3141,6 +2044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       class="ngt-select"
       [class.small]="size() === 'small'"
       [class.open]="isOpen()"
+      [class.placeholder]="isPlaceholder()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-expanded]="isOpen()"
       [attr.aria-controls]="selectMenuId"
@@ -3173,20 +2077,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         [attr.data-theme]="theme()"
       >
         @for (option of options(); track option.value) {
-        <button
-          class="select-menu-item"
-          [class.selected]="option.value === value()"
-          [attr.aria-selected]="option.value === value()"
-          cdkMenuItem
-          type="button"
-          (click)="selectOption(option)"
-        >
-          {{ option.label }}
-        </button>
+          <button
+            class="select-menu-item"
+            [class.selected]="option.value === value()"
+            [attr.aria-selected]="option.value === value()"
+            cdkMenuItem
+            type="button"
+            (click)="selectOption(option)"
+          >
+            {{ option.label }}
+          </button>
         }
       </div>
     </ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-small);background-color:var(--ngt-bg-primary);color:var(--ngt-text-primary);font-size:var(--ngt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ngt-transition-default);outline:none;min-height:36px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ngt-select:hover{background-color:var(--ngt-hover-bg);border-color:var(--ngt-primary);box-shadow:0 1px 3px #0000001a}.ngt-select:focus-visible{outline:none;border-color:var(--ngt-primary);box-shadow:0 0 0 2px rgba(var(--ngt-primary-rgb),.2),0 1px 3px #0000001a}.ngt-select.small{padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);font-size:var(--ngt-font-size-sm);height:24px}.ngt-select.open{border-color:var(--ngt-primary);box-shadow:0 0 0 2px rgba(var(--ngt-primary-rgb),.2),0 1px 3px #0000001a}.ngt-select.open .select__arrow{transform:rotate(180deg)}.ngt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ngt-spacing-sm);min-width:0;display:flex;align-items:center}.ngt-select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.ngt-select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ngt-bg-primary);padding:var(--ngt-spacing-sm) 0;border:2px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-large);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ngt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ngt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ngt-select-menu::-webkit-scrollbar-track{background:transparent}.ngt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ngt-border-primary);border-radius:4px;border:2px solid var(--ngt-bg-primary)}.ngt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ngt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ngt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md) var(--ngt-spacing-sm) var(--ngt-spacing-lg);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ngt-font-size-xs);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:400;line-height:1.5;transition:background-color .15s ease}.select-menu-item:hover{background-color:#0000000f}.select-menu-item:active{background-color:rgba(var(--ngt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ngt-primary);background-color:rgba(var(--ngt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ngt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ngt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:var(--ngt-spacing-xs)}.select-menu-item:last-child{margin-bottom:var(--ngt-spacing-xs)}.select-overlay{backdrop-filter:blur(8px)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);display:inline-block;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-small);background-color:var(--ngt-bg-primary);color:var(--ngt-text-primary);font-size:var(--ngt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ngt-transition-default);outline:none;min-height:36px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ngt-select:hover{background-color:var(--ngt-hover-bg);border-color:var(--ngt-primary);box-shadow:0 1px 3px #0000001a}.ngt-select:focus-visible{outline:none;border-color:var(--ngt-primary);box-shadow:0 0 0 2px rgba(var(--ngt-primary-rgb),.2),0 1px 3px #0000001a}.ngt-select.small{padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);font-size:var(--ngt-font-size-sm);height:24px}.ngt-select.open{border-color:var(--ngt-primary);box-shadow:0 0 0 2px rgba(var(--ngt-primary-rgb),.2),0 1px 3px #0000001a}.ngt-select.open .select__arrow{transform:rotate(180deg)}.ngt-select.placeholder{color:var(--ngt-text-muted)}.ngt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ngt-spacing-sm);min-width:0;display:flex;align-items:center}.ngt-select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.ngt-select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ngt-bg-primary);padding:var(--ngt-spacing-sm) 0;border:2px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-large);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ngt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ngt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ngt-select-menu::-webkit-scrollbar-track{background:transparent}.ngt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ngt-border-primary);border-radius:4px;border:2px solid var(--ngt-bg-primary)}.ngt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ngt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ngt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md) var(--ngt-spacing-sm) var(--ngt-spacing-lg);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ngt-font-size-xs);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:400;line-height:1.5;transition:background-color .15s ease}.select-menu-item:hover{background-color:#0000000f}.select-menu-item:active{background-color:rgba(var(--ngt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ngt-primary);background-color:rgba(var(--ngt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ngt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ngt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:var(--ngt-spacing-xs)}.select-menu-item:last-child{margin-bottom:var(--ngt-spacing-xs)}.select-overlay{backdrop-filter:blur(8px)}\n"] }]
         }] });
 
 class ToolbarToolButtonComponent {
@@ -3366,255 +2270,570 @@ class ToolbarWindowComponent {
         </div>
       </div>
 
-      <div class="divider"></div>
-      <div class="ngt-content">
-        <ng-content></ng-content>
-      </div>
+      <div class="divider"></div>
+      <div class="ngt-content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-window{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:100%;height:100%;background:var(--ngt-bg-primary);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-large);padding:var(--ngt-window-padding) var(--ngt-window-padding) var(--ngt-spacing-xs);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ngt-text-secondary);z-index:999999999;box-shadow:var(--ngt-shadow-window);contain:layout style}.ngt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ngt-header h1{font-size:var(--ngt-font-size-lg);line-height:1.2;margin:0;color:var(--ngt-text-primary)}.ngt-header__title{display:flex;align-items:center;gap:var(--ngt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ngt-spacing-xs)}.ngt-header__title .beta-tag{font-size:var(--ngt-font-size-xxs, .65rem);background:var(--ngt-purple, #8b5cf6);color:var(--ngt-text-on-primary);padding:2px 6px;border-radius:var(--ngt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ngt-header__description{font-size:var(--ngt-font-size-sm);color:var(--ngt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ngt-header__content{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);flex:1;min-width:0}.ngt-header__controls{display:flex;gap:var(--ngt-spacing-sm);flex-shrink:0;align-items:flex-start}.ngt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ngt-border-primary);margin-bottom:var(--ngt-spacing-md);margin-top:var(--ngt-spacing-md);flex-shrink:0;position:relative;z-index:5}.control{background:none;border:none;color:var(--ngt-text-secondary);cursor:pointer;padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-small);font-size:var(--ngt-font-size-md);line-height:1;transition:var(--ngt-transition-smooth)}.control:hover{background:var(--ngt-hover-bg);color:var(--ngt-text-primary)}.control--close:hover{background:var(--ngt-hover-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarWindowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngt-window', standalone: true, template: `
+    <div class="ngt-window" [attr.data-theme]="theme()">
+      <div class="ngt-header">
+        <div class="ngt-header__content">
+          <div class="ngt-header__title">
+            <h1>{{ config().title }}</h1>
+            @if (config().isBeta) {
+            <span class="beta-tag">BETA</span>
+            }
+          </div>
+          @if (config().description) {
+          <p class="ngt-header__description">{{ config().description }}</p>
+          }
+        </div>
+        <div class="ngt-header__controls">
+          @if (config().isMinimizable) {
+          <button aria-label="Minimize" class="control" (click)="onMinimize()">
+            −
+          </button>
+          } @if (config().isMaximizable) {
+          <button aria-label="Maximize" class="control" (click)="onMaximize()">
+            □
+          </button>
+          } @if (config().isClosable) {
+          <button
+            aria-label="Close"
+            class="control control--close"
+            (click)="onClose()"
+          >
+            ×
+          </button>
+          }
+        </div>
+      </div>
+
+      <div class="divider"></div>
+      <div class="ngt-content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-window{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:100%;height:100%;background:var(--ngt-bg-primary);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-large);padding:var(--ngt-window-padding) var(--ngt-window-padding) var(--ngt-spacing-xs);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ngt-text-secondary);z-index:999999999;box-shadow:var(--ngt-shadow-window);contain:layout style}.ngt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ngt-header h1{font-size:var(--ngt-font-size-lg);line-height:1.2;margin:0;color:var(--ngt-text-primary)}.ngt-header__title{display:flex;align-items:center;gap:var(--ngt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ngt-spacing-xs)}.ngt-header__title .beta-tag{font-size:var(--ngt-font-size-xxs, .65rem);background:var(--ngt-purple, #8b5cf6);color:var(--ngt-text-on-primary);padding:2px 6px;border-radius:var(--ngt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ngt-header__description{font-size:var(--ngt-font-size-sm);color:var(--ngt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ngt-header__content{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);flex:1;min-width:0}.ngt-header__controls{display:flex;gap:var(--ngt-spacing-sm);flex-shrink:0;align-items:flex-start}.ngt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ngt-border-primary);margin-bottom:var(--ngt-spacing-md);margin-top:var(--ngt-spacing-md);flex-shrink:0;position:relative;z-index:5}.control{background:none;border:none;color:var(--ngt-text-secondary);cursor:pointer;padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-small);font-size:var(--ngt-font-size-md);line-height:1;transition:var(--ngt-transition-smooth)}.control:hover{background:var(--ngt-hover-bg);color:var(--ngt-text-primary)}.control--close:hover{background:var(--ngt-hover-danger)}\n"] }]
+        }] });
+
+class ToolbarToolComponent {
+    constructor() {
+        this.state = inject(ToolbarStateService);
+        this.buttonContainer = viewChild.required('buttonContainer');
+        this.buttonComponent = contentChild(ToolbarToolButtonComponent);
+        this.options = input.required();
+        this.icon = input.required();
+        this.title = input.required();
+        this.badge = input();
+        this.isActive = computed(() => this.state.activeToolId() === this.options().id);
+        this.height = computed(() => {
+            switch (this.options().size) {
+                case 'small':
+                    return 320;
+                case 'medium':
+                    return 480;
+                case 'tall':
+                    return 620;
+                case 'large':
+                    return 620;
+                default:
+                    return 480;
+            }
+        });
+        this.width = computed(() => {
+            switch (this.options().size) {
+                case 'small':
+                    return 320;
+                case 'medium':
+                    return 480;
+                case 'tall':
+                    return 480;
+                case 'large':
+                    return 620;
+                default:
+                    return 400;
+            }
+        });
+        this.positions = computed(() => {
+            const triggerXPosition = this.getButtonContainerXPosition();
+            const windowCenter = window.innerWidth / 2;
+            const offsetX = windowCenter - triggerXPosition - 22;
+            return [
+                {
+                    originX: 'center',
+                    originY: 'center',
+                    overlayX: 'center',
+                    overlayY: 'center',
+                    offsetY: -(Math.ceil(this.height() / 2) + 36),
+                    offsetX,
+                },
+            ];
+        });
+    }
+    onOpen() {
+        this.state.setActiveTool(this.options().id);
+    }
+    onClose() {
+        this.state.setActiveTool(null);
+    }
+    getButtonContainerXPosition() {
+        const buttonContainerRect = this.buttonContainer()?.nativeElement?.getBoundingClientRect();
+        return buttonContainerRect?.left ?? 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarToolComponent, isStandalone: true, selector: "ngt-toolbar-tool", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "buttonComponent", first: true, predicate: ToolbarToolButtonComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonContainer", first: true, predicate: ["buttonContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #trigger="cdkOverlayOrigin" class="ngt-toolbar-tool" cdkOverlayOrigin>
+      <div
+        class="ngt-toolbar-tool__icon"
+        (click)="onOpen()"
+        (keydown.enter)="onOpen()"
+        (keydown.space)="onOpen()"
+        tabindex="0"
+      >
+        <div #buttonContainer [attr.data-tooltip]="title()">
+          @if (icon()) {
+          <ngt-tool-button [title]="title()" [toolId]="options().id" [badge]="badge()">
+            <ngt-icon [name]="icon()" />
+          </ngt-tool-button>
+          } @else {
+          <ng-content select="ngt-tool-button"></ng-content>
+          }
+        </div>
+      </div>
+
+      @if (isActive()) {
+      <ng-template
+        #contentTemplate
+        [cdkConnectedOverlayOrigin]="trigger"
+        [cdkConnectedOverlayOpen]="isActive()"
+        [cdkConnectedOverlayPositions]="positions()"
+        [cdkConnectedOverlayWidth]="width()"
+        [cdkConnectedOverlayHeight]="height()"
+        [cdkConnectedOverlayPanelClass]="['ngt-overlay-panel', 'ngt-tool-overlay']"
+        cdkConnectedOverlay
+      >
+        <ngt-window [@slideAnimation] [config]="options()" (closed)="onClose()">
+          <ng-content />
+        </ngt-window>
+      </ng-template>
+      }
     </div>
-  `, isInline: true, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-window{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:100%;height:100%;background:var(--ngt-bg-primary);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-large);padding:var(--ngt-window-padding) var(--ngt-window-padding) var(--ngt-spacing-xs);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ngt-text-secondary);z-index:999999999;box-shadow:var(--ngt-shadow-window);contain:layout style}.ngt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ngt-header h1{font-size:var(--ngt-font-size-lg);line-height:1.2;margin:0;color:var(--ngt-text-primary)}.ngt-header__title{display:flex;align-items:center;gap:var(--ngt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ngt-spacing-xs)}.ngt-header__title .beta-tag{font-size:var(--ngt-font-size-xxs, .65rem);background:var(--ngt-purple, #8b5cf6);color:var(--ngt-text-on-primary);padding:2px 6px;border-radius:var(--ngt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ngt-header__description{font-size:var(--ngt-font-size-sm);color:var(--ngt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ngt-header__content{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);flex:1;min-width:0}.ngt-header__controls{display:flex;gap:var(--ngt-spacing-sm);flex-shrink:0;align-items:flex-start}.ngt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ngt-border-primary);margin-bottom:var(--ngt-spacing-md);margin-top:var(--ngt-spacing-md);flex-shrink:0;position:relative;z-index:5}.control{background:none;border:none;color:var(--ngt-text-secondary);cursor:pointer;padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-small);font-size:var(--ngt-font-size-md);line-height:1;transition:var(--ngt-transition-smooth)}.control:hover{background:var(--ngt-hover-bg);color:var(--ngt-text-primary)}.control--close:hover{background:var(--ngt-hover-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.tool{position:relative}.trigger{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ToolbarWindowComponent, selector: "ngt-window", inputs: ["config"], outputs: ["closed", "maximize", "minimize"] }, { kind: "component", type: ToolbarToolButtonComponent, selector: "ngt-tool-button", inputs: ["title", "toolId", "badge"], outputs: ["open"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }], animations: [
+            trigger('slideAnimation', [
+                transition(':enter', [
+                    style({
+                        transform: 'translateY(20px)',
+                        opacity: 0,
+                    }),
+                    animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
+                        transform: 'translateY(0)',
+                        opacity: 1,
+                    })),
+                ]),
+                transition(':leave', [
+                    style({
+                        transform: 'translateY(0)',
+                        opacity: 1,
+                    }),
+                    animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
+                        transform: 'translateY(20px)',
+                        opacity: 0,
+                    })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarWindowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngt-window', standalone: true, template: `
-    <div class="ngt-window" [attr.data-theme]="theme()">
-      <div class="ngt-header">
-        <div class="ngt-header__content">
-          <div class="ngt-header__title">
-            <h1>{{ config().title }}</h1>
-            @if (config().isBeta) {
-            <span class="beta-tag">BETA</span>
-            }
-          </div>
-          @if (config().description) {
-          <p class="ngt-header__description">{{ config().description }}</p>
-          }
-        </div>
-        <div class="ngt-header__controls">
-          @if (config().isMinimizable) {
-          <button aria-label="Minimize" class="control" (click)="onMinimize()">
-            −
-          </button>
-          } @if (config().isMaximizable) {
-          <button aria-label="Maximize" class="control" (click)="onMaximize()">
-            □
-          </button>
-          } @if (config().isClosable) {
-          <button
-            aria-label="Close"
-            class="control control--close"
-            (click)="onClose()"
-          >
-            ×
-          </button>
+            args: [{ selector: 'ngt-toolbar-tool', standalone: true, imports: [
+                        CdkConnectedOverlay,
+                        OverlayModule,
+                        ToolbarWindowComponent,
+                        ToolbarToolButtonComponent,
+                        ToolbarIconComponent,
+                    ], template: `
+    <div #trigger="cdkOverlayOrigin" class="ngt-toolbar-tool" cdkOverlayOrigin>
+      <div
+        class="ngt-toolbar-tool__icon"
+        (click)="onOpen()"
+        (keydown.enter)="onOpen()"
+        (keydown.space)="onOpen()"
+        tabindex="0"
+      >
+        <div #buttonContainer [attr.data-tooltip]="title()">
+          @if (icon()) {
+          <ngt-tool-button [title]="title()" [toolId]="options().id" [badge]="badge()">
+            <ngt-icon [name]="icon()" />
+          </ngt-tool-button>
+          } @else {
+          <ng-content select="ngt-tool-button"></ng-content>
           }
         </div>
       </div>
 
-      <div class="divider"></div>
-      <div class="ngt-content">
-        <ng-content></ng-content>
-      </div>
+      @if (isActive()) {
+      <ng-template
+        #contentTemplate
+        [cdkConnectedOverlayOrigin]="trigger"
+        [cdkConnectedOverlayOpen]="isActive()"
+        [cdkConnectedOverlayPositions]="positions()"
+        [cdkConnectedOverlayWidth]="width()"
+        [cdkConnectedOverlayHeight]="height()"
+        [cdkConnectedOverlayPanelClass]="['ngt-overlay-panel', 'ngt-tool-overlay']"
+        cdkConnectedOverlay
+      >
+        <ngt-window [@slideAnimation] [config]="options()" (closed)="onClose()">
+          <ng-content />
+        </ngt-window>
+      </ng-template>
+      }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-window{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:100%;height:100%;background:var(--ngt-bg-primary);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-large);padding:var(--ngt-window-padding) var(--ngt-window-padding) var(--ngt-spacing-xs);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ngt-text-secondary);z-index:999999999;box-shadow:var(--ngt-shadow-window);contain:layout style}.ngt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ngt-header h1{font-size:var(--ngt-font-size-lg);line-height:1.2;margin:0;color:var(--ngt-text-primary)}.ngt-header__title{display:flex;align-items:center;gap:var(--ngt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ngt-spacing-xs)}.ngt-header__title .beta-tag{font-size:var(--ngt-font-size-xxs, .65rem);background:var(--ngt-purple, #8b5cf6);color:var(--ngt-text-on-primary);padding:2px 6px;border-radius:var(--ngt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ngt-header__description{font-size:var(--ngt-font-size-sm);color:var(--ngt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ngt-header__content{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);flex:1;min-width:0}.ngt-header__controls{display:flex;gap:var(--ngt-spacing-sm);flex-shrink:0;align-items:flex-start}.ngt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ngt-border-primary);margin-bottom:var(--ngt-spacing-md);margin-top:var(--ngt-spacing-md);flex-shrink:0;position:relative;z-index:5}.control{background:none;border:none;color:var(--ngt-text-secondary);cursor:pointer;padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-small);font-size:var(--ngt-font-size-md);line-height:1;transition:var(--ngt-transition-smooth)}.control:hover{background:var(--ngt-hover-bg);color:var(--ngt-text-primary)}.control--close:hover{background:var(--ngt-hover-danger)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('slideAnimation', [
+                            transition(':enter', [
+                                style({
+                                    transform: 'translateY(20px)',
+                                    opacity: 0,
+                                }),
+                                animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
+                                    transform: 'translateY(0)',
+                                    opacity: 1,
+                                })),
+                            ]),
+                            transition(':leave', [
+                                style({
+                                    transform: 'translateY(0)',
+                                    opacity: 1,
+                                }),
+                                animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
+                                    transform: 'translateY(20px)',
+                                    opacity: 0,
+                                })),
+                            ]),
+                        ]),
+                    ], styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.tool{position:relative}.trigger{cursor:pointer}\n"] }]
+        }] });
+
+class ToolbarStorageService {
+    constructor() {
+        this.PREFIX = 'AngularToolbar.';
+        this.TOOLS_KEY = `${this.PREFIX}keys`;
+        this.SETTINGS_KEY = `${this.PREFIX}settings`;
+    }
+    set(key, value) {
+        const toolKey = this.getToolKey(key);
+        this.addToolKey(toolKey);
+        localStorage.setItem(toolKey, JSON.stringify(value));
+    }
+    get(key) {
+        const toolKey = this.getToolKey(key);
+        const item = localStorage.getItem(toolKey);
+        return item ? JSON.parse(item) : null;
+    }
+    remove(key) {
+        const toolKey = this.getToolKey(key);
+        localStorage.removeItem(toolKey);
+        this.removeToolKey(toolKey);
+    }
+    getAllSettings() {
+        const settings = {};
+        const keys = this.getToolKeys();
+        keys.forEach((key) => {
+            const value = this.get(key);
+            if (value !== null) {
+                settings[key] = value;
+            }
+        });
+        return settings;
+    }
+    setAllSettings(settings) {
+        Object.entries(settings).forEach(([key, value]) => {
+            this.set(key, value);
+        });
+    }
+    clearAllSettings() {
+        const keys = this.getToolKeys();
+        keys.forEach((key) => {
+            this.remove(key);
+        });
+    }
+    getToolKeys() {
+        return JSON.parse(localStorage.getItem(this.TOOLS_KEY) ?? '[]');
+    }
+    addToolKey(key) {
+        const currentKeys = this.getToolKeys();
+        if (currentKeys.includes(key)) {
+            return;
+        }
+        currentKeys.push(key);
+        localStorage.setItem(this.TOOLS_KEY, JSON.stringify(currentKeys));
+    }
+    removeToolKey(key) {
+        const currentKeys = this.getToolKeys();
+        const index = currentKeys.indexOf(key);
+        if (index !== -1) {
+            currentKeys.splice(index, 1);
+        }
+        localStorage.setItem(this.TOOLS_KEY, JSON.stringify(currentKeys));
+    }
+    getToolKey(key) {
+        return key.includes(this.PREFIX) ? key : this.PREFIX + key;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStorageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
-class ToolbarToolComponent {
+/**
+ * Internal service for managing app features state and forced overrides.
+ *
+ * This service handles:
+ * - Feature configuration storage
+ * - Forced feature state management
+ * - localStorage persistence
+ * - State validation and cleanup
+ *
+ * @internal This service is for internal toolbar use only. Consumers should use ToolbarAppFeaturesService.
+ */
+class ToolbarInternalAppFeaturesService {
     constructor() {
-        this.state = inject(ToolbarStateService);
-        this.buttonContainer = viewChild.required('buttonContainer');
-        this.buttonComponent = contentChild(ToolbarToolButtonComponent);
-        this.options = input.required();
-        this.icon = input.required();
-        this.title = input.required();
-        this.badge = input();
-        this.isActive = computed(() => this.state.activeToolId() === this.options().id);
-        this.height = computed(() => {
-            switch (this.options().size) {
-                case 'small':
-                    return 320;
-                case 'medium':
-                    return 480;
-                case 'tall':
-                    return 620;
-                case 'large':
-                    return 620;
-                default:
-                    return 480;
-            }
+        this.STORAGE_KEY = 'app-features';
+        this.storageService = inject(ToolbarStorageService);
+        this.stateService = inject(ToolbarStateService);
+        this.appFeaturesSubject = new BehaviorSubject([]);
+        this.forcedFeaturesSubject = new BehaviorSubject({
+            enabled: [],
+            disabled: [],
         });
-        this.width = computed(() => {
-            switch (this.options().size) {
-                case 'small':
-                    return 320;
-                case 'medium':
-                    return 480;
-                case 'tall':
-                    return 480;
-                case 'large':
-                    return 620;
-                default:
-                    return 400;
+        this.forcedFeatures$ = this.forcedFeaturesSubject.asObservable();
+        /**
+         * Observable stream of all features with merged forced state
+         */
+        this.features$ = combineLatest([
+            this.appFeaturesSubject.asObservable(),
+            this.forcedFeatures$,
+        ]).pipe(map(([appFeatures, forcedState]) => this.mergeForcedState(appFeatures, forcedState)));
+        /**
+         * Signal containing current features with merged forced state
+         */
+        this.features = toSignal(this.features$, { initialValue: [] });
+        this.loadForcedFeatures();
+    }
+    /**
+     * Set available app features for the application.
+     * Validates features, trims whitespace, and triggers validation of forced state.
+     *
+     * @param features - Array of app features to configure
+     * @throws Error if duplicate feature IDs or empty IDs are detected
+     */
+    setAppFeatures(features) {
+        // Validate for empty IDs
+        const emptyIdFeature = features.find((f) => !f.id || f.id.trim() === '');
+        if (emptyIdFeature) {
+            throw new Error('Feature ID cannot be empty');
+        }
+        // Validate for duplicate IDs
+        const ids = features.map((f) => f.id);
+        const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index);
+        if (duplicateIds.length > 0) {
+            throw new Error(`Duplicate feature IDs detected: ${duplicateIds.join(', ')}`);
+        }
+        // Trim whitespace from names and warn about empty names
+        const processedFeatures = features.map((feature) => {
+            const trimmedName = feature.name.trim();
+            if (!trimmedName) {
+                console.warn(`Feature '${feature.id}' has empty name`);
             }
+            return {
+                ...feature,
+                name: trimmedName || feature.name,
+            };
         });
-        this.positions = computed(() => {
-            const triggerXPosition = this.getButtonContainerXPosition();
-            const windowCenter = window.innerWidth / 2;
-            const offsetX = windowCenter - triggerXPosition - 22;
-            return [
-                {
-                    originX: 'center',
-                    originY: 'center',
-                    overlayX: 'center',
-                    overlayY: 'center',
-                    offsetY: -(Math.ceil(this.height() / 2) + 36),
-                    offsetX,
-                },
-            ];
+        this.appFeaturesSubject.next(processedFeatures);
+        this.validateAndCleanForcedState();
+    }
+    /**
+     * Get observable stream of app features (natural state, no forced state merged)
+     */
+    getAppFeatures() {
+        return this.appFeaturesSubject.asObservable();
+    }
+    /**
+     * Get observable stream of features that have forced overrides
+     */
+    getForcedFeatures() {
+        return this.features$.pipe(map((features) => {
+            // If toolbar is disabled, return empty array (no forced values)
+            if (!this.stateService.isEnabled()) {
+                return [];
+            }
+            return features.filter((feature) => feature.isForced);
+        }));
+    }
+    /**
+     * Force a feature to enabled or disabled state.
+     * Persists the forced state to localStorage.
+     *
+     * @param featureId - ID of the feature to force
+     * @param isEnabled - Whether to force feature to enabled (true) or disabled (false)
+     */
+    setFeature(featureId, isEnabled) {
+        const { enabled, disabled } = this.forcedFeaturesSubject.value;
+        // Remove feature from both arrays
+        const newEnabled = enabled.filter((id) => id !== featureId);
+        const newDisabled = disabled.filter((id) => id !== featureId);
+        // Add to appropriate array
+        if (isEnabled) {
+            newEnabled.push(featureId);
+        }
+        else {
+            newDisabled.push(featureId);
+        }
+        const newState = { enabled: newEnabled, disabled: newDisabled };
+        this.forcedFeaturesSubject.next(newState);
+        this.saveForcedFeatures(newState);
+    }
+    /**
+     * Remove forced override for a feature, returning it to natural state.
+     * Persists the change to localStorage.
+     *
+     * @param featureId - ID of the feature to unforce
+     */
+    removeFeatureOverride(featureId) {
+        const { enabled, disabled } = this.forcedFeaturesSubject.value;
+        const newState = {
+            enabled: enabled.filter((id) => id !== featureId),
+            disabled: disabled.filter((id) => id !== featureId),
+        };
+        this.forcedFeaturesSubject.next(newState);
+        this.saveForcedFeatures(newState);
+    }
+    /**
+     * Apply a preset forced state (for preset integration).
+     * Validates and cleans invalid feature IDs before applying.
+     *
+     * @param state - Forced features state from preset
+     */
+    applyForcedState(state) {
+        const configuredFeatureIds = this.appFeaturesSubject.value.map((f) => f.id);
+        // Validate and filter to only valid IDs
+        const validEnabled = state.enabled.filter((id) => configuredFeatureIds.includes(id));
+        const validDisabled = state.disabled.filter((id) => configuredFeatureIds.includes(id));
+        const invalidIds = [
+            ...state.enabled.filter((id) => !configuredFeatureIds.includes(id)),
+            ...state.disabled.filter((id) => !configuredFeatureIds.includes(id)),
+        ];
+        if (invalidIds.length > 0) {
+            console.warn(`Preset contains invalid feature IDs (ignored): ${invalidIds.join(', ')}`);
+        }
+        const cleanedState = { enabled: validEnabled, disabled: validDisabled };
+        this.forcedFeaturesSubject.next(cleanedState);
+        this.saveForcedFeatures(cleanedState);
+    }
+    /**
+     * Get current forced state as a snapshot (defensive copy).
+     * Useful for preset exports and debugging.
+     *
+     * @returns Current forced features state
+     */
+    getCurrentForcedState() {
+        const state = this.forcedFeaturesSubject.value;
+        return {
+            enabled: [...state.enabled],
+            disabled: [...state.disabled],
+        };
+    }
+    /**
+     * Merge natural app features with forced state.
+     *
+     * @param appFeatures - Natural feature configuration
+     * @param forcedState - Forced overrides from localStorage/toolbar
+     * @returns Features with merged forced state
+     */
+    mergeForcedState(appFeatures, forcedState) {
+        // If toolbar is disabled, return app features without overrides
+        if (!this.stateService.isEnabled()) {
+            return appFeatures;
+        }
+        return appFeatures.map((feature) => {
+            const isInEnabled = forcedState.enabled.includes(feature.id);
+            const isInDisabled = forcedState.disabled.includes(feature.id);
+            const isForced = isInEnabled || isInDisabled;
+            return {
+                ...feature,
+                isEnabled: isInEnabled ? true : isInDisabled ? false : feature.isEnabled,
+                isForced,
+                originalValue: isForced ? feature.isEnabled : undefined,
+            };
         });
     }
-    onOpen() {
-        this.state.setActiveTool(this.options().id);
+    /**
+     * Load forced features state from localStorage on initialization.
+     * Handles missing or corrupted data gracefully.
+     */
+    loadForcedFeatures() {
+        try {
+            const savedState = this.storageService.get(this.STORAGE_KEY);
+            if (savedState) {
+                this.forcedFeaturesSubject.next(savedState);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load forced app features from localStorage:', error);
+            // Use default empty state on error
+        }
     }
-    onClose() {
-        this.state.setActiveTool(null);
+    /**
+     * Persist forced features state to localStorage.
+     * Handles quota exceeded errors gracefully.
+     *
+     * @param state - Forced state to persist
+     */
+    saveForcedFeatures(state) {
+        try {
+            this.storageService.set(this.STORAGE_KEY, state);
+        }
+        catch (error) {
+            console.error('Failed to persist app features to localStorage:', error);
+            // Continue execution - state is still valid in memory for current session
+        }
     }
-    getButtonContainerXPosition() {
-        const buttonContainerRect = this.buttonContainer()?.nativeElement?.getBoundingClientRect();
-        return buttonContainerRect?.left ?? 0;
+    /**
+     * Validate forced feature IDs against configured features and clean up invalid ones.
+     * Called after setAppFeatures() to ensure forced state references valid features.
+     */
+    validateAndCleanForcedState() {
+        const configuredFeatureIds = this.appFeaturesSubject.value.map((f) => f.id);
+        const currentForcedState = this.forcedFeaturesSubject.value;
+        const validEnabled = currentForcedState.enabled.filter((id) => configuredFeatureIds.includes(id));
+        const validDisabled = currentForcedState.disabled.filter((id) => configuredFeatureIds.includes(id));
+        const removedIds = [
+            ...currentForcedState.enabled.filter((id) => !configuredFeatureIds.includes(id)),
+            ...currentForcedState.disabled.filter((id) => !configuredFeatureIds.includes(id)),
+        ];
+        if (removedIds.length > 0) {
+            console.warn(`Removed invalid feature IDs from forced state: ${removedIds.join(', ')}`);
+            const cleanedState = { enabled: validEnabled, disabled: validDisabled };
+            this.forcedFeaturesSubject.next(cleanedState);
+            this.saveForcedFeatures(cleanedState);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarToolComponent, isStandalone: true, selector: "ngt-toolbar-tool", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "buttonComponent", first: true, predicate: ToolbarToolButtonComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonContainer", first: true, predicate: ["buttonContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div #trigger="cdkOverlayOrigin" class="ngt-toolbar-tool" cdkOverlayOrigin>
-      <div
-        class="ngt-toolbar-tool__icon"
-        (click)="onOpen()"
-        (keydown.enter)="onOpen()"
-        (keydown.space)="onOpen()"
-        tabindex="0"
-      >
-        <div #buttonContainer [attr.data-tooltip]="title()">
-          @if (icon()) {
-          <ngt-tool-button [title]="title()" [toolId]="options().id" [badge]="badge()">
-            <ngt-icon [name]="icon()" />
-          </ngt-tool-button>
-          } @else {
-          <ng-content select="ngt-tool-button"></ng-content>
-          }
-        </div>
-      </div>
-
-      @if (isActive()) {
-      <ng-template
-        #contentTemplate
-        [cdkConnectedOverlayOrigin]="trigger"
-        [cdkConnectedOverlayOpen]="isActive()"
-        [cdkConnectedOverlayPositions]="positions()"
-        [cdkConnectedOverlayWidth]="width()"
-        [cdkConnectedOverlayHeight]="height()"
-        [cdkConnectedOverlayPanelClass]="['ngt-overlay-panel', 'ngt-tool-overlay']"
-        cdkConnectedOverlay
-      >
-        <ngt-window [@slideAnimation] [config]="options()" (closed)="onClose()">
-          <ng-content />
-        </ngt-window>
-      </ng-template>
-      }
-    </div>
-  `, isInline: true, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.tool{position:relative}.trigger{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ToolbarWindowComponent, selector: "ngt-window", inputs: ["config"], outputs: ["closed", "maximize", "minimize"] }, { kind: "component", type: ToolbarToolButtonComponent, selector: "ngt-tool-button", inputs: ["title", "toolId", "badge"], outputs: ["open"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }], animations: [
-            trigger('slideAnimation', [
-                transition(':enter', [
-                    style({
-                        transform: 'translateY(20px)',
-                        opacity: 0,
-                    }),
-                    animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
-                        transform: 'translateY(0)',
-                        opacity: 1,
-                    })),
-                ]),
-                transition(':leave', [
-                    style({
-                        transform: 'translateY(0)',
-                        opacity: 1,
-                    }),
-                    animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
-                        transform: 'translateY(20px)',
-                        opacity: 0,
-                    })),
-                ]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalAppFeaturesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngt-toolbar-tool', standalone: true, imports: [
-                        CdkConnectedOverlay,
-                        OverlayModule,
-                        ToolbarWindowComponent,
-                        ToolbarToolButtonComponent,
-                        ToolbarIconComponent,
-                    ], template: `
-    <div #trigger="cdkOverlayOrigin" class="ngt-toolbar-tool" cdkOverlayOrigin>
-      <div
-        class="ngt-toolbar-tool__icon"
-        (click)="onOpen()"
-        (keydown.enter)="onOpen()"
-        (keydown.space)="onOpen()"
-        tabindex="0"
-      >
-        <div #buttonContainer [attr.data-tooltip]="title()">
-          @if (icon()) {
-          <ngt-tool-button [title]="title()" [toolId]="options().id" [badge]="badge()">
-            <ngt-icon [name]="icon()" />
-          </ngt-tool-button>
-          } @else {
-          <ng-content select="ngt-tool-button"></ng-content>
-          }
-        </div>
-      </div>
-
-      @if (isActive()) {
-      <ng-template
-        #contentTemplate
-        [cdkConnectedOverlayOrigin]="trigger"
-        [cdkConnectedOverlayOpen]="isActive()"
-        [cdkConnectedOverlayPositions]="positions()"
-        [cdkConnectedOverlayWidth]="width()"
-        [cdkConnectedOverlayHeight]="height()"
-        [cdkConnectedOverlayPanelClass]="['ngt-overlay-panel', 'ngt-tool-overlay']"
-        cdkConnectedOverlay
-      >
-        <ngt-window [@slideAnimation] [config]="options()" (closed)="onClose()">
-          <ng-content />
-        </ngt-window>
-      </ng-template>
-      }
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('slideAnimation', [
-                            transition(':enter', [
-                                style({
-                                    transform: 'translateY(20px)',
-                                    opacity: 0,
-                                }),
-                                animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
-                                    transform: 'translateY(0)',
-                                    opacity: 1,
-                                })),
-                            ]),
-                            transition(':leave', [
-                                style({
-                                    transform: 'translateY(0)',
-                                    opacity: 1,
-                                }),
-                                animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
-                                    transform: 'translateY(20px)',
-                                    opacity: 0,
-                                })),
-                            ]),
-                        ]),
-                    ], styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.tool{position:relative}.trigger{cursor:pointer}\n"] }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalAppFeaturesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 /**
  * Component for managing app features in the dev toolbar.
@@ -3816,7 +3035,7 @@ class ToolbarAppFeaturesToolComponent {
         </ngt-list>
       </div>
     </ngt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);ngt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ngt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ngt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ngt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ngt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ngt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ngt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);ngt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ngt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ngt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ngt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ngt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ngt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ngt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesToolComponent, decorators: [{
             type: Component,
@@ -3883,6 +3102,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);ngt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ngt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ngt-select{flex:0 0 auto;min-width:180px}}}\n"] }]
         }], ctorParameters: () => [] });
 
+class ToolbarInternalFeatureFlagService {
+    constructor() {
+        this.STORAGE_KEY = 'feature-flags';
+        this.storageService = inject(ToolbarStorageService);
+        this.stateService = inject(ToolbarStateService);
+        this.appFlags$ = new BehaviorSubject([]);
+        this.forcedFlagsSubject = new BehaviorSubject({
+            enabled: [],
+            disabled: [],
+        });
+        this.forcedFlags$ = this.forcedFlagsSubject.asObservable();
+        this.flags$ = combineLatest([
+            this.appFlags$,
+            this.forcedFlags$,
+        ]).pipe(map(([appFlags, { enabled, disabled }]) => {
+            // If toolbar is disabled, return app flags without overrides
+            if (!this.stateService.isEnabled()) {
+                return appFlags;
+            }
+            return appFlags.map((flag) => {
+                const isForced = enabled.includes(flag.id) || disabled.includes(flag.id);
+                return {
+                    ...flag,
+                    isForced,
+                    isEnabled: enabled.includes(flag.id)
+                        ? true
+                        : disabled.includes(flag.id)
+                            ? false
+                            : flag.isEnabled,
+                    originalValue: isForced ? flag.isEnabled : undefined,
+                };
+            });
+        }));
+        this.flags = toSignal(this.flags$, { initialValue: [] });
+        this.loadForcedFlags();
+    }
+    setAppFlags(flags) {
+        this.appFlags$.next(flags);
+    }
+    getAppFlags() {
+        return this.appFlags$.asObservable();
+    }
+    getForcedFlags() {
+        return this.flags$.pipe(map((flags) => {
+            // If toolbar is disabled, return empty array (no forced values)
+            if (!this.stateService.isEnabled()) {
+                return [];
+            }
+            return flags.filter((flag) => flag.isForced);
+        }));
+    }
+    setFlag(flagId, isEnabled) {
+        const { enabled, disabled } = this.forcedFlagsSubject.value;
+        const newEnabled = enabled.filter((id) => id !== flagId);
+        const newDisabled = disabled.filter((id) => id !== flagId);
+        if (isEnabled) {
+            newEnabled.push(flagId);
+        }
+        else {
+            newDisabled.push(flagId);
+        }
+        const newState = { enabled: newEnabled, disabled: newDisabled };
+        this.forcedFlagsSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    removeFlagOverride(flagId) {
+        const { enabled, disabled } = this.forcedFlagsSubject.value;
+        const newState = {
+            enabled: enabled.filter((id) => id !== flagId),
+            disabled: disabled.filter((id) => id !== flagId),
+        };
+        this.forcedFlagsSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    loadForcedFlags() {
+        const savedFlags = this.storageService.get(this.STORAGE_KEY);
+        if (savedFlags) {
+            this.forcedFlagsSubject.next(savedFlags);
+        }
+    }
+    /**
+     * Apply feature flags from a preset (used by Presets Tool)
+     * This method directly sets the forced flags state without user interaction
+     */
+    applyPresetFlags(presetState) {
+        this.forcedFlagsSubject.next(presetState);
+        this.storageService.set(this.STORAGE_KEY, presetState);
+    }
+    /**
+     * Get current forced state for saving to preset
+     * Returns the raw state of enabled and disabled flag IDs
+     */
+    getCurrentForcedState() {
+        return this.forcedFlagsSubject.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalFeatureFlagService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalFeatureFlagService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class ToolbarFeatureFlagsToolComponent {
     constructor() {
         // Injects
@@ -3997,6 +3319,9 @@ class ToolbarFeatureFlagsToolComponent {
             return '';
         return flag.isEnabled ? 'on' : 'off';
     }
+    getFlagPlaceholder(flag) {
+        return flag.isEnabled ? 'On' : 'Off';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarFeatureFlagsToolComponent, isStandalone: true, selector: "ngt-feature-flags-tool", ngImport: i0, template: `
     <ngt-toolbar-tool
@@ -4030,26 +3355,27 @@ class ToolbarFeatureFlagsToolComponent {
           noResultsMessage="No flags found matching your filter"
         >
           @for (flag of filteredFlags(); track flag.id) {
-            <ngt-list-item
-              [title]="flag.name"
-              [description]="flag.description"
-              [isForced]="flag.isForced"
-              [currentValue]="flag.isEnabled"
-              [originalValue]="flag.originalValue"
-            >
-              <ngt-select
-                [value]="getFlagValue(flag)"
-                [options]="flagValueOptions"
-                [ariaLabel]="'Set value for ' + flag.name"
-                (valueChange)="onFlagChange(flag.id, $event ?? '')"
-                size="small"
-              />
-            </ngt-list-item>
+          <ngt-list-item
+            [title]="flag.name"
+            [description]="flag.description"
+            [isForced]="flag.isForced"
+            [currentValue]="flag.isEnabled"
+            [originalValue]="flag.originalValue"
+          >
+            <ngt-select
+              [value]="getFlagValue(flag)"
+              [options]="flagValueOptions"
+              [placeholder]="getFlagPlaceholder(flag)"
+              [ariaLabel]="'Set value for ' + flag.name"
+              (valueChange)="onFlagChange(flag.id, $event ?? '')"
+              size="small"
+            />
+          </ngt-list-item>
           }
         </ngt-list>
       </div>
     </ngt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);ngt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ngt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ngt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ngt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ngt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ngt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ngt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);ngt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ngt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ngt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ngt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ngt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ngt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ngt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagsToolComponent, decorators: [{
             type: Component,
@@ -4093,21 +3419,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
           noResultsMessage="No flags found matching your filter"
         >
           @for (flag of filteredFlags(); track flag.id) {
-            <ngt-list-item
-              [title]="flag.name"
-              [description]="flag.description"
-              [isForced]="flag.isForced"
-              [currentValue]="flag.isEnabled"
-              [originalValue]="flag.originalValue"
-            >
-              <ngt-select
-                [value]="getFlagValue(flag)"
-                [options]="flagValueOptions"
-                [ariaLabel]="'Set value for ' + flag.name"
-                (valueChange)="onFlagChange(flag.id, $event ?? '')"
-                size="small"
-              />
-            </ngt-list-item>
+          <ngt-list-item
+            [title]="flag.name"
+            [description]="flag.description"
+            [isForced]="flag.isForced"
+            [currentValue]="flag.isEnabled"
+            [originalValue]="flag.originalValue"
+          >
+            <ngt-select
+              [value]="getFlagValue(flag)"
+              [options]="flagValueOptions"
+              [placeholder]="getFlagPlaceholder(flag)"
+              [ariaLabel]="'Set value for ' + flag.name"
+              (valueChange)="onFlagChange(flag.id, $event ?? '')"
+              size="small"
+            />
+          </ngt-list-item>
           }
         </ngt-list>
       </div>
@@ -4505,6 +3832,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.settings{display:flex;flex-direction:column;height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ngt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs)}.instruction__label-text{color:var(--ngt-text-primary);font-size:var(--ngt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ngt-text-muted);font-size:var(--ngt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ngt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column;gap:var(--ngt-spacing-md)}.settings-container .settings-actions{display:flex;gap:var(--ngt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{margin-top:auto;padding-top:var(--ngt-spacing-lg);border-top:1px solid var(--ngt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;gap:var(--ngt-spacing-lg)}\n"] }]
         }] });
 
+class ToolbarInternalLanguageService {
+    constructor() {
+        this.STORAGE_KEY = 'language';
+        this.storageService = inject(ToolbarStorageService);
+        this.stateService = inject(ToolbarStateService);
+        this.languages$ = new BehaviorSubject([]);
+        this.forcedLanguage$ = new BehaviorSubject(null);
+        this.languages = toSignal(this.languages$, { initialValue: [] });
+        this.loadForcedLanguage();
+    }
+    setAppLanguages(languages) {
+        this.languages$.next(languages);
+    }
+    getAppLanguages() {
+        return this.languages$.asObservable();
+    }
+    setForcedLanguage(language) {
+        this.forcedLanguage$.next(language);
+        this.storageService.set(this.STORAGE_KEY, language);
+    }
+    getForcedLanguage() {
+        return this.forcedLanguage$.pipe(map((language) => {
+            // If toolbar is disabled, return empty array (no forced values)
+            if (!this.stateService.isEnabled()) {
+                return [];
+            }
+            return language ? [language] : [];
+        }));
+    }
+    removeForcedLanguage() {
+        this.forcedLanguage$.next(null);
+        this.storageService.remove(this.STORAGE_KEY);
+    }
+    loadForcedLanguage() {
+        const savedLanguage = this.storageService.get(this.STORAGE_KEY);
+        if (savedLanguage) {
+            this.forcedLanguage$.next(savedLanguage);
+        }
+    }
+    /**
+     * Apply language from a preset (used by Presets Tool)
+     * Accepts a language ID and finds the corresponding Language object from available languages
+     */
+    async applyPresetLanguage(languageId) {
+        if (languageId === null) {
+            this.removeForcedLanguage();
+            return;
+        }
+        // Get available languages and find matching one
+        const languages = await firstValueFrom(this.languages$);
+        const language = languages.find((lang) => lang.id === languageId);
+        if (language) {
+            this.setForcedLanguage(language);
+        }
+        else {
+            console.warn(`Language ${languageId} not found in available languages. Skipping.`);
+        }
+    }
+    /**
+     * Get current forced language ID for saving to preset
+     * Returns the language ID or null if no language is forced
+     */
+    getCurrentForcedLanguage() {
+        return this.forcedLanguage$.value?.id ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalLanguageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalLanguageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class ToolbarLanguageToolComponent {
     constructor() {
         this.languageService = inject(ToolbarInternalLanguageService);
@@ -4536,39 +3936,182 @@ class ToolbarLanguageToolComponent {
             this.languageService.setForcedLanguage(selectedLanguage);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: ToolbarLanguageToolComponent, isStandalone: true, selector: "ngt-language-tool", ngImport: i0, template: `
-    <ngt-toolbar-tool title="Languages" icon="translate" [options]="options">
-      <div class="language-select">
-        <label for="language-select">Language</label>
-        <ngt-select
-          id="language-select"
-          [value]="activeLanguage()"
-          [options]="languageOptions()"
-          [size]="'medium'"
-          (valueChange)="onLanguageChange($event ?? '')"
-        />
-      </div>
-    </ngt-toolbar-tool>
-  `, isInline: true, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ngt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: ToolbarLanguageToolComponent, isStandalone: true, selector: "ngt-language-tool", ngImport: i0, template: `
+    <ngt-toolbar-tool title="Languages" icon="translate" [options]="options">
+      <div class="language-select">
+        <label for="language-select">Language</label>
+        <ngt-select
+          id="language-select"
+          [value]="activeLanguage()"
+          [options]="languageOptions()"
+          [size]="'medium'"
+          (valueChange)="onLanguageChange($event ?? '')"
+        />
+      </div>
+    </ngt-toolbar-tool>
+  `, isInline: true, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ngt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngt-language-tool', standalone: true, imports: [ToolbarToolComponent, ToolbarSelectComponent], template: `
+    <ngt-toolbar-tool title="Languages" icon="translate" [options]="options">
+      <div class="language-select">
+        <label for="language-select">Language</label>
+        <ngt-select
+          id="language-select"
+          [value]="activeLanguage()"
+          [options]="languageOptions()"
+          [size]="'medium'"
+          (valueChange)="onLanguageChange($event ?? '')"
+        />
+      </div>
+    </ngt-toolbar-tool>
+  `, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"] }]
+        }] });
+
+class ToolbarInternalPermissionsService {
+    constructor() {
+        this.STORAGE_KEY = 'permissions';
+        this.storageService = inject(ToolbarStorageService);
+        this.stateService = inject(ToolbarStateService);
+        this.appPermissions$ = new BehaviorSubject([]);
+        this.forcedStateSubject = new BehaviorSubject({
+            granted: [],
+            denied: [],
+        });
+        this.forcedState$ = this.forcedStateSubject.asObservable();
+        this.permissions$ = combineLatest([
+            this.appPermissions$,
+            this.forcedState$,
+        ]).pipe(map(([appPermissions, { granted, denied }]) => {
+            // If toolbar is disabled, return app permissions without overrides
+            if (!this.stateService.isEnabled()) {
+                return appPermissions;
+            }
+            return appPermissions.map((permission) => {
+                const isForced = granted.includes(permission.id) || denied.includes(permission.id);
+                return {
+                    ...permission,
+                    isForced,
+                    isGranted: granted.includes(permission.id)
+                        ? true
+                        : denied.includes(permission.id)
+                            ? false
+                            : permission.isGranted,
+                    originalValue: isForced ? permission.isGranted : undefined,
+                };
+            });
+        }));
+        this.permissions = toSignal(this.permissions$, { initialValue: [] });
+        this.loadForcedState();
+    }
+    setAppPermissions(permissions) {
+        this.appPermissions$.next(permissions);
+        this.validateAndCleanForcedState(permissions);
+    }
+    setPermission(id, granted) {
+        const { granted: grantedIds, denied: deniedIds } = this.forcedStateSubject.value;
+        const newGranted = grantedIds.filter((permId) => permId !== id);
+        const newDenied = deniedIds.filter((permId) => permId !== id);
+        if (granted) {
+            newGranted.push(id);
+        }
+        else {
+            newDenied.push(id);
+        }
+        const newState = { granted: newGranted, denied: newDenied };
+        this.forcedStateSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    removePermissionOverride(id) {
+        const { granted, denied } = this.forcedStateSubject.value;
+        const newState = {
+            granted: granted.filter((permId) => permId !== id),
+            denied: denied.filter((permId) => permId !== id),
+        };
+        this.forcedStateSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    getForcedPermissions() {
+        return this.permissions$.pipe(map((permissions) => {
+            // If toolbar is disabled, return empty array (no forced values)
+            if (!this.stateService.isEnabled()) {
+                return [];
+            }
+            return permissions.filter((permission) => permission.isForced);
+        }));
+    }
+    /**
+     * Apply a preset permissions state, replacing the current forced state.
+     * Useful for automated testing or restoring saved configurations.
+     * @param state The preset forced permissions state to apply
+     */
+    applyPresetPermissions(state) {
+        this.forcedStateSubject.next(state);
+        this.storageService.set(this.STORAGE_KEY, state);
+    }
+    /**
+     * Get the current forced permissions state.
+     * Returns a deep copy to prevent external mutations.
+     * @returns Current forced permissions state
+     */
+    getCurrentForcedState() {
+        const currentState = this.forcedStateSubject.value;
+        return {
+            granted: [...currentState.granted],
+            denied: [...currentState.denied],
+        };
+    }
+    loadForcedState() {
+        try {
+            const savedState = this.storageService.get(this.STORAGE_KEY);
+            if (savedState && this.isValidForcedState(savedState)) {
+                this.forcedStateSubject.next(savedState);
+            }
+        }
+        catch (error) {
+            console.warn('Error loading forced permissions state from localStorage:', error);
+        }
+    }
+    isValidForcedState(state) {
+        if (!state || typeof state !== 'object') {
+            return false;
+        }
+        const candidate = state;
+        return (Array.isArray(candidate['granted']) &&
+            Array.isArray(candidate['denied']));
+    }
+    validateAndCleanForcedState(permissions) {
+        const currentState = this.forcedStateSubject.value;
+        const validIds = new Set(permissions.map((p) => p.id));
+        const cleanedGranted = currentState.granted.filter((id) => validIds.has(id));
+        const cleanedDenied = currentState.denied.filter((id) => validIds.has(id));
+        const hasInvalidIds = cleanedGranted.length !== currentState.granted.length ||
+            cleanedDenied.length !== currentState.denied.length;
+        if (hasInvalidIds) {
+            const cleanedState = {
+                granted: cleanedGranted,
+                denied: cleanedDenied,
+            };
+            this.forcedStateSubject.next(cleanedState);
+            this.storageService.set(this.STORAGE_KEY, cleanedState);
+            const invalidIds = [
+                ...currentState.granted.filter((id) => !validIds.has(id)),
+                ...currentState.denied.filter((id) => !validIds.has(id)),
+            ];
+            if (invalidIds.length > 0) {
+                console.warn('Removed invalid permission IDs from forced state:', invalidIds);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalPermissionsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageToolComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngt-language-tool', standalone: true, imports: [ToolbarToolComponent, ToolbarSelectComponent], template: `
-    <ngt-toolbar-tool title="Languages" icon="translate" [options]="options">
-      <div class="language-select">
-        <label for="language-select">Language</label>
-        <ngt-select
-          id="language-select"
-          [value]="activeLanguage()"
-          [options]="languageOptions()"
-          [size]="'medium'"
-          (valueChange)="onLanguageChange($event ?? '')"
-        />
-      </div>
-    </ngt-toolbar-tool>
-  `, styles: [":host{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2)}.language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"] }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalPermissionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 class ToolbarPermissionsToolComponent {
     constructor() {
@@ -4739,7 +4282,7 @@ class ToolbarPermissionsToolComponent {
         </ngt-list>
       </div>
     </ngt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);ngt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ngt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ngt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ngt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ngt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ngt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ngt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);ngt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ngt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ngt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ngt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ngt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ngt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ngt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsToolComponent, decorators: [{
             type: Component,
@@ -5747,6 +5290,10 @@ class ToolbarPresetsToolComponent {
             (dragleave)="onDragLeave($event)"
             (drop)="onFileDrop($event)"
             (click)="fileInput.click()"
+            (keydown.enter)="fileInput.click()"
+            (keydown.space)="fileInput.click()"
+            tabindex="0"
+            role="button"
           >
             <input
               #fileInput
@@ -6309,6 +5856,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             (dragleave)="onDragLeave($event)"
             (drop)="onFileDrop($event)"
             (click)="fileInput.click()"
+            (keydown.enter)="fileInput.click()"
+            (keydown.space)="fileInput.click()"
+            tabindex="0"
+            role="button"
           >
             <input
               #fileInput
@@ -6762,112 +6313,503 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }
       </div>
     }
-  `, animations: [
-                        trigger('toolbarState', [
-                            state('hidden', style({
-                                transform: 'translate(-50%, calc(100% + -1.2rem))',
-                            })),
-                            state('visible', style({
-                                transform: 'translate(-50%, -1rem)',
-                            })),
-                            transition('hidden <=> visible', [
-                                animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
-                            ]),
-                        ]),
-                    ], styles: [":host{display:contents;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-toolbar{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ngt-bg-primary);border:1px solid var(--ngt-border-primary);border-radius:9999px;box-shadow:var(--ngt-shadow-toolbar);height:40px;overflow:visible}.ngt-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ngt-text-primary);margin:0}h1{font-size:var(--ngt-font-size-xl)}h2{font-size:var(--ngt-font-size-lg)}h3{font-size:var(--ngt-font-size-md)}h4{font-size:var(--ngt-font-size-sm)}h5{font-size:var(--ngt-font-size-xs)}hr{border:1px solid var(--ngt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"] }]
-        }], ctorParameters: () => [] });
+  `, animations: [
+                        trigger('toolbarState', [
+                            state('hidden', style({
+                                transform: 'translate(-50%, calc(100% + -1.2rem))',
+                            })),
+                            state('visible', style({
+                                transform: 'translate(-50%, -1rem)',
+                            })),
+                            transition('hidden <=> visible', [
+                                animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
+                            ]),
+                        ]),
+                    ], styles: [":host{display:contents;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ngt-toolbar{--ngt-border-radius-small: 4px;--ngt-border-radius-medium: 8px;--ngt-border-radius-large: 12px;--ngt-transition-default: all .2s ease-out;--ngt-transition-smooth: all .2s ease-in-out;--ngt-bg-primary: rgb(255, 255, 255);--ngt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ngt-text-primary: rgb(17, 24, 39);--ngt-text-secondary: rgb(55, 65, 81);--ngt-text-muted: rgb(107, 114, 128);--ngt-border-primary: #e5e7eb;--ngt-border-subtle: rgba(17, 24, 39, .1);--ngt-hover-bg: rgba(17, 24, 39, .05);--ngt-hover-danger: rgb(239, 68, 68);--ngt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ngt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ngt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ngt-spacing-xs: 4px;--ngt-spacing-sm: 6px;--ngt-spacing-md: 12px;--ngt-spacing-lg: 16px;--ngt-window-padding: 16px;--ngt-font-size-xxs: .65rem;--ngt-font-size-xs: .75rem;--ngt-font-size-sm: .875rem;--ngt-font-size-md: 1rem;--ngt-font-size-lg: 1.25rem;--ngt-font-size-xl: 2rem;--ngt-background-secondary: var(--ngt-bg-primary);--ngt-background-hover: var(--ngt-hover-bg);--ngt-primary: #df30d4;--ngt-primary-rgb: 223, 48, 212;--ngt-text-on-primary: rgb(255, 255, 255);--ngt-border-color: var(--ngt-border-primary);--ngt-note-background: rgb(219, 234, 254);--ngt-note-border: rgba(37, 99, 235, .2);--ngt-warning-background: rgb(254, 249, 195);--ngt-warning-border: rgba(202, 138, 4, .2);--ngt-error-background: rgb(254, 226, 226);--ngt-error-border: rgba(220, 38, 38, .2);position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ngt-bg-primary);border:1px solid var(--ngt-border-primary);border-radius:9999px;box-shadow:var(--ngt-shadow-toolbar);height:40px;overflow:visible}.ngt-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ngt-text-primary);margin:0}h1{font-size:var(--ngt-font-size-xl)}h2{font-size:var(--ngt-font-size-lg)}h3{font-size:var(--ngt-font-size-md)}h4{font-size:var(--ngt-font-size-sm)}h5{font-size:var(--ngt-font-size-xs)}hr{border:1px solid var(--ngt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ToolbarFeatureFlagService {
+    constructor() {
+        this.internalService = inject(ToolbarInternalFeatureFlagService);
+    }
+    /**
+     * Sets the available flags that will be displayed in the tool on the dev toolbar
+     * @param flags The flags to be displayed
+     */
+    setAvailableOptions(flags) {
+        this.internalService.setAppFlags(flags);
+    }
+    /**
+     * Gets the flags that were forced/modified through the tool on the dev toolbar
+     * @returns Observable of forced flags array
+     */
+    getForcedValues() {
+        return this.internalService.getForcedFlags();
+    }
+    /**
+     * Gets ALL flag values with overrides already applied.
+     * Returns the complete set of flags where overridden values replace base values.
+     * Each flag includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base flags with overrides using combineLatest.
+     *
+     * @returns Observable of all flags with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Get a specific flag value with overrides applied
+     * this.featureFlagsService.getValues().pipe(
+     *   map(flags => flags.find(f => f.id === 'newFeature')),
+     *   map(flag => flag?.isEnabled ?? false)
+     * ).subscribe(isEnabled => {
+     *   if (isEnabled) {
+     *     // Enable feature
+     *   }
+     * });
+     * ```
+     */
+    getValues() {
+        return this.internalService.flags$;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Public service for integrating the Permissions Tool with your application.
+ * Use this service to:
+ * 1. Register your application's permissions with setAvailableOptions()
+ * 2. Listen for toolbar permission overrides with getForcedValues()
+ * 3. Apply preset permission states for testing with applyPreset()
+ *
+ * @example
+ * ```typescript
+ * constructor(private permissionsService: ToolbarPermissionsService) {
+ *   // Register permissions
+ *   this.permissionsService.setAvailableOptions([
+ *     { id: 'can-edit', name: 'Can Edit', isGranted: false, isForced: false }
+ *   ]);
+ *
+ *   // Listen for overrides
+ *   this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
+ *     // Update your app's permission state
+ *   });
+ * }
+ * ```
+ */
+class ToolbarPermissionsService {
+    constructor() {
+        this.internalService = inject(ToolbarInternalPermissionsService);
+    }
+    /**
+     * Sets the available permissions that will be displayed in the toolbar tool.
+     * Call this in your app initialization to register permissions.
+     *
+     * @param permissions Array of permissions to display in the toolbar
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.setAvailableOptions([
+     *   {
+     *     id: 'can-edit-posts',
+     *     name: 'Edit Posts',
+     *     description: 'Can edit blog posts',
+     *     isGranted: false,
+     *     isForced: false
+     *   }
+     * ]);
+     * ```
+     */
+    setAvailableOptions(permissions) {
+        this.internalService.setAppPermissions(permissions);
+    }
+    /**
+     * Gets an observable of permissions that were forced/overridden through the toolbar.
+     * Subscribe to this to update your application's permission state.
+     *
+     * @returns Observable emitting array of forced permissions whenever changes occur
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
+     *   forcedPermissions.forEach(permission => {
+     *     this.updatePermission(permission.id, permission.isGranted);
+     *   });
+     * });
+     * ```
+     */
+    getForcedValues() {
+        return this.internalService.getForcedPermissions();
+    }
+    /**
+     * Gets ALL permission values with overrides already applied.
+     * Returns the complete set of permissions where overridden values replace base values.
+     * Each permission includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base permissions with overrides using combineLatest.
+     *
+     * @returns Observable of all permissions with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Simple permission check with overrides applied
+     * this.permissionsService.getValues().pipe(
+     *   map(permissions => permissions.find(p => p.id === 'can-edit')),
+     *   map(permission => permission?.isGranted ?? false)
+     * ).subscribe(canEdit => {
+     *   if (canEdit) {
+     *     // Enable edit functionality
+     *   }
+     * });
+     * ```
+     */
+    getValues() {
+        return this.internalService.permissions$;
+    }
+    /**
+     * Apply a preset permission state. Useful for automated testing scenarios.
+     *
+     * @param state The forced permissions state to apply
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.applyPreset({
+     *   granted: ['can-edit-posts'],
+     *   denied: ['can-delete-posts']
+     * });
+     * ```
+     */
+    applyPreset(state) {
+        this.internalService.applyPresetPermissions(state);
+    }
+    /**
+     * Get the current forced permission state.
+     *
+     * @returns Current forced permissions state
+     */
+    getCurrentState() {
+        return this.internalService.getCurrentForcedState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ToolbarLanguageService {
+    constructor() {
+        this.internalService = inject(ToolbarInternalLanguageService);
+    }
+    /**
+     * Sets the available languages that will be displayed in the tool on the dev toolbar
+     * @param languages The languages to be displayed
+     */
+    setAvailableOptions(languages) {
+        this.internalService.setAppLanguages(languages);
+    }
+    /**
+     * Gets the languages that were forced/modified through the tool on the dev toolbar
+     * @returns Observable of forced languages array
+     */
+    getForcedValues() {
+        return this.internalService.getForcedLanguage();
+    }
+    /**
+     * Gets the forced language value.
+     * For the language tool, this returns the same as getForcedValues() since
+     * only one language can be selected at a time.
+     * @returns Observable of forced language array (single item or empty)
+     */
+    getValues() {
+        return this.internalService.getForcedLanguage();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
- * Dynamically attaches the Angular Toolbar to the DOM without template changes.
- *
- * This function creates and attaches the toolbar component directly to the document body,
- * eliminating the need to add `<ngt-toolbar>` to your component templates. Combined with
- * dynamic imports, this provides true zero production bundle impact.
+ * Public service for managing app features in the dev toolbar.
  *
- * ## Basic Usage
+ * This service implements the ToolbarService interface and provides methods for:
+ * - Configuring available product features
+ * - Retrieving forced feature overrides
+ * - Applying preset feature configurations
+ * - Exporting current forced state for presets
  *
+ * @example
  * ```typescript
- * // main.ts
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { AppComponent } from './app/app.component';
- * import { environment } from './environments/environment';
+ * import { ToolbarAppFeaturesService } from 'ngx-dev-toolbar';
+ *
+ * @Component({...})
+ * export class AppComponent implements OnInit {
+ *   private appFeaturesService = inject(ToolbarAppFeaturesService);
  *
- * async function bootstrap() {
- *   const appRef = await bootstrapApplication(AppComponent);
+ *   ngOnInit() {
+ *     // Configure available features based on current tier
+ *     const features: ToolbarAppFeature[] = [
+ *       { id: 'analytics', name: 'Analytics Dashboard', isEnabled: true, isForced: false },
+ *       { id: 'multi-user', name: 'Multi-User Support', isEnabled: false, isForced: false }
+ *     ];
+ *     this.appFeaturesService.setAvailableOptions(features);
  *
- *   // Only import and initialize toolbar in development
- *   if (!environment.production) {
- *     const { initToolbar } = await import('ngx-dev-toolbar');
- *     initToolbar(appRef);
+ *     // Subscribe to forced overrides
+ *     this.appFeaturesService.getForcedValues().subscribe(forcedFeatures => {
+ *       forcedFeatures.forEach(feature => {
+ *         // Apply forced feature state to application logic
+ *         this.applyFeatureState(feature.id, feature.isEnabled);
+ *       });
+ *     });
  *   }
  * }
- *
- * bootstrap();
  * ```
+ */
+class ToolbarAppFeaturesService {
+    constructor() {
+        this.internalService = inject(ToolbarInternalAppFeaturesService);
+    }
+    /**
+     * Set available app features for the application.
+     *
+     * Configures the list of product features that can be toggled in the dev toolbar.
+     * Features should represent product-level capabilities like license tiers,
+     * deployment configurations, or environment flags.
+     *
+     * @param features - Array of app features to display in the toolbar
+     * @throws Error if duplicate feature IDs or empty IDs are detected
+     *
+     * @example
+     * ```typescript
+     * const features: ToolbarAppFeature[] = [
+     *   {
+     *     id: 'advanced-analytics',
+     *     name: 'Advanced Analytics Dashboard',
+     *     description: 'Access premium reporting and data visualization',
+     *     isEnabled: false,  // Not available in current tier
+     *     isForced: false
+     *   },
+     *   {
+     *     id: 'multi-user-support',
+     *     name: 'Multi-User Collaboration',
+     *     description: 'Enable team features and user management',
+     *     isEnabled: true,   // Available in current tier
+     *     isForced: false
+     *   }
+     * ];
+     * this.appFeaturesService.setAvailableOptions(features);
+     * ```
+     */
+    setAvailableOptions(features) {
+        this.internalService.setAppFeatures(features);
+    }
+    /**
+     * Get observable stream of features that have forced overrides.
+     *
+     * Emits an array of features that have been forced via the dev toolbar.
+     * Only features with `isForced = true` are included in the emissions.
+     * Use this to react to feature override changes and update application behavior.
+     *
+     * @returns Observable that emits array of forced features whenever state changes
+     *
+     * @example
+     * ```typescript
+     * this.appFeaturesService.getForcedValues()
+     *   .pipe(takeUntilDestroyed())
+     *   .subscribe(forcedFeatures => {
+     *     forcedFeatures.forEach(feature => {
+     *       if (feature.isEnabled) {
+     *         this.enableFeature(feature.id);
+     *       } else {
+     *         this.disableFeature(feature.id);
+     *       }
+     *     });
+     *   });
+     * ```
+     */
+    getForcedValues() {
+        return this.internalService.getForcedFeatures();
+    }
+    /**
+     * Gets ALL app feature values with overrides already applied.
+     * Returns the complete set of features where overridden values replace base values.
+     * Each feature includes an `isForced` property indicating if it was overridden.
+     *
+     * This method simplifies integration by eliminating the need to manually merge
+     * base features with overrides using combineLatest.
+     *
+     * @returns Observable of all features with overrides applied
+     *
+     * @example
+     * ```typescript
+     * // Check if a feature is enabled with overrides applied
+     * this.appFeaturesService.getValues().pipe(
+     *   map(features => features.find(f => f.id === 'premium-analytics')),
+     *   map(feature => feature?.isEnabled ?? false)
+     * ).subscribe(isEnabled => {
+     *   if (isEnabled) {
+     *     // Enable premium analytics
+     *   }
+     * });
+     * ```
+     */
+    getValues() {
+        return this.internalService.features$;
+    }
+    /**
+     * Apply a preset feature configuration (for preset tool integration).
+     *
+     * Accepts a forced features state object and applies it to the current configuration.
+     * Invalid feature IDs (not in configured features) are filtered out with a warning.
+     *
+     * @param state - Forced features state containing enabled/disabled arrays
+     *
+     * @example
+     * ```typescript
+     * // Apply "Enterprise Tier" preset
+     * const enterprisePreset: ForcedAppFeaturesState = {
+     *   enabled: ['analytics', 'multi-user', 'white-label', 'sso'],
+     *   disabled: []
+     * };
+     * this.appFeaturesService.applyPresetFeatures(enterprisePreset);
+     *
+     * // Apply "Basic Tier" preset
+     * const basicPreset: ForcedAppFeaturesState = {
+     *   enabled: [],
+     *   disabled: ['analytics', 'multi-user', 'white-label', 'sso']
+     * };
+     * this.appFeaturesService.applyPresetFeatures(basicPreset);
+     * ```
+     */
+    applyPresetFeatures(state) {
+        this.internalService.applyForcedState(state);
+    }
+    /**
+     * Get current forced feature state as a snapshot (for preset export).
+     *
+     * Returns the current forced features state with enabled/disabled arrays.
+     * Useful for exporting toolbar state to save as a preset or for debugging.
+     * Returns a defensive copy - mutations will not affect internal state.
+     *
+     * @returns Current forced features state
+     *
+     * @example
+     * ```typescript
+     * // Export current toolbar state to save as preset
+     * const currentState = this.appFeaturesService.getCurrentForcedState();
+     * this.presetsService.savePreset('my-config', {
+     *   appFeatures: currentState,
+     *   // ... other tool states
+     * });
+     *
+     * console.log(currentState);
+     * // { enabled: ['analytics'], disabled: ['white-label'] }
+     * ```
+     */
+    getCurrentForcedState() {
+        return this.internalService.getCurrentForcedState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Provides all ngx-dev-toolbar services and automatically attaches the toolbar to the DOM.
  *
- * ## With Configuration
+ * This is the recommended way to set up the toolbar. Add it to your `app.config.ts`
+ * alongside other providers like `provideRouter()` and `provideHttpClient()`.
+ *
+ * ## Basic Usage
  *
  * ```typescript
- * if (!environment.production) {
- *   const { initToolbar } = await import('ngx-dev-toolbar');
- *   initToolbar(appRef, {
- *     config: {
- *       enabled: true,
+ * // app.config.ts
+ * import { ApplicationConfig, isDevMode } from '@angular/core';
+ * import { provideToolbar } from 'ngx-dev-toolbar';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideRouter(appRoutes),
+ *     provideToolbar({
+ *       enabled: isDevMode(),
  *       showFeatureFlagsTool: true,
  *       showPermissionsTool: true,
- *       showLanguageTool: false,
- *     }
- *   });
- * }
+ *     }),
+ *   ],
+ * };
  * ```
  *
- * ## Cleanup
- *
  * ```typescript
- * const { destroy } = initToolbar(appRef);
- *
- * // Later, to remove the toolbar
- * destroy();
+ * // main.ts
+ * bootstrapApplication(AppComponent, appConfig);
  * ```
  *
- * ## Benefits
+ * ## Using Services with Tokens
+ *
+ * ```typescript
+ * import { inject } from '@angular/core';
+ * import { TOOLBAR_FEATURE_FLAGS } from 'ngx-dev-toolbar';
+ * import type { ToolbarService, ToolbarFlag } from 'ngx-dev-toolbar';
  *
- * 1. **Zero template changes** - No `<ngt-toolbar>` needed in any component
- * 2. **Complete isolation** - Toolbar exists outside the app's component tree
- * 3. **Easy to add/remove** - Single line in main.ts
- * 4. **True tree-shaking** - Dynamic import means it's completely excluded from prod
+ * @Injectable({ providedIn: 'root' })
+ * export class FeatureFlagsService {
+ *   // Optional injection - null in production
+ *   private devToolbar = inject<ToolbarService<ToolbarFlag>>(
+ *     TOOLBAR_FEATURE_FLAGS,
+ *     { optional: true }
+ *   );
  *
- * ## Production Bundle Impact
+ *   constructor() {
+ *     // Safe to call - no-op if devToolbar is null
+ *     this.devToolbar?.setAvailableOptions(this.flags);
  *
- * When using dynamic imports with `initToolbar()`:
- * - Production bundle: 0 bytes from toolbar
- * - Development only: ~45KB (services + UI components)
+ *     // Subscribe to forced values only if toolbar exists
+ *     this.devToolbar?.getForcedValues().subscribe(forced => {
+ *       // Merge forced values
+ *     });
+ *   }
+ * }
+ * ```
  *
- * @param appRef - The ApplicationRef from bootstrapApplication()
- * @param options - Optional configuration for the toolbar
- * @returns Object with destroy() method for cleanup
+ * @param config - Optional configuration for toolbar behavior and tool visibility
+ * @returns Angular EnvironmentProviders for all toolbar services
  */
-function initToolbar(appRef, options) {
-    const injector = appRef.injector.get(EnvironmentInjector);
-    // Create the toolbar component dynamically
-    const componentRef = createComponent(ToolbarComponent, {
-        environmentInjector: injector,
-    });
-    // Apply config if provided
-    if (options?.config) {
-        componentRef.setInput('config', options.config);
-    }
-    // Append to document body
-    document.body.appendChild(componentRef.location.nativeElement);
-    // Register for change detection
-    appRef.attachView(componentRef.hostView);
-    return {
-        destroy: () => {
-            appRef.detachView(componentRef.hostView);
-            componentRef.destroy();
-            componentRef.location.nativeElement.remove();
+function provideToolbar(config) {
+    return makeEnvironmentProviders([
+        { provide: TOOLBAR_FEATURE_FLAGS, useClass: ToolbarFeatureFlagService },
+        { provide: TOOLBAR_PERMISSIONS, useClass: ToolbarPermissionsService },
+        { provide: TOOLBAR_LANGUAGE, useClass: ToolbarLanguageService },
+        { provide: TOOLBAR_APP_FEATURES, useClass: ToolbarAppFeaturesService },
+        { provide: TOOLBAR_CONFIG, useValue: config ?? {} },
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                const appRef = inject(ApplicationRef);
+                const injector = inject(EnvironmentInjector);
+                const toolbarConfig = inject(TOOLBAR_CONFIG);
+                const componentRef = createComponent(ToolbarComponent, {
+                    environmentInjector: injector,
+                });
+                componentRef.setInput('config', toolbarConfig);
+                document.body.appendChild(componentRef.location.nativeElement);
+                appRef.attachView(componentRef.hostView);
+            },
         },
-    };
+    ]);
 }
 
 class ToolbarStepDirective {
@@ -7118,5 +7060,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TOOLBAR_APP_FEATURES, TOOLBAR_FEATURE_FLAGS, TOOLBAR_LANGUAGE, TOOLBAR_PERMISSIONS, ToolbarAppFeaturesService, ToolbarAppFeaturesToolComponent, ToolbarButtonComponent, ToolbarCardComponent, ToolbarClickableCardComponent, ToolbarComponent, ToolbarFeatureFlagService, ToolbarIconComponent, ToolbarInputComponent, ToolbarLanguageService, ToolbarLinkButtonComponent, ToolbarListComponent, ToolbarListItemComponent, ToolbarPermissionsService, ToolbarPermissionsToolComponent, ToolbarPresetsService, ToolbarPresetsToolComponent, ToolbarSelectComponent, ToolbarStepDirective, ToolbarStepViewComponent, ToolbarToolComponent, initToolbar, provideToolbar };
+export { TOOLBAR_APP_FEATURES, TOOLBAR_CONFIG, TOOLBAR_FEATURE_FLAGS, TOOLBAR_LANGUAGE, TOOLBAR_PERMISSIONS, ToolbarAppFeaturesService, ToolbarAppFeaturesToolComponent, ToolbarButtonComponent, ToolbarCardComponent, ToolbarClickableCardComponent, ToolbarComponent, ToolbarFeatureFlagService, ToolbarIconComponent, ToolbarInputComponent, ToolbarLanguageService, ToolbarLinkButtonComponent, ToolbarListComponent, ToolbarListItemComponent, ToolbarPermissionsService, ToolbarPermissionsToolComponent, ToolbarPresetsService, ToolbarPresetsToolComponent, ToolbarSelectComponent, ToolbarStepDirective, ToolbarStepViewComponent, ToolbarToolComponent, provideToolbar };
 //# sourceMappingURL=ngx-dev-toolbar.mjs.map