@ng-prism/core 21.7.1 → 21.8.0

package/README.md

@@ -1,9 +1,9 @@
 # ng-prism
 
-Lightweight, Angular-native component showcase tool. Annotate components with `@Showcase` — no separate story files needed.
+**ng-prism** is the Angular-native Storybook alternative. A lightweight component showcase tool that scans your library at build time and renders interactive demos — annotate components with `@Showcase`, no separate story files needed.
 
-[![Angular](https://img.shields.io/badge/Angular-19+-dd0031)](https://angular.dev)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178c6)](https://www.typescriptlang.org)
+[![Angular](https://img.shields.io/badge/Angular-21+-dd0031)](https://angular.dev)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.5+-3178c6)](https://www.typescriptlang.org)
 [![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
 
 **[Live Demo](https://dyingangel666.github.io/ng-prism/demo/)** · **[Documentation](https://dyingangel666.github.io/ng-prism/)**
@@ -150,8 +150,8 @@ Link to a `@Showcase`-decorated component for combined API docs + custom renderi
 
 ## Requirements
 
-- Angular >= 19
-- TypeScript >= 5.9
+- Angular >= 21
+- TypeScript >= 5.5
 - Components must use `input()` / `output()` signals
 
 ## License

package/dist/app/index.d.ts

@@ -1,5 +1,4 @@
-export { PRISM_MANIFEST, PRISM_CONFIG, PRISM_RENDERER_HOOKS, } from './tokens/prism-tokens.js';
-export type { PrismRendererHooks } from './tokens/prism-tokens.js';
+export { PRISM_MANIFEST, PRISM_CONFIG, } from './tokens/prism-tokens.js';
 export { PRISM_DEFAULT_THEME, PRISM_DARK_THEME, PRISM_LIGHT_THEME, PRISM_BASE_TOKENS, } from './theme/prism-default-theme.js';
 export { PrismThemeService } from './services/prism-theme.service.js';
 export type { NavigationItem } from './services/navigation-item.types.js';
@@ -11,6 +10,7 @@ export { PrismEventLogService, type EventLogEntry, } from './services/prism-even
 export { PrismPluginService } from './services/prism-plugin.service.js';
 export { PrismLayoutService } from './services/prism-layout.service.js';
 export { PrismUrlStateService } from './services/prism-url-state.service.js';
+export { PrismPersistenceService } from './services/prism-persistence.service.js';
 export { PrismShellComponent } from './shell/prism-shell.component.js';
 export { PrismPageRendererComponent } from './page-renderer/prism-page-renderer.component.js';
 export { providePrism } from './provide-prism.js';

package/dist/app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,KAAK,aAAa,GACnB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAG7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EACd,YAAY,GACb,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,KAAK,aAAa,GACnB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/app/index.js

@@ -1,5 +1,7 @@
 // Tokens
-export { PRISM_MANIFEST, PRISM_CONFIG, PRISM_RENDERER_HOOKS, } from './tokens/prism-tokens.js';
+// PRISM_RENDERER_HOOKS + PrismRendererHooks are exported from the plugin entry point
+// (src/plugin/index.ts) since they belong to the plugin API surface.
+export { PRISM_MANIFEST, PRISM_CONFIG, } from './tokens/prism-tokens.js';
 // Theme
 export { PRISM_DEFAULT_THEME, PRISM_DARK_THEME, PRISM_LIGHT_THEME, PRISM_BASE_TOKENS, } from './theme/prism-default-theme.js';
 export { PrismThemeService } from './services/prism-theme.service.js';
@@ -12,6 +14,7 @@ export { PrismEventLogService, } from './services/prism-event-log.service.js';
 export { PrismPluginService } from './services/prism-plugin.service.js';
 export { PrismLayoutService } from './services/prism-layout.service.js';
 export { PrismUrlStateService } from './services/prism-url-state.service.js';
+export { PrismPersistenceService } from './services/prism-persistence.service.js';
 // Shell (root component)
 export { PrismShellComponent } from './shell/prism-shell.component.js';
 // Page renderers

package/dist/app/panels/a11y/a11y-audit.service.d.ts

@@ -9,6 +9,8 @@ export declare class A11yAuditService {
     readonly error: import("@angular/core").WritableSignal<string | null>;
     readonly scoreResult: import("@angular/core").Signal<A11yScoreResult | null>;
     private timer;
+    private destroyed;
+    constructor();
     scheduleAudit(element: Element, config?: A11yCoreConfig, debounceMs?: number): void;
     clear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yAuditService, never>;

package/dist/app/panels/a11y/a11y-audit.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-audit.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-audit.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAEvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,UAAU,GAAG,eAAe,CAkBnE;AAED,wBAAsB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAYjG;AAED,qBACa,gBAAgB;IAC3B,QAAQ,CAAC,OAAO,4DAAmC;IACnD,QAAQ,CAAC,OAAO,kDAAiB;IACjC,QAAQ,CAAC,KAAK,wDAA+B;IAE7C,QAAQ,CAAC,WAAW,yDAGjB;IAEH,OAAO,CAAC,KAAK,CAA8C;IAE3D,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,SAAM,GAAG,IAAI;IAmBhF,KAAK,IAAI,IAAI;yCA/BF,gBAAgB;6CAAhB,gBAAgB;CAwC5B"}
+{"version":3,"file":"a11y-audit.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-audit.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAEvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,UAAU,GAAG,eAAe,CAkBnE;AAED,wBAAsB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAYjG;AAED,qBACa,gBAAgB;IAC3B,QAAQ,CAAC,OAAO,4DAAmC;IACnD,QAAQ,CAAC,OAAO,kDAAiB;IACjC,QAAQ,CAAC,KAAK,wDAA+B;IAE7C,QAAQ,CAAC,WAAW,yDAGjB;IAEH,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,SAAS,CAAS;;IAS1B,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,SAAM,GAAG,IAAI;IAsBhF,KAAK,IAAI,IAAI;yCA1CF,gBAAgB;6CAAhB,gBAAgB;CAmD5B"}

package/dist/app/panels/a11y/a11y-audit.service.js

@@ -1,4 +1,4 @@
-import { computed, Injectable, signal } from '@angular/core';
+import { computed, DestroyRef, inject, Injectable, signal } from '@angular/core';
 import * as i0 from "@angular/core";
 export function calculateScore(results) {
     const violations = results.violations;
@@ -38,16 +38,29 @@ export class A11yAuditService {
         return r ? calculateScore(r) : null;
     }, ...(ngDevMode ? [{ debugName: "scoreResult" }] : []));
     timer = null;
+    destroyed = false;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this.destroyed = true;
+            this.clear();
+        });
+    }
     scheduleAudit(element, config, debounceMs = 500) {
+        if (this.destroyed)
+            return;
         if (this.timer)
             clearTimeout(this.timer);
         this.running.set(true);
         this.error.set(null);
         this.timer = setTimeout(() => {
             runCoreAudit(element, config).then((result) => {
+                if (this.destroyed)
+                    return;
                 this.results.set(result);
                 this.running.set(false);
             }, (err) => {
+                if (this.destroyed)
+                    return;
                 this.error.set(err instanceof Error ? err.message : String(err));
                 this.running.set(false);
             });
@@ -68,4 +81,4 @@ export class A11yAuditService {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yAuditService, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
-    }], null, null); })();
+    }], () => [], null); })();

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

