@ng-prism/core 21.8.2 → 21.9.1

package/dist/app/panels/a11y/a11y-keyboard-overlay.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-keyboard-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard-overlay.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAGtE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBA4Da,4BAA4B;IACvC,SAAS,CAAC,QAAQ,CAAC,UAAU,wBAAiC;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,0DAA+B;IAExD,OAAO,CAAC,KAAK,CAAuB;;IAsBpC,OAAO,CAAC,aAAa;yCA9BV,4BAA4B;2CAA5B,4BAA4B;CA2DxC"}
+{"version":3,"file":"a11y-keyboard-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard-overlay.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAGtE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBA6Da,4BAA4B;IACvC,SAAS,CAAC,QAAQ,CAAC,UAAU,wBAAiC;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,0DAA+B;IAExD,OAAO,CAAC,KAAK,CAAuB;;IAsBpC,OAAO,CAAC,aAAa;yCA9BV,4BAA4B;2CAA5B,4BAA4B;CA6DxC"}

package/dist/app/panels/a11y/a11y-keyboard-overlay.component.js

@@ -16,7 +16,7 @@ function A11yKeyboardOverlayComponent_Conditional_0_For_1_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("left", badge_r1.x - 10, "px")("top", badge_r1.y - 10, "px");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(badge_r1.index);
+    i0.ɵɵtextInterpolate1(" ", badge_r1.index, " ");
 } }
 function A11yKeyboardOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, A11yKeyboardOverlayComponent_Conditional_0_For_1_Template, 3, 14, null, null, _forTrack0);
