@ng-prism/core 22.2.0-beta.4 → 22.2.0

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

@@ -7,6 +7,8 @@ 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;
@@ -16,23 +18,28 @@ function PrismPanelHostComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf
     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) {
+function PrismPanelHostComponent_For_3_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const badge_r4 = ctx;
-    i0.ɵɵclassProp("ok", badge_r4.variant === "ok")("warn", badge_r4.variant === "warn")("danger", badge_r4.variant === "danger");
+    const badge_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("warn", badge_r4.variant === "warn")("danger", badge_r4.variant === "danger");
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(badge_r4.text);
 } }
+function PrismPanelHostComponent_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismPanelHostComponent_For_3_Conditional_3_Conditional_0_Template, 2, 5, "span", 7);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.variant !== "ok" ? 0 : -1);
+} }
 function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     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", 6);
     i0.ɵɵtext(2);
-    i0.ɵɵconditionalCreate(3, PrismPanelHostComponent_For_3_Conditional_3_Template, 2, 7, "span", 7);
+    i0.ɵɵconditionalCreate(3, PrismPanelHostComponent_For_3_Conditional_3_Template, 1, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_15_0;
@@ -68,16 +75,21 @@ 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;
@@ -86,8 +98,8 @@ export class PrismPanelHostComponent {
     panelBadge(panel) {
         return resolvePanelBadge(panel, this.nav.activeComponent(), {
             inputCount: this.inputCount(),
-            a11yScore: this.a11yScore(),
-            coverageScore: this.coverageScore(),
+            a11yResult: this.auditService.scoreResult(),
+            a11yThresholds: this.a11yThresholds(),
         });
     }
     builtInPanels = BUILTIN_PANELS;
@@ -190,7 +202,7 @@ export class PrismPanelHostComponent {
             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: 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) {
+    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, "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();
@@ -204,7 +216,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.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,
@@ -228,15 +240,14 @@ export class PrismPanelHostComponent {
           <prism-icon [name]="panel.icon" [size]="13" />
           }
           {{ panel.label }}
-          @if (panelBadge(panel); as badge) {
+          @if (panelBadge(panel); as badge) { @if (badge.variant !== 'ok') {
           <span
             class="p-tab-badge"
-            [class.ok]="badge.variant === 'ok'"
             [class.warn]="badge.variant === 'warn'"
             [class.danger]="badge.variant === 'danger'"
             >{{ badge.text }}</span
           >
-          }
+          } }
         </button>
         }
       </nav>
@@ -261,6 +272,6 @@ export class PrismPanelHostComponent {
         }
       </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    .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  "] }]
+  `, styles: ["\n    .panel {\n      background: var(--prism-bg-elevated);\n      border-top: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n      height: 100%;\n    }\n\n    .panel-tabs {\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      padding: 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      overflow-x: auto;\n      scrollbar-width: none;\n      flex-shrink: 0;\n    }\n    .panel-tabs::-webkit-scrollbar { display: none; }\n\n    .p-tab {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 7px;\n      padding: 0 12px;\n      font-size: var(--fs-md);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .p-tab:hover { color: var(--prism-text-2); }\n    .p-tab--active { color: var(--prism-text); }\n    .p-tab--active::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      border-radius: 1px;\n    }\n\n    .p-tab-badge {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n      color: var(--prism-primary);\n      font-family: var(--font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n    }\n    .p-tab-badge.warn {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n    .p-tab-badge.danger {\n      background: color-mix(in srgb, var(--prism-danger) 18%, transparent);\n      color: var(--prism-danger);\n    }\n\n    .panel-tabs-right {\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding-left: 10px;\n    }\n\n    .icon-btn {\n      width: 28px;\n      height: 28px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm);\n      color: var(--prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n    }\n    .icon-btn:hover {\n      background: var(--prism-input-bg);\n      color: var(--prism-text);\n    }\n\n    .panel-body {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      background: var(--prism-bg-elevated);\n    }\n    .panel-body::-webkit-scrollbar { width: 8px; height: 8px; }\n    .panel-body::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n\n    .panel-pane { height: 100%; }\n    .panel-pane[hidden] { display: none; }\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 214 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 215 }); })();

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.d.ts

@@ -6,7 +6,6 @@ import { PrismCaptureService } from '../services/prism-capture.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismRendererComponent {
-    protected readonly Math: Math;
     protected readonly navigationService: PrismNavigationService;
     protected readonly rendererService: PrismRendererService;
     protected readonly canvasService: PrismCanvasService;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAMhF,qBA4Ja,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,OAAO,sBAA+B;IACzD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IAmFH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAxOJ,sBAAsB;2CAAtB,sBAAsB;CAsPlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAQhF,qBAkIa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,OAAO,sBAA+B;IACzD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IAmFH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAvOJ,sBAAsB;2CAAtB,sBAAsB;CAqPlC"}

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

@@ -13,33 +13,28 @@ import { PrismCaptureService } from '../services/prism-capture.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import { PrismCanvasRulersComponent } from '../canvas/prism-canvas-rulers.component.js';
 import { PrismCanvasBgPillComponent } from '../canvas/prism-canvas-bg-pill.component.js';
+import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
 import { buildKnownInputs } from './known-inputs.js';
 import { resolveOverlay } from './overlay-resolver.js';
+import { parseContentToNodes } from './projectable-content.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
 function PrismRendererComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "span", 4);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(3, "div", 5)(4, "prism-canvas-rulers")(5, "prism-canvas-bg-pill");
+    i0.ɵɵelement(0, "div", 3)(1, "prism-canvas-rulers")(2, "prism-canvas-bg-pill");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r0.Math.round(ctx_r0.canvasService.zoom() * 100), "%");
-    i0.ɵɵadvance();
     i0.ɵɵclassProp("visible", ctx_r0.canvasService.guides());
 } }
 function PrismRendererComponent_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function PrismRendererComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 6);
+    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 4);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngComponentOutlet", ctx_r0.activeOverlay())("ngComponentOutletInputs", ctx_r0.overlayInputs)("ngComponentOutletInjector", ctx_r0.overlayInjector());
 } }
 export class PrismRendererComponent {
-    Math = Math;
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
     canvasService = inject(PrismCanvasService);
@@ -55,9 +50,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;
@@ -237,9 +230,9 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 6, vars: 8, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 6, vars: 8, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "stage-crosshair"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵconditionalCreate(1, PrismRendererComponent_Conditional_1_Template, 6, 3);
+            i0.ɵɵconditionalCreate(1, PrismRendererComponent_Conditional_1_Template, 3, 2);
             i0.ɵɵelementStart(2, "div", 2);
             i0.ɵɵelementContainer(3, null, 0);
             i0.ɵɵconditionalCreate(5, PrismRendererComponent_Conditional_5_Template, 1, 3, "ng-container");
@@ -249,13 +242,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%] {\n        display: block;\n        min-height: 0;\n        flex: 1;\n      }\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-stage);\n\n        \n\n\n\n\n\n\n\n\n\n\n        outline: 1px solid var(--%NS%prism-stage-edge);\n        outline-offset: -1px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),\n          0 8px 24px -12px rgba(0, 0, 0, 0.18);\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      .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%] {\n        opacity: 1;\n      }\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 {\n        left: 0;\n        right: 0;\n        top: 50%;\n        height: 1px;\n      }\n      .stage-crosshair[_ngcontent-%COMP%]::after {\n        top: 0;\n        bottom: 0;\n        left: 50%;\n        width: 1px;\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      }", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n    background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"][_ngcontent-%COMP%] {\n    background-image: none;\n  }\n\n  \n\n\n\n\n  [data-bg=\"light\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [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\n  [data-bg=\"checker\"][_ngcontent-%COMP%], \n   [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  }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
@@ -270,11 +263,6 @@ export class PrismRendererComponent {
       [attr.data-rulers]="canvasService.rulers() ? '' : null"
     >
       @if (!capture.active()) {
-      <div class="canvas-badges">
-        <span class="c-badge"
-          >{{ Math.round(canvasService.zoom() * 100) }}%</span
-        >
-      </div>
       <div
         class="stage-crosshair"
         [class.visible]="canvasService.guides()"
@@ -301,60 +289,8 @@ export class PrismRendererComponent {
         }
       </div>
     </div>
-  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\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] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n       designed against \u2014 and they are the two backgrounds whose colour is\n       absolute rather than a theme token, which is what makes them the values\n       to declare for a screenshot baseline. \"dots\" already exists for anyone\n       who wants the grid. */\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\n    }\n    /* \"transparent\" shares the checkerboard on purpose. The two say the same\n       thing in the two media the canvas has: while browsing, the checkerboard\n       is already the UI's word for \"no surface here\"; in a capture it becomes\n       literal transparency. A stage that were really see-through in the app\n       would just show the shell through the canvas, which means nothing. The\n       split between the two lives entirely in CAPTURE_STYLES. */\n    .prism-canvas-stage[data-bg=\"checker\"],\n    .prism-canvas-stage[data-bg=\"transparent\"] {\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 {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\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 {\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 {\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\"] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }\n\n  "] }]
+  `, styles: ["\n      :host {\n        display: block;\n        min-height: 0;\n        flex: 1;\n      }\n\n      .prism-canvas-stage {\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-stage);\n\n        /* The edge is outline + shadow, never border and never extra padding.\n         plugin-visual-regression screenshots .demo-wrap, which is centred in\n         this element; a border would shrink the content box by 2px and move\n         that centre, shifting all 15 baselines in test-workspace/vrt/baseline\n         without a single component having changed. Capture mode resets this\n         element's padding but not its border, and this repo has no VRT runner\n         to catch the drift. outline and box-shadow do not participate in\n         layout, so the box is provably unchanged. Keep it that way.\n         They do still paint, and outline-offset is negative, so the line lands\n         inside the box: CAPTURE_STYLES in prism-capture.service.ts sets both\n         to none, which is only safe because neither is load-bearing here. */\n        outline: 1px solid var(--prism-stage-edge);\n        outline-offset: -1px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),\n          0 8px 24px -12px rgba(0, 0, 0, 0.18);\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] {\n        --prism-canvas-overlay-top: 28px;\n        --prism-canvas-overlay-inline: 28px;\n      }\n\n      .stage-crosshair {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity var(--dur-base);\n      }\n      .stage-crosshair.visible {\n        opacity: 1;\n      }\n      .stage-crosshair::before,\n      .stage-crosshair::after {\n        content: '';\n        position: absolute;\n        background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      }\n      .stage-crosshair::before {\n        left: 0;\n        right: 0;\n        top: 50%;\n        height: 1px;\n      }\n      .stage-crosshair::after {\n        top: 0;\n        bottom: 0;\n        left: 50%;\n        width: 1px;\n      }\n\n      .demo-wrap {\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'] {\n        display: block;\n        width: 100%;\n        max-width: 800px;\n      }\n    ", "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n     designed against \u2014 and they are the two backgrounds whose colour is\n     absolute rather than a theme token, which is what makes them the values\n     to declare for a screenshot baseline. \"dots\" already exists for anyone\n     who wants the grid. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  /* \"transparent\" shares the checkerboard on purpose. The two say the same\n     thing in the two media the canvas has: while browsing, the checkerboard\n     is already the UI's word for \"no surface here\"; in a capture it becomes\n     literal transparency. A stage that were really see-through in the app\n     would just show the shell through the canvas, which means nothing. The\n     split between the two lives entirely in CAPTURE_STYLES. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\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"] }]
     }], () => [], { 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: 196 }); })();
