@ng-prism/core 22.2.0-beta.3 → 22.2.0-beta.5

package/dist/app/panels/a11y/a11y-violations.component.js

@@ -56,7 +56,7 @@ function A11yViolationsComponent_Conditional_1_For_13_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const item_r2 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--sev-color", ctx_r0.sevColor(item_r2.impact));
+    i0.ɵɵstyleProp("--%NS%sev-color", ctx_r0.sevColor(item_r2.impact));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r2.impact ?? "pass");
     i0.ɵɵadvance(3);
@@ -145,11 +145,11 @@ export class A11yViolationsComponent {
         return sevColor(impact);
     }
     static ɵfac = function A11yViolationsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yViolationsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yViolationsComponent, selectors: [["prism-a11y-violations"]], decls: 3, vars: 1, consts: [[1, "a11y-status", "a11y-status--error"], [1, "a11y-body", 3, "a11y-body--loading"], [1, "a11y-status"], [1, "a11y-body"], [1, "score-wrap"], [3, "score"], [1, "score-label"], [1, "score-meta"], [2, "background", "var(--prism-success)"], [1, "viol-list"], [1, "viol", 3, "--sev-color"], [2, "background", "var(--prism-danger)"], [2, "background", "var(--prism-warn)"], [1, "viol"], [1, "viol-sev"], [1, "viol-text"], [1, "viol-rule"]], template: function A11yViolationsComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yViolationsComponent, selectors: [["prism-a11y-violations"]], decls: 3, vars: 1, consts: [[1, "a11y-status", "a11y-status--error"], [1, "a11y-body", 3, "a11y-body--loading"], [1, "a11y-status"], [1, "a11y-body"], [1, "score-wrap"], [3, "score"], [1, "score-label"], [1, "score-meta"], [2, "background", "var(--prism-success)"], [1, "viol-list"], [1, "viol", 3, "--%NS%sev-color"], [2, "background", "var(--prism-danger)"], [2, "background", "var(--prism-warn)"], [1, "viol"], [1, "viol-sev"], [1, "viol-text"], [1, "viol-rule"]], template: function A11yViolationsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, A11yViolationsComponent_Conditional_0_Template, 2, 1, "div", 0)(1, A11yViolationsComponent_Conditional_1_Template, 15, 7, "div", 1)(2, A11yViolationsComponent_Conditional_2_Template, 2, 0, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.auditService.error() ? 0 : ctx.auditService.results() || ctx.auditService.running() ? 1 : 2);