@@ -50,7 +50,7 @@ export class A11yKeyboardOverlayComponent {
         });
     }
     computeBadges(root) {
-        const canvas = this.elementRef.nativeElement.closest('.prism-renderer__canvas');
+        const canvas = this.elementRef.nativeElement.closest('.prism-canvas-stage');
         if (!canvas)
             return;
         const doc = root.ownerDocument;
@@ -82,23 +82,24 @@ export class A11yKeyboardOverlayComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yKeyboardOverlayComponent, [{
         type: Component,
         args: [{ selector: 'prism-a11y-kbd-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (panelState.activeTab() === 'keyboard') {
-      @for (badge of badges(); track badge.index) {
-        <div
-          class="prism-a11y-kbd-ov__highlight"
-          [style.left.px]="badge.x"
-          [style.top.px]="badge.y"
-          [style.width.px]="badge.width"
-          [style.height.px]="badge.height"
-          [title]="badge.name || badge.role"
-        ></div>
-        <div
-          class="prism-a11y-kbd-ov__badge"
-          [style.left.px]="badge.x - 10"
-          [style.top.px]="badge.y - 10"
-        >{{ badge.index }}</div>
-      }
-    }
+    @if (panelState.activeTab() === 'keyboard') { @for (badge of badges(); track
+    badge.index) {
+    <div
+      class="prism-a11y-kbd-ov__highlight"
+      [style.left.px]="badge.x"
+      [style.top.px]="badge.y"
+      [style.width.px]="badge.width"
+      [style.height.px]="badge.height"
+      [title]="badge.name || badge.role"
+    ></div>
+    <div
+      class="prism-a11y-kbd-ov__badge"
+      [style.left.px]="badge.x - 10"
+      [style.top.px]="badge.y - 10"
+    >
+      {{ badge.index }}
+    </div>
+    } }
   `, styles: ["\n    :host {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 100;\n      overflow: hidden;\n    }\n\n    .prism-a11y-kbd-ov__highlight {\n      position: absolute;\n      border: 2px solid rgba(129, 140, 248, 0.5);\n      border-radius: 4px;\n      background: rgba(129, 140, 248, 0.06);\n      box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.08);\n      pointer-events: none;\n    }\n\n    .prism-a11y-kbd-ov__badge {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      background: var(--prism-primary);\n      color: white;\n      border-radius: 50%;\n      font-size: 10px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 0 2px white, 0 2px 6px rgba(0, 0, 0, 0.3);\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      pointer-events: auto;\n      cursor: default;\n    }\n  "] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardOverlayComponent, { className: "A11yKeyboardOverlayComponent", filePath: "app/panels/a11y/a11y-keyboard-overlay.component.ts", lineNumber: 83 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardOverlayComponent, { className: "A11yKeyboardOverlayComponent", filePath: "app/panels/a11y/a11y-keyboard-overlay.component.ts", lineNumber: 84 }); })();

package/dist/app/panels/a11y/a11y-overlay-host.component.d.ts

@@ -1,10 +1,22 @@
+import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
+interface Bounds {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
 export declare class A11yOverlayHostComponent {
-    private readonly rendererService;
+    readonly rendererService: import("@angular/core").InputSignal<PrismRendererService>;
     private readonly keyboardService;
+    private readonly elementRef;
+    private readonly layoutTick;
+    protected readonly bounds: import("@angular/core").Signal<Bounds | null>;
     protected readonly roleLabel: import("@angular/core").Signal<string | null>;
     protected readonly tabLabel: import("@angular/core").Signal<string | null>;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yOverlayHostComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<A11yOverlayHostComponent, "prism-a11y-overlay-host", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yOverlayHostComponent, "prism-a11y-overlay-host", never, { "rendererService": { "alias": "rendererService"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+export {};
 //# sourceMappingURL=a11y-overlay-host.component.d.ts.map

package/dist/app/panels/a11y/a11y-overlay-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-overlay-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-overlay-host.component.ts"],"names":[],"mappings":";AASA,qBAyCa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAKzB;IAEH,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAUxB;yCArBQ,wBAAwB;2CAAxB,wBAAwB;CAsBpC"}
+{"version":3,"file":"a11y-overlay-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-overlay-host.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBAyDa,wBAAwB;IACnC,QAAQ,CAAC,eAAe,4DAA0C;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAa;IAExC,SAAS,CAAC,QAAQ,CAAC,MAAM,gDActB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAKzB;IAEH,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAUxB;;yCAxCQ,wBAAwB;2CAAxB,wBAAwB;CA2DpC"}

package/dist/app/panels/a11y/a11y-overlay-host.component.js

@@ -1,37 +1,72 @@
-import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, signal, } from '@angular/core';
 import { A11yKeyboardService } from './a11y-keyboard.service.js';
-import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
-function A11yOverlayHostComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 1)(1, "span", 3);
+function A11yOverlayHostComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 3)(1, "span", 4);
     i0.ɵɵtext(2);
     i0.ɵɵdomElementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const b_r1 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", b_r1.top - 22, "px")("left", b_r1.left - 2, "px");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.roleLabel());
+    i0.ɵɵtextInterpolate(ctx_r1.roleLabel());
 } }
-function A11yOverlayHostComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 2)(1, "span", 3);
+function A11yOverlayHostComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 5)(1, "span", 4);
     i0.ɵɵtext(2);
     i0.ɵɵdomElementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const b_r1 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", b_r1.top + b_r1.height + 4, "px")("left", b_r1.left + b_r1.width + 2, "px");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.tabLabel());
+    i0.ɵɵtextInterpolate(ctx_r1.tabLabel());
+} }
+function A11yOverlayHostComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "div", 0);
+    i0.ɵɵconditionalCreate(1, A11yOverlayHostComponent_Conditional_0_Conditional_1_Template, 3, 5, "div", 1);
+    i0.ɵɵconditionalCreate(2, A11yOverlayHostComponent_Conditional_0_Conditional_2_Template, 3, 5, "div", 2);
+} if (rf & 2) {
+    const b_r1 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", b_r1.top, "px")("left", b_r1.left, "px")("width", b_r1.width, "px")("height", b_r1.height, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.roleLabel() ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.tabLabel() ? 2 : -1);
 } }
 export class A11yOverlayHostComponent {
-    rendererService = inject(PrismRendererService);
+    rendererService = input.required(...(ngDevMode ? [{ debugName: "rendererService" }] : []));
     keyboardService = inject(A11yKeyboardService);
+    elementRef = inject((ElementRef));
+    layoutTick = signal(0, ...(ngDevMode ? [{ debugName: "layoutTick" }] : []));
+    bounds = computed(() => {
+        const el = this.rendererService().renderedElement();
+        this.layoutTick();
+        if (!el)
+            return null;
+        const parent = this.elementRef.nativeElement.parentElement;
+        if (!parent)
+            return null;
+        const elRect = el.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+        return {
+            top: elRect.top - parentRect.top,
+            left: elRect.left - parentRect.left,
+            width: elRect.width,
+            height: elRect.height,
+        };
+    }, ...(ngDevMode ? [{ debugName: "bounds" }] : []));
     roleLabel = computed(() => {
-        const el = this.rendererService.renderedElement();
+        const el = this.rendererService().renderedElement();
         if (!el)
             return null;
         const role = el.getAttribute('role') ?? implicitRole(el);
         return role ? `role="${role}"` : null;
     }, ...(ngDevMode ? [{ debugName: "roleLabel" }] : []));
     tabLabel = computed(() => {
-        const el = this.rendererService.renderedElement();
+        const el = this.rendererService().renderedElement();
         if (!el)
             return null;
         const doc = el.ownerDocument;
@@ -40,34 +75,64 @@ export class A11yOverlayHostComponent {
             return null;
         return `Tab ${items[0].index}`;
     }, ...(ngDevMode ? [{ debugName: "tabLabel" }] : []));
+    constructor() {
+        effect((onCleanup) => {
+            const el = this.rendererService().renderedElement();
+            if (!el)
+                return;
+            const ro = new ResizeObserver(() => this.layoutTick.update((v) => v + 1));
+            ro.observe(el);
+            const parent = this.elementRef.nativeElement.parentElement;
+            if (parent)
+                ro.observe(parent);
+            onCleanup(() => ro.disconnect());
+        });
+        effect(() => {
+            this.rendererService().inputValues();
+            this.rendererService().activeVariantIndex();
+            this.layoutTick.update((v) => v + 1);
+        });
+    }
     static ɵfac = function A11yOverlayHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yOverlayHostComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yOverlayHostComponent, selectors: [["prism-a11y-overlay-host"]], decls: 3, vars: 2, consts: [[1, "a11y-mark", "outline", 2, "inset", "0"], [1, "a11y-mark", 2, "top", "-22px", "left", "-2px"], [1, "a11y-mark", "kb", 2, "bottom", "-24px", "right", "-2px"], [1, "tag"]], template: function A11yOverlayHostComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElement(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, A11yOverlayHostComponent_Conditional_1_Template, 3, 1, "div", 1);
-            i0.ɵɵconditionalCreate(2, A11yOverlayHostComponent_Conditional_2_Template, 3, 1, "div", 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yOverlayHostComponent, selectors: [["prism-a11y-overlay-host"]], inputs: { rendererService: [1, "rendererService"] }, decls: 1, vars: 1, consts: [[1, "a11y-mark", "outline"], [1, "a11y-mark", 3, "top", "left"], [1, "a11y-mark", "kb", 2, "transform", "translateX(-100%)", 3, "top", "left"], [1, "a11y-mark"], [1, "tag"], [1, "a11y-mark", "kb", 2, "transform", "translateX(-100%)"]], template: function A11yOverlayHostComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, A11yOverlayHostComponent_Conditional_0_Template, 3, 10);
         } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.roleLabel() ? 1 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.tabLabel() ? 2 : -1);
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.bounds()) ? 0 : -1, tmp_0_0);
         } }, styles: ["[_nghost-%COMP%] { display: contents; }\n    .a11y-mark[_ngcontent-%COMP%] {\n      position: absolute;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .outline[_ngcontent-%COMP%] {\n      border: 2px solid rgba(59, 130, 246, 0.95);\n      border-radius: 4px;\n      background: rgba(59, 130, 246, 0.08);\n    }\n    .tag[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(17, 24, 39, 0.92);\n      color: var(--prism-text-light, #fff);\n      font: 11px/1.4 var(--font-mono);\n      white-space: nowrap;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n    }\n    .kb[_ngcontent-%COMP%]   .tag[_ngcontent-%COMP%] { background: rgba(5, 150, 105, 0.95); }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yOverlayHostComponent, [{
         type: Component,
         args: [{ selector: 'prism-a11y-overlay-host', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="a11y-mark outline" style="inset: 0"></div>
+    @if (bounds(); as b) {
+    <div
+      class="a11y-mark outline"
+      [style.top.px]="b.top"
+      [style.left.px]="b.left"
+      [style.width.px]="b.width"
+      [style.height.px]="b.height"
+    ></div>
     @if (roleLabel()) {
-    <div class="a11y-mark" style="top: -22px; left: -2px">
+    <div
+      class="a11y-mark"
+      [style.top.px]="b.top - 22"
+      [style.left.px]="b.left - 2"
+    >
       <span class="tag">{{ roleLabel() }}</span>
     </div>
     } @if (tabLabel()) {
-    <div class="a11y-mark kb" style="bottom: -24px; right: -2px">
+    <div
+      class="a11y-mark kb"
+      [style.top.px]="b.top + b.height + 4"
+      [style.left.px]="b.left + b.width + 2"
+      style="transform: translateX(-100%)"
+    >
       <span class="tag">{{ tabLabel() }}</span>
     </div>
-    }
+    } }
   `, styles: ["\n    :host { display: contents; }\n    .a11y-mark {\n      position: absolute;\n      pointer-events: none;\n      z-index: 1;\n    }\n    .outline {\n      border: 2px solid rgba(59, 130, 246, 0.95);\n      border-radius: 4px;\n      background: rgba(59, 130, 246, 0.08);\n    }\n    .tag {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 4px;\n      background: rgba(17, 24, 39, 0.92);\n      color: var(--prism-text-light, #fff);\n      font: 11px/1.4 var(--font-mono);\n      white-space: nowrap;\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);\n    }\n    .kb .tag { background: rgba(5, 150, 105, 0.95); }\n  "] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 51 }); })();