-// SAFETY: `content` originates from `@Showcase({ variants: [{ content }] })`
-// in developer-authored source code. It is trusted by ng-prism's threat model
-// (see SECURITY.md). Sanitization would strip the Angular component/directive
-// selectors that variant content is meant to project.
-function parseContentToNodes(content) {
-    if (typeof content === 'string') {
-        return [htmlToNodes(content)];
-    }
-    const defaultNodes = content['default']
-        ? htmlToNodes(content['default'])
-        : [];
-    const result = [defaultNodes];
-    for (const [selector, html] of Object.entries(content)) {
-        if (selector === 'default')
-            continue;
-        const wrapper = document.createElement('div');
-        // SAFETY: trusted developer-authored HTML — see SECURITY.md.
-        wrapper.innerHTML = html;
-        const nodes = [];
-        for (const child of Array.from(wrapper.childNodes)) {
-            const el = document.createElement('div');
-            // SAFETY: trusted developer-authored HTML — see SECURITY.md.
-            el.innerHTML = child.outerHTML ?? child.textContent ?? '';
-            const projected = el.firstChild;
-            if (projected && projected instanceof Element) {
-                applySelector(projected, selector);
-                nodes.push(projected);
-            }
-            else if (projected) {
-                const span = document.createElement('span');
-                applySelector(span, selector);
-                span.textContent = child.textContent;
-                nodes.push(span);
-            }
-        }
-        result.push(nodes);
-    }
-    return result;
-}
-// SAFETY: see `parseContentToNodes` above and SECURITY.md — `html` is trusted
-// developer-authored variant content from the `@Showcase` decorator.
-function htmlToNodes(html) {
-    const wrapper = document.createElement('div');
-    wrapper.innerHTML = html;
-    return Array.from(wrapper.childNodes);
-}
-function applySelector(el, selector) {
-    const attrMatch = selector.match(/^\[([^\]=]+)]$/);
-    if (attrMatch) {
-        el.setAttribute(attrMatch[1], '');
-    }
-}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 172 }); })();

