@ng-prism/core 21.12.0-beta.0 → 21.12.0-beta.1

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

@@ -1,5 +1,5 @@
 import { NgComponentOutlet } from '@angular/common';
-import { Component, computed, effect, EnvironmentInjector, inject, signal, ChangeDetectionStrategy, } from '@angular/core';
+import { Component, computed, effect, EnvironmentInjector, inject, signal, ChangeDetectionStrategy, 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';
@@ -10,13 +10,13 @@ import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.id;
 function PrismPanelHostComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-icon", 5);
+    i0.ɵɵelement(0, "prism-icon", 6);
 } if (rf & 2) {
     const panel_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("name", panel_r2.icon)("size", 13);
 } }
 function PrismPanelHostComponent_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -27,11 +27,11 @@ function PrismPanelHostComponent_For_3_Conditional_3_Template(rf, ctx) { if (rf
 } }
 function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵelementStart(0, "button", 5);
     i0.ɵɵlistener("click", function PrismPanelHostComponent_For_3_Template_button_click_0_listener() { const panel_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.panelService.activePanelId.set(panel_r2.id)); });
-    i0.ɵɵconditionalCreate(1, PrismPanelHostComponent_For_3_Conditional_1_Template, 1, 2, "prism-icon", 5);
+    i0.ɵɵconditionalCreate(1, PrismPanelHostComponent_For_3_Conditional_1_Template, 1, 2, "prism-icon", 6);
     i0.ɵɵtext(2);
-    i0.ɵɵconditionalCreate(3, PrismPanelHostComponent_For_3_Conditional_3_Template, 2, 7, "span", 6);
+    i0.ɵɵconditionalCreate(3, PrismPanelHostComponent_For_3_Conditional_3_Template, 2, 7, "span", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_15_0;
@@ -46,14 +46,19 @@ function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional((tmp_15_0 = ctx_r2.panelBadge(panel_r2.id)) ? 3 : -1, tmp_15_0);
 } }
-function PrismPanelHostComponent_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PrismPanelHostComponent_For_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PrismPanelHostComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PrismPanelHostComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 8);
+function PrismPanelHostComponent_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵtemplate(1, PrismPanelHostComponent_For_6_ng_container_1_Template, 1, 0, "ng-container", 9);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
+    const entry_r5 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngComponentOutlet", ctx_r2.resolvedComponent())("ngComponentOutletInputs", ctx_r2.panelInputs())("ngComponentOutletInjector", ctx_r2.activeInjector());
+    i0.ɵɵproperty("hidden", entry_r5.id !== ctx_r2.panelService.activePanelId());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngComponentOutlet", entry_r5.component)("ngComponentOutletInputs", ctx_r2.panelInputs())("ngComponentOutletInjector", entry_r5.injector ?? ctx_r2.envInjector);
 } }
 export class PrismPanelHostComponent {
     pluginService = inject(PrismPluginService);
@@ -110,12 +115,12 @@ export class PrismPanelHostComponent {
             return panels;
         return panels.filter((p) => !p.isVisible || p.isVisible(comp));
     }, ...(ngDevMode ? [{ debugName: "allPanels" }] : []));
-    resolvedComponent = signal(null, ...(ngDevMode ? [{ debugName: "resolvedComponent" }] : []));
     panelInputs = computed(() => ({
         activeComponent: this.nav.activeComponent(),
     }), ...(ngDevMode ? [{ debugName: "panelInputs" }] : []));
     lazyCache = new Map();