+    }], () => [], { rendererService: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererService", required: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 78 }); })();
 function implicitRole(el) {
     const tag = el.tagName.toLowerCase();
     if (tag === 'button')

package/dist/app/panels/a11y/a11y-sr-overlay.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-sr-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr-overlay.component.ts"],"names":[],"mappings":";AAaA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,qBAiEa,sBAAsB;IACjC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAkC;IAC9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiC;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,4DAAiC;IAC1D,SAAS,CAAC,QAAQ,CAAC,WAAW,kDAAiB;IAE/C,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,KAAK,CAAuB;;IA0BpC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,aAAa;yCA1CV,sBAAsB;2CAAtB,sBAAsB;CA0ElC"}
+{"version":3,"file":"a11y-sr-overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr-overlay.component.ts"],"names":[],"mappings":";AAaA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,qBAiEa,sBAAsB;IACjC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAkC;IAC9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiC;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmC;IAE9D,SAAS,CAAC,QAAQ,CAAC,MAAM,4DAAiC;IAC1D,SAAS,CAAC,QAAQ,CAAC,WAAW,kDAAiB;IAE/C,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,KAAK,CAAuB;;IA0BpC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAOjC,OAAO,CAAC,aAAa;yCA5CV,sBAAsB;2CAAtB,sBAAsB;CA8ElC"}

package/dist/app/panels/a11y/a11y-sr-overlay.component.js

@@ -23,7 +23,7 @@ function A11ySrOverlayComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf &
     i0.ɵɵstyleProp("left", badge_r1.x - 10, "px")("top", badge_r1.y - 10, "px");
     i0.ɵɵclassProp("prism-a11y-sr-ov__badge--active", badge_r1.isActive);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(badge_r1.index);
+    i0.ɵɵtextInterpolate1(" ", badge_r1.index, " ");
 } }
 function A11ySrOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, A11ySrOverlayComponent_Conditional_0_For_1_Template, 3, 8, null, null, _forTrack0);