package/dist/app/renderer/projectable-content.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Turns per-variant `content` into the `projectableNodes` argument of
+ * `ViewContainerRef.createComponent`.
+ *
+ * Shared by the Playground stage and the Overview cells: both project the same
+ * developer-authored content, and the slot-selector handling is the one piece
+ * of that neither wants to own twice.
+ */
+export declare function parseContentToNodes(content: string | Record<string, string>): Node[][];
+//# sourceMappingURL=projectable-content.d.ts.map

package/dist/app/renderer/projectable-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"projectable-content.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/projectable-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACvC,IAAI,EAAE,EAAE,CAmCV"}

package/dist/app/renderer/projectable-content.js

@@ -0,0 +1,60 @@
+/**
+ * Turns per-variant `content` into the `projectableNodes` argument of
+ * `ViewContainerRef.createComponent`.
+ *
+ * Shared by the Playground stage and the Overview cells: both project the same
+ * developer-authored content, and the slot-selector handling is the one piece
+ * of that neither wants to own twice.
+ */
+// SAFETY: `content` originates from `@Showcase({ variants: [{ content }] })`
+// in developer-authored source code. It is trusted by ng-prism's threat model
+// (see SECURITY.md). Sanitization would strip the Angular component/directive
+// selectors that variant content is meant to project.
+export function parseContentToNodes(content) {
+    if (typeof content === 'string') {
+        return [htmlToNodes(content)];
+    }
+    const defaultNodes = content['default']
+        ? htmlToNodes(content['default'])
+        : [];
+    const result = [defaultNodes];
+    for (const [selector, html] of Object.entries(content)) {
+        if (selector === 'default')
+            continue;
+        const wrapper = document.createElement('div');
+        // SAFETY: trusted developer-authored HTML — see SECURITY.md.
+        wrapper.innerHTML = html;
+        const nodes = [];
+        for (const child of Array.from(wrapper.childNodes)) {
+            const el = document.createElement('div');
+            // SAFETY: trusted developer-authored HTML — see SECURITY.md.
+            el.innerHTML = child.outerHTML ?? child.textContent ?? '';
+            const projected = el.firstChild;
+            if (projected && projected instanceof Element) {
+                applySelector(projected, selector);
+                nodes.push(projected);
+            }
+            else if (projected) {
+                const span = document.createElement('span');
+                applySelector(span, selector);
+                span.textContent = child.textContent;
+                nodes.push(span);
+            }
+        }
+        result.push(nodes);
+    }
+    return result;
+}
+// SAFETY: see `parseContentToNodes` above and SECURITY.md — `html` is trusted
+// developer-authored variant content from the `@Showcase` decorator.
+function htmlToNodes(html) {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = html;
+    return Array.from(wrapper.childNodes);
+}
+function applySelector(el, selector) {
+    const attrMatch = selector.match(/^\[([^\]=]+)]$/);
+    if (attrMatch) {
+        el.setAttribute(attrMatch[1], '');
+    }
+}

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
@@ -61,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;AA+H1I;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;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;AAmJpK;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

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