-    activeInjector = computed(() => this.panelService.activePanelInjector() ?? this.envInjector, ...(ngDevMode ? [{ debugName: "activeInjector" }] : []));
+    renderedPanels = signal(new Map(), ...(ngDevMode ? [{ debugName: "renderedPanels" }] : []));
+    renderedPanelsArray = computed(() => Array.from(this.renderedPanels().values()), ...(ngDevMode ? [{ debugName: "renderedPanelsArray" }] : []));
     constructor() {
         effect(() => {
             const element = this.rendererService.renderedElement();
@@ -134,36 +139,73 @@ export class PrismPanelHostComponent {
             this.auditService.scheduleAudit(element, a11yConfig);
         });
         effect(() => {
-            const panel = this.allPanels().find((p) => p.id === this.panelService.activePanelId()) ?? null;
-            if (!panel) {
-                this.resolvedComponent.set(null);
-                return;
-            }
-            if (panel.component) {
-                this.resolvedComponent.set(panel.component);
+            const activeId = this.panelService.activePanelId();
+            const panels = this.allPanels();
+            untracked(() => {
+                const panel = panels.find((p) => p.id === activeId) ?? null;
+                if (panel) {
+                    this.ensurePanelLoaded(panel);
+                }
+                this.pruneRenderedPanels(panels, panel ? activeId : null);
+            });
+        });
+    }
+    ensurePanelLoaded(panel) {
+        if (this.renderedPanels().has(panel.id))
+            return;
+        if (panel.component) {
+            this.addRenderedPanel(panel, panel.component);
+            return;
+        }
+        if (panel.loadComponent) {
+            const cached = this.lazyCache.get(panel.id);
+            if (cached) {
+                this.addRenderedPanel(panel, cached);
                 return;
             }
-            if (panel.loadComponent) {
-                const cached = this.lazyCache.get(panel.id);
-                if (cached) {
-                    this.resolvedComponent.set(cached);
+            panel.loadComponent().then((comp) => {
+                this.lazyCache.set(panel.id, comp);
+                if (this.renderedPanels().has(panel.id))
                     return;
-                }
-                this.resolvedComponent.set(null);
-                panel.loadComponent().then((comp) => {
-                    this.lazyCache.set(panel.id, comp);
-                    this.resolvedComponent.set(comp);
-                });
-            }
+                this.addRenderedPanel(panel, comp);
+            });
+        }
+    }
+    addRenderedPanel(panel, component) {
+        const next = new Map(this.renderedPanels());
+        next.set(panel.id, {
+            id: panel.id,
+            component,
+            injector: this.panelService.getInjector(panel.id),
+            keepAlive: panel.keepAlive === true,
         });
+        this.renderedPanels.set(next);
+    }
+    pruneRenderedPanels(visiblePanels, activeId) {
+        const current = this.renderedPanels();
+        if (current.size === 0)
+            return;
+        const visibleIds = new Set(visiblePanels.map((p) => p.id));
+        const next = new Map(current);
+        let changed = false;
+        for (const [id, entry] of current) {
+            const isVisible = visibleIds.has(id);
+            const isActive = id === activeId;
+            if (!isVisible || (!isActive && !entry.keepAlive)) {
+                next.delete(id);
+                changed = true;
+            }
+        }
+        if (changed)
+            this.renderedPanels.set(next);
     }
     static ɵfac = function PrismPanelHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPanelHostComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPanelHostComponent, selectors: [["prism-panel-host"]], decls: 6, vars: 2, consts: [[1, "panel"], ["role", "tablist", 1, "panel-tabs"], ["role", "tab", 1, "p-tab", 3, "p-tab--active"], ["role", "tabpanel", 1, "panel-body", 3, "id"], ["role", "tab", 1, "p-tab", 3, "click"], [3, "name", "size"], [1, "p-tab-badge", 3, "ok", "warn", "danger"], [1, "p-tab-badge"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismPanelHostComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPanelHostComponent, selectors: [["prism-panel-host"]], decls: 7, vars: 1, consts: [[1, "panel"], ["role", "tablist", 1, "panel-tabs"], ["role", "tab", 1, "p-tab", 3, "p-tab--active"], ["role", "tabpanel", 1, "panel-body", 3, "id"], [1, "panel-pane", 3, "hidden"], ["role", "tab", 1, "p-tab", 3, "click"], [3, "name", "size"], [1, "p-tab-badge", 3, "ok", "warn", "danger"], [1, "p-tab-badge"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismPanelHostComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "nav", 1);
             i0.ɵɵrepeaterCreate(2, PrismPanelHostComponent_For_3_Template, 4, 7, "button", 2, _forTrack0);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(4, "div", 3);
-            i0.ɵɵconditionalCreate(5, PrismPanelHostComponent_Conditional_5_Template, 1, 3, "ng-container");
+            i0.ɵɵrepeaterCreate(5, PrismPanelHostComponent_For_6_Template, 2, 4, "div", 4, _forTrack0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -171,8 +213,8 @@ export class PrismPanelHostComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("id", "panel-" + ctx.panelService.activePanelId());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.resolvedComponent() ? 5 : -1);
-        } }, dependencies: [NgComponentOutlet, PrismIconComponent], styles: [".panel[_ngcontent-%COMP%] {\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[_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(--prism-border);\n      background: var(--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(--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[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .p-tab--active[_ngcontent-%COMP%] { color: var(--prism-text); }\n    .p-tab--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(--prism-primary-from), var(--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(--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.ok[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\n    }\n    .p-tab-badge.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n    .p-tab-badge.danger[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-danger) 18%, transparent);\n      color: var(--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(--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[_ngcontent-%COMP%]:hover {\n      background: var(--prism-input-bg);\n      color: var(--prism-text);\n    }\n\n    .panel-body[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      background: var(--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(--prism-border-strong); border-radius: 4px; }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }"], changeDetection: 0 });
+            i0.ɵɵrepeater(ctx.renderedPanelsArray());
+        } }, dependencies: [NgComponentOutlet, PrismIconComponent], styles: [".panel[_ngcontent-%COMP%] {\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[_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(--prism-border);\n      background: var(--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(--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[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .p-tab--active[_ngcontent-%COMP%] { color: var(--prism-text); }\n    .p-tab--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(--prism-primary-from), var(--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(--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.ok[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\n    }\n    .p-tab-badge.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n    .p-tab-badge.danger[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-danger) 18%, transparent);\n      color: var(--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(--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[_ngcontent-%COMP%]:hover {\n      background: var(--prism-input-bg);\n      color: var(--prism-text);\n    }\n\n    .panel-body[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      background: var(--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(--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(--prism-primary);\n      outline-offset: 2px;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPanelHostComponent, [{
         type: Component,
@@ -213,17 +255,22 @@ export class PrismPanelHostComponent {
         [id]="'panel-' + panelService.activePanelId()"
         role="tabpanel"
       >
-        @if (resolvedComponent()) {
-        <ng-container
-          *ngComponentOutlet="
-            resolvedComponent();
-            inputs: panelInputs();
-            injector: activeInjector()
-          "
-        />
+        @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.ok {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\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    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
+  `, 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.ok {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\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  "] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 196 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 213 }); })();

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,EAA4B,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEpF,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAStE,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,CAkBtB"}
+{"version":3,"file":"provide-prism.d.ts","sourceRoot":"","sources":["../../src/app/provide-prism.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEpF,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAStE,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,CA8BtB"}

package/dist/app/provide-prism.js

@@ -7,6 +7,17 @@ export function providePrism(manifest, config, options) {
     const mergedManifest = options?.componentPages?.length
         ? { ...manifest, pages: [...(manifest.pages ?? []), ...options.componentPages.map(o => componentPage(o))] }
         : manifest;
+    // Expose a thin discovery view of the manifest to audit tooling (e.g. ng-prism-audit-a11y).
+    // We intentionally only expose className + variant info — no Angular type references.
+    if (typeof globalThis !== 'undefined') {
+        globalThis['__PRISM_MANIFEST__'] = {
+            components: mergedManifest.components.map((c) => ({
+                className: c.meta.className,
+                variants: c.meta.showcaseConfig.variants?.map((v, i) => ({ name: v.name, index: i })) ?? [{ name: 'Default', index: 0 }],
+            })),
+            pages: (mergedManifest.pages ?? []).map((p) => ({ title: p.title })),
+        };
+    }
     return makeEnvironmentProviders([
         { provide: PRISM_MANIFEST, useValue: mergedManifest },
         { provide: PRISM_BUILTIN_PANELS, useValue: BUILTIN_PANELS },

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

@@ -25,6 +25,8 @@ export declare class PrismRendererComponent {
     private isRenderPage;
     private readonly overlayCache;
     readonly activeOverlay: import("@angular/core").WritableSignal<Type<unknown> | null>;
+    /** Identifier of the currently rendered component/variant (for audit tooling / e2e). */
+    protected readonly renderedKey: import("@angular/core").Signal<string | null>;
     protected readonly overlayInputs: {
         rendererService: PrismRendererService;
     };

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,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAIhF,qBAyIa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;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,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,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAxNJ,sBAAsB;2CAAtB,sBAAsB;CAsOlC"}
+{"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,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAIhF,qBA6Ia,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;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,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,gDAM3B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAhOJ,sBAAsB;2CAAtB,sBAAsB;CA8OlC"}

package/dist/app/renderer/prism-renderer.component.js

@@ -48,6 +48,16 @@ export class PrismRendererComponent {
     isRenderPage = false;
     overlayCache = new Map();
     activeOverlay = signal(null, ...(ngDevMode ? [{ debugName: "activeOverlay" }] : []));
+    /** Identifier of the currently rendered component/variant (for audit tooling / e2e). */
+    renderedKey = computed(() => {
+        const el = this.rendererService.renderedElement();
+        if (!el)
+            return null;
+        const comp = this.navigationService.activeComponent();
+        if (!comp)
+            return null;
+        return `${comp.meta.className}:${this.rendererService.activeVariantIndex()}`;
+    }, ...(ngDevMode ? [{ debugName: "renderedKey" }] : []));
     overlayInputs = { rendererService: this.rendererService };
     overlayInjector = computed(() => {
         const panelInjector = this.panelService.activePanelInjector();
@@ -207,7 +217,7 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 11, vars: 8, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 11, vars: 9, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "span", 3);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd()();
@@ -224,6 +234,7 @@ export class PrismRendererComponent {
             i0.ɵɵclassProp("visible", ctx.canvasService.guides());
             i0.ɵɵadvance(3);
             i0.ɵɵstyleProp("--zoom", ctx.canvasService.zoom());
+            i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.activeOverlay() ? 10 : -1);
         } }, dependencies: [PrismCanvasRulersComponent,
@@ -254,7 +265,11 @@ export class PrismRendererComponent {
       <prism-canvas-rulers />
       <prism-canvas-bg-pill />
 
-      <div class="demo-wrap" [style.--zoom]="canvasService.zoom()">
+      <div
+        class="demo-wrap"
+        [style.--zoom]="canvasService.zoom()"
+        [attr.data-prism-rendered]="renderedKey()"
+      >
         <ng-container #outlet />
         @if (activeOverlay()) {
         <ng-container
@@ -271,7 +286,7 @@ export class PrismRendererComponent {
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef,
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 174 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 178 }); })();
 function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];

package/dist/app/services/prism-panel.service.d.ts

@@ -8,6 +8,11 @@ export declare class PrismPanelService {
     readonly activePanelId: import("@angular/core").WritableSignal<string>;
     readonly activeViewId: import("@angular/core").WritableSignal<string>;
     readonly activePanelInjector: import("@angular/core").Signal<EnvironmentInjector | null>;
+    /**
+     * Returns (and lazily creates) the EnvironmentInjector scoped to the given panel.
+     * Returns `null` when the panel has no providers.
+     */
+    getInjector(panelId: string): EnvironmentInjector | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismPanelService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PrismPanelService>;
 }

package/dist/app/services/prism-panel.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-panel.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-panel.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,mBAAmB,EAIpB,MAAM,eAAe,CAAC;;AAIvB,qBACa,iBAAiB;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,QAAQ,CAAC,aAAa,iDAA8B;IACpD,QAAQ,CAAC,YAAY,iDAA8B;IAEnD,QAAQ,CAAC,mBAAmB,6DAgBzB;yCAzBQ,iBAAiB;6CAAjB,iBAAiB;CA0B7B"}
+{"version":3,"file":"prism-panel.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-panel.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,mBAAmB,EAIpB,MAAM,eAAe,CAAC;;AAIvB,qBACa,iBAAiB;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,QAAQ,CAAC,aAAa,iDAA8B;IACpD,QAAQ,CAAC,YAAY,iDAA8B;IAEnD,QAAQ,CAAC,mBAAmB,6DAE1B;IAEF;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI;yCAjB7C,iBAAiB;6CAAjB,iBAAiB;CAiC7B"}

package/dist/app/services/prism-panel.service.js

@@ -9,8 +9,12 @@ export class PrismPanelService {
     injectorCache = new Map();
     activePanelId = signal('controls', ...(ngDevMode ? [{ debugName: "activePanelId" }] : []));
     activeViewId = signal('renderer', ...(ngDevMode ? [{ debugName: "activeViewId" }] : []));
-    activePanelInjector = computed(() => {
-        const panelId = this.activePanelId();
+    activePanelInjector = computed(() => this.getInjector(this.activePanelId()), ...(ngDevMode ? [{ debugName: "activePanelInjector" }] : []));
+    /**
+     * Returns (and lazily creates) the EnvironmentInjector scoped to the given panel.
+     * Returns `null` when the panel has no providers.
+     */
+    getInjector(panelId) {
         const allPanels = [...this.builtinPanels, ...this.pluginService.panels()];
         const panel = allPanels.find((p) => p.id === panelId);
         if (!panel?.providers?.length)
@@ -21,7 +25,7 @@ export class PrismPanelService {
             this.injectorCache.set(panel.id, injector);
         }
         return injector;
-    }, ...(ngDevMode ? [{ debugName: "activePanelInjector" }] : []));
+    }
     static ɵfac = function PrismPanelService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPanelService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismPanelService, factory: PrismPanelService.ɵfac, providedIn: 'root' });
 }

package/dist/app/services/prism-plugin.service.d.ts

@@ -1,4 +1,4 @@
-import type { ControlDefinition, PanelDefinition } from '../../plugin/plugin.types.js';
+import type { ControlDefinition, HeaderWidgetDefinition, PanelDefinition } from '../../plugin/plugin.types.js';
 import * as i0 from "@angular/core";
 export declare class PrismPluginService {
     private readonly config;
@@ -6,6 +6,9 @@ export declare class PrismPluginService {
     readonly addonPanels: import("@angular/core").Signal<PanelDefinition[]>;
     readonly viewPanels: import("@angular/core").Signal<PanelDefinition[]>;
     readonly controls: import("@angular/core").Signal<ControlDefinition[]>;
+    readonly headerWidgets: import("@angular/core").Signal<HeaderWidgetDefinition[]>;
+    readonly headerWidgetsStart: import("@angular/core").Signal<HeaderWidgetDefinition[]>;
+    readonly headerWidgetsEnd: import("@angular/core").Signal<HeaderWidgetDefinition[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismPluginService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PrismPluginService>;
 }

package/dist/app/services/prism-plugin.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-plugin.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-plugin.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAGvF,qBACa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAwB;IAE/C,QAAQ,CAAC,MAAM,oDAQZ;IAEH,QAAQ,CAAC,WAAW,oDAElB;IAEF,QAAQ,CAAC,UAAU,oDAEjB;IAEF,QAAQ,CAAC,QAAQ,sDAQd;yCA7BQ,kBAAkB;6CAAlB,kBAAkB;CA8B9B"}
+{"version":3,"file":"prism-plugin.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-plugin.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACtB,eAAe,EAChB,MAAM,8BAA8B,CAAC;;AAGtC,qBACa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAwB;IAE/C,QAAQ,CAAC,MAAM,oDAQZ;IAEH,QAAQ,CAAC,WAAW,oDAElB;IAEF,QAAQ,CAAC,UAAU,oDAEjB;IAEF,QAAQ,CAAC,QAAQ,sDAQd;IAEH,QAAQ,CAAC,aAAa,2DAQnB;IAEH,QAAQ,CAAC,kBAAkB,2DAEzB;IAEF,QAAQ,CAAC,gBAAgB,2DAEvB;yCA/CS,kBAAkB;6CAAlB,kBAAkB;CAgD9B"}

package/dist/app/services/prism-plugin.service.js

@@ -23,6 +23,17 @@ export class PrismPluginService {
         }
         return result;
     }, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+    headerWidgets = computed(() => {
+        const result = [];
+        for (const plugin of this.config.plugins ?? []) {
+            if (plugin.headerWidgets) {
+                result.push(...plugin.headerWidgets);
+            }
+        }
+        return result.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    }, ...(ngDevMode ? [{ debugName: "headerWidgets" }] : []));
+    headerWidgetsStart = computed(() => this.headerWidgets().filter((w) => w.placement === 'start'), ...(ngDevMode ? [{ debugName: "headerWidgetsStart" }] : []));
+    headerWidgetsEnd = computed(() => this.headerWidgets().filter((w) => (w.placement ?? 'end') === 'end'), ...(ngDevMode ? [{ debugName: "headerWidgetsEnd" }] : []));
     static ɵfac = function PrismPluginService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPluginService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismPluginService, factory: PrismPluginService.ɵfac, providedIn: 'root' });
 }

package/dist/builder/a11y/a11y-report-reader.d.ts

@@ -0,0 +1,12 @@
+import type { A11yManifestMeta, A11yReport, A11yThresholds } from '../../app/panels/a11y/a11y.types.js';
+export declare const DEFAULT_A11Y_REPORT_PATH = "a11y-report.json";
+export declare function loadA11yReport(reportPath: string): A11yReport | null;
+export declare function readA11yMeta(reportPath: string, thresholdsInput?: Partial<A11yThresholds>): A11yManifestMeta | null;
+export interface ThresholdViolation {
+    metric: 'score' | 'critical' | 'serious' | 'moderate';
+    actual: number;
+    threshold: number;
+}
+export declare function checkA11yThresholds(meta: A11yManifestMeta): ThresholdViolation[];
+export declare function clearA11yReportCache(): void;
+//# sourceMappingURL=a11y-report-reader.d.ts.map

package/dist/builder/a11y/a11y-report-reader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-report-reader.d.ts","sourceRoot":"","sources":["../../../src/builder/a11y/a11y-report-reader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACf,MAAM,qCAAqC,CAAC;AAG7C,eAAO,MAAM,wBAAwB,qBAAqB,CAAC;AAI3D,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAapE;AAED,wBAAgB,YAAY,CAC1B,UAAU,EAAE,MAAM,EAClB,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GACxC,gBAAgB,GAAG,IAAI,CAQzB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,gBAAgB,GACrB,kBAAkB,EAAE,CAkBtB;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/builder/a11y/a11y-report-reader.js

@@ -0,0 +1,49 @@
+import { readFileSync, statSync } from 'node:fs';
+import { resolveA11yThresholds } from '../../app/panels/a11y/a11y-thresholds.js';
+export const DEFAULT_A11Y_REPORT_PATH = 'a11y-report.json';
+const cache = new Map();
+export function loadA11yReport(reportPath) {
+    try {
+        const mtime = statSync(reportPath).mtimeMs;
+        const cached = cache.get(reportPath);
+        if (cached && cached.mtime === mtime)
+            return cached.data;
+        const raw = readFileSync(reportPath, 'utf-8');
+        const parsed = JSON.parse(raw);
+        cache.set(reportPath, { mtime, data: parsed });
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+export function readA11yMeta(reportPath, thresholdsInput) {
+    const report = loadA11yReport(reportPath);
+    if (!report?.total)
+        return null;
+    return {
+        total: report.total,
+        thresholds: resolveA11yThresholds(thresholdsInput),
+    };
+}
+export function checkA11yThresholds(meta) {
+    const violations = [];
+    const t = meta.thresholds;
+    const total = meta.total;
+    if (total.score < t.score) {
+        violations.push({ metric: 'score', actual: total.score, threshold: t.score });
+    }
+    if (total.critical > t.critical) {
+        violations.push({ metric: 'critical', actual: total.critical, threshold: t.critical });
+    }
+    if (total.serious > t.serious) {
+        violations.push({ metric: 'serious', actual: total.serious, threshold: t.serious });
+    }
+    if (total.moderate > t.moderate) {
+        violations.push({ metric: 'moderate', actual: total.moderate, threshold: t.moderate });
+    }
+    return violations;
+}
+export function clearA11yReportCache() {
+    cache.clear();
+}

package/dist/builder/manifest/runtime-manifest.generator.d.ts

@@ -4,6 +4,7 @@ export interface RuntimeManifestOptions {
     components: ScannedComponent[];
     libraryImportPath: string;
     pages?: StyleguidePage[];
+    meta?: Record<string, unknown>;
 }
 export declare function generateRuntimeManifest(options: RuntimeManifestOptions): string;
 //# sourceMappingURL=runtime-manifest.generator.d.ts.map

package/dist/builder/manifest/runtime-manifest.generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime-manifest.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/runtime-manifest.generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAIjE,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AAyHD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,sBAAsB,GAAG,MAAM,CAsE/E"}
+{"version":3,"file":"runtime-manifest.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/runtime-manifest.generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAIjE,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAyHD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,sBAAsB,GAAG,MAAM,CA8E/E"}

package/dist/builder/manifest/runtime-manifest.generator.js

@@ -108,7 +108,7 @@ function groupComponentsByImportPath(components, fallbackImportPath) {
     return groups;
 }
 export function generateRuntimeManifest(options) {
-    const { components, libraryImportPath, pages } = options;
+    const { components, libraryImportPath, pages, meta } = options;
     const directives = components.filter((c) => c.componentMeta.isDirective);
     const hasDirectives = directives.length > 0;
     const lines = [
@@ -162,6 +162,13 @@ export function generateRuntimeManifest(options) {
     if (pages && pages.length > 0) {
         lines.push(`  pages: ${JSON.stringify(pages, null, 2).split('\n').map((l, i) => i === 0 ? l : '  ' + l).join('\n')},`);
     }
+    if (meta && Object.keys(meta).length > 0) {
+        const metaJson = JSON.stringify(meta, null, 2)
+            .split('\n')
+            .map((l, i) => (i === 0 ? l : '  ' + l))
+            .join('\n');
+        lines.push(`  meta: ${metaJson},`);
+    }
     lines.push('};');
     lines.push('');
     return lines.join('\n');

package/dist/builder/plugin-runner/plugin-runner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-runner.d.ts","sourceRoot":"","sources":["../../../src/builder/plugin-runner/plugin-runner.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAoB,MAAM,8BAA8B,CAAC;AAmBnG,wBAAsB,cAAc,CAClC,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,aAAa,EAAE,GACvB,OAAO,CAAC,aAAa,CAAC,CAuDxB"}
+{"version":3,"file":"plugin-runner.d.ts","sourceRoot":"","sources":["../../../src/builder/plugin-runner/plugin-runner.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAoB,MAAM,8BAA8B,CAAC;AAmBnG,wBAAsB,cAAc,CAClC,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,aAAa,EAAE,GACvB,OAAO,CAAC,aAAa,CAAC,CAyDxB"}

package/dist/builder/plugin-runner/plugin-runner.js

@@ -46,7 +46,9 @@ export async function runPluginHooks(manifest, plugins) {
         }
         pages[i] = current;
     }
-    let result = { components, pages };
+    let result = manifest.meta
+        ? { components, pages, meta: manifest.meta }
+        : { components, pages };
     for (const plugin of plugins) {
         if (plugin.onManifestReady) {
             try {

package/dist/builder/shared/prism-pipeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-pipeline.d.ts","sourceRoot":"","sources":["../../../src/builder/shared/prism-pipeline.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAOpE,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,oGAAoG;IACpG,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,IAAI,kBAAkB,CAExD;AAED,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,kBAAkB,GACxB,OAAO,CAAC,mBAAmB,CAAC,CAoD9B"}
+{"version":3,"file":"prism-pipeline.d.ts","sourceRoot":"","sources":["../../../src/builder/shared/prism-pipeline.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAYpE,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,oGAAoG;IACpG,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,IAAI,kBAAkB,CAExD;AAED,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,kBAAkB,GACxB,OAAO,CAAC,mBAAmB,CAAC,CA2E9B"}

package/dist/builder/shared/prism-pipeline.js

@@ -6,6 +6,7 @@ import { discoverSecondaryEntryPoints } from '../scanner/entry-point-discovery.j
 import { loadConfig } from '../config-loader/config-loader.js';
 import { runPluginHooks } from '../plugin-runner/plugin-runner.js';
 import { generateRuntimeManifest } from '../manifest/runtime-manifest.generator.js';
+import { DEFAULT_A11Y_REPORT_PATH, checkA11yThresholds, readA11yMeta, } from '../a11y/a11y-report-reader.js';
 export function createPipelineState() {
     return { scanner: undefined, lastEntrySetKey: undefined };
 }
@@ -20,12 +21,29 @@ export async function runPrismPipeline(options, context, state) {
     const scanResult = scanEntryPoints(workspaceRoot, options, state);
     const pages = config.pages ? [...config.pages] : [];
     context.reportStatus('Running plugin hooks...');
-    const manifest = await runPluginHooks({ ...scanResult, pages }, config.plugins ?? []);
+    let manifest = await runPluginHooks({ ...scanResult, pages }, config.plugins ?? []);
+    const a11yReportPath = config.a11y?.reportPath ?? DEFAULT_A11Y_REPORT_PATH;
+    const a11yMeta = readA11yMeta(join(workspaceRoot, a11yReportPath), config.a11y?.thresholds);
+    if (a11yMeta) {
+        const violations = checkA11yThresholds(a11yMeta);
+        if (violations.length > 0) {
+            const summary = violations
+                .map((v) => `${v.metric}: ${v.actual} (threshold ${v.threshold})`)
+                .join(', ');
+            throw new Error(`ng-prism: a11y thresholds violated — ${summary}. ` +
+                `Update components or relax thresholds via config.a11y.thresholds.`);
+        }
+        manifest = {
+            ...manifest,
+            meta: { ...manifest.meta, a11y: a11yMeta },
+        };
+    }
     context.reportStatus('Generating runtime manifest...');
     const source = generateRuntimeManifest({
         components: manifest.components,
         libraryImportPath: options.libraryImportPath,
         pages: manifest.pages,
+        meta: manifest.meta,
     });
     const projectMeta = await context.getProjectMetadata(options.prismProject);
     const sourceRoot = projectMeta['sourceRoot'] ??

package/dist/cli/audit-a11y/aggregator.d.ts

@@ -0,0 +1,10 @@
+import type { A11yReport, A11yScoreResult } from '../../app/panels/a11y/a11y.types.js';
+export interface RawAuditResult {
+    className: string;
+    variantName: string;
+    variantIndex: number;
+    /** Result from `calculateScore(axeResults)` in the running app. */
+    score: A11yScoreResult;
+}
+export declare function aggregateAuditResults(results: RawAuditResult[]): A11yReport;
+//# sourceMappingURL=aggregator.d.ts.map

package/dist/cli/audit-a11y/aggregator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aggregator.d.ts","sourceRoot":"","sources":["../../../src/cli/audit-a11y/aggregator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EAChB,MAAM,qCAAqC,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,cAAc,EAAE,GAAG,UAAU,CAkD3E"}