@@ -67,7 +67,7 @@ export class A11ySrOverlayComponent {
         this.badges.update((bs) => bs.map((b, i) => ({ ...b, isActive: i === idx })));
     }
     computeBadges(root) {
-        const canvas = this.elementRef.nativeElement.closest('.prism-renderer__canvas');
+        const canvas = this.elementRef.nativeElement.closest('.prism-canvas-stage');
         if (!canvas)
             return;
         const doc = root.ownerDocument;
@@ -103,25 +103,25 @@ export class A11ySrOverlayComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrOverlayComponent, [{
         type: Component,
         args: [{ selector: 'prism-a11y-sr-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (showOverlay()) {
-      @for (badge of badges(); track badge.index) {
-        @if (badge.isActive) {
-          <div
-            class="prism-a11y-sr-ov__focus"
-            [style.left.px]="badge.x"
-            [style.top.px]="badge.y"
-            [style.width.px]="badge.width"
-            [style.height.px]="badge.height"
-          ></div>
-        }
-        <div
-          class="prism-a11y-sr-ov__badge"
-          [class.prism-a11y-sr-ov__badge--active]="badge.isActive"
-          [style.left.px]="badge.x - 10"
-          [style.top.px]="badge.y - 10"
-        >{{ badge.index }}</div>
-      }
+    @if (showOverlay()) { @for (badge of badges(); track badge.index) { @if
+    (badge.isActive) {
+    <div
+      class="prism-a11y-sr-ov__focus"
+      [style.left.px]="badge.x"
+      [style.top.px]="badge.y"
+      [style.width.px]="badge.width"
+      [style.height.px]="badge.height"
+    ></div>
     }
+    <div
+      class="prism-a11y-sr-ov__badge"
+      [class.prism-a11y-sr-ov__badge--active]="badge.isActive"
+      [style.left.px]="badge.x - 10"
+      [style.top.px]="badge.y - 10"
+    >
+      {{ badge.index }}
+    </div>
+    } }
   `, styles: ["\n    :host {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 100;\n      overflow: hidden;\n    }\n\n    .prism-a11y-sr-ov__focus {\n      position: absolute;\n      border: 2px solid var(--prism-primary);\n      border-radius: 4px;\n      background: rgba(167, 139, 250, 0.08);\n      box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);\n    }\n\n    .prism-a11y-sr-ov__badge {\n      position: absolute;\n      height: 18px;\n      padding: 0 5px;\n      min-width: 18px;\n      background: var(--prism-primary);\n      color: white;\n      border-radius: 9px;\n      font-size: 9px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 0 1.5px white, 0 2px 4px rgba(0, 0, 0, 0.25);\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-sr-ov__badge--active {\n      background: var(--prism-primary-from);\n      box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(124, 58, 237, 0.4);\n    }\n  "] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrOverlayComponent, { className: "A11ySrOverlayComponent", filePath: "app/panels/a11y/a11y-sr-overlay.component.ts", lineNumber: 88 }); })();

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

@@ -1,7 +1,7 @@
-import { EnvironmentInjector, OnDestroy, type Type } from '@angular/core';
+import { EnvironmentInjector, type Type } from '@angular/core';
 import { PrismPanelService } from '../../services/prism-panel.service.js';
 import * as i0 from "@angular/core";
-export declare class PrismPanelHostComponent implements OnDestroy {
+export declare class PrismPanelHostComponent {
     private readonly pluginService;
     private readonly nav;
     protected readonly panelService: PrismPanelService;
@@ -22,10 +22,8 @@ export declare class PrismPanelHostComponent implements OnDestroy {
         activeComponent: import("../../../index.js").RuntimeComponent | null;
     }>;
     private readonly lazyCache;
-    private readonly injectorCache;
     protected readonly activeInjector: import("@angular/core").Signal<EnvironmentInjector>;
     constructor();
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismPanelHostComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismPanelHostComponent, "prism-panel-host", never, {}, {}, never, never, true, never>;
 }

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,EAKL,mBAAmB,EAEnB,SAAS,EAET,KAAK,IAAI,EAEV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;;AAK1E,qBA+Ka,uBAAwB,YAAW,SAAS;IACvD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,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,gFAQzB;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB,+DAAsC;IAC1E,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,SAAS,CAAC,QAAQ,CAAC,cAAc,sDAgB9B;;IA8DH,WAAW,IAAI,IAAI;yCApJR,uBAAuB;2CAAvB,uBAAuB;CAuJnC"}
+{"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,EAEV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;;AAK1E,qBA+Ka,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,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,gFAQzB;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB,+DAAsC;IAC1E,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAE9D,SAAS,CAAC,QAAQ,CAAC,cAAc,sDAE/B;;yCAvES,uBAAuB;2CAAvB,uBAAuB;CA6HnC"}

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

@@ -1,5 +1,5 @@
 import { NgComponentOutlet } from '@angular/common';
-import { Component, computed, createEnvironmentInjector, effect, EnvironmentInjector, inject, signal, ChangeDetectionStrategy, } from '@angular/core';
+import { Component, computed, effect, EnvironmentInjector, inject, signal, ChangeDetectionStrategy, } from '@angular/core';
 import { PrismIconComponent } from '../../icons/prism-icon.component.js';
 import { BUILTIN_PANELS } from '../builtin-panels.js';
 import { A11yAuditService } from '../a11y/a11y-audit.service.js';
@@ -115,22 +115,8 @@ export class PrismPanelHostComponent {
         activeComponent: this.nav.activeComponent(),
     }), ...(ngDevMode ? [{ debugName: "panelInputs" }] : []));
     lazyCache = new Map();
-    injectorCache = new Map();
-    activeInjector = computed(() => {
-        const panelId = this.panelService.activePanelId();
-        const panel = this.allPanels().find((p) => p.id === panelId);
-        if (!panel?.providers?.length)
-            return this.envInjector;
-        if (!this.injectorCache.has(panel.id)) {
-            this.injectorCache.set(panel.id, createEnvironmentInjector(panel.providers, this.envInjector, `PrismPanel[${panel.id}]`));
-        }
-        return this.injectorCache.get(panel.id);
-    }, ...(ngDevMode ? [{ debugName: "activeInjector" }] : []));
+    activeInjector = computed(() => this.panelService.activePanelInjector() ?? this.envInjector, ...(ngDevMode ? [{ debugName: "activeInjector" }] : []));
     constructor() {
-        effect(() => {
-            const injector = this.activeInjector();
-            this.panelService.activePanelInjector.set(injector === this.envInjector ? null : injector);
-        });
         effect(() => {
             const element = this.rendererService.renderedElement();
             const comp = this.nav.activeComponent();
@@ -171,9 +157,6 @@ export class PrismPanelHostComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this.injectorCache.forEach((injector) => injector.destroy());
-    }
     static ɵfac = function PrismPanelHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPanelHostComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPanelHostComponent, selectors: [["prism-panel-host"]], decls: 6, vars: 2, consts: [[1, "panel"], ["role", "tablist", 1, "panel-tabs"], ["role", "tab", 1, "p-tab", 3, "p-tab--active"], ["role", "tabpanel", 1, "panel-body", 3, "id"], ["role", "tab", 1, "p-tab", 3, "click"], [3, "name", "size"], [1, "p-tab-badge", 3, "ok", "warn", "danger"], [1, "p-tab-badge"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismPanelHostComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "nav", 1);
@@ -243,4 +226,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    :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: 198 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 196 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"provide-prism.d.ts","sourceRoot":"","sources":["../../src/app/provide-prism.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEpF,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAItE,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACzC;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,eAAe,EACzB,MAAM,CAAC,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,oBAAoB,CAiBtB"}
+{"version":3,"file":"provide-prism.d.ts","sourceRoot":"","sources":["../../src/app/provide-prism.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEpF,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAStE,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACzC;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,eAAe,EACzB,MAAM,CAAC,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,oBAAoB,CAkBtB"}

package/dist/app/provide-prism.js

@@ -1,13 +1,15 @@
 import { makeEnvironmentProviders } from '@angular/core';
 import { provideHighlightOptions } from 'ngx-highlightjs';
 import { componentPage } from '../plugin/page-helpers.js';
-import { PRISM_CONFIG, PRISM_MANIFEST } from './tokens/prism-tokens.js';
+import { BUILTIN_PANELS } from './panels/builtin-panels.js';
+import { PRISM_BUILTIN_PANELS, PRISM_CONFIG, PRISM_MANIFEST, } from './tokens/prism-tokens.js';
 export function providePrism(manifest, config, options) {
     const mergedManifest = options?.componentPages?.length
         ? { ...manifest, pages: [...(manifest.pages ?? []), ...options.componentPages.map(o => componentPage(o))] }
         : manifest;
     return makeEnvironmentProviders([
         { provide: PRISM_MANIFEST, useValue: mergedManifest },
+        { provide: PRISM_BUILTIN_PANELS, useValue: BUILTIN_PANELS },
         ...(config ? [{ provide: PRISM_CONFIG, useValue: config }] : []),
         ...(config?.appProviders ?? []),
         provideHighlightOptions({

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;;AAGzE,qBAwHa,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,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAvNJ,sBAAsB;2CAAtB,sBAAsB;CAqOlC"}
+{"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;;AAGzE,qBAyHa,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,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAvNJ,sBAAsB;2CAAtB,sBAAsB;CAqOlC"}

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

@@ -223,7 +223,7 @@ export class PrismRendererComponent {
             i0.ɵɵstyleProp("--zoom", ctx.canvasService.zoom());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.activeOverlay() ? 9 : -1);
-        } }, dependencies: [PrismCanvasRulersComponent, 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    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_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: 12px;\n      left: 20px;\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\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      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }"], changeDetection: 0 });
+        } }, dependencies: [PrismCanvasRulersComponent, 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    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_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: 12px;\n      left: 20px;\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\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      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
@@ -253,11 +253,11 @@ 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    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\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: 12px;\n      left: 20px;\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\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      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n\n  "] }]
+  `, 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    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\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: 12px;\n      left: 20px;\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\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      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n    }\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: 155 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 156 }); })();
 function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];

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