@@ -19,6 +19,12 @@ const STYLE_ELEMENT_ID = 'ng-prism-capture-styles';
  * 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
@@ -27,7 +33,7 @@ const STYLE_ELEMENT_ID = 'ng-prism-capture-styles';
  * looks correct; it just silently stops testing transparency.
  */
 export const CAPTURE_TRANSPARENT_SELECTOR = `[${CAPTURE_ATTRIBUTE}] .prism-canvas-stage[data-bg='transparent'],\n` +
-    `[${CAPTURE_ATTRIBUTE}] :is(html, body, .prism-shell, .prism-main, .prism-canvas-wrap):has(.prism-canvas-stage[data-bg='transparent'])`;
+    `[${CAPTURE_ATTRIBUTE}] :is(html, body, prism-shell, .prism-shell, .prism-body, .prism-main, .prism-canvas-wrap):has(.prism-canvas-stage[data-bg='transparent'])`;
 /**
  * Everything capture mode removes from layout so the canvas owns the viewport.
  *
@@ -113,6 +119,24 @@ const CAPTURE_CANVAS_ONLY_SELECTOR = `[${CAPTURE_ATTRIBUTE}] ` +
  * 200x700 component at 1280x720 still leaks 22px past the canvas with the
  * regions gone but the padding kept. None of that padding is ever inside a
  * `.demo-wrap` screenshot, so nothing is lost by removing it.
+ *
+ * The stage's edge goes with them, and it is stripped rather than reshaped for
+ * the same reason it exists in that shape at all. The edge is deliberately
+ * built from `outline` plus `box-shadow` and never from a border or padding,
+ * because neither participates in layout: `plugin-visual-regression`
+ * screenshots `.demo-wrap`, which is centred in the stage, and a border would
+ * shrink the stage's content box by 2px and move that centre, shifting every
+ * recorded baseline without a component having changed. Not participating in
+ * layout is not the same as not painting. `outline-offset: -1px` draws the
+ * line *inside* the border box, and with the padding above gone the stage edge
+ * sits flush against the component, so for anything whose `.demo-wrap` reaches
+ * it that 1px line and the shadow under it composite straight into the
+ * screenshot. So capture mode removes the paint and leaves the geometry
+ * untouched — the same division of labour the edge was chosen for, and the
+ * only one that keeps both halves of the guarantee.
+ *
+ * {@link CAPTURE_TRANSPARENT_SELECTOR} cannot cover this: it clears background
+ * colour, and an outline is not a background.
  */
 const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] *,
