ngx-dev-toolbar 1.0.4 → 1.0.5

package/fesm2022/ngx-dev-toolbar.mjs

@@ -158,6 +158,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
+class BoltIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BoltIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: BoltIconComponent, isStandalone: true, selector: "ndt-bolt-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M160,16,144,96H208l-96,144,16-80H64Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BoltIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-bolt-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M160,16,144,96H208l-96,144,16-80H64Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
 class BugIconComponent {
     constructor() {
         this.fill = input('#FFFF');
@@ -414,6 +463,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
+class FilterIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: FilterIconComponent, isStandalone: true, selector: "ndt-filter-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="M227.81,66.76l-.08.09L160,139.17v55.49A8,8,0,0,1,156.94,201l-32,21.33A8,8,0,0,1,112,216V139.17L44.27,66.85l-.08-.09A16,16,0,0,1,56,40H200a16,16,0,0,1,11.84,26.76Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M230.6,49.53A23.94,23.94,0,0,0,200,32H56A24,24,0,0,0,38.15,65.67L104,139.37V216a8,8,0,0,0,11.58,7.16l32-16A8,8,0,0,0,152,200V139.37l65.85-73.7A23.93,23.93,0,0,0,230.6,49.53ZM203.36,54.86a8,8,0,0,1,.07,9.12L136,139.17V196.58l-16,8V139.17L52.57,64A8,8,0,0,1,56,48H200A8,8,0,0,1,203.36,54.86Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-filter-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="M227.81,66.76l-.08.09L160,139.17v55.49A8,8,0,0,1,156.94,201l-32,21.33A8,8,0,0,1,112,216V139.17L44.27,66.85l-.08-.09A16,16,0,0,1,56,40H200a16,16,0,0,1,11.84,26.76Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M230.6,49.53A23.94,23.94,0,0,0,200,32H56A24,24,0,0,0,38.15,65.67L104,139.37V216a8,8,0,0,0,11.58,7.16l32-16A8,8,0,0,0,152,200V139.37l65.85-73.7A23.93,23.93,0,0,0,230.6,49.53ZM203.36,54.86a8,8,0,0,1,.07,9.12L136,139.17V196.58l-16,8V139.17L52.57,64A8,8,0,0,1,56,48H200A8,8,0,0,1,203.36,54.86Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
 class GaugeIconComponent {
     constructor() {
         this.fill = input('#FFFF');
@@ -729,6 +827,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
+class LockIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LockIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LockIconComponent, isStandalone: true, selector: "ndt-lock-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="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LockIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-lock-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="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
 class MoonIconComponent {
     constructor() {
         this.fill = input('#FFFF');
@@ -1262,6 +1401,8 @@ class DevToolbarIconComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarIconComponent, isStandalone: true, selector: "ndt-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @switch (name()) { @case ('angular') {
     <ndt-angular-icon />
+    } @case ('bolt') {
+    <ndt-bolt-icon [fill]="fill()" />
     } @case ('bug') {
     <ndt-bug-icon [fill]="fill()" />
     } @case ('code') {
@@ -1272,6 +1413,8 @@ class DevToolbarIconComponent {
     <ndt-docs-icon [fill]="fill()" />
     } @case ('export') {
     <ndt-export-icon [fill]="fill()" />
+    } @case ('filter') {
+    <ndt-filter-icon [fill]="fill()" />
     } @case ('gauge') {
     <ndt-gauge-icon [fill]="fill()" />
     } @case ('gear') {
@@ -1286,6 +1429,8 @@ class DevToolbarIconComponent {
     <ndt-lighting-icon [fill]="fill()" />
     } @case ('lightbulb') {
     <ndt-lightbulb-icon [fill]="fill()" />
+    } @case ('lock') {
+    <ndt-lock-icon [fill]="fill()" />
     } @case ('network') {
     <ndt-network-icon [fill]="fill()" />
     } @case ('puzzle') {
@@ -1311,7 +1456,7 @@ class DevToolbarIconComponent {
     } @case ('trash') {
     <ndt-trash-icon [fill]="fill()" />
     } }
-  `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ndt-angular-icon" }, { kind: "component", type: BugIconComponent, selector: "ndt-bug-icon", inputs: ["fill"] }, { kind: "component", type: CodeIconComponent, selector: "ndt-code-icon", inputs: ["fill"] }, { kind: "component", type: DatabaseIconComponent, selector: "ndt-database-icon", inputs: ["fill"] }, { kind: "component", type: DocsIconComponent, selector: "ndt-docs-icon", inputs: ["fill"] }, { kind: "component", type: DiscordIconComponent, selector: "ndt-discord-icon", inputs: ["fill"] }, { kind: "component", type: ExportIconComponent, selector: "ndt-export-icon", inputs: ["fill"] }, { kind: "component", type: GaugeIconComponent, selector: "ndt-gauge-icon", inputs: ["fill"] }, { kind: "component", type: GearIconComponent, selector: "ndt-gear-icon", inputs: ["fill"] }, { kind: "component", type: GitBranchIconComponent, selector: "ndt-git-branch-icon", inputs: ["fill"] }, { kind: "component", type: ImportIconComponent, selector: "ndt-import-icon", inputs: ["fill"] }, { kind: "component", type: LayoutIconComponent, selector: "ndt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightbulbIconComponent, selector: "ndt-lightbulb-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ndt-lighting-icon", inputs: ["fill"] }, { kind: "component", type: NetworkIconComponent, selector: "ndt-network-icon", inputs: ["fill"] }, { kind: "component", type: PuzzleIconComponent, selector: "ndt-puzzle-icon", inputs: ["fill"] }, { kind: "component", type: RefreshIconComponent, selector: "ndt-refresh-icon", inputs: ["fill"] }, { kind: "component", type: StarIconComponent, selector: "ndt-star-icon", inputs: ["fill"] }, { kind: "component", type: TerminalIconComponent, selector: "ndt-terminal-icon", inputs: ["fill"] }, { kind: "component", type: ToggleLeftIconComponent, selector: "ndt-toggle-left-icon", inputs: ["fill"] }, { kind: "component", type: UsersIconComponent, selector: "ndt-users-icon", inputs: ["fill"] }, { kind: "component", type: SunIconComponent, selector: "ndt-sun-icon", inputs: ["fill"] }, { kind: "component", type: MoonIconComponent, selector: "ndt-moon-icon", inputs: ["fill"] }, { kind: "component", type: TranslateIconComponent, selector: "ndt-translate-icon", inputs: ["fill"] }, { kind: "component", type: TrashIconComponent, selector: "ndt-trash-icon", inputs: ["fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ndt-angular-icon" }, { kind: "component", type: BoltIconComponent, selector: "ndt-bolt-icon", inputs: ["fill"] }, { kind: "component", type: BugIconComponent, selector: "ndt-bug-icon", inputs: ["fill"] }, { kind: "component", type: CodeIconComponent, selector: "ndt-code-icon", inputs: ["fill"] }, { kind: "component", type: DatabaseIconComponent, selector: "ndt-database-icon", inputs: ["fill"] }, { kind: "component", type: DocsIconComponent, selector: "ndt-docs-icon", inputs: ["fill"] }, { kind: "component", type: DiscordIconComponent, selector: "ndt-discord-icon", inputs: ["fill"] }, { kind: "component", type: ExportIconComponent, selector: "ndt-export-icon", inputs: ["fill"] }, { kind: "component", type: FilterIconComponent, selector: "ndt-filter-icon", inputs: ["fill"] }, { kind: "component", type: GaugeIconComponent, selector: "ndt-gauge-icon", inputs: ["fill"] }, { kind: "component", type: GearIconComponent, selector: "ndt-gear-icon", inputs: ["fill"] }, { kind: "component", type: GitBranchIconComponent, selector: "ndt-git-branch-icon", inputs: ["fill"] }, { kind: "component", type: ImportIconComponent, selector: "ndt-import-icon", inputs: ["fill"] }, { kind: "component", type: LayoutIconComponent, selector: "ndt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightbulbIconComponent, selector: "ndt-lightbulb-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ndt-lighting-icon", inputs: ["fill"] }, { kind: "component", type: LockIconComponent, selector: "ndt-lock-icon", inputs: ["fill"] }, { kind: "component", type: NetworkIconComponent, selector: "ndt-network-icon", inputs: ["fill"] }, { kind: "component", type: PuzzleIconComponent, selector: "ndt-puzzle-icon", inputs: ["fill"] }, { kind: "component", type: RefreshIconComponent, selector: "ndt-refresh-icon", inputs: ["fill"] }, { kind: "component", type: StarIconComponent, selector: "ndt-star-icon", inputs: ["fill"] }, { kind: "component", type: TerminalIconComponent, selector: "ndt-terminal-icon", inputs: ["fill"] }, { kind: "component", type: ToggleLeftIconComponent, selector: "ndt-toggle-left-icon", inputs: ["fill"] }, { kind: "component", type: UsersIconComponent, selector: "ndt-users-icon", inputs: ["fill"] }, { kind: "component", type: SunIconComponent, selector: "ndt-sun-icon", inputs: ["fill"] }, { kind: "component", type: MoonIconComponent, selector: "ndt-moon-icon", inputs: ["fill"] }, { kind: "component", type: TranslateIconComponent, selector: "ndt-translate-icon", inputs: ["fill"] }, { kind: "component", type: TrashIconComponent, selector: "ndt-trash-icon", inputs: ["fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarIconComponent, decorators: [{
             type: Component,
@@ -1320,12 +1465,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     standalone: true,
                     imports: [
                         AngularIconComponent,
+                        BoltIconComponent,
                         BugIconComponent,
                         CodeIconComponent,
                         DatabaseIconComponent,
                         DocsIconComponent,
                         DiscordIconComponent,
                         ExportIconComponent,
+                        FilterIconComponent,
                         GaugeIconComponent,
                         GearIconComponent,
                         GitBranchIconComponent,
@@ -1333,6 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         LayoutIconComponent,
                         LightbulbIconComponent,
                         LightingIconComponent,
+                        LockIconComponent,
                         NetworkIconComponent,
                         PuzzleIconComponent,
                         RefreshIconComponent,
@@ -1349,6 +1497,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     template: `
     @switch (name()) { @case ('angular') {
     <ndt-angular-icon />
+    } @case ('bolt') {
+    <ndt-bolt-icon [fill]="fill()" />
     } @case ('bug') {
     <ndt-bug-icon [fill]="fill()" />
     } @case ('code') {
@@ -1359,6 +1509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     <ndt-docs-icon [fill]="fill()" />
     } @case ('export') {
     <ndt-export-icon [fill]="fill()" />
+    } @case ('filter') {
+    <ndt-filter-icon [fill]="fill()" />
     } @case ('gauge') {
     <ndt-gauge-icon [fill]="fill()" />
     } @case ('gear') {
@@ -1373,6 +1525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     <ndt-lighting-icon [fill]="fill()" />
     } @case ('lightbulb') {
     <ndt-lightbulb-icon [fill]="fill()" />
+    } @case ('lock') {
+    <ndt-lock-icon [fill]="fill()" />
     } @case ('network') {
     <ndt-network-icon [fill]="fill()" />
     } @case ('puzzle') {
@@ -1575,7 +1729,7 @@ class DevToolbarWindowComponent {
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}:host{display:block;width:100%}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted)}.header__content{display:flex;flex-direction:column}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }); }
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}:host{display:block;width:100%}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%}.header__content{display:flex;flex-direction:column}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarWindowComponent, decorators: [{
             type: Component,
@@ -1617,7 +1771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         <ng-content></ng-content>
       </div>
     </div>
-  `, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}:host{display:block;width:100%}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted)}.header__content{display:flex;flex-direction:column}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }]
+  `, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}:host{display:block;width:100%}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%}.header__content{display:flex;flex-direction:column}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }]
         }] });
 
 class DevToolbarToolComponent {
@@ -2076,172 +2230,641 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-class DevToolbarInternalFeatureFlagService {
+/**
+ * Internal service for managing app features state and forced overrides.
+ *
+ * This service handles:
+ * - Feature configuration storage
+ * - Forced feature state management
+ * - localStorage persistence
+ * - State validation and cleanup
+ *
+ * @internal This service is for internal toolbar use only. Consumers should use DevToolbarAppFeaturesService.
+ */
+class DevToolbarInternalAppFeaturesService {
     constructor() {
-        this.STORAGE_KEY = 'feature-flags';
+        this.STORAGE_KEY = 'app-features';
         this.storageService = inject(DevToolsStorageService);
-        this.appFlags$ = new BehaviorSubject([]);
-        this.forcedFlagsSubject = new BehaviorSubject({
+        this.appFeaturesSubject = new BehaviorSubject([]);
+        this.forcedFeaturesSubject = new BehaviorSubject({
             enabled: [],
             disabled: [],
         });
-        this.forcedFlags$ = this.forcedFlagsSubject.asObservable();
-        this.flags$ = combineLatest([
-            this.appFlags$,
-            this.forcedFlags$,
-        ]).pipe(map(([appFlags, { enabled, disabled }]) => {
-            return appFlags.map((flag) => ({
-                ...flag,
-                isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
-                isEnabled: enabled.includes(flag.id),
-            }));
-        }));
-        this.flags = toSignal(this.flags$, { initialValue: [] });
-        this.loadForcedFlags();
+        this.forcedFeatures$ = this.forcedFeaturesSubject.asObservable();
+        /**
+         * Observable stream of all features with merged forced state
+         */
+        this.features$ = combineLatest([
+            this.appFeaturesSubject.asObservable(),
+            this.forcedFeatures$,
+        ]).pipe(map(([appFeatures, forcedState]) => this.mergeForcedState(appFeatures, forcedState)));
+        /**
+         * Signal containing current features with merged forced state
+         */
+        this.features = toSignal(this.features$, { initialValue: [] });
+        this.loadForcedFeatures();
     }
-    setAppFlags(flags) {
-        this.appFlags$.next(flags);
+    /**
+     * Set available app features for the application.
+     * Validates features, trims whitespace, and triggers validation of forced state.
+     *
+     * @param features - Array of app features to configure
+     * @throws Error if duplicate feature IDs or empty IDs are detected
+     */
+    setAppFeatures(features) {
+        // Validate for empty IDs
+        const emptyIdFeature = features.find((f) => !f.id || f.id.trim() === '');
+        if (emptyIdFeature) {
+            throw new Error('Feature ID cannot be empty');
+        }
+        // Validate for duplicate IDs
+        const ids = features.map((f) => f.id);
+        const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index);
+        if (duplicateIds.length > 0) {
+            throw new Error(`Duplicate feature IDs detected: ${duplicateIds.join(', ')}`);
+        }
+        // Trim whitespace from names and warn about empty names
+        const processedFeatures = features.map((feature) => {
+            const trimmedName = feature.name.trim();
+            if (!trimmedName) {
+                console.warn(`Feature '${feature.id}' has empty name`);
+            }
+            return {
+                ...feature,
+                name: trimmedName || feature.name,
+            };
+        });
+        this.appFeaturesSubject.next(processedFeatures);
+        this.validateAndCleanForcedState();
     }
-    getAppFlags() {
-        return this.appFlags$.asObservable();
+    /**
+     * Get observable stream of app features (natural state, no forced state merged)
+     */
+    getAppFeatures() {
+        return this.appFeaturesSubject.asObservable();
     }
-    getForcedFlags() {
-        return this.flags$.pipe(map((flags) => flags.filter((flag) => flag.isForced)));
+    /**
+     * Get observable stream of features that have forced overrides
+     */
+    getForcedFeatures() {
+        return this.features$.pipe(map((features) => features.filter((feature) => feature.isForced)));
     }
-    setFlag(flagId, isEnabled) {
-        const { enabled, disabled } = this.forcedFlagsSubject.value;
-        const newEnabled = enabled.filter((id) => id !== flagId);
-        const newDisabled = disabled.filter((id) => id !== flagId);
+    /**
+     * Force a feature to enabled or disabled state.
+     * Persists the forced state to localStorage.
+     *
+     * @param featureId - ID of the feature to force
+     * @param isEnabled - Whether to force feature to enabled (true) or disabled (false)
+     */
+    setFeature(featureId, isEnabled) {
+        const { enabled, disabled } = this.forcedFeaturesSubject.value;
+        // Remove feature from both arrays
+        const newEnabled = enabled.filter((id) => id !== featureId);
+        const newDisabled = disabled.filter((id) => id !== featureId);
+        // Add to appropriate array
         if (isEnabled) {
-            newEnabled.push(flagId);
+            newEnabled.push(featureId);
         }
         else {
-            newDisabled.push(flagId);
+            newDisabled.push(featureId);
         }
         const newState = { enabled: newEnabled, disabled: newDisabled };
-        this.forcedFlagsSubject.next(newState);
-        this.storageService.set(this.STORAGE_KEY, newState);
+        this.forcedFeaturesSubject.next(newState);
+        this.saveForcedFeatures(newState);
     }
-    removeFlagOverride(flagId) {
-        const { enabled, disabled } = this.forcedFlagsSubject.value;
+    /**
+     * Remove forced override for a feature, returning it to natural state.
+     * Persists the change to localStorage.
+     *
+     * @param featureId - ID of the feature to unforce
+     */
+    removeFeatureOverride(featureId) {
+        const { enabled, disabled } = this.forcedFeaturesSubject.value;
         const newState = {
-            enabled: enabled.filter((id) => id !== flagId),
-            disabled: disabled.filter((id) => id !== flagId),
+            enabled: enabled.filter((id) => id !== featureId),
+            disabled: disabled.filter((id) => id !== featureId),
         };
-        this.forcedFlagsSubject.next(newState);
-        this.storageService.set(this.STORAGE_KEY, newState);
+        this.forcedFeaturesSubject.next(newState);
+        this.saveForcedFeatures(newState);
     }
-    loadForcedFlags() {
-        const savedFlags = this.storageService.get(this.STORAGE_KEY);
-        if (savedFlags) {
-            this.forcedFlagsSubject.next(savedFlags);
+    /**
+     * Apply a preset forced state (for preset integration).
+     * Validates and cleans invalid feature IDs before applying.
+     *
+     * @param state - Forced features state from preset
+     */
+    applyForcedState(state) {
+        const configuredFeatureIds = this.appFeaturesSubject.value.map((f) => f.id);
+        // Validate and filter to only valid IDs
+        const validEnabled = state.enabled.filter((id) => configuredFeatureIds.includes(id));
+        const validDisabled = state.disabled.filter((id) => configuredFeatureIds.includes(id));
+        const invalidIds = [
+            ...state.enabled.filter((id) => !configuredFeatureIds.includes(id)),
+            ...state.disabled.filter((id) => !configuredFeatureIds.includes(id)),
+        ];
+        if (invalidIds.length > 0) {
+            console.warn(`Preset contains invalid feature IDs (ignored): ${invalidIds.join(', ')}`);
         }
+        const cleanedState = { enabled: validEnabled, disabled: validDisabled };
+        this.forcedFeaturesSubject.next(cleanedState);
+        this.saveForcedFeatures(cleanedState);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, providedIn: 'root' }); }
+    /**
+     * Get current forced state as a snapshot (defensive copy).
+     * Useful for preset exports and debugging.
+     *
+     * @returns Current forced features state
+     */
+    getCurrentForcedState() {
+        const state = this.forcedFeaturesSubject.value;
+        return {
+            enabled: [...state.enabled],
+            disabled: [...state.disabled],
+        };
+    }
+    /**
+     * Merge natural app features with forced state.
+     *
+     * @param appFeatures - Natural feature configuration
+     * @param forcedState - Forced overrides from localStorage/toolbar
+     * @returns Features with merged forced state
+     */
+    mergeForcedState(appFeatures, forcedState) {
+        return appFeatures.map((feature) => {
+            const isInEnabled = forcedState.enabled.includes(feature.id);
+            const isInDisabled = forcedState.disabled.includes(feature.id);
+            const isForced = isInEnabled || isInDisabled;
+            return {
+                ...feature,
+                isEnabled: isInEnabled ? true : isInDisabled ? false : feature.isEnabled,
+                isForced,
+            };
+        });
+    }
+    /**
+     * Load forced features state from localStorage on initialization.
+     * Handles missing or corrupted data gracefully.
+     */
+    loadForcedFeatures() {
+        try {
+            const savedState = this.storageService.get(this.STORAGE_KEY);
+            if (savedState) {
+                this.forcedFeaturesSubject.next(savedState);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load forced app features from localStorage:', error);
+            // Use default empty state on error
+        }
+    }
+    /**
+     * Persist forced features state to localStorage.
+     * Handles quota exceeded errors gracefully.
+     *
+     * @param state - Forced state to persist
+     */
+    saveForcedFeatures(state) {
+        try {
+            this.storageService.set(this.STORAGE_KEY, state);
+        }
+        catch (error) {
+            console.error('Failed to persist app features to localStorage:', error);
+            // Continue execution - state is still valid in memory for current session
+        }
+    }
+    /**
+     * Validate forced feature IDs against configured features and clean up invalid ones.
+     * Called after setAppFeatures() to ensure forced state references valid features.
+     */
+    validateAndCleanForcedState() {
+        const configuredFeatureIds = this.appFeaturesSubject.value.map((f) => f.id);
+        const currentForcedState = this.forcedFeaturesSubject.value;
+        const validEnabled = currentForcedState.enabled.filter((id) => configuredFeatureIds.includes(id));
+        const validDisabled = currentForcedState.disabled.filter((id) => configuredFeatureIds.includes(id));
+        const removedIds = [
+            ...currentForcedState.enabled.filter((id) => !configuredFeatureIds.includes(id)),
+            ...currentForcedState.disabled.filter((id) => !configuredFeatureIds.includes(id)),
+        ];
+        if (removedIds.length > 0) {
+            console.warn(`Removed invalid feature IDs from forced state: ${removedIds.join(', ')}`);
+            const cleanedState = { enabled: validEnabled, disabled: validDisabled };
+            this.forcedFeaturesSubject.next(cleanedState);
+            this.saveForcedFeatures(cleanedState);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-class DevToolbarFeatureFlagsToolComponent {
+/**
+ * Component for managing app features in the dev toolbar.
+ *
+ * Provides UI for:
+ * - Searching features by name and description
+ * - Filtering features by state (all/forced/enabled/disabled)
+ * - Forcing features to enabled/disabled state via 3-state dropdown
+ * - Viewing feature descriptions and current state
+ *
+ * @example
+ * ```html
+ * <ndt-app-features-tool />
+ * ```
+ */
+class DevToolbarAppFeaturesToolComponent {
     constructor() {
         // Injects
-        this.featureFlags = inject(DevToolbarInternalFeatureFlagService);
+        this.appFeaturesService = inject(DevToolbarInternalAppFeaturesService);
         // Signals
         this.activeFilter = signal('all');
         this.searchQuery = signal('');
-        this.flags = this.featureFlags.flags;
-        this.hasNoFlags = computed(() => this.flags().length === 0);
-        this.filteredFlags = computed(() => {
-            return this.flags().filter((flag) => {
+        this.features = this.appFeaturesService.features;
+        this.hasNoFeatures = computed(() => this.features().length === 0);
+        this.filteredFeatures = computed(() => {
+            return this.features().filter((feature) => {
                 const searchTerm = this.searchQuery().toLowerCase();
-                const flagName = flag.name.toLowerCase();
-                const flagDescription = flag.description?.toLowerCase() ?? '';
+                const featureName = feature.name.toLowerCase();
+                const featureDescription = feature.description?.toLowerCase() ?? '';
                 const matchesSearch = !this.searchQuery() ||
-                    flagName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                    flagDescription.toLowerCase().includes(searchTerm.toLowerCase());
+                    featureName.includes(searchTerm) ||
+                    featureDescription.includes(searchTerm);
                 const matchesFilter = this.activeFilter() === 'all' ||
-                    (this.activeFilter() === 'forced' && flag.isForced) ||
-                    (this.activeFilter() === 'enabled' && flag.isEnabled) ||
-                    (this.activeFilter() === 'disabled' && !flag.isEnabled);
+                    (this.activeFilter() === 'forced' && feature.isForced) ||
+                    (this.activeFilter() === 'enabled' && feature.isEnabled) ||
+                    (this.activeFilter() === 'disabled' && !feature.isEnabled);
                 return matchesSearch && matchesFilter;
             });
         });
-        this.hasNoFilteredFlags = computed(() => this.filteredFlags().length === 0);
+        this.hasNoFilteredFeatures = computed(() => this.filteredFeatures().length === 0);
         // Other properties
         this.options = {
-            title: 'Feature Flags',
-            description: 'Manage the feature flags for your current session',
+            title: 'App Features',
+            description: 'Override product features to test different tiers and configurations',
             isClosable: true,
             size: 'tall',
-            id: 'ndt-feature-flags',
-            isBeta: true,
+            id: 'ndt-app-features',
         };
         this.filterOptions = [
-            { value: 'all', label: 'All Flags' },
+            { value: 'all', label: 'All Features' },
             { value: 'forced', label: 'Forced' },
             { value: 'enabled', label: 'Enabled' },
             { value: 'disabled', label: 'Disabled' },
         ];
-        this.flagValueOptions = [
-            { value: 'not-forced', label: 'Not Forced' },
-            { value: 'off', label: 'Forced Off' },
-            { value: 'on', label: 'Forced On' },
+        this.featureValueOptions = [
+            { value: '', label: 'Not Forced' },
+            { value: 'off', label: 'Disabled' },
+            { value: 'on', label: 'Enabled' },
         ];
     }
     // Public methods
+    /**
+     * Handle filter dropdown change.
+     * Updates the active filter to show all/forced/enabled/disabled features.
+     */
     onFilterChange(value) {
         const filter = this.filterOptions.find((f) => f.value === value);
         if (filter) {
             this.activeFilter.set(filter.value);
         }
     }
-    onFlagChange(flagId, value) {
+    /**
+     * Handle feature value change from 3-state dropdown.
+     * - 'not-forced' (empty string): Remove forced override
+     * - 'on': Force feature to enabled
+     * - 'off': Force feature to disabled
+     */
+    onFeatureChange(featureId, value) {
         switch (value) {
-            case 'not-forced':
-                this.featureFlags.removeFlagOverride(flagId);
+            case '':
+                this.appFeaturesService.removeFeatureOverride(featureId);
                 break;
             case 'on':
-                this.featureFlags.setFlag(flagId, true);
+                this.appFeaturesService.setFeature(featureId, true);
                 break;
             case 'off':
-                this.featureFlags.setFlag(flagId, false);
+                this.appFeaturesService.setFeature(featureId, false);
                 break;
         }
     }
+    /**
+     * Handle search input change.
+     * Updates the search query to filter features by name/description.
+     */
     onSearchChange(query) {
         this.searchQuery.set(query);
     }
     // Protected methods
-    getFlagValue(flag) {
-        if (!flag.isForced)
+    /**
+     * Get the dropdown value for a feature's current state.
+     * - Returns empty string if not forced (natural state)
+     * - Returns 'on' if forced to enabled
+     * - Returns 'off' if forced to disabled
+     */
+    getFeatureValue(feature) {
+        if (!feature.isForced)
             return '';
-        return flag.isEnabled ? 'on' : 'off';
+        return feature.isEnabled ? 'on' : 'off';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarFeatureFlagsToolComponent, isStandalone: true, selector: "ndt-feature-flags-tool", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarAppFeaturesToolComponent, isStandalone: true, selector: "ndt-app-features-tool", ngImport: i0, template: `
     <ndt-toolbar-tool
       [options]="options"
-      title="Feature Flags"
-      icon="toggle-left"
+      title="App Features"
+      icon="puzzle"
     >
       <div class="container">
         <div class="header">
           <ndt-input
             [value]="searchQuery()"
             (valueChange)="onSearchChange($event)"
-            placeholder="Search..."
-          />
-          <ndt-select
-            [value]="activeFilter()"
-            [options]="filterOptions"
-            [size]="'medium'"
-            (valueChange)="onFilterChange($event)"
+            placeholder="Search features..."
           />
-        </div>
-
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+            />
+          </div>
+        </div>
+
+        @if (hasNoFeatures()) {
+        <div class="empty">
+          <p>No app features found</p>
+          <small>Call setAvailableOptions() to configure features</small>
+        </div>
+        } @else if (hasNoFilteredFeatures()) {
+        <div class="empty">
+          <p>No features match your filter</p>
+        </div>
+        } @else {
+        <div class="feature-list">
+          @for (feature of filteredFeatures(); track feature.id) {
+          <div class="feature">
+            <div class="info">
+              <h3>{{ feature.name }}</h3>
+              @if (feature.description) {
+              <p>{{ feature.description }}</p>
+              }
+            </div>
+
+            <ndt-select
+              [value]="getFeatureValue(feature)"
+              [options]="featureValueOptions"
+              [ariaLabel]="'Set value for ' + feature.name"
+              (valueChange)="onFeatureChange(feature.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0;font-size:var(--ndt-font-size-md)}.empty small{font-size:var(--ndt-font-size-xs);opacity:.8}.feature-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.feature-list::-webkit-scrollbar{width:8px}.feature-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.feature-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.feature{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.feature .info{flex:0 0 65%}.feature .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.feature .info p{margin:var(--ndt-spacing-xs) 0 0 0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.feature ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-app-features-tool', standalone: true, imports: [
+                        FormsModule,
+                        DevToolbarToolComponent,
+                        DevToolbarInputComponent,
+                        DevToolbarSelectComponent,
+                        DevToolbarIconComponent,
+                    ], template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="App Features"
+      icon="puzzle"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search features..."
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+            />
+          </div>
+        </div>
+
+        @if (hasNoFeatures()) {
+        <div class="empty">
+          <p>No app features found</p>
+          <small>Call setAvailableOptions() to configure features</small>
+        </div>
+        } @else if (hasNoFilteredFeatures()) {
+        <div class="empty">
+          <p>No features match your filter</p>
+        </div>
+        } @else {
+        <div class="feature-list">
+          @for (feature of filteredFeatures(); track feature.id) {
+          <div class="feature">
+            <div class="info">
+              <h3>{{ feature.name }}</h3>
+              @if (feature.description) {
+              <p>{{ feature.description }}</p>
+              }
+            </div>
+
+            <ndt-select
+              [value]="getFeatureValue(feature)"
+              [options]="featureValueOptions"
+              [ariaLabel]="'Set value for ' + feature.name"
+              (valueChange)="onFeatureChange(feature.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0;font-size:var(--ndt-font-size-md)}.empty small{font-size:var(--ndt-font-size-xs);opacity:.8}.feature-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.feature-list::-webkit-scrollbar{width:8px}.feature-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.feature-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.feature{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.feature .info{flex:0 0 65%}.feature .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.feature .info p{margin:var(--ndt-spacing-xs) 0 0 0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.feature ndt-select{flex:0 0 35%}\n"] }]
+        }] });
+
+class DevToolbarInternalFeatureFlagService {
+    constructor() {
+        this.STORAGE_KEY = 'feature-flags';
+        this.storageService = inject(DevToolsStorageService);
+        this.appFlags$ = new BehaviorSubject([]);
+        this.forcedFlagsSubject = new BehaviorSubject({
+            enabled: [],
+            disabled: [],
+        });
+        this.forcedFlags$ = this.forcedFlagsSubject.asObservable();
+        this.flags$ = combineLatest([
+            this.appFlags$,
+            this.forcedFlags$,
+        ]).pipe(map(([appFlags, { enabled, disabled }]) => {
+            return appFlags.map((flag) => ({
+                ...flag,
+                isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
+                isEnabled: enabled.includes(flag.id),
+            }));
+        }));
+        this.flags = toSignal(this.flags$, { initialValue: [] });
+        this.loadForcedFlags();
+    }
+    setAppFlags(flags) {
+        this.appFlags$.next(flags);
+    }
+    getAppFlags() {
+        return this.appFlags$.asObservable();
+    }
+    getForcedFlags() {
+        return this.flags$.pipe(map((flags) => flags.filter((flag) => flag.isForced)));
+    }
+    setFlag(flagId, isEnabled) {
+        const { enabled, disabled } = this.forcedFlagsSubject.value;
+        const newEnabled = enabled.filter((id) => id !== flagId);
+        const newDisabled = disabled.filter((id) => id !== flagId);
+        if (isEnabled) {
+            newEnabled.push(flagId);
+        }
+        else {
+            newDisabled.push(flagId);
+        }
+        const newState = { enabled: newEnabled, disabled: newDisabled };
+        this.forcedFlagsSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    removeFlagOverride(flagId) {
+        const { enabled, disabled } = this.forcedFlagsSubject.value;
+        const newState = {
+            enabled: enabled.filter((id) => id !== flagId),
+            disabled: disabled.filter((id) => id !== flagId),
+        };
+        this.forcedFlagsSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    loadForcedFlags() {
+        const savedFlags = this.storageService.get(this.STORAGE_KEY);
+        if (savedFlags) {
+            this.forcedFlagsSubject.next(savedFlags);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class DevToolbarFeatureFlagsToolComponent {
+    constructor() {
+        // Injects
+        this.featureFlags = inject(DevToolbarInternalFeatureFlagService);
+        // Signals
+        this.activeFilter = signal('all');
+        this.searchQuery = signal('');
+        this.flags = this.featureFlags.flags;
+        this.hasNoFlags = computed(() => this.flags().length === 0);
+        this.filteredFlags = computed(() => {
+            return this.flags().filter((flag) => {
+                const searchTerm = this.searchQuery().toLowerCase();
+                const flagName = flag.name.toLowerCase();
+                const flagDescription = flag.description?.toLowerCase() ?? '';
+                const matchesSearch = !this.searchQuery() ||
+                    flagName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                    flagDescription.toLowerCase().includes(searchTerm.toLowerCase());
+                const matchesFilter = this.activeFilter() === 'all' ||
+                    (this.activeFilter() === 'forced' && flag.isForced) ||
+                    (this.activeFilter() === 'enabled' && flag.isEnabled) ||
+                    (this.activeFilter() === 'disabled' && !flag.isEnabled);
+                return matchesSearch && matchesFilter;
+            });
+        });
+        this.hasNoFilteredFlags = computed(() => this.filteredFlags().length === 0);
+        // Other properties
+        this.options = {
+            title: 'Feature Flags',
+            description: 'Manage the feature flags for your current session',
+            isClosable: true,
+            size: 'tall',
+            id: 'ndt-feature-flags',
+            isBeta: true,
+        };
+        this.filterOptions = [
+            { value: 'all', label: 'All Flags' },
+            { value: 'forced', label: 'Forced' },
+            { value: 'enabled', label: 'Enabled' },
+            { value: 'disabled', label: 'Disabled' },
+        ];
+        this.flagValueOptions = [
+            { value: 'not-forced', label: 'Not Forced' },
+            { value: 'off', label: 'Forced Off' },
+            { value: 'on', label: 'Forced On' },
+        ];
+    }
+    // Public methods
+    onFilterChange(value) {
+        const filter = this.filterOptions.find((f) => f.value === value);
+        if (filter) {
+            this.activeFilter.set(filter.value);
+        }
+    }
+    onFlagChange(flagId, value) {
+        switch (value) {
+            case 'not-forced':
+                this.featureFlags.removeFlagOverride(flagId);
+                break;
+            case 'on':
+                this.featureFlags.setFlag(flagId, true);
+                break;
+            case 'off':
+                this.featureFlags.setFlag(flagId, false);
+                break;
+        }
+    }
+    onSearchChange(query) {
+        this.searchQuery.set(query);
+    }
+    // Protected methods
+    getFlagValue(flag) {
+        if (!flag.isForced)
+            return '';
+        return flag.isEnabled ? 'on' : 'off';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarFeatureFlagsToolComponent, isStandalone: true, selector: "ndt-feature-flags-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="Feature Flags"
+      icon="toggle-left"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search..."
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+            />
+          </div>
+        </div>
+
         @if (hasNoFlags()) {
         <div class="empty">
           <p>No flags found</p>
@@ -2272,7 +2895,7 @@ class DevToolbarFeatureFlagsToolComponent {
         }
       </div>
     </ndt-toolbar-tool>
-  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header ndt-select{flex:.35}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, decorators: [{
             type: Component,
@@ -2281,6 +2904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         DevToolbarToolComponent,
                         DevToolbarInputComponent,
                         DevToolbarSelectComponent,
+                        DevToolbarIconComponent,
                     ], template: `
     <ndt-toolbar-tool
       [options]="options"
@@ -2294,12 +2918,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             (valueChange)="onSearchChange($event)"
             placeholder="Search..."
           />
-          <ndt-select
-            [value]="activeFilter()"
-            [options]="filterOptions"
-            [size]="'medium'"
-            (valueChange)="onFilterChange($event)"
-          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+            />
+          </div>
         </div>
 
         @if (hasNoFlags()) {
@@ -2332,7 +2959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }
       </div>
     </ndt-toolbar-tool>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header ndt-select{flex:.35}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"] }]
         }] });
 
 class DevToolbarButtonComponent {
@@ -2883,36 +3510,671 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
   `, styles: [".language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"] }]
         }] });
 
-class DevToolbarComponent {
+class DevToolbarNetworkMockerService {
     constructor() {
-        this.state = inject(DevToolbarStateService);
-        this.destroyRef = inject(DestroyRef);
-        this.settingsService = inject(SettingsService);
-        this.isDevMode = isDevMode();
-        this.keyboardShortcut = fromEvent(window, 'keydown')
-            .pipe(filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.toggleDevTools());
-        this.mouseLeave = fromEvent(document, 'mouseleave')
-            .pipe(throttleTime(3000), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.onMouseLeave());
+        this.mockRequests = signal([]);
+        this.isMockingEnabled = signal(false);
     }
-    ngOnInit() {
-        const settings = this.settingsService.getSettings();
-        this.state.setTheme(settings.isDarkMode ? 'dark' : 'light');
+    getMockRequests() {
+        return this.mockRequests.asReadonly();
     }
-    onMouseEnter() {
-        this.state.setVisibility(true);
+    getIsMockingEnabled() {
+        return this.isMockingEnabled.asReadonly();
     }
-    onMouseLeave() {
-        setTimeout(() => this.state.setVisibility(false), this.state.delay());
+    addMockRequest(config) {
+        const mockRequest = {
+            id: crypto.randomUUID(),
+            url: config.url,
+            method: config.method,
+            status: config.status || 200,
+            response: config.response || {},
+            isActive: true,
+            createdAt: new Date(),
+        };
+        this.mockRequests.update((requests) => [mockRequest, ...requests]);
     }
-    toggleDevTools() {
-        this.state.setVisibility(!this.state.isVisible());
+    removeMockRequest(id) {
+        this.mockRequests.update((requests) => requests.filter((request) => request.id !== id));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", ngImport: i0, template: `
-    @if (isDevMode) {
-    <div
+    toggleMockRequest(id) {
+        this.mockRequests.update((requests) => requests.map((request) => request.id === id
+            ? { ...request, isActive: !request.isActive }
+            : request));
+    }
+    enableMocking() {
+        this.isMockingEnabled.set(true);
+        console.log('Network mocking enabled');
+    }
+    disableMocking() {
+        this.isMockingEnabled.set(false);
+        console.log('Network mocking disabled');
+    }
+    clearAllMocks() {
+        this.mockRequests.set([]);
+        this.isMockingEnabled.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DevToolbarNetworkMockerToolComponent {
+    constructor() {
+        // Injects
+        this.networkMockerService = inject(DevToolbarNetworkMockerService);
+        // Signals
+        this.newMockUrl = signal('');
+        this.newMockMethod = signal('GET');
+        this.newMockStatus = signal('200');
+        this.newMockResponse = signal('');
+        // Computed values
+        this.mockRequests = this.networkMockerService.getMockRequests();
+        this.isMockingEnabled = this.networkMockerService.getIsMockingEnabled();
+        this.hasNoMocks = computed(() => this.mockRequests().length === 0);
+        // Window options
+        this.options = {
+            title: 'Network Mocker',
+            description: 'Intercept and mock HTTP requests for testing and development',
+            isClosable: true,
+            size: 'tall',
+            id: 'ndt-network-mocker',
+            isBeta: true,
+        };
+        // Other properties
+        this.httpMethods = [
+            { value: 'GET', label: 'GET' },
+            { value: 'POST', label: 'POST' },
+            { value: 'PUT', label: 'PUT' },
+            { value: 'DELETE', label: 'DELETE' },
+            { value: 'PATCH', label: 'PATCH' },
+        ];
+    }
+    // Public methods
+    onAddMock() {
+        const url = this.newMockUrl().trim();
+        if (!url)
+            return;
+        const config = {
+            url,
+            method: this.newMockMethod(),
+            status: parseInt(this.newMockStatus()) || 200,
+            response: this.newMockResponse()
+                ? JSON.parse(this.newMockResponse())
+                : {},
+        };
+        this.networkMockerService.addMockRequest(config);
+        // Reset form
+        this.newMockUrl.set('');
+        this.newMockMethod.set('GET');
+        this.newMockStatus.set('200');
+        this.newMockResponse.set('');
+    }
+    onToggleMocking() {
+        if (this.isMockingEnabled()) {
+            this.networkMockerService.disableMocking();
+        }
+        else {
+            this.networkMockerService.enableMocking();
+        }
+    }
+    onToggleMock(mockId) {
+        this.networkMockerService.toggleMockRequest(mockId);
+    }
+    onRemoveMock(mockId) {
+        this.networkMockerService.removeMockRequest(mockId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarNetworkMockerToolComponent, isStandalone: true, selector: "ndt-network-mocker-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool [options]="options" title="Network Mocker" icon="network">
+      <div class="container">
+        <div class="header">
+          <h3>Mock Network Requests</h3>
+          <p>Intercept and mock HTTP requests for testing and development.</p>
+        </div>
+
+        <div class="form">
+          <div class="form-row">
+            <ndt-input
+              [(value)]="newMockUrl"
+              placeholder="Enter URL pattern (e.g., /api/users/*)"
+              ariaLabel="Mock URL"
+            />
+            <ndt-select
+              [(value)]="newMockMethod"
+              [options]="httpMethods"
+              size="small"
+              ariaLabel="HTTP Method"
+            />
+          </div>
+
+          <div class="form-row">
+            <ndt-input
+              [(value)]="newMockStatus"
+              placeholder="Status code (default: 200)"
+              type="number"
+              ariaLabel="Status Code"
+            />
+            <ndt-input
+              [(value)]="newMockResponse"
+              placeholder="Response JSON (optional)"
+              ariaLabel="Response JSON"
+            />
+          </div>
+
+          <div class="actions">
+            <ndt-button label="Add Mock" icon="import" (click)="onAddMock()" />
+            <ndt-button
+              [label]="
+                isMockingEnabled() ? 'Disable Mocking' : 'Enable Mocking'
+              "
+              [icon]="isMockingEnabled() ? 'trash' : 'network'"
+              (click)="onToggleMocking()"
+            />
+          </div>
+        </div>
+
+        @if (hasNoMocks()) {
+        <div class="empty">
+          <p>No mock requests configured. Add your first mock above.</p>
+        </div>
+        } @else {
+        <div class="mocks-list">
+          <h4>Configured Mocks</h4>
+          @for (mock of mockRequests(); track mock.id) {
+          <div class="mock-item">
+            <div class="mock-info">
+              <div class="mock-method">{{ mock.method }}</div>
+              <div class="mock-url">{{ mock.url }}</div>
+              <div class="mock-status">{{ mock.status }}</div>
+            </div>
+            <div class="mock-actions">
+              <ndt-button
+                variant="icon"
+                [icon]="mock.isActive ? 'star' : 'moon'"
+                [ariaLabel]="mock.isActive ? 'Disable mock' : 'Enable mock'"
+                (click)="onToggleMock(mock.id)"
+              />
+              <ndt-button
+                variant="icon"
+                icon="trash"
+                ariaLabel="Remove mock"
+                (click)="onRemoveMock(mock.id)"
+              />
+            </div>
+          </div>
+          }
+        </div>
+        } @if (isMockingEnabled()) {
+        <div class="status">
+          <p>✅ Network mocking is active</p>
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.header{text-align:center;flex-shrink:0}.header h3{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-lg);color:var(--ndt-text-primary);font-weight:600}.header p{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted)}.form{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex-shrink:0;padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium)}.form-row{display:flex;gap:var(--ndt-spacing-sm)}.form-row ndt-input{flex:1}.form-row ndt-select{flex:0 0 120px}.actions{display:flex;gap:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm)}.empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--ndt-text-muted);text-align:center;font-size:var(--ndt-font-size-sm)}.mocks-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex:1;min-height:0;overflow-y:auto}.mocks-list h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);font-weight:600}.mocks-list::-webkit-scrollbar{width:8px}.mocks-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.mocks-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.mock-item{display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small)}.mock-item .mock-info{flex:1;display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.mock-item .mock-method{font-weight:600;font-size:var(--ndt-font-size-xs);color:var(--ndt-primary);background:var(--ndt-primary-background);padding:2px 6px;border-radius:var(--ndt-border-radius-small);min-width:40px;text-align:center}.mock-item .mock-url{flex:1;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-family:monospace}.mock-item .mock-status{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);min-width:30px;text-align:center}.mock-item .mock-actions{display:flex;gap:var(--ndt-spacing-xs)}.status{text-align:center;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);background:var(--ndt-success-background);border:1px solid var(--ndt-success-border);border-radius:var(--ndt-border-radius-small);color:var(--ndt-success-text);font-size:var(--ndt-font-size-sm);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-network-mocker-tool', standalone: true, imports: [
+                        FormsModule,
+                        DevToolbarToolComponent,
+                        DevToolbarButtonComponent,
+                        DevToolbarInputComponent,
+                        DevToolbarSelectComponent,
+                    ], template: `
+    <ndt-toolbar-tool [options]="options" title="Network Mocker" icon="network">
+      <div class="container">
+        <div class="header">
+          <h3>Mock Network Requests</h3>
+          <p>Intercept and mock HTTP requests for testing and development.</p>
+        </div>
+
+        <div class="form">
+          <div class="form-row">
+            <ndt-input
+              [(value)]="newMockUrl"
+              placeholder="Enter URL pattern (e.g., /api/users/*)"
+              ariaLabel="Mock URL"
+            />
+            <ndt-select
+              [(value)]="newMockMethod"
+              [options]="httpMethods"
+              size="small"
+              ariaLabel="HTTP Method"
+            />
+          </div>
+
+          <div class="form-row">
+            <ndt-input
+              [(value)]="newMockStatus"
+              placeholder="Status code (default: 200)"
+              type="number"
+              ariaLabel="Status Code"
+            />
+            <ndt-input
+              [(value)]="newMockResponse"
+              placeholder="Response JSON (optional)"
+              ariaLabel="Response JSON"
+            />
+          </div>
+
+          <div class="actions">
+            <ndt-button label="Add Mock" icon="import" (click)="onAddMock()" />
+            <ndt-button
+              [label]="
+                isMockingEnabled() ? 'Disable Mocking' : 'Enable Mocking'
+              "
+              [icon]="isMockingEnabled() ? 'trash' : 'network'"
+              (click)="onToggleMocking()"
+            />
+          </div>
+        </div>
+
+        @if (hasNoMocks()) {
+        <div class="empty">
+          <p>No mock requests configured. Add your first mock above.</p>
+        </div>
+        } @else {
+        <div class="mocks-list">
+          <h4>Configured Mocks</h4>
+          @for (mock of mockRequests(); track mock.id) {
+          <div class="mock-item">
+            <div class="mock-info">
+              <div class="mock-method">{{ mock.method }}</div>
+              <div class="mock-url">{{ mock.url }}</div>
+              <div class="mock-status">{{ mock.status }}</div>
+            </div>
+            <div class="mock-actions">
+              <ndt-button
+                variant="icon"
+                [icon]="mock.isActive ? 'star' : 'moon'"
+                [ariaLabel]="mock.isActive ? 'Disable mock' : 'Enable mock'"
+                (click)="onToggleMock(mock.id)"
+              />
+              <ndt-button
+                variant="icon"
+                icon="trash"
+                ariaLabel="Remove mock"
+                (click)="onRemoveMock(mock.id)"
+              />
+            </div>
+          </div>
+          }
+        </div>
+        } @if (isMockingEnabled()) {
+        <div class="status">
+          <p>✅ Network mocking is active</p>
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.header{text-align:center;flex-shrink:0}.header h3{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-lg);color:var(--ndt-text-primary);font-weight:600}.header p{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted)}.form{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex-shrink:0;padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium)}.form-row{display:flex;gap:var(--ndt-spacing-sm)}.form-row ndt-input{flex:1}.form-row ndt-select{flex:0 0 120px}.actions{display:flex;gap:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm)}.empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--ndt-text-muted);text-align:center;font-size:var(--ndt-font-size-sm)}.mocks-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex:1;min-height:0;overflow-y:auto}.mocks-list h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);font-weight:600}.mocks-list::-webkit-scrollbar{width:8px}.mocks-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.mocks-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.mock-item{display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small)}.mock-item .mock-info{flex:1;display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.mock-item .mock-method{font-weight:600;font-size:var(--ndt-font-size-xs);color:var(--ndt-primary);background:var(--ndt-primary-background);padding:2px 6px;border-radius:var(--ndt-border-radius-small);min-width:40px;text-align:center}.mock-item .mock-url{flex:1;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-family:monospace}.mock-item .mock-status{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);min-width:30px;text-align:center}.mock-item .mock-actions{display:flex;gap:var(--ndt-spacing-xs)}.status{text-align:center;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);background:var(--ndt-success-background);border:1px solid var(--ndt-success-border);border-radius:var(--ndt-border-radius-small);color:var(--ndt-success-text);font-size:var(--ndt-font-size-sm);flex-shrink:0}\n"] }]
+        }] });
+
+class DevToolbarInternalPermissionsService {
+    constructor() {
+        this.STORAGE_KEY = 'permissions';
+        this.storageService = inject(DevToolsStorageService);
+        this.appPermissions$ = new BehaviorSubject([]);
+        this.forcedStateSubject = new BehaviorSubject({
+            granted: [],
+            denied: [],
+        });
+        this.forcedState$ = this.forcedStateSubject.asObservable();
+        this.permissions$ = combineLatest([
+            this.appPermissions$,
+            this.forcedState$,
+        ]).pipe(map(([appPermissions, { granted, denied }]) => {
+            return appPermissions.map((permission) => ({
+                ...permission,
+                isForced: granted.includes(permission.id) || denied.includes(permission.id),
+                isGranted: granted.includes(permission.id)
+                    ? true
+                    : denied.includes(permission.id)
+                        ? false
+                        : permission.isGranted,
+            }));
+        }));
+        this.permissions = toSignal(this.permissions$, { initialValue: [] });
+        this.loadForcedState();
+    }
+    setAppPermissions(permissions) {
+        this.appPermissions$.next(permissions);
+        this.validateAndCleanForcedState(permissions);
+    }
+    setPermission(id, granted) {
+        const { granted: grantedIds, denied: deniedIds } = this.forcedStateSubject.value;
+        const newGranted = grantedIds.filter((permId) => permId !== id);
+        const newDenied = deniedIds.filter((permId) => permId !== id);
+        if (granted) {
+            newGranted.push(id);
+        }
+        else {
+            newDenied.push(id);
+        }
+        const newState = { granted: newGranted, denied: newDenied };
+        this.forcedStateSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    removePermissionOverride(id) {
+        const { granted, denied } = this.forcedStateSubject.value;
+        const newState = {
+            granted: granted.filter((permId) => permId !== id),
+            denied: denied.filter((permId) => permId !== id),
+        };
+        this.forcedStateSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    getForcedPermissions() {
+        return this.permissions$.pipe(map((permissions) => permissions.filter((permission) => permission.isForced)));
+    }
+    /**
+     * Apply a preset permissions state, replacing the current forced state.
+     * Useful for automated testing or restoring saved configurations.
+     * @param state The preset forced permissions state to apply
+     */
+    applyPresetPermissions(state) {
+        this.forcedStateSubject.next(state);
+        this.storageService.set(this.STORAGE_KEY, state);
+    }
+    /**
+     * Get the current forced permissions state.
+     * Returns a deep copy to prevent external mutations.
+     * @returns Current forced permissions state
+     */
+    getCurrentForcedState() {
+        const currentState = this.forcedStateSubject.value;
+        return {
+            granted: [...currentState.granted],
+            denied: [...currentState.denied],
+        };
+    }
+    loadForcedState() {
+        try {
+            const savedState = this.storageService.get(this.STORAGE_KEY);
+            if (savedState && this.isValidForcedState(savedState)) {
+                this.forcedStateSubject.next(savedState);
+            }
+        }
+        catch (error) {
+            console.warn('Error loading forced permissions state from localStorage:', error);
+        }
+    }
+    isValidForcedState(state) {
+        return (state &&
+            typeof state === 'object' &&
+            Array.isArray(state.granted) &&
+            Array.isArray(state.denied));
+    }
+    validateAndCleanForcedState(permissions) {
+        const currentState = this.forcedStateSubject.value;
+        const validIds = new Set(permissions.map((p) => p.id));
+        const cleanedGranted = currentState.granted.filter((id) => validIds.has(id));
+        const cleanedDenied = currentState.denied.filter((id) => validIds.has(id));
+        const hasInvalidIds = cleanedGranted.length !== currentState.granted.length ||
+            cleanedDenied.length !== currentState.denied.length;
+        if (hasInvalidIds) {
+            const cleanedState = {
+                granted: cleanedGranted,
+                denied: cleanedDenied,
+            };
+            this.forcedStateSubject.next(cleanedState);
+            this.storageService.set(this.STORAGE_KEY, cleanedState);
+            const invalidIds = [
+                ...currentState.granted.filter((id) => !validIds.has(id)),
+                ...currentState.denied.filter((id) => !validIds.has(id)),
+            ];
+            if (invalidIds.length > 0) {
+                console.warn('Removed invalid permission IDs from forced state:', invalidIds);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class DevToolbarPermissionsToolComponent {
+    constructor() {
+        // Injects
+        this.permissionsService = inject(DevToolbarInternalPermissionsService);
+        // Signals
+        this.activeFilter = signal('all');
+        this.searchQuery = signal('');
+        this.permissions = this.permissionsService.permissions;
+        this.hasNoPermissions = computed(() => this.permissions().length === 0);
+        this.filteredPermissions = computed(() => {
+            return this.permissions().filter((permission) => {
+                const searchTerm = this.searchQuery().toLowerCase();
+                const permissionName = permission.name.toLowerCase();
+                const permissionDescription = permission.description?.toLowerCase() ?? '';
+                const matchesSearch = !this.searchQuery() ||
+                    permissionName.includes(searchTerm) ||
+                    permissionDescription.includes(searchTerm);
+                const matchesFilter = this.activeFilter() === 'all' ||
+                    (this.activeFilter() === 'forced' && permission.isForced) ||
+                    (this.activeFilter() === 'granted' && permission.isGranted) ||
+                    (this.activeFilter() === 'denied' && !permission.isGranted);
+                return matchesSearch && matchesFilter;
+            });
+        });
+        this.hasNoFilteredPermissions = computed(() => this.filteredPermissions().length === 0);
+        // Other properties
+        this.options = {
+            title: 'Permissions',
+            description: 'Manage permission overrides for your current session',
+            isClosable: true,
+            size: 'tall',
+            id: 'ndt-permissions',
+            isBeta: true,
+        };
+        this.filterOptions = [
+            { value: 'all', label: 'All Permissions' },
+            { value: 'forced', label: 'Forced' },
+            { value: 'granted', label: 'Granted' },
+            { value: 'denied', label: 'Denied' },
+        ];
+        this.permissionValueOptions = [
+            { value: 'not-forced', label: 'Not Forced' },
+            { value: 'denied', label: 'Forced Denied' },
+            { value: 'granted', label: 'Forced Granted' },
+        ];
+    }
+    // Public methods
+    onFilterChange(value) {
+        const filter = this.filterOptions.find((f) => f.value === value);
+        if (filter) {
+            this.activeFilter.set(filter.value);
+        }
+    }
+    onPermissionChange(id, value) {
+        switch (value) {
+            case 'not-forced':
+                this.permissionsService.removePermissionOverride(id);
+                break;
+            case 'granted':
+                this.permissionsService.setPermission(id, true);
+                break;
+            case 'denied':
+                this.permissionsService.setPermission(id, false);
+                break;
+        }
+    }
+    onSearchChange(query) {
+        this.searchQuery.set(query);
+    }
+    // Protected methods
+    getPermissionValue(permission) {
+        if (!permission.isForced)
+            return '';
+        return permission.isGranted ? 'granted' : 'denied';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarPermissionsToolComponent, isStandalone: true, selector: "ndt-permissions-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="Permissions"
+      icon="lock"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search permissions..."
+            [ariaLabel]="'Search permissions'"
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+              [ariaLabel]="'Filter permissions by state'"
+            />
+          </div>
+        </div>
+
+        @if (hasNoPermissions()) {
+        <div class="empty">
+          <p>No permissions found</p>
+          <p class="hint">Call setAvailableOptions() to configure permissions</p>
+        </div>
+        } @else if (hasNoFilteredPermissions()) {
+        <div class="empty">
+          <p>No permissions match your filter</p>
+        </div>
+        } @else {
+        <div class="permission-list">
+          @for (permission of filteredPermissions(); track permission.id) {
+          <div class="permission">
+            <div class="info">
+              <h3>{{ permission.name }}</h3>
+              <p>{{ permission?.description }}</p>
+            </div>
+
+            <ndt-select
+              [value]="getPermissionValue(permission)"
+              [options]="permissionValueOptions"
+              [ariaLabel]="'Override state for ' + permission.name"
+              (valueChange)="onPermissionChange(permission.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.permission-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.permission-list::-webkit-scrollbar{width:8px}.permission-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.permission-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.permission{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.permission .info{flex:0 0 65%}.permission .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.permission .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.permission ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-permissions-tool', standalone: true, imports: [
+                        FormsModule,
+                        DevToolbarToolComponent,
+                        DevToolbarInputComponent,
+                        DevToolbarSelectComponent,
+                        DevToolbarIconComponent,
+                    ], template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="Permissions"
+      icon="lock"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search permissions..."
+            [ariaLabel]="'Search permissions'"
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+              [ariaLabel]="'Filter permissions by state'"
+            />
+          </div>
+        </div>
+
+        @if (hasNoPermissions()) {
+        <div class="empty">
+          <p>No permissions found</p>
+          <p class="hint">Call setAvailableOptions() to configure permissions</p>
+        </div>
+        } @else if (hasNoFilteredPermissions()) {
+        <div class="empty">
+          <p>No permissions match your filter</p>
+        </div>
+        } @else {
+        <div class="permission-list">
+          @for (permission of filteredPermissions(); track permission.id) {
+          <div class="permission">
+            <div class="info">
+              <h3>{{ permission.name }}</h3>
+              <p>{{ permission?.description }}</p>
+            </div>
+
+            <ndt-select
+              [value]="getPermissionValue(permission)"
+              [options]="permissionValueOptions"
+              [ariaLabel]="'Override state for ' + permission.name"
+              (valueChange)="onPermissionChange(permission.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.permission-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.permission-list::-webkit-scrollbar{width:8px}.permission-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.permission-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.permission{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.permission .info{flex:0 0 65%}.permission .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.permission .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.permission ndt-select{flex:0 0 35%}\n"] }]
+        }] });
+
+class DevToolbarComponent {
+    constructor() {
+        this.state = inject(DevToolbarStateService);
+        this.destroyRef = inject(DestroyRef);
+        this.settingsService = inject(SettingsService);
+        this.isDevMode = isDevMode();
+        this.keyboardShortcut = fromEvent(window, 'keydown')
+            .pipe(filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.toggleDevTools());
+        this.mouseLeave = fromEvent(document, 'mouseleave')
+            .pipe(throttleTime(3000), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.onMouseLeave());
+    }
+    ngOnInit() {
+        const settings = this.settingsService.getSettings();
+        this.state.setTheme(settings.isDarkMode ? 'dark' : 'light');
+    }
+    onMouseEnter() {
+        this.state.setVisibility(true);
+    }
+    onMouseLeave() {
+        setTimeout(() => this.state.setVisibility(false), this.state.delay());
+    }
+    toggleDevTools() {
+        this.state.setVisibility(!this.state.isVisible());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", ngImport: i0, template: `
+    @if (isDevMode) {
+    <div
       aria-label="Developer tools"
       role="toolbar"
       class="dev-toolbar"
@@ -2924,10 +4186,13 @@ class DevToolbarComponent {
       <ndt-home-tool />
       <ndt-language-tool />
       <ndt-feature-flags-tool />
+      <ndt-app-features-tool />
+      <ndt-permissions-tool />
+      <ndt-network-mocker-tool />
       <ng-content />
     </div>
     }
-  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}\n"], dependencies: [{ kind: "component", type: DevToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }], animations: [
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}\n"], dependencies: [{ kind: "component", type: DevToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: DevToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: DevToolbarNetworkMockerToolComponent, selector: "ndt-network-mocker-tool" }, { kind: "component", type: DevToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }], animations: [
             trigger('toolbarState', [
                 state('hidden', style({
                     transform: 'translate(-50%, calc(100% + -1.2rem))',
@@ -2947,6 +4212,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         DevToolbarHomeToolComponent,
                         DevToolbarLanguageToolComponent,
                         DevToolbarFeatureFlagsToolComponent,
+                        DevToolbarAppFeaturesToolComponent,
+                        DevToolbarNetworkMockerToolComponent,
+                        DevToolbarPermissionsToolComponent,
                     ], template: `
     @if (isDevMode) {
     <div
@@ -2961,6 +4229,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
       <ndt-home-tool />
       <ndt-language-tool />
       <ndt-feature-flags-tool />
+      <ndt-app-features-tool />
+      <ndt-permissions-tool />
+      <ndt-network-mocker-tool />
       <ng-content />
     </div>
     }
@@ -3031,9 +4302,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Public service for managing app features in the dev toolbar.
+ *
+ * This service implements the DevToolsService interface and provides methods for:
+ * - Configuring available product features
+ * - Retrieving forced feature overrides
+ * - Applying preset feature configurations
+ * - Exporting current forced state for presets
+ *
+ * @example
+ * ```typescript
+ * import { DevToolbarAppFeaturesService } from 'ngx-dev-toolbar';
+ *
+ * @Component({...})
+ * export class AppComponent implements OnInit {
+ *   private appFeaturesService = inject(DevToolbarAppFeaturesService);
+ *
+ *   ngOnInit() {
+ *     // Configure available features based on current tier
+ *     const features: DevToolbarAppFeature[] = [
+ *       { id: 'analytics', name: 'Analytics Dashboard', isEnabled: true, isForced: false },
+ *       { id: 'multi-user', name: 'Multi-User Support', isEnabled: false, isForced: false }
+ *     ];
+ *     this.appFeaturesService.setAvailableOptions(features);
+ *
+ *     // Subscribe to forced overrides
+ *     this.appFeaturesService.getForcedValues().subscribe(forcedFeatures => {
+ *       forcedFeatures.forEach(feature => {
+ *         // Apply forced feature state to application logic
+ *         this.applyFeatureState(feature.id, feature.isEnabled);
+ *       });
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class DevToolbarAppFeaturesService {
+    constructor() {
+        this.internalService = inject(DevToolbarInternalAppFeaturesService);
+    }
+    /**
+     * Set available app features for the application.
+     *
+     * Configures the list of product features that can be toggled in the dev toolbar.
+     * Features should represent product-level capabilities like license tiers,
+     * deployment configurations, or environment flags.
+     *
+     * @param features - Array of app features to display in the toolbar
+     * @throws Error if duplicate feature IDs or empty IDs are detected
+     *
+     * @example
+     * ```typescript
+     * const features: DevToolbarAppFeature[] = [
+     *   {
+     *     id: 'advanced-analytics',
+     *     name: 'Advanced Analytics Dashboard',
+     *     description: 'Access premium reporting and data visualization',
+     *     isEnabled: false,  // Not available in current tier
+     *     isForced: false
+     *   },
+     *   {
+     *     id: 'multi-user-support',
+     *     name: 'Multi-User Collaboration',
+     *     description: 'Enable team features and user management',
+     *     isEnabled: true,   // Available in current tier
+     *     isForced: false
+     *   }
+     * ];
+     * this.appFeaturesService.setAvailableOptions(features);
+     * ```
+     */
+    setAvailableOptions(features) {
+        this.internalService.setAppFeatures(features);
+    }
+    /**
+     * Get observable stream of features that have forced overrides.
+     *
+     * Emits an array of features that have been forced via the dev toolbar.
+     * Only features with `isForced = true` are included in the emissions.
+     * Use this to react to feature override changes and update application behavior.
+     *
+     * @returns Observable that emits array of forced features whenever state changes
+     *
+     * @example
+     * ```typescript
+     * this.appFeaturesService.getForcedValues()
+     *   .pipe(takeUntilDestroyed())
+     *   .subscribe(forcedFeatures => {
+     *     forcedFeatures.forEach(feature => {
+     *       if (feature.isEnabled) {
+     *         this.enableFeature(feature.id);
+     *       } else {
+     *         this.disableFeature(feature.id);
+     *       }
+     *     });
+     *   });
+     * ```
+     */
+    getForcedValues() {
+        return this.internalService.getForcedFeatures();
+    }
+    /**
+     * Apply a preset feature configuration (for preset tool integration).
+     *
+     * Accepts a forced features state object and applies it to the current configuration.
+     * Invalid feature IDs (not in configured features) are filtered out with a warning.
+     *
+     * @param state - Forced features state containing enabled/disabled arrays
+     *
+     * @example
+     * ```typescript
+     * // Apply "Enterprise Tier" preset
+     * const enterprisePreset: ForcedAppFeaturesState = {
+     *   enabled: ['analytics', 'multi-user', 'white-label', 'sso'],
+     *   disabled: []
+     * };
+     * this.appFeaturesService.applyPresetFeatures(enterprisePreset);
+     *
+     * // Apply "Basic Tier" preset
+     * const basicPreset: ForcedAppFeaturesState = {
+     *   enabled: [],
+     *   disabled: ['analytics', 'multi-user', 'white-label', 'sso']
+     * };
+     * this.appFeaturesService.applyPresetFeatures(basicPreset);
+     * ```
+     */
+    applyPresetFeatures(state) {
+        this.internalService.applyForcedState(state);
+    }
+    /**
+     * Get current forced feature state as a snapshot (for preset export).
+     *
+     * Returns the current forced features state with enabled/disabled arrays.
+     * Useful for exporting toolbar state to save as a preset or for debugging.
+     * Returns a defensive copy - mutations will not affect internal state.
+     *
+     * @returns Current forced features state
+     *
+     * @example
+     * ```typescript
+     * // Export current toolbar state to save as preset
+     * const currentState = this.appFeaturesService.getCurrentForcedState();
+     * this.presetsService.savePreset('my-config', {
+     *   appFeatures: currentState,
+     *   // ... other tool states
+     * });
+     *
+     * console.log(currentState);
+     * // { enabled: ['analytics'], disabled: ['white-label'] }
+     * ```
+     */
+    getCurrentForcedState() {
+        return this.internalService.getCurrentForcedState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Public service for integrating the Permissions Tool with your application.
+ * Use this service to:
+ * 1. Register your application's permissions with setAvailableOptions()
+ * 2. Listen for toolbar permission overrides with getForcedValues()
+ * 3. Apply preset permission states for testing with applyPreset()
+ *
+ * @example
+ * ```typescript
+ * constructor(private permissionsService: DevToolbarPermissionsService) {
+ *   // Register permissions
+ *   this.permissionsService.setAvailableOptions([
+ *     { id: 'can-edit', name: 'Can Edit', isGranted: false, isForced: false }
+ *   ]);
+ *
+ *   // Listen for overrides
+ *   this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
+ *     // Update your app's permission state
+ *   });
+ * }
+ * ```
+ */
+class DevToolbarPermissionsService {
+    constructor() {
+        this.internalService = inject(DevToolbarInternalPermissionsService);
+    }
+    /**
+     * Sets the available permissions that will be displayed in the toolbar tool.
+     * Call this in your app initialization to register permissions.
+     *
+     * @param permissions Array of permissions to display in the toolbar
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.setAvailableOptions([
+     *   {
+     *     id: 'can-edit-posts',
+     *     name: 'Edit Posts',
+     *     description: 'Can edit blog posts',
+     *     isGranted: false,
+     *     isForced: false
+     *   }
+     * ]);
+     * ```
+     */
+    setAvailableOptions(permissions) {
+        this.internalService.setAppPermissions(permissions);
+    }
+    /**
+     * Gets an observable of permissions that were forced/overridden through the toolbar.
+     * Subscribe to this to update your application's permission state.
+     *
+     * @returns Observable emitting array of forced permissions whenever changes occur
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
+     *   forcedPermissions.forEach(permission => {
+     *     this.updatePermission(permission.id, permission.isGranted);
+     *   });
+     * });
+     * ```
+     */
+    getForcedValues() {
+        return this.internalService.getForcedPermissions();
+    }
+    /**
+     * Apply a preset permission state. Useful for automated testing scenarios.
+     *
+     * @param state The forced permissions state to apply
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.applyPreset({
+     *   granted: ['can-edit-posts'],
+     *   denied: ['can-delete-posts']
+     * });
+     * ```
+     */
+    applyPreset(state) {
+        this.internalService.applyPresetPermissions(state);
+    }
+    /**
+     * Get the current forced permission state.
+     *
+     * @returns Current forced permissions state
+     */
+    getCurrentState() {
+        return this.internalService.getCurrentForcedState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DevToolbarComponent, DevToolbarFeatureFlagService, DevToolbarIconComponent, DevToolbarLanguageService, DevToolbarToolComponent };
+export { DevToolbarAppFeaturesService, DevToolbarAppFeaturesToolComponent, DevToolbarComponent, DevToolbarFeatureFlagService, DevToolbarIconComponent, DevToolbarLanguageService, DevToolbarNetworkMockerService, DevToolbarNetworkMockerToolComponent, DevToolbarPermissionsService, DevToolbarPermissionsToolComponent, DevToolbarToolComponent };
 //# sourceMappingURL=ngx-dev-toolbar.mjs.map