@@ -1,9 +1,13 @@
 import { EnvironmentInjector } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class PrismPanelService {
+    private readonly envInjector;
+    private readonly pluginService;
+    private readonly builtinPanels;
+    private readonly injectorCache;
     readonly activePanelId: import("@angular/core").WritableSignal<string>;
     readonly activeViewId: import("@angular/core").WritableSignal<string>;
-    readonly activePanelInjector: import("@angular/core").WritableSignal<EnvironmentInjector | null>;
+    readonly activePanelInjector: import("@angular/core").Signal<EnvironmentInjector | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismPanelService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PrismPanelService>;
 }

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

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

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

@@ -1,9 +1,27 @@
-import { Injectable, signal } from '@angular/core';
+import { computed, createEnvironmentInjector, EnvironmentInjector, inject, Injectable, signal, } from '@angular/core';
+import { PRISM_BUILTIN_PANELS } from '../tokens/prism-tokens.js';
+import { PrismPluginService } from './prism-plugin.service.js';
 import * as i0 from "@angular/core";
 export class PrismPanelService {
+    envInjector = inject(EnvironmentInjector);
+    pluginService = inject(PrismPluginService);
+    builtinPanels = inject(PRISM_BUILTIN_PANELS);
+    injectorCache = new Map();
     activePanelId = signal('controls', ...(ngDevMode ? [{ debugName: "activePanelId" }] : []));
     activeViewId = signal('renderer', ...(ngDevMode ? [{ debugName: "activeViewId" }] : []));
-    activePanelInjector = signal(null, ...(ngDevMode ? [{ debugName: "activePanelInjector" }] : []));
+    activePanelInjector = computed(() => {
+        const panelId = this.activePanelId();
+        const allPanels = [...this.builtinPanels, ...this.pluginService.panels()];
+        const panel = allPanels.find((p) => p.id === panelId);
+        if (!panel?.providers?.length)
+            return null;
+        let injector = this.injectorCache.get(panel.id);
+        if (!injector) {
+            injector = createEnvironmentInjector(panel.providers, this.envInjector, `PrismPanel[${panel.id}]`);
+            this.injectorCache.set(panel.id, injector);
+        }
+        return injector;
+    }, ...(ngDevMode ? [{ debugName: "activePanelInjector" }] : []));
     static ɵfac = function PrismPanelService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPanelService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismPanelService, factory: PrismPanelService.ɵfac, providedIn: 'root' });
 }

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