@@ -127,6 +151,8 @@ const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] .prism-canvas-stage {
   background-image: none !important;
   padding: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
 ${CAPTURE_TRANSPARENT_SELECTOR} {

package/dist/app/services/prism-event-log.service.d.ts

@@ -11,6 +11,6 @@ export declare class PrismEventLogService {
     log(name: string, value: unknown): void;
     clear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismEventLogService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<PrismEventLogService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 //# sourceMappingURL=prism-event-log.service.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"prism-event-log.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-event-log.service.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,qBACa,oBAAoB;IAC/B,QAAQ,CAAC,MAAM,0DAA+B;IAC9C,OAAO,CAAC,OAAO,CAAK;IAEpB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAOvC,KAAK,IAAI,IAAI;yCAXF,oBAAoB;6CAApB,oBAAoB;CAchC"}
+{"version":3,"file":"prism-event-log.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-event-log.service.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,qBACa,oBAAoB;IAC/B,QAAQ,CAAC,MAAM,0DAA+B;IAC9C,OAAO,CAAC,OAAO,CAAK;IAEpB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAOvC,KAAK,IAAI,IAAI;yCAXF,oBAAoB;;CAchC"}

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

@@ -7,20 +7,17 @@ export declare class PrismLayoutService {
     readonly sidebarWidth: import("@angular/core").WritableSignal<number>;
     readonly panelHeight: import("@angular/core").WritableSignal<number>;
     readonly panelWidth: import("@angular/core").WritableSignal<number>;
-    readonly templatePopoverVisible: import("@angular/core").WritableSignal<boolean>;
     constructor();
     toggleSidebar(): void;
     toggleAddons(): void;
     toggleToolbar(): void;
     toggleOrientation(): void;
-    toggleTemplatePopover(): void;
-    closeTemplatePopover(): void;
     setSidebarWidth(px: number): void;
     setPanelHeight(px: number): void;
     setPanelWidth(px: number): void;
     private loadFromStorage;
     private saveToStorage;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismLayoutService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<PrismLayoutService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 //# sourceMappingURL=prism-layout.service.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;IAClC,QAAQ,CAAC,sBAAsB,kDAAiB;;IAMhD,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,qBAAqB,IAAI,IAAI;IAI7B,oBAAoB,IAAI,IAAI;IAI5B,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,aAAa;yCAnFV,kBAAkB;6CAAlB,kBAAkB;CA+F9B"}
+{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;;IAMlC,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,aAAa;yCA1EV,kBAAkB;;CAsF9B"}