@ng-prism/core 22.2.0 → 22.3.0

package/dist/app/panels/events/prism-json-node.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-json-node.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-json-node.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,IAAI,EAAE,MAAM,eAAe,CAAC;;AAOzE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,KAAK,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAShG,qBA0Ja,sBAAsB;IACjC,QAAQ,CAAC,KAAK,+CAA6B;IAC3C,QAAQ,CAAC,KAAK,8CAAoB;IAElC,SAAS,CAAC,QAAQ,CAAC,QAAQ,MAAa;IACxC,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAA0B;IAE/E,SAAS,CAAC,QAAQ,CAAC,IAAI,+CAAyC;IAChE,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAiB;IAE5C,SAAS,CAAC,QAAQ,CAAC,OAAO;aAAmB,MAAM;eAAS,OAAO;SAUhE;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,4CAGrB;IAEH,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAAgD;IAE1E,SAAS,CAAC,MAAM,IAAI,IAAI;yCA7Bb,sBAAsB;2CAAtB,sBAAsB;CAgClC"}
+{"version":3,"file":"prism-json-node.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-json-node.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAsC,IAAI,EAAE,MAAM,eAAe,CAAC;;AAMzE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,KAAK,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAShG,qBAOa,sBAAsB;IAC/B,QAAQ,CAAC,KAAK,+CAA6B;IAC3C,QAAQ,CAAC,KAAK,8CAAoB;IAElC,SAAS,CAAC,QAAQ,CAAC,QAAQ,MAAa;IACxC,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAA0B;IAE/E,SAAS,CAAC,QAAQ,CAAC,IAAI,+CAAyC;IAChE,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAiB;IAE5C,SAAS,CAAC,QAAQ,CAAC,OAAO;aAAmB,MAAM;eAAS,OAAO;SAWhE;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,4CAIrB;IAEH,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAAgD;IAE1E,SAAS,CAAC,MAAM,IAAI,IAAI;yCA/Bf,sBAAsB;2CAAtB,sBAAsB;CAkClC"}

package/dist/app/panels/events/prism-json-node.component.js

@@ -1,5 +1,5 @@
-import { Component, computed, input, signal } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
+import { Component, computed, input, signal } from '@angular/core';
 import { summarizeValue } from './prism-json-node.utils.js';
 import * as i0 from "@angular/core";
 const _c0 = (a0, a1) => ({ value: a0, depth: a1 });
