ngx-dev-toolbar 4.0.0 → 4.2.0

package/fesm2022/ngx-dev-toolbar.mjs

@@ -1,6 +1,5 @@
 import * as i0 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 { InjectionToken, Injectable, inject, signal, computed, model, input, ChangeDetectionStrategy, Component, output, viewChild, contentChild, effect, HostListener, DestroyRef, ViewEncapsulation, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, ApplicationRef, EnvironmentInjector, createComponent, TemplateRef, Directive, contentChildren } from '@angular/core';
 import { CommonModule, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, combineLatest, map, firstValueFrom, fromEvent } from 'rxjs';
@@ -53,23 +52,6 @@ const TOOLBAR_FEATURE_FLAGS = new InjectionToken('TOOLBAR_FEATURE_FLAGS');
  * ```
  */
 const TOOLBAR_PERMISSIONS = new InjectionToken('TOOLBAR_PERMISSIONS');
-/**
- * InjectionToken for the Language service.
- *
- * Use this token for tree-shakeable injection of the language service.
- * When using dynamic imports, this token enables complete tree-shaking of
- * the toolbar in production builds.
- *
- * @example
- * ```typescript
- * // In your service
- * private devToolbar = inject(TOOLBAR_LANGUAGE, { optional: true });
- *
- * // Safe to call - no-op if toolbar is not provided
- * this.devToolbar?.setAvailableOptions(languages);
- * ```
- */
-const TOOLBAR_LANGUAGE = new InjectionToken('TOOLBAR_LANGUAGE');
 /**
  * InjectionToken for the App Features service.
  *
@@ -88,11 +70,88 @@ const TOOLBAR_LANGUAGE = new InjectionToken('TOOLBAR_LANGUAGE');
  */
 const TOOLBAR_APP_FEATURES = new InjectionToken('TOOLBAR_APP_FEATURES');
 
+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' }]
+        }] });
+
+const SETTINGS_KEY = 'settings';
 class ToolbarStateService {
     constructor() {
+        this.storageService = inject(ToolbarStorageService);
         // Initial state
         this.state = signal({
             isHidden: true,
+            isCompletelyHidden: false,
+            position: 'bottom',
             activeToolId: null,
             delay: 3000,
             error: null,
@@ -106,17 +165,12 @@ class ToolbarStateService {
         this.hasActiveTool = computed(() => this.state().activeToolId !== null);
         this.error = computed(() => this.state().error);
         this.theme = computed(() => this.state().theme);
-        /**
-         * The delay to hide the toolbar
-         */
         this.delay = computed(() => this.state().delay);
         this.config = computed(() => this.state().config);
-        /**
-         * Indicates if the toolbar is enabled based on config.
-         * When disabled, toolbar UI won't render and services won't return forced values.
-         * @default true
-         */
         this.isEnabled = computed(() => this.state().config.enabled ?? true);
+        this.position = computed(() => this.state().position);
+        this.isCompletelyHidden = computed(() => this.state().isCompletelyHidden);
+        this.loadPersistedState();
     }
     // State updates
     setVisibility(isVisible) {
@@ -171,6 +225,49 @@ class ToolbarStateService {
             ...state,
             config,
         }));
+        // If config specifies a position, it takes priority
+        if (config.position) {
+            this.setPosition(config.position);
+        }
+    }
+    setPosition(position) {
+        // Close any active tool so its overlay doesn't stay in the old position
+        this.setActiveTool(null);
+        this.state.update((state) => ({
+            ...state,
+            position,
+        }));
+        this.persistState();
+    }
+    toggleCompletelyHidden() {
+        this.state.update((state) => ({
+            ...state,
+            isCompletelyHidden: !state.isCompletelyHidden,
+        }));
+        this.persistState();
+    }
+    loadPersistedState() {
+        try {
+            const stored = this.storageService.get(SETTINGS_KEY);
+            if (stored) {
+                this.state.update((state) => ({
+                    ...state,
+                    position: stored.position ?? state.position,
+                    isCompletelyHidden: stored.isCompletelyHidden ?? state.isCompletelyHidden,
+                }));
+            }
+        }
+        catch {
+            // Corrupted localStorage data — use defaults
+        }
+    }
+    persistState() {
+        const current = this.storageService.get(SETTINGS_KEY) ?? {};
+        this.storageService.set(SETTINGS_KEY, {
+            ...current,
+            position: this.state().position,
+            isCompletelyHidden: this.state().isCompletelyHidden,
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStateService, providedIn: 'root' }); }
@@ -180,6 +277,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
+        }], ctorParameters: () => [] });
+
+class ToolbarInputComponent {
+    constructor() {
+        this.value = model.required();
+        this.type = input('text');
+        this.placeholder = input('');
+        this.ariaLabel = input('');
+        this.inputClass = input('input');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToolbarInputComponent, isStandalone: true, selector: "ndt-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    <input
+      [attr.aria-label]="ariaLabel()"
+      [type]="type()"
+      [class]="inputClass()"
+      [ngModel]="value()"
+      [placeholder]="placeholder()"
+      (ngModelChange)="value.set($event)"
+    />
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block}.input{width:100%;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:28px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-input', standalone: true, imports: [FormsModule], template: `
+    <input
+      [attr.aria-label]="ariaLabel()"
+      [type]="type()"
+      [class]="inputClass()"
+      [ngModel]="value()"
+      [placeholder]="placeholder()"
+      (ngModelChange)="value.set($event)"
+    />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block}.input{width:100%;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:28px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"] }]
+        }] });
+
+/**
+ * Container component for displaying lists of items with consistent scrolling,
+ * empty states, and layout across all tools.
+ *
+ * @example
+ * ```html
+ * <ndt-list
+ *   [hasItems]="items().length > 0"
+ *   [hasResults]="filteredItems().length > 0"
+ *   emptyMessage="No items found"
+ *   noResultsMessage="No items match your filter"
+ * >
+ *   @for (item of filteredItems(); track item.id) {
+ *     <ndt-list-item ... />
+ *   }
+ * </ndt-list>
+ * ```
+ */
+class ToolbarListComponent {
+    constructor() {
+        /**
+         * Whether the list has any items at all (before filtering).
+         * When false, shows the emptyMessage.
+         */
+        this.hasItems = input(true);
+        /**
+         * Whether the list has any results after filtering.
+         * When false (but hasItems is true), shows the noResultsMessage.
+         */
+        this.hasResults = input(true);
+        /**
+         * Message to display when there are no items at all.
+         * @example "No feature flags found"
+         */
+        this.emptyMessage = input('No items found');
+        /**
+         * Optional hint text to display below the empty message.
+         * @example "Call setAvailableOptions() to configure features"
+         */
+        this.emptyHint = input(undefined);
+        /**
+         * Message to display when items exist but none match the current filter.
+         * @example "No flags match your filter"
+         */
+        this.noResultsMessage = input('No results match your filter');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListComponent, isStandalone: true, selector: "ndt-list", inputs: { hasItems: { classPropertyName: "hasItems", publicName: "hasItems", isSignal: true, isRequired: false, transformFunction: null }, hasResults: { classPropertyName: "hasResults", publicName: "hasResults", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyHint: { classPropertyName: "emptyHint", publicName: "emptyHint", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (!hasItems()) {
+      <div class="empty-state">
+        <p>{{ emptyMessage() }}</p>
+        @if (emptyHint()) {
+          <p class="hint">{{ emptyHint() }}</p>
+        }
+      </div>
+    } @else if (!hasResults()) {
+      <div class="empty-state">
+        <p>{{ noResultsMessage() }}</p>
+      </div>
+    } @else {
+      <div class="list-container">
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:flex;flex-direction:column;flex:1;min-height:0}.empty-state{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);color:var(--ndt-text-muted)}.empty-state p{margin:0}.empty-state .hint{font-size:var(--ndt-font-size-xs)}.list-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.list-container::-webkit-scrollbar{width:8px;height:8px}.list-container::-webkit-scrollbar-track{background:transparent}.list-container::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.list-container::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-list', standalone: true, imports: [CommonModule], template: `
+    @if (!hasItems()) {
+      <div class="empty-state">
+        <p>{{ emptyMessage() }}</p>
+        @if (emptyHint()) {
+          <p class="hint">{{ emptyHint() }}</p>
+        }
+      </div>
+    } @else if (!hasResults()) {
+      <div class="empty-state">
+        <p>{{ noResultsMessage() }}</p>
+      </div>
+    } @else {
+      <div class="list-container">
+        <ng-content />
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:flex;flex-direction:column;flex:1;min-height:0}.empty-state{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);color:var(--ndt-text-muted)}.empty-state p{margin:0}.empty-state .hint{font-size:var(--ndt-font-size-xs)}.list-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.list-container::-webkit-scrollbar{width:8px;height:8px}.list-container::-webkit-scrollbar-track{background:transparent}.list-container::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.list-container::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}\n"] }]
         }] });
 
 class AngularIconComponent {
@@ -798,6 +1017,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
+class GlobeIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GlobeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: GlobeIconComponent, isStandalone: true, selector: "ndt-globe-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 24 24"
+    >
+      <path
+        d="M1 16V8h2v8H1Zm3 0V8h2l2.225 4.45L8 12.5V8h2v8H8l-2.225-4.45L6 11.5V16H4Zm9 0v-6h-2V8h6v2h-2v6h-2Zm5 0V8h2v6h3v2h-5Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GlobeIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-globe-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 24 24"
+    >
+      <path
+        d="M1 16V8h2v8H1Zm3 0V8h2l2.225 4.45L8 12.5V8h2v8H8l-2.225-4.45L6 11.5V16H4Zm9 0v-6h-2V8h6v2h-2v6h-2Zm5 0V8h2v6h3v2h-5Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
 class ImportIconComponent {
     constructor() {
         this.fill = input('#FFFF');
@@ -1060,29 +1320,78 @@ class NetworkIconComponent {
     constructor() {
         this.fill = input('#FFFF');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NetworkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: NetworkIconComponent, isStandalone: true, selector: "ndt-network-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NetworkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: NetworkIconComponent, isStandalone: true, selector: "ndt-network-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="M152,40V72a8,8,0,0,1-8,8H112a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h32A8,8,0,0,1,152,40ZM80,168H48a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8H80a8,8,0,0,0,8-8V176A8,8,0,0,0,80,168Zm128,0H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V176A8,8,0,0,0,208,168Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M232,112H136V88h8a16,16,0,0,0,16-16V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40V72a16,16,0,0,0,16,16h8v24H24a8,8,0,0,0,0,16H56v32H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H72V128H184v32h-8a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V128h32a8,8,0,0,0,0-16ZM112,40h32V72H112ZM80,208H48V176H80Zm128,0H176V176h32Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NetworkIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-network-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="M152,40V72a8,8,0,0,1-8,8H112a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h32A8,8,0,0,1,152,40ZM80,168H48a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8H80a8,8,0,0,0,8-8V176A8,8,0,0,0,80,168Zm128,0H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V176A8,8,0,0,0,208,168Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M232,112H136V88h8a16,16,0,0,0,16-16V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40V72a16,16,0,0,0,16,16h8v24H24a8,8,0,0,0,0,16H56v32H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H72V128H184v32h-8a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V128h32a8,8,0,0,0,0-16ZM112,40h32V72H112ZM80,208H48V176H80Zm128,0H176V176h32Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class PinIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PinIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: PinIconComponent, isStandalone: true, selector: "ndt-pin-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"
+      viewBox="0 0 24 24"
     >
       <path
-        d="M152,40V72a8,8,0,0,1-8,8H112a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h32A8,8,0,0,1,152,40ZM80,168H48a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8H80a8,8,0,0,0,8-8V176A8,8,0,0,0,80,168Zm128,0H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V176A8,8,0,0,0,208,168Z"
+        d="M14 12.41V5h1V4H8v1h1v7.41l-2 2V15h9v-.59l-2-2"
         opacity="0.2"
       ></path>
       <path
-        d="M232,112H136V88h8a16,16,0,0,0,16-16V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40V72a16,16,0,0,0,16,16h8v24H24a8,8,0,0,0,0,16H56v32H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H72V128H184v32h-8a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V128h32a8,8,0,0,0,0-16ZM112,40h32V72H112ZM80,208H48V176H80Zm128,0H176V176h32Z"
+        d="M17 14v2h-5v4.5l-.5 1.5l-.5-1.5V16H6v-2l2-2V6H7V3h9v3h-1v6l2 2Z"
       ></path>
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NetworkIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PinIconComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ndt-network-icon',
+                    selector: 'ndt-pin-icon',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
@@ -1091,14 +1400,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       xmlns="http://www.w3.org/2000/svg"
       width="24"
       height="24"
-      viewBox="0 0 256 256"
+      viewBox="0 0 24 24"
     >
       <path
-        d="M152,40V72a8,8,0,0,1-8,8H112a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h32A8,8,0,0,1,152,40ZM80,168H48a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8H80a8,8,0,0,0,8-8V176A8,8,0,0,0,80,168Zm128,0H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V176A8,8,0,0,0,208,168Z"
+        d="M14 12.41V5h1V4H8v1h1v7.41l-2 2V15h9v-.59l-2-2"
         opacity="0.2"
       ></path>
       <path
-        d="M232,112H136V88h8a16,16,0,0,0,16-16V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40V72a16,16,0,0,0,16,16h8v24H24a8,8,0,0,0,0,16H56v32H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H72V128H184v32h-8a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V128h32a8,8,0,0,0,0-16ZM112,40h32V72H112ZM80,208H48V176H80Zm128,0H176V176h32Z"
+        d="M17 14v2h-5v4.5l-.5 1.5l-.5-1.5V16H6v-2l2-2V6H7V3h9v3h-1v6l2 2Z"
       ></path>
     </svg>
   `,
@@ -1562,6 +1871,8 @@ class ToolbarIconComponent {
     <ndt-gear-icon [fill]="fill()" />
     } @case ('git-branch') {
     <ndt-git-branch-icon [fill]="fill()" />
+    } @case ('globe') {
+    <ndt-globe-icon [fill]="fill()" />
     } @case ('import') {
     <ndt-import-icon [fill]="fill()" />
     } @case ('layout') {
@@ -1574,6 +1885,8 @@ class ToolbarIconComponent {
     <ndt-lock-icon [fill]="fill()" />
     } @case ('network') {
     <ndt-network-icon [fill]="fill()" />
+    } @case ('pin') {
+    <ndt-pin-icon [fill]="fill()" />
     } @case ('puzzle') {
     <ndt-puzzle-icon [fill]="fill()" />
     } @case ('refresh') {
@@ -1597,7 +1910,7 @@ class ToolbarIconComponent {
     } @case ('trash') {
     <ndt-trash-icon [fill]="fill()" />
     } }
-  `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ndt-angular-icon" }, { kind: "component", type: BoltIconComponent, selector: "ndt-bolt-icon", inputs: ["fill"] }, { kind: "component", type: BugIconComponent, selector: "ndt-bug-icon", inputs: ["fill"] }, { kind: "component", type: CodeIconComponent, selector: "ndt-code-icon", inputs: ["fill"] }, { kind: "component", type: DatabaseIconComponent, selector: "ndt-database-icon", inputs: ["fill"] }, { kind: "component", type: DocsIconComponent, selector: "ndt-docs-icon", inputs: ["fill"] }, { kind: "component", type: DiscordIconComponent, selector: "ndt-discord-icon", inputs: ["fill"] }, { kind: "component", type: EditIconComponent, selector: "ndt-edit-icon", inputs: ["fill"] }, { kind: "component", type: ExportIconComponent, selector: "ndt-export-icon", inputs: ["fill"] }, { kind: "component", type: FilterIconComponent, selector: "ndt-filter-icon", inputs: ["fill"] }, { kind: "component", type: GaugeIconComponent, selector: "ndt-gauge-icon", inputs: ["fill"] }, { kind: "component", type: GearIconComponent, selector: "ndt-gear-icon", inputs: ["fill"] }, { kind: "component", type: GitBranchIconComponent, selector: "ndt-git-branch-icon", inputs: ["fill"] }, { kind: "component", type: ImportIconComponent, selector: "ndt-import-icon", inputs: ["fill"] }, { kind: "component", type: LayoutIconComponent, selector: "ndt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightbulbIconComponent, selector: "ndt-lightbulb-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ndt-lighting-icon", inputs: ["fill"] }, { kind: "component", type: LockIconComponent, selector: "ndt-lock-icon", inputs: ["fill"] }, { kind: "component", type: NetworkIconComponent, selector: "ndt-network-icon", inputs: ["fill"] }, { kind: "component", type: PuzzleIconComponent, selector: "ndt-puzzle-icon", inputs: ["fill"] }, { kind: "component", type: RefreshIconComponent, selector: "ndt-refresh-icon", inputs: ["fill"] }, { kind: "component", type: StarIconComponent, selector: "ndt-star-icon", inputs: ["fill"] }, { kind: "component", type: TerminalIconComponent, selector: "ndt-terminal-icon", inputs: ["fill"] }, { kind: "component", type: ToggleLeftIconComponent, selector: "ndt-toggle-left-icon", inputs: ["fill"] }, { kind: "component", type: UsersIconComponent, selector: "ndt-users-icon", inputs: ["fill"] }, { kind: "component", type: SunIconComponent, selector: "ndt-sun-icon", inputs: ["fill"] }, { kind: "component", type: MoonIconComponent, selector: "ndt-moon-icon", inputs: ["fill"] }, { kind: "component", type: TranslateIconComponent, selector: "ndt-translate-icon", inputs: ["fill"] }, { kind: "component", type: TrashIconComponent, selector: "ndt-trash-icon", inputs: ["fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ndt-angular-icon" }, { kind: "component", type: BoltIconComponent, selector: "ndt-bolt-icon", inputs: ["fill"] }, { kind: "component", type: BugIconComponent, selector: "ndt-bug-icon", inputs: ["fill"] }, { kind: "component", type: CodeIconComponent, selector: "ndt-code-icon", inputs: ["fill"] }, { kind: "component", type: DatabaseIconComponent, selector: "ndt-database-icon", inputs: ["fill"] }, { kind: "component", type: DocsIconComponent, selector: "ndt-docs-icon", inputs: ["fill"] }, { kind: "component", type: DiscordIconComponent, selector: "ndt-discord-icon", inputs: ["fill"] }, { kind: "component", type: EditIconComponent, selector: "ndt-edit-icon", inputs: ["fill"] }, { kind: "component", type: ExportIconComponent, selector: "ndt-export-icon", inputs: ["fill"] }, { kind: "component", type: FilterIconComponent, selector: "ndt-filter-icon", inputs: ["fill"] }, { kind: "component", type: GaugeIconComponent, selector: "ndt-gauge-icon", inputs: ["fill"] }, { kind: "component", type: GearIconComponent, selector: "ndt-gear-icon", inputs: ["fill"] }, { kind: "component", type: GitBranchIconComponent, selector: "ndt-git-branch-icon", inputs: ["fill"] }, { kind: "component", type: GlobeIconComponent, selector: "ndt-globe-icon", inputs: ["fill"] }, { kind: "component", type: ImportIconComponent, selector: "ndt-import-icon", inputs: ["fill"] }, { kind: "component", type: LayoutIconComponent, selector: "ndt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightbulbIconComponent, selector: "ndt-lightbulb-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ndt-lighting-icon", inputs: ["fill"] }, { kind: "component", type: LockIconComponent, selector: "ndt-lock-icon", inputs: ["fill"] }, { kind: "component", type: NetworkIconComponent, selector: "ndt-network-icon", inputs: ["fill"] }, { kind: "component", type: PinIconComponent, selector: "ndt-pin-icon", inputs: ["fill"] }, { kind: "component", type: PuzzleIconComponent, selector: "ndt-puzzle-icon", inputs: ["fill"] }, { kind: "component", type: RefreshIconComponent, selector: "ndt-refresh-icon", inputs: ["fill"] }, { kind: "component", type: StarIconComponent, selector: "ndt-star-icon", inputs: ["fill"] }, { kind: "component", type: TerminalIconComponent, selector: "ndt-terminal-icon", inputs: ["fill"] }, { kind: "component", type: ToggleLeftIconComponent, selector: "ndt-toggle-left-icon", inputs: ["fill"] }, { kind: "component", type: UsersIconComponent, selector: "ndt-users-icon", inputs: ["fill"] }, { kind: "component", type: SunIconComponent, selector: "ndt-sun-icon", inputs: ["fill"] }, { kind: "component", type: MoonIconComponent, selector: "ndt-moon-icon", inputs: ["fill"] }, { kind: "component", type: TranslateIconComponent, selector: "ndt-translate-icon", inputs: ["fill"] }, { kind: "component", type: TrashIconComponent, selector: "ndt-trash-icon", inputs: ["fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarIconComponent, decorators: [{
             type: Component,
@@ -1618,12 +1931,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         GaugeIconComponent,
                         GearIconComponent,
                         GitBranchIconComponent,
+                        GlobeIconComponent,
                         ImportIconComponent,
                         LayoutIconComponent,
                         LightbulbIconComponent,
                         LightingIconComponent,
                         LockIconComponent,
                         NetworkIconComponent,
+                        PinIconComponent,
                         PuzzleIconComponent,
                         RefreshIconComponent,
                         StarIconComponent,
@@ -1661,6 +1976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
     <ndt-gear-icon [fill]="fill()" />
     } @case ('git-branch') {
     <ndt-git-branch-icon [fill]="fill()" />
+    } @case ('globe') {
+    <ndt-globe-icon [fill]="fill()" />
     } @case ('import') {
     <ndt-import-icon [fill]="fill()" />
     } @case ('layout') {
@@ -1673,6 +1990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
     <ndt-lock-icon [fill]="fill()" />
     } @case ('network') {
     <ndt-network-icon [fill]="fill()" />
+    } @case ('pin') {
+    <ndt-pin-icon [fill]="fill()" />
     } @case ('puzzle') {
     <ndt-puzzle-icon [fill]="fill()" />
     } @case ('refresh') {
@@ -1700,126 +2019,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
-class ToolbarInputComponent {
-    constructor() {
-        this.value = model.required();
-        this.type = input('text');
-        this.placeholder = input('');
-        this.ariaLabel = input('');
-        this.inputClass = input('input');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToolbarInputComponent, isStandalone: true, selector: "ndt-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
-    <input
-      [attr.aria-label]="ariaLabel()"
-      [type]="type()"
-      [class]="inputClass()"
-      [ngModel]="value()"
-      [placeholder]="placeholder()"
-      (ngModelChange)="value.set($event)"
-    />
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:36px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ndt-input', standalone: true, imports: [FormsModule], template: `
-    <input
-      [attr.aria-label]="ariaLabel()"
-      [type]="type()"
-      [class]="inputClass()"
-      [ngModel]="value()"
-      [placeholder]="placeholder()"
-      (ngModelChange)="value.set($event)"
-    />
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:36px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"] }]
-        }] });
-
-/**
- * Container component for displaying lists of items with consistent scrolling,
- * empty states, and layout across all tools.
- *
- * @example
- * ```html
- * <ndt-list
- *   [hasItems]="items().length > 0"
- *   [hasResults]="filteredItems().length > 0"
- *   emptyMessage="No items found"
- *   noResultsMessage="No items match your filter"
- * >
- *   @for (item of filteredItems(); track item.id) {
- *     <ndt-list-item ... />
- *   }
- * </ndt-list>
- * ```
- */
-class ToolbarListComponent {
+class ToolbarIconButtonComponent {
     constructor() {
-        /**
-         * Whether the list has any items at all (before filtering).
-         * When false, shows the emptyMessage.
-         */
-        this.hasItems = input(true);
-        /**
-         * Whether the list has any results after filtering.
-         * When false (but hasItems is true), shows the noResultsMessage.
-         */
-        this.hasResults = input(true);
-        /**
-         * Message to display when there are no items at all.
-         * @example "No feature flags found"
-         */
-        this.emptyMessage = input('No items found');
-        /**
-         * Optional hint text to display below the empty message.
-         * @example "Call setAvailableOptions() to configure features"
-         */
-        this.emptyHint = input(undefined);
-        /**
-         * Message to display when items exist but none match the current filter.
-         * @example "No flags match your filter"
-         */
-        this.noResultsMessage = input('No results match your filter');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListComponent, isStandalone: true, selector: "ndt-list", inputs: { hasItems: { classPropertyName: "hasItems", publicName: "hasItems", isSignal: true, isRequired: false, transformFunction: null }, hasResults: { classPropertyName: "hasResults", publicName: "hasResults", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyHint: { classPropertyName: "emptyHint", publicName: "emptyHint", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (!hasItems()) {
-      <div class="empty-state">
-        <p>{{ emptyMessage() }}</p>
-        @if (emptyHint()) {
-          <p class="hint">{{ emptyHint() }}</p>
-        }
-      </div>
-    } @else if (!hasResults()) {
-      <div class="empty-state">
-        <p>{{ noResultsMessage() }}</p>
-      </div>
-    } @else {
-      <div class="list-container">
-        <ng-content />
-      </div>
+        this.icon = input();
+        this.tooltip = input();
+        this.ariaLabel = input();
+        this.size = input('sm');
+        this.variant = input('ghost');
+        this.isHovered = signal(false);
+        this.isTooltipVisible = computed(() => !!this.tooltip() && this.isHovered());
     }
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:flex;flex-direction:column;flex:1;min-height:0}.empty-state{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty-state p{margin:0}.empty-state .hint{font-size:var(--ndt-font-size-xs)}.list-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.list-container::-webkit-scrollbar{width:8px;height:8px}.list-container::-webkit-scrollbar-track{background:transparent}.list-container::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.list-container::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarIconButtonComponent, isStandalone: true, selector: "ndt-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      class="icon-button"
+      [class.icon-button--sm]="size() === 'sm'"
+      [class.icon-button--md]="size() === 'md'"
+      [class.icon-button--outlined]="variant() === 'outlined'"
+      [attr.aria-label]="ariaLabel() || tooltip()"
+      (mouseenter)="isHovered.set(true)"
+      (mouseleave)="isHovered.set(false)"
+    >
+      @if (isTooltipVisible()) {
+        <span class="tooltip" [class.tooltip--visible]="isHovered()">
+          {{ tooltip() }}
+        </span>
+      }
+      @if (icon()) {
+        <ndt-icon [name]="icon()!" />
+      }
+      <ng-content />
+    </button>
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:inline-flex}.icon-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:0;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out,border-color .15s ease-out;line-height:0;flex-shrink:0;position:relative}.icon-button--sm{width:22px;height:22px}.icon-button--sm ::ng-deep svg{width:12px;height:12px;display:block}.icon-button--md{width:28px;height:28px}.icon-button--md ::ng-deep svg{width:16px;height:16px;display:block}.icon-button--outlined{border:1px solid var(--ndt-border-primary)}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:3px 8px;border-radius:var(--ndt-border-radius-small);font-size:10px;font-weight:500;line-height:normal;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:9999;box-shadow:var(--ndt-shadow-tooltip)}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ndt-tooltip-bg)}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndt-list', standalone: true, imports: [CommonModule], template: `
-    @if (!hasItems()) {
-      <div class="empty-state">
-        <p>{{ emptyMessage() }}</p>
-        @if (emptyHint()) {
-          <p class="hint">{{ emptyHint() }}</p>
-        }
-      </div>
-    } @else if (!hasResults()) {
-      <div class="empty-state">
-        <p>{{ noResultsMessage() }}</p>
-      </div>
-    } @else {
-      <div class="list-container">
-        <ng-content />
-      </div>
-    }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:flex;flex-direction:column;flex:1;min-height:0}.empty-state{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty-state p{margin:0}.empty-state .hint{font-size:var(--ndt-font-size-xs)}.list-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.list-container::-webkit-scrollbar{width:8px;height:8px}.list-container::-webkit-scrollbar-track{background:transparent}.list-container::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.list-container::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}\n"] }]
+            args: [{ selector: 'ndt-icon-button', standalone: true, imports: [ToolbarIconComponent], template: `
+    <button
+      class="icon-button"
+      [class.icon-button--sm]="size() === 'sm'"
+      [class.icon-button--md]="size() === 'md'"
+      [class.icon-button--outlined]="variant() === 'outlined'"
+      [attr.aria-label]="ariaLabel() || tooltip()"
+      (mouseenter)="isHovered.set(true)"
+      (mouseleave)="isHovered.set(false)"
+    >
+      @if (isTooltipVisible()) {
+        <span class="tooltip" [class.tooltip--visible]="isHovered()">
+          {{ tooltip() }}
+        </span>
+      }
+      @if (icon()) {
+        <ndt-icon [name]="icon()!" />
+      }
+      <ng-content />
+    </button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:inline-flex}.icon-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:0;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out,border-color .15s ease-out;line-height:0;flex-shrink:0;position:relative}.icon-button--sm{width:22px;height:22px}.icon-button--sm ::ng-deep svg{width:12px;height:12px;display:block}.icon-button--md{width:28px;height:28px}.icon-button--md ::ng-deep svg{width:16px;height:16px;display:block}.icon-button--outlined{border:1px solid var(--ndt-border-primary)}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:3px 8px;border-radius:var(--ndt-border-radius-small);font-size:10px;font-weight:500;line-height:normal;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:9999;box-shadow:var(--ndt-shadow-tooltip)}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ndt-tooltip-bg)}\n"] }]
         }] });
 
 /**
@@ -1863,6 +2118,28 @@ class ToolbarListItemComponent {
          * Original value before forcing (only present when isForced is true)
          */
         this.originalValue = input(undefined);
+        /**
+         * Whether to show the "Apply to source" button
+         */
+        this.showApply = input(false);
+        /**
+         * Current state of the apply operation
+         */
+        this.applyState = input('idle');
+        /**
+         * Whether this item is pinned to the top of the list
+         */
+        this.isPinned = input(false);
+        /**
+         * Emits when the user clicks the pin/unpin button
+         */
+        this.pinToggle = output();
+        /**
+         * Emits when the user clicks "Apply to source"
+         */
+        this.applyToSource = output();
+        this.pinIcon = computed(() => 'pin');
+        this.pinAriaLabel = computed(() => this.isPinned() ? 'Unpin item' : 'Pin item');
         /**
          * Value to display in the dot indicator.
          * For forced items: shows originalValue
@@ -1887,8 +2164,16 @@ class ToolbarListItemComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListItemComponent, isStandalone: true, selector: "ndt-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, isForced: { classPropertyName: "isForced", publicName: "isForced", isSignal: true, isRequired: false, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: true, transformFunction: null }, originalValue: { classPropertyName: "originalValue", publicName: "originalValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarListItemComponent, isStandalone: true, selector: "ndt-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, isForced: { classPropertyName: "isForced", publicName: "isForced", isSignal: true, isRequired: false, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: true, transformFunction: null }, originalValue: { classPropertyName: "originalValue", publicName: "originalValue", isSignal: true, isRequired: false, transformFunction: null }, showApply: { classPropertyName: "showApply", publicName: "showApply", isSignal: true, isRequired: false, transformFunction: null }, applyState: { classPropertyName: "applyState", publicName: "applyState", isSignal: true, isRequired: false, transformFunction: null }, isPinned: { classPropertyName: "isPinned", publicName: "isPinned", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pinToggle: "pinToggle", applyToSource: "applyToSource" }, ngImport: i0, template: `
     <div class="list-item" [class.list-item--forced]="isForced()">
+      <ndt-icon-button
+        [icon]="pinIcon()"
+        [ariaLabel]="pinAriaLabel()"
+        variant="ghost"
+        class="pin-button"
+        [class.pin-button--pinned]="isPinned()"
+        (click)="pinToggle.emit(); $event.stopPropagation()"
+      />
       <div class="info">
         <h3>{{ title() }}</h3>
         @if (description()) {
@@ -1904,15 +2189,47 @@ class ToolbarListItemComponent {
         }
       </div>
       <div class="actions">
+        @if (showApply() && isForced()) {
+          <ndt-icon-button
+            [icon]="applyState() === 'idle' ? 'export' : undefined"
+            tooltip="Apply to source"
+            variant="outlined"
+            class="apply-button"
+            [class.apply-button--loading]="applyState() === 'loading'"
+            [class.apply-button--success]="applyState() === 'success'"
+            [class.apply-button--error]="applyState() === 'error'"
+            (click)="applyToSource.emit()"
+          >
+            @switch (applyState()) {
+              @case ('loading') {
+                <span class="apply-spinner"></span>
+              }
+              @case ('success') {
+                <span class="apply-icon">✓</span>
+              }
+              @case ('error') {
+                <span class="apply-icon">✕</span>
+              }
+            }
+          </ndt-icon-button>
+        }
         <ng-content />
       </div>
     </div>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.list-item{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);transition:background-color .2s ease;position:relative;z-index:1;flex-shrink:0}.list-item.list-item--forced{background:#3b82f60d}.list-item .info{flex:0 0 65%}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.list-item .info .description-wrapper{display:flex;align-items:center;gap:8px;margin-top:4px}.list-item .info .dot-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;cursor:help;transition:all .2s ease}.list-item .info .dot-indicator.dot-indicator--on{background:#22c55e;box-shadow:0 0 0 2px #22c55e33}.list-item .info .dot-indicator.dot-indicator--off{background:#ef4444;box-shadow:0 0 0 2px #ef444433}.list-item .info p{margin:0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);flex:1}.list-item .actions{flex:0 0 35%;display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.list-item{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);transition:background-color .2s ease;position:relative;z-index:1;flex-shrink:0;overflow:visible}.list-item.list-item--forced{background:#3b82f60d}.list-item .info{flex:1 1 auto;min-width:0}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-xs);font-weight:500;color:var(--ndt-text-primary)}.list-item .info .description-wrapper{display:flex;align-items:flex-start;gap:4px;margin-top:1px}.list-item .info .dot-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;cursor:help;transition:all .2s ease;margin-top:5px}.list-item .info .dot-indicator.dot-indicator--on{background:#22c55e;box-shadow:0 0 0 2px #22c55e33}.list-item .info .dot-indicator.dot-indicator--off{background:#ef4444;box-shadow:0 0 0 2px #ef444433}.list-item .info p{margin:0;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.list-item .actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;overflow:visible}.pin-button{flex-shrink:0;align-self:flex-start;opacity:0;transition:opacity .2s ease}.list-item:hover .pin-button{opacity:.4}.list-item:hover .pin-button:hover{opacity:.7}.pin-button--pinned{opacity:1}.pin-button--pinned ::ng-deep .icon-button{opacity:1;color:var(--ndt-text-primary)}.apply-button--loading ::ng-deep .icon-button{opacity:1;animation:apply-pulse 1s ease-in-out infinite}.apply-button--success ::ng-deep .icon-button{opacity:1;color:#22c55e;border-color:#22c55e4d;background:#22c55e0d}.apply-button--error ::ng-deep .icon-button{opacity:1;color:#ef4444;border-color:#ef44444d;background:#ef44440d}.apply-icon{font-size:10px;line-height:1}.apply-spinner{display:block;width:10px;height:10px;border:1.5px solid var(--ndt-border-primary);border-top-color:var(--ndt-text-primary);border-radius:50%;animation:apply-spin .6s linear infinite}@keyframes apply-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes apply-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarIconButtonComponent, selector: "ndt-icon-button", inputs: ["icon", "tooltip", "ariaLabel", "size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndt-list-item', standalone: true, imports: [CommonModule], template: `
+            args: [{ selector: 'ndt-list-item', standalone: true, imports: [CommonModule, ToolbarIconComponent, ToolbarIconButtonComponent], template: `
     <div class="list-item" [class.list-item--forced]="isForced()">
+      <ndt-icon-button
+        [icon]="pinIcon()"
+        [ariaLabel]="pinAriaLabel()"
+        variant="ghost"
+        class="pin-button"
+        [class.pin-button--pinned]="isPinned()"
+        (click)="pinToggle.emit(); $event.stopPropagation()"
+      />
       <div class="info">
         <h3>{{ title() }}</h3>
         @if (description()) {
@@ -1928,10 +2245,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }
       </div>
       <div class="actions">
+        @if (showApply() && isForced()) {
+          <ndt-icon-button
+            [icon]="applyState() === 'idle' ? 'export' : undefined"
+            tooltip="Apply to source"
+            variant="outlined"
+            class="apply-button"
+            [class.apply-button--loading]="applyState() === 'loading'"
+            [class.apply-button--success]="applyState() === 'success'"
+            [class.apply-button--error]="applyState() === 'error'"
+            (click)="applyToSource.emit()"
+          >
+            @switch (applyState()) {
+              @case ('loading') {
+                <span class="apply-spinner"></span>
+              }
+              @case ('success') {
+                <span class="apply-icon">✓</span>
+              }
+              @case ('error') {
+                <span class="apply-icon">✕</span>
+              }
+            }
+          </ndt-icon-button>
+        }
         <ng-content />
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.list-item{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);transition:background-color .2s ease;position:relative;z-index:1;flex-shrink:0}.list-item.list-item--forced{background:#3b82f60d}.list-item .info{flex:0 0 65%}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.list-item .info .description-wrapper{display:flex;align-items:center;gap:8px;margin-top:4px}.list-item .info .dot-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;cursor:help;transition:all .2s ease}.list-item .info .dot-indicator.dot-indicator--on{background:#22c55e;box-shadow:0 0 0 2px #22c55e33}.list-item .info .dot-indicator.dot-indicator--off{background:#ef4444;box-shadow:0 0 0 2px #ef444433}.list-item .info p{margin:0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);flex:1}.list-item .actions{flex:0 0 35%;display:flex;align-items:flex-start}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.list-item{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);transition:background-color .2s ease;position:relative;z-index:1;flex-shrink:0;overflow:visible}.list-item.list-item--forced{background:#3b82f60d}.list-item .info{flex:1 1 auto;min-width:0}.list-item .info h3{margin:0;font-size:var(--ndt-font-size-xs);font-weight:500;color:var(--ndt-text-primary)}.list-item .info .description-wrapper{display:flex;align-items:flex-start;gap:4px;margin-top:1px}.list-item .info .dot-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;cursor:help;transition:all .2s ease;margin-top:5px}.list-item .info .dot-indicator.dot-indicator--on{background:#22c55e;box-shadow:0 0 0 2px #22c55e33}.list-item .info .dot-indicator.dot-indicator--off{background:#ef4444;box-shadow:0 0 0 2px #ef444433}.list-item .info p{margin:0;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.list-item .actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;overflow:visible}.pin-button{flex-shrink:0;align-self:flex-start;opacity:0;transition:opacity .2s ease}.list-item:hover .pin-button{opacity:.4}.list-item:hover .pin-button:hover{opacity:.7}.pin-button--pinned{opacity:1}.pin-button--pinned ::ng-deep .icon-button{opacity:1;color:var(--ndt-text-primary)}.apply-button--loading ::ng-deep .icon-button{opacity:1;animation:apply-pulse 1s ease-in-out infinite}.apply-button--success ::ng-deep .icon-button{opacity:1;color:#22c55e;border-color:#22c55e4d;background:#22c55e0d}.apply-button--error ::ng-deep .icon-button{opacity:1;color:#ef4444;border-color:#ef44444d;background:#ef44440d}.apply-icon{font-size:10px;line-height:1}.apply-spinner{display:block;width:10px;height:10px;border:1.5px solid var(--ndt-border-primary);border-top-color:var(--ndt-text-primary);border-radius:50%;animation:apply-spin .6s linear infinite}@keyframes apply-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes apply-spin{to{transform:rotate(360deg)}}\n"] }]
         }] });
 
 class ToolbarSelectComponent {
@@ -2035,7 +2376,7 @@ class ToolbarSelectComponent {
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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\"}.ndt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:36px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ndt-select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 1px 3px #0000001a}.ndt-select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.ndt-select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.open .select__arrow{transform:rotate(180deg)}.ndt-select.placeholder{color:var(--ndt-text-muted)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ndt-spacing-sm);min-width:0;display:flex;align-items:center}.ndt-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}.ndt-select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-sm) 0;border:2px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ndt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ndt-select-menu::-webkit-scrollbar-track{background:transparent}.ndt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.ndt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ndt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md) var(--ndt-spacing-sm) var(--ndt-spacing-lg);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-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(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:var(--ndt-spacing-xs)}.select-menu-item:last-child{margin-bottom:var(--ndt-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{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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\"}.ndt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:28px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ndt-select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 1px 3px #0000001a}.ndt-select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-xs);height:22px}.ndt-select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.open .select__arrow{transform:rotate(180deg)}.ndt-select.placeholder{color:var(--ndt-text-muted)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:4px;min-width:0;display:flex;align-items:center}.ndt-select__arrow{width:12px;height:12px;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}.ndt-select-menu{display:inline-flex;flex-direction:column;min-width:120px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-xs) 0;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ndt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ndt-select-menu::-webkit-scrollbar-track{background:transparent}.ndt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.ndt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ndt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm) var(--ndt-spacing-xs) var(--ndt-spacing-md);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-xs);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:400;line-height:1.3;transition:background-color .15s ease}.select-menu-item:hover{background-color:#0000000f}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:4px;width:3px;height:calc(100% - 8px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:0}.select-menu-item:last-child{margin-bottom:0}.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,
@@ -2090,26 +2431,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }
       </div>
     </ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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\"}.ndt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:36px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ndt-select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 1px 3px #0000001a}.ndt-select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.ndt-select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.open .select__arrow{transform:rotate(180deg)}.ndt-select.placeholder{color:var(--ndt-text-muted)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ndt-spacing-sm);min-width:0;display:flex;align-items:center}.ndt-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}.ndt-select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-sm) 0;border:2px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ndt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ndt-select-menu::-webkit-scrollbar-track{background:transparent}.ndt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.ndt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ndt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md) var(--ndt-spacing-sm) var(--ndt-spacing-lg);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-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(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:var(--ndt-spacing-xs)}.select-menu-item:last-child{margin-bottom:var(--ndt-spacing-xs)}.select-overlay{backdrop-filter:blur(8px)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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\"}.ndt-select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:28px;box-sizing:border-box;box-shadow:0 1px 2px #0000000d}.ndt-select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 1px 3px #0000001a}.ndt-select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-xs);height:22px}.ndt-select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2),0 1px 3px #0000001a}.ndt-select.open .select__arrow{transform:rotate(180deg)}.ndt-select.placeholder{color:var(--ndt-text-muted)}.ndt-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:4px;min-width:0;display:flex;align-items:center}.ndt-select__arrow{width:12px;height:12px;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}.ndt-select-menu{display:inline-flex;flex-direction:column;min-width:120px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-xs) 0;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;backdrop-filter:blur(8px);z-index:1000}.ndt-select-menu::-webkit-scrollbar{width:8px;height:8px}.ndt-select-menu::-webkit-scrollbar-track{background:transparent}.ndt-select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.ndt-select-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ndt-text-secondary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:var(--ndt-text-primary);-webkit-user-select:none;user-select:none;min-width:64px;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm) var(--ndt-spacing-xs) var(--ndt-spacing-md);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-xs);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:400;line-height:1.3;transition:background-color .15s ease}.select-menu-item:hover{background-color:#0000000f}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.08);font-weight:400}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.12)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:4px;width:3px;height:calc(100% - 8px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:#0000000f}.select-menu-item:first-child{margin-top:0}.select-menu-item:last-child{margin-bottom:0}.select-overlay{backdrop-filter:blur(8px)}\n"] }]
         }] });
 
 class ToolbarToolButtonComponent {
     constructor() {
         // Injects
         this.state = inject(ToolbarStateService);
-        this.elementRef = inject(ElementRef);
         // Inputs
-        this.title = input.required();
+        this.toolLabel = input.required();
         this.toolId = input.required();
         this.badge = input();
+        this.position = input('bottom');
         // Outputs
         this.open = output();
         // Signals
         this.isActive = computed(() => this.state.activeToolId() === this.toolId());
         this.isToolbarVisible = this.state.isVisible;
         this.isFocused = signal(false);
-        this.tooltip = computed(() => this.elementRef.nativeElement.parentElement?.getAttribute('data-tooltip') ?? '');
-        this.isTooltipVisible = computed(() => this.tooltip() && !this.isActive());
+        this.tooltip = computed(() => this.toolLabel());
+        this.isTooltipVisible = computed(() => this.tooltip() && !this.isActive() && this.isToolbarVisible());
         // Properties
         this.tooltipState = false;
         this.hideDelay = 3000;
@@ -2135,7 +2476,7 @@ class ToolbarToolButtonComponent {
         this.isFocused.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarToolButtonComponent, isStandalone: true, selector: "ndt-tool-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, toolId: { classPropertyName: "toolId", publicName: "toolId", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "open" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarToolButtonComponent, isStandalone: true, selector: "ndt-tool-button", inputs: { toolLabel: { classPropertyName: "toolLabel", publicName: "toolLabel", isSignal: true, isRequired: true, transformFunction: null }, toolId: { classPropertyName: "toolId", publicName: "toolId", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "open" }, host: { properties: { "class": "\"tooltip-position-\" + position()" } }, ngImport: i0, template: `
     <button
       class="tool-button"
       [class.tool-button--active]="isActive()"
@@ -2149,7 +2490,7 @@ class ToolbarToolButtonComponent {
       @if (isTooltipVisible()) {
       <span
         class="tooltip"
-        [@tooltipAnimation]="tooltipState ? 'visible' : 'hidden'"
+        [class.tooltip--visible]="tooltipState"
       >
         {{ tooltip() }}
       </span>
@@ -2159,24 +2500,13 @@ class ToolbarToolButtonComponent {
         <span class="tool-button__badge">{{ badge() }}</span>
       }
     </button>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:.125rem;right:-.0625rem;background:linear-gradient(135deg,#fca5a5,#ef4444);color:#fff;border-radius:50%;width:.875rem;height:.875rem;font-size:.5rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px #0003;line-height:1}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"], animations: [
-            trigger('tooltipAnimation', [
-                state('hidden', style({
-                    opacity: 0,
-                    transform: 'translateX(-50%) translateY(1rem)',
-                })),
-                state('visible', style({
-                    opacity: 1,
-                    transform: 'translateX(-50%) translateY(0)',
-                })),
-                transition('hidden => visible', [animate('200ms ease-out')]),
-                transition('visible => hidden', [animate('150ms ease-in')]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool-button{display:flex;justify-content:center;align-items:center;width:30px;height:30px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative;border-radius:var(--ndt-border-radius-medium)}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:16px;height:16px;display:block;margin:auto}.tool-button__badge{position:absolute;top:.1875rem;right:.125rem;background:linear-gradient(135deg,#fca5a5,#ef4444);color:#fff;border-radius:50%;width:.6875rem;height:.6875rem;font-size:.4375rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px #0003;line-height:1}.tooltip{position:absolute;background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:.375rem .625rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;font-weight:500;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip);opacity:0;transition:opacity .15s ease-out}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;border:5px solid transparent}:host(.tooltip-position-bottom) .tooltip{bottom:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-bottom) .tooltip:after{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-top) .tooltip{top:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-top) .tooltip:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-left) .tooltip{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-left) .tooltip:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-right) .tooltip{right:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-right) .tooltip:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--ndt-tooltip-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndt-tool-button', standalone: true, template: `
+            args: [{ selector: 'ndt-tool-button', standalone: true, host: {
+                        '[class]': '"tooltip-position-" + position()',
+                    }, template: `
     <button
       class="tool-button"
       [class.tool-button--active]="isActive()"
@@ -2190,7 +2520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       @if (isTooltipVisible()) {
       <span
         class="tooltip"
-        [@tooltipAnimation]="tooltipState ? 'visible' : 'hidden'"
+        [class.tooltip--visible]="tooltipState"
       >
         {{ tooltip() }}
       </span>
@@ -2200,20 +2530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         <span class="tool-button__badge">{{ badge() }}</span>
       }
     </button>
-  `, animations: [
-                        trigger('tooltipAnimation', [
-                            state('hidden', style({
-                                opacity: 0,
-                                transform: 'translateX(-50%) translateY(1rem)',
-                            })),
-                            state('visible', style({
-                                opacity: 1,
-                                transform: 'translateX(-50%) translateY(0)',
-                            })),
-                            transition('hidden => visible', [animate('200ms ease-out')]),
-                            transition('visible => hidden', [animate('150ms ease-in')]),
-                        ]),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:.125rem;right:-.0625rem;background:linear-gradient(135deg,#fca5a5,#ef4444);color:#fff;border-radius:50%;width:.875rem;height:.875rem;font-size:.5rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px #0003;line-height:1}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool-button{display:flex;justify-content:center;align-items:center;width:30px;height:30px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative;border-radius:var(--ndt-border-radius-medium)}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:16px;height:16px;display:block;margin:auto}.tool-button__badge{position:absolute;top:.1875rem;right:.125rem;background:linear-gradient(135deg,#fca5a5,#ef4444);color:#fff;border-radius:50%;width:.6875rem;height:.6875rem;font-size:.4375rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px #0003;line-height:1}.tooltip{position:absolute;background:var(--ndt-tooltip-bg);color:var(--ndt-tooltip-text);padding:.375rem .625rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;font-weight:500;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip);opacity:0;transition:opacity .15s ease-out}.tooltip--visible{opacity:1}.tooltip:after{content:\"\";position:absolute;border:5px solid transparent}:host(.tooltip-position-bottom) .tooltip{bottom:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-bottom) .tooltip:after{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-top) .tooltip{top:calc(100% + 9px);left:50%;transform:translate(-50%)}:host(.tooltip-position-top) .tooltip:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-left) .tooltip{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-left) .tooltip:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--ndt-tooltip-bg)}:host(.tooltip-position-right) .tooltip{right:calc(100% + 9px);top:50%;transform:translateY(-50%)}:host(.tooltip-position-right) .tooltip:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--ndt-tooltip-bg)}\n"] }]
         }] });
 
 class ToolbarWindowComponent {
@@ -2275,7 +2592,7 @@ class ToolbarWindowComponent {
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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\"}.ndt-window{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding) var(--ndt-window-padding) var(--ndt-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(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window);contain:layout style}.ndt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ndt-header h1{font-size:var(--ndt-font-size-lg);line-height:1.2;margin:0;color:var(--ndt-text-primary)}.ndt-header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ndt-spacing-xs)}.ndt-header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ndt-header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ndt-header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-width:0}.ndt-header__controls{display:flex;gap:var(--ndt-spacing-sm);flex-shrink:0;align-items:flex-start}.ndt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md);flex-shrink:0;position:relative;z-index:5}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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\"}.ndt-window{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md) var(--ndt-spacing-md) var(--ndt-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(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window);contain:layout style}.ndt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ndt-header h1{font-size:var(--ndt-font-size-md);line-height:1.2;margin:0;color:var(--ndt-text-primary)}.ndt-header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ndt-spacing-xs)}.ndt-header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ndt-header__description{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ndt-header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-width:0}.ndt-header__controls{display:flex;gap:var(--ndt-spacing-sm);flex-shrink:0;align-items:flex-start}.ndt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm);flex-shrink:0;position:relative;z-index:5}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarWindowComponent, decorators: [{
             type: Component,
@@ -2319,7 +2636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         <ng-content></ng-content>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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\"}.ndt-window{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding) var(--ndt-window-padding) var(--ndt-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(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window);contain:layout style}.ndt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ndt-header h1{font-size:var(--ndt-font-size-lg);line-height:1.2;margin:0;color:var(--ndt-text-primary)}.ndt-header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ndt-spacing-xs)}.ndt-header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ndt-header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ndt-header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-width:0}.ndt-header__controls{display:flex;gap:var(--ndt-spacing-sm);flex-shrink:0;align-items:flex-start}.ndt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md);flex-shrink:0;position:relative;z-index:5}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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\"}.ndt-window{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md) var(--ndt-spacing-md) var(--ndt-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(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window);contain:layout style}.ndt-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;position:relative;z-index:10;flex-shrink:0}.ndt-header h1{font-size:var(--ndt-font-size-md);line-height:1.2;margin:0;color:var(--ndt-text-primary)}.ndt-header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm);flex-wrap:wrap;margin-bottom:var(--ndt-spacing-xs)}.ndt-header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:2px 6px;border-radius:var(--ndt-border-radius-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:1;white-space:nowrap}.ndt-header__description{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.ndt-header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-width:0}.ndt-header__controls{display:flex;gap:var(--ndt-spacing-sm);flex-shrink:0;align-items:flex-start}.ndt-content{position:relative;flex:1;overflow:auto;min-height:0}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm);flex-shrink:0;position:relative;z-index:5}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }]
         }] });
 
 class ToolbarToolComponent {
@@ -2329,9 +2646,17 @@ class ToolbarToolComponent {
         this.buttonComponent = contentChild(ToolbarToolButtonComponent);
         this.options = input.required();
         this.icon = input.required();
-        this.title = input.required();
+        this.toolTitle = input.required();
         this.badge = input();
         this.isActive = computed(() => this.state.activeToolId() === this.options().id);
+        this.slideDirection = computed(() => {
+            switch (this.state.position()) {
+                case 'bottom': return 'up';
+                case 'top': return 'down';
+                case 'left': return 'right';
+                case 'right': return 'left';
+            }
+        });
         this.height = computed(() => {
             switch (this.options().size) {
                 case 'small':
@@ -2361,19 +2686,62 @@ class ToolbarToolComponent {
             }
         });
         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,
-                },
-            ];
+            const position = this.state.position();
+            const triggerRect = this.getButtonContainerRect();
+            switch (position) {
+                case 'bottom': {
+                    // Original logic: overlay centered above toolbar
+                    const windowCenter = window.innerWidth / 2;
+                    const offsetX = windowCenter - (triggerRect?.left ?? 0) - 22;
+                    return [{
+                            originX: 'center',
+                            originY: 'center',
+                            overlayX: 'center',
+                            overlayY: 'center',
+                            offsetY: -(Math.ceil(this.height() / 2) + 36),
+                            offsetX,
+                        }];
+                }
+                case 'top': {
+                    // Overlay centered below toolbar
+                    const windowCenter = window.innerWidth / 2;
+                    const offsetX = windowCenter - (triggerRect?.left ?? 0) - 22;
+                    return [{
+                            originX: 'center',
+                            originY: 'center',
+                            overlayX: 'center',
+                            overlayY: 'center',
+                            offsetY: Math.ceil(this.height() / 2) + 36,
+                            offsetX,
+                        }];
+                }
+                case 'left': {
+                    // Overlay centered to the right of toolbar
+                    const windowMiddle = window.innerHeight / 2;
+                    const offsetY = windowMiddle - (triggerRect?.top ?? 0) - 22;
+                    return [{
+                            originX: 'center',
+                            originY: 'center',
+                            overlayX: 'center',
+                            overlayY: 'center',
+                            offsetX: Math.ceil(this.width() / 2) + 36,
+                            offsetY,
+                        }];
+                }
+                case 'right': {
+                    // Overlay centered to the left of toolbar
+                    const windowMiddle = window.innerHeight / 2;
+                    const offsetY = windowMiddle - (triggerRect?.top ?? 0) - 22;
+                    return [{
+                            originX: 'center',
+                            originY: 'center',
+                            overlayX: 'center',
+                            overlayY: 'center',
+                            offsetX: -(Math.ceil(this.width() / 2) + 36),
+                            offsetY,
+                        }];
+                }
+            }
         });
     }
     onOpen() {
@@ -2382,12 +2750,11 @@ class ToolbarToolComponent {
     onClose() {
         this.state.setActiveTool(null);
     }
-    getButtonContainerXPosition() {
-        const buttonContainerRect = this.buttonContainer()?.nativeElement?.getBoundingClientRect();
-        return buttonContainerRect?.left ?? 0;
+    getButtonContainerRect() {
+        return this.buttonContainer()?.nativeElement?.getBoundingClientRect();
     }
     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: "ndt-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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarToolComponent, isStandalone: true, selector: "ndt-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 }, toolTitle: { classPropertyName: "toolTitle", publicName: "toolTitle", 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="ndt-toolbar-tool" cdkOverlayOrigin>
       <div
         class="ndt-toolbar-tool__icon"
@@ -2396,9 +2763,9 @@ class ToolbarToolComponent {
         (keydown.space)="onOpen()"
         tabindex="0"
       >
-        <div #buttonContainer [attr.data-tooltip]="title()">
+        <div #buttonContainer>
           @if (icon()) {
-          <ndt-tool-button [title]="title()" [toolId]="options().id" [badge]="badge()">
+          <ndt-tool-button [toolLabel]="toolTitle()" [toolId]="options().id" [badge]="badge()" [position]="state.position()">
             <ndt-icon [name]="icon()" />
           </ndt-tool-button>
           } @else {
@@ -2418,36 +2785,13 @@ class ToolbarToolComponent {
         [cdkConnectedOverlayPanelClass]="['ndt-overlay-panel', 'ndt-tool-overlay']"
         cdkConnectedOverlay
       >
-        <ndt-window [@slideAnimation] [config]="options()" (closed)="onClose()">
+        <ndt-window [class]="'ndt-slide-' + slideDirection()" [config]="options()" (closed)="onClose()">
           <ng-content />
         </ndt-window>
       </ng-template>
       }
     </div>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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: "ndt-window", inputs: ["config"], outputs: ["closed", "maximize", "minimize"] }, { kind: "component", type: ToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["title", "toolId", "badge"], outputs: ["open"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-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 }); }
+  `, isInline: true, styles: [":host{display:flex;--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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: "ndt-window", inputs: ["config"], outputs: ["closed", "maximize", "minimize"] }, { kind: "component", type: ToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["toolLabel", "toolId", "badge", "position"], outputs: ["open"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarToolComponent, decorators: [{
             type: Component,
@@ -2466,9 +2810,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         (keydown.space)="onOpen()"
         tabindex="0"
       >
-        <div #buttonContainer [attr.data-tooltip]="title()">
+        <div #buttonContainer>
           @if (icon()) {
-          <ndt-tool-button [title]="title()" [toolId]="options().id" [badge]="badge()">
+          <ndt-tool-button [toolLabel]="toolTitle()" [toolId]="options().id" [badge]="badge()" [position]="state.position()">
             <ndt-icon [name]="icon()" />
           </ndt-tool-button>
           } @else {
@@ -2488,109 +2832,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         [cdkConnectedOverlayPanelClass]="['ndt-overlay-panel', 'ndt-tool-overlay']"
         cdkConnectedOverlay
       >
-        <ndt-window [@slideAnimation] [config]="options()" (closed)="onClose()">
+        <ndt-window [class]="'ndt-slide-' + slideDirection()" [config]="options()" (closed)="onClose()">
           <ng-content />
-        </ndt-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{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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' }]
+        </ndt-window>
+      </ng-template>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.tool{position:relative}.trigger{cursor:pointer}\n"] }]
         }] });
 
 /**
@@ -2626,6 +2874,10 @@ class ToolbarInternalAppFeaturesService {
          * Signal containing current features with merged forced state
          */
         this.features = toSignal(this.features$, { initialValue: [] });
+        // Apply to source
+        this.applyCallback = signal(null);
+        this.applyStates = signal({});
+        this.hasApplyCallback = computed(() => this.applyCallback() !== null);
         this.loadForcedFeatures();
     }
     /**
@@ -2752,6 +3004,24 @@ class ToolbarInternalAppFeaturesService {
             disabled: [...state.disabled],
         };
     }
+    setApplyToSource(callback) {
+        this.applyCallback.set(callback);
+    }
+    async applyToSource(id, value) {
+        const callback = this.applyCallback();
+        if (!callback)
+            return;
+        this.applyStates.update((s) => ({ ...s, [id]: 'loading' }));
+        try {
+            await callback(id, value);
+            this.applyStates.update((s) => ({ ...s, [id]: 'success' }));
+            setTimeout(() => this.applyStates.update((s) => ({ ...s, [id]: 'idle' })), 1500);
+        }
+        catch {
+            this.applyStates.update((s) => ({ ...s, [id]: 'error' }));
+            setTimeout(() => this.applyStates.update((s) => ({ ...s, [id]: 'idle' })), 1500);
+        }
+    }
     /**
      * Merge natural app features with forced state.
      *
@@ -2859,6 +3129,7 @@ class ToolbarAppFeaturesToolComponent {
         // Signals
         this.activeFilter = signal('all');
         this.searchQuery = signal('');
+        this.pinnedIds = signal(new Set());
         this.features = this.appFeaturesService.features;
         // Computed badge count for forced values
         this.badgeCount = computed(() => {
@@ -2884,8 +3155,15 @@ class ToolbarAppFeaturesToolComponent {
                     (this.activeFilter() === 'disabled' && !feature.isEnabled);
                 return matchesSearch && matchesFilter;
             });
-            // Sort alphabetically by name
-            return filtered.sort((a, b) => a.name.localeCompare(b.name));
+            const pinned = this.pinnedIds();
+            // Sort pinned first, then alphabetically within each group
+            return filtered.sort((a, b) => {
+                const aPinned = pinned.has(a.id);
+                const bPinned = pinned.has(b.id);
+                if (aPinned !== bPinned)
+                    return aPinned ? -1 : 1;
+                return a.name.localeCompare(b.name);
+            });
         });
         this.hasNoFilteredFeatures = computed(() => this.filteredFeatures().length === 0);
         // Other properties
@@ -2907,6 +3185,8 @@ class ToolbarAppFeaturesToolComponent {
             { value: 'off', label: 'Disabled' },
             { value: 'on', label: 'Enabled' },
         ];
+        // Apply to source (delegated to internal service)
+        this.hasApplyCallback = this.appFeaturesService.hasApplyCallback;
         this.loadViewState();
         // Save view state on changes
         effect(() => {
@@ -2914,6 +3194,7 @@ class ToolbarAppFeaturesToolComponent {
                 searchQuery: this.searchQuery(),
                 filter: this.activeFilter(),
                 sortOrder: 'asc',
+                pinnedIds: [...this.pinnedIds()],
             };
             this.storageService.set(this.VIEW_STATE_KEY, state);
         });
@@ -2927,12 +3208,21 @@ class ToolbarAppFeaturesToolComponent {
                 if (['all', 'forced', 'enabled', 'disabled'].includes(filter)) {
                     this.activeFilter.set(filter);
                 }
+                if (saved.pinnedIds?.length) {
+                    this.pinnedIds.set(new Set(saved.pinnedIds));
+                }
             }
         }
         catch {
             // Use defaults on error
         }
     }
+    getApplyState(featureId) {
+        return this.appFeaturesService.applyStates()[featureId] ?? 'idle';
+    }
+    onApplyToSource(featureId, value) {
+        this.appFeaturesService.applyToSource(featureId, value);
+    }
     // Public methods
     /**
      * Handle filter dropdown change.
@@ -2970,6 +3260,18 @@ class ToolbarAppFeaturesToolComponent {
     onSearchChange(query) {
         this.searchQuery.set(query);
     }
+    togglePin(featureId) {
+        this.pinnedIds.update((ids) => {
+            const next = new Set(ids);
+            if (next.has(featureId)) {
+                next.delete(featureId);
+            }
+            else {
+                next.add(featureId);
+            }
+            return next;
+        });
+    }
     // Protected methods
     /**
      * Get the dropdown value for a feature's current state.
@@ -2986,7 +3288,7 @@ class ToolbarAppFeaturesToolComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarAppFeaturesToolComponent, isStandalone: true, selector: "ndt-app-features-tool", ngImport: i0, template: `
     <ndt-toolbar-tool
       [options]="options"
-      title="App Features"
+      toolTitle="App Features"
       icon="puzzle"
       [badge]="badgeCount()"
     >
@@ -2998,7 +3300,6 @@ class ToolbarAppFeaturesToolComponent {
             placeholder="Search features..."
           />
           <div class="filter-wrapper">
-            <ndt-icon name="filter" class="filter-icon" />
             <ndt-select
               [value]="activeFilter()"
               [options]="filterOptions"
@@ -3022,6 +3323,11 @@ class ToolbarAppFeaturesToolComponent {
               [isForced]="feature.isForced"
               [currentValue]="feature.isEnabled"
               [originalValue]="feature.originalValue"
+              [isPinned]="pinnedIds().has(feature.id)"
+              (pinToggle)="togglePin(feature.id)"
+              [showApply]="hasApplyCallback()"
+              [applyState]="getApplyState(feature.id)"
+              (applyToSource)="onApplyToSource(feature.id, feature.isEnabled)"
             >
               <ndt-select
                 [value]="getFeatureValue(feature)"
@@ -3035,7 +3341,7 @@ class ToolbarAppFeaturesToolComponent {
         </ndt-list>
       </div>
     </ndt-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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarAppFeaturesToolComponent, decorators: [{
             type: Component,
@@ -3044,13 +3350,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         ToolbarToolComponent,
                         ToolbarInputComponent,
                         ToolbarSelectComponent,
-                        ToolbarIconComponent,
                         ToolbarListComponent,
                         ToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
       [options]="options"
-      title="App Features"
+      toolTitle="App Features"
       icon="puzzle"
       [badge]="badgeCount()"
     >
@@ -3062,7 +3367,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             placeholder="Search features..."
           />
           <div class="filter-wrapper">
-            <ndt-icon name="filter" class="filter-icon" />
             <ndt-select
               [value]="activeFilter()"
               [options]="filterOptions"
@@ -3086,6 +3390,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
               [isForced]="feature.isForced"
               [currentValue]="feature.isEnabled"
               [originalValue]="feature.originalValue"
+              [isPinned]="pinnedIds().has(feature.id)"
+              (pinToggle)="togglePin(feature.id)"
+              [showApply]="hasApplyCallback()"
+              [applyState]="getApplyState(feature.id)"
+              (applyToSource)="onApplyToSource(feature.id, feature.isEnabled)"
             >
               <ndt-select
                 [value]="getFeatureValue(feature)"
@@ -3099,7 +3408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, 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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"] }]
+  `, 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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToolbarInternalFeatureFlagService {
@@ -3136,6 +3445,10 @@ class ToolbarInternalFeatureFlagService {
             });
         }));
         this.flags = toSignal(this.flags$, { initialValue: [] });
+        // Apply to source
+        this.applyCallback = signal(null);
+        this.applyStates = signal({});
+        this.hasApplyCallback = computed(() => this.applyCallback() !== null);
         this.loadForcedFlags();
     }
     setAppFlags(flags) {
@@ -3197,6 +3510,24 @@ class ToolbarInternalFeatureFlagService {
     getCurrentForcedState() {
         return this.forcedFlagsSubject.value;
     }
+    setApplyToSource(callback) {
+        this.applyCallback.set(callback);
+    }
+    async applyToSource(id, value) {
+        const callback = this.applyCallback();
+        if (!callback)
+            return;
+        this.applyStates.update((s) => ({ ...s, [id]: 'loading' }));
+        try {
+            await callback(id, value);
+            this.applyStates.update((s) => ({ ...s, [id]: 'success' }));
+            setTimeout(() => this.applyStates.update((s) => ({ ...s, [id]: 'idle' })), 1500);
+        }
+        catch {
+            this.applyStates.update((s) => ({ ...s, [id]: 'error' }));
+            setTimeout(() => this.applyStates.update((s) => ({ ...s, [id]: 'idle' })), 1500);
+        }
+    }
     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' }); }
 }
@@ -3215,6 +3546,7 @@ class ToolbarFeatureFlagsToolComponent {
         // Signals
         this.activeFilter = signal('all');
         this.searchQuery = signal('');
+        this.pinnedIds = signal(new Set());
         this.flags = this.featureFlags.flags;
         // Computed badge count for forced values
         this.badgeCount = computed(() => {
@@ -3240,8 +3572,15 @@ class ToolbarFeatureFlagsToolComponent {
                     (this.activeFilter() === 'disabled' && !flag.isEnabled);
                 return matchesSearch && matchesFilter;
             });
-            // Sort alphabetically by name
-            return filtered.sort((a, b) => a.name.localeCompare(b.name));
+            const pinned = this.pinnedIds();
+            // Sort pinned first, then alphabetically within each group
+            return filtered.sort((a, b) => {
+                const aPinned = pinned.has(a.id);
+                const bPinned = pinned.has(b.id);
+                if (aPinned !== bPinned)
+                    return aPinned ? -1 : 1;
+                return a.name.localeCompare(b.name);
+            });
         });
         this.hasNoFilteredFlags = computed(() => this.filteredFlags().length === 0);
         // Other properties
@@ -3251,7 +3590,6 @@ class ToolbarFeatureFlagsToolComponent {
             isClosable: true,
             size: 'tall',
             id: 'ndt-feature-flags',
-            isBeta: true,
         };
         this.filterOptions = [
             { value: 'all', label: 'All Flags' },
@@ -3264,6 +3602,8 @@ class ToolbarFeatureFlagsToolComponent {
             { value: 'off', label: 'Forced Off' },
             { value: 'on', label: 'Forced On' },
         ];
+        // Apply to source (delegated to internal service)
+        this.hasApplyCallback = this.featureFlags.hasApplyCallback;
         this.loadViewState();
         // Save view state on changes
         effect(() => {
@@ -3271,6 +3611,7 @@ class ToolbarFeatureFlagsToolComponent {
                 searchQuery: this.searchQuery(),
                 filter: this.activeFilter(),
                 sortOrder: 'asc',
+                pinnedIds: [...this.pinnedIds()],
             };
             this.storageService.set(this.VIEW_STATE_KEY, state);
         });
@@ -3284,12 +3625,21 @@ class ToolbarFeatureFlagsToolComponent {
                 if (['all', 'forced', 'enabled', 'disabled'].includes(filter)) {
                     this.activeFilter.set(filter);
                 }
+                if (saved.pinnedIds?.length) {
+                    this.pinnedIds.set(new Set(saved.pinnedIds));
+                }
             }
         }
         catch {
             // Use defaults on error
         }
     }
+    getApplyState(flagId) {
+        return this.featureFlags.applyStates()[flagId] ?? 'idle';
+    }
+    onApplyToSource(flagId, value) {
+        this.featureFlags.applyToSource(flagId, value);
+    }
     // Public methods
     onFilterChange(value) {
         const filter = this.filterOptions.find((f) => f.value === value);
@@ -3313,6 +3663,18 @@ class ToolbarFeatureFlagsToolComponent {
     onSearchChange(query) {
         this.searchQuery.set(query);
     }
+    togglePin(flagId) {
+        this.pinnedIds.update((ids) => {
+            const next = new Set(ids);
+            if (next.has(flagId)) {
+                next.delete(flagId);
+            }
+            else {
+                next.add(flagId);
+            }
+            return next;
+        });
+    }
     // Protected methods
     getFlagValue(flag) {
         if (!flag.isForced)
@@ -3326,7 +3688,7 @@ class ToolbarFeatureFlagsToolComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarFeatureFlagsToolComponent, isStandalone: true, selector: "ndt-feature-flags-tool", ngImport: i0, template: `
     <ndt-toolbar-tool
       [options]="options"
-      title="Feature Flags"
+      toolTitle="Feature Flags"
       icon="toggle-left"
       [badge]="badgeCount()"
     >
@@ -3338,7 +3700,6 @@ class ToolbarFeatureFlagsToolComponent {
             placeholder="Search..."
           />
           <div class="filter-wrapper">
-            <ndt-icon name="filter" class="filter-icon" />
             <ndt-select
               [value]="activeFilter()"
               [options]="filterOptions"
@@ -3361,6 +3722,11 @@ class ToolbarFeatureFlagsToolComponent {
             [isForced]="flag.isForced"
             [currentValue]="flag.isEnabled"
             [originalValue]="flag.originalValue"
+            [isPinned]="pinnedIds().has(flag.id)"
+            (pinToggle)="togglePin(flag.id)"
+            [showApply]="hasApplyCallback()"
+            [applyState]="getApplyState(flag.id)"
+            (applyToSource)="onApplyToSource(flag.id, flag.isEnabled)"
           >
             <ndt-select
               [value]="getFlagValue(flag)"
@@ -3375,7 +3741,7 @@ class ToolbarFeatureFlagsToolComponent {
         </ndt-list>
       </div>
     </ndt-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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarFeatureFlagsToolComponent, decorators: [{
             type: Component,
@@ -3384,13 +3750,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         ToolbarToolComponent,
                         ToolbarInputComponent,
                         ToolbarSelectComponent,
-                        ToolbarIconComponent,
                         ToolbarListComponent,
                         ToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
       [options]="options"
-      title="Feature Flags"
+      toolTitle="Feature Flags"
       icon="toggle-left"
       [badge]="badgeCount()"
     >
@@ -3402,7 +3767,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             placeholder="Search..."
           />
           <div class="filter-wrapper">
-            <ndt-icon name="filter" class="filter-icon" />
             <ndt-select
               [value]="activeFilter()"
               [options]="filterOptions"
@@ -3425,6 +3789,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             [isForced]="flag.isForced"
             [currentValue]="flag.isEnabled"
             [originalValue]="flag.originalValue"
+            [isPinned]="pinnedIds().has(flag.id)"
+            (pinToggle)="togglePin(flag.id)"
+            [showApply]="hasApplyCallback()"
+            [applyState]="getApplyState(flag.id)"
+            (applyToSource)="onApplyToSource(flag.id, flag.isEnabled)"
           >
             <ndt-select
               [value]="getFlagValue(flag)"
@@ -3439,7 +3808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, 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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"] }]
+  `, 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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToolbarButtonComponent {
@@ -3468,7 +3837,7 @@ class ToolbarButtonComponent {
       }
       <ng-content />
     </button>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarButtonComponent, decorators: [{
             type: Component,
@@ -3488,7 +3857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
       }
       <ng-content />
     </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"] }]
         }] });
 
 class ToolbarCardComponent {
@@ -3514,7 +3883,7 @@ class ToolbarCardComponent {
     >
       <ng-content></ng-content>
     </div>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarCardComponent, decorators: [{
             type: Component,
@@ -3532,7 +3901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
     >
       <ng-content></ng-content>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"] }]
         }] });
 
 class ToolbarClickableCardComponent {
@@ -3558,7 +3927,7 @@ class ToolbarClickableCardComponent {
         </div>
       </div>
     </ndt-card>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ToolbarCardComponent, selector: "ndt-card" }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ToolbarCardComponent, selector: "ndt-card" }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarClickableCardComponent, decorators: [{
             type: Component,
@@ -3574,7 +3943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         </div>
       </div>
     </ndt-card>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
         }] });
 
 class ToolbarLinkButtonComponent {
@@ -3597,7 +3966,7 @@ class ToolbarLinkButtonComponent {
         <ng-content></ng-content>
       </span>
     </a>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLinkButtonComponent, decorators: [{
             type: Component,
@@ -3615,9 +3984,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         <ng-content></ng-content>
       </span>
     </a>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"] }]
         }] });
 
+const TOOLBAR_POSITIONS = [
+    'top',
+    'right',
+    'bottom',
+    'left',
+];
+function isHorizontalPosition(position) {
+    return position === 'top' || position === 'bottom';
+}
+
 class SettingsService {
     constructor() {
         this.STORAGE_KEY = 'settings';
@@ -3626,6 +4005,8 @@ class SettingsService {
     getSettings() {
         return (this.storageService.get(this.STORAGE_KEY) || {
             isDarkMode: false,
+            position: 'bottom',
+            isCompletelyHidden: false,
         });
     }
     setSettings(settings) {
@@ -3646,13 +4027,13 @@ class ToolbarHomeToolComponent {
         this.storageService = inject(ToolbarStorageService);
         this.badge = input();
         this.title = `Angular Toolbar`;
+        this.positions = TOOLBAR_POSITIONS;
         this.options = {
             title: this.title,
             isClosable: true,
             id: 'ndt-home',
             size: 'medium',
             description: '',
-            isBeta: true,
         };
         this.links = [
             {
@@ -3682,6 +4063,9 @@ class ToolbarHomeToolComponent {
             },
         ];
     }
+    onPositionChange(position) {
+        this.state.setPosition(position);
+    }
     onExportSettings() {
         const settings = this.storageService.getAllSettings();
         const blob = new Blob([JSON.stringify(settings, null, 2)], {
@@ -3726,9 +4110,30 @@ class ToolbarHomeToolComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarHomeToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarHomeToolComponent, isStandalone: true, selector: "ndt-home-tool", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ndt-toolbar-tool [options]="options" title="Home" icon="angular">
+    <ndt-toolbar-tool [options]="options" toolTitle="Home" icon="angular">
       <section class="settings">
         <div class="settings-container">
+          <div class="instruction">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Toolbar Position</span>
+              <span class="instruction__label-description">
+                Choose where the toolbar appears on screen
+              </span>
+            </div>
+          </div>
+          <div class="position-selector">
+            @for (pos of positions; track pos) {
+              <button
+                class="position-option"
+                [class.position-option--active]="state.position() === pos"
+                [attr.aria-pressed]="state.position() === pos"
+                (click)="onPositionChange(pos)"
+              >
+                {{ pos }}
+              </button>
+            }
+          </div>
+
           <div class="instruction">
             <div class="instruction__label">
               <span class="instruction__label-text">Reset Settings</span>
@@ -3772,7 +4177,7 @@ class ToolbarHomeToolComponent {
         </div>
       </section>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-md)}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{margin-top:auto;padding-top:var(--ndt-spacing-lg);border-top:1px solid var(--ndt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarClickableCardComponent, selector: "ndt-clickable-card", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: ToolbarLinkButtonComponent, selector: "ndt-link-button", inputs: ["url", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-md)}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.position-selector{display:flex;gap:var(--ndt-spacing-sm)}.position-selector .position-option{flex:1;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:transparent;color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-xs);font-family:inherit;cursor:pointer;transition:all .15s ease;text-transform:capitalize}.position-selector .position-option:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.position-selector .position-option--active{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.position-selector .position-option--active:hover{background:var(--ndt-primary);color:var(--ndt-text-on-primary)}.footer-links{margin-top:auto;padding-top:var(--ndt-spacing-lg);border-top:1px solid var(--ndt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarClickableCardComponent, selector: "ndt-clickable-card", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: ToolbarLinkButtonComponent, selector: "ndt-link-button", inputs: ["url", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarHomeToolComponent, decorators: [{
             type: Component,
@@ -3783,9 +4188,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         ToolbarClickableCardComponent,
                         ToolbarLinkButtonComponent,
                     ], template: `
-    <ndt-toolbar-tool [options]="options" title="Home" icon="angular">
+    <ndt-toolbar-tool [options]="options" toolTitle="Home" icon="angular">
       <section class="settings">
         <div class="settings-container">
+          <div class="instruction">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Toolbar Position</span>
+              <span class="instruction__label-description">
+                Choose where the toolbar appears on screen
+              </span>
+            </div>
+          </div>
+          <div class="position-selector">
+            @for (pos of positions; track pos) {
+              <button
+                class="position-option"
+                [class.position-option--active]="state.position() === pos"
+                [attr.aria-pressed]="state.position() === pos"
+                (click)="onPositionChange(pos)"
+              >
+                {{ pos }}
+              </button>
+            }
+          </div>
+
           <div class="instruction">
             <div class="instruction__label">
               <span class="instruction__label-text">Reset Settings</span>
@@ -3829,146 +4255,1030 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         </div>
       </section>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-md)}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{margin-top:auto;padding-top:var(--ndt-spacing-lg);border-top:1px solid var(--ndt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column;gap:var(--ndt-spacing-md)}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.position-selector{display:flex;gap:var(--ndt-spacing-sm)}.position-selector .position-option{flex:1;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:transparent;color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-xs);font-family:inherit;cursor:pointer;transition:all .15s ease;text-transform:capitalize}.position-selector .position-option:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.position-selector .position-option--active{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.position-selector .position-option--active:hover{background:var(--ndt-primary);color:var(--ndt-text-on-primary)}.footer-links{margin-top:auto;padding-top:var(--ndt-spacing-lg);border-top:1px solid var(--ndt-border-subtle);display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"] }]
         }] });
 
-class ToolbarInternalLanguageService {
+const DEFAULT_TIMEZONES = [
+    { id: 'UTC', name: 'UTC', offset: '+00:00' },
+    { id: 'America/New_York', name: 'Eastern Time (US)', offset: '-05:00' },
+    { id: 'America/Chicago', name: 'Central Time (US)', offset: '-06:00' },
+    { id: 'America/Denver', name: 'Mountain Time (US)', offset: '-07:00' },
+    { id: 'America/Los_Angeles', name: 'Pacific Time (US)', offset: '-08:00' },
+    { id: 'Europe/London', name: 'London (GMT)', offset: '+00:00' },
+    { id: 'Europe/Paris', name: 'Paris (CET)', offset: '+01:00' },
+    { id: 'Europe/Berlin', name: 'Berlin (CET)', offset: '+01:00' },
+    { id: 'Asia/Tokyo', name: 'Tokyo (JST)', offset: '+09:00' },
+    { id: 'Asia/Shanghai', name: 'Shanghai (CST)', offset: '+08:00' },
+    { id: 'Asia/Kolkata', name: 'India (IST)', offset: '+05:30' },
+    { id: 'Asia/Dubai', name: 'Dubai (GST)', offset: '+04:00' },
+    { id: 'Australia/Sydney', name: 'Sydney (AEST)', offset: '+10:00' },
+    { id: 'Pacific/Auckland', name: 'Auckland (NZST)', offset: '+12:00' },
+    { id: 'America/Sao_Paulo', name: 'Sao Paulo (BRT)', offset: '-03:00' },
+];
+const DEFAULT_CURRENCIES = [
+    { code: 'USD', name: 'US Dollar', symbol: '$' },
+    { code: 'EUR', name: 'Euro', symbol: '\u20AC' },
+    { code: 'GBP', name: 'British Pound', symbol: '\u00A3' },
+    { code: 'JPY', name: 'Japanese Yen', symbol: '\u00A5' },
+    { code: 'CNY', name: 'Chinese Yuan', symbol: '\u00A5' },
+    { code: 'INR', name: 'Indian Rupee', symbol: '\u20B9' },
+    { code: 'BRL', name: 'Brazilian Real', symbol: 'R$' },
+    { code: 'CAD', name: 'Canadian Dollar', symbol: 'CA$' },
+    { code: 'AUD', name: 'Australian Dollar', symbol: 'A$' },
+    { code: 'CHF', name: 'Swiss Franc', symbol: 'CHF' },
+    { code: 'KRW', name: 'South Korean Won', symbol: '\u20A9' },
+    { code: 'MXN', name: 'Mexican Peso', symbol: 'MX$' },
+    { code: 'AED', name: 'UAE Dirham', symbol: 'AED' },
+    { code: 'SAR', name: 'Saudi Riyal', symbol: 'SAR' },
+];
+const CURRENCY_SYMBOLS = Object.fromEntries(DEFAULT_CURRENCIES.map(({ code, symbol }) => [code, symbol]));
+
+class ToolbarInternalI18nService {
     constructor() {
-        this.STORAGE_KEY = 'language';
+        this.STORAGE_LOCALE = 'i18n.locale';
+        this.STORAGE_TIMEZONE = 'i18n.timezone';
+        this.STORAGE_CURRENCY = 'i18n.currency';
+        this.STORAGE_UNIT_SYSTEM = 'i18n.unitSystem';
+        this.STORAGE_DATE_FORMAT = 'i18n.dateFormat';
+        this.STORAGE_FIRST_DAY = 'i18n.firstDay';
+        this.STORAGE_NUMBER_FORMAT = 'i18n.numberFormat';
+        this.STORAGE_PSEUDO_LOC = 'i18n.pseudoLoc';
+        this.STORAGE_RTL = 'i18n.rtl';
+        this.OLD_LANGUAGE_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)
+        this.document = inject(DOCUMENT);
+        this.locales$ = new BehaviorSubject([]);
+        this.timezones$ = new BehaviorSubject(DEFAULT_TIMEZONES);
+        this.currencies$ = new BehaviorSubject(DEFAULT_CURRENCIES);
+        this.forcedLocale$ = new BehaviorSubject(null);
+        this.forcedTimezone$ = new BehaviorSubject(null);
+        this.forcedCurrency$ = new BehaviorSubject(null);
+        this.forcedUnitSystem$ = new BehaviorSubject(null);
+        this.forcedDateFormat$ = new BehaviorSubject(null);
+        this.forcedFirstDayOfWeek$ = new BehaviorSubject(null);
+        this.forcedNumberFormat$ = new BehaviorSubject(null);
+        this.toolConfig$ = new BehaviorSubject({});
+        this.pseudoLocEnabled$ = new BehaviorSubject(false);
+        this.rtlEnabled$ = new BehaviorSubject(false);
+        this.locales = toSignal(this.locales$, { initialValue: [] });
+        this.timezones = toSignal(this.timezones$, { initialValue: DEFAULT_TIMEZONES });
+        this.availableCurrencies = toSignal(this.currencies$, { initialValue: DEFAULT_CURRENCIES });
+        this.forcedLocale = toSignal(this.forcedLocale$, { initialValue: null });
+        this.forcedTimezone = toSignal(this.forcedTimezone$, { initialValue: null });
+        this.forcedCurrency = toSignal(this.forcedCurrency$, { initialValue: null });
+        this.forcedUnitSystem = toSignal(this.forcedUnitSystem$, { initialValue: null });
+        this.forcedDateFormat = toSignal(this.forcedDateFormat$, { initialValue: null });
+        this.forcedFirstDayOfWeek = toSignal(this.forcedFirstDayOfWeek$, { initialValue: null });
+        this.forcedNumberFormat = toSignal(this.forcedNumberFormat$, { initialValue: null });
+        this.toolConfig = toSignal(this.toolConfig$, { initialValue: {} });
+        this.pseudoLocEnabled = toSignal(this.pseudoLocEnabled$, { initialValue: false });
+        this.rtlEnabled = toSignal(this.rtlEnabled$, { initialValue: false });
+        this.migrateOldLanguageKey();
+        this.loadFromStorage();
+    }
+    // --- Locale ---
+    setAvailableLocales(locales) {
+        this.locales$.next(locales);
+    }
+    getAvailableLocales() {
+        return this.locales$.asObservable();
+    }
+    setForcedLocale(locale) {
+        this.forcedLocale$.next(locale);
+        this.storageService.set(this.STORAGE_LOCALE, locale);
+    }
+    getForcedLocale() {
+        return this.forcedLocale$.pipe(map((locale) => {
             if (!this.stateService.isEnabled()) {
                 return [];
             }
-            return language ? [language] : [];
+            return locale ? [locale] : [];
         }));
     }
-    removeForcedLanguage() {
-        this.forcedLanguage$.next(null);
-        this.storageService.remove(this.STORAGE_KEY);
+    removeForcedLocale() {
+        this.forcedLocale$.next(null);
+        this.storageService.remove(this.STORAGE_LOCALE);
     }
-    loadForcedLanguage() {
-        const savedLanguage = this.storageService.get(this.STORAGE_KEY);
-        if (savedLanguage) {
-            this.forcedLanguage$.next(savedLanguage);
-        }
+    // --- Timezone ---
+    setAvailableTimezones(timezones) {
+        this.timezones$.next(timezones);
     }
-    /**
-     * 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();
+    getAvailableTimezones() {
+        return this.timezones$.asObservable();
+    }
+    setForcedTimezone(timezone) {
+        this.forcedTimezone$.next(timezone);
+        this.storageService.set(this.STORAGE_TIMEZONE, timezone);
+    }
+    getForcedTimezone() {
+        return this.forcedTimezone$.pipe(map((tz) => (this.stateService.isEnabled() ? tz : null)));
+    }
+    removeForcedTimezone() {
+        this.forcedTimezone$.next(null);
+        this.storageService.remove(this.STORAGE_TIMEZONE);
+    }
+    // --- Currency ---
+    setAvailableCurrencies(currencies) {
+        this.currencies$.next(currencies);
+    }
+    getAvailableCurrencies() {
+        return this.currencies$.asObservable();
+    }
+    setForcedCurrency(currency) {
+        this.forcedCurrency$.next(currency);
+        this.storageService.set(this.STORAGE_CURRENCY, currency);
+    }
+    getForcedCurrency() {
+        return this.forcedCurrency$.pipe(map((c) => (this.stateService.isEnabled() ? c : null)));
+    }
+    removeForcedCurrency() {
+        this.forcedCurrency$.next(null);
+        this.storageService.remove(this.STORAGE_CURRENCY);
+    }
+    // --- Unit System ---
+    setForcedUnitSystem(unitSystem) {
+        this.forcedUnitSystem$.next(unitSystem);
+        this.storageService.set(this.STORAGE_UNIT_SYSTEM, unitSystem);
+    }
+    getForcedUnitSystem() {
+        return this.forcedUnitSystem$.pipe(map((u) => (this.stateService.isEnabled() ? u : null)));
+    }
+    removeForcedUnitSystem() {
+        this.forcedUnitSystem$.next(null);
+        this.storageService.remove(this.STORAGE_UNIT_SYSTEM);
+    }
+    // --- Date Format ---
+    setForcedDateFormat(dateFormat) {
+        this.forcedDateFormat$.next(dateFormat);
+        this.storageService.set(this.STORAGE_DATE_FORMAT, dateFormat);
+    }
+    getForcedDateFormat() {
+        return this.forcedDateFormat$.pipe(map((df) => (this.stateService.isEnabled() ? df : null)));
+    }
+    removeForcedDateFormat() {
+        this.forcedDateFormat$.next(null);
+        this.storageService.remove(this.STORAGE_DATE_FORMAT);
+    }
+    // --- First Day of Week ---
+    setForcedFirstDayOfWeek(firstDay) {
+        this.forcedFirstDayOfWeek$.next(firstDay);
+        this.storageService.set(this.STORAGE_FIRST_DAY, firstDay);
+    }
+    getForcedFirstDayOfWeek() {
+        return this.forcedFirstDayOfWeek$.pipe(map((fd) => (this.stateService.isEnabled() ? fd : null)));
+    }
+    removeForcedFirstDayOfWeek() {
+        this.forcedFirstDayOfWeek$.next(null);
+        this.storageService.remove(this.STORAGE_FIRST_DAY);
+    }
+    // --- Number Format ---
+    setForcedNumberFormat(numberFormat) {
+        this.forcedNumberFormat$.next(numberFormat);
+        this.storageService.set(this.STORAGE_NUMBER_FORMAT, numberFormat);
+    }
+    getForcedNumberFormat() {
+        return this.forcedNumberFormat$.pipe(map((nf) => (this.stateService.isEnabled() ? nf : null)));
+    }
+    removeForcedNumberFormat() {
+        this.forcedNumberFormat$.next(null);
+        this.storageService.remove(this.STORAGE_NUMBER_FORMAT);
+    }
+    // --- Tool Config ---
+    setToolConfig(config) {
+        this.toolConfig$.next(config);
+    }
+    // --- Pseudo-Localization ---
+    setPseudoLocEnabled(enabled) {
+        this.pseudoLocEnabled$.next(enabled);
+        this.storageService.set(this.STORAGE_PSEUDO_LOC, enabled);
+    }
+    getPseudoLocEnabled() {
+        return this.pseudoLocEnabled$.pipe(map((enabled) => (this.stateService.isEnabled() ? enabled : false)));
+    }
+    // --- RTL ---
+    setRtlEnabled(enabled) {
+        this.rtlEnabled$.next(enabled);
+        this.storageService.set(this.STORAGE_RTL, enabled);
+        this.applyRtl(enabled);
+    }
+    getRtlEnabled() {
+        return this.rtlEnabled$.pipe(map((enabled) => (this.stateService.isEnabled() ? enabled : false)));
+    }
+    // --- Preset Hooks ---
+    async applyPresetLocale(localeId) {
+        if (localeId === null) {
+            this.removeForcedLocale();
             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);
+        const locales = await firstValueFrom(this.locales$);
+        const locale = locales.find((l) => l.id === localeId);
+        if (locale) {
+            this.setForcedLocale(locale);
         }
         else {
-            console.warn(`Language ${languageId} not found in available languages. Skipping.`);
+            console.warn(`Locale ${localeId} not found in available locales. 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;
+    applyPresetI18n(config) {
+        if (!config)
+            return;
+        if (config.locale !== undefined) {
+            if (config.locale === null) {
+                this.removeForcedLocale();
+            }
+            else {
+                const locale = this.locales$.value.find((l) => l.id === config.locale);
+                if (locale) {
+                    this.setForcedLocale(locale);
+                }
+            }
+        }
+        if (config.timezone !== undefined) {
+            if (config.timezone === null) {
+                this.removeForcedTimezone();
+            }
+            else {
+                const timezone = this.timezones$.value.find((t) => t.id === config.timezone);
+                if (timezone) {
+                    this.setForcedTimezone(timezone);
+                }
+            }
+        }
+        if (config.currency !== undefined) {
+            if (config.currency === null) {
+                this.removeForcedCurrency();
+            }
+            else {
+                const currency = this.currencies$.value.find((c) => c.code === config.currency);
+                if (currency) {
+                    this.setForcedCurrency(currency);
+                }
+            }
+        }
+        if (config.unitSystem !== undefined) {
+            if (config.unitSystem === null) {
+                this.removeForcedUnitSystem();
+            }
+            else {
+                this.setForcedUnitSystem(config.unitSystem);
+            }
+        }
+        if (config.dateFormat !== undefined) {
+            if (config.dateFormat === null) {
+                this.removeForcedDateFormat();
+            }
+            else {
+                this.setForcedDateFormat(config.dateFormat);
+            }
+        }
+        if (config.firstDayOfWeek !== undefined) {
+            if (config.firstDayOfWeek === null) {
+                this.removeForcedFirstDayOfWeek();
+            }
+            else {
+                this.setForcedFirstDayOfWeek(config.firstDayOfWeek);
+            }
+        }
+        if (config.numberFormat !== undefined) {
+            if (config.numberFormat === null) {
+                this.removeForcedNumberFormat();
+            }
+            else {
+                this.setForcedNumberFormat(config.numberFormat);
+            }
+        }
+        if (config.pseudoLocEnabled !== undefined) {
+            this.setPseudoLocEnabled(config.pseudoLocEnabled);
+        }
+        if (config.rtlEnabled !== undefined) {
+            this.setRtlEnabled(config.rtlEnabled);
+        }
+    }
+    getCurrentI18nState() {
+        return {
+            locale: this.forcedLocale$.value,
+            timezone: this.forcedTimezone$.value,
+            currency: this.forcedCurrency$.value,
+            unitSystem: this.forcedUnitSystem$.value,
+            dateFormat: this.forcedDateFormat$.value,
+            firstDayOfWeek: this.forcedFirstDayOfWeek$.value,
+            numberFormat: this.forcedNumberFormat$.value,
+            pseudoLocEnabled: this.pseudoLocEnabled$.value,
+            rtlEnabled: this.rtlEnabled$.value,
+        };
+    }
+    getCurrentForcedLocaleId() {
+        return this.forcedLocale$.value?.id ?? null;
+    }
+    // --- Private ---
+    loadFromStorage() {
+        const savedLocale = this.storageService.get(this.STORAGE_LOCALE);
+        if (savedLocale) {
+            this.forcedLocale$.next(savedLocale);
+        }
+        const savedTimezone = this.storageService.get(this.STORAGE_TIMEZONE);
+        if (savedTimezone) {
+            this.forcedTimezone$.next(savedTimezone);
+        }
+        const savedCurrency = this.storageService.get(this.STORAGE_CURRENCY);
+        if (savedCurrency) {
+            this.forcedCurrency$.next(savedCurrency);
+        }
+        const savedUnitSystem = this.storageService.get(this.STORAGE_UNIT_SYSTEM);
+        if (savedUnitSystem) {
+            this.forcedUnitSystem$.next(savedUnitSystem);
+        }
+        const savedDateFormat = this.storageService.get(this.STORAGE_DATE_FORMAT);
+        if (savedDateFormat) {
+            this.forcedDateFormat$.next(savedDateFormat);
+        }
+        const savedFirstDay = this.storageService.get(this.STORAGE_FIRST_DAY);
+        if (savedFirstDay) {
+            this.forcedFirstDayOfWeek$.next(savedFirstDay);
+        }
+        const savedNumberFormat = this.storageService.get(this.STORAGE_NUMBER_FORMAT);
+        if (savedNumberFormat) {
+            this.forcedNumberFormat$.next(savedNumberFormat);
+        }
+        const savedPseudoLoc = this.storageService.get(this.STORAGE_PSEUDO_LOC);
+        if (savedPseudoLoc !== null) {
+            this.pseudoLocEnabled$.next(savedPseudoLoc);
+        }
+        const savedRtl = this.storageService.get(this.STORAGE_RTL);
+        if (savedRtl !== null) {
+            this.rtlEnabled$.next(savedRtl);
+            if (savedRtl) {
+                this.applyRtl(true);
+            }
+        }
+    }
+    migrateOldLanguageKey() {
+        const oldLanguage = this.storageService.get(this.OLD_LANGUAGE_KEY);
+        if (oldLanguage && !this.storageService.get(this.STORAGE_LOCALE)) {
+            const migrated = {
+                id: oldLanguage.id,
+                name: oldLanguage.name,
+                code: oldLanguage.id,
+            };
+            this.storageService.set(this.STORAGE_LOCALE, migrated);
+            this.storageService.remove(this.OLD_LANGUAGE_KEY);
+        }
+    }
+    applyRtl(enabled) {
+        if (this.document?.documentElement) {
+            this.document.documentElement.dir = enabled ? 'rtl' : 'ltr';
+        }
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalI18nService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalLanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarInternalI18nService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-class ToolbarLanguageToolComponent {
+const PSEUDO_CHAR_MAP = {
+    a: '\u00e4', b: '\u0183', c: '\u00e7', d: '\u0111', e: '\u00e9',
+    f: '\u0192', g: '\u011f', h: '\u0127', i: '\u00ef', j: '\u0135',
+    k: '\u0137', l: '\u013c', m: '\u1e41', n: '\u00f1', o: '\u00f6',
+    p: '\u00fe', q: '\u01eb', r: '\u0159', s: '\u0161', t: '\u0163',
+    u: '\u00fc', v: '\u1e7d', w: '\u0175', x: '\u1e8b', y: '\u00fd',
+    z: '\u017e',
+    A: '\u00c4', B: '\u0182', C: '\u00c7', D: '\u0110', E: '\u00c9',
+    F: '\u0191', G: '\u011e', H: '\u0126', I: '\u00cf', J: '\u0134',
+    K: '\u0136', L: '\u013b', M: '\u1e40', N: '\u00d1', O: '\u00d6',
+    P: '\u00de', Q: '\u01ea', R: '\u0158', S: '\u0160', T: '\u0162',
+    U: '\u00dc', V: '\u1e7c', W: '\u0174', X: '\u1e8a', Y: '\u00dd',
+    Z: '\u017d',
+};
+const VOWELS = new Set(['a', 'e', 'i', 'o', 'u', 'A', 'E', 'I', 'O', 'U']);
+function formatNumber(locale, value) {
+    try {
+        return new Intl.NumberFormat(locale).format(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+function formatDate(locale, timezone, date) {
+    try {
+        return new Intl.DateTimeFormat(locale, {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            timeZone: timezone,
+        }).format(date);
+    }
+    catch {
+        return date.toLocaleDateString();
+    }
+}
+function formatTime(locale, timezone, date) {
+    try {
+        return new Intl.DateTimeFormat(locale, {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            timeZoneName: 'short',
+            timeZone: timezone,
+        }).format(date);
+    }
+    catch {
+        return date.toLocaleTimeString();
+    }
+}
+function formatCurrency(locale, currency, value) {
+    try {
+        return new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+        }).format(value);
+    }
+    catch {
+        return `${currency} ${value}`;
+    }
+}
+function pseudoLocalize(text) {
+    let result = '';
+    for (const char of text) {
+        result += PSEUDO_CHAR_MAP[char] ?? char;
+    }
+    return `[\u200B${result}\u200B]`;
+}
+function formatCustomDate(date, format, locale, timezone) {
+    const d = date.getDate().toString().padStart(2, '0');
+    const m = (date.getMonth() + 1).toString().padStart(2, '0');
+    const y = date.getFullYear().toString();
+    switch (format) {
+        case 'MM/DD/YYYY': return `${m}/${d}/${y}`;
+        case 'DD/MM/YYYY': return `${d}/${m}/${y}`;
+        case 'YYYY-MM-DD': return `${y}-${m}-${d}`;
+        default: return formatDate(locale, timezone, date);
+    }
+}
+function formatCustomNumber(value, format, locale) {
+    const [intPart, decPart] = value.toFixed(2).split('.');
+    const digits = intPart.replace('-', '');
+    const groups = [];
+    for (let i = digits.length; i > 0; i -= 3) {
+        groups.unshift(digits.slice(Math.max(0, i - 3), i));
+    }
+    const sign = value < 0 ? '-' : '';
+    switch (format) {
+        case 'period-comma': return `${sign}${groups.join(',')}.${decPart}`;
+        case 'comma-period': return `${sign}${groups.join('.')},${decPart}`;
+        case 'space-comma': return `${sign}${groups.join('\u00A0')},${decPart}`;
+        default: return formatNumber(locale, value);
+    }
+}
+function expandText(text, factor = 0.35) {
+    const targetLength = Math.ceil(text.length * (1 + factor));
+    let result = '';
+    for (const char of text) {
+        result += char;
+        if (VOWELS.has(char) && result.length < targetLength) {
+            result += char.toLowerCase();
+        }
+    }
+    // Pad remaining if vowel duplication wasn't enough
+    while (result.length < targetLength) {
+        result += '~';
+    }
+    return result;
+}
+
+const NOT_FORCED = 'not-forced';
+const UNIT_SYSTEM_VALUES = ['metric', 'imperial'];
+const DATE_FORMAT_VALUES = ['locale-default', 'MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY-MM-DD'];
+const FIRST_DAY_VALUES = ['locale-default', 'sunday', 'monday', 'saturday'];
+const NUMBER_FORMAT_VALUES = ['locale-default', 'period-comma', 'comma-period', 'space-comma'];
+class ToolbarI18nToolComponent {
+    // --- Constructor: restore persisted values ---
     constructor() {
-        this.languageService = inject(ToolbarInternalLanguageService);
+        // --- Injects ---
+        this.i18nService = inject(ToolbarInternalI18nService);
+        // --- Readonly properties ---
         this.options = {
-            title: 'Languages',
-            description: 'Set the language for your current session',
-            size: 'small',
-            id: 'ndt-language',
-            isBeta: true,
+            title: 'i18n',
+            description: 'Simulate regional & linguistic environments',
+            size: 'tall',
+            id: 'ndt-i18n',
             isClosable: true,
         };
-        this.activeLanguage = signal('not-forced');
-        this.languageOptions = toSignal(this.languageService.getAppLanguages().pipe(map((languages) => [
-            { value: 'not-forced', label: 'Not Forced' },
-            ...languages.map(({ id: value, name: label }) => ({
+        this.unitSystemOptions = [
+            { value: NOT_FORCED, label: 'Not Forced' },
+            { value: 'metric', label: 'Metric' },
+            { value: 'imperial', label: 'Imperial' },
+        ];
+        this.dateFormatOptions = [
+            { value: NOT_FORCED, label: 'Not Forced' },
+            { value: 'locale-default', label: 'Locale Default' },
+            { value: 'MM/DD/YYYY', label: 'MM/DD/YYYY' },
+            { value: 'DD/MM/YYYY', label: 'DD/MM/YYYY' },
+            { value: 'YYYY-MM-DD', label: 'YYYY-MM-DD (ISO)' },
+        ];
+        this.firstDayOptions = [
+            { value: NOT_FORCED, label: 'Not Forced' },
+            { value: 'locale-default', label: 'Locale Default' },
+            { value: 'sunday', label: 'Sunday' },
+            { value: 'monday', label: 'Monday' },
+            { value: 'saturday', label: 'Saturday' },
+        ];
+        this.numberFormatOptions = [
+            { value: NOT_FORCED, label: 'Not Forced' },
+            { value: 'locale-default', label: 'Locale Default' },
+            { value: 'period-comma', label: '1,234.56' },
+            { value: 'comma-period', label: '1.234,56' },
+            { value: 'space-comma', label: '1 234,56' },
+        ];
+        // --- Signals ---
+        this.activeLocale = signal(NOT_FORCED);
+        this.activeTimezone = signal(NOT_FORCED);
+        this.activeCurrency = signal(NOT_FORCED);
+        this.activeUnitSystem = signal(NOT_FORCED);
+        this.activeDateFormat = signal(NOT_FORCED);
+        this.activeFirstDayOfWeek = signal(NOT_FORCED);
+        this.activeNumberFormat = signal(NOT_FORCED);
+        this.pseudoLocEnabled = this.i18nService.pseudoLocEnabled;
+        this.rtlEnabled = this.i18nService.rtlEnabled;
+        // --- Computed ---
+        this.toolConfig = computed(() => this.i18nService.toolConfig());
+        this.localeOptions = toSignal(this.i18nService.getAvailableLocales().pipe(map((locales) => [
+            { value: NOT_FORCED, label: 'Not Forced' },
+            ...locales.map(({ id: value, name: label }) => ({ value, label })),
+        ])), { initialValue: [{ value: NOT_FORCED, label: 'Not Forced' }] });
+        this.timezoneOptions = toSignal(this.i18nService.getAvailableTimezones().pipe(map((timezones) => [
+            { value: NOT_FORCED, label: 'Not Forced' },
+            ...timezones.map(({ id: value, name, offset }) => ({
+                value,
+                label: `${name} (${offset})`,
+            })),
+        ])), { initialValue: [{ value: NOT_FORCED, label: 'Not Forced' }] });
+        this.currencyOptions = toSignal(this.i18nService.getAvailableCurrencies().pipe(map((currencies) => [
+            { value: NOT_FORCED, label: 'Not Forced' },
+            ...currencies.map(({ code: value, name, symbol }) => ({
                 value,
-                label,
+                label: `${name} (${symbol})`,
             })),
-        ])), { initialValue: [] });
+        ])), { initialValue: [{ value: NOT_FORCED, label: 'Not Forced' }] });
+        this.currentLocaleCode = computed(() => {
+            const id = this.activeLocale();
+            return id === NOT_FORCED ? 'en-US' : id;
+        });
+        this.currentTimezone = computed(() => {
+            const id = this.activeTimezone();
+            return id === NOT_FORCED ? 'UTC' : id;
+        });
+        this.currentCurrencyCode = computed(() => {
+            const id = this.activeCurrency();
+            return id === NOT_FORCED ? 'USD' : id;
+        });
+        this.previewDate_ = new Date();
+        this.previewNumber = computed(() => {
+            const nf = this.activeNumberFormat();
+            if (nf !== NOT_FORCED && nf !== 'locale-default') {
+                return formatCustomNumber(1234.56, nf, this.currentLocaleCode());
+            }
+            return formatNumber(this.currentLocaleCode(), 1234.56);
+        });
+        this.previewDate = computed(() => {
+            const df = this.activeDateFormat();
+            if (df !== NOT_FORCED && df !== 'locale-default') {
+                return formatCustomDate(this.previewDate_, df, this.currentLocaleCode(), this.currentTimezone());
+            }
+            return formatDate(this.currentLocaleCode(), this.currentTimezone(), this.previewDate_);
+        });
+        this.previewTime = computed(() => formatTime(this.currentLocaleCode(), this.currentTimezone(), this.previewDate_));
+        this.previewCurrencyValue = computed(() => {
+            const nf = this.activeNumberFormat();
+            if (nf !== NOT_FORCED && nf !== 'locale-default') {
+                const code = this.currentCurrencyCode();
+                const symbol = CURRENCY_SYMBOLS[code] ?? code;
+                return `${symbol}${formatCustomNumber(1234.56, nf, this.currentLocaleCode())}`;
+            }
+            return formatCurrency(this.currentLocaleCode(), this.currentCurrencyCode(), 1234.56);
+        });
+        this.pseudoPreview = computed(() => {
+            const sample = 'Hello World! This is a sample text for testing.';
+            const pseudo = pseudoLocalize(sample);
+            return expandText(pseudo);
+        });
+        const state = this.i18nService.getCurrentI18nState();
+        if (state.locale)
+            this.activeLocale.set(state.locale.id);
+        if (state.timezone)
+            this.activeTimezone.set(state.timezone.id);
+        if (state.currency)
+            this.activeCurrency.set(state.currency.code);
+        if (state.unitSystem)
+            this.activeUnitSystem.set(state.unitSystem);
+        if (state.dateFormat)
+            this.activeDateFormat.set(state.dateFormat);
+        if (state.firstDayOfWeek)
+            this.activeFirstDayOfWeek.set(state.firstDayOfWeek);
+        if (state.numberFormat)
+            this.activeNumberFormat.set(state.numberFormat);
+    }
+    // --- Event handlers ---
+    onLocaleChange(localeId) {
+        this.activeLocale.set(localeId);
+        if (localeId === NOT_FORCED || !localeId) {
+            this.i18nService.removeForcedLocale();
+            return;
+        }
+        const selected = this.i18nService.locales().find(({ id }) => id === localeId);
+        if (selected) {
+            this.i18nService.setForcedLocale(selected);
+        }
+    }
+    onTimezoneChange(timezoneId) {
+        this.activeTimezone.set(timezoneId);
+        if (timezoneId === NOT_FORCED || !timezoneId) {
+            this.i18nService.removeForcedTimezone();
+            return;
+        }
+        const selected = this.i18nService.timezones().find(({ id }) => id === timezoneId);
+        if (selected) {
+            this.i18nService.setForcedTimezone(selected);
+        }
+    }
+    onCurrencyChange(currencyCode) {
+        this.activeCurrency.set(currencyCode);
+        if (currencyCode === NOT_FORCED || !currencyCode) {
+            this.i18nService.removeForcedCurrency();
+            return;
+        }
+        const selected = this.i18nService.availableCurrencies().find(({ code }) => code === currencyCode);
+        if (selected) {
+            this.i18nService.setForcedCurrency(selected);
+        }
     }
-    async onLanguageChange(language) {
-        if (language === 'not-forced' || !language) {
-            this.languageService.removeForcedLanguage();
+    onUnitSystemChange(unitSystem) {
+        this.activeUnitSystem.set(unitSystem);
+        if (unitSystem === NOT_FORCED || !unitSystem) {
+            this.i18nService.removeForcedUnitSystem();
             return;
         }
-        const languages = await firstValueFrom(this.languageService.getAppLanguages());
-        const selectedLanguage = languages.find(({ id }) => id === language);
-        if (selectedLanguage) {
-            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: "ndt-language-tool", ngImport: i0, template: `
-    <ndt-toolbar-tool title="Languages" icon="translate" [options]="options">
-      <div class="language-select">
-        <label for="language-select">Language</label>
-        <ndt-select
-          id="language-select"
-          [value]="activeLanguage()"
-          [options]="languageOptions()"
-          [size]="'medium'"
-          (valueChange)="onLanguageChange($event ?? '')"
-        />
+        if (UNIT_SYSTEM_VALUES.includes(unitSystem)) {
+            this.i18nService.setForcedUnitSystem(unitSystem);
+        }
+    }
+    onPseudoLocToggle(event) {
+        const checked = event.target.checked;
+        this.i18nService.setPseudoLocEnabled(checked);
+    }
+    onRtlToggle(event) {
+        const checked = event.target.checked;
+        this.i18nService.setRtlEnabled(checked);
+    }
+    onDateFormatChange(value) {
+        this.activeDateFormat.set(value);
+        if (value === NOT_FORCED || !value) {
+            this.i18nService.removeForcedDateFormat();
+            return;
+        }
+        if (DATE_FORMAT_VALUES.includes(value)) {
+            this.i18nService.setForcedDateFormat(value);
+        }
+    }
+    onFirstDayOfWeekChange(value) {
+        this.activeFirstDayOfWeek.set(value);
+        if (value === NOT_FORCED || !value) {
+            this.i18nService.removeForcedFirstDayOfWeek();
+            return;
+        }
+        if (FIRST_DAY_VALUES.includes(value)) {
+            this.i18nService.setForcedFirstDayOfWeek(value);
+        }
+    }
+    onNumberFormatChange(value) {
+        this.activeNumberFormat.set(value);
+        if (value === NOT_FORCED || !value) {
+            this.i18nService.removeForcedNumberFormat();
+            return;
+        }
+        if (NUMBER_FORMAT_VALUES.includes(value)) {
+            this.i18nService.setForcedNumberFormat(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarI18nToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarI18nToolComponent, isStandalone: true, selector: "ndt-i18n-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool toolTitle="i18n" icon="globe" [options]="options">
+      <div class="i18n-section">
+        <!-- Formatting Preview (at top for immediate feedback) -->
+        @if (toolConfig().showFormattingPreview !== false) {
+          <div class="i18n-section-header">FORMATTING PREVIEW</div>
+          <div class="i18n-preview">
+            <div class="i18n-preview-row">
+              <span class="preview-label">Number</span>
+              <span class="preview-value">{{ previewNumber() }}</span>
+            </div>
+            <div class="i18n-preview-row">
+              <span class="preview-label">Date</span>
+              <span class="preview-value">{{ previewDate() }}</span>
+            </div>
+            <div class="i18n-preview-row">
+              <span class="preview-label">Time</span>
+              <span class="preview-value">{{ previewTime() }}</span>
+            </div>
+            <div class="i18n-preview-row">
+              <span class="preview-label">Currency</span>
+              <span class="preview-value">{{ previewCurrencyValue() }}</span>
+            </div>
+          </div>
+        }
+
+        <!-- Settings (flat 2-column grid) -->
+        <div class="i18n-select-grid">
+          @if (toolConfig().showLocale !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-locale">Locale</label>
+              <ndt-select
+                id="i18n-locale"
+                [value]="activeLocale()"
+                [options]="localeOptions()"
+                [size]="'medium'"
+                (valueChange)="onLocaleChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showTimezone !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-timezone">Timezone</label>
+              <ndt-select
+                id="i18n-timezone"
+                [value]="activeTimezone()"
+                [options]="timezoneOptions()"
+                [size]="'medium'"
+                (valueChange)="onTimezoneChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showCurrency !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-currency">Currency</label>
+              <ndt-select
+                id="i18n-currency"
+                [value]="activeCurrency()"
+                [options]="currencyOptions()"
+                [size]="'medium'"
+                (valueChange)="onCurrencyChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showUnits !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-units">Units</label>
+              <ndt-select
+                id="i18n-units"
+                [value]="activeUnitSystem()"
+                [options]="unitSystemOptions"
+                [size]="'medium'"
+                (valueChange)="onUnitSystemChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showDateFormat !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-date-format">Date Format</label>
+              <ndt-select
+                id="i18n-date-format"
+                [value]="activeDateFormat()"
+                [options]="dateFormatOptions"
+                [size]="'medium'"
+                (valueChange)="onDateFormatChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showNumberFormat !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-number-format">Number Format</label>
+              <ndt-select
+                id="i18n-number-format"
+                [value]="activeNumberFormat()"
+                [options]="numberFormatOptions"
+                [size]="'medium'"
+                (valueChange)="onNumberFormatChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showFirstDayOfWeek !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-first-day">First Day of Week</label>
+              <ndt-select
+                id="i18n-first-day"
+                [value]="activeFirstDayOfWeek()"
+                [options]="firstDayOptions"
+                [size]="'medium'"
+                (valueChange)="onFirstDayOfWeekChange($event ?? '')"
+              />
+            </div>
+          }
+        </div>
+
+        <!-- Stress Testing -->
+        @if (toolConfig().showStressTesting !== false) {
+          <div class="i18n-section-header">STRESS TESTING</div>
+          <div class="i18n-toggle-section">
+            <div class="i18n-toggle-row">
+              <div class="toggle-info">
+                <span class="toggle-label">Pseudo-Localization</span>
+                <span class="toggle-hint">Detect hardcoded strings</span>
+              </div>
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  [checked]="pseudoLocEnabled()"
+                  (change)="onPseudoLocToggle($event)"
+                />
+                <span class="toggle-track"></span>
+              </label>
+            </div>
+            @if (pseudoLocEnabled()) {
+              <div class="i18n-pseudo-preview">
+                {{ pseudoPreview() }}
+              </div>
+            }
+            <div class="i18n-toggle-row">
+              <div class="toggle-info">
+                <span class="toggle-label">RTL Mirroring</span>
+                <span class="toggle-hint">Set document direction to RTL</span>
+              </div>
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  [checked]="rtlEnabled()"
+                  (change)="onRtlToggle($event)"
+                />
+                <span class="toggle-track"></span>
+              </label>
+            </div>
+          </div>
+        }
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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: "ndt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.i18n-section{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);padding-top:0}.i18n-section-header{font-size:var(--ndt-font-size-xxs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ndt-text-muted);margin-top:var(--ndt-spacing-md);padding:var(--ndt-spacing-xs) 0 var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-left:2px solid rgba(var(--ndt-primary-rgb),.4)}.i18n-section-header:first-child{margin-top:0}.i18n-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndt-spacing-sm) var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs)}.i18n-select-group{display:flex;flex-direction:column;gap:2px}.i18n-select-group label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:600}.i18n-standalone-select{margin-top:var(--ndt-spacing-sm)}.i18n-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);border-left:2px solid var(--ndt-border-primary);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs);display:flex;flex-direction:column;gap:1px}.i18n-preview-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--ndt-font-size-xxs);gap:var(--ndt-spacing-xs);padding:2px 0}.i18n-preview-row .preview-label{color:var(--ndt-text-muted);flex-shrink:0}.i18n-preview-row .preview-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-primary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i18n-toggle-section{display:flex;flex-direction:column;gap:0;margin-top:var(--ndt-spacing-xs)}.i18n-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);gap:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);transition:background .15s ease}.i18n-toggle-row:hover{background:var(--ndt-hover-bg)}.i18n-toggle-row .toggle-info{display:flex;flex-direction:column;gap:1px;min-width:0}.i18n-toggle-row .toggle-label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:500}.i18n-toggle-row .toggle-hint{font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);line-height:1.3}.toggle-switch{position:relative;display:inline-flex;align-items:center;width:34px;height:18px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-switch input:focus-visible+.toggle-track{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.toggle-switch .toggle-track{position:absolute;inset:0;background:var(--ndt-border-primary);border-radius:9px;transition:background .2s ease}.toggle-switch .toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000001f}.toggle-switch input:checked+.toggle-track{background:var(--ndt-primary)}.toggle-switch input:checked+.toggle-track:after{transform:translate(16px)}.i18n-pseudo-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-small);border-left:2px solid rgba(var(--ndt-primary-rgb),.3);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);margin:0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);font-family:JetBrains Mono,ui-monospace,monospace;word-break:break-word;line-height:1.5}\n"], dependencies: [{ kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarLanguageToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarI18nToolComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndt-language-tool', standalone: true, imports: [ToolbarToolComponent, ToolbarSelectComponent], template: `
-    <ndt-toolbar-tool title="Languages" icon="translate" [options]="options">
-      <div class="language-select">
-        <label for="language-select">Language</label>
-        <ndt-select
-          id="language-select"
-          [value]="activeLanguage()"
-          [options]="languageOptions()"
-          [size]="'medium'"
-          (valueChange)="onLanguageChange($event ?? '')"
-        />
+            args: [{ selector: 'ndt-i18n-tool', standalone: true, imports: [ToolbarToolComponent, ToolbarSelectComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <ndt-toolbar-tool toolTitle="i18n" icon="globe" [options]="options">
+      <div class="i18n-section">
+        <!-- Formatting Preview (at top for immediate feedback) -->
+        @if (toolConfig().showFormattingPreview !== false) {
+          <div class="i18n-section-header">FORMATTING PREVIEW</div>
+          <div class="i18n-preview">
+            <div class="i18n-preview-row">
+              <span class="preview-label">Number</span>
+              <span class="preview-value">{{ previewNumber() }}</span>
+            </div>
+            <div class="i18n-preview-row">
+              <span class="preview-label">Date</span>
+              <span class="preview-value">{{ previewDate() }}</span>
+            </div>
+            <div class="i18n-preview-row">
+              <span class="preview-label">Time</span>
+              <span class="preview-value">{{ previewTime() }}</span>
+            </div>
+            <div class="i18n-preview-row">
+              <span class="preview-label">Currency</span>
+              <span class="preview-value">{{ previewCurrencyValue() }}</span>
+            </div>
+          </div>
+        }
+
+        <!-- Settings (flat 2-column grid) -->
+        <div class="i18n-select-grid">
+          @if (toolConfig().showLocale !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-locale">Locale</label>
+              <ndt-select
+                id="i18n-locale"
+                [value]="activeLocale()"
+                [options]="localeOptions()"
+                [size]="'medium'"
+                (valueChange)="onLocaleChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showTimezone !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-timezone">Timezone</label>
+              <ndt-select
+                id="i18n-timezone"
+                [value]="activeTimezone()"
+                [options]="timezoneOptions()"
+                [size]="'medium'"
+                (valueChange)="onTimezoneChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showCurrency !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-currency">Currency</label>
+              <ndt-select
+                id="i18n-currency"
+                [value]="activeCurrency()"
+                [options]="currencyOptions()"
+                [size]="'medium'"
+                (valueChange)="onCurrencyChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showUnits !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-units">Units</label>
+              <ndt-select
+                id="i18n-units"
+                [value]="activeUnitSystem()"
+                [options]="unitSystemOptions"
+                [size]="'medium'"
+                (valueChange)="onUnitSystemChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showDateFormat !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-date-format">Date Format</label>
+              <ndt-select
+                id="i18n-date-format"
+                [value]="activeDateFormat()"
+                [options]="dateFormatOptions"
+                [size]="'medium'"
+                (valueChange)="onDateFormatChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showNumberFormat !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-number-format">Number Format</label>
+              <ndt-select
+                id="i18n-number-format"
+                [value]="activeNumberFormat()"
+                [options]="numberFormatOptions"
+                [size]="'medium'"
+                (valueChange)="onNumberFormatChange($event ?? '')"
+              />
+            </div>
+          }
+          @if (toolConfig().showFirstDayOfWeek !== false) {
+            <div class="i18n-select-group">
+              <label for="i18n-first-day">First Day of Week</label>
+              <ndt-select
+                id="i18n-first-day"
+                [value]="activeFirstDayOfWeek()"
+                [options]="firstDayOptions"
+                [size]="'medium'"
+                (valueChange)="onFirstDayOfWeekChange($event ?? '')"
+              />
+            </div>
+          }
+        </div>
+
+        <!-- Stress Testing -->
+        @if (toolConfig().showStressTesting !== false) {
+          <div class="i18n-section-header">STRESS TESTING</div>
+          <div class="i18n-toggle-section">
+            <div class="i18n-toggle-row">
+              <div class="toggle-info">
+                <span class="toggle-label">Pseudo-Localization</span>
+                <span class="toggle-hint">Detect hardcoded strings</span>
+              </div>
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  [checked]="pseudoLocEnabled()"
+                  (change)="onPseudoLocToggle($event)"
+                />
+                <span class="toggle-track"></span>
+              </label>
+            </div>
+            @if (pseudoLocEnabled()) {
+              <div class="i18n-pseudo-preview">
+                {{ pseudoPreview() }}
+              </div>
+            }
+            <div class="i18n-toggle-row">
+              <div class="toggle-info">
+                <span class="toggle-label">RTL Mirroring</span>
+                <span class="toggle-hint">Set document direction to RTL</span>
+              </div>
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  [checked]="rtlEnabled()"
+                  (change)="onRtlToggle($event)"
+                />
+                <span class="toggle-track"></span>
+              </label>
+            </div>
+          </div>
+        }
       </div>
     </ndt-toolbar-tool>
-  `, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"] }]
-        }] });
+  `, styles: [":host{display:block}.i18n-section{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);padding-top:0}.i18n-section-header{font-size:var(--ndt-font-size-xxs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ndt-text-muted);margin-top:var(--ndt-spacing-md);padding:var(--ndt-spacing-xs) 0 var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-left:2px solid rgba(var(--ndt-primary-rgb),.4)}.i18n-section-header:first-child{margin-top:0}.i18n-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ndt-spacing-sm) var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs)}.i18n-select-group{display:flex;flex-direction:column;gap:2px}.i18n-select-group label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:600}.i18n-standalone-select{margin-top:var(--ndt-spacing-sm)}.i18n-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-medium);border-left:2px solid var(--ndt-border-primary);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-xs);display:flex;flex-direction:column;gap:1px}.i18n-preview-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--ndt-font-size-xxs);gap:var(--ndt-spacing-xs);padding:2px 0}.i18n-preview-row .preview-label{color:var(--ndt-text-muted);flex-shrink:0}.i18n-preview-row .preview-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-primary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i18n-toggle-section{display:flex;flex-direction:column;gap:0;margin-top:var(--ndt-spacing-xs)}.i18n-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);gap:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);transition:background .15s ease}.i18n-toggle-row:hover{background:var(--ndt-hover-bg)}.i18n-toggle-row .toggle-info{display:flex;flex-direction:column;gap:1px;min-width:0}.i18n-toggle-row .toggle-label{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-secondary);font-weight:500}.i18n-toggle-row .toggle-hint{font-size:var(--ndt-font-size-xxs);color:var(--ndt-text-muted);line-height:1.3}.toggle-switch{position:relative;display:inline-flex;align-items:center;width:34px;height:18px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-switch input:focus-visible+.toggle-track{outline:2px solid rgba(var(--ndt-primary-rgb),.5);outline-offset:2px}.toggle-switch .toggle-track{position:absolute;inset:0;background:var(--ndt-border-primary);border-radius:9px;transition:background .2s ease}.toggle-switch .toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000001f}.toggle-switch input:checked+.toggle-track{background:var(--ndt-primary)}.toggle-switch input:checked+.toggle-track:after{transform:translate(16px)}.i18n-pseudo-preview{background:var(--ndt-hover-bg);border-radius:var(--ndt-border-radius-small);border-left:2px solid rgba(var(--ndt-primary-rgb),.3);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);margin:0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);font-family:JetBrains Mono,ui-monospace,monospace;word-break:break-word;line-height:1.5}\n"] }]
+        }], ctorParameters: () => [] });
 
 class ToolbarInternalPermissionsService {
     constructor() {
@@ -4004,6 +5314,10 @@ class ToolbarInternalPermissionsService {
             });
         }));
         this.permissions = toSignal(this.permissions$, { initialValue: [] });
+        // Apply to source
+        this.applyCallback = signal(null);
+        this.applyStates = signal({});
+        this.hasApplyCallback = computed(() => this.applyCallback() !== null);
         this.loadForcedState();
     }
     setAppPermissions(permissions) {
@@ -4082,6 +5396,24 @@ class ToolbarInternalPermissionsService {
         return (Array.isArray(candidate['granted']) &&
             Array.isArray(candidate['denied']));
     }
+    setApplyToSource(callback) {
+        this.applyCallback.set(callback);
+    }
+    async applyToSource(id, value) {
+        const callback = this.applyCallback();
+        if (!callback)
+            return;
+        this.applyStates.update((s) => ({ ...s, [id]: 'loading' }));
+        try {
+            await callback(id, value);
+            this.applyStates.update((s) => ({ ...s, [id]: 'success' }));
+            setTimeout(() => this.applyStates.update((s) => ({ ...s, [id]: 'idle' })), 1500);
+        }
+        catch {
+            this.applyStates.update((s) => ({ ...s, [id]: 'error' }));
+            setTimeout(() => this.applyStates.update((s) => ({ ...s, [id]: 'idle' })), 1500);
+        }
+    }
     validateAndCleanForcedState(permissions) {
         const currentState = this.forcedStateSubject.value;
         const validIds = new Set(permissions.map((p) => p.id));
@@ -4123,6 +5455,7 @@ class ToolbarPermissionsToolComponent {
         // Signals
         this.activeFilter = signal('all');
         this.searchQuery = signal('');
+        this.pinnedIds = signal(new Set());
         this.permissions = this.permissionsService.permissions;
         // Computed badge count for forced values
         this.badgeCount = computed(() => {
@@ -4148,8 +5481,15 @@ class ToolbarPermissionsToolComponent {
                     (this.activeFilter() === 'denied' && !permission.isGranted);
                 return matchesSearch && matchesFilter;
             });
-            // Sort alphabetically by name
-            return filtered.sort((a, b) => a.name.localeCompare(b.name));
+            const pinned = this.pinnedIds();
+            // Sort pinned first, then alphabetically within each group
+            return filtered.sort((a, b) => {
+                const aPinned = pinned.has(a.id);
+                const bPinned = pinned.has(b.id);
+                if (aPinned !== bPinned)
+                    return aPinned ? -1 : 1;
+                return a.name.localeCompare(b.name);
+            });
         });
         this.hasNoFilteredPermissions = computed(() => this.filteredPermissions().length === 0);
         // Other properties
@@ -4159,7 +5499,6 @@ class ToolbarPermissionsToolComponent {
             isClosable: true,
             size: 'tall',
             id: 'ndt-permissions',
-            isBeta: true,
         };
         this.filterOptions = [
             { value: 'all', label: 'All Permissions' },
@@ -4172,6 +5511,8 @@ class ToolbarPermissionsToolComponent {
             { value: 'denied', label: 'Forced Denied' },
             { value: 'granted', label: 'Forced Granted' },
         ];
+        // Apply to source (delegated to internal service)
+        this.hasApplyCallback = this.permissionsService.hasApplyCallback;
         this.loadViewState();
         // Save view state on changes
         effect(() => {
@@ -4179,6 +5520,7 @@ class ToolbarPermissionsToolComponent {
                 searchQuery: this.searchQuery(),
                 filter: this.activeFilter(),
                 sortOrder: 'asc',
+                pinnedIds: [...this.pinnedIds()],
             };
             this.storageService.set(this.VIEW_STATE_KEY, state);
         });
@@ -4192,12 +5534,21 @@ class ToolbarPermissionsToolComponent {
                 if (['all', 'forced', 'granted', 'denied'].includes(filter)) {
                     this.activeFilter.set(filter);
                 }
+                if (saved.pinnedIds?.length) {
+                    this.pinnedIds.set(new Set(saved.pinnedIds));
+                }
             }
         }
         catch {
             // Use defaults on error
         }
     }
+    getApplyState(permissionId) {
+        return this.permissionsService.applyStates()[permissionId] ?? 'idle';
+    }
+    onApplyToSource(permissionId, value) {
+        this.permissionsService.applyToSource(permissionId, value);
+    }
     // Public methods
     onFilterChange(value) {
         const filter = this.filterOptions.find((f) => f.value === value);
@@ -4221,6 +5572,18 @@ class ToolbarPermissionsToolComponent {
     onSearchChange(query) {
         this.searchQuery.set(query);
     }
+    togglePin(permissionId) {
+        this.pinnedIds.update((ids) => {
+            const next = new Set(ids);
+            if (next.has(permissionId)) {
+                next.delete(permissionId);
+            }
+            else {
+                next.add(permissionId);
+            }
+            return next;
+        });
+    }
     // Protected methods
     getPermissionValue(permission) {
         if (!permission.isForced)
@@ -4231,7 +5594,7 @@ class ToolbarPermissionsToolComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarPermissionsToolComponent, isStandalone: true, selector: "ndt-permissions-tool", ngImport: i0, template: `
     <ndt-toolbar-tool
       [options]="options"
-      title="Permissions"
+      toolTitle="Permissions"
       icon="lock"
       [badge]="badgeCount()"
     >
@@ -4244,7 +5607,6 @@ class ToolbarPermissionsToolComponent {
             [ariaLabel]="'Search permissions'"
           />
           <div class="filter-wrapper">
-            <ndt-icon name="filter" class="filter-icon" />
             <ndt-select
               [value]="activeFilter()"
               [options]="filterOptions"
@@ -4269,6 +5631,11 @@ class ToolbarPermissionsToolComponent {
               [isForced]="permission.isForced"
               [currentValue]="permission.isGranted"
               [originalValue]="permission.originalValue"
+              [isPinned]="pinnedIds().has(permission.id)"
+              (pinToggle)="togglePin(permission.id)"
+              [showApply]="hasApplyCallback()"
+              [applyState]="getApplyState(permission.id)"
+              (applyToSource)="onApplyToSource(permission.id, permission.isGranted)"
             >
               <ndt-select
                 [value]="getPermissionValue(permission)"
@@ -4282,7 +5649,7 @@ class ToolbarPermissionsToolComponent {
         </ndt-list>
       </div>
     </ndt-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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarListComponent, selector: "ndt-list", inputs: ["hasItems", "hasResults", "emptyMessage", "emptyHint", "noResultsMessage"] }, { kind: "component", type: ToolbarListItemComponent, selector: "ndt-list-item", inputs: ["title", "description", "isForced", "currentValue", "originalValue", "showApply", "applyState", "isPinned"], outputs: ["pinToggle", "applyToSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsToolComponent, decorators: [{
             type: Component,
@@ -4291,13 +5658,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         ToolbarToolComponent,
                         ToolbarInputComponent,
                         ToolbarSelectComponent,
-                        ToolbarIconComponent,
                         ToolbarListComponent,
                         ToolbarListItemComponent,
                     ], template: `
     <ndt-toolbar-tool
       [options]="options"
-      title="Permissions"
+      toolTitle="Permissions"
       icon="lock"
       [badge]="badgeCount()"
     >
@@ -4310,7 +5676,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             [ariaLabel]="'Search permissions'"
           />
           <div class="filter-wrapper">
-            <ndt-icon name="filter" class="filter-icon" />
             <ndt-select
               [value]="activeFilter()"
               [options]="filterOptions"
@@ -4335,6 +5700,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
               [isForced]="permission.isForced"
               [currentValue]="permission.isGranted"
               [originalValue]="permission.originalValue"
+              [isPinned]="pinnedIds().has(permission.id)"
+              (pinToggle)="togglePin(permission.id)"
+              [showApply]="hasApplyCallback()"
+              [applyState]="getApplyState(permission.id)"
+              (applyToSource)="onApplyToSource(permission.id, permission.isGranted)"
             >
               <ndt-select
                 [value]="getPermissionValue(permission)"
@@ -4348,7 +5718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         </ndt-list>
       </div>
     </ndt-toolbar-tool>
-  `, 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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md);.filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}ndt-select{flex:0 0 auto;min-width:180px}}}\n"] }]
+  `, 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(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);ndt-input{flex:1}.filter-wrapper{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--ndt-border-primary);padding-left:var(--ndt-spacing-sm);ndt-select{flex:0 0 auto;min-width:140px}}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -4361,9 +5731,9 @@ class ToolbarInternalPresetsService {
         this.storageService = inject(ToolbarStorageService);
         // Inject all other tool internal services (for reading/writing state)
         this.featureFlagsService = inject(ToolbarInternalFeatureFlagService);
-        this.languageService = inject(ToolbarInternalLanguageService);
         this.permissionsService = inject(ToolbarInternalPermissionsService);
         this.appFeaturesService = inject(ToolbarInternalAppFeaturesService);
+        this.i18nService = inject(ToolbarInternalI18nService);
         this.presetsSubject = new BehaviorSubject([]);
         this.presets$ = this.presetsSubject.asObservable();
         this.presets = toSignal(this.presets$, { initialValue: [] });
@@ -4395,9 +5765,11 @@ class ToolbarInternalPresetsService {
             return;
         // Apply to each tool's internal service
         this.featureFlagsService.applyPresetFlags(preset.config.featureFlags);
-        await this.languageService.applyPresetLanguage(preset.config.language);
         this.permissionsService.applyPresetPermissions(preset.config.permissions);
         this.appFeaturesService.applyForcedState(preset.config.appFeatures);
+        if (preset.config.i18n) {
+            this.i18nService.applyPresetI18n(preset.config.i18n);
+        }
     }
     /**
      * Update an existing preset with current toolbar state
@@ -4464,15 +5836,15 @@ class ToolbarInternalPresetsService {
         if (options.applyFeatureFlags) {
             this.featureFlagsService.applyPresetFlags(preset.config.featureFlags);
         }
-        if (options.applyLanguage) {
-            await this.languageService.applyPresetLanguage(preset.config.language);
-        }
         if (options.applyPermissions) {
             this.permissionsService.applyPresetPermissions(preset.config.permissions);
         }
         if (options.applyAppFeatures) {
             this.appFeaturesService.applyForcedState(preset.config.appFeatures);
         }
+        if (options.applyI18n && preset.config.i18n) {
+            this.i18nService.applyPresetI18n(preset.config.i18n);
+        }
     }
     /**
      * Update only the metadata (name, description) of a preset without changing config
@@ -4501,7 +5873,7 @@ class ToolbarInternalPresetsService {
             includeFeatureFlags: categoryOptions?.includeFeatureFlags ?? true,
             includePermissions: categoryOptions?.includePermissions ?? true,
             includeAppFeatures: categoryOptions?.includeAppFeatures ?? true,
-            includeLanguage: categoryOptions?.includeLanguage ?? true,
+            includeI18n: categoryOptions?.includeI18n ?? true,
         };
         // Get current forced states
         const currentFlags = this.featureFlagsService.getCurrentForcedState();
@@ -4516,9 +5888,6 @@ class ToolbarInternalPresetsService {
                     disabled: filterById(currentFlags.disabled, categoryOptions?.selectedFlagIds),
                 }
                 : { enabled: [], disabled: [] },
-            language: options.includeLanguage
-                ? this.languageService.getCurrentForcedLanguage()
-                : null,
             permissions: options.includePermissions
                 ? {
                     granted: filterById(currentPerms.granted, categoryOptions?.selectedPermissionIds),
@@ -4531,6 +5900,19 @@ class ToolbarInternalPresetsService {
                     disabled: filterById(currentFeatures.disabled, categoryOptions?.selectedFeatureIds),
                 }
                 : { enabled: [], disabled: [] },
+            i18n: options.includeI18n
+                ? (() => {
+                    const i18nState = this.i18nService.getCurrentI18nState();
+                    return {
+                        locale: i18nState.locale?.id ?? null,
+                        timezone: i18nState.timezone?.id ?? null,
+                        currency: i18nState.currency?.code ?? null,
+                        unitSystem: i18nState.unitSystem ?? null,
+                        pseudoLocEnabled: i18nState.pseudoLocEnabled,
+                        rtlEnabled: i18nState.rtlEnabled,
+                    };
+                })()
+                : undefined,
         };
     }
     /**
@@ -4562,24 +5944,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }], ctorParameters: () => [] });
 
 class ToolbarPresetsToolComponent {
+    onDocumentClick() {
+        this.openMenuId.set(null);
+    }
     constructor() {
         // Injects
         this.presetsService = inject(ToolbarInternalPresetsService);
         this.featureFlagsService = inject(ToolbarInternalFeatureFlagService);
         this.permissionsService = inject(ToolbarInternalPermissionsService);
         this.appFeaturesService = inject(ToolbarInternalAppFeaturesService);
-        this.languageService = inject(ToolbarInternalLanguageService);
         this.state = inject(ToolbarStateService);
         // View state signals
         this.viewMode = signal('list');
         this.searchQuery = signal('');
+        this.expandedPresetId = signal(null);
+        this.openMenuId = signal(null);
         // Create form signals
         this.presetName = signal('');
         this.presetDescription = signal('');
         this.includeFeatureFlags = signal(true);
         this.includePermissions = signal(true);
         this.includeAppFeatures = signal(true);
-        this.includeLanguage = signal(true);
         this.selectedFlagIds = signal(new Set());
         this.selectedPermissionIds = signal(new Set());
         this.selectedFeatureIds = signal(new Set());
@@ -4596,7 +5981,6 @@ class ToolbarPresetsToolComponent {
         this.applyFeatureFlags = signal(true);
         this.applyPermissions = signal(true);
         this.applyAppFeatures = signal(true);
-        this.applyLanguage = signal(true);
         // Delete confirmation signals
         this.deletePresetId = signal(null);
         // Toast signals
@@ -4648,7 +6032,6 @@ class ToolbarPresetsToolComponent {
         this.isFeatureFlagsEnabled = computed(() => this.state.config().showFeatureFlagsTool ?? true);
         this.isPermissionsEnabled = computed(() => this.state.config().showPermissionsTool ?? true);
         this.isAppFeaturesEnabled = computed(() => this.state.config().showAppFeaturesTool ?? true);
-        this.isLanguageEnabled = computed(() => this.state.config().showLanguageTool ?? true);
         // Forced items details
         this.forcedFlags = computed(() => {
             return this.featureFlagsService.flags().filter((flag) => flag.isForced);
@@ -4666,7 +6049,6 @@ class ToolbarPresetsToolComponent {
             isClosable: true,
             size: 'tall',
             id: 'ndt-presets',
-            isBeta: true,
         };
         effect(() => {
             const message = this.toastMessage();
@@ -4689,6 +6071,12 @@ class ToolbarPresetsToolComponent {
     onSearchChange(query) {
         this.searchQuery.set(query);
     }
+    onToggleExpand(presetId) {
+        this.expandedPresetId.update((current) => current === presetId ? null : presetId);
+    }
+    onToggleMenu(presetId) {
+        this.openMenuId.update((current) => current === presetId ? null : presetId);
+    }
     onSwitchToListMode() {
         this.viewMode.set('list');
         this.nameError.set(null);
@@ -4704,8 +6092,6 @@ class ToolbarPresetsToolComponent {
         this.includeFeatureFlags.set(this.getCurrentFlagsCount() > 0);
         this.includePermissions.set(this.getCurrentPermissionsCount() > 0);
         this.includeAppFeatures.set(this.getCurrentAppFeaturesCount() > 0);
-        const currentLang = this.getCurrentLanguage();
-        this.includeLanguage.set(!!currentLang && currentLang !== 'Not Forced');
         // Initialize selected items - select all by default
         this.selectedFlagIds.set(new Set(this.forcedFlags().map((f) => f.id)));
         this.selectedPermissionIds.set(new Set(this.forcedPermissions().map((p) => p.id)));
@@ -4741,7 +6127,6 @@ class ToolbarPresetsToolComponent {
             includeFeatureFlags: this.includeFeatureFlags(),
             includePermissions: this.includePermissions(),
             includeAppFeatures: this.includeAppFeatures(),
-            includeLanguage: this.includeLanguage(),
             selectedFlagIds: Array.from(this.selectedFlagIds()),
             selectedPermissionIds: Array.from(this.selectedPermissionIds()),
             selectedFeatureIds: Array.from(this.selectedFeatureIds()),
@@ -4871,7 +6256,6 @@ class ToolbarPresetsToolComponent {
         this.applyFeatureFlags.set(true);
         this.applyPermissions.set(true);
         this.applyAppFeatures.set(true);
-        this.applyLanguage.set(true);
         this.viewMode.set('apply');
     }
     onConfirmPartialApply() {
@@ -4882,7 +6266,6 @@ class ToolbarPresetsToolComponent {
             applyFeatureFlags: this.applyFeatureFlags(),
             applyPermissions: this.applyPermissions(),
             applyAppFeatures: this.applyAppFeatures(),
-            applyLanguage: this.applyLanguage(),
         });
         this.showToast('Preset applied successfully');
         this.onSwitchToListMode();
@@ -4938,9 +6321,6 @@ class ToolbarPresetsToolComponent {
         const state = this.appFeaturesService.getCurrentForcedState();
         return state.enabled.length + state.disabled.length;
     }
-    getCurrentLanguage() {
-        return this.languageService.getCurrentForcedLanguage() || 'Not Forced';
-    }
     formatDate(isoString) {
         return new Date(isoString).toLocaleDateString();
     }
@@ -4974,12 +6354,6 @@ class ToolbarPresetsToolComponent {
             featuresEnabled.forEach(id => lines.push(`  ✓ ${id}: ON`));
             featuresDisabled.forEach(id => lines.push(`  ✗ ${id}: OFF`));
         }
-        // Language
-        if (preset.config.language) {
-            if (lines.length > 0)
-                lines.push('');
-            lines.push(`Language: ${preset.config.language}`);
-        }
         return lines.length > 0 ? lines.join('\n') : 'No configuration';
     }
     toggleItemSelection(signal, itemId) {
@@ -4996,8 +6370,8 @@ class ToolbarPresetsToolComponent {
         return selectedSet.has(itemId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPresetsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarPresetsToolComponent, isStandalone: true, selector: "ndt-presets-tool", ngImport: i0, template: `
-    <ndt-toolbar-tool [options]="options" title="Presets" icon="layout">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarPresetsToolComponent, isStandalone: true, selector: "ndt-presets-tool", host: { listeners: { "document:click": "onDocumentClick()" } }, ngImport: i0, template: `
+    <ndt-toolbar-tool [options]="options" toolTitle="Presets" icon="layout">
       <div class="container">
         <!-- Toast Notification -->
         @if (toastMessage()) {
@@ -5169,19 +6543,6 @@ class ToolbarPresetsToolComponent {
             </div>
             }
 
-            @if (isLanguageEnabled()) {
-            <div class="category-section">
-              <label class="checkbox-option">
-                <input
-                  type="checkbox"
-                  [checked]="includeLanguage()"
-                  (change)="includeLanguage.set(!includeLanguage())"
-                  [disabled]="!getCurrentLanguage() || getCurrentLanguage() === 'Not Forced'"
-                />
-                <span>Language ({{ getCurrentLanguage() }})</span>
-              </label>
-            </div>
-            }
           </div>
 
           <div class="form-actions">
@@ -5258,12 +6619,6 @@ class ToolbarPresetsToolComponent {
               </div>
             </div>
             }
-            @if (editingPreset()!.config.language) {
-            <div class="config-category">
-              <span class="config-category__title">Language</span>
-              <span class="config-item">{{ editingPreset()!.config.language }}</span>
-            </div>
-            }
             <button type="button" class="replace-config-button" (click)="onReplaceConfig()">
               ↻ Replace with current toolbar state
             </button>
@@ -5434,28 +6789,6 @@ class ToolbarPresetsToolComponent {
             </div>
             }
 
-            <!-- Language -->
-            @if (applyingPreset()!.config.language) {
-            <div class="apply-category" [class.apply-category--disabled]="!applyLanguage()">
-              <label class="apply-category__header">
-                <input
-                  type="checkbox"
-                  [checked]="applyLanguage()"
-                  (change)="applyLanguage.set(!applyLanguage())"
-                />
-                <span>Language</span>
-              </label>
-              @if (applyLanguage()) {
-              <div class="apply-diff">
-                <div class="diff-item">
-                  <span class="diff-item__name">Language</span>
-                  <span class="diff-item__arrow">→</span>
-                  <span class="diff-item__value">{{ applyingPreset()!.config.language }}</span>
-                </div>
-              </div>
-              }
-            </div>
-            }
           </div>
           }
 
@@ -5503,8 +6836,13 @@ class ToolbarPresetsToolComponent {
         <!-- Preset List -->
         <div class="preset-list">
           @for (preset of sortedPresets(); track preset.id) {
-          <div class="preset-card" [title]="getPresetTooltip(preset)">
+          <div class="preset-card">
             <div class="preset-card__header">
+              <button
+                class="expand-toggle"
+                (click)="onToggleExpand(preset.id); $event.stopPropagation()"
+                [attr.aria-label]="expandedPresetId() === preset.id ? 'Collapse details' : 'Expand details'"
+              >{{ expandedPresetId() === preset.id ? '▾' : '▸' }}</button>
               <button
                 class="favorite-button"
                 [class.favorite-button--active]="preset.isFavorite"
@@ -5515,16 +6853,40 @@ class ToolbarPresetsToolComponent {
               @if (preset.isSystem) {<span class="system-badge">SYS</span>}
               <span class="preset-card__spacer"></span>
               <div class="preset-card__actions">
-                <button class="icon-button" (click)="onStartApply(preset.id)"><ndt-icon name="refresh" /></button>
+                <button
+                  class="more-button"
+                  (click)="onToggleMenu(preset.id); $event.stopPropagation()"
+                  aria-label="Actions"
+                >⋯</button>
+              </div>
+              @if (openMenuId() === preset.id) {
+              <div class="action-menu" role="menu" tabindex="-1" (click)="$event.stopPropagation()" (keydown.escape)="openMenuId.set(null)">
+                <button class="action-menu__item" (click)="onStartApply(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="refresh" />
+                  <span>Apply preset</span>
+                </button>
                 @if (!preset.isSystem) {
-                <button class="icon-button" (click)="onStartEdit(preset.id)"><ndt-icon name="edit" /></button>
-                <button class="icon-button" (click)="onUpdatePreset(preset.id)"><ndt-icon name="gear" /></button>
+                <button class="action-menu__item" (click)="onStartEdit(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="edit" />
+                  <span>Edit</span>
+                </button>
+                <button class="action-menu__item" (click)="onUpdatePreset(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="gear" />
+                  <span>Update with current values</span>
+                </button>
                 }
-                <button class="icon-button" (click)="onExportPreset(preset.id)"><ndt-icon name="export" /></button>
+                <button class="action-menu__item" (click)="onExportPreset(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="export" />
+                  <span>Export as JSON</span>
+                </button>
                 @if (!preset.isSystem) {
-                <button class="icon-button" (click)="onDeletePreset(preset.id)"><ndt-icon name="trash" /></button>
+                <button class="action-menu__item action-menu__item--danger" (click)="onDeletePreset(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="trash" />
+                  <span>Delete</span>
+                </button>
                 }
               </div>
+              }
             </div>
             @if (preset.description) {
             <div class="preset-card__row preset-card__row--meta">
@@ -5541,18 +6903,58 @@ class ToolbarPresetsToolComponent {
               @if (preset.config.appFeatures.enabled.length > 0 || preset.config.appFeatures.disabled.length > 0) {
               <span class="badge">{{ preset.config.appFeatures.enabled.length + preset.config.appFeatures.disabled.length }} features</span>
               }
-              @if (preset.config.language) {
-              <span class="badge badge--lang">{{ preset.config.language }}</span>
-              }
               <span class="preset-card__date">{{ formatDate(preset.updatedAt) }}</span>
             </div>
+            @if (expandedPresetId() === preset.id) {
+            <div class="preset-card__details">
+              @if (preset.config.featureFlags.enabled.length > 0 || preset.config.featureFlags.disabled.length > 0) {
+              <div class="details-section">
+                <span class="details-section__title">Feature Flags</span>
+                <div class="details-section__items">
+                  @for (id of preset.config.featureFlags.enabled; track id) {
+                  <span class="detail-badge detail-badge--on">{{ id }}: ON</span>
+                  }
+                  @for (id of preset.config.featureFlags.disabled; track id) {
+                  <span class="detail-badge detail-badge--off">{{ id }}: OFF</span>
+                  }
+                </div>
+              </div>
+              }
+              @if (preset.config.permissions.granted.length > 0 || preset.config.permissions.denied.length > 0) {
+              <div class="details-section">
+                <span class="details-section__title">Permissions</span>
+                <div class="details-section__items">
+                  @for (id of preset.config.permissions.granted; track id) {
+                  <span class="detail-badge detail-badge--on">{{ id }}: GRANTED</span>
+                  }
+                  @for (id of preset.config.permissions.denied; track id) {
+                  <span class="detail-badge detail-badge--off">{{ id }}: DENIED</span>
+                  }
+                </div>
+              </div>
+              }
+              @if (preset.config.appFeatures.enabled.length > 0 || preset.config.appFeatures.disabled.length > 0) {
+              <div class="details-section">
+                <span class="details-section__title">App Features</span>
+                <div class="details-section__items">
+                  @for (id of preset.config.appFeatures.enabled; track id) {
+                  <span class="detail-badge detail-badge--on">{{ id }}: ON</span>
+                  }
+                  @for (id of preset.config.appFeatures.disabled; track id) {
+                  <span class="detail-badge detail-badge--off">{{ id }}: OFF</span>
+                  }
+                </div>
+              </div>
+              }
+            </div>
+            }
           </div>
           }
         </div>
         }
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ndt-spacing-md);left:var(--ndt-spacing-md);right:var(--ndt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);animation:slideUp .15s ease-out}.toast--success{background:#22c55e;color:#fff}.toast--error{background:#ef4444;color:#fff}.toast__icon{font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.delete-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--ndt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ndt-spacing-lg) var(--ndt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ndt-spacing-md)}.delete-view__title{margin:0 0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.delete-view__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.delete-button{background:#ef4444;color:#fff;border:none;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:var(--ndt-font-size-sm);font-weight:500;transition:background .2s ease-out;&:hover{background:#dc2626}}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}ndt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ndt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-xs);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px;&:hover{background:var(--ndt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-card{background:var(--ndt-background-secondary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:2px}.preset-card__header{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.preset-card__row{display:flex;align-items:center;gap:6px;min-height:18px}.preset-card__row--meta{padding-left:18px}.preset-card__row--badges{padding-left:18px;gap:4px}.preset-card__name{font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__spacer{flex:1;min-width:8px}.system-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;background:var(--ndt-border-primary);color:var(--ndt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ndt-text-muted);padding:0;line-height:1;transition:color .15s ease-out;flex-shrink:0}.favorite-button:hover,.favorite-button--active{color:#f59e0b}.preset-card__actions{display:flex;gap:0;flex-shrink:0}.icon-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:4px;border-radius:4px;color:var(--ndt-text-muted);display:inline-flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .15s ease-out,color .15s ease-out;line-height:0;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}ndt-icon,ndt-icon>*,svg{display:block;width:12px!important;height:12px!important}}.preset-card__description{font-size:11px;color:var(--ndt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ndt-text-muted);margin-left:auto;flex-shrink:0}.badge{background:#6366f126;color:#6366f1;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:500;white-space:nowrap}.badge--lang{background:#22c55e26;color:#22c55e}.preset-form,.import-view,.apply-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);ndt-input{width:100%}}.form-title{margin:0;font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ndt-text-muted);line-height:1.3}.form-field{display:flex;flex-direction:column;gap:2px}.field-error{color:#ef4444;font-size:11px}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-xs);cursor:pointer;color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);padding:2px 0;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241);border-radius:3px;&:disabled{cursor:not-allowed;opacity:.4}}&:has(input:disabled){opacity:.5;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:11px;max-height:100px;overflow-y:auto;li{background:#6366f10d;border-radius:3px;border-left:2px solid rgba(99,102,241,.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;cursor:pointer;gap:6px;input[type=checkbox]{cursor:pointer;width:12px;height:12px;accent-color:rgb(99,102,241);flex-shrink:0}&:hover{background:#6366f114}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;&.enabled{background:#22c55e26;color:#22c55e}&.disabled{background:#ef444426;color:#ef4444}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm);margin-top:auto;padding-top:var(--ndt-spacing-sm)}.config-preview{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ndt-text-muted);font-weight:500}.config-items{display:flex;flex-wrap:wrap;gap:4px}.config-item{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ndt-background-primary);color:var(--ndt-text-secondary)}.config-item--on{background:#22c55e1a;color:#22c55e}.config-item--off{background:#ef44441a;color:#ef4444}.replace-config-button{background:transparent;border:1px dashed var(--ndt-border-primary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ndt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ndt-spacing-md);border:2px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);cursor:pointer;transition:all .15s ease-out}.drop-zone:hover,.drop-zone--active{border-color:#6366f1;background:#6366f10d}.drop-zone__icon{font-size:24px}.drop-zone__text{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ndt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ndt-spacing-sm);color:var(--ndt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ndt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ndt-spacing-xs);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background:var(--ndt-background-secondary);color:var(--ndt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ndt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ndt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.apply-category{background:var(--ndt-background-secondary);border-radius:var(--ndt-border-radius-small);overflow:hidden;transition:opacity .15s ease-out}.apply-category--disabled{opacity:.5}.apply-category__header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);padding:6px var(--ndt-spacing-sm);cursor:pointer;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-weight:500;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241)}}.apply-diff{padding:0 var(--ndt-spacing-sm) 6px;display:flex;flex-direction:column;gap:2px}.diff-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:3px 6px;background:var(--ndt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ndt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ndt-text-muted);font-size:10px}.diff-item__value{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px}.diff-item__value--on{background:#22c55e26;color:#22c55e}.diff-item__value--off{background:#ef444426;color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ndt-spacing-md);left:var(--ndt-spacing-md);right:var(--ndt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);animation:slideUp .15s ease-out}.toast--success{background:#22c55e;color:#fff}.toast--error{background:#ef4444;color:#fff}.toast__icon{font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.delete-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--ndt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ndt-spacing-lg) var(--ndt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ndt-spacing-md)}.delete-view__title{margin:0 0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.delete-view__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.delete-button{background:#ef4444;color:#fff;border:none;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:var(--ndt-font-size-sm);font-weight:500;transition:background .2s ease-out;&:hover{background:#dc2626}}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}ndt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ndt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-xs);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px;&:hover{background:var(--ndt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-card{background:var(--ndt-background-secondary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:2px;position:relative}.preset-card__header{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.preset-card__row{display:flex;align-items:center;gap:6px;min-height:18px}.preset-card__row--meta{padding-left:36px}.preset-card__row--badges{padding-left:36px;gap:4px}.preset-card__name{font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__spacer{flex:1;min-width:8px}.system-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;background:var(--ndt-border-primary);color:var(--ndt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ndt-text-muted);padding:0;line-height:1;transition:color .15s ease-out;flex-shrink:0}.favorite-button:hover,.favorite-button--active{color:#f59e0b}.preset-card__actions{display:flex;gap:2px;flex-shrink:0}.more-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:4px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.5;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out;line-height:1;font-size:14px;font-weight:700;position:relative;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}}.action-menu{position:absolute;top:28px;right:var(--ndt-spacing-sm);background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:var(--ndt-shadow-tooltip);z-index:20;min-width:180px;padding:4px;display:flex;flex-direction:column;gap:2px}.action-menu__item{appearance:none;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);transition:background .15s ease-out;white-space:nowrap;&:hover{background:var(--ndt-hover-bg)}ndt-icon{display:block;width:14px;height:14px;flex-shrink:0;color:var(--ndt-text-muted)}}.action-menu__item--danger{color:#ef4444;ndt-icon{color:#ef4444}&:hover{background:#ef44441a}}.expand-toggle{appearance:none;background:none;border:none;cursor:pointer;padding:0 4px;margin-right:2px;font-size:10px;color:var(--ndt-text-muted);line-height:1;opacity:.6;transition:opacity .15s ease-out;flex-shrink:0;&:hover{opacity:1}}.preset-card__details{padding:var(--ndt-spacing-sm) var(--ndt-spacing-sm) var(--ndt-spacing-xs);margin-top:2px;border-top:1px solid var(--ndt-border-primary);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.details-section__title{font-size:10px;font-weight:600;color:var(--ndt-text-muted);text-transform:uppercase;letter-spacing:.5px}.details-section__items{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.detail-badge{font-size:10px;padding:1px 6px;border-radius:var(--ndt-border-radius-small);white-space:nowrap}.detail-badge--on{background:#22c55e1a;color:#22c55e}.detail-badge--off{background:#ef44441a;color:#ef4444}.preset-card__description{font-size:11px;color:var(--ndt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ndt-text-muted);margin-left:auto;flex-shrink:0}.badge{background:#6366f126;color:#6366f1;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:500;white-space:nowrap}.badge--lang{background:#22c55e26;color:#22c55e}.preset-form,.import-view,.apply-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);ndt-input{width:100%}}.form-title{margin:0;font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ndt-text-muted);line-height:1.3}.form-field{display:flex;flex-direction:column;gap:2px}.field-error{color:#ef4444;font-size:11px}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-xs);cursor:pointer;color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);padding:2px 0;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241);border-radius:3px;&:disabled{cursor:not-allowed;opacity:.4}}&:has(input:disabled){opacity:.5;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:11px;max-height:100px;overflow-y:auto;li{background:#6366f10d;border-radius:3px;border-left:2px solid rgba(99,102,241,.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;cursor:pointer;gap:6px;input[type=checkbox]{cursor:pointer;width:12px;height:12px;accent-color:rgb(99,102,241);flex-shrink:0}&:hover{background:#6366f114}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;&.enabled{background:#22c55e26;color:#22c55e}&.disabled{background:#ef444426;color:#ef4444}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm);margin-top:auto;padding-top:var(--ndt-spacing-sm)}.config-preview{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ndt-text-muted);font-weight:500}.config-items{display:flex;flex-wrap:wrap;gap:4px}.config-item{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ndt-background-primary);color:var(--ndt-text-secondary)}.config-item--on{background:#22c55e1a;color:#22c55e}.config-item--off{background:#ef44441a;color:#ef4444}.replace-config-button{background:transparent;border:1px dashed var(--ndt-border-primary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ndt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ndt-spacing-md);border:2px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);cursor:pointer;transition:all .15s ease-out}.drop-zone:hover,.drop-zone--active{border-color:#6366f1;background:#6366f10d}.drop-zone__icon{font-size:24px}.drop-zone__text{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ndt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ndt-spacing-sm);color:var(--ndt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ndt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ndt-spacing-xs);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background:var(--ndt-background-secondary);color:var(--ndt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ndt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ndt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.apply-category{background:var(--ndt-background-secondary);border-radius:var(--ndt-border-radius-small);overflow:hidden;transition:opacity .15s ease-out}.apply-category--disabled{opacity:.5}.apply-category__header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);padding:6px var(--ndt-spacing-sm);cursor:pointer;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-weight:500;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241)}}.apply-diff{padding:0 var(--ndt-spacing-sm) 6px;display:flex;flex-direction:column;gap:2px}.diff-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:3px 6px;background:var(--ndt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ndt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ndt-text-muted);font-size:10px}.diff-item__value{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px}.diff-item__value--on{background:#22c55e26;color:#22c55e}.diff-item__value--off{background:#ef444426;color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "toolTitle", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPresetsToolComponent, decorators: [{
             type: Component,
@@ -5563,7 +6965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         ToolbarButtonComponent,
                         ToolbarIconComponent,
                     ], template: `
-    <ndt-toolbar-tool [options]="options" title="Presets" icon="layout">
+    <ndt-toolbar-tool [options]="options" toolTitle="Presets" icon="layout">
       <div class="container">
         <!-- Toast Notification -->
         @if (toastMessage()) {
@@ -5735,19 +7137,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             </div>
             }
 
-            @if (isLanguageEnabled()) {
-            <div class="category-section">
-              <label class="checkbox-option">
-                <input
-                  type="checkbox"
-                  [checked]="includeLanguage()"
-                  (change)="includeLanguage.set(!includeLanguage())"
-                  [disabled]="!getCurrentLanguage() || getCurrentLanguage() === 'Not Forced'"
-                />
-                <span>Language ({{ getCurrentLanguage() }})</span>
-              </label>
-            </div>
-            }
           </div>
 
           <div class="form-actions">
@@ -5824,12 +7213,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
               </div>
             </div>
             }
-            @if (editingPreset()!.config.language) {
-            <div class="config-category">
-              <span class="config-category__title">Language</span>
-              <span class="config-item">{{ editingPreset()!.config.language }}</span>
-            </div>
-            }
             <button type="button" class="replace-config-button" (click)="onReplaceConfig()">
               ↻ Replace with current toolbar state
             </button>
@@ -6000,28 +7383,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             </div>
             }
 
-            <!-- Language -->
-            @if (applyingPreset()!.config.language) {
-            <div class="apply-category" [class.apply-category--disabled]="!applyLanguage()">
-              <label class="apply-category__header">
-                <input
-                  type="checkbox"
-                  [checked]="applyLanguage()"
-                  (change)="applyLanguage.set(!applyLanguage())"
-                />
-                <span>Language</span>
-              </label>
-              @if (applyLanguage()) {
-              <div class="apply-diff">
-                <div class="diff-item">
-                  <span class="diff-item__name">Language</span>
-                  <span class="diff-item__arrow">→</span>
-                  <span class="diff-item__value">{{ applyingPreset()!.config.language }}</span>
-                </div>
-              </div>
-              }
-            </div>
-            }
           </div>
           }
 
@@ -6069,8 +7430,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         <!-- Preset List -->
         <div class="preset-list">
           @for (preset of sortedPresets(); track preset.id) {
-          <div class="preset-card" [title]="getPresetTooltip(preset)">
+          <div class="preset-card">
             <div class="preset-card__header">
+              <button
+                class="expand-toggle"
+                (click)="onToggleExpand(preset.id); $event.stopPropagation()"
+                [attr.aria-label]="expandedPresetId() === preset.id ? 'Collapse details' : 'Expand details'"
+              >{{ expandedPresetId() === preset.id ? '▾' : '▸' }}</button>
               <button
                 class="favorite-button"
                 [class.favorite-button--active]="preset.isFavorite"
@@ -6081,16 +7447,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
               @if (preset.isSystem) {<span class="system-badge">SYS</span>}
               <span class="preset-card__spacer"></span>
               <div class="preset-card__actions">
-                <button class="icon-button" (click)="onStartApply(preset.id)"><ndt-icon name="refresh" /></button>
+                <button
+                  class="more-button"
+                  (click)="onToggleMenu(preset.id); $event.stopPropagation()"
+                  aria-label="Actions"
+                >⋯</button>
+              </div>
+              @if (openMenuId() === preset.id) {
+              <div class="action-menu" role="menu" tabindex="-1" (click)="$event.stopPropagation()" (keydown.escape)="openMenuId.set(null)">
+                <button class="action-menu__item" (click)="onStartApply(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="refresh" />
+                  <span>Apply preset</span>
+                </button>
                 @if (!preset.isSystem) {
-                <button class="icon-button" (click)="onStartEdit(preset.id)"><ndt-icon name="edit" /></button>
-                <button class="icon-button" (click)="onUpdatePreset(preset.id)"><ndt-icon name="gear" /></button>
+                <button class="action-menu__item" (click)="onStartEdit(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="edit" />
+                  <span>Edit</span>
+                </button>
+                <button class="action-menu__item" (click)="onUpdatePreset(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="gear" />
+                  <span>Update with current values</span>
+                </button>
                 }
-                <button class="icon-button" (click)="onExportPreset(preset.id)"><ndt-icon name="export" /></button>
+                <button class="action-menu__item" (click)="onExportPreset(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="export" />
+                  <span>Export as JSON</span>
+                </button>
                 @if (!preset.isSystem) {
-                <button class="icon-button" (click)="onDeletePreset(preset.id)"><ndt-icon name="trash" /></button>
+                <button class="action-menu__item action-menu__item--danger" (click)="onDeletePreset(preset.id); openMenuId.set(null)">
+                  <ndt-icon name="trash" />
+                  <span>Delete</span>
+                </button>
                 }
               </div>
+              }
             </div>
             @if (preset.description) {
             <div class="preset-card__row preset-card__row--meta">
@@ -6107,19 +7497,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
               @if (preset.config.appFeatures.enabled.length > 0 || preset.config.appFeatures.disabled.length > 0) {
               <span class="badge">{{ preset.config.appFeatures.enabled.length + preset.config.appFeatures.disabled.length }} features</span>
               }
-              @if (preset.config.language) {
-              <span class="badge badge--lang">{{ preset.config.language }}</span>
-              }
               <span class="preset-card__date">{{ formatDate(preset.updatedAt) }}</span>
             </div>
+            @if (expandedPresetId() === preset.id) {
+            <div class="preset-card__details">
+              @if (preset.config.featureFlags.enabled.length > 0 || preset.config.featureFlags.disabled.length > 0) {
+              <div class="details-section">
+                <span class="details-section__title">Feature Flags</span>
+                <div class="details-section__items">
+                  @for (id of preset.config.featureFlags.enabled; track id) {
+                  <span class="detail-badge detail-badge--on">{{ id }}: ON</span>
+                  }
+                  @for (id of preset.config.featureFlags.disabled; track id) {
+                  <span class="detail-badge detail-badge--off">{{ id }}: OFF</span>
+                  }
+                </div>
+              </div>
+              }
+              @if (preset.config.permissions.granted.length > 0 || preset.config.permissions.denied.length > 0) {
+              <div class="details-section">
+                <span class="details-section__title">Permissions</span>
+                <div class="details-section__items">
+                  @for (id of preset.config.permissions.granted; track id) {
+                  <span class="detail-badge detail-badge--on">{{ id }}: GRANTED</span>
+                  }
+                  @for (id of preset.config.permissions.denied; track id) {
+                  <span class="detail-badge detail-badge--off">{{ id }}: DENIED</span>
+                  }
+                </div>
+              </div>
+              }
+              @if (preset.config.appFeatures.enabled.length > 0 || preset.config.appFeatures.disabled.length > 0) {
+              <div class="details-section">
+                <span class="details-section__title">App Features</span>
+                <div class="details-section__items">
+                  @for (id of preset.config.appFeatures.enabled; track id) {
+                  <span class="detail-badge detail-badge--on">{{ id }}: ON</span>
+                  }
+                  @for (id of preset.config.appFeatures.disabled; track id) {
+                  <span class="detail-badge detail-badge--off">{{ id }}: OFF</span>
+                  }
+                </div>
+              </div>
+              }
+            </div>
+            }
           </div>
           }
         </div>
         }
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ndt-spacing-md);left:var(--ndt-spacing-md);right:var(--ndt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);animation:slideUp .15s ease-out}.toast--success{background:#22c55e;color:#fff}.toast--error{background:#ef4444;color:#fff}.toast__icon{font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.delete-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--ndt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ndt-spacing-lg) var(--ndt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ndt-spacing-md)}.delete-view__title{margin:0 0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.delete-view__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.delete-button{background:#ef4444;color:#fff;border:none;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:var(--ndt-font-size-sm);font-weight:500;transition:background .2s ease-out;&:hover{background:#dc2626}}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}ndt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ndt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-xs);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px;&:hover{background:var(--ndt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-card{background:var(--ndt-background-secondary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:2px}.preset-card__header{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.preset-card__row{display:flex;align-items:center;gap:6px;min-height:18px}.preset-card__row--meta{padding-left:18px}.preset-card__row--badges{padding-left:18px;gap:4px}.preset-card__name{font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__spacer{flex:1;min-width:8px}.system-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;background:var(--ndt-border-primary);color:var(--ndt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ndt-text-muted);padding:0;line-height:1;transition:color .15s ease-out;flex-shrink:0}.favorite-button:hover,.favorite-button--active{color:#f59e0b}.preset-card__actions{display:flex;gap:0;flex-shrink:0}.icon-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:4px;border-radius:4px;color:var(--ndt-text-muted);display:inline-flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .15s ease-out,color .15s ease-out;line-height:0;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}ndt-icon,ndt-icon>*,svg{display:block;width:12px!important;height:12px!important}}.preset-card__description{font-size:11px;color:var(--ndt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ndt-text-muted);margin-left:auto;flex-shrink:0}.badge{background:#6366f126;color:#6366f1;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:500;white-space:nowrap}.badge--lang{background:#22c55e26;color:#22c55e}.preset-form,.import-view,.apply-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);ndt-input{width:100%}}.form-title{margin:0;font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ndt-text-muted);line-height:1.3}.form-field{display:flex;flex-direction:column;gap:2px}.field-error{color:#ef4444;font-size:11px}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-xs);cursor:pointer;color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);padding:2px 0;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241);border-radius:3px;&:disabled{cursor:not-allowed;opacity:.4}}&:has(input:disabled){opacity:.5;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:11px;max-height:100px;overflow-y:auto;li{background:#6366f10d;border-radius:3px;border-left:2px solid rgba(99,102,241,.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;cursor:pointer;gap:6px;input[type=checkbox]{cursor:pointer;width:12px;height:12px;accent-color:rgb(99,102,241);flex-shrink:0}&:hover{background:#6366f114}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;&.enabled{background:#22c55e26;color:#22c55e}&.disabled{background:#ef444426;color:#ef4444}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm);margin-top:auto;padding-top:var(--ndt-spacing-sm)}.config-preview{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ndt-text-muted);font-weight:500}.config-items{display:flex;flex-wrap:wrap;gap:4px}.config-item{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ndt-background-primary);color:var(--ndt-text-secondary)}.config-item--on{background:#22c55e1a;color:#22c55e}.config-item--off{background:#ef44441a;color:#ef4444}.replace-config-button{background:transparent;border:1px dashed var(--ndt-border-primary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ndt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ndt-spacing-md);border:2px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);cursor:pointer;transition:all .15s ease-out}.drop-zone:hover,.drop-zone--active{border-color:#6366f1;background:#6366f10d}.drop-zone__icon{font-size:24px}.drop-zone__text{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ndt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ndt-spacing-sm);color:var(--ndt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ndt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ndt-spacing-xs);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background:var(--ndt-background-secondary);color:var(--ndt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ndt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ndt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.apply-category{background:var(--ndt-background-secondary);border-radius:var(--ndt-border-radius-small);overflow:hidden;transition:opacity .15s ease-out}.apply-category--disabled{opacity:.5}.apply-category__header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);padding:6px var(--ndt-spacing-sm);cursor:pointer;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-weight:500;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241)}}.apply-diff{padding:0 var(--ndt-spacing-sm) 6px;display:flex;flex-direction:column;gap:2px}.diff-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:3px 6px;background:var(--ndt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ndt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ndt-text-muted);font-size:10px}.diff-item__value{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px}.diff-item__value--on{background:#22c55e26;color:#22c55e}.diff-item__value--off{background:#ef444426;color:#ef4444}\n"] }]
-        }], ctorParameters: () => [] });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ndt-spacing-md);left:var(--ndt-spacing-md);right:var(--ndt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-sm);animation:slideUp .15s ease-out}.toast--success{background:#22c55e;color:#fff}.toast--error{background:#ef4444;color:#fff}.toast__icon{font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.delete-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding:var(--ndt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ndt-spacing-lg) var(--ndt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ndt-spacing-md)}.delete-view__title{margin:0 0 var(--ndt-spacing-sm);font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.delete-view__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary);line-height:1.5}.delete-button{background:#ef4444;color:#fff;border:none;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-small);cursor:pointer;font-size:var(--ndt-font-size-sm);font-weight:500;transition:background .2s ease-out;&:hover{background:#dc2626}}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md);ndt-input{flex:1}ndt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ndt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-xs);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px;&:hover{background:var(--ndt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-card{background:var(--ndt-background-secondary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:2px;position:relative}.preset-card__header{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.preset-card__row{display:flex;align-items:center;gap:6px;min-height:18px}.preset-card__row--meta{padding-left:36px}.preset-card__row--badges{padding-left:36px;gap:4px}.preset-card__name{font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__spacer{flex:1;min-width:8px}.system-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:1px 4px;border-radius:3px;background:var(--ndt-border-primary);color:var(--ndt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ndt-text-muted);padding:0;line-height:1;transition:color .15s ease-out;flex-shrink:0}.favorite-button:hover,.favorite-button--active{color:#f59e0b}.preset-card__actions{display:flex;gap:2px;flex-shrink:0}.more-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;padding:4px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-muted);display:flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.5;transition:opacity .15s ease-out,color .15s ease-out,background .15s ease-out;line-height:1;font-size:14px;font-weight:700;position:relative;&:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary);opacity:1}}.action-menu{position:absolute;top:28px;right:var(--ndt-spacing-sm);background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);box-shadow:var(--ndt-shadow-tooltip);z-index:20;min-width:180px;padding:4px;display:flex;flex-direction:column;gap:2px}.action-menu__item{appearance:none;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-xs);transition:background .15s ease-out;white-space:nowrap;&:hover{background:var(--ndt-hover-bg)}ndt-icon{display:block;width:14px;height:14px;flex-shrink:0;color:var(--ndt-text-muted)}}.action-menu__item--danger{color:#ef4444;ndt-icon{color:#ef4444}&:hover{background:#ef44441a}}.expand-toggle{appearance:none;background:none;border:none;cursor:pointer;padding:0 4px;margin-right:2px;font-size:10px;color:var(--ndt-text-muted);line-height:1;opacity:.6;transition:opacity .15s ease-out;flex-shrink:0;&:hover{opacity:1}}.preset-card__details{padding:var(--ndt-spacing-sm) var(--ndt-spacing-sm) var(--ndt-spacing-xs);margin-top:2px;border-top:1px solid var(--ndt-border-primary);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.details-section__title{font-size:10px;font-weight:600;color:var(--ndt-text-muted);text-transform:uppercase;letter-spacing:.5px}.details-section__items{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.detail-badge{font-size:10px;padding:1px 6px;border-radius:var(--ndt-border-radius-small);white-space:nowrap}.detail-badge--on{background:#22c55e1a;color:#22c55e}.detail-badge--off{background:#ef44441a;color:#ef4444}.preset-card__description{font-size:11px;color:var(--ndt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ndt-text-muted);margin-left:auto;flex-shrink:0}.badge{background:#6366f126;color:#6366f1;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:500;white-space:nowrap}.badge--lang{background:#22c55e26;color:#22c55e}.preset-form,.import-view,.apply-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);ndt-input{width:100%}}.form-title{margin:0;font-size:var(--ndt-font-size-sm);font-weight:600;color:var(--ndt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ndt-text-muted);line-height:1.3}.form-field{display:flex;flex-direction:column;gap:2px}.field-error{color:#ef4444;font-size:11px}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ndt-spacing-xs);cursor:pointer;color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);padding:2px 0;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241);border-radius:3px;&:disabled{cursor:not-allowed;opacity:.4}}&:has(input:disabled){opacity:.5;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:11px;max-height:100px;overflow-y:auto;li{background:#6366f10d;border-radius:3px;border-left:2px solid rgba(99,102,241,.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;cursor:pointer;gap:6px;input[type=checkbox]{cursor:pointer;width:12px;height:12px;accent-color:rgb(99,102,241);flex-shrink:0}&:hover{background:#6366f114}}.item-name{color:var(--ndt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;&.enabled{background:#22c55e26;color:#22c55e}&.disabled{background:#ef444426;color:#ef4444}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm);margin-top:auto;padding-top:var(--ndt-spacing-sm)}.config-preview{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ndt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ndt-text-muted);font-weight:500}.config-items{display:flex;flex-wrap:wrap;gap:4px}.config-item{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ndt-background-primary);color:var(--ndt-text-secondary)}.config-item--on{background:#22c55e1a;color:#22c55e}.config-item--off{background:#ef44441a;color:#ef4444}.replace-config-button{background:transparent;border:1px dashed var(--ndt-border-primary);padding:6px var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ndt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ndt-spacing-md);border:2px dashed var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);cursor:pointer;transition:all .15s ease-out}.drop-zone:hover,.drop-zone--active{border-color:#6366f1;background:#6366f10d}.drop-zone__icon{font-size:24px}.drop-zone__text{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ndt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ndt-spacing-sm);color:var(--ndt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ndt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ndt-spacing-xs);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background:var(--ndt-background-secondary);color:var(--ndt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ndt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ndt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.apply-category{background:var(--ndt-background-secondary);border-radius:var(--ndt-border-radius-small);overflow:hidden;transition:opacity .15s ease-out}.apply-category--disabled{opacity:.5}.apply-category__header{display:flex;align-items:center;gap:var(--ndt-spacing-xs);padding:6px var(--ndt-spacing-sm);cursor:pointer;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-weight:500;input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:rgb(99,102,241)}}.apply-diff{padding:0 var(--ndt-spacing-sm) 6px;display:flex;flex-direction:column;gap:2px}.diff-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:3px 6px;background:var(--ndt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ndt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ndt-text-muted);font-size:10px}.diff-item__value{font-weight:600;padding:1px 4px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.3px}.diff-item__value--on{background:#22c55e26;color:#22c55e}.diff-item__value--off{background:#ef444426;color:#ef4444}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
 
 class ToolbarComponent {
     constructor() {
@@ -6131,6 +7564,14 @@ class ToolbarComponent {
         this.keyboardShortcut = fromEvent(window, 'keydown')
             .pipe(filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.toggleDevTools());
+        this.hideShortcut = fromEvent(window, 'keydown')
+            .pipe(filter((event) => (event.metaKey || event.ctrlKey) &&
+            !event.shiftKey &&
+            event.key === '.'), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            event.preventDefault();
+            this.state.toggleCompletelyHidden();
+        });
         this.mouseLeave = fromEvent(document, 'mouseleave')
             .pipe(throttleTime(3000), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.onMouseLeave());
@@ -6207,6 +7648,8 @@ class ToolbarComponent {
         --ndt-background-secondary: var(--ndt-bg-primary);
         --ndt-background-hover: var(--ndt-hover-bg);
         --ndt-border-color: var(--ndt-border-primary);
+        --ndt-tooltip-bg: rgb(17, 24, 39);
+        --ndt-tooltip-text: rgb(255, 255, 255);
         --ndt-note-background: rgb(219, 234, 254);
         --ndt-note-border: rgba(37, 99, 235, 0.2);
         --ndt-warning-background: rgb(254, 249, 195);
@@ -6231,20 +7674,23 @@ class ToolbarComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarComponent, isStandalone: true, selector: "ndt-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (config().enabled ?? true) {
+    @if ((config().enabled ?? true) && !state.isCompletelyHidden()) {
       <div
         aria-label="Developer tools"
         role="toolbar"
         class="ndt-toolbar"
-        [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
+        [class.ndt-toolbar--top]="state.position() === 'top'"
+        [class.ndt-toolbar--right]="state.position() === 'right'"
+        [class.ndt-toolbar--bottom]="state.position() === 'bottom'"
+        [class.ndt-toolbar--left]="state.position() === 'left'"
+        [class.ndt-toolbar--visible]="state.isVisible()"
         [attr.data-theme]="state.theme()"
-        [class.ndt-toolbar--active]="state.isVisible()"
         (mouseenter)="onMouseEnter()"
       >
         <ndt-home-tool />
         <ng-content />
-        @if (config().showLanguageTool ?? false) {
-          <ndt-language-tool />
+        @if (config().showI18nTool ?? false) {
+          <ndt-i18n-tool />
         }
         @if (config().showPresetsTool ?? false) {
           <ndt-presets-tool />
@@ -6260,44 +7706,35 @@ class ToolbarComponent {
         }
       </div>
     }
-  `, isInline: true, 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\"}.ndt-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:visible}.ndt-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"], dependencies: [{ kind: "component", type: ToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: ToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: ToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: ToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: ToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }, { kind: "component", type: ToolbarPresetsToolComponent, selector: "ndt-presets-tool" }], 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)'),
-                ]),
-            ]),
-        ], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+  `, isInline: true, 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\"}.ndt-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);position:fixed;z-index:999999;display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ndt-toolbar--bottom{bottom:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(100% - .5rem))}.ndt-toolbar--bottom.ndt-toolbar--visible{transform:translate(-50%) translateY(-10px)}.ndt-toolbar--top{top:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(-100% + .5rem))}.ndt-toolbar--top.ndt-toolbar--visible{transform:translate(-50%) translateY(10px)}.ndt-toolbar--left{left:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(-100% + .5rem))}.ndt-toolbar--left.ndt-toolbar--visible{transform:translateY(-50%) translate(10px)}.ndt-toolbar--right{right:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(100% - .5rem))}.ndt-toolbar--right.ndt-toolbar--visible{transform:translateY(-50%) translate(-10px)}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"], dependencies: [{ kind: "component", type: ToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: ToolbarI18nToolComponent, selector: "ndt-i18n-tool" }, { kind: "component", type: ToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: ToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: ToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }, { kind: "component", type: ToolbarPresetsToolComponent, selector: "ndt-presets-tool" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ndt-toolbar', encapsulation: ViewEncapsulation.ShadowDom, imports: [
+            args: [{ standalone: true, selector: 'ndt-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, imports: [
                         ToolbarHomeToolComponent,
-                        ToolbarLanguageToolComponent,
+                        ToolbarI18nToolComponent,
                         ToolbarFeatureFlagsToolComponent,
                         ToolbarAppFeaturesToolComponent,
                         ToolbarPermissionsToolComponent,
                         ToolbarPresetsToolComponent,
                     ], template: `
-    @if (config().enabled ?? true) {
+    @if ((config().enabled ?? true) && !state.isCompletelyHidden()) {
       <div
         aria-label="Developer tools"
         role="toolbar"
         class="ndt-toolbar"
-        [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
+        [class.ndt-toolbar--top]="state.position() === 'top'"
+        [class.ndt-toolbar--right]="state.position() === 'right'"
+        [class.ndt-toolbar--bottom]="state.position() === 'bottom'"
+        [class.ndt-toolbar--left]="state.position() === 'left'"
+        [class.ndt-toolbar--visible]="state.isVisible()"
         [attr.data-theme]="state.theme()"
-        [class.ndt-toolbar--active]="state.isVisible()"
         (mouseenter)="onMouseEnter()"
       >
         <ndt-home-tool />
         <ng-content />
-        @if (config().showLanguageTool ?? false) {
-          <ndt-language-tool />
+        @if (config().showI18nTool ?? false) {
+          <ndt-i18n-tool />
         }
         @if (config().showPresetsTool ?? false) {
           <ndt-presets-tool />
@@ -6313,19 +7750,7 @@ 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\"}.ndt-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-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(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:visible}.ndt-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"] }]
+  `, 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\"}.ndt-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-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);--ndt-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);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-spacing-lg: 16px;--ndt-window-padding: 16px;--ndt-font-size-xxs: .65rem;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-tooltip-bg: rgb(17, 24, 39);--ndt-tooltip-text: rgb(255, 255, 255);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);position:fixed;z-index:999999;display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ndt-toolbar--bottom{bottom:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(100% - .5rem))}.ndt-toolbar--bottom.ndt-toolbar--visible{transform:translate(-50%) translateY(-10px)}.ndt-toolbar--top{top:0;left:50%;flex-direction:row;height:30px;padding:0 2px;transform:translate(-50%) translateY(calc(-100% + .5rem))}.ndt-toolbar--top.ndt-toolbar--visible{transform:translate(-50%) translateY(10px)}.ndt-toolbar--left{left:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(-100% + .5rem))}.ndt-toolbar--left.ndt-toolbar--visible{transform:translateY(-50%) translate(10px)}.ndt-toolbar--right{right:0;top:50%;flex-direction:column;width:30px;padding:2px 0;transform:translateY(-50%) translate(calc(100% - .5rem))}.ndt-toolbar--right.ndt-toolbar--visible{transform:translateY(-50%) translate(-10px)}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToolbarFeatureFlagService {
@@ -6372,6 +7797,15 @@ class ToolbarFeatureFlagService {
     getValues() {
         return this.internalService.flags$;
     }
+    /**
+     * Registers a callback to persist a forced flag value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced flag in the toolbar UI.
+     *
+     * @param callback - Async function that receives the flag ID and its forced boolean value
+     */
+    setApplyToSource(callback) {
+        this.internalService.setApplyToSource(callback);
+    }
     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' }); }
 }
@@ -6496,45 +7930,19 @@ class ToolbarPermissionsService {
     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)
+     * Registers a callback to persist a forced permission value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced permission in the toolbar UI.
+     *
+     * @param callback - Async function that receives the permission ID and its forced boolean value
      */
-    getValues() {
-        return this.internalService.getForcedLanguage();
+    setApplyToSource(callback) {
+        this.internalService.setApplyToSource(callback);
     }
-    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' }); }
+    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: ToolbarLanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPermissionsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -6719,6 +8127,15 @@ class ToolbarAppFeaturesService {
     getCurrentForcedState() {
         return this.internalService.getCurrentForcedState();
     }
+    /**
+     * Registers a callback to persist a forced app feature value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced feature in the toolbar UI.
+     *
+     * @param callback - Async function that receives the feature ID and its forced boolean value
+     */
+    setApplyToSource(callback) {
+        this.internalService.setApplyToSource(callback);
+    }
     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' }); }
 }
@@ -6791,7 +8208,6 @@ 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 ?? {} },
         {
@@ -6801,6 +8217,19 @@ function provideToolbar(config) {
                 const appRef = inject(ApplicationRef);
                 const injector = inject(EnvironmentInjector);
                 const toolbarConfig = inject(TOOLBAR_CONFIG);
+                // Bridge deprecated config callbacks to service-based setApplyToSource
+                if (toolbarConfig.onApplyFeatureFlag) {
+                    console.warn('[ngx-dev-toolbar] onApplyFeatureFlag in config is deprecated. Use ToolbarFeatureFlagService.setApplyToSource() instead.');
+                    inject(ToolbarInternalFeatureFlagService).setApplyToSource(toolbarConfig.onApplyFeatureFlag);
+                }
+                if (toolbarConfig.onApplyPermission) {
+                    console.warn('[ngx-dev-toolbar] onApplyPermission in config is deprecated. Use ToolbarPermissionsService.setApplyToSource() instead.');
+                    inject(ToolbarInternalPermissionsService).setApplyToSource(toolbarConfig.onApplyPermission);
+                }
+                if (toolbarConfig.onApplyAppFeature) {
+                    console.warn('[ngx-dev-toolbar] onApplyAppFeature in config is deprecated. Use ToolbarAppFeaturesService.setApplyToSource() instead.');
+                    inject(ToolbarInternalAppFeaturesService).setApplyToSource(toolbarConfig.onApplyAppFeature);
+                }
                 const componentRef = createComponent(ToolbarComponent, {
                     environmentInjector: injector,
                 });
@@ -6874,6 +8303,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column}.step-header{display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding-bottom:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-sm);border-bottom:1px solid var(--ndt-border-primary)}.step-title{font-size:var(--ndt-font-size-md);font-weight:600;color:var(--ndt-text-primary)}\n"] }]
         }] });
 
+class ToolbarI18nService {
+    constructor() {
+        this.internalService = inject(ToolbarInternalI18nService);
+    }
+    /**
+     * Sets the available locales displayed in the i18n tool
+     */
+    setAvailableOptions(locales) {
+        this.internalService.setAvailableLocales(locales);
+    }
+    /**
+     * Gets the locale that was forced through the i18n tool
+     * @returns Observable of forced locale array (single item or empty)
+     */
+    getForcedValues() {
+        return this.internalService.getForcedLocale();
+    }
+    /**
+     * Gets the forced locale value.
+     * For the i18n tool, this returns the same as getForcedValues() since
+     * only one locale can be selected at a time.
+     */
+    getValues() {
+        return this.internalService.getForcedLocale();
+    }
+    // --- Extended i18n accessors ---
+    /**
+     * Sets the available timezones displayed in the i18n tool.
+     * If not called, defaults to a built-in list of common timezones.
+     */
+    setAvailableTimezones(timezones) {
+        this.internalService.setAvailableTimezones(timezones);
+    }
+    /**
+     * Sets the available currencies displayed in the i18n tool.
+     * If not called, defaults to a built-in list of common currencies.
+     */
+    setAvailableCurrencies(currencies) {
+        this.internalService.setAvailableCurrencies(currencies);
+    }
+    /**
+     * Gets the timezone that was forced through the i18n tool
+     */
+    getForcedTimezone() {
+        return this.internalService.getForcedTimezone();
+    }
+    /**
+     * Gets the currency that was forced through the i18n tool
+     */
+    getForcedCurrency() {
+        return this.internalService.getForcedCurrency();
+    }
+    /**
+     * Gets the unit system that was forced through the i18n tool
+     */
+    getUnitSystem() {
+        return this.internalService.getForcedUnitSystem();
+    }
+    /**
+     * Whether pseudo-localization mode is enabled
+     */
+    isPseudoLocalizationEnabled() {
+        return this.internalService.getPseudoLocEnabled();
+    }
+    /**
+     * Whether RTL mirroring is enabled
+     */
+    isRtlEnabled() {
+        return this.internalService.getRtlEnabled();
+    }
+    /**
+     * Gets the date format that was forced through the i18n tool
+     */
+    getForcedDateFormat() {
+        return this.internalService.getForcedDateFormat();
+    }
+    /**
+     * Gets the first day of week that was forced through the i18n tool
+     */
+    getForcedFirstDayOfWeek() {
+        return this.internalService.getForcedFirstDayOfWeek();
+    }
+    /**
+     * Gets the number format that was forced through the i18n tool
+     */
+    getForcedNumberFormat() {
+        return this.internalService.getForcedNumberFormat();
+    }
+    /**
+     * Configures which sections are visible in the i18n tool panel
+     */
+    configure(config) {
+        this.internalService.setToolConfig(config);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarI18nService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarI18nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Public service for managing dev toolbar presets.
  * Allows developers to programmatically save, load, and manage presets.
@@ -7060,5 +8591,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CURRENCY_SYMBOLS, DEFAULT_CURRENCIES, DEFAULT_TIMEZONES, TOOLBAR_APP_FEATURES, TOOLBAR_CONFIG, TOOLBAR_FEATURE_FLAGS, TOOLBAR_PERMISSIONS, TOOLBAR_POSITIONS, ToolbarAppFeaturesService, ToolbarAppFeaturesToolComponent, ToolbarButtonComponent, ToolbarCardComponent, ToolbarClickableCardComponent, ToolbarComponent, ToolbarFeatureFlagService, ToolbarI18nService, ToolbarI18nToolComponent, ToolbarIconButtonComponent, ToolbarIconComponent, ToolbarInputComponent, ToolbarLinkButtonComponent, ToolbarListComponent, ToolbarListItemComponent, ToolbarPermissionsService, ToolbarPermissionsToolComponent, ToolbarPresetsService, ToolbarPresetsToolComponent, ToolbarSelectComponent, ToolbarStepDirective, ToolbarStepViewComponent, ToolbarToolComponent, expandText, formatCurrency, formatCustomDate, formatCustomNumber, formatDate, formatNumber, formatTime, isHorizontalPosition, provideToolbar, pseudoLocalize };
 //# sourceMappingURL=ngx-dev-toolbar.mjs.map