@@ -3,10 +3,9 @@ import * as i0 from "@angular/core";
 export declare class A11yKeyboardComponent {
     protected readonly rendererService: PrismRendererService;
     private readonly keyboardService;
-    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
     protected readonly items: import("@angular/core").Signal<import("./a11y.types.js").FocusableElement[]>;
     protected typeAttr(el: Element): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yKeyboardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<A11yKeyboardComponent, "prism-a11y-keyboard", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yKeyboardComponent, "prism-a11y-keyboard", never, {}, {}, never, never, true, never>;
 }
 //# sourceMappingURL=a11y-keyboard.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAwFa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,KAAK,+EAQrB;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM;yCAhB5B,qBAAqB;2CAArB,qBAAqB;CAoBjC"}
+{"version":3,"file":"a11y-keyboard.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-keyboard.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAwFa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA+B;IAE/D,SAAS,CAAC,QAAQ,CAAC,KAAK,+EAQrB;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM;yCAd5B,qBAAqB;2CAArB,qBAAqB;CAkBjC"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
 import { A11yKeyboardService } from './a11y-keyboard.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
@@ -54,7 +54,6 @@ function A11yKeyboardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 export class A11yKeyboardComponent {
     rendererService = inject(PrismRendererService);
     keyboardService = inject(A11yKeyboardService);
-    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
     items = computed(() => {
         const root = this.rendererService.renderedElement();
         if (!root)
@@ -67,7 +66,7 @@ export class A11yKeyboardComponent {
         return type ? `[type=${type}]` : '';
     }
     static ɵfac = function A11yKeyboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yKeyboardComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yKeyboardComponent, selectors: [["prism-a11y-keyboard"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 3, vars: 1, consts: [[1, "kb-empty"], [1, "kb-body"], [1, "kb-row"], [1, "kb-keys"], [1, "kb-desc"], [1, "kb-tgt"]], template: function A11yKeyboardComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yKeyboardComponent, selectors: [["prism-a11y-keyboard"]], decls: 3, vars: 1, consts: [[1, "kb-empty"], [1, "kb-body"], [1, "kb-row"], [1, "kb-keys"], [1, "kb-desc"], [1, "kb-tgt"]], template: function A11yKeyboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, A11yKeyboardComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11yKeyboardComponent_Conditional_1_Template, 2, 0, "div", 0)(2, A11yKeyboardComponent_Conditional_2_Template, 3, 0, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : !ctx.items().length ? 1 : 2);
@@ -107,5 +106,5 @@ export class A11yKeyboardComponent {
     </div>
     }
   `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .kb-empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .kb-body {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .kb-row {\n      display: grid;\n      grid-template-columns: 110px 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 9px 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .kb-keys { display: flex; gap: 4px; }\n    .kb-keys kbd {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n\n    .kb-desc {\n      font-size: 12.5px;\n      color: var(--prism-text-2);\n    }\n\n    .kb-tgt {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-primary);\n      padding: 2px 7px;\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border-radius: var(--radius-xs);\n    }\n  "] }]
-    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 99 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yKeyboardComponent, { className: "A11yKeyboardComponent", filePath: "app/panels/a11y/a11y-keyboard.component.ts", lineNumber: 98 }); })();

package/dist/app/panels/a11y/a11y-panel.component.d.ts

@@ -1,9 +1,10 @@
 import { A11yPanelStateService } from './a11y-panel-state.service.js';
+import type { RuntimeComponent } from '../../../plugin/plugin.types.js';
 import * as i0 from "@angular/core";
 export declare class A11yPanelComponent {
     private readonly auditService;
     protected readonly state: A11yPanelStateService;
-    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
+    readonly activeComponent: import("@angular/core").InputSignal<RuntimeComponent | null>;
     protected readonly disabled: import("@angular/core").Signal<boolean>;
     protected readonly violationCount: import("@angular/core").Signal<number | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yPanelComponent, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;;AAGtE,qBAgJa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAKxB;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAG9B;yCAhBQ,kBAAkB;2CAAlB,kBAAkB;CAiB9B"}
+{"version":3,"file":"a11y-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-panel.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;;AAExE,qBAgJa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,SAAS,CAAC,QAAQ,CAAC,KAAK,wBAAiC;IAEzD,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,QAAQ,0CAIxB;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAG9B;yCAfQ,kBAAkB;2CAAlB,kBAAkB;CAgB9B"}

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

@@ -25,25 +25,16 @@ function A11yPanelComponent_Conditional_13_Case_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelement(0, "prism-a11y-violations");
 } }
 function A11yPanelComponent_Conditional_13_Case_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-a11y-keyboard", 7);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("activeComponent", ctx_r0.activeComponent());
+    i0.ɵɵelement(0, "prism-a11y-keyboard");
 } }
 function A11yPanelComponent_Conditional_13_Case_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-a11y-tree", 7);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("activeComponent", ctx_r0.activeComponent());
+    i0.ɵɵelement(0, "prism-a11y-tree");
 } }
 function A11yPanelComponent_Conditional_13_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-a11y-sr", 7);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("activeComponent", ctx_r0.activeComponent());
+    i0.ɵɵelement(0, "prism-a11y-sr");
 } }
 function A11yPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, A11yPanelComponent_Conditional_13_Case_0_Template, 1, 0, "prism-a11y-violations")(1, A11yPanelComponent_Conditional_13_Case_1_Template, 1, 1, "prism-a11y-keyboard", 7)(2, A11yPanelComponent_Conditional_13_Case_2_Template, 1, 1, "prism-a11y-tree", 7)(3, A11yPanelComponent_Conditional_13_Case_3_Template, 1, 1, "prism-a11y-sr", 7);
+    i0.ɵɵconditionalCreate(0, A11yPanelComponent_Conditional_13_Case_0_Template, 1, 0, "prism-a11y-violations")(1, A11yPanelComponent_Conditional_13_Case_1_Template, 1, 0, "prism-a11y-keyboard")(2, A11yPanelComponent_Conditional_13_Case_2_Template, 1, 0, "prism-a11y-tree")(3, A11yPanelComponent_Conditional_13_Case_3_Template, 1, 0, "prism-a11y-sr");
 } if (rf & 2) {
     let tmp_1_0;
     const ctx_r0 = i0.ɵɵnextContext();
@@ -55,7 +46,7 @@ export class A11yPanelComponent {
     activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
     disabled = computed(() => {
         const comp = this.activeComponent();
-        const config = comp?.meta?.showcaseConfig?.meta?.['a11y'];
+        const config = comp?.meta.showcaseConfig.meta?.['a11y'];
         return config?.disable === true;
     }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     violationCount = computed(() => {
@@ -63,7 +54,7 @@ export class A11yPanelComponent {
         return r ? r.violations.length : null;
     }, ...(ngDevMode ? [{ debugName: "violationCount" }] : []));
     static ɵfac = function A11yPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yPanelComponent, selectors: [["prism-a11y-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 14, vars: 10, consts: [[1, "a11y-panel"], [1, "subtabs"], [1, "st-tab", 3, "click"], [1, "st-badge", 3, "st-badge--ok", "st-badge--warn"], [1, "a11y-content"], [1, "a11y-disabled"], [1, "st-badge"], [3, "activeComponent"]], template: function A11yPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yPanelComponent, selectors: [["prism-a11y-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 14, vars: 10, consts: [[1, "a11y-panel"], [1, "subtabs"], [1, "st-tab", 3, "click"], [1, "st-badge", 3, "st-badge--ok", "st-badge--warn"], [1, "a11y-content"], [1, "a11y-disabled"], [1, "st-badge"]], template: function A11yPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
             i0.ɵɵlistener("click", function A11yPanelComponent_Template_button_click_2_listener() { return ctx.state.activeTab.set("violations"); });
             i0.ɵɵtext(3, " Violations ");
@@ -157,12 +148,12 @@ export class A11yPanelComponent {
         </div>
         } @else { @switch (state.activeTab()) { @case ('violations') {
         <prism-a11y-violations /> } @case ('keyboard') {
-        <prism-a11y-keyboard [activeComponent]="activeComponent()" /> } @case
-        ('tree') { <prism-a11y-tree [activeComponent]="activeComponent()" /> }
-        @case ('sr') { <prism-a11y-sr [activeComponent]="activeComponent()" /> }
+        <prism-a11y-keyboard /> } @case
+        ('tree') { <prism-a11y-tree /> }
+        @case ('sr') { <prism-a11y-sr /> }
         } }
       </div>
     </div>
   `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .a11y-panel { display: flex; flex-direction: column; height: 100%; }\n\n    .subtabs {\n      display: flex;\n      gap: 2px;\n      padding: 10px 20px 0;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg-elevated);\n      position: sticky;\n      top: 0;\n      z-index: 2;\n    }\n\n    .st-tab {\n      padding: 7px 12px;\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n      transition: color var(--dur-fast);\n    }\n    .st-tab:hover { color: var(--prism-text-2); }\n    .st-tab--active { color: var(--prism-text); }\n    .st-tab--active::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: var(--prism-primary);\n      border-radius: 1px;\n    }\n\n    .st-badge {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n      color: var(--prism-primary);\n    }\n    .st-badge--ok {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\n    }\n    .st-badge--warn {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n\n    .a11y-content { flex: 1; overflow: auto; min-height: 0; }\n\n    .a11y-disabled {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--prism-text-muted);\n      font-size: 13px;\n    }\n  "] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 160 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yPanelComponent, { className: "A11yPanelComponent", filePath: "app/panels/a11y/a11y-panel.component.ts", lineNumber: 161 }); })();

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

@@ -3,9 +3,8 @@ import * as i0 from "@angular/core";
 export declare class A11ySrComponent {
     protected readonly rendererService: PrismRendererService;
     private readonly srService;
-    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
     protected readonly announcements: import("@angular/core").Signal<import("./a11y.types.js").SrAnnouncement[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11ySrComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<A11ySrComponent, "prism-a11y-sr", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11ySrComponent, "prism-a11y-sr", never, {}, {}, never, never, true, never>;
 }
 //# sourceMappingURL=a11y-sr.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-sr.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAkFa,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,aAAa,6EAQ7B;yCAdQ,eAAe;2CAAf,eAAe;CAe3B"}
+{"version":3,"file":"a11y-sr.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAkFa,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD,SAAS,CAAC,QAAQ,CAAC,aAAa,6EAQ7B;yCAZQ,eAAe;2CAAf,eAAe;CAa3B"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
 import { A11ySrService } from './a11y-sr.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
@@ -64,7 +64,6 @@ function A11ySrComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 export class A11ySrComponent {
     rendererService = inject(PrismRendererService);
     srService = inject(A11ySrService);
-    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
     announcements = computed(() => {
         const root = this.rendererService.renderedElement();
         if (!root)
@@ -73,7 +72,7 @@ export class A11ySrComponent {
         return this.srService.buildAnnouncementList(root, doc ? (id) => doc.getElementById(id) : undefined);
     }, ...(ngDevMode ? [{ debugName: "announcements" }] : []));
     static ɵfac = function A11ySrComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11ySrComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11ySrComponent, selectors: [["prism-a11y-sr"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 3, vars: 1, consts: [[1, "sr-empty"], [1, "sr-body"], [1, "sr-line"], [1, "sr-step"], [1, "sr-text"], [1, "sr-name"]], template: function A11ySrComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11ySrComponent, selectors: [["prism-a11y-sr"]], decls: 3, vars: 1, consts: [[1, "sr-empty"], [1, "sr-body"], [1, "sr-line"], [1, "sr-step"], [1, "sr-text"], [1, "sr-name"]], template: function A11ySrComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, A11ySrComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11ySrComponent_Conditional_1_Template, 2, 0, "div", 0)(2, A11ySrComponent_Conditional_2_Template, 3, 0, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : !ctx.announcements().length ? 1 : 2);
@@ -105,5 +104,5 @@ export class A11ySrComponent {
     </div>
     }
   `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .sr-empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    .sr-body {\n      padding: 16px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .sr-line {\n      display: grid;\n      grid-template-columns: 56px 1fr;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n    }\n\n    .sr-step {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      font-weight: 600;\n    }\n\n    .sr-text {\n      font-size: 13px;\n      color: var(--prism-text);\n      line-height: 1.5;\n    }\n\n    .sr-name {\n      color: var(--prism-primary);\n      font-weight: 600;\n      font-style: normal;\n    }\n\n    .sr-text code {\n      font-family: var(--font-mono);\n      font-size: 11.5px;\n      color: var(--prism-text-muted);\n      padding: 1px 5px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-xs);\n    }\n  "] }]
-    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber: 93 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber: 92 }); })();

package/dist/app/panels/a11y/a11y-tree.component.d.ts

@@ -6,6 +6,8 @@ export declare class A11yTreeNodeComponent {
     readonly depth: import("@angular/core").InputSignal<number>;
     readonly isLast: import("@angular/core").InputSignal<boolean>;
     protected readonly expanded: import("@angular/core").WritableSignal<boolean>;
+    private lastElement;
+    constructor();
     protected readonly stateEntries: import("@angular/core").Signal<{
         key: string;
         label: string;
@@ -17,9 +19,8 @@ export declare class A11yTreeNodeComponent {
 export declare class A11yTreeComponent {
     protected readonly rendererService: PrismRendererService;
     private readonly treeService;
-    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
     protected readonly tree: import("@angular/core").Signal<A11yNode | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<A11yTreeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<A11yTreeComponent, "prism-a11y-tree", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yTreeComponent, "prism-a11y-tree", never, {}, {}, never, never, true, never>;
 }
 //# sourceMappingURL=a11y-tree.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-tree.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAEhD,qBAyEa,qBAAqB;IAChC,QAAQ,CAAC,IAAI,gDAA8B;IAC3C,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,MAAM,+CAAgB;IAE/B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAgB;IAE3C,SAAS,CAAC,QAAQ,CAAC,YAAY;;;SAQ5B;IAEH,SAAS,CAAC,cAAc,IAAI,IAAI;yCAjBrB,qBAAqB;2CAArB,qBAAqB;CAsBjC;AAED,qBA6Ba,iBAAiB;IAC5B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAQpB;yCAdQ,iBAAiB;2CAAjB,iBAAiB;CAe7B"}
+{"version":3,"file":"a11y-tree.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAEhD,qBAyEa,qBAAqB;IAChC,QAAQ,CAAC,IAAI,gDAA8B;IAC3C,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,MAAM,+CAAgB;IAE/B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAgB;IAC3C,OAAO,CAAC,WAAW,CAAwB;;IAc3C,SAAS,CAAC,QAAQ,CAAC,YAAY;;;SAQ5B;IAEH,SAAS,CAAC,cAAc,IAAI,IAAI;yCA9BrB,qBAAqB;2CAArB,qBAAqB;CAmCjC;AAED,qBA6Ba,iBAAiB;IAC5B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAQpB;yCAZQ,iBAAiB;2CAAjB,iBAAiB;CAa7B"}

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

@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, signal, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal, untracked, } from '@angular/core';
 import { A11yTreeService } from './a11y-tree.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.key;
+const _forTrack1 = ($index, $item) => $item.element;
 function A11yTreeNodeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
@@ -48,7 +49,7 @@ function A11yTreeNodeComponent_Conditional_9_For_1_Template(rf, ctx) { if (rf &
     i0.ɵɵproperty("node", child_r4)("depth", ctx_r0.depth() + 1)("isLast", ɵ$index_23_r5 === ɵ$count_23_r6 - 1);
 } }
 function A11yTreeNodeComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, A11yTreeNodeComponent_Conditional_9_For_1_Template, 1, 3, "prism-a11y-tree-node", 7, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(0, A11yTreeNodeComponent_Conditional_9_For_1_Template, 1, 3, "prism-a11y-tree-node", 7, _forTrack1);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r0.node().children);
@@ -72,6 +73,18 @@ export class A11yTreeNodeComponent {
     depth = input(0, ...(ngDevMode ? [{ debugName: "depth" }] : []));
     isLast = input(false, ...(ngDevMode ? [{ debugName: "isLast" }] : []));
     expanded = signal(true, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    lastElement = null;
+    constructor() {
+        effect(() => {
+            const el = this.node().element;
+            untracked(() => {
+                if (this.lastElement !== el) {
+                    this.lastElement = el;
+                    this.expanded.set(true);
+                }
+            });
+        });
+    }
     stateEntries = computed(() => {
         const states = this.node().states;
         return Object.entries(states)
@@ -139,7 +152,7 @@ export class A11yTreeNodeComponent {
       }
     </div>
     @if (expanded() && node().children.length) { @for (child of node().children;
-    track $index; let last = $last) {
+    track child.element; let last = $last) {
     <prism-a11y-tree-node
       [node]="child"
       [depth]="depth() + 1"
@@ -147,12 +160,11 @@ export class A11yTreeNodeComponent {
     />
     } }
   `, styles: ["\n    :host { display: block; }\n\n    .aria-tree-line {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 2px 0;\n      font-family: var(--font-mono);\n      font-size: 12.5px;\n      line-height: 1.8;\n      color: var(--prism-text-2);\n    }\n    .aria-tree-line--hidden { opacity: 0.4; }\n\n    .indent {\n      color: var(--prism-text-ghost);\n      opacity: 0.5;\n      user-select: none;\n      flex-shrink: 0;\n      white-space: pre;\n      font-size: 12px;\n      text-align: right;\n    }\n\n    .tree-toggle {\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-size: 10px;\n      color: var(--prism-text-muted);\n      padding: 0;\n      width: 12px;\n      flex-shrink: 0;\n    }\n\n    .role { color: var(--prism-primary); font-weight: 600; }\n    .name { color: var(--prism-text); }\n    .attr { color: var(--prism-text-ghost); }\n  "] }]
-    }], null, { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeNodeComponent, { className: "A11yTreeNodeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 86 }); })();
+    }], () => [], { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeNodeComponent, { className: "A11yTreeNodeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 88 }); })();
 export class A11yTreeComponent {
     rendererService = inject(PrismRendererService);
     treeService = inject(A11yTreeService);
-    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
     tree = computed(() => {
         const root = this.rendererService.renderedElement();
         if (!root)
@@ -161,7 +173,7 @@ export class A11yTreeComponent {
         return this.treeService.buildTree(root, doc ? (id) => doc.getElementById(id) : undefined);
     }, ...(ngDevMode ? [{ debugName: "tree" }] : []));
     static ɵfac = function A11yTreeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11yTreeComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yTreeComponent, selectors: [["prism-a11y-tree"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 2, vars: 1, consts: [[1, "tree-empty"], [1, "aria-tree"], [3, "node", "depth", "isLast"]], template: function A11yTreeComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11yTreeComponent, selectors: [["prism-a11y-tree"]], decls: 2, vars: 1, consts: [[1, "tree-empty"], [1, "aria-tree"], [3, "node", "depth", "isLast"]], template: function A11yTreeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, A11yTreeComponent_Conditional_0_Template, 2, 0, "div", 0)(1, A11yTreeComponent_Conditional_1_Template, 2, 3, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 0 : ctx.tree() ? 1 : -1);
@@ -180,5 +192,5 @@ export class A11yTreeComponent {
     </div>
     }
   `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n\n    .aria-tree {\n      padding: 14px 20px;\n    }\n\n    .tree-empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n  "] }]
-    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeComponent, { className: "A11yTreeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 139 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeComponent, { className: "A11yTreeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 154 }); })();

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,qBAmHa,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;;IAuFH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCApNJ,sBAAsB;2CAAtB,sBAAsB;CAkOlC"}
+{"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"}

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

@@ -113,9 +113,12 @@ export class PrismRendererComponent {
                     return;
                 }
                 this.activeOverlay.set(null);
+                const requestedPanelId = panel.id;
                 panel.loadOverlayComponent().then((c) => {
-                    this.overlayCache.set(panel.id, c);
-                    this.activeOverlay.set(c);
+                    this.overlayCache.set(requestedPanelId, c);
+                    if (this.panelService.activePanelId() === requestedPanelId) {
+                        this.activeOverlay.set(c);
+                    }
                 });
                 return;
             }
@@ -220,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    }"], 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    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
@@ -250,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    }\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    }\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: 150 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 155 }); })();
 function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];

package/dist/app/renderer/snippet-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-generator.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/snippet-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CAC/B;AAgBD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EAClC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,gBAAgB,CAAC,EAAE,uBAAuB,GACzC,MAAM,CA2DR"}
+{"version":3,"file":"snippet-generator.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/snippet-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CAC/B;AAoBD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EAClC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,gBAAgB,CAAC,EAAE,uBAAuB,GACzC,MAAM,CA2DR"}

package/dist/app/renderer/snippet-generator.js

@@ -1,6 +1,9 @@
+function escapeAttrValue(value) {
+    return String(value).replace(/&/g, '&').replace(/"/g, '"');
+}
 function pushAttribute(attributes, name, value) {
     if (typeof value === 'string') {
-        attributes.push(`${name}="${value}"`);
+        attributes.push(`${name}="${escapeAttrValue(value)}"`);
     }
     else if (typeof value === 'boolean') {
         attributes.push(`[${name}]="true"`);
@@ -12,7 +15,7 @@ function pushAttribute(attributes, name, value) {
         attributes.push(`[${name}]="yourData"`);
     }
     else {
-        attributes.push(`[${name}]="${String(value)}"`);
+        attributes.push(`[${name}]="${escapeAttrValue(value)}"`);
     }
 }
 export function generateSnippet(selector, inputs, values, explicitKeys, content, directiveOptions) {
@@ -92,7 +95,7 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
         tag = host.selector;
         if (host.inputs) {
             for (const [k, v] of Object.entries(host.inputs)) {
-                hostAttrs.push(`${k}="${String(v)}"`);
+                hostAttrs.push(`${k}="${escapeAttrValue(v)}"`);
             }
         }
     }

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

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+export declare class PrismPersistenceService {
+    private readonly config;
+    private readonly navigationService;
+    private readonly rendererService;
+    private readonly a11yPanelState;
+    private readonly a11yPerspective;
+    private readonly injector;
+    private suppressSync;
+    private writeTimer;
+    private lastSerialized;
+    init(): void;
+    private restoreFromStorage;
+    private setupSyncEffect;
+    private writeDebounced;
+    private serialize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismPersistenceService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PrismPersistenceService>;
+}
+//# sourceMappingURL=prism-persistence.service.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-persistence.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-persistence.service.ts"],"names":[],"mappings":";AAqBA,qBACa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAiE;IACxF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAkC;IAClE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAE7C,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAA8C;IAChE,OAAO,CAAC,cAAc,CAAuB;IAE7C,IAAI,IAAI,IAAI;IAOZ,OAAO,CAAC,kBAAkB;IA6C1B,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,SAAS;yCA7FN,uBAAuB;6CAAvB,uBAAuB;CAwHnC"}