-        } }, dependencies: [A11yScoreComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; overflow: auto; }\n\n    .a11y-body[_ngcontent-%COMP%] {\n      padding: 18px 20px;\n      display: grid;\n      grid-template-columns: 220px 1fr;\n      gap: 20px;\n      min-height: 0;\n    }\n    .a11y-body--loading[_ngcontent-%COMP%] { opacity: 0.55; transition: opacity var(--dur-base); }\n\n    .score-wrap[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 10px;\n      padding: 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 10px;\n      align-self: start;\n    }\n\n    .score-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n    .score-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      margin-top: 2px;\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n    .score-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n    .score-meta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 6px; height: 6px; border-radius: 50%; display: block; }\n\n    .viol-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .viol[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n      border-left: 3px solid var(--sev-color, var(--prism-primary));\n      transition: border-color var(--dur-fast);\n    }\n    .viol[_ngcontent-%COMP%]:hover { border-color: var(--prism-border-strong); }\n\n    .viol-sev[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 9.5px;\n      font-weight: 700;\n      padding: 2px 6px;\n      border-radius: var(--radius-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: color-mix(in srgb, var(--sev-color) 15%, transparent);\n      color: var(--sev-color);\n    }\n\n    .viol-text[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--prism-text);\n      min-width: 0;\n    }\n    .viol-text[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      display: block;\n      font-weight: 600;\n      margin-bottom: 1px;\n    }\n    .viol-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n      font-size: 11.5px;\n    }\n\n    .viol-rule[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      padding: 2px 7px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-xs);\n      white-space: nowrap;\n    }\n\n    .a11y-status[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--prism-text-muted);\n      font-size: 13px;\n    }\n    .a11y-status--error[_ngcontent-%COMP%] { color: var(--prism-danger); }\n\n    @media (max-width: 1100px) {\n      .a11y-body[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    }"] });
+        } }, dependencies: [A11yScoreComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; overflow: auto; }\n\n    .a11y-body[_ngcontent-%COMP%] {\n      padding: 18px 20px;\n      display: grid;\n      grid-template-columns: 220px 1fr;\n      gap: 20px;\n      min-height: 0;\n    }\n    .a11y-body--loading[_ngcontent-%COMP%] { opacity: 0.55; transition: opacity var(--%NS%dur-base); }\n\n    .score-wrap[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 10px;\n      padding: 14px;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 10px;\n      align-self: start;\n    }\n\n    .score-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--%NS%prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n    .score-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      margin-top: 2px;\n      font-size: 11px;\n      color: var(--%NS%prism-text-muted);\n    }\n    .score-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n    .score-meta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 6px; height: 6px; border-radius: 50%; display: block; }\n\n    .viol-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .viol[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px;\n      border-left: 3px solid var(--%NS%sev-color, var(--%NS%prism-primary));\n      transition: border-color var(--%NS%dur-fast);\n    }\n    .viol[_ngcontent-%COMP%]:hover { border-color: var(--%NS%prism-border-strong); }\n\n    .viol-sev[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 9.5px;\n      font-weight: 700;\n      padding: 2px 6px;\n      border-radius: var(--%NS%radius-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: color-mix(in srgb, var(--%NS%sev-color) 15%, transparent);\n      color: var(--%NS%sev-color);\n    }\n\n    .viol-text[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--%NS%prism-text);\n      min-width: 0;\n    }\n    .viol-text[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      display: block;\n      font-weight: 600;\n      margin-bottom: 1px;\n    }\n    .viol-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      font-size: 11.5px;\n    }\n\n    .viol-rule[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 11px;\n      color: var(--%NS%prism-text-ghost);\n      padding: 2px 7px;\n      background: var(--%NS%prism-input-bg);\n      border-radius: var(--%NS%radius-xs);\n      white-space: nowrap;\n    }\n\n    .a11y-status[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--%NS%prism-text-muted);\n      font-size: 13px;\n    }\n    .a11y-status--error[_ngcontent-%COMP%] { color: var(--%NS%prism-danger); }\n\n    @media (max-width: 1100px) {\n      .a11y-body[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yViolationsComponent, [{
         type: Component,

package/dist/app/panels/a11y/a11y.types.d.ts

@@ -41,6 +41,20 @@ export interface A11yManifestMeta {
     total: A11yReport['total'];
     thresholds: A11yThresholds;
 }
+/** Shape stored under `showcaseConfig.meta.a11y`. */
+export interface A11yComponentMeta {
+    found: boolean;
+    score: A11yScoreResult;
+    /**
+     * Pre-derived headline, written by the build step. Optional because a report
+     * written before this field existed simply has none, and the marker is then
+     * left out rather than guessed at.
+     */
+    summary?: {
+        variant: 'ok' | 'warn' | 'danger';
+        label: string;
+    };
+}
 export interface NgPrismA11yConfig {
     /** Thresholds for the header badge color-coding and (when run via the CLI) build failure. */
     thresholds?: Partial<A11yThresholds>;

package/dist/app/panels/a11y/a11y.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y.types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,+EAA+E;AAC/E,MAAM,WAAW,UAAU;IACzB,mEAAmE;IACnE,KAAK,EAAE,eAAe,GAAG;QACvB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC7C,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,4EAA4E;AAC5E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAiB;IAChC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACrC,iGAAiG;IACjG,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IACzC,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"a11y.types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,+EAA+E;AAC/E,MAAM,WAAW,UAAU;IACzB,mEAAmE;IACnE,KAAK,EAAE,eAAe,GAAG;QACvB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC7C,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,4EAA4E;AAC5E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC;CAC5B;AAED,qDAAqD;AACrD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE;QAAE,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChE;AAED,MAAM,WAAW,iBAAiB;IAChC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACrC,iGAAiG;IACjG,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IACzC,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB"}

package/dist/app/panels/builtin-navigation-decorations.d.ts

@@ -0,0 +1,8 @@
+import type { NavigationDecorationDefinition } from '../../plugin/plugin.types.js';
+/**
+ * Core-owned navigation markers — the counterpart to `BUILTIN_PANELS` and
+ * `BUILTIN_HEADER_WIDGETS`. A11y is a core feature, not a plugin, so its
+ * marker lives here rather than in a plugin's contribution list.
+ */
+export declare const BUILTIN_NAVIGATION_DECORATIONS: NavigationDecorationDefinition[];
+//# sourceMappingURL=builtin-navigation-decorations.d.ts.map

package/dist/app/panels/builtin-navigation-decorations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builtin-navigation-decorations.d.ts","sourceRoot":"","sources":["../../../src/app/panels/builtin-navigation-decorations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAGnF;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,EAAE,8BAA8B,EAexE,CAAC"}

package/dist/app/panels/builtin-navigation-decorations.js

@@ -0,0 +1,20 @@
+/**
+ * Core-owned navigation markers — the counterpart to `BUILTIN_PANELS` and
+ * `BUILTIN_HEADER_WIDGETS`. A11y is a core feature, not a plugin, so its
+ * marker lives here rather than in a plugin's contribution list.
+ */
+export const BUILTIN_NAVIGATION_DECORATIONS = [
+    {
+        id: 'a11y',
+        icon: 'accessibility',
+        order: 10,
+        badge: (component) => {
+            const meta = component.meta.showcaseConfig.meta?.['a11y'];
+            if (!meta?.found || !meta.summary)
+                return null;
+            if (meta.summary.variant === 'ok')
+                return null;
+            return { variant: meta.summary.variant, label: meta.summary.label };
+        },
+    },
+];

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

@@ -186,7 +186,7 @@ export class PrismControlsPanelComponent {
             StringControlComponent,
             NumberControlComponent,
             UnionControlComponent,
-            JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-toolbar[_ngcontent-%COMP%] {\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: var(--prism-bg-elevated);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-dirty-info[_ngcontent-%COMP%] {\n      font-size: 11.5px;\n      font-family: var(--font-mono);\n      color: var(--prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--font-sans);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-row[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ctl-label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-not-editable[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 11.5px;\n      color: var(--prism-text-ghost);\n      font-style: italic;\n    }\n\n    .ctl-empty[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }"] });
+            JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-toolbar[_ngcontent-%COMP%] {\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: var(--%NS%prism-bg-elevated);\n      border-bottom: 1px solid var(--%NS%prism-border);\n    }\n    .ctl-dirty-info[_ngcontent-%COMP%] {\n      font-size: 11.5px;\n      font-family: var(--%NS%font-mono);\n      color: var(--%NS%prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--%NS%prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--%NS%prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--%NS%font-sans);\n      color: var(--%NS%prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--%NS%prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--%NS%dur-fast), background var(--%NS%dur-fast), border-color var(--%NS%dur-fast);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text);\n      border-color: color-mix(in srgb, var(--%NS%prism-primary) 40%, var(--%NS%prism-border));\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n    }\n    .ctl-row[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 3%, transparent);\n    }\n\n    .ctl-label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--%NS%prism-text);\n      font-weight: 500;\n    }\n    .ctl-type[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 10.5px;\n      color: var(--%NS%prism-text-ghost);\n    }\n    .ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-not-editable[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 11.5px;\n      color: var(--%NS%prism-text-ghost);\n      font-style: italic;\n    }\n\n    .ctl-empty[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismControlsPanelComponent, [{
         type: Component,

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

@@ -56,7 +56,7 @@ export class PrismEventsPanelComponent {
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.eventLogService.events());
-        } }, dependencies: [PrismJsonNodeComponent], styles: [".ev-panel[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .ev-body[_ngcontent-%COMP%] {\n      padding: 6px 0;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .ev[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: auto auto 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 6px 20px;\n      font-family: var(--font-mono);\n      font-size: 12px;\n      border-bottom: 1px solid var(--prism-border);\n      min-height: 32px;\n    }\n    .ev[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ev-time[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      font-size: 11px;\n    }\n    .ev-idx[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n      font-size: 11px;\n    }\n    .ev-name[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n    .ev-args[_ngcontent-%COMP%] {\n      color: var(--prism-text-2);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ev-empty[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      padding: 16px 20px;\n      margin: 0;\n    }"] });
+        } }, dependencies: [PrismJsonNodeComponent], styles: [".ev-panel[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .ev-body[_ngcontent-%COMP%] {\n      padding: 6px 0;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .ev[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: auto auto 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 6px 20px;\n      font-family: var(--%NS%font-mono);\n      font-size: 12px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      min-height: 32px;\n    }\n    .ev[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 3%, transparent);\n    }\n\n    .ev-time[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-ghost);\n      font-size: 11px;\n    }\n    .ev-idx[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      font-size: 11px;\n    }\n    .ev-name[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n      font-weight: 500;\n    }\n    .ev-args[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-2);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ev-empty[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-ghost);\n      font-size: 13px;\n      padding: 16px 20px;\n      margin: 0;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismEventsPanelComponent, [{
         type: Component,

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

@@ -266,7 +266,7 @@ 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(--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(--prism-text-muted);\n      font-size: 10px;\n      width: 10px;\n      flex-shrink: 0;\n    }\n    .json-summary[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n    }\n    .json-children[_ngcontent-%COMP%] {\n      display: block;\n      padding-left: 16px;\n      border-left: 1px solid var(--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(--prism-text-muted);\n    }\n    .json-index[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n      font-style: italic;\n    }\n    .json-colon[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n    }\n    .json-brace[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n    }\n    .json-string[_ngcontent-%COMP%] {\n      color: var(--prism-code-attr);\n    }\n    .json-number[_ngcontent-%COMP%] {\n      color: var(--prism-warn);\n    }\n    .json-boolean[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n    }\n    .json-null[_ngcontent-%COMP%], \n   .json-undefined[_ngcontent-%COMP%] {\n      color: var(--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    .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    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismJsonNodeComponent, [{
         type: Component,

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

@@ -0,0 +1,35 @@
+import type { PanelBadge, PanelDefinition, RuntimeComponent } from '../../../plugin/plugin.types.js';
+import type { A11yScoreResult, A11yThresholds } from '../a11y/a11y.types.js';
+/**
+ * The live figures the built-in tabs badge themselves with.
+ *
+ * Passed in rather than injected so this stays a pure function. The panel host
+ * reads them from its own services and hands them over; that is the whole
+ * reason the built-in chain could not simply be expressed as
+ * {@link PanelDefinition.badge} callbacks — `a11y` reports a running audit, not
+ * anything the component's meta holds.
+ *
+ * The thresholds travel with the audit result rather than being baked in here.
+ * The navigation marker grades the build-time report against the configured
+ * numbers; a tab grading the live audit on its own scale would put an amber
+ * icon in the sidebar next to a red badge on the tab for the same component.
+ */
+export interface PanelBadgeContext {
+    inputCount: number;
+    a11yResult: A11yScoreResult | null;
+    a11yThresholds: A11yThresholds;
+}
+/**
+ * The badge a panel's tab carries, if any.
+ *
+ * A panel that declares its own {@link PanelDefinition.badge} wins outright,
+ * which is what lets a plugin put a number on its own tab without the panel
+ * host learning about it. The chain below it predates that hook and stays for
+ * the tabs it already covers.
+ *
+ * Returning `null` is the common case and the important one: a badge that is
+ * always present stops being a signal, so every branch here has a way to say
+ * "nothing worth reporting" rather than falling back to a zero.
+ */
+export declare function resolvePanelBadge(panel: PanelDefinition, component: RuntimeComponent | null, context: PanelBadgeContext): PanelBadge | null;
+//# sourceMappingURL=panel-badge.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,37 @@
+import { deriveA11ySummary } from '../a11y/a11y-summary.js';
+/**
+ * The badge a panel's tab carries, if any.
+ *
+ * A panel that declares its own {@link PanelDefinition.badge} wins outright,
+ * which is what lets a plugin put a number on its own tab without the panel
+ * host learning about it. The chain below it predates that hook and stays for
+ * the tabs it already covers.
+ *
+ * Returning `null` is the common case and the important one: a badge that is
+ * always present stops being a signal, so every branch here has a way to say
+ * "nothing worth reporting" rather than falling back to a zero.
+ */
+export function resolvePanelBadge(panel, component, context) {
+    if (panel.badge) {
+        // No component means no subject to report on; calling the hook with a
+        // placeholder would invite it to invent a number.
+        return component ? panel.badge(component) : null;
+    }
+    if (panel.id === 'controls') {
+        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
+        // most urgent, thing to show.
+        const result = context.a11yResult;
+        if (result === null)
+            return null;
+        return {
+            text: String(result.score),
+            variant: deriveA11ySummary(result, context.a11yThresholds).variant,
+        };
+    }
+    return null;
+}

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

@@ -15,13 +15,16 @@ export declare class PrismPanelHostComponent {
     protected readonly envInjector: EnvironmentInjector;
     private readonly auditService;
     private readonly rendererService;
-    private readonly a11yScore;
-    private readonly coverageScore;
+    private readonly manifest;
+    private readonly config;
+    /**
+     * The configured thresholds, resolved the way the a11y header badge resolves
+     * them: the build step's numbers as the base, the app config on top. Both
+     * are static for the session, so this is computed once rather than per tab.
+     */
+    private readonly a11yThresholds;
     private readonly inputCount;
-    protected panelBadge(panelId: string): {
-        text: string;
-        variant: 'default' | 'ok' | 'warn' | 'danger';
-    } | null;
+    protected panelBadge(panel: PanelDefinition): import("../../../plugin/plugin.types.js").PanelBadge | null;
     private readonly builtInPanels;
     protected readonly allPanels: import("@angular/core").Signal<PanelDefinition[]>;
     protected readonly panelInputs: import("@angular/core").Signal<{

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;AAI1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;;AAEvE,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,qBAuLa,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;IAEhE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAExB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;IAEH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAGxB;IAEH,SAAS,CAAC,UAAU,CAClB,OAAO,EAAE,MAAM,GACd;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI;IAwBzE,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;yCApJhB,uBAAuB;2CAAvB,uBAAuB;CAwKnC"}
+{"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,qBAuLa,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"}

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

@@ -7,6 +7,9 @@ import { PrismNavigationService } from '../../services/prism-navigation.service.
 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 { resolvePanelBadge } from './panel-badge.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) {
@@ -44,7 +47,7 @@ function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", panel_r2.label, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_15_0 = ctx_r2.panelBadge(panel_r2.id)) ? 3 : -1, tmp_15_0);
+    i0.ɵɵconditional((tmp_15_0 = ctx_r2.panelBadge(panel_r2)) ? 3 : -1, tmp_15_0);
 } }
 function PrismPanelHostComponent_For_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -67,45 +70,32 @@ export class PrismPanelHostComponent {
     envInjector = inject(EnvironmentInjector);
     auditService = inject(A11yAuditService);
     rendererService = inject(PrismRendererService);
-    a11yScore = computed(() => this.auditService.scoreResult()?.score ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "a11yScore" }] : /* istanbul ignore next */ []));
-    coverageScore = computed(() => {
-        const comp = this.nav.activeComponent();
-        const coverage = comp?.meta?.showcaseConfig?.meta?.['coverage'];
-        if (!coverage?.found)
-            return null;
-        return coverage.score;
+    manifest = inject(PRISM_MANIFEST);
+    config = inject(PRISM_CONFIG);
+    /**
+     * The configured thresholds, resolved the way the a11y header badge resolves
+     * them: the build step's numbers as the base, the app config on top. Both
+     * are static for the session, so this is computed once rather than per tab.
+     */
+    a11yThresholds = computed(() => {
+        const meta = this.manifest.meta?.['a11y'];
+        return resolveA11yThresholds({
+            ...meta?.thresholds,
+            ...this.config.a11y?.thresholds,
+        });
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "coverageScore" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "a11yThresholds" }] : /* istanbul ignore next */ []));
     inputCount = computed(() => {
         const comp = this.nav.activeComponent();
         return comp?.meta.inputs.length ?? 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputCount" }] : /* istanbul ignore next */ []));
-    panelBadge(panelId) {
-        if (panelId === 'controls') {
-            const count = this.inputCount();
-            return count > 0 ? { text: String(count), variant: 'default' } : null;
-        }
-        if (panelId === 'a11y') {
-            const score = this.a11yScore();
-            if (score === null)
-                return null;
-            return {
-                text: String(score),
-                variant: score >= 90 ? 'ok' : score >= 70 ? 'warn' : 'danger',
-            };
-        }
-        if (panelId === 'coverage') {
-            const score = this.coverageScore();
-            if (score === null)
-                return null;
-            return {
-                text: String(score),
-                variant: score >= 90 ? 'ok' : score >= 70 ? 'warn' : 'danger',
-            };
-        }
-        return null;
+    panelBadge(panel) {
+        return resolvePanelBadge(panel, this.nav.activeComponent(), {
+            inputCount: this.inputCount(),
+            a11yResult: this.auditService.scoreResult(),
+            a11yThresholds: this.a11yThresholds(),
+        });
     }
     builtInPanels = BUILTIN_PANELS;
     allPanels = computed(() => {
@@ -221,7 +211,7 @@ 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(--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    }"] });
+        } }, 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.ok[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-success) 18%, transparent);\n      color: var(--%NS%prism-success);\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    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPanelHostComponent, [{
         type: Component,
@@ -245,7 +235,7 @@ export class PrismPanelHostComponent {
           <prism-icon [name]="panel.icon" [size]="13" />
           }
           {{ panel.label }}
-          @if (panelBadge(panel.id); as badge) {
+          @if (panelBadge(panel); as badge) {
           <span
             class="p-tab-badge"
             [class.ok]="badge.variant === 'ok'"
@@ -280,4 +270,4 @@ export class PrismPanelHostComponent {
     </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    .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: 213 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 220 }); })();

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,CAkBnB"}
+{"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"}

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

@@ -17,9 +17,20 @@ export function resolveOverlay(panels, activePanelId, options) {
     }
     if (panel.loadOverlayComponent) {
         const cached = options.cache.get(panel.id);
+        const loadOverlayComponent = panel.loadOverlayComponent;
         return cached
             ? { kind: 'eager', component: cached }
-            : { kind: 'lazy', panelId: panel.id, load: panel.loadOverlayComponent };
+            : {
+                kind: 'lazy',
+                panelId: panel.id,
+                // Wrapped rather than passed by reference: handing the bare method
+                // over detaches it from its panel, and the renderer would call it
+                // with `this === undefined`. A definition written in method
+                // 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),
+            };
     }
     return NONE;
 }

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

@@ -55,9 +55,7 @@ export class PrismRendererComponent {
     });
     panelService = inject(PrismPanelService);
     pluginService = inject(PrismPluginService);
-    outlet = viewChild.required('outlet', {
-        read: ViewContainerRef,
-    });
+    outlet = viewChild.required('outlet', { ...(ngDevMode ? { debugName: "outlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     componentRef = null;
     outputSubscriptions = [];
     lastProjectedContent = undefined;
@@ -249,13 +247,13 @@ export class PrismRendererComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.capture.active() ? 1 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵstyleProp("--zoom", ctx.canvasService.zoom());
+            i0.ɵɵstyleProp("--%NS%zoom", ctx.canvasService.zoom());
             i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey())("data-canvas-layout", ctx.canvasLayout());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.activeOverlay() ? 5 : -1);
         } }, dependencies: [PrismCanvasRulersComponent,
             PrismCanvasBgPillComponent,
-            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    \n\n\n\n\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\n    }\n    \n\n\n\n\n\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%], \n   .prism-canvas-stage[data-bg=\"transparent\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"][_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }"] });
+            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--%NS%prism-bg-surface);\n      background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--%NS%dur-base);\n      --%NS%prism-canvas-overlay-top: 12px;\n      --%NS%prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --%NS%prism-canvas-overlay-top: 28px;\n      --%NS%prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    \n\n\n\n\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--%NS%prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--%NS%prism-void-dark, #07050f);\n      background-image: none;\n    }\n    \n\n\n\n\n\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%], \n   .prism-canvas-stage[data-bg=\"transparent\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--%NS%dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--%NS%prism-canvas-overlay-top);\n      left: var(--%NS%prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--%NS%dur-base), left var(--%NS%dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--%NS%prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--%NS%zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"][_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,

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

@@ -15,6 +15,6 @@ export declare class PrismCanvasService {
     private loadFromStorage;
     private save;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismCanvasService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<PrismCanvasService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 //# sourceMappingURL=prism-canvas.service.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-canvas.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAG3E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;IAEhC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;;IAWvD,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,IAAI;yCAnDD,kBAAkB;6CAAlB,kBAAkB;CAiE9B"}
+{"version":3,"file":"prism-canvas.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-canvas.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAG3E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;IAEhC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;;IAWvD,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,IAAI;yCAnDD,kBAAkB;;CAiE9B"}

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

@@ -17,6 +17,12 @@ export declare const CAPTURE_ATTRIBUTE = "data-prism-capture";
  * Above `html` the backdrop is the browser's own and no stylesheet reaches it;
  * a runner has to clear that with `omitBackground: true`.
  *
+ * `prism-shell` is the *host element* the app bootstraps into, not the
+ * `div.prism-shell` inside its template — both are in the chain and either can
+ * be given a background, a `:host` rule being the easy way to do it by
+ * accident. `.prism-body` is the grid between the shell and `.prism-main` and
+ * is listed on the same insurance grounds.
+ *
  * Scoped by `:has()` to a *transparent* stage, so the other five backgrounds
  * behave exactly as before. Exported so a test can assert the invariant
  * against the real DOM rather than against this list — the list is the
@@ -33,8 +39,16 @@ export declare const CAPTURE_TRANSPARENT_SELECTOR: string;
  * mode strips the canvas background down to its patternless colour — keeping
  * whatever `@Showcase({ bg })` declared, or clearing the whole paint chain to
  * real transparency for `bg: 'transparent'` — suppresses every piece of
- * canvas chrome, locks zoom to 1 and freezes animation, so a variant renders
- * identically on every run.
+ * canvas chrome, removes every other shell region from layout so the canvas
+ * owns the viewport, locks zoom to 1 and freezes animation, so a variant
+ * renders identically on every run.
+ *
+ * What that buys a runner is the right to screenshot `.demo-wrap` directly:
+ * the target is composited against the declared background over its whole box,
+ * not merely over the part that fits inside the canvas viewport. The one thing
+ * the mode cannot do is make room that the viewport does not have — a
+ * component larger than the viewport still overflows, and sizing the viewport
+ * to fit is the runner's job.
  *
  * The flag is read once from the URL at construction time and never written
  * back — {@link PrismUrlStateService} rebuilds the query string from scratch,
@@ -53,7 +67,7 @@ export declare class PrismCaptureService {
     constructor();
     private applyToDocument;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismCaptureService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<PrismCaptureService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 /**
  * Parses the capture flag out of a `window.location.search` string.

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

@@ -1 +1 @@
-{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,4BAA4B,QAEgG,CAAC;AA8C1I;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;6CAAnB,mBAAmB;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}
+{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,4BAA4B,QAE0H,CAAC;AA+HpK;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}