@@ -266,92 +266,10 @@ export class PrismJsonNodeComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.type()) === "object" ? 0 : tmp_0_0 === "array" ? 1 : tmp_0_0 === "string" ? 2 : tmp_0_0 === "number" ? 3 : tmp_0_0 === "boolean" ? 4 : tmp_0_0 === "null" ? 5 : tmp_0_0 === "undefined" ? 6 : -1);
-        } }, dependencies: [NgComponentOutlet], styles: ["[_nghost-%COMP%] {\n      display: inline;\n      font-family: var(--%NS%prism-font-mono, monospace);\n      font-size: 12px;\n    }\n    .json-expandable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      user-select: none;\n      display: inline-flex;\n      align-items: baseline;\n      gap: 2px;\n    }\n    .json-expandable[_ngcontent-%COMP%]:hover   .json-summary[_ngcontent-%COMP%] {\n      opacity: 0.8;\n    }\n    .json-chevron[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      font-size: 10px;\n      width: 10px;\n      flex-shrink: 0;\n    }\n    .json-summary[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n    }\n    .json-children[_ngcontent-%COMP%] {\n      display: block;\n      padding-left: 16px;\n      border-left: 1px solid var(--%NS%prism-border);\n      margin: 2px 0;\n    }\n    .json-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: baseline;\n      flex-wrap: wrap;\n      gap: 0;\n      padding: 1px 0;\n    }\n    .json-key[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n    }\n    .json-index[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      font-style: italic;\n    }\n    .json-colon[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n    }\n    .json-brace[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n    }\n    .json-string[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-code-attr);\n    }\n    .json-number[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-warn);\n    }\n    .json-boolean[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n    }\n    .json-null[_ngcontent-%COMP%], \n   .json-undefined[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      font-style: italic;\n    }"] });
+        } }, dependencies: [NgComponentOutlet], styles: ["[_nghost-%COMP%] {\n    display: inline;\n    font-family: var(--%NS%prism-font-mono, monospace);\n    font-size: 12px;\n}\n\n.json-expandable[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 2px;\n    align-items: baseline;\n    cursor: pointer;\n    user-select: none;\n}\n\n.json-expandable[_ngcontent-%COMP%]:hover   .json-summary[_ngcontent-%COMP%] {\n    opacity: 0.8;\n}\n\n.json-chevron[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 10px;\n    font-size: 10px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.json-summary[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.json-children[_ngcontent-%COMP%] {\n    display: block;\n    padding-left: 16px;\n    margin: 2px 0;\n    border-left: 1px solid var(--%NS%prism-border);\n}\n\n.json-row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0;\n    align-items: baseline;\n    padding: 1px 0;\n}\n\n.json-key[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.json-index[_ngcontent-%COMP%] {\n    font-style: italic;\n    color: var(--%NS%prism-text-muted);\n}\n\n.json-colon[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.json-brace[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.json-string[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-code-attr);\n}\n\n.json-number[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n}\n\n.json-boolean[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n}\n\n.json-null[_ngcontent-%COMP%], \n.json-undefined[_ngcontent-%COMP%] {\n    font-style: italic;\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismJsonNodeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-json-node', standalone: true, imports: [NgComponentOutlet], template: `
-    @switch (type()) {
-      @case ('object') {
-        @if (entries().length === 0) {
-          <span class="json-brace">{{ '{}' }}</span>
-        } @else {
-          <span class="json-expandable" (click)="toggle()">
-            <span class="json-chevron">{{ expanded() ? '▾' : '▸' }}</span>
-            @if (!expanded()) {
-              <span class="json-summary">{{ summary() }}</span>
-            }
-          </span>
-          @if (expanded()) {
-            @if (depth() >= maxDepth) {
-              <span class="json-summary">…</span>
-            } @else {
-              <span class="json-brace">{{ '{' }}</span>
-              <div class="json-children">
-                @for (entry of entries(); track entry.key) {
-                  <div class="json-row">
-                    <span class="json-key">{{ entry.key }}</span>
-                    <span class="json-colon">:&nbsp;</span>
-                    <ng-container
-                      [ngComponentOutlet]="self"
-                      [ngComponentOutletInputs]="{ value: entry.value, depth: depth() + 1 }"
-                    />
-                  </div>
-                }
-              </div>
-              <span class="json-brace">{{ '}' }}</span>
-            }
-          }
-        }
-      }
-      @case ('array') {
-        @if (items().length === 0) {
-          <span class="json-brace">[]</span>
-        } @else {
-          <span class="json-expandable" (click)="toggle()">
-            <span class="json-chevron">{{ expanded() ? '▾' : '▸' }}</span>
-            @if (!expanded()) {
-              <span class="json-summary">{{ summary() }}</span>
-            }
-          </span>
-          @if (expanded()) {
-            @if (depth() >= maxDepth) {
-              <span class="json-summary">…</span>
-            } @else {
-              <span class="json-brace">[</span>
-              <div class="json-children">
-                @for (item of items(); track $index) {
-                  <div class="json-row">
-                    <span class="json-index">{{ $index }}</span>
-                    <span class="json-colon">:&nbsp;</span>
-                    <ng-container
-                      [ngComponentOutlet]="self"
-                      [ngComponentOutletInputs]="{ value: item, depth: depth() + 1 }"
-                    />
-                  </div>
-                }
-              </div>
-              <span class="json-brace">]</span>
-            }
-          }
-        }
-      }
-      @case ('string') {
-        <span class="json-string">"{{ value() }}"</span>
-      }
-      @case ('number') {
-        <span class="json-number">{{ value() }}</span>
-      }
-      @case ('boolean') {
-        <span class="json-boolean">{{ value() }}</span>
-      }
-      @case ('null') {
-        <span class="json-null">null</span>
-      }
-      @case ('undefined') {
-        <span class="json-undefined">undefined</span>
-      }
-    }
-  `, styles: ["\n    :host {\n      display: inline;\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n    }\n    .json-expandable {\n      cursor: pointer;\n      user-select: none;\n      display: inline-flex;\n      align-items: baseline;\n      gap: 2px;\n    }\n    .json-expandable:hover .json-summary {\n      opacity: 0.8;\n    }\n    .json-chevron {\n      color: var(--prism-text-muted);\n      font-size: 10px;\n      width: 10px;\n      flex-shrink: 0;\n    }\n    .json-summary {\n      color: var(--prism-text-muted);\n    }\n    .json-children {\n      display: block;\n      padding-left: 16px;\n      border-left: 1px solid var(--prism-border);\n      margin: 2px 0;\n    }\n    .json-row {\n      display: flex;\n      align-items: baseline;\n      flex-wrap: wrap;\n      gap: 0;\n      padding: 1px 0;\n    }\n    .json-key {\n      color: var(--prism-text-muted);\n    }\n    .json-index {\n      color: var(--prism-text-muted);\n      font-style: italic;\n    }\n    .json-colon {\n      color: var(--prism-text-muted);\n    }\n    .json-brace {\n      color: var(--prism-text-muted);\n    }\n    .json-string {\n      color: var(--prism-code-attr);\n    }\n    .json-number {\n      color: var(--prism-warn);\n    }\n    .json-boolean {\n      color: var(--prism-primary);\n    }\n    .json-null,\n    .json-undefined {\n      color: var(--prism-text-muted);\n      font-style: italic;\n    }\n  "] }]
+        args: [{ selector: 'prism-json-node', standalone: true, imports: [NgComponentOutlet], template: "@switch (type()) {\n    @case ('object') {\n        @if (entries().length === 0) {\n            <span class=\"json-brace\">{{ '{}' }}</span>\n        } @else {\n            <span\n                class=\"json-expandable\"\n                (click)=\"toggle()\">\n                <span class=\"json-chevron\">{{ expanded() ? '\u25BE' : '\u25B8' }}</span>\n                @if (!expanded()) {\n                    <span class=\"json-summary\">{{ summary() }}</span>\n                }\n            </span>\n            @if (expanded()) {\n                @if (depth() >= maxDepth) {\n                    <span class=\"json-summary\">\u2026</span>\n                } @else {\n                    <span class=\"json-brace\">{{ '{' }}</span>\n                    <div class=\"json-children\">\n                        @for (entry of entries(); track entry.key) {\n                            <div class=\"json-row\">\n                                <span class=\"json-key\">{{ entry.key }}</span>\n                                <span class=\"json-colon\">:&nbsp;</span>\n                                <ng-container\n                                    [ngComponentOutlet]=\"self\"\n                                    [ngComponentOutletInputs]=\"{ value: entry.value, depth: depth() + 1 }\" />\n                            </div>\n                        }\n                    </div>\n                    <span class=\"json-brace\">{{ '}' }}</span>\n                }\n            }\n        }\n    }\n    @case ('array') {\n        @if (items().length === 0) {\n            <span class=\"json-brace\">[]</span>\n        } @else {\n            <span\n                class=\"json-expandable\"\n                (click)=\"toggle()\">\n                <span class=\"json-chevron\">{{ expanded() ? '\u25BE' : '\u25B8' }}</span>\n                @if (!expanded()) {\n                    <span class=\"json-summary\">{{ summary() }}</span>\n                }\n            </span>\n            @if (expanded()) {\n                @if (depth() >= maxDepth) {\n                    <span class=\"json-summary\">\u2026</span>\n                } @else {\n                    <span class=\"json-brace\">[</span>\n                    <div class=\"json-children\">\n                        @for (item of items(); track $index) {\n                            <div class=\"json-row\">\n                                <span class=\"json-index\">{{ $index }}</span>\n                                <span class=\"json-colon\">:&nbsp;</span>\n                                <ng-container\n                                    [ngComponentOutlet]=\"self\"\n                                    [ngComponentOutletInputs]=\"{ value: item, depth: depth() + 1 }\" />\n                            </div>\n                        }\n                    </div>\n                    <span class=\"json-brace\">]</span>\n                }\n            }\n        }\n    }\n    @case ('string') {\n        <span class=\"json-string\">\"{{ value() }}\"</span>\n    }\n    @case ('number') {\n        <span class=\"json-number\">{{ value() }}</span>\n    }\n    @case ('boolean') {\n        <span class=\"json-boolean\">{{ value() }}</span>\n    }\n    @case ('null') {\n        <span class=\"json-null\">null</span>\n    }\n    @case ('undefined') {\n        <span class=\"json-undefined\">undefined</span>\n    }\n}\n", styles: [":host {\n    display: inline;\n    font-family: var(--prism-font-mono, monospace);\n    font-size: 12px;\n}\n\n.json-expandable {\n    display: inline-flex;\n    gap: 2px;\n    align-items: baseline;\n    cursor: pointer;\n    user-select: none;\n}\n\n.json-expandable:hover .json-summary {\n    opacity: 0.8;\n}\n\n.json-chevron {\n    flex-shrink: 0;\n    width: 10px;\n    font-size: 10px;\n    color: var(--prism-text-muted);\n}\n\n.json-summary {\n    color: var(--prism-text-muted);\n}\n\n.json-children {\n    display: block;\n    padding-left: 16px;\n    margin: 2px 0;\n    border-left: 1px solid var(--prism-border);\n}\n\n.json-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0;\n    align-items: baseline;\n    padding: 1px 0;\n}\n\n.json-key {\n    color: var(--prism-text-muted);\n}\n\n.json-index {\n    font-style: italic;\n    color: var(--prism-text-muted);\n}\n\n.json-colon {\n    color: var(--prism-text-muted);\n}\n\n.json-brace {\n    color: var(--prism-text-muted);\n}\n\n.json-string {\n    color: var(--prism-code-attr);\n}\n\n.json-number {\n    color: var(--prism-warn);\n}\n\n.json-boolean {\n    color: var(--prism-primary);\n}\n\n.json-null,\n.json-undefined {\n    font-style: italic;\n    color: var(--prism-text-muted);\n}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismJsonNodeComponent, { className: "PrismJsonNodeComponent", filePath: "app/panels/events/prism-json-node.component.ts", lineNumber: 173 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismJsonNodeComponent, { className: "PrismJsonNodeComponent", filePath: "app/panels/events/prism-json-node.component.ts", lineNumber: 26 }); })();

package/dist/app/panels/events/prism-json-node.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-json-node.utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-json-node.utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,SAAI,EAAE,OAAO,kBAAwB,GAAG,MAAM,CA8B/F"}
+{"version":3,"file":"prism-json-node.utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-json-node.utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,SAAI,EAAE,OAAO,kBAAwB,GAAG,MAAM,CAmC/F"}

package/dist/app/panels/panel-host/panel-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-badge.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/panel-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;CAChC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,eAAe,EACtB,SAAS,EAAE,gBAAgB,GAAG,IAAI,EAClC,OAAO,EAAE,iBAAiB,GACzB,UAAU,GAAG,IAAI,CAyBnB"}
+{"version":3,"file":"panel-badge.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/panel-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAErG,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;CAClC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,gBAAgB,GAAG,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,UAAU,GAAG,IAAI,CAwB3I"}

package/dist/app/panels/panel-host/panel-badge.js

@@ -18,9 +18,7 @@ export function resolvePanelBadge(panel, component, context) {
         return component ? panel.badge(component) : null;
     }
     if (panel.id === 'controls') {
-        return context.inputCount > 0
-            ? { text: String(context.inputCount), variant: 'default' }
-            : null;
+        return context.inputCount > 0 ? { text: String(context.inputCount), variant: 'default' } : null;
     }
     if (panel.id === 'a11y') {
         // `=== null` rather than a falsy check: a score of 0 is a real, and the
@@ -30,7 +28,7 @@ export function resolvePanelBadge(panel, component, context) {
             return null;
         return {
             text: String(result.score),
-            variant: deriveA11ySummary(result, context.a11yThresholds).variant,
+            variant: deriveA11ySummary(result, context.a11yThresholds).variant
         };
     }
     return null;

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts

@@ -1,6 +1,6 @@
 import { EnvironmentInjector, type Type } from '@angular/core';
-import { PrismPanelService } from '../../services/prism-panel.service.js';
 import type { PanelDefinition } from '../../../plugin/plugin.types.js';
+import { PrismPanelService } from '../../services/prism-panel.service.js';
 import * as i0 from "@angular/core";
 type RenderedPanelEntry = {
     id: string;

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,mBAAmB,EAGnB,KAAK,IAAI,EAGV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAM1E,OAAO,KAAK,EAEV,eAAe,EAEhB,MAAM,iCAAiC,CAAC;;AAGzC,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACzB,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,qBAkLa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,SAAS,CAAC,QAAQ,CAAC,WAAW,sBAA+B;IAC7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,cAAc,CAM5B;IAEH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAGxB;IAEH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,eAAe;IAQ3C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,oDAQzB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAE9D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IACF,SAAS,CAAC,QAAQ,CAAC,mBAAmB,uDAEpC;;IAsCF,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,mBAAmB;yCAtIhB,uBAAuB;2CAAvB,uBAAuB;CA0JnC"}
+{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAwD,mBAAmB,EAAkB,KAAK,IAAI,EAAa,MAAM,eAAe,CAAC;AAChJ,OAAO,KAAK,EAAiB,eAAe,EAAmB,MAAM,iCAAiC,CAAC;AAGvG,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;;AAU1E,KAAK,kBAAkB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACzB,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,qBAQa,uBAAuB;IAChC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,SAAS,CAAC,QAAQ,CAAC,WAAW,sBAA+B;IAC7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,cAAc,CAO5B;IAEH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAIxB;IAEH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,eAAe;IAQ3C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,oDAMzB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAE9D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAsD;IACrF,SAAS,CAAC,QAAQ,CAAC,mBAAmB,uDAA8D;;IAwCpG,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;yCAnIlB,uBAAuB;2CAAvB,uBAAuB;CAuJnC"}

package/dist/app/panels/panel-host/prism-panel-host.component.js

@@ -1,14 +1,14 @@
 import { NgComponentOutlet } from '@angular/common';
-import { Component, computed, effect, EnvironmentInjector, inject, signal, ChangeDetectionStrategy, untracked, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, EnvironmentInjector, inject, signal, untracked } from '@angular/core';
 import { PrismIconComponent } from '../../icons/prism-icon.component.js';
-import { BUILTIN_PANELS } from '../builtin-panels.js';
-import { A11yAuditService } from '../a11y/a11y-audit.service.js';
 import { PrismNavigationService } from '../../services/prism-navigation.service.js';
 import { PrismPanelService } from '../../services/prism-panel.service.js';
 import { PrismPluginService } from '../../services/prism-plugin.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
-import { resolveA11yThresholds } from '../a11y/a11y-thresholds.js';
 import { PRISM_CONFIG, PRISM_MANIFEST } from '../../tokens/prism-tokens.js';
+import { A11yAuditService } from '../a11y/a11y-audit.service.js';
+import { resolveA11yThresholds } from '../a11y/a11y-thresholds.js';
+import { BUILTIN_PANELS } from '../builtin-panels.js';
 import { resolvePanelBadge } from './panel-badge.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.id;
@@ -86,7 +86,7 @@ export class PrismPanelHostComponent {
         const meta = this.manifest.meta?.['a11y'];
         return resolveA11yThresholds({
             ...meta?.thresholds,
-            ...this.config.a11y?.thresholds,
+            ...this.config.a11y?.thresholds
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "a11yThresholds" }] : /* istanbul ignore next */ []));
@@ -99,23 +99,20 @@ export class PrismPanelHostComponent {
         return resolvePanelBadge(panel, this.nav.activeComponent(), {
             inputCount: this.inputCount(),
             a11yResult: this.auditService.scoreResult(),
-            a11yThresholds: this.a11yThresholds(),
+            a11yThresholds: this.a11yThresholds()
         });
     }
     builtInPanels = BUILTIN_PANELS;
     allPanels = computed(() => {
         const comp = this.nav.activeComponent();
-        const panels = [
-            ...this.builtInPanels.filter((p) => p.placement !== 'view'),
-            ...this.pluginService.addonPanels(),
-        ];
+        const panels = [...this.builtInPanels.filter((p) => p.placement !== 'view'), ...this.pluginService.addonPanels()];
         if (!comp)
             return panels;
         return panels.filter((p) => !p.isVisible || p.isVisible(comp));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allPanels" }] : /* istanbul ignore next */ []));
     panelInputs = computed(() => ({
-        activeComponent: this.nav.activeComponent(),
+        activeComponent: this.nav.activeComponent()
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelInputs" }] : /* istanbul ignore next */ []));
     lazyCache = new Map();
@@ -179,7 +176,7 @@ export class PrismPanelHostComponent {
             id: panel.id,
             component,
             injector: this.panelService.getInjector(panel.id),
-            keepAlive: panel.keepAlive === true,
+            keepAlive: panel.keepAlive === true
         });
         this.renderedPanels.set(next);
     }
@@ -216,62 +213,10 @@ export class PrismPanelHostComponent {
             i0.ɵɵproperty("id", "panel-" + ctx.panelService.activePanelId());
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.renderedPanelsArray());
-        } }, dependencies: [NgComponentOutlet, PrismIconComponent], styles: [".panel[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-bg-elevated);\n      border-top: 1px solid var(--%NS%prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n      height: 100%;\n    }\n\n    .panel-tabs[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      padding: 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      background: var(--%NS%prism-bg);\n      overflow-x: auto;\n      scrollbar-width: none;\n      flex-shrink: 0;\n    }\n    .panel-tabs[_ngcontent-%COMP%]::-webkit-scrollbar { display: none; }\n\n    .p-tab[_ngcontent-%COMP%] {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 7px;\n      padding: 0 12px;\n      font-size: var(--%NS%fs-md);\n      font-weight: 500;\n      color: var(--%NS%prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--%NS%dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--%NS%font-sans);\n    }\n    .p-tab[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n    .p-tab--active[_ngcontent-%COMP%] { color: var(--%NS%prism-text); }\n    .p-tab--%NS%active[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n      border-radius: 1px;\n    }\n\n    .p-tab-badge[_ngcontent-%COMP%] {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n      color: var(--%NS%prism-primary);\n      font-family: var(--%NS%font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n    }\n    .p-tab-badge.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-warn) 18%, transparent);\n      color: var(--%NS%prism-warn);\n    }\n    .p-tab-badge.danger[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-danger) 18%, transparent);\n      color: var(--%NS%prism-danger);\n    }\n\n    .panel-tabs-right[_ngcontent-%COMP%] {\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding-left: 10px;\n    }\n\n    .icon-btn[_ngcontent-%COMP%] {\n      width: 28px;\n      height: 28px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--%NS%radius-sm);\n      color: var(--%NS%prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--%NS%dur-fast);\n    }\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--%NS%prism-input-bg);\n      color: var(--%NS%prism-text);\n    }\n\n    .panel-body[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      background: var(--%NS%prism-bg-elevated);\n    }\n    .panel-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; height: 8px; }\n    .panel-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--%NS%prism-border-strong); border-radius: 4px; }\n\n    .panel-pane[_ngcontent-%COMP%] { height: 100%; }\n    .panel-pane[hidden][_ngcontent-%COMP%] { display: none; }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 2px;\n    }"] });
+        } }, dependencies: [NgComponentOutlet, PrismIconComponent], styles: [".panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-elevated);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.panel-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    flex-shrink: 0;\n    gap: 2px;\n    align-items: center;\n    height: 40px;\n    padding: 0 16px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.panel-tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n    display: none;\n}\n\n.p-tab[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    gap: 7px;\n    align-items: center;\n    height: 100%;\n    padding: 0 12px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-md);\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: color var(--%NS%dur-fast);\n}\n\n.p-tab[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.p-tab--active[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.p-tab--%NS%active[_ngcontent-%COMP%]::after {\n    position: absolute;\n    right: 8px;\n    bottom: -1px;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n    border-radius: 1px;\n}\n\n.p-tab-badge[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--%NS%prism-primary);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n    border-radius: 8px;\n}\n\n.p-tab-badge.warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: color-mix(in srgb, var(--%NS%prism-warn) 18%, transparent);\n}\n\n.p-tab-badge.danger[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-danger);\n    background: color-mix(in srgb, var(--%NS%prism-danger) 18%, transparent);\n}\n\n.panel-tabs-right[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    padding-left: 10px;\n    margin-left: auto;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n    display: grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--%NS%radius-sm);\n    transition: all var(--%NS%dur-fast);\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-input-bg);\n}\n\n.panel-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    background: var(--%NS%prism-bg-elevated);\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--%NS%prism-border-strong);\n    border-radius: 4px;\n}\n\n.panel-pane[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n.panel-pane[hidden][_ngcontent-%COMP%] {\n    display: none;\n}\n\n[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 2px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPanelHostComponent, [{
         type: Component,
-        args: [{ selector: 'prism-panel-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, PrismIconComponent], template: `
-    <div class="panel">
-      <nav class="panel-tabs" role="tablist">
-        @for (panel of allPanels(); track panel.id) {
-        <button
-          class="p-tab"
-          [class.p-tab--active]="panelService.activePanelId() === panel.id"
-          (click)="panelService.activePanelId.set(panel.id)"
-          role="tab"
-          [attr.aria-selected]="panelService.activePanelId() === panel.id"
-          [attr.aria-controls]="
-            panelService.activePanelId() === panel.id
-              ? 'panel-' + panel.id
-              : null
-          "
-        >
-          @if (panel.icon) {
-          <prism-icon [name]="panel.icon" [size]="13" />
-          }
-          {{ panel.label }}
-          @if (panelBadge(panel); as badge) { @if (badge.variant !== 'ok') {
-          <span
-            class="p-tab-badge"
-            [class.warn]="badge.variant === 'warn'"
-            [class.danger]="badge.variant === 'danger'"
-            >{{ badge.text }}</span
-          >
-          } }
-        </button>
-        }
-      </nav>
-      <div
-        class="panel-body"
-        [id]="'panel-' + panelService.activePanelId()"
-        role="tabpanel"
-      >
-        @for (entry of renderedPanelsArray(); track entry.id) {
-        <div
-          class="panel-pane"
-          [hidden]="entry.id !== panelService.activePanelId()"
-        >
-          <ng-container
-            *ngComponentOutlet="
-              entry.component;
-              inputs: panelInputs();
-              injector: entry.injector ?? envInjector
-            "
-          />
-        </div>
-        }
-      </div>
-    </div>
-  `, styles: ["\n    .panel {\n      background: var(--prism-bg-elevated);\n      border-top: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n      height: 100%;\n    }\n\n    .panel-tabs {\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      padding: 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      overflow-x: auto;\n      scrollbar-width: none;\n      flex-shrink: 0;\n    }\n    .panel-tabs::-webkit-scrollbar { display: none; }\n\n    .p-tab {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 7px;\n      padding: 0 12px;\n      font-size: var(--fs-md);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .p-tab:hover { color: var(--prism-text-2); }\n    .p-tab--active { color: var(--prism-text); }\n    .p-tab--active::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      border-radius: 1px;\n    }\n\n    .p-tab-badge {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n      color: var(--prism-primary);\n      font-family: var(--font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n    }\n    .p-tab-badge.warn {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n    .p-tab-badge.danger {\n      background: color-mix(in srgb, var(--prism-danger) 18%, transparent);\n      color: var(--prism-danger);\n    }\n\n    .panel-tabs-right {\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding-left: 10px;\n    }\n\n    .icon-btn {\n      width: 28px;\n      height: 28px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm);\n      color: var(--prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n    }\n    .icon-btn:hover {\n      background: var(--prism-input-bg);\n      color: var(--prism-text);\n    }\n\n    .panel-body {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      background: var(--prism-bg-elevated);\n    }\n    .panel-body::-webkit-scrollbar { width: 8px; height: 8px; }\n    .panel-body::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n\n    .panel-pane { height: 100%; }\n    .panel-pane[hidden] { display: none; }\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
+        args: [{ selector: 'prism-panel-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, PrismIconComponent], template: "<div class=\"panel\">\n    <nav\n        class=\"panel-tabs\"\n        role=\"tablist\">\n        @for (panel of allPanels(); track panel.id) {\n            <button\n                class=\"p-tab\"\n                [class.p-tab--active]=\"panelService.activePanelId() === panel.id\"\n                (click)=\"panelService.activePanelId.set(panel.id)\"\n                role=\"tab\"\n                [attr.aria-selected]=\"panelService.activePanelId() === panel.id\"\n                [attr.aria-controls]=\"panelService.activePanelId() === panel.id ? 'panel-' + panel.id : null\">\n                @if (panel.icon) {\n                    <prism-icon\n                        [name]=\"panel.icon\"\n                        [size]=\"13\" />\n                }\n                {{ panel.label }}\n                @if (panelBadge(panel); as badge) {\n                    @if (badge.variant !== 'ok') {\n                        <span\n                            class=\"p-tab-badge\"\n                            [class.warn]=\"badge.variant === 'warn'\"\n                            [class.danger]=\"badge.variant === 'danger'\"\n                            >{{ badge.text }}</span\n                        >\n                    }\n                }\n            </button>\n        }\n    </nav>\n    <div\n        class=\"panel-body\"\n        [id]=\"'panel-' + panelService.activePanelId()\"\n        role=\"tabpanel\">\n        @for (entry of renderedPanelsArray(); track entry.id) {\n            <div\n                class=\"panel-pane\"\n                [hidden]=\"entry.id !== panelService.activePanelId()\">\n                <ng-container *ngComponentOutlet=\"entry.component; inputs: panelInputs(); injector: entry.injector ?? envInjector\" />\n            </div>\n        }\n    </div>\n</div>\n", styles: [".panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg-elevated);\n    border-top: 1px solid var(--prism-border);\n}\n\n.panel-tabs {\n    display: flex;\n    flex-shrink: 0;\n    gap: 2px;\n    align-items: center;\n    height: 40px;\n    padding: 0 16px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.panel-tabs::-webkit-scrollbar {\n    display: none;\n}\n\n.p-tab {\n    position: relative;\n    display: flex;\n    gap: 7px;\n    align-items: center;\n    height: 100%;\n    padding: 0 12px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition: color var(--dur-fast);\n}\n\n.p-tab:hover {\n    color: var(--prism-text-2);\n}\n\n.p-tab--active {\n    color: var(--prism-text);\n}\n\n.p-tab--active::after {\n    position: absolute;\n    right: 8px;\n    bottom: -1px;\n    left: 8px;\n    height: 2px;\n    content: '';\n    background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n    border-radius: 1px;\n}\n\n.p-tab-badge {\n    display: grid;\n    place-items: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n    border-radius: 8px;\n}\n\n.p-tab-badge.warn {\n    color: var(--prism-warn);\n    background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n}\n\n.p-tab-badge.danger {\n    color: var(--prism-danger);\n    background: color-mix(in srgb, var(--prism-danger) 18%, transparent);\n}\n\n.panel-tabs-right {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    padding-left: 10px;\n    margin-left: auto;\n}\n\n.icon-btn {\n    display: grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n    border-radius: var(--radius-sm);\n    transition: all var(--dur-fast);\n}\n\n.icon-btn:hover {\n    color: var(--prism-text);\n    background: var(--prism-input-bg);\n}\n\n.panel-body {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    background: var(--prism-bg-elevated);\n}\n\n.panel-body::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.panel-body::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 4px;\n}\n\n.panel-pane {\n    height: 100%;\n}\n\n.panel-pane[hidden] {\n    display: none;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 215 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 31 }); })();

package/dist/app/provide-prism.d.ts

@@ -1,6 +1,6 @@
 import { type EnvironmentProviders } from '@angular/core';
-import type { NgPrismConfig, RuntimeManifest } from '../plugin/plugin.types.js';
 import type { ComponentPageOptions } from '../plugin/page-helpers.js';
+import type { NgPrismConfig, RuntimeManifest } from '../plugin/plugin.types.js';
 export interface ProvidePrismOptions {
     componentPages?: ComponentPageOptions[];
 }

package/dist/app/provide-prism.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provide-prism.d.ts","sourceRoot":"","sources":["../../src/app/provide-prism.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAUtE,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACzC;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,eAAe,EACzB,MAAM,CAAC,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,oBAAoB,CAiCtB"}
+{"version":3,"file":"provide-prism.d.ts","sourceRoot":"","sources":["../../src/app/provide-prism.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAA4B,MAAM,eAAe,CAAC;AAEpF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAKhF,MAAM,WAAW,mBAAmB;IAChC,cAAc,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAC3C;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,mBAAmB,GAAG,oBAAoB,CA6BnI"}

package/dist/app/provide-prism.js

@@ -1,17 +1,14 @@
-import { makeEnvironmentProviders, } from '@angular/core';
+import { makeEnvironmentProviders } from '@angular/core';
 import { provideHighlightOptions } from 'ngx-highlightjs';
 import { componentPage } from '../plugin/page-helpers.js';
 import { buildDiscoveryManifest } from './discovery-manifest.js';
 import { BUILTIN_PANELS } from './panels/builtin-panels.js';
-import { PRISM_BUILTIN_PANELS, PRISM_CONFIG, PRISM_MANIFEST, } from './tokens/prism-tokens.js';
+import { PRISM_BUILTIN_PANELS, PRISM_CONFIG, PRISM_MANIFEST } from './tokens/prism-tokens.js';
 export function providePrism(manifest, config, options) {
     const mergedManifest = options?.componentPages?.length
         ? {
             ...manifest,
-            pages: [
-                ...(manifest.pages ?? []),
-                ...options.componentPages.map((o) => componentPage(o)),
-            ],
+            pages: [...(manifest.pages ?? []), ...options.componentPages.map((o) => componentPage(o))]
         }
         : manifest;
     // Exposes a thin discovery view of the manifest to external audit tooling:
@@ -19,8 +16,7 @@ export function providePrism(manifest, config, options) {
     // decide how to treat a variant. Still no Angular type references — see
     // buildDiscoveryManifest for what gets stripped and why.
     if (typeof globalThis !== 'undefined') {
-        globalThis['__PRISM_MANIFEST__'] =
-            buildDiscoveryManifest(mergedManifest);
+        globalThis['__PRISM_MANIFEST__'] = buildDiscoveryManifest(mergedManifest);
     }
     return makeEnvironmentProviders([
         { provide: PRISM_MANIFEST, useValue: mergedManifest },
@@ -31,8 +27,8 @@ export function providePrism(manifest, config, options) {
             coreLibraryLoader: () => import('highlight.js/lib/core'),
             languages: {
                 xml: () => import('highlight.js/lib/languages/xml'),
-                typescript: () => import('highlight.js/lib/languages/typescript'),
-            },
-        }),
+                typescript: () => import('highlight.js/lib/languages/typescript')
+            }
+        })
     ]);
 }

package/dist/app/renderer/known-inputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"known-inputs.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/known-inputs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,CAAC,MAAM,CAAC,CAMpE"}
+{"version":3,"file":"known-inputs.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/known-inputs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,CAAC,MAAM,CAAC,CAOpE"}

package/dist/app/renderer/overlay-resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-resolver.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/overlay-resolver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,6EAA6E;AAC7E,MAAM,MAAM,iBAAiB,GACzB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;CAAE,GAC3C;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CACpC,CAAC;AAIN;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,SAAS,eAAe,EAAE,EAClC,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE;IACP,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CAC3C,GACA,iBAAiB,CA6BnB"}
+{"version":3,"file":"overlay-resolver.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/overlay-resolver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,6EAA6E;AAC7E,MAAM,MAAM,iBAAiB,GACvB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;CAAE,GAC3C;IACI,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CACtC,CAAC;AAIR;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC1B,MAAM,EAAE,SAAS,eAAe,EAAE,EAClC,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE;IACL,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7C,GACF,iBAAiB,CA+BnB"}

package/dist/app/renderer/overlay-resolver.js

@@ -29,7 +29,7 @@ export function resolveOverlay(panels, activePanelId, options) {
                 // shorthand that reads its own object then throws inside a promise
                 // the renderer does not catch, and the overlay silently never
                 // appears.
-                load: () => loadOverlayComponent.call(panel),
+                load: () => loadOverlayComponent.call(panel)
             };
     }
     return NONE;

package/dist/app/renderer/prism-renderer.component.d.ts

@@ -1,8 +1,8 @@
 import { Injector, type Type } from '@angular/core';
-import { PrismNavigationService } from '../services/prism-navigation.service.js';
-import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismCaptureService } from '../services/prism-capture.service.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismRendererComponent {
@@ -11,6 +11,31 @@ export declare class PrismRendererComponent {
     protected readonly canvasService: PrismCanvasService;
     protected readonly capture: PrismCaptureService;
     protected readonly variantBg: PrismVariantBgService;
+    /**
+     * The width the canvas is actually constrained to, `null` for unconstrained.
+     *
+     * Every viewport binding reads this rather than the service directly, so
+     * capture mode cannot be constrained by any route. Previously only the grips
+     * and the dimension line sat behind the capture guard while the attributes
+     * that change `.demo-wrap`'s box did not — safe in practice, because capture
+     * never restores a persisted width and every setter is suppressed, but safe
+     * by reachability argument rather than by construction. A future caller of
+     * `setViewportWidth` during a capture run would have recorded every
+     * visual-regression baseline at the constrained width with no visible chrome
+     * to reveal it. One computed makes the guarantee structural.
+     */
+    protected readonly viewportWidth: import("@angular/core").Signal<number | null>;
+    protected readonly VIEWPORT_MIN = 100;
+    protected readonly VIEWPORT_MAX = 1600;
+    /**
+     * A drag on either grip, rested on a preset if it came close enough.
+     *
+     * The snapping lives here and not in `PrismResizerDirective` on purpose: the
+     * directive also drives the sidebar and the panel, where there is nothing to
+     * snap to, and a generic control that knows about viewport presets would be
+     * the wrong shape.
+     */
+    protected onViewportResize(width: number): void;
     private readonly eventLogService;
     private readonly manifestService;
     private readonly injector;

package/dist/app/renderer/prism-renderer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAQhF,qBAkIa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,OAAO,sBAA+B;IACzD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IAmFH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAvOJ,sBAAsB;2CAAtB,sBAAsB;CAqPlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AACA,OAAO,EASH,QAAQ,EAER,KAAK,IAAI,EAIZ,MAAM,eAAe,CAAC;AAUvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAG3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAMhF,qBASa,sBAAsB;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,OAAO,sBAA+B;IACzD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAE7D;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa,gDAAuF;IAEvH,SAAS,CAAC,QAAQ,CAAC,YAAY,OAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,YAAY,QAAgB;IAE/C;;;;;;;OAOG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/C,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAA0D;IACtF,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAO5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAI/B;;IA+EH,OAAO,CAAC,eAAe;IA8EvB,OAAO,CAAC,OAAO;yCAhPN,sBAAsB;2CAAtB,sBAAsB;CA+PlC"}