@ng-prism/core 21.8.1 → 21.9.0

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,21 @@
 import * as i0 from "@angular/core";
+interface Bounds {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
 export declare class A11yOverlayHostComponent {
     private readonly rendererService;
     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>;
 }
+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":";AAYA,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,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,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,28 +1,64 @@
-import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, 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);
     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();
         if (!el)
@@ -40,34 +76,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"]], 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 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yOverlayHostComponent, { className: "A11yOverlayHostComponent", filePath: "app/panels/a11y/a11y-overlay-host.component.ts", lineNumber: 77 }); })();
 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/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/builder/watcher/prism-watcher.js

@@ -39,7 +39,7 @@ export function createChangeHandler(options) {
     function handleChange(filename) {
         if (disposed)
             return;
-        if (filename && !/\.(ts|scss|css|svg)$/.test(filename))
+        if (filename && !/\.ts$/.test(filename))
             return;
         if (timer)
             clearTimeout(timer);

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;AAyUtD,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,
                         },
@@ -106,6 +125,7 @@ function addPrismAppProject(options) {
                             buildTarget: `${prismProjectName}:build:development`,
                             port,
                             hmr: true,
+                            liveReload: 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.1",
+  "version": "21.9.0",
   "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"],