ngx-dev-toolbar 3.0.3 → 3.1.0

package/fesm2022/ngx-dev-toolbar.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, ChangeDetectionStrategy, Component, input, model, ElementRef, output, viewChild, contentChild, effect, DestroyRef, ViewEncapsulation, EnvironmentInjector, createComponent } from '@angular/core';
+import { InjectionToken, signal, computed, Injectable, inject, ChangeDetectionStrategy, Component, input, model, ElementRef, output, viewChild, contentChild, effect, DestroyRef, ViewEncapsulation, EnvironmentInjector, createComponent, TemplateRef, Directive, contentChildren } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, combineLatest, map, firstValueFrom, fromEvent } from 'rxjs';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { CommonModule, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { filter, throttleTime } from 'rxjs/operators';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -1615,6 +1615,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
+class EditIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EditIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: EditIconComponent, isStandalone: true, selector: "ngt-edit-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="M221.66,90.34,192,120,136,64l29.66-29.66a8,8,0,0,1,11.31,0L221.66,79A8,8,0,0,1,221.66,90.34Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EditIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-edit-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="M221.66,90.34,192,120,136,64l29.66-29.66a8,8,0,0,1,11.31,0L221.66,79A8,8,0,0,1,221.66,90.34Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
 class ExportIconComponent {
     constructor() {
         this.fill = input('#FFFF');
@@ -2604,6 +2653,8 @@ class ToolbarIconComponent {
     <ngt-database-icon [fill]="fill()" />
     } @case ('docs') {
     <ngt-docs-icon [fill]="fill()" />
+    } @case ('edit') {
+    <ngt-edit-icon [fill]="fill()" />
     } @case ('export') {
     <ngt-export-icon [fill]="fill()" />
     } @case ('filter') {
@@ -2649,7 +2700,7 @@ class ToolbarIconComponent {
     } @case ('trash') {
     <ngt-trash-icon [fill]="fill()" />
     } }
-  `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ngt-angular-icon" }, { kind: "component", type: BoltIconComponent, selector: "ngt-bolt-icon", inputs: ["fill"] }, { kind: "component", type: BugIconComponent, selector: "ngt-bug-icon", inputs: ["fill"] }, { kind: "component", type: CodeIconComponent, selector: "ngt-code-icon", inputs: ["fill"] }, { kind: "component", type: DatabaseIconComponent, selector: "ngt-database-icon", inputs: ["fill"] }, { kind: "component", type: DocsIconComponent, selector: "ngt-docs-icon", inputs: ["fill"] }, { kind: "component", type: DiscordIconComponent, selector: "ngt-discord-icon", inputs: ["fill"] }, { kind: "component", type: ExportIconComponent, selector: "ngt-export-icon", inputs: ["fill"] }, { kind: "component", type: FilterIconComponent, selector: "ngt-filter-icon", inputs: ["fill"] }, { kind: "component", type: GaugeIconComponent, selector: "ngt-gauge-icon", inputs: ["fill"] }, { kind: "component", type: GearIconComponent, selector: "ngt-gear-icon", inputs: ["fill"] }, { kind: "component", type: GitBranchIconComponent, selector: "ngt-git-branch-icon", inputs: ["fill"] }, { kind: "component", type: ImportIconComponent, selector: "ngt-import-icon", inputs: ["fill"] }, { kind: "component", type: LayoutIconComponent, selector: "ngt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightbulbIconComponent, selector: "ngt-lightbulb-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ngt-lighting-icon", inputs: ["fill"] }, { kind: "component", type: LockIconComponent, selector: "ngt-lock-icon", inputs: ["fill"] }, { kind: "component", type: NetworkIconComponent, selector: "ngt-network-icon", inputs: ["fill"] }, { kind: "component", type: PuzzleIconComponent, selector: "ngt-puzzle-icon", inputs: ["fill"] }, { kind: "component", type: RefreshIconComponent, selector: "ngt-refresh-icon", inputs: ["fill"] }, { kind: "component", type: StarIconComponent, selector: "ngt-star-icon", inputs: ["fill"] }, { kind: "component", type: TerminalIconComponent, selector: "ngt-terminal-icon", inputs: ["fill"] }, { kind: "component", type: ToggleLeftIconComponent, selector: "ngt-toggle-left-icon", inputs: ["fill"] }, { kind: "component", type: UsersIconComponent, selector: "ngt-users-icon", inputs: ["fill"] }, { kind: "component", type: SunIconComponent, selector: "ngt-sun-icon", inputs: ["fill"] }, { kind: "component", type: MoonIconComponent, selector: "ngt-moon-icon", inputs: ["fill"] }, { kind: "component", type: TranslateIconComponent, selector: "ngt-translate-icon", inputs: ["fill"] }, { kind: "component", type: TrashIconComponent, selector: "ngt-trash-icon", inputs: ["fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ngt-angular-icon" }, { kind: "component", type: BoltIconComponent, selector: "ngt-bolt-icon", inputs: ["fill"] }, { kind: "component", type: BugIconComponent, selector: "ngt-bug-icon", inputs: ["fill"] }, { kind: "component", type: CodeIconComponent, selector: "ngt-code-icon", inputs: ["fill"] }, { kind: "component", type: DatabaseIconComponent, selector: "ngt-database-icon", inputs: ["fill"] }, { kind: "component", type: DocsIconComponent, selector: "ngt-docs-icon", inputs: ["fill"] }, { kind: "component", type: DiscordIconComponent, selector: "ngt-discord-icon", inputs: ["fill"] }, { kind: "component", type: EditIconComponent, selector: "ngt-edit-icon", inputs: ["fill"] }, { kind: "component", type: ExportIconComponent, selector: "ngt-export-icon", inputs: ["fill"] }, { kind: "component", type: FilterIconComponent, selector: "ngt-filter-icon", inputs: ["fill"] }, { kind: "component", type: GaugeIconComponent, selector: "ngt-gauge-icon", inputs: ["fill"] }, { kind: "component", type: GearIconComponent, selector: "ngt-gear-icon", inputs: ["fill"] }, { kind: "component", type: GitBranchIconComponent, selector: "ngt-git-branch-icon", inputs: ["fill"] }, { kind: "component", type: ImportIconComponent, selector: "ngt-import-icon", inputs: ["fill"] }, { kind: "component", type: LayoutIconComponent, selector: "ngt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightbulbIconComponent, selector: "ngt-lightbulb-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ngt-lighting-icon", inputs: ["fill"] }, { kind: "component", type: LockIconComponent, selector: "ngt-lock-icon", inputs: ["fill"] }, { kind: "component", type: NetworkIconComponent, selector: "ngt-network-icon", inputs: ["fill"] }, { kind: "component", type: PuzzleIconComponent, selector: "ngt-puzzle-icon", inputs: ["fill"] }, { kind: "component", type: RefreshIconComponent, selector: "ngt-refresh-icon", inputs: ["fill"] }, { kind: "component", type: StarIconComponent, selector: "ngt-star-icon", inputs: ["fill"] }, { kind: "component", type: TerminalIconComponent, selector: "ngt-terminal-icon", inputs: ["fill"] }, { kind: "component", type: ToggleLeftIconComponent, selector: "ngt-toggle-left-icon", inputs: ["fill"] }, { kind: "component", type: UsersIconComponent, selector: "ngt-users-icon", inputs: ["fill"] }, { kind: "component", type: SunIconComponent, selector: "ngt-sun-icon", inputs: ["fill"] }, { kind: "component", type: MoonIconComponent, selector: "ngt-moon-icon", inputs: ["fill"] }, { kind: "component", type: TranslateIconComponent, selector: "ngt-translate-icon", inputs: ["fill"] }, { kind: "component", type: TrashIconComponent, selector: "ngt-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,
@@ -2664,6 +2715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         DatabaseIconComponent,
                         DocsIconComponent,
                         DiscordIconComponent,
+                        EditIconComponent,
                         ExportIconComponent,
                         FilterIconComponent,
                         GaugeIconComponent,
@@ -2700,6 +2752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
     <ngt-database-icon [fill]="fill()" />
     } @case ('docs') {
     <ngt-docs-icon [fill]="fill()" />
+    } @case ('edit') {
+    <ngt-edit-icon [fill]="fill()" />
     } @case ('export') {
     <ngt-export-icon [fill]="fill()" />
     } @case ('filter') {
@@ -4849,6 +4903,52 @@ class ToolbarInternalPresetsService {
     getPresetById(presetId) {
         return this.presetsSubject.value.find((p) => p.id === presetId);
     }
+    /**
+     * Toggle favorite status for a preset
+     */
+    toggleFavorite(presetId) {
+        const presets = this.presetsSubject.value.map((p) => p.id === presetId ? { ...p, isFavorite: !p.isFavorite } : p);
+        this.presetsSubject.next(presets);
+        this.storageService.set(this.STORAGE_KEY, presets);
+    }
+    /**
+     * Apply a preset with partial options (only selected categories)
+     */
+    async partialApplyPreset(presetId, options) {
+        const preset = this.presetsSubject.value.find((p) => p.id === presetId);
+        if (!preset)
+            return;
+        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);
+        }
+    }
+    /**
+     * Update only the metadata (name, description) of a preset without changing config
+     */
+    updatePresetMetadata(presetId, name, description) {
+        const presets = this.presetsSubject.value.map((preset) => {
+            if (preset.id === presetId) {
+                return {
+                    ...preset,
+                    name,
+                    description,
+                    updatedAt: new Date().toISOString(),
+                };
+            }
+            return preset;
+        });
+        this.presetsSubject.next(presets);
+        this.storageService.set(this.STORAGE_KEY, presets);
+    }
     /**
      * Capture current configuration from all tools
      */
@@ -4927,27 +5027,80 @@ class ToolbarPresetsToolComponent {
         this.appFeaturesService = inject(ToolbarInternalAppFeaturesService);
         this.languageService = inject(ToolbarInternalLanguageService);
         this.state = inject(ToolbarStateService);
-        // Signals
+        // View state signals
         this.viewMode = signal('list');
         this.searchQuery = signal('');
+        // 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);
-        // Track selected individual items
         this.selectedFlagIds = signal(new Set());
         this.selectedPermissionIds = signal(new Set());
         this.selectedFeatureIds = signal(new Set());
+        // Edit mode signals
+        this.editingPresetId = signal(null);
+        this.editName = signal('');
+        this.editDescription = signal('');
+        // Import mode signals
+        this.importJson = signal('');
+        this.importError = signal(null);
+        this.isDragOver = signal(false);
+        // Apply mode signals
+        this.applyingPresetId = signal(null);
+        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
+        this.toastMessage = signal(null);
+        this.toastType = signal('success');
+        // Validation signals
+        this.nameError = signal(null);
+        // Auto-dismiss toast effect
+        this.toastTimeout = null;
+        // Computed values
         this.presets = this.presetsService.presets;
         this.filteredPresets = computed(() => {
             const query = this.searchQuery().toLowerCase();
             return this.presets().filter((preset) => preset.name.toLowerCase().includes(query) ||
                 preset.description?.toLowerCase().includes(query));
         });
+        this.sortedPresets = computed(() => {
+            const presets = this.filteredPresets();
+            return [...presets].sort((a, b) => {
+                if (a.isFavorite && !b.isFavorite)
+                    return -1;
+                if (!a.isFavorite && b.isFavorite)
+                    return 1;
+                return 0;
+            });
+        });
         this.hasNoPresets = computed(() => this.presets().length === 0);
         this.hasNoFilteredPresets = computed(() => this.filteredPresets().length === 0);
+        this.editingPreset = computed(() => {
+            const id = this.editingPresetId();
+            if (!id)
+                return null;
+            return this.presets().find((p) => p.id === id) || null;
+        });
+        this.applyingPreset = computed(() => {
+            const id = this.applyingPresetId();
+            if (!id)
+                return null;
+            return this.presets().find((p) => p.id === id) || null;
+        });
+        this.deletePresetName = computed(() => {
+            const id = this.deletePresetId();
+            if (!id)
+                return '';
+            const preset = this.presets().find((p) => p.id === id);
+            return preset?.name || '';
+        });
         // Tool availability (based on config)
         this.isFeatureFlagsEnabled = computed(() => this.state.config().showFeatureFlagsTool ?? true);
         this.isPermissionsEnabled = computed(() => this.state.config().showPermissionsTool ?? true);
@@ -4972,15 +5125,38 @@ class ToolbarPresetsToolComponent {
             id: 'ngt-presets',
             isBeta: true,
         };
+        effect(() => {
+            const message = this.toastMessage();
+            if (message) {
+                if (this.toastTimeout) {
+                    clearTimeout(this.toastTimeout);
+                }
+                this.toastTimeout = setTimeout(() => {
+                    this.toastMessage.set(null);
+                }, 3000);
+            }
+        });
     }
-    // Public methods
+    // Toast helper
+    showToast(message, type = 'success') {
+        this.toastMessage.set(message);
+        this.toastType.set(type);
+    }
+    // View mode switching
     onSearchChange(query) {
         this.searchQuery.set(query);
     }
+    onSwitchToListMode() {
+        this.viewMode.set('list');
+        this.nameError.set(null);
+        this.importError.set(null);
+        this.deletePresetId.set(null);
+    }
     onSwitchToCreateMode() {
         this.viewMode.set('create');
         this.presetName.set('');
         this.presetDescription.set('');
+        this.nameError.set(null);
         // Reset checkboxes - only enable categories that have forced items
         this.includeFeatureFlags.set(this.getCurrentFlagsCount() > 0);
         this.includePermissions.set(this.getCurrentPermissionsCount() > 0);
@@ -4992,14 +5168,33 @@ class ToolbarPresetsToolComponent {
         this.selectedPermissionIds.set(new Set(this.forcedPermissions().map((p) => p.id)));
         this.selectedFeatureIds.set(new Set(this.forcedAppFeatures().map((f) => f.id)));
     }
-    onSwitchToListMode() {
-        this.viewMode.set('list');
+    onSwitchToImportMode() {
+        this.viewMode.set('import');
+        this.importJson.set('');
+        this.importError.set(null);
+        this.isDragOver.set(false);
+    }
+    // Create preset
+    onPresetNameChange(value) {
+        this.presetName.set(value);
+        if (value.trim()) {
+            this.nameError.set(null);
+        }
     }
     onSavePreset(event) {
         event.preventDefault();
-        if (!this.presetName())
+        const name = this.presetName().trim();
+        if (!name) {
+            this.nameError.set('Name is required');
+            return;
+        }
+        // Check for duplicate names
+        const existingPreset = this.presets().find((p) => p.name.toLowerCase() === name.toLowerCase());
+        if (existingPreset) {
+            this.nameError.set('A preset with this name already exists');
             return;
-        this.presetsService.saveCurrentAsPreset(this.presetName(), this.presetDescription(), {
+        }
+        this.presetsService.saveCurrentAsPreset(name, this.presetDescription(), {
             includeFeatureFlags: this.includeFeatureFlags(),
             includePermissions: this.includePermissions(),
             includeAppFeatures: this.includeAppFeatures(),
@@ -5008,14 +5203,153 @@ class ToolbarPresetsToolComponent {
             selectedPermissionIds: Array.from(this.selectedPermissionIds()),
             selectedFeatureIds: Array.from(this.selectedFeatureIds()),
         });
+        this.showToast('Preset created successfully');
         this.onSwitchToListMode();
     }
-    onApplyPreset(presetId) {
-        this.presetsService.applyPreset(presetId);
+    // Edit preset
+    onStartEdit(presetId) {
+        const preset = this.presets().find((p) => p.id === presetId);
+        if (!preset)
+            return;
+        this.editingPresetId.set(presetId);
+        this.editName.set(preset.name);
+        this.editDescription.set(preset.description || '');
+        this.nameError.set(null);
+        this.viewMode.set('edit');
+    }
+    onEditNameChange(value) {
+        this.editName.set(value);
+        if (value.trim()) {
+            this.nameError.set(null);
+        }
+    }
+    onSaveEdit(event) {
+        event.preventDefault();
+        const name = this.editName().trim();
+        const presetId = this.editingPresetId();
+        if (!name) {
+            this.nameError.set('Name is required');
+            return;
+        }
+        if (!presetId)
+            return;
+        // Check for duplicate names (excluding current preset)
+        const existingPreset = this.presets().find((p) => p.id !== presetId && p.name.toLowerCase() === name.toLowerCase());
+        if (existingPreset) {
+            this.nameError.set('A preset with this name already exists');
+            return;
+        }
+        this.presetsService.updatePresetMetadata(presetId, name, this.editDescription());
+        this.showToast('Preset updated successfully');
+        this.onSwitchToListMode();
+    }
+    onReplaceConfig() {
+        const presetId = this.editingPresetId();
+        if (!presetId)
+            return;
+        this.presetsService.updatePreset(presetId);
+        this.showToast('Configuration replaced with current state');
+    }
+    // Import preset
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
     }
+    onFileDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.processFile(files[0]);
+        }
+    }
+    onFileSelect(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.processFile(input.files[0]);
+        }
+    }
+    processFile(file) {
+        if (!file.name.endsWith('.json')) {
+            this.importError.set('Please select a .json file');
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const content = e.target?.result;
+            this.importJson.set(content);
+            this.importError.set(null);
+        };
+        reader.onerror = () => {
+            this.importError.set('Failed to read file');
+        };
+        reader.readAsText(file);
+    }
+    onImportJsonChange(event) {
+        const textarea = event.target;
+        this.importJson.set(textarea.value);
+        this.importError.set(null);
+    }
+    onImportPreset() {
+        const json = this.importJson().trim();
+        if (!json) {
+            this.importError.set('Please provide JSON content');
+            return;
+        }
+        try {
+            const parsed = JSON.parse(json);
+            // Validate required fields
+            if (!parsed.name) {
+                this.importError.set('Preset must have a name');
+                return;
+            }
+            if (!parsed.config) {
+                this.importError.set('Preset must have a config object');
+                return;
+            }
+            this.presetsService.addPreset(parsed);
+            this.showToast('Preset imported successfully');
+            this.onSwitchToListMode();
+        }
+        catch {
+            this.importError.set('Invalid JSON format');
+        }
+    }
+    // Apply preset (partial)
+    onStartApply(presetId) {
+        this.applyingPresetId.set(presetId);
+        this.applyFeatureFlags.set(true);
+        this.applyPermissions.set(true);
+        this.applyAppFeatures.set(true);
+        this.applyLanguage.set(true);
+        this.viewMode.set('apply');
+    }
+    onConfirmPartialApply() {
+        const presetId = this.applyingPresetId();
+        if (!presetId)
+            return;
+        this.presetsService.partialApplyPreset(presetId, {
+            applyFeatureFlags: this.applyFeatureFlags(),
+            applyPermissions: this.applyPermissions(),
+            applyAppFeatures: this.applyAppFeatures(),
+            applyLanguage: this.applyLanguage(),
+        });
+        this.showToast('Preset applied successfully');
+        this.onSwitchToListMode();
+    }
+    // Update preset (with current state)
     onUpdatePreset(presetId) {
         this.presetsService.updatePreset(presetId);
+        this.showToast('Preset updated with current state');
     }
+    // Export preset
     onExportPreset(presetId) {
         const preset = this.presets().find((p) => p.id === presetId);
         if (!preset)
@@ -5028,11 +5362,25 @@ class ToolbarPresetsToolComponent {
         link.download = `preset-${preset.name.toLowerCase().replace(/\s+/g, '-')}.json`;
         link.click();
         URL.revokeObjectURL(url);
+        this.showToast('Preset exported');
     }
+    // Delete preset
     onDeletePreset(presetId) {
-        if (confirm('Are you sure you want to delete this preset?')) {
+        this.deletePresetId.set(presetId);
+        this.viewMode.set('delete');
+    }
+    onConfirmDelete() {
+        const presetId = this.deletePresetId();
+        if (presetId) {
             this.presetsService.deletePreset(presetId);
+            this.showToast('Preset deleted');
         }
+        this.deletePresetId.set(null);
+        this.viewMode.set('list');
+    }
+    // Favorites
+    onToggleFavorite(presetId) {
+        this.presetsService.toggleFavorite(presetId);
     }
     // Protected methods
     getCurrentFlagsCount() {
@@ -5053,9 +5401,44 @@ class ToolbarPresetsToolComponent {
     formatDate(isoString) {
         return new Date(isoString).toLocaleDateString();
     }
-    /**
-     * Toggle selection of an individual item
-     */
+    getPresetTooltip(preset) {
+        const lines = [];
+        // Feature Flags
+        const flagsEnabled = preset.config.featureFlags.enabled;
+        const flagsDisabled = preset.config.featureFlags.disabled;
+        if (flagsEnabled.length > 0 || flagsDisabled.length > 0) {
+            lines.push('Feature Flags:');
+            flagsEnabled.forEach(id => lines.push(`  ✓ ${id}: ON`));
+            flagsDisabled.forEach(id => lines.push(`  ✗ ${id}: OFF`));
+        }
+        // Permissions
+        const permsGranted = preset.config.permissions.granted;
+        const permsDenied = preset.config.permissions.denied;
+        if (permsGranted.length > 0 || permsDenied.length > 0) {
+            if (lines.length > 0)
+                lines.push('');
+            lines.push('Permissions:');
+            permsGranted.forEach(id => lines.push(`  ✓ ${id}: GRANTED`));
+            permsDenied.forEach(id => lines.push(`  ✗ ${id}: DENIED`));
+        }
+        // App Features
+        const featuresEnabled = preset.config.appFeatures.enabled;
+        const featuresDisabled = preset.config.appFeatures.disabled;
+        if (featuresEnabled.length > 0 || featuresDisabled.length > 0) {
+            if (lines.length > 0)
+                lines.push('');
+            lines.push('App Features:');
+            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) {
         const current = new Set(signal());
         if (current.has(itemId)) {
@@ -5066,9 +5449,6 @@ class ToolbarPresetsToolComponent {
         }
         signal.set(current);
     }
-    /**
-     * Check if an item is selected
-     */
     isItemSelected(selectedSet, itemId) {
         return selectedSet.has(itemId);
     }
@@ -5076,8 +5456,17 @@ class ToolbarPresetsToolComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarPresetsToolComponent, isStandalone: true, selector: "ngt-presets-tool", ngImport: i0, template: `
     <ngt-toolbar-tool [options]="options" title="Presets" icon="layout">
       <div class="container">
+        <!-- Toast Notification -->
+        @if (toastMessage()) {
+        <div class="toast" [class.toast--success]="toastType() === 'success'" [class.toast--error]="toastType() === 'error'">
+          <span class="toast__icon">{{ toastType() === 'success' ? '✓' : '✕' }}</span>
+          <span class="toast__message">{{ toastMessage() }}</span>
+        </div>
+        }
+
+
         <!-- Mode Toggle -->
-        @if (!hasNoPresets() || viewMode() === 'create') {
+        @if (!hasNoPresets() || viewMode() !== 'list') {
         <div class="tool-header">
           @if (viewMode() === 'list') {
           <ngt-input
@@ -5086,18 +5475,24 @@ class ToolbarPresetsToolComponent {
             placeholder="Search presets..."
             [ariaLabel]="'Search presets'"
           />
+          <ngt-button
+            (click)="onSwitchToImportMode()"
+            [ariaLabel]="'Import preset'"
+          >
+            Import
+          </ngt-button>
           <ngt-button
             (click)="onSwitchToCreateMode()"
             [ariaLabel]="'Create new preset'"
           >
-            New Preset
+            New
           </ngt-button>
           } @else {
           <ngt-button
             (click)="onSwitchToListMode()"
             [ariaLabel]="'Back to list'"
           >
-            ← Back to List
+            ← Back
           </ngt-button>
           }
         </div>
@@ -5106,13 +5501,20 @@ class ToolbarPresetsToolComponent {
         <!-- Create Form -->
         @if (viewMode() === 'create') {
         <form (submit)="onSavePreset($event)" class="preset-form">
-          <ngt-input
-            label="Preset Name"
-            [value]="presetName()"
-            (valueChange)="presetName.set($event)"
-            placeholder="e.g., Admin User - Full Access"
-            [ariaLabel]="'Preset name'"
-          />
+          <h3 class="form-title">Create Preset</h3>
+          <p class="form-hint">This will save the current forced values from other tools. Only items you've explicitly set will be included.</p>
+          <div class="form-field">
+            <ngt-input
+              label="Preset Name *"
+              [value]="presetName()"
+              (valueChange)="onPresetNameChange($event)"
+              placeholder="e.g., Admin User - Full Access"
+              [ariaLabel]="'Preset name'"
+            />
+            @if (nameError()) {
+            <span class="field-error">{{ nameError() }}</span>
+            }
+          </div>
           <ngt-input
             label="Description (optional)"
             [value]="presetDescription()"
@@ -5240,11 +5642,301 @@ class ToolbarPresetsToolComponent {
           </div>
 
           <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">Cancel</ngt-button>
             <ngt-button type="submit">Save Preset</ngt-button>
           </div>
         </form>
         }
 
+        <!-- Edit Form -->
+        @if (viewMode() === 'edit') {
+        <form (submit)="onSaveEdit($event)" class="preset-form">
+          <h3 class="form-title">Edit Preset</h3>
+          <div class="form-field">
+            <ngt-input
+              label="Preset Name *"
+              [value]="editName()"
+              (valueChange)="onEditNameChange($event)"
+              placeholder="e.g., Admin User - Full Access"
+              [ariaLabel]="'Preset name'"
+            />
+            @if (nameError()) {
+            <span class="field-error">{{ nameError() }}</span>
+            }
+          </div>
+          <ngt-input
+            label="Description (optional)"
+            [value]="editDescription()"
+            (valueChange)="editDescription.set($event)"
+            placeholder="Brief description of this preset"
+            [ariaLabel]="'Preset description'"
+          />
+
+          <!-- Show saved configuration read-only -->
+          @if (editingPreset()) {
+          <div class="config-preview">
+            <h4>Saved Configuration</h4>
+            @if (editingPreset()!.config.featureFlags.enabled.length > 0 || editingPreset()!.config.featureFlags.disabled.length > 0) {
+            <div class="config-category">
+              <span class="config-category__title">Feature Flags ({{ editingPreset()!.config.featureFlags.enabled.length + editingPreset()!.config.featureFlags.disabled.length }})</span>
+              <div class="config-items">
+                @for (id of editingPreset()!.config.featureFlags.enabled; track id) {
+                <span class="config-item config-item--on">{{ id }}: ON</span>
+                }
+                @for (id of editingPreset()!.config.featureFlags.disabled; track id) {
+                <span class="config-item config-item--off">{{ id }}: OFF</span>
+                }
+              </div>
+            </div>
+            }
+            @if (editingPreset()!.config.permissions.granted.length > 0 || editingPreset()!.config.permissions.denied.length > 0) {
+            <div class="config-category">
+              <span class="config-category__title">Permissions ({{ editingPreset()!.config.permissions.granted.length + editingPreset()!.config.permissions.denied.length }})</span>
+              <div class="config-items">
+                @for (id of editingPreset()!.config.permissions.granted; track id) {
+                <span class="config-item config-item--on">{{ id }}: GRANTED</span>
+                }
+                @for (id of editingPreset()!.config.permissions.denied; track id) {
+                <span class="config-item config-item--off">{{ id }}: DENIED</span>
+                }
+              </div>
+            </div>
+            }
+            @if (editingPreset()!.config.appFeatures.enabled.length > 0 || editingPreset()!.config.appFeatures.disabled.length > 0) {
+            <div class="config-category">
+              <span class="config-category__title">App Features ({{ editingPreset()!.config.appFeatures.enabled.length + editingPreset()!.config.appFeatures.disabled.length }})</span>
+              <div class="config-items">
+                @for (id of editingPreset()!.config.appFeatures.enabled; track id) {
+                <span class="config-item config-item--on">{{ id }}: ON</span>
+                }
+                @for (id of editingPreset()!.config.appFeatures.disabled; track id) {
+                <span class="config-item config-item--off">{{ id }}: OFF</span>
+                }
+              </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>
+          </div>
+          }
+
+          <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">Cancel</ngt-button>
+            <ngt-button type="submit">Save Changes</ngt-button>
+          </div>
+        </form>
+        }
+
+        <!-- Import View -->
+        @if (viewMode() === 'import') {
+        <div class="import-view">
+          <h3 class="form-title">Import Preset</h3>
+
+          <!-- File Drop Zone -->
+          <div
+            class="drop-zone"
+            [class.drop-zone--active]="isDragOver()"
+            (dragover)="onDragOver($event)"
+            (dragleave)="onDragLeave($event)"
+            (drop)="onFileDrop($event)"
+            (click)="fileInput.click()"
+          >
+            <input
+              #fileInput
+              type="file"
+              accept=".json"
+              (change)="onFileSelect($event)"
+              hidden
+            />
+            <span class="drop-zone__icon">📁</span>
+            <span class="drop-zone__text">Drop a .json file here</span>
+            <span class="drop-zone__hint">or click to browse</span>
+          </div>
+
+          <div class="divider">
+            <span>or paste JSON</span>
+          </div>
+
+          <!-- JSON Textarea -->
+          <textarea
+            class="json-textarea"
+            [value]="importJson()"
+            (input)="onImportJsonChange($event)"
+            placeholder='{"name": "...", "config": { ... }}'
+          ></textarea>
+
+          @if (importError()) {
+          <span class="field-error">{{ importError() }}</span>
+          }
+
+          <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">Cancel</ngt-button>
+            <ngt-button (click)="onImportPreset()">Import Preset</ngt-button>
+          </div>
+        </div>
+        }
+
+        <!-- Partial Apply View -->
+        @if (viewMode() === 'apply') {
+        <div class="apply-view">
+          <h3 class="form-title">Apply: {{ applyingPreset()?.name }}</h3>
+          <p class="apply-description">Select which parts to apply</p>
+
+          @if (applyingPreset()) {
+          <div class="apply-categories">
+            <!-- Feature Flags -->
+            @if (applyingPreset()!.config.featureFlags.enabled.length > 0 || applyingPreset()!.config.featureFlags.disabled.length > 0) {
+            <div class="apply-category" [class.apply-category--disabled]="!applyFeatureFlags()">
+              <label class="apply-category__header">
+                <input
+                  type="checkbox"
+                  [checked]="applyFeatureFlags()"
+                  (change)="applyFeatureFlags.set(!applyFeatureFlags())"
+                />
+                <span>Feature Flags ({{ applyingPreset()!.config.featureFlags.enabled.length + applyingPreset()!.config.featureFlags.disabled.length }})</span>
+              </label>
+              @if (applyFeatureFlags()) {
+              <div class="apply-diff">
+                @for (id of applyingPreset()!.config.featureFlags.enabled; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--on">ON</span>
+                </div>
+                }
+                @for (id of applyingPreset()!.config.featureFlags.disabled; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--off">OFF</span>
+                </div>
+                }
+              </div>
+              }
+            </div>
+            }
+
+            <!-- Permissions -->
+            @if (applyingPreset()!.config.permissions.granted.length > 0 || applyingPreset()!.config.permissions.denied.length > 0) {
+            <div class="apply-category" [class.apply-category--disabled]="!applyPermissions()">
+              <label class="apply-category__header">
+                <input
+                  type="checkbox"
+                  [checked]="applyPermissions()"
+                  (change)="applyPermissions.set(!applyPermissions())"
+                />
+                <span>Permissions ({{ applyingPreset()!.config.permissions.granted.length + applyingPreset()!.config.permissions.denied.length }})</span>
+              </label>
+              @if (applyPermissions()) {
+              <div class="apply-diff">
+                @for (id of applyingPreset()!.config.permissions.granted; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--on">GRANTED</span>
+                </div>
+                }
+                @for (id of applyingPreset()!.config.permissions.denied; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--off">DENIED</span>
+                </div>
+                }
+              </div>
+              }
+            </div>
+            }
+
+            <!-- App Features -->
+            @if (applyingPreset()!.config.appFeatures.enabled.length > 0 || applyingPreset()!.config.appFeatures.disabled.length > 0) {
+            <div class="apply-category" [class.apply-category--disabled]="!applyAppFeatures()">
+              <label class="apply-category__header">
+                <input
+                  type="checkbox"
+                  [checked]="applyAppFeatures()"
+                  (change)="applyAppFeatures.set(!applyAppFeatures())"
+                />
+                <span>App Features ({{ applyingPreset()!.config.appFeatures.enabled.length + applyingPreset()!.config.appFeatures.disabled.length }})</span>
+              </label>
+              @if (applyAppFeatures()) {
+              <div class="apply-diff">
+                @for (id of applyingPreset()!.config.appFeatures.enabled; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--on">ON</span>
+                </div>
+                }
+                @for (id of applyingPreset()!.config.appFeatures.disabled; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--off">OFF</span>
+                </div>
+                }
+              </div>
+              }
+            </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>
+          }
+
+          <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">Cancel</ngt-button>
+            <ngt-button (click)="onConfirmPartialApply()">Apply Selected</ngt-button>
+          </div>
+        </div>
+        }
+
+        <!-- Delete Confirmation View -->
+        @if (viewMode() === 'delete') {
+        <div class="delete-view">
+          <div class="delete-view__content">
+            <div class="delete-view__icon">🗑️</div>
+            <h3 class="delete-view__title">Delete "{{ deletePresetName() }}"?</h3>
+            <p class="delete-view__description">
+              This preset will be permanently removed.
+              This action cannot be undone.
+            </p>
+          </div>
+          <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">← Back</ngt-button>
+            <button class="delete-button" (click)="onConfirmDelete()">Delete Preset</button>
+          </div>
+        </div>
+        }
+
         <!-- Empty State -->
         @if (viewMode() === 'list' && hasNoPresets()) {
         <div class="empty">
@@ -5263,83 +5955,49 @@ class ToolbarPresetsToolComponent {
         } @else if (viewMode() === 'list') {
         <!-- Preset List -->
         <div class="preset-list">
-          @for (preset of filteredPresets(); track preset.id) {
-          <div class="preset-card">
+          @for (preset of sortedPresets(); track preset.id) {
+          <div class="preset-card" [title]="getPresetTooltip(preset)">
             <div class="preset-card__header">
-              <h3>{{ preset.name }}</h3>
+              <button
+                class="favorite-button"
+                [class.favorite-button--active]="preset.isFavorite"
+                (click)="onToggleFavorite(preset.id); $event.stopPropagation()"
+                [attr.aria-label]="preset.isFavorite ? 'Remove from favorites' : 'Add to favorites'"
+              >{{ preset.isFavorite ? '★' : '☆' }}</button>
+              <span class="preset-card__name">{{ preset.name }}</span>
+              @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)="onApplyPreset(preset.id)"
-                  [attr.aria-label]="'Apply preset ' + preset.name"
-                  title="Apply preset"
-                >
-                  <ngt-icon name="refresh" />
-                </button>
-                <button
-                  class="icon-button"
-                  (click)="onUpdatePreset(preset.id)"
-                  [attr.aria-label]="'Update preset ' + preset.name"
-                  title="Update with current state"
-                >
-                  <ngt-icon name="gear" />
-                </button>
-                <button
-                  class="icon-button"
-                  (click)="onExportPreset(preset.id)"
-                  [attr.aria-label]="'Export preset ' + preset.name"
-                  title="Export as JSON"
-                >
-                  <ngt-icon name="export" />
-                </button>
-                <button
-                  class="icon-button"
-                  (click)="onDeletePreset(preset.id)"
-                  [attr.aria-label]="'Delete preset ' + preset.name"
-                  title="Delete preset"
-                >
-                  <ngt-icon name="trash" />
-                </button>
+                <button class="icon-button" (click)="onStartApply(preset.id)"><ngt-icon name="refresh" /></button>
+                @if (!preset.isSystem) {
+                <button class="icon-button" (click)="onStartEdit(preset.id)"><ngt-icon name="edit" /></button>
+                <button class="icon-button" (click)="onUpdatePreset(preset.id)"><ngt-icon name="gear" /></button>
+                }
+                <button class="icon-button" (click)="onExportPreset(preset.id)"><ngt-icon name="export" /></button>
+                @if (!preset.isSystem) {
+                <button class="icon-button" (click)="onDeletePreset(preset.id)"><ngt-icon name="trash" /></button>
+                }
               </div>
             </div>
             @if (preset.description) {
-            <p class="preset-card__description">{{ preset.description }}</p>
-            }
-            <div class="preset-card__meta">
-              <span>Updated: {{ formatDate(preset.updatedAt) }}</span>
+            <div class="preset-card__row preset-card__row--meta">
+              <span class="preset-card__description">{{ preset.description }}</span>
             </div>
-            <!-- Preview of preset config -->
-            <div class="preset-card__preview">
-              @if (preset.config.featureFlags.enabled.length > 0 ||
-              preset.config.featureFlags.disabled.length > 0) {
-              <span class="badge">
-                {{
-                  preset.config.featureFlags.enabled.length +
-                    preset.config.featureFlags.disabled.length
-                }}
-                flags
-              </span>
-              } @if (preset.config.permissions.granted.length > 0 ||
-              preset.config.permissions.denied.length > 0) {
-              <span class="badge">
-                {{
-                  preset.config.permissions.granted.length +
-                    preset.config.permissions.denied.length
-                }}
-                perms
-              </span>
-              } @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">{{ preset.config.language }}</span>
+            }
+            <div class="preset-card__row preset-card__row--badges">
+              @if (preset.config.featureFlags.enabled.length > 0 || preset.config.featureFlags.disabled.length > 0) {
+              <span class="badge">{{ preset.config.featureFlags.enabled.length + preset.config.featureFlags.disabled.length }} flags</span>
+              }
+              @if (preset.config.permissions.granted.length > 0 || preset.config.permissions.denied.length > 0) {
+              <span class="badge">{{ preset.config.permissions.granted.length + preset.config.permissions.denied.length }} perms</span>
               }
+              @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>
           </div>
           }
@@ -5347,7 +6005,7 @@ class ToolbarPresetsToolComponent {
         }
       </div>
     </ngt-toolbar-tool>
-  `, isInline: true, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.tool-header{position:relative;flex-shrink:0;display:flex;gap:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-md);ngt-input{flex:1}ngt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ngt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ngt-border-subtle);border-radius:var(--ngt-border-radius-medium);padding:var(--ngt-spacing-md);background:transparent;color:var(--ngt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ngt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ngt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ngt-spacing-sm);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ngt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ngt-border-primary);border-radius:4px;&:hover{background:var(--ngt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ngt-border-primary) var(--ngt-background-secondary)}.preset-card{background:var(--ngt-background-secondary);padding:var(--ngt-spacing-md);border-radius:var(--ngt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ngt-spacing-sm)}.preset-card__header{display:flex;justify-content:space-between;align-items:center;gap:var(--ngt-spacing-sm);h3{margin:0;font-size:var(--ngt-font-size-md);color:var(--ngt-text-primary);flex:1}}.preset-card__actions{display:flex;gap:var(--ngt-spacing-xs)}.icon-button{background:transparent;border:none;cursor:pointer;padding:var(--ngt-spacing-xs);border-radius:var(--ngt-border-radius-small);color:var(--ngt-text-secondary);display:flex;align-items:center;justify-content:center;&:hover{background:var(--ngt-hover-bg);color:var(--ngt-text-primary)}ngt-icon{width:16px;height:16px}}.preset-card__description{margin:0;font-size:var(--ngt-font-size-sm);color:var(--ngt-text-secondary)}.preset-card__meta{font-size:var(--ngt-font-size-xs);color:var(--ngt-text-muted);span{margin-right:var(--ngt-spacing-sm)}}.preset-card__preview{display:flex;gap:var(--ngt-spacing-xs);flex-wrap:wrap}.badge{background:var(--ngt-primary-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:var(--ngt-font-size-xs);font-weight:500}.preset-form{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ngt-spacing-md);padding:var(--ngt-spacing-md);ngt-input{width:100%}}.preset-summary{background:var(--ngt-background-secondary);padding:var(--ngt-spacing-md);border-radius:var(--ngt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ngt-spacing-sm);h4{margin:0;font-size:var(--ngt-font-size-sm);color:var(--ngt-text-primary)}}.category-section{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs)}.checkbox-option{display:flex;align-items:center;gap:var(--ngt-spacing-sm);cursor:pointer;color:var(--ngt-text-secondary);font-size:var(--ngt-font-size-sm);input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--ngt-primary);&:disabled{cursor:not-allowed;opacity:.5}}&:has(input:disabled){opacity:.6;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 var(--ngt-spacing-lg);display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);font-size:var(--ngt-font-size-xs);li{background:rgba(var(--ngt-primary-rgb),.05);border-radius:var(--ngt-border-radius-small);border-left:2px solid rgba(var(--ngt-primary-rgb),.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);cursor:pointer;gap:var(--ngt-spacing-sm);input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:var(--ngt-primary);flex-shrink:0}&:hover{background:rgba(var(--ngt-primary-rgb),.08)}}.item-name{color:var(--ngt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:2px 6px;border-radius:var(--ngt-border-radius-small);font-size:10px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;&.enabled{background:#22c55e26;color:#22c55e}&.disabled{background:#ef444426;color:#ef4444}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ngt-spacing-sm)}\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: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ngt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarButtonComponent, selector: "ngt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-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(--ngt-spacing-md);left:var(--ngt-spacing-md);right:var(--ngt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ngt-spacing-sm);padding:var(--ngt-spacing-sm) var(--ngt-spacing-md);border-radius:var(--ngt-border-radius-small);font-size:var(--ngt-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(--ngt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ngt-spacing-lg) var(--ngt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ngt-spacing-md)}.delete-view__title{margin:0 0 var(--ngt-spacing-sm);font-size:var(--ngt-font-size-md);color:var(--ngt-text-primary)}.delete-view__description{margin:0;font-size:var(--ngt-font-size-sm);color:var(--ngt-text-secondary);line-height:1.5}.delete-button{background:#ef4444;color:#fff;border:none;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md);border-radius:var(--ngt-border-radius-small);cursor:pointer;font-size:var(--ngt-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(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-md);ngt-input{flex:1}ngt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ngt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ngt-border-subtle);border-radius:var(--ngt-border-radius-medium);padding:var(--ngt-spacing-md);background:transparent;color:var(--ngt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ngt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ngt-spacing-xs);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ngt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ngt-border-primary);border-radius:4px;&:hover{background:var(--ngt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ngt-border-primary) var(--ngt-background-secondary)}.preset-card{background:var(--ngt-background-secondary);padding:6px var(--ngt-spacing-sm);border-radius:var(--ngt-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(--ngt-font-size-sm);font-weight:600;color:var(--ngt-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(--ngt-border-primary);color:var(--ngt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ngt-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(--ngt-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(--ngt-hover-bg);color:var(--ngt-text-primary);opacity:1}ngt-icon,ngt-icon>*,svg{display:block;width:12px!important;height:12px!important}}.preset-card__description{font-size:11px;color:var(--ngt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ngt-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(--ngt-spacing-sm);padding:var(--ngt-spacing-sm);ngt-input{width:100%}}.form-title{margin:0;font-size:var(--ngt-font-size-sm);font-weight:600;color:var(--ngt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ngt-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(--ngt-background-secondary);padding:var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ngt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ngt-spacing-xs);cursor:pointer;color:var(--ngt-text-primary);font-size:var(--ngt-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(--ngt-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(--ngt-spacing-sm);margin-top:auto;padding-top:var(--ngt-spacing-sm)}.config-preview{background:var(--ngt-background-secondary);padding:var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ngt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ngt-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(--ngt-background-primary);color:var(--ngt-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(--ngt-border-primary);padding:6px var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-small);color:var(--ngt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ngt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ngt-spacing-md);border:2px dashed var(--ngt-border-primary);border-radius:var(--ngt-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(--ngt-font-size-sm);color:var(--ngt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ngt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ngt-spacing-sm);color:var(--ngt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ngt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ngt-spacing-xs);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-small);background:var(--ngt-background-secondary);color:var(--ngt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ngt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ngt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs)}.apply-category{background:var(--ngt-background-secondary);border-radius:var(--ngt-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(--ngt-spacing-xs);padding:6px var(--ngt-spacing-sm);cursor:pointer;font-size:var(--ngt-font-size-sm);color:var(--ngt-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(--ngt-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(--ngt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ngt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ngt-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: "ngt-toolbar-tool", inputs: ["options", "icon", "title", "badge"] }, { kind: "component", type: ToolbarInputComponent, selector: "ngt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: ToolbarButtonComponent, selector: "ngt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: ToolbarIconComponent, selector: "ngt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarPresetsToolComponent, decorators: [{
             type: Component,
@@ -5360,8 +6018,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     ], template: `
     <ngt-toolbar-tool [options]="options" title="Presets" icon="layout">
       <div class="container">
+        <!-- Toast Notification -->
+        @if (toastMessage()) {
+        <div class="toast" [class.toast--success]="toastType() === 'success'" [class.toast--error]="toastType() === 'error'">
+          <span class="toast__icon">{{ toastType() === 'success' ? '✓' : '✕' }}</span>
+          <span class="toast__message">{{ toastMessage() }}</span>
+        </div>
+        }
+
+
         <!-- Mode Toggle -->
-        @if (!hasNoPresets() || viewMode() === 'create') {
+        @if (!hasNoPresets() || viewMode() !== 'list') {
         <div class="tool-header">
           @if (viewMode() === 'list') {
           <ngt-input
@@ -5370,18 +6037,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             placeholder="Search presets..."
             [ariaLabel]="'Search presets'"
           />
+          <ngt-button
+            (click)="onSwitchToImportMode()"
+            [ariaLabel]="'Import preset'"
+          >
+            Import
+          </ngt-button>
           <ngt-button
             (click)="onSwitchToCreateMode()"
             [ariaLabel]="'Create new preset'"
           >
-            New Preset
+            New
           </ngt-button>
           } @else {
           <ngt-button
             (click)="onSwitchToListMode()"
             [ariaLabel]="'Back to list'"
           >
-            ← Back to List
+            ← Back
           </ngt-button>
           }
         </div>
@@ -5390,13 +6063,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         <!-- Create Form -->
         @if (viewMode() === 'create') {
         <form (submit)="onSavePreset($event)" class="preset-form">
-          <ngt-input
-            label="Preset Name"
-            [value]="presetName()"
-            (valueChange)="presetName.set($event)"
-            placeholder="e.g., Admin User - Full Access"
-            [ariaLabel]="'Preset name'"
-          />
+          <h3 class="form-title">Create Preset</h3>
+          <p class="form-hint">This will save the current forced values from other tools. Only items you've explicitly set will be included.</p>
+          <div class="form-field">
+            <ngt-input
+              label="Preset Name *"
+              [value]="presetName()"
+              (valueChange)="onPresetNameChange($event)"
+              placeholder="e.g., Admin User - Full Access"
+              [ariaLabel]="'Preset name'"
+            />
+            @if (nameError()) {
+            <span class="field-error">{{ nameError() }}</span>
+            }
+          </div>
           <ngt-input
             label="Description (optional)"
             [value]="presetDescription()"
@@ -5524,11 +6204,301 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
           </div>
 
           <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">Cancel</ngt-button>
             <ngt-button type="submit">Save Preset</ngt-button>
           </div>
         </form>
         }
 
+        <!-- Edit Form -->
+        @if (viewMode() === 'edit') {
+        <form (submit)="onSaveEdit($event)" class="preset-form">
+          <h3 class="form-title">Edit Preset</h3>
+          <div class="form-field">
+            <ngt-input
+              label="Preset Name *"
+              [value]="editName()"
+              (valueChange)="onEditNameChange($event)"
+              placeholder="e.g., Admin User - Full Access"
+              [ariaLabel]="'Preset name'"
+            />
+            @if (nameError()) {
+            <span class="field-error">{{ nameError() }}</span>
+            }
+          </div>
+          <ngt-input
+            label="Description (optional)"
+            [value]="editDescription()"
+            (valueChange)="editDescription.set($event)"
+            placeholder="Brief description of this preset"
+            [ariaLabel]="'Preset description'"
+          />
+
+          <!-- Show saved configuration read-only -->
+          @if (editingPreset()) {
+          <div class="config-preview">
+            <h4>Saved Configuration</h4>
+            @if (editingPreset()!.config.featureFlags.enabled.length > 0 || editingPreset()!.config.featureFlags.disabled.length > 0) {
+            <div class="config-category">
+              <span class="config-category__title">Feature Flags ({{ editingPreset()!.config.featureFlags.enabled.length + editingPreset()!.config.featureFlags.disabled.length }})</span>
+              <div class="config-items">
+                @for (id of editingPreset()!.config.featureFlags.enabled; track id) {
+                <span class="config-item config-item--on">{{ id }}: ON</span>
+                }
+                @for (id of editingPreset()!.config.featureFlags.disabled; track id) {
+                <span class="config-item config-item--off">{{ id }}: OFF</span>
+                }
+              </div>
+            </div>
+            }
+            @if (editingPreset()!.config.permissions.granted.length > 0 || editingPreset()!.config.permissions.denied.length > 0) {
+            <div class="config-category">
+              <span class="config-category__title">Permissions ({{ editingPreset()!.config.permissions.granted.length + editingPreset()!.config.permissions.denied.length }})</span>
+              <div class="config-items">
+                @for (id of editingPreset()!.config.permissions.granted; track id) {
+                <span class="config-item config-item--on">{{ id }}: GRANTED</span>
+                }
+                @for (id of editingPreset()!.config.permissions.denied; track id) {
+                <span class="config-item config-item--off">{{ id }}: DENIED</span>
+                }
+              </div>
+            </div>
+            }
+            @if (editingPreset()!.config.appFeatures.enabled.length > 0 || editingPreset()!.config.appFeatures.disabled.length > 0) {
+            <div class="config-category">
+              <span class="config-category__title">App Features ({{ editingPreset()!.config.appFeatures.enabled.length + editingPreset()!.config.appFeatures.disabled.length }})</span>
+              <div class="config-items">
+                @for (id of editingPreset()!.config.appFeatures.enabled; track id) {
+                <span class="config-item config-item--on">{{ id }}: ON</span>
+                }
+                @for (id of editingPreset()!.config.appFeatures.disabled; track id) {
+                <span class="config-item config-item--off">{{ id }}: OFF</span>
+                }
+              </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>
+          </div>
+          }
+
+          <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">Cancel</ngt-button>
+            <ngt-button type="submit">Save Changes</ngt-button>
+          </div>
+        </form>
+        }
+
+        <!-- Import View -->
+        @if (viewMode() === 'import') {
+        <div class="import-view">
+          <h3 class="form-title">Import Preset</h3>
+
+          <!-- File Drop Zone -->
+          <div
+            class="drop-zone"
+            [class.drop-zone--active]="isDragOver()"
+            (dragover)="onDragOver($event)"
+            (dragleave)="onDragLeave($event)"
+            (drop)="onFileDrop($event)"
+            (click)="fileInput.click()"
+          >
+            <input
+              #fileInput
+              type="file"
+              accept=".json"
+              (change)="onFileSelect($event)"
+              hidden
+            />
+            <span class="drop-zone__icon">📁</span>
+            <span class="drop-zone__text">Drop a .json file here</span>
+            <span class="drop-zone__hint">or click to browse</span>
+          </div>
+
+          <div class="divider">
+            <span>or paste JSON</span>
+          </div>
+
+          <!-- JSON Textarea -->
+          <textarea
+            class="json-textarea"
+            [value]="importJson()"
+            (input)="onImportJsonChange($event)"
+            placeholder='{"name": "...", "config": { ... }}'
+          ></textarea>
+
+          @if (importError()) {
+          <span class="field-error">{{ importError() }}</span>
+          }
+
+          <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">Cancel</ngt-button>
+            <ngt-button (click)="onImportPreset()">Import Preset</ngt-button>
+          </div>
+        </div>
+        }
+
+        <!-- Partial Apply View -->
+        @if (viewMode() === 'apply') {
+        <div class="apply-view">
+          <h3 class="form-title">Apply: {{ applyingPreset()?.name }}</h3>
+          <p class="apply-description">Select which parts to apply</p>
+
+          @if (applyingPreset()) {
+          <div class="apply-categories">
+            <!-- Feature Flags -->
+            @if (applyingPreset()!.config.featureFlags.enabled.length > 0 || applyingPreset()!.config.featureFlags.disabled.length > 0) {
+            <div class="apply-category" [class.apply-category--disabled]="!applyFeatureFlags()">
+              <label class="apply-category__header">
+                <input
+                  type="checkbox"
+                  [checked]="applyFeatureFlags()"
+                  (change)="applyFeatureFlags.set(!applyFeatureFlags())"
+                />
+                <span>Feature Flags ({{ applyingPreset()!.config.featureFlags.enabled.length + applyingPreset()!.config.featureFlags.disabled.length }})</span>
+              </label>
+              @if (applyFeatureFlags()) {
+              <div class="apply-diff">
+                @for (id of applyingPreset()!.config.featureFlags.enabled; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--on">ON</span>
+                </div>
+                }
+                @for (id of applyingPreset()!.config.featureFlags.disabled; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--off">OFF</span>
+                </div>
+                }
+              </div>
+              }
+            </div>
+            }
+
+            <!-- Permissions -->
+            @if (applyingPreset()!.config.permissions.granted.length > 0 || applyingPreset()!.config.permissions.denied.length > 0) {
+            <div class="apply-category" [class.apply-category--disabled]="!applyPermissions()">
+              <label class="apply-category__header">
+                <input
+                  type="checkbox"
+                  [checked]="applyPermissions()"
+                  (change)="applyPermissions.set(!applyPermissions())"
+                />
+                <span>Permissions ({{ applyingPreset()!.config.permissions.granted.length + applyingPreset()!.config.permissions.denied.length }})</span>
+              </label>
+              @if (applyPermissions()) {
+              <div class="apply-diff">
+                @for (id of applyingPreset()!.config.permissions.granted; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--on">GRANTED</span>
+                </div>
+                }
+                @for (id of applyingPreset()!.config.permissions.denied; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--off">DENIED</span>
+                </div>
+                }
+              </div>
+              }
+            </div>
+            }
+
+            <!-- App Features -->
+            @if (applyingPreset()!.config.appFeatures.enabled.length > 0 || applyingPreset()!.config.appFeatures.disabled.length > 0) {
+            <div class="apply-category" [class.apply-category--disabled]="!applyAppFeatures()">
+              <label class="apply-category__header">
+                <input
+                  type="checkbox"
+                  [checked]="applyAppFeatures()"
+                  (change)="applyAppFeatures.set(!applyAppFeatures())"
+                />
+                <span>App Features ({{ applyingPreset()!.config.appFeatures.enabled.length + applyingPreset()!.config.appFeatures.disabled.length }})</span>
+              </label>
+              @if (applyAppFeatures()) {
+              <div class="apply-diff">
+                @for (id of applyingPreset()!.config.appFeatures.enabled; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--on">ON</span>
+                </div>
+                }
+                @for (id of applyingPreset()!.config.appFeatures.disabled; track id) {
+                <div class="diff-item">
+                  <span class="diff-item__name">{{ id }}</span>
+                  <span class="diff-item__arrow">→</span>
+                  <span class="diff-item__value diff-item__value--off">OFF</span>
+                </div>
+                }
+              </div>
+              }
+            </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>
+          }
+
+          <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">Cancel</ngt-button>
+            <ngt-button (click)="onConfirmPartialApply()">Apply Selected</ngt-button>
+          </div>
+        </div>
+        }
+
+        <!-- Delete Confirmation View -->
+        @if (viewMode() === 'delete') {
+        <div class="delete-view">
+          <div class="delete-view__content">
+            <div class="delete-view__icon">🗑️</div>
+            <h3 class="delete-view__title">Delete "{{ deletePresetName() }}"?</h3>
+            <p class="delete-view__description">
+              This preset will be permanently removed.
+              This action cannot be undone.
+            </p>
+          </div>
+          <div class="form-actions">
+            <ngt-button type="button" (click)="onSwitchToListMode()">← Back</ngt-button>
+            <button class="delete-button" (click)="onConfirmDelete()">Delete Preset</button>
+          </div>
+        </div>
+        }
+
         <!-- Empty State -->
         @if (viewMode() === 'list' && hasNoPresets()) {
         <div class="empty">
@@ -5547,83 +6517,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         } @else if (viewMode() === 'list') {
         <!-- Preset List -->
         <div class="preset-list">
-          @for (preset of filteredPresets(); track preset.id) {
-          <div class="preset-card">
+          @for (preset of sortedPresets(); track preset.id) {
+          <div class="preset-card" [title]="getPresetTooltip(preset)">
             <div class="preset-card__header">
-              <h3>{{ preset.name }}</h3>
+              <button
+                class="favorite-button"
+                [class.favorite-button--active]="preset.isFavorite"
+                (click)="onToggleFavorite(preset.id); $event.stopPropagation()"
+                [attr.aria-label]="preset.isFavorite ? 'Remove from favorites' : 'Add to favorites'"
+              >{{ preset.isFavorite ? '★' : '☆' }}</button>
+              <span class="preset-card__name">{{ preset.name }}</span>
+              @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)="onApplyPreset(preset.id)"
-                  [attr.aria-label]="'Apply preset ' + preset.name"
-                  title="Apply preset"
-                >
-                  <ngt-icon name="refresh" />
-                </button>
-                <button
-                  class="icon-button"
-                  (click)="onUpdatePreset(preset.id)"
-                  [attr.aria-label]="'Update preset ' + preset.name"
-                  title="Update with current state"
-                >
-                  <ngt-icon name="gear" />
-                </button>
-                <button
-                  class="icon-button"
-                  (click)="onExportPreset(preset.id)"
-                  [attr.aria-label]="'Export preset ' + preset.name"
-                  title="Export as JSON"
-                >
-                  <ngt-icon name="export" />
-                </button>
-                <button
-                  class="icon-button"
-                  (click)="onDeletePreset(preset.id)"
-                  [attr.aria-label]="'Delete preset ' + preset.name"
-                  title="Delete preset"
-                >
-                  <ngt-icon name="trash" />
-                </button>
+                <button class="icon-button" (click)="onStartApply(preset.id)"><ngt-icon name="refresh" /></button>
+                @if (!preset.isSystem) {
+                <button class="icon-button" (click)="onStartEdit(preset.id)"><ngt-icon name="edit" /></button>
+                <button class="icon-button" (click)="onUpdatePreset(preset.id)"><ngt-icon name="gear" /></button>
+                }
+                <button class="icon-button" (click)="onExportPreset(preset.id)"><ngt-icon name="export" /></button>
+                @if (!preset.isSystem) {
+                <button class="icon-button" (click)="onDeletePreset(preset.id)"><ngt-icon name="trash" /></button>
+                }
               </div>
             </div>
             @if (preset.description) {
-            <p class="preset-card__description">{{ preset.description }}</p>
-            }
-            <div class="preset-card__meta">
-              <span>Updated: {{ formatDate(preset.updatedAt) }}</span>
+            <div class="preset-card__row preset-card__row--meta">
+              <span class="preset-card__description">{{ preset.description }}</span>
             </div>
-            <!-- Preview of preset config -->
-            <div class="preset-card__preview">
-              @if (preset.config.featureFlags.enabled.length > 0 ||
-              preset.config.featureFlags.disabled.length > 0) {
-              <span class="badge">
-                {{
-                  preset.config.featureFlags.enabled.length +
-                    preset.config.featureFlags.disabled.length
-                }}
-                flags
-              </span>
-              } @if (preset.config.permissions.granted.length > 0 ||
-              preset.config.permissions.denied.length > 0) {
-              <span class="badge">
-                {{
-                  preset.config.permissions.granted.length +
-                    preset.config.permissions.denied.length
-                }}
-                perms
-              </span>
-              } @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">{{ preset.config.language }}</span>
+            }
+            <div class="preset-card__row preset-card__row--badges">
+              @if (preset.config.featureFlags.enabled.length > 0 || preset.config.featureFlags.disabled.length > 0) {
+              <span class="badge">{{ preset.config.featureFlags.enabled.length + preset.config.featureFlags.disabled.length }} flags</span>
               }
+              @if (preset.config.permissions.granted.length > 0 || preset.config.permissions.denied.length > 0) {
+              <span class="badge">{{ preset.config.permissions.granted.length + preset.config.permissions.denied.length }} perms</span>
+              }
+              @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>
           </div>
           }
@@ -5631,8 +6567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }
       </div>
     </ngt-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(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-md);ngt-input{flex:1}ngt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ngt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ngt-border-subtle);border-radius:var(--ngt-border-radius-medium);padding:var(--ngt-spacing-md);background:transparent;color:var(--ngt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ngt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ngt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ngt-spacing-sm);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ngt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ngt-border-primary);border-radius:4px;&:hover{background:var(--ngt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ngt-border-primary) var(--ngt-background-secondary)}.preset-card{background:var(--ngt-background-secondary);padding:var(--ngt-spacing-md);border-radius:var(--ngt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ngt-spacing-sm)}.preset-card__header{display:flex;justify-content:space-between;align-items:center;gap:var(--ngt-spacing-sm);h3{margin:0;font-size:var(--ngt-font-size-md);color:var(--ngt-text-primary);flex:1}}.preset-card__actions{display:flex;gap:var(--ngt-spacing-xs)}.icon-button{background:transparent;border:none;cursor:pointer;padding:var(--ngt-spacing-xs);border-radius:var(--ngt-border-radius-small);color:var(--ngt-text-secondary);display:flex;align-items:center;justify-content:center;&:hover{background:var(--ngt-hover-bg);color:var(--ngt-text-primary)}ngt-icon{width:16px;height:16px}}.preset-card__description{margin:0;font-size:var(--ngt-font-size-sm);color:var(--ngt-text-secondary)}.preset-card__meta{font-size:var(--ngt-font-size-xs);color:var(--ngt-text-muted);span{margin-right:var(--ngt-spacing-sm)}}.preset-card__preview{display:flex;gap:var(--ngt-spacing-xs);flex-wrap:wrap}.badge{background:var(--ngt-primary-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:var(--ngt-font-size-xs);font-weight:500}.preset-form{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ngt-spacing-md);padding:var(--ngt-spacing-md);ngt-input{width:100%}}.preset-summary{background:var(--ngt-background-secondary);padding:var(--ngt-spacing-md);border-radius:var(--ngt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ngt-spacing-sm);h4{margin:0;font-size:var(--ngt-font-size-sm);color:var(--ngt-text-primary)}}.category-section{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs)}.checkbox-option{display:flex;align-items:center;gap:var(--ngt-spacing-sm);cursor:pointer;color:var(--ngt-text-secondary);font-size:var(--ngt-font-size-sm);input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--ngt-primary);&:disabled{cursor:not-allowed;opacity:.5}}&:has(input:disabled){opacity:.6;cursor:not-allowed}}.forced-items-list{list-style:none;padding:0;margin:0 0 0 var(--ngt-spacing-lg);display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);font-size:var(--ngt-font-size-xs);li{background:rgba(var(--ngt-primary-rgb),.05);border-radius:var(--ngt-border-radius-small);border-left:2px solid rgba(var(--ngt-primary-rgb),.3)}.item-checkbox{display:flex;justify-content:space-between;align-items:center;padding:var(--ngt-spacing-xs) var(--ngt-spacing-sm);cursor:pointer;gap:var(--ngt-spacing-sm);input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:var(--ngt-primary);flex-shrink:0}&:hover{background:rgba(var(--ngt-primary-rgb),.08)}}.item-name{color:var(--ngt-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-status{font-weight:600;padding:2px 6px;border-radius:var(--ngt-border-radius-small);font-size:10px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;&.enabled{background:#22c55e26;color:#22c55e}&.disabled{background:#ef444426;color:#ef4444}}}.form-actions{display:flex;justify-content:flex-end;gap:var(--ngt-spacing-sm)}\n"] }]
-        }] });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{position:relative;display:flex;flex-direction:column;height:100%;padding:0}.toast{position:absolute;bottom:var(--ngt-spacing-md);left:var(--ngt-spacing-md);right:var(--ngt-spacing-md);z-index:10;display:flex;align-items:center;gap:var(--ngt-spacing-sm);padding:var(--ngt-spacing-sm) var(--ngt-spacing-md);border-radius:var(--ngt-border-radius-small);font-size:var(--ngt-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(--ngt-spacing-md)}.delete-view__content{text-align:center;padding:var(--ngt-spacing-lg) var(--ngt-spacing-md)}.delete-view__icon{font-size:48px;margin-bottom:var(--ngt-spacing-md)}.delete-view__title{margin:0 0 var(--ngt-spacing-sm);font-size:var(--ngt-font-size-md);color:var(--ngt-text-primary)}.delete-view__description{margin:0;font-size:var(--ngt-font-size-sm);color:var(--ngt-text-secondary);line-height:1.5}.delete-button{background:#ef4444;color:#fff;border:none;padding:var(--ngt-spacing-sm) var(--ngt-spacing-md);border-radius:var(--ngt-border-radius-small);cursor:pointer;font-size:var(--ngt-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(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-md);ngt-input{flex:1}ngt-button{flex-shrink:0}}.empty{display:flex;flex-direction:column;gap:var(--ngt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ngt-border-subtle);border-radius:var(--ngt-border-radius-medium);padding:var(--ngt-spacing-md);background:transparent;color:var(--ngt-text-muted);text-align:center;p{margin:0}.hint{font-size:var(--ngt-font-size-xs)}}.preset-list{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ngt-spacing-xs);&::-webkit-scrollbar{width:8px}&::-webkit-scrollbar-track{background:var(--ngt-background-secondary);border-radius:4px}&::-webkit-scrollbar-thumb{background:var(--ngt-border-primary);border-radius:4px;&:hover{background:var(--ngt-hover-bg)}}scrollbar-width:thin;scrollbar-color:var(--ngt-border-primary) var(--ngt-background-secondary)}.preset-card{background:var(--ngt-background-secondary);padding:6px var(--ngt-spacing-sm);border-radius:var(--ngt-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(--ngt-font-size-sm);font-weight:600;color:var(--ngt-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(--ngt-border-primary);color:var(--ngt-text-muted);flex-shrink:0}.favorite-button{background:transparent;border:none;cursor:pointer;font-size:12px;color:var(--ngt-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(--ngt-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(--ngt-hover-bg);color:var(--ngt-text-primary);opacity:1}ngt-icon,ngt-icon>*,svg{display:block;width:12px!important;height:12px!important}}.preset-card__description{font-size:11px;color:var(--ngt-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card__date{font-size:10px;color:var(--ngt-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(--ngt-spacing-sm);padding:var(--ngt-spacing-sm);ngt-input{width:100%}}.form-title{margin:0;font-size:var(--ngt-font-size-sm);font-weight:600;color:var(--ngt-text-primary)}.form-hint{margin:0;font-size:11px;color:var(--ngt-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(--ngt-background-secondary);padding:var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ngt-text-secondary)}}.category-section{display:flex;flex-direction:column;gap:2px}.checkbox-option{display:flex;align-items:center;gap:var(--ngt-spacing-xs);cursor:pointer;color:var(--ngt-text-primary);font-size:var(--ngt-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(--ngt-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(--ngt-spacing-sm);margin-top:auto;padding-top:var(--ngt-spacing-sm)}.config-preview{background:var(--ngt-background-secondary);padding:var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ngt-spacing-xs);h4{margin:0;font-size:11px;font-weight:500;color:var(--ngt-text-secondary)}}.config-category{display:flex;flex-direction:column;gap:2px}.config-category__title{font-size:10px;color:var(--ngt-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(--ngt-background-primary);color:var(--ngt-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(--ngt-border-primary);padding:6px var(--ngt-spacing-sm);border-radius:var(--ngt-border-radius-small);color:var(--ngt-text-secondary);cursor:pointer;font-size:11px;transition:all .15s ease-out;&:hover{background:var(--ngt-hover-bg);border-color:#6366f1;color:#6366f1}}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--ngt-spacing-md);border:2px dashed var(--ngt-border-primary);border-radius:var(--ngt-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(--ngt-font-size-sm);color:var(--ngt-text-primary)}.drop-zone__hint{font-size:11px;color:var(--ngt-text-muted)}.divider{display:flex;align-items:center;gap:var(--ngt-spacing-sm);color:var(--ngt-text-muted);font-size:10px;&:before,&:after{content:\"\";flex:1;height:1px;background:var(--ngt-border-primary)}}.json-textarea{width:100%;min-height:80px;padding:var(--ngt-spacing-xs);border:1px solid var(--ngt-border-primary);border-radius:var(--ngt-border-radius-small);background:var(--ngt-background-secondary);color:var(--ngt-text-primary);font-family:monospace;font-size:11px;resize:vertical;&:focus{outline:none;border-color:#6366f1}&::placeholder{color:var(--ngt-text-muted)}}.apply-description{margin:0;font-size:11px;color:var(--ngt-text-secondary)}.apply-categories{display:flex;flex-direction:column;gap:var(--ngt-spacing-xs)}.apply-category{background:var(--ngt-background-secondary);border-radius:var(--ngt-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(--ngt-spacing-xs);padding:6px var(--ngt-spacing-sm);cursor:pointer;font-size:var(--ngt-font-size-sm);color:var(--ngt-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(--ngt-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(--ngt-background-primary);border-radius:3px}.diff-item__name{flex:1;color:var(--ngt-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-item__arrow{color:var(--ngt-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: () => [] });
 
 class ToolbarComponent {
     constructor() {
@@ -5934,6 +6870,68 @@ function initToolbar(appRef, options) {
     };
 }
 
+class ToolbarStepDirective {
+    constructor() {
+        this.ngtStep = input.required();
+        this.stepTitle = input('');
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: ToolbarStepDirective, isStandalone: true, selector: "[ngtStep]", inputs: { ngtStep: { classPropertyName: "ngtStep", publicName: "ngtStep", isSignal: true, isRequired: true, transformFunction: null }, stepTitle: { classPropertyName: "stepTitle", publicName: "stepTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStepDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngtStep]',
+                    standalone: true,
+                }]
+        }] });
+
+class ToolbarStepViewComponent {
+    constructor() {
+        this.currentStep = input.required();
+        this.defaultStep = input('list');
+        this.back = output();
+        this.steps = contentChildren(ToolbarStepDirective);
+        this.isDefaultStep = computed(() => this.currentStep() === this.defaultStep());
+        this.activeStep = computed(() => this.steps().find((s) => s.ngtStep() === this.currentStep()));
+        this.activeTitle = computed(() => this.activeStep()?.stepTitle() ?? '');
+        this.activeTemplate = computed(() => this.activeStep()?.templateRef ?? null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStepViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToolbarStepViewComponent, isStandalone: true, selector: "ngt-step-view", inputs: { currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: true, transformFunction: null }, defaultStep: { classPropertyName: "defaultStep", publicName: "defaultStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, queries: [{ propertyName: "steps", predicate: ToolbarStepDirective, isSignal: true }], ngImport: i0, template: `
+    @if (!isDefaultStep()) {
+      <div class="step-header">
+        <ngt-button (click)="back.emit()" ariaLabel="Back">\u2190 Back</ngt-button>
+        @if (activeTitle()) {
+          <span class="step-title">{{ activeTitle() }}</span>
+        }
+      </div>
+    }
+
+    @if (activeTemplate(); as tmpl) {
+      <ng-container [ngTemplateOutlet]="tmpl" />
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column}.step-header{display:flex;align-items:center;gap:var(--ngt-spacing-sm);padding-bottom:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);border-bottom:1px solid var(--ngt-border-primary)}.step-title{font-size:var(--ngt-font-size-md);font-weight:600;color:var(--ngt-text-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToolbarButtonComponent, selector: "ngt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToolbarStepViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngt-step-view', standalone: true, imports: [NgTemplateOutlet, ToolbarButtonComponent], template: `
+    @if (!isDefaultStep()) {
+      <div class="step-header">
+        <ngt-button (click)="back.emit()" ariaLabel="Back">\u2190 Back</ngt-button>
+        @if (activeTitle()) {
+          <span class="step-title">{{ activeTitle() }}</span>
+        }
+      </div>
+    }
+
+    @if (activeTemplate(); as tmpl) {
+      <ng-container [ngTemplateOutlet]="tmpl" />
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column}.step-header{display:flex;align-items:center;gap:var(--ngt-spacing-sm);padding-bottom:var(--ngt-spacing-sm);margin-bottom:var(--ngt-spacing-sm);border-bottom:1px solid var(--ngt-border-primary)}.step-title{font-size:var(--ngt-font-size-md);font-weight:600;color:var(--ngt-text-primary)}\n"] }]
+        }] });
+
 /**
  * Public service for managing dev toolbar presets.
  * Allows developers to programmatically save, load, and manage presets.
@@ -5978,6 +6976,30 @@ class ToolbarPresetsService {
     deletePreset(presetId) {
         this.internalService.deletePreset(presetId);
     }
+    /**
+     * Toggle favorite status for a preset
+     * @param presetId - ID of the preset to toggle
+     */
+    toggleFavorite(presetId) {
+        this.internalService.toggleFavorite(presetId);
+    }
+    /**
+     * Apply a preset with partial options (only selected categories)
+     * @param presetId - ID of the preset to apply
+     * @param options - Options for which categories to apply
+     */
+    async partialApplyPreset(presetId, options) {
+        return this.internalService.partialApplyPreset(presetId, options);
+    }
+    /**
+     * Update only the metadata (name, description) of a preset
+     * @param presetId - ID of the preset to update
+     * @param name - New name for the preset
+     * @param description - New description for the preset
+     */
+    updatePresetMetadata(presetId, name, description) {
+        this.internalService.updatePresetMetadata(presetId, name, description);
+    }
     /**
      * Export a preset as JSON string
      * @param presetId - ID of the preset to export
@@ -6002,9 +7024,10 @@ class ToolbarPresetsService {
     /**
      * Initialize presets with predefined configurations.
      * Useful for setting up default presets that all developers can use.
+     * Skips presets that already exist (by name) to avoid duplicates.
      *
      * @param presets - Array of preset configurations to initialize
-     * @returns Array of created presets
+     * @returns Array of created presets (only newly added ones)
      *
      * @example
      * ```typescript
@@ -6053,10 +7076,15 @@ class ToolbarPresetsService {
      * ```
      */
     initializePresets(presets) {
-        return presets.map((preset) => this.internalService.addPreset({
+        const existingPresets = this.internalService.presets();
+        const existingNames = new Set(existingPresets.map((p) => p.name.toLowerCase()));
+        return presets
+            .filter((preset) => !existingNames.has(preset.name.toLowerCase()))
+            .map((preset) => this.internalService.addPreset({
             id: '', // Will be generated
             createdAt: '', // Will be generated
             updatedAt: '', // Will be generated
+            isSystem: true, // Mark as system preset (not editable)
             ...preset,
         }));
     }
@@ -6085,36 +7113,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }] });
 
 // Tree-shakeable tokens for dependency injection
-/** @deprecated Use TOOLBAR_FEATURE_FLAGS instead. Will be removed in v4.0 */
-const DEV_TOOLBAR_FEATURE_FLAGS = TOOLBAR_FEATURE_FLAGS;
-/** @deprecated Use TOOLBAR_PERMISSIONS instead. Will be removed in v4.0 */
-const DEV_TOOLBAR_PERMISSIONS = TOOLBAR_PERMISSIONS;
-/** @deprecated Use TOOLBAR_LANGUAGE instead. Will be removed in v4.0 */
-const DEV_TOOLBAR_LANGUAGE = TOOLBAR_LANGUAGE;
-/** @deprecated Use TOOLBAR_APP_FEATURES instead. Will be removed in v4.0 */
-const DEV_TOOLBAR_APP_FEATURES = TOOLBAR_APP_FEATURES;
-/** @deprecated Use provideToolbar instead. Will be removed in v4.0 */
-const provideDevToolbar = provideToolbar;
-/** @deprecated Use initToolbar instead. Will be removed in v4.0 */
-const initDevToolbar = initToolbar;
-/** @deprecated Use ToolbarComponent instead. Will be removed in v4.0 */
-const DevToolbarComponent = ToolbarComponent;
-/** @deprecated Use ToolbarToolComponent instead. Will be removed in v4.0 */
-const DevToolbarToolComponent = ToolbarToolComponent;
-/** @deprecated Use ToolbarFeatureFlagService instead. Will be removed in v4.0 */
-const DevToolbarFeatureFlagService = ToolbarFeatureFlagService;
-/** @deprecated Use ToolbarLanguageService instead. Will be removed in v4.0 */
-const DevToolbarLanguageService = ToolbarLanguageService;
-/** @deprecated Use ToolbarAppFeaturesService instead. Will be removed in v4.0 */
-const DevToolbarAppFeaturesService = ToolbarAppFeaturesService;
-/** @deprecated Use ToolbarPermissionsService instead. Will be removed in v4.0 */
-const DevToolbarPermissionsService = ToolbarPermissionsService;
-/** @deprecated Use ToolbarPresetsService instead. Will be removed in v4.0 */
-const DevToolbarPresetsService = ToolbarPresetsService;
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DEV_TOOLBAR_APP_FEATURES, DEV_TOOLBAR_FEATURE_FLAGS, DEV_TOOLBAR_LANGUAGE, DEV_TOOLBAR_PERMISSIONS, DevToolbarAppFeaturesService, DevToolbarComponent, DevToolbarFeatureFlagService, DevToolbarLanguageService, DevToolbarPermissionsService, DevToolbarPresetsService, DevToolbarToolComponent, TOOLBAR_APP_FEATURES, TOOLBAR_FEATURE_FLAGS, TOOLBAR_LANGUAGE, TOOLBAR_PERMISSIONS, ToolbarAppFeaturesService, ToolbarAppFeaturesToolComponent, ToolbarComponent, ToolbarFeatureFlagService, ToolbarIconComponent, ToolbarLanguageService, ToolbarListComponent, ToolbarListItemComponent, ToolbarPermissionsService, ToolbarPermissionsToolComponent, ToolbarPresetsService, ToolbarPresetsToolComponent, ToolbarToolComponent, initDevToolbar, initToolbar, provideDevToolbar, provideToolbar };
+export { TOOLBAR_APP_FEATURES, TOOLBAR_FEATURE_FLAGS, TOOLBAR_LANGUAGE, TOOLBAR_PERMISSIONS, ToolbarAppFeaturesService, ToolbarAppFeaturesToolComponent, ToolbarButtonComponent, ToolbarCardComponent, ToolbarClickableCardComponent, ToolbarComponent, ToolbarFeatureFlagService, ToolbarIconComponent, ToolbarInputComponent, ToolbarLanguageService, ToolbarLinkButtonComponent, ToolbarListComponent, ToolbarListItemComponent, ToolbarPermissionsService, ToolbarPermissionsToolComponent, ToolbarPresetsService, ToolbarPresetsToolComponent, ToolbarSelectComponent, ToolbarStepDirective, ToolbarStepViewComponent, ToolbarToolComponent, initToolbar, provideToolbar };
 //# sourceMappingURL=ngx-dev-toolbar.mjs.map