@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
-import type { NgPrismConfig, RuntimeManifest } from '../../plugin/plugin.types.js';
+import type { NgPrismConfig, PanelDefinition, RuntimeManifest } from '../../plugin/plugin.types.js';
 export declare const PRISM_MANIFEST: InjectionToken<RuntimeManifest>;
 export declare const PRISM_CONFIG: InjectionToken<NgPrismConfig>;
 export interface PrismRendererHooks {
@@ -8,4 +8,5 @@ export interface PrismRendererHooks {
     onAfterDestroy?(selector: string): void;
 }
 export declare const PRISM_RENDERER_HOOKS: InjectionToken<PrismRendererHooks>;
+export declare const PRISM_BUILTIN_PANELS: InjectionToken<PanelDefinition[]>;
 //# sourceMappingURL=prism-tokens.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"prism-tokens.d.ts","sourceRoot":"","sources":["../../../src/app/tokens/prism-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEnF,eAAO,MAAM,cAAc,iCAAwD,CAAC;AAEpF,eAAO,MAAM,YAAY,+BAGvB,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB,oCAC+B,CAAC"}
+{"version":3,"file":"prism-tokens.d.ts","sourceRoot":"","sources":["../../../src/app/tokens/prism-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,eAAe,EAChB,MAAM,8BAA8B,CAAC;AAEtC,eAAO,MAAM,cAAc,iCAAwD,CAAC;AAEpF,eAAO,MAAM,YAAY,+BAGvB,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB,oCAC+B,CAAC;AAEjE,eAAO,MAAM,oBAAoB,mCAGhC,CAAC"}

package/dist/app/tokens/prism-tokens.js

@@ -5,3 +5,4 @@ export const PRISM_CONFIG = new InjectionToken('PRISM_CONFIG', {
     factory: () => ({}),
 });
 export const PRISM_RENDERER_HOOKS = new InjectionToken('PRISM_RENDERER_HOOKS');
+export const PRISM_BUILTIN_PANELS = new InjectionToken('PRISM_BUILTIN_PANELS', { providedIn: 'root', factory: () => [] });

package/dist/schematics/ng-add/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAIV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AA0UtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAUvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAIV,MAAM,4BAA4B,CAAC;AAMpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AA+VtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAUvD"}

package/dist/schematics/ng-add/index.js

@@ -1,5 +1,5 @@
 import { chain, SchematicsException, } from '@angular-devkit/schematics';
-import { parse as parseJsonc, modify as modifyJsonc, applyEdits as applyJsoncEdits } from 'jsonc-parser';
+import { parse as parseJsonc, modify as modifyJsonc, applyEdits as applyJsoncEdits, } from 'jsonc-parser';
 function readWorkspace(tree) {
     const buffer = tree.read('angular.json');
     if (!buffer) {
@@ -20,17 +20,34 @@ function addPrismAppProject(options) {
         const prismProjectName = `${options.project}-prism`;
         const prismRoot = `projects/${prismProjectName}`;
         const prismSrc = `${prismRoot}/src`;
-        const mainTs = [
-            "import { bootstrapApplication } from '@angular/platform-browser';",
-            "import { PrismShellComponent, providePrism } from '@ng-prism/core';",
-            "import { PRISM_RUNTIME_MANIFEST } from './prism-manifest';",
-            "import config from 'ng-prism.config';",
-            '',
-            'bootstrapApplication(PrismShellComponent, {',
-            '  providers: [providePrism(PRISM_RUNTIME_MANIFEST, config)],',
-            '});',
-            '',
-        ].join('\n');
+        const zoneless = options.zoneless === true;
+        const mainTs = zoneless
+            ? [
+                "import { provideZonelessChangeDetection } from '@angular/core';",
+                "import { bootstrapApplication } from '@angular/platform-browser';",
+                "import { PrismShellComponent, providePrism } from '@ng-prism/core';",
+                "import { PRISM_RUNTIME_MANIFEST } from './prism-manifest';",
+                "import config from 'ng-prism.config';",
+                '',
+                'bootstrapApplication(PrismShellComponent, {',
+                '  providers: [',
+                '    provideZonelessChangeDetection(),',
+                '    providePrism(PRISM_RUNTIME_MANIFEST, config),',
+                '  ],',
+                '});',
+                '',
+            ].join('\n')
+            : [
+                "import { bootstrapApplication } from '@angular/platform-browser';",
+                "import { PrismShellComponent, providePrism } from '@ng-prism/core';",
+                "import { PRISM_RUNTIME_MANIFEST } from './prism-manifest';",
+                "import config from 'ng-prism.config';",
+                '',
+                'bootstrapApplication(PrismShellComponent, {',
+                '  providers: [providePrism(PRISM_RUNTIME_MANIFEST, config)],',
+                '});',
+                '',
+            ].join('\n');
         if (!tree.exists(`${prismSrc}/main.ts`)) {
             tree.create(`${prismSrc}/main.ts`, mainTs);
         }
@@ -83,8 +100,10 @@ function addPrismAppProject(options) {
                             index: `${prismSrc}/index.html`,
                             browser: `${prismSrc}/main.ts`,
                             tsConfig: `${prismRoot}/tsconfig.app.json`,
-                            styles: ['node_modules/highlight.js/styles/base16/solarized-dark.min.css'],
-                            polyfills: ['zone.js'],
+                            styles: [
+                                'node_modules/highlight.js/styles/base16/solarized-dark.min.css',
+                            ],
+                            polyfills: zoneless ? [] : ['zone.js'],
                             allowedCommonJsDependencies: ['highlight.js'],
                             preserveSymlinks: true,
                         },

package/dist/schematics/ng-add/schema.d.ts

@@ -1,5 +1,6 @@
 export interface NgAddSchemaOptions {
     project: string;
     port?: number;
+    zoneless?: boolean;
 }
 //# sourceMappingURL=schema.d.ts.map

package/dist/schematics/ng-add/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "21.8.2",
+  "version": "21.9.1",
   "description": "ng-prism — the Angular-native Storybook alternative. Lightweight component showcase with @Showcase decorator, no story files needed.",
   "keywords": [
     "ng-prism",

package/schematics/ng-add/schema.json

@@ -13,6 +13,11 @@
       "type": "number",
       "default": 4400,
       "description": "Dev server port for the Prism styleguide"
+    },
+    "zoneless": {
+      "type": "boolean",
+      "default": false,
+      "description": "Use zoneless change detection (no zone.js polyfill)"
     }
   },
   "required": ["project"],