@ng-prism/core 22.2.0 → 22.3.0

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":"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"}
+{"version":3,"file":"a11y-tree.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAEhD,qBAOa,qBAAqB;IAC9B,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;;IAe3C,SAAS,CAAC,QAAQ,CAAC,YAAY;;;SAS5B;IAEH,SAAS,CAAC,cAAc,IAAI,IAAI;yCAhCvB,qBAAqB;2CAArB,qBAAqB;CAqCjC;AAED,qBAQa,iBAAiB;IAC1B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAOpB;yCAXM,iBAAiB;2CAAjB,iBAAiB;CAY7B"}

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

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal, untracked, } from '@angular/core';
-import { A11yTreeService } from './a11y-tree.service.js';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal, untracked } from '@angular/core';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import { A11yTreeService } from './a11y-tree.service.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.key;
 const _forTrack1 = ($index, $item) => $item.element;
@@ -95,7 +95,7 @@ export class A11yTreeNodeComponent {
             .filter(([key]) => key !== 'hidden')
             .map(([key, value]) => ({
             key,
-            label: value === true ? key : `${key}=${value}`,
+            label: value === true ? key : `${key}=${value}`
         }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stateEntries" }] : /* istanbul ignore next */ []));
@@ -133,40 +133,13 @@ export class A11yTreeNodeComponent {
             i0.ɵɵrepeater(ctx.stateEntries());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.expanded() && ctx.node().children.length ? 9 : -1);
-        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] { display: block; }\n\n    .aria-tree-line[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 2px 0;\n      font-family: var(--%NS%font-mono);\n      font-size: 12.5px;\n      line-height: 1.8;\n      color: var(--%NS%prism-text-2);\n    }\n    .aria-tree-line--hidden[_ngcontent-%COMP%] { opacity: 0.4; }\n\n    .indent[_ngcontent-%COMP%] {\n      color: var(--%NS%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[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-size: 10px;\n      color: var(--%NS%prism-text-muted);\n      padding: 0;\n      width: 12px;\n      flex-shrink: 0;\n    }\n\n    .role[_ngcontent-%COMP%] { color: var(--%NS%prism-primary); font-weight: 600; }\n    .name[_ngcontent-%COMP%] { color: var(--%NS%prism-text); }\n    .attr[_ngcontent-%COMP%] { color: var(--%NS%prism-text-ghost); }"] });
+        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.aria-tree-line[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 2px 0;\n    font-family: var(--%NS%font-mono);\n    font-size: 12.5px;\n    line-height: 1.8;\n    color: var(--%NS%prism-text-2);\n}\n\n.aria-tree-line--hidden[_ngcontent-%COMP%] {\n    opacity: 0.4;\n}\n\n.indent[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    font-size: 12px;\n    color: var(--%NS%prism-text-ghost);\n    text-align: right;\n    white-space: pre;\n    user-select: none;\n    opacity: 0.5;\n}\n\n.tree-toggle[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 12px;\n    padding: 0;\n    font-size: 10px;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n}\n\n.role[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--%NS%prism-primary);\n}\n\n.name[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text);\n}\n\n.attr[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-ghost);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yTreeNodeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="aria-tree-line" [class.aria-tree-line--hidden]="node().hidden">
-      <span class="indent" [style.width.px]="depth() * 20">
-        @if (depth() > 0) {
-        {{ isLast() ? '└─' : '├─' }}
-        }
-      </span>
-      @if (node().children.length) {
-      <button class="tree-toggle" (click)="toggleExpanded()">
-        {{ expanded() ? '▾' : '▸' }}
-      </button>
-      }
-      <span class="role">{{ node().role }}</span>
-      @if (node().name) {
-      <span class="name">"{{ node().name }}"</span>
-      } @for (entry of stateEntries(); track entry.key) {
-      <span class="attr">[{{ entry.label }}]</span>
-      }
-    </div>
-    @if (expanded() && node().children.length) { @for (child of node().children;
-    track child.element; let last = $last) {
-    <prism-a11y-tree-node
-      [node]="child"
-      [depth]="depth() + 1"
-      [isLast]="last"
-    />
-    } }
-  `, 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  "] }]
+        args: [{ selector: 'prism-a11y-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"aria-tree-line\"\n    [class.aria-tree-line--hidden]=\"node().hidden\">\n    <span\n        class=\"indent\"\n        [style.width.px]=\"depth() * 20\">\n        @if (depth() > 0) {\n            {{ isLast() ? '\u2514\u2500' : '\u251C\u2500' }}\n        }\n    </span>\n    @if (node().children.length) {\n        <button\n            class=\"tree-toggle\"\n            (click)=\"toggleExpanded()\">\n            {{ expanded() ? '\u25BE' : '\u25B8' }}\n        </button>\n    }\n    <span class=\"role\">{{ node().role }}</span>\n    @if (node().name) {\n        <span class=\"name\">\"{{ node().name }}\"</span>\n    }\n    @for (entry of stateEntries(); track entry.key) {\n        <span class=\"attr\">[{{ entry.label }}]</span>\n    }\n</div>\n@if (expanded() && node().children.length) {\n    @for (child of node().children; track child.element; let last = $last) {\n        <prism-a11y-tree-node\n            [node]=\"child\"\n            [depth]=\"depth() + 1\"\n            [isLast]=\"last\" />\n    }\n}\n", styles: [":host {\n    display: block;\n}\n\n.aria-tree-line {\n    display: flex;\n    gap: 8px;\n    align-items: center;\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\n.aria-tree-line--hidden {\n    opacity: 0.4;\n}\n\n.indent {\n    flex-shrink: 0;\n    font-size: 12px;\n    color: var(--prism-text-ghost);\n    text-align: right;\n    white-space: pre;\n    user-select: none;\n    opacity: 0.5;\n}\n\n.tree-toggle {\n    flex-shrink: 0;\n    width: 12px;\n    padding: 0;\n    font-size: 10px;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: none;\n    border: none;\n}\n\n.role {\n    font-weight: 600;\n    color: var(--prism-primary);\n}\n\n.name {\n    color: var(--prism-text);\n}\n\n.attr {\n    color: var(--prism-text-ghost);\n}\n"] }]
     }], () => [], { 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeNodeComponent, { className: "A11yTreeNodeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 13 }); })();
 export class A11yTreeComponent {
     rendererService = inject(PrismRendererService);
     treeService = inject(A11yTreeService);
@@ -183,20 +156,10 @@ export class A11yTreeComponent {
             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);
-        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n\n    .aria-tree[_ngcontent-%COMP%] {\n      padding: 14px 20px;\n    }\n\n    .tree-empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--%NS%prism-text-muted); font-size: 13px;\n    }"] });
+        } }, dependencies: [A11yTreeNodeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.aria-tree[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n}\n\n.tree-empty[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yTreeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-tree', standalone: true, imports: [A11yTreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (!rendererService.renderedElement()) {
-    <div class="tree-empty">
-      Select a component to inspect the accessibility tree.
-    </div>
-    } @else if (tree()) {
-    <div class="aria-tree">
-      <prism-a11y-tree-node [node]="tree()!" [depth]="0" [isLast]="true" />
-    </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  "] }]
+        args: [{ selector: 'prism-a11y-tree', standalone: true, imports: [A11yTreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!rendererService.renderedElement()) {\n    <div class=\"tree-empty\"> Select a component to inspect the accessibility tree. </div>\n} @else if (tree()) {\n    <div class=\"aria-tree\">\n        <prism-a11y-tree-node\n            [node]=\"tree()!\"\n            [depth]=\"0\"\n            [isLast]=\"true\" />\n    </div>\n}\n", styles: [":host {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.aria-tree {\n    padding: 14px 20px;\n}\n\n.tree-empty {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeComponent, { className: "A11yTreeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 154 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yTreeComponent, { className: "A11yTreeComponent", filePath: "app/panels/a11y/a11y-tree.component.ts", lineNumber: 60 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-tree.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.service.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAQhD,qBACa,eAAe;IAC1B,SAAS,CACP,IAAI,EAAE,OAAO,EACb,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GACvC,QAAQ;yCAJA,eAAe;;CAO3B"}
+{"version":3,"file":"a11y-tree.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAMhD,qBACa,eAAe;IACxB,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,QAAQ;yCADnE,eAAe;;CAI3B"}

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

@@ -1,10 +1,8 @@
 import { Injectable } from '@angular/core';
-import { computeAccessibleName, extractStates, getRole, isHidden, } from './a11y-dom-utils.js';
+import { computeAccessibleName, extractStates, getRole, isHidden } from './a11y-dom-utils.js';
 import * as i0 from "@angular/core";
 const PRESENTATIONAL_ROLES = new Set(['none', 'presentation']);
-const STRUCTURAL_TAGS = new Set([
-    'SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'TITLE', 'HEAD',
-]);
+const STRUCTURAL_TAGS = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'TITLE', 'HEAD']);
 export class A11yTreeService {
     buildTree(root, getById) {
         return buildNode(root, getById);
@@ -42,6 +40,6 @@ function buildNode(element, getById) {
         states,
         children,
         hidden,
-        element,
+        element
     };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"a11y-violations.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-violations.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAqB3D,qBA0Ka,uBAAuB;IAClC,SAAS,CAAC,QAAQ,CAAC,YAAY,mBAA4B;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,mFAE5B;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,8DAU1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM;yCAnBlD,uBAAuB;2CAAvB,uBAAuB;CAsBnC"}
+{"version":3,"file":"a11y-violations.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-violations.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAqB3D,qBAQa,uBAAuB;IAChC,SAAS,CAAC,QAAQ,CAAC,YAAY,mBAA4B;IAE3D,SAAS,CAAC,QAAQ,CAAC,WAAW,mFAAmD;IAEjF,SAAS,CAAC,QAAQ,CAAC,UAAU,8DAQ1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM;yCAfpD,uBAAuB;2CAAvB,uBAAuB;CAkBnC"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { A11yAuditService } from './a11y-audit.service.js';
 import { A11yScoreComponent } from './a11y-score.component.js';
 import * as i0 from "@angular/core";
@@ -116,13 +116,13 @@ const IMPACT_ORDER = {
     critical: 0,
     serious: 1,
     moderate: 2,
-    minor: 3,
+    minor: 3
 };
 const IMPACT_COLOR = {
     critical: 'var(--prism-danger)',
     serious: '#fb923c',
     moderate: 'var(--prism-warn)',
-    minor: 'var(--prism-text-muted)',
+    minor: 'var(--prism-text-muted)'
 };
 function sevColor(impact) {
     return IMPACT_COLOR[impact ?? ''] ?? 'var(--prism-success)';
@@ -135,8 +135,7 @@ export class A11yViolationsComponent {
         const results = this.auditService.results();
         if (!results)
             return [];
-        const violations = [...results.violations].sort((a, b) => (IMPACT_ORDER[a.impact ?? ''] ?? 4) -
-            (IMPACT_ORDER[b.impact ?? ''] ?? 4));
+        const violations = [...results.violations].sort((a, b) => (IMPACT_ORDER[a.impact ?? ''] ?? 4) - (IMPACT_ORDER[b.impact ?? ''] ?? 4));
         const passes = results.passes.slice(0, 4);
         return [...violations, ...passes];
     }, /* @ts-ignore */
@@ -149,60 +148,10 @@ export class A11yViolationsComponent {
             i0.ɵɵconditionalCreate(0, A11yViolationsComponent_Conditional_0_Template, 2, 1, "div", 0)(1, A11yViolationsComponent_Conditional_1_Template, 15, 7, "div", 1)(2, A11yViolationsComponent_Conditional_2_Template, 2, 0, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.auditService.error() ? 0 : ctx.auditService.results() || ctx.auditService.running() ? 1 : 2);
-        } }, dependencies: [A11yScoreComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; overflow: auto; }\n\n    .a11y-body[_ngcontent-%COMP%] {\n      padding: 18px 20px;\n      display: grid;\n      grid-template-columns: 220px 1fr;\n      gap: 20px;\n      min-height: 0;\n    }\n    .a11y-body--loading[_ngcontent-%COMP%] { opacity: 0.55; transition: opacity var(--%NS%dur-base); }\n\n    .score-wrap[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 10px;\n      padding: 14px;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 10px;\n      align-self: start;\n    }\n\n    .score-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--%NS%prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n    .score-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      margin-top: 2px;\n      font-size: 11px;\n      color: var(--%NS%prism-text-muted);\n    }\n    .score-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n    .score-meta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 6px; height: 6px; border-radius: 50%; display: block; }\n\n    .viol-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .viol[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px;\n      border-left: 3px solid var(--%NS%sev-color, var(--%NS%prism-primary));\n      transition: border-color var(--%NS%dur-fast);\n    }\n    .viol[_ngcontent-%COMP%]:hover { border-color: var(--%NS%prism-border-strong); }\n\n    .viol-sev[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 9.5px;\n      font-weight: 700;\n      padding: 2px 6px;\n      border-radius: var(--%NS%radius-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: color-mix(in srgb, var(--%NS%sev-color) 15%, transparent);\n      color: var(--%NS%sev-color);\n    }\n\n    .viol-text[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--%NS%prism-text);\n      min-width: 0;\n    }\n    .viol-text[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      display: block;\n      font-weight: 600;\n      margin-bottom: 1px;\n    }\n    .viol-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      font-size: 11.5px;\n    }\n\n    .viol-rule[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 11px;\n      color: var(--%NS%prism-text-ghost);\n      padding: 2px 7px;\n      background: var(--%NS%prism-input-bg);\n      border-radius: var(--%NS%radius-xs);\n      white-space: nowrap;\n    }\n\n    .a11y-status[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--%NS%prism-text-muted);\n      font-size: 13px;\n    }\n    .a11y-status--error[_ngcontent-%COMP%] { color: var(--%NS%prism-danger); }\n\n    @media (max-width: 1100px) {\n      .a11y-body[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    }"] });
+        } }, dependencies: [A11yScoreComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n}\n\n.a11y-body[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 220px 1fr;\n    gap: 20px;\n    min-height: 0;\n    padding: 18px 20px;\n}\n\n.a11y-body--loading[_ngcontent-%COMP%] {\n    opacity: 0.55;\n    transition: opacity var(--%NS%dur-base);\n}\n\n.score-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n    align-self: start;\n    padding: 14px;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 10px;\n}\n\n.score-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.score-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.score-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n}\n\n.score-meta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n}\n\n.viol-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    min-width: 0;\n}\n\n.viol[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    gap: 12px;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-left: 3px solid var(--%NS%sev-color, var(--%NS%prism-primary));\n    border-radius: 8px;\n    transition: border-color var(--%NS%dur-fast);\n}\n\n.viol[_ngcontent-%COMP%]:hover {\n    border-color: var(--%NS%prism-border-strong);\n}\n\n.viol-sev[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    font-family: var(--%NS%font-mono);\n    font-size: 9.5px;\n    font-weight: 700;\n    color: var(--%NS%sev-color);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    background: color-mix(in srgb, var(--%NS%sev-color) 15%, transparent);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.viol-text[_ngcontent-%COMP%] {\n    min-width: 0;\n    font-size: 12.5px;\n    color: var(--%NS%prism-text);\n}\n\n.viol-text[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 1px;\n    font-weight: 600;\n}\n\n.viol-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.viol-rule[_ngcontent-%COMP%] {\n    padding: 2px 7px;\n    font-family: var(--%NS%font-mono);\n    font-size: 11px;\n    color: var(--%NS%prism-text-ghost);\n    white-space: nowrap;\n    background: var(--%NS%prism-input-bg);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.a11y-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.a11y-status--error[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-danger);\n}\n\n@media (width <= 1100px) {\n    .a11y-body[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yViolationsComponent, [{
         type: Component,
-        args: [{ selector: 'prism-a11y-violations', standalone: true, imports: [A11yScoreComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (auditService.error()) {
-    <div class="a11y-status a11y-status--error">
-      Audit failed: {{ auditService.error() }}
-    </div>
-    } @else if (auditService.results() || auditService.running()) {
-    <div class="a11y-body" [class.a11y-body--loading]="auditService.running()">
-      <div class="score-wrap">
-        <prism-a11y-score [score]="scoreResult()?.score ?? 0" />
-        <div class="score-label">axe-core audit</div>
-        <div class="score-meta">
-          @if (scoreResult()?.critical) {
-          <span
-            ><i style="background: var(--prism-danger)"></i
-            >{{ scoreResult()!.critical }} critical</span
-          >
-          } @if (scoreResult()?.moderate) {
-          <span
-            ><i style="background: var(--prism-warn)"></i
-            >{{ scoreResult()!.moderate }} moderate</span
-          >
-          }
-          <span
-            ><i style="background: var(--prism-success)"></i
-            >{{ scoreResult()?.passes ?? 0 }} pass</span
-          >
-        </div>
-      </div>
-      <div class="viol-list">
-        @for (item of allResults(); track item.id + item.impact) {
-        <div class="viol" [style.--sev-color]="sevColor(item.impact)">
-          <span class="viol-sev">{{ item.impact ?? 'pass' }}</span>
-          <div class="viol-text">
-            <b>{{ item.description }}</b>
-            @if (item.help) {
-            <span>{{ item.help }}</span>
-            }
-          </div>
-          <span class="viol-rule">{{ item.id }}</span>
-        </div>
-        } @empty { @if (!auditService.running()) {
-        <div class="a11y-status">No results yet.</div>
-        } }
-      </div>
-    </div>
-    } @else {
-    <div class="a11y-status">
-      Select a component to run accessibility audit.
-    </div>
-    }
-  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; overflow: auto; }\n\n    .a11y-body {\n      padding: 18px 20px;\n      display: grid;\n      grid-template-columns: 220px 1fr;\n      gap: 20px;\n      min-height: 0;\n    }\n    .a11y-body--loading { opacity: 0.55; transition: opacity var(--dur-base); }\n\n    .score-wrap {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 10px;\n      padding: 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 10px;\n      align-self: start;\n    }\n\n    .score-label {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n    .score-meta {\n      display: flex;\n      gap: 12px;\n      margin-top: 2px;\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n    .score-meta span { display: flex; align-items: center; gap: 4px; }\n    .score-meta i { width: 6px; height: 6px; border-radius: 50%; display: block; }\n\n    .viol-list {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .viol {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 12px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n      border-left: 3px solid var(--sev-color, var(--prism-primary));\n      transition: border-color var(--dur-fast);\n    }\n    .viol:hover { border-color: var(--prism-border-strong); }\n\n    .viol-sev {\n      font-family: var(--font-mono);\n      font-size: 9.5px;\n      font-weight: 700;\n      padding: 2px 6px;\n      border-radius: var(--radius-xs);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: color-mix(in srgb, var(--sev-color) 15%, transparent);\n      color: var(--sev-color);\n    }\n\n    .viol-text {\n      font-size: 12.5px;\n      color: var(--prism-text);\n      min-width: 0;\n    }\n    .viol-text b {\n      display: block;\n      font-weight: 600;\n      margin-bottom: 1px;\n    }\n    .viol-text span {\n      color: var(--prism-text-muted);\n      font-size: 11.5px;\n    }\n\n    .viol-rule {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      padding: 2px 7px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-xs);\n      white-space: nowrap;\n    }\n\n    .a11y-status {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100px;\n      color: var(--prism-text-muted);\n      font-size: 13px;\n    }\n    .a11y-status--error { color: var(--prism-danger); }\n\n    @media (max-width: 1100px) {\n      .a11y-body { grid-template-columns: 1fr; }\n    }\n  "] }]
+        args: [{ selector: 'prism-a11y-violations', standalone: true, imports: [A11yScoreComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (auditService.error()) {\n    <div class=\"a11y-status a11y-status--error\"> Audit failed: {{ auditService.error() }} </div>\n} @else if (auditService.results() || auditService.running()) {\n    <div\n        class=\"a11y-body\"\n        [class.a11y-body--loading]=\"auditService.running()\">\n        <div class=\"score-wrap\">\n            <prism-a11y-score [score]=\"scoreResult()?.score ?? 0\" />\n            <div class=\"score-label\">axe-core audit</div>\n            <div class=\"score-meta\">\n                @if (scoreResult()?.critical) {\n                    <span><i style=\"background: var(--prism-danger)\"></i>{{ scoreResult()!.critical }} critical</span>\n                }\n                @if (scoreResult()?.moderate) {\n                    <span><i style=\"background: var(--prism-warn)\"></i>{{ scoreResult()!.moderate }} moderate</span>\n                }\n                <span><i style=\"background: var(--prism-success)\"></i>{{ scoreResult()?.passes ?? 0 }} pass</span>\n            </div>\n        </div>\n        <div class=\"viol-list\">\n            @for (item of allResults(); track item.id + item.impact) {\n                <div\n                    class=\"viol\"\n                    [style.--sev-color]=\"sevColor(item.impact)\">\n                    <span class=\"viol-sev\">{{ item.impact ?? 'pass' }}</span>\n                    <div class=\"viol-text\">\n                        <b>{{ item.description }}</b>\n                        @if (item.help) {\n                            <span>{{ item.help }}</span>\n                        }\n                    </div>\n                    <span class=\"viol-rule\">{{ item.id }}</span>\n                </div>\n            } @empty {\n                @if (!auditService.running()) {\n                    <div class=\"a11y-status\">No results yet.</div>\n                }\n            }\n        </div>\n    </div>\n} @else {\n    <div class=\"a11y-status\"> Select a component to run accessibility audit. </div>\n}\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n}\n\n.a11y-body {\n    display: grid;\n    grid-template-columns: 220px 1fr;\n    gap: 20px;\n    min-height: 0;\n    padding: 18px 20px;\n}\n\n.a11y-body--loading {\n    opacity: 0.55;\n    transition: opacity var(--dur-base);\n}\n\n.score-wrap {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n    align-self: start;\n    padding: 14px;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 10px;\n}\n\n.score-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.score-meta {\n    display: flex;\n    gap: 12px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--prism-text-muted);\n}\n\n.score-meta span {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n}\n\n.score-meta i {\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n}\n\n.viol-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    min-width: 0;\n}\n\n.viol {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    gap: 12px;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-left: 3px solid var(--sev-color, var(--prism-primary));\n    border-radius: 8px;\n    transition: border-color var(--dur-fast);\n}\n\n.viol:hover {\n    border-color: var(--prism-border-strong);\n}\n\n.viol-sev {\n    padding: 2px 6px;\n    font-family: var(--font-mono);\n    font-size: 9.5px;\n    font-weight: 700;\n    color: var(--sev-color);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    background: color-mix(in srgb, var(--sev-color) 15%, transparent);\n    border-radius: var(--radius-xs);\n}\n\n.viol-text {\n    min-width: 0;\n    font-size: 12.5px;\n    color: var(--prism-text);\n}\n\n.viol-text b {\n    display: block;\n    margin-bottom: 1px;\n    font-weight: 600;\n}\n\n.viol-text span {\n    font-size: 11.5px;\n    color: var(--prism-text-muted);\n}\n\n.viol-rule {\n    padding: 2px 7px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--prism-text-ghost);\n    white-space: nowrap;\n    background: var(--prism-input-bg);\n    border-radius: var(--radius-xs);\n}\n\n.a11y-status {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100px;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n\n.a11y-status--error {\n    color: var(--prism-danger);\n}\n\n@media (width <= 1100px) {\n    .a11y-body {\n        grid-template-columns: 1fr;\n    }\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yViolationsComponent, { className: "A11yViolationsComponent", filePath: "app/panels/a11y/a11y-violations.component.ts", lineNumber: 198 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yViolationsComponent, { className: "A11yViolationsComponent", filePath: "app/panels/a11y/a11y-violations.component.ts", lineNumber: 31 }); })();

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

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

package/dist/app/panels/builtin-header-widgets.js

@@ -4,6 +4,6 @@ export const BUILTIN_HEADER_WIDGETS = [
         id: 'a11y-total',
         component: A11yHeaderBadgeComponent,
         placement: 'end',
-        order: -20,
-    },
+        order: -20
+    }
 ];

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

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

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

@@ -15,6 +15,6 @@ export const BUILTIN_NAVIGATION_DECORATIONS = [
             if (meta.summary.variant === 'ok')
                 return null;
             return { variant: meta.summary.variant, label: meta.summary.label };
-        },
-    },
+        }
+    }
 ];

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

@@ -1 +1 @@
-{"version":3,"file":"builtin-panels.d.ts","sourceRoot":"","sources":["../../../src/app/panels/builtin-panels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAMpE,eAAO,MAAM,cAAc,EAAE,eAAe,EAK3C,CAAC"}
+{"version":3,"file":"builtin-panels.d.ts","sourceRoot":"","sources":["../../../src/app/panels/builtin-panels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAMpE,eAAO,MAAM,cAAc,EAAE,eAAe,EAA0G,CAAC"}

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

@@ -1,10 +1,5 @@
 import { OVERVIEW_PANEL } from '../overview/overview-panel.js';
+import { A11Y_CORE_PANEL } from './a11y/a11y-core.plugin.js';
 import { CONTROLS_PLUGIN } from './controls/controls-plugin.js';
 import { EVENTS_PLUGIN } from './events/events-plugin.js';
-import { A11Y_CORE_PANEL } from './a11y/a11y-core.plugin.js';
-export const BUILTIN_PANELS = [
-    OVERVIEW_PANEL,
-    ...(CONTROLS_PLUGIN.panels ?? []),
-    ...(EVENTS_PLUGIN.panels ?? []),
-    A11Y_CORE_PANEL,
-];
+export const BUILTIN_PANELS = [OVERVIEW_PANEL, ...(CONTROLS_PLUGIN.panels ?? []), ...(EVENTS_PLUGIN.panels ?? []), A11Y_CORE_PANEL];

package/dist/app/panels/controls/controls-plugin.js

@@ -7,7 +7,7 @@ export const CONTROLS_PLUGIN = {
             label: 'Controls',
             icon: 'sliders-horizontal',
             component: PrismControlsPanelComponent,
-            position: 'bottom',
-        },
-    ],
+            position: 'bottom'
+        }
+    ]
 };

package/dist/app/panels/controls/non-editable-input-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"non-editable-input-types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/non-editable-input-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAoBjE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAIhE"}
+{"version":3,"file":"non-editable-input-types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/non-editable-input-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAcjE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAKhE"}

package/dist/app/panels/controls/non-editable-input-types.js

@@ -6,11 +6,7 @@
  * the JsonControl — which would otherwise crash on `undefined`/non-serializable
  * defaults and presents a misleading editor to the developer anyway.
  */
-const NON_EDITABLE_TYPE_NAMES = [
-    'TemplateRef',
-    'ElementRef',
-    'ViewContainerRef',
-];
+const NON_EDITABLE_TYPE_NAMES = ['TemplateRef', 'ElementRef', 'ViewContainerRef'];
 const NON_EDITABLE_TYPE_PATTERN = new RegExp(`\\b(?:${NON_EDITABLE_TYPE_NAMES.join('|')})\\b`);
 export function isNonEditableInputType(input) {
     const raw = input.rawType;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,qBA2Ma,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAOtE,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO;IAIlD,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCA1B7B,2BAA2B;2CAA3B,2BAA2B;CA6BvC"}
+{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAMtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAItE,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO;IAIlD,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAvB/B,2BAA2B;2CAA3B,2BAA2B;CA0BvC"}

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

@@ -1,5 +1,5 @@
 import { NgComponentOutlet } from '@angular/common';
-import { Component, inject, input, ChangeDetectionStrategy, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { BooleanControlComponent } from '../../controls/boolean-control.component.js';
 import { JsonControlComponent } from '../../controls/json-control.component.js';
 import { NumberControlComponent } from '../../controls/number-control.component.js';
@@ -160,8 +160,7 @@ export class PrismControlsPanelComponent {
     activeComponent = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
     getCustomControl(input) {
-        return (this.pluginService.controls().find((ctrl) => ctrl.matchType(input)) ??
-            null);
+        return this.pluginService.controls().find((ctrl) => ctrl.matchType(input)) ?? null;
     }
     isNonEditable(input) {
         return isNonEditableInputType(input);
@@ -181,99 +180,10 @@ export class PrismControlsPanelComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.navigationService.activeComponent()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [NgComponentOutlet,
-            BooleanControlComponent,
-            StringControlComponent,
-            NumberControlComponent,
-            UnionControlComponent,
-            JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-toolbar[_ngcontent-%COMP%] {\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: var(--%NS%prism-bg-elevated);\n      border-bottom: 1px solid var(--%NS%prism-border);\n    }\n    .ctl-dirty-info[_ngcontent-%COMP%] {\n      font-size: 11.5px;\n      font-family: var(--%NS%font-mono);\n      color: var(--%NS%prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--%NS%prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--%NS%prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--%NS%font-sans);\n      color: var(--%NS%prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--%NS%prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--%NS%dur-fast), background var(--%NS%dur-fast), border-color var(--%NS%dur-fast);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text);\n      border-color: color-mix(in srgb, var(--%NS%prism-primary) 40%, var(--%NS%prism-border));\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n    }\n    .ctl-row[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 3%, transparent);\n    }\n\n    .ctl-label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--%NS%prism-text);\n      font-weight: 500;\n    }\n    .ctl-type[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 10.5px;\n      color: var(--%NS%prism-text-ghost);\n    }\n    .ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-not-editable[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 11.5px;\n      color: var(--%NS%prism-text-ghost);\n      font-style: italic;\n    }\n\n    .ctl-empty[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }"] });
+        } }, dependencies: [NgComponentOutlet, BooleanControlComponent, StringControlComponent, NumberControlComponent, UnionControlComponent, JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow-y: auto;\n}\n\n.ctl-toolbar[_ngcontent-%COMP%] {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 20px;\n    background: var(--%NS%prism-bg-elevated);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.ctl-dirty-info[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    font-family: var(--%NS%font-mono);\n    font-size: 11.5px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.ctl-dirty-dot[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: var(--%NS%prism-primary);\n    border-radius: 50%;\n    box-shadow: 0 0 6px color-mix(in srgb, var(--%NS%prism-primary) 60%, transparent);\n}\n\n.ctl-reset-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 5px;\n    align-items: center;\n    height: 24px;\n    padding: 0 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 5px;\n    transition:\n        color var(--%NS%dur-fast),\n        background var(--%NS%dur-fast),\n        border-color var(--%NS%dur-fast);\n}\n\n.ctl-reset-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-primary) 40%, var(--%NS%prism-border));\n}\n\n.ctl-reset-btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.ctl-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 180px 1fr;\n    gap: 12px;\n    align-items: center;\n    min-height: 40px;\n    padding: 8px 20px;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.ctl-row[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 3%, transparent);\n}\n\n.ctl-label[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.ctl-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--%NS%prism-text);\n}\n\n.ctl-type[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 10.5px;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n}\n\n.ctl-input[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-width: 0;\n}\n\n.ctl-not-editable[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 11.5px;\n    font-style: italic;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.ctl-empty[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--%NS%prism-text-ghost);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismControlsPanelComponent, [{
         type: Component,
-        args: [{ selector: 'prism-controls-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                    NgComponentOutlet,
-                    BooleanControlComponent,
-                    StringControlComponent,
-                    NumberControlComponent,
-                    UnionControlComponent,
-                    JsonControlComponent,
-                ], template: `
-    @if (navigationService.activeComponent(); as comp) {
-    <div class="ctl-panel">
-      @if (rendererService.dirtyInputCount(); as dirtyCount) {
-      <div class="ctl-toolbar">
-        <span class="ctl-dirty-info">
-          <span class="ctl-dirty-dot" aria-hidden="true"></span>
-          {{ dirtyCount }} {{ dirtyCount === 1 ? 'input' : 'inputs' }} modified
-        </span>
-        <button
-          type="button"
-          class="ctl-reset-btn"
-          (click)="rendererService.resetInputsToVariantDefaults()"
-          title="Reset all inputs to variant defaults"
-        >
-          <span aria-hidden="true">&#x21BB;</span> Reset
-        </button>
-      </div>
-      } @for (input of comp.meta.inputs; track input.name) {
-      <div class="ctl-row">
-        @if (getCustomControl(input); as customCtrl) {
-        <ng-container
-          [ngComponentOutlet]="customCtrl.component"
-          [ngComponentOutletInputs]="{
-            inputMeta: input,
-            rendererService: rendererService
-          }"
-        />
-        } @else {
-        <div class="ctl-label">
-          <span class="ctl-name">{{ input.name }}</span>
-          <span class="ctl-type"
-            ><b>{{ input.rawType ?? input.type }}</b></span
-          >
-        </div>
-        <div class="ctl-input">
-          @if (isNonEditable(input)) {
-          <span
-            class="ctl-not-editable"
-            title="This input type can't be edited from the controls panel"
-            >Not editable</span
-          >
-          } @else { @switch (input.type) { @case ('boolean') {
-          <prism-boolean-control
-            [value]="asBoolean(rendererService.inputValues()[input.name])"
-            (valueChange)="rendererService.updateInput(input.name, $event)"
-          />
-          } @case ('number') {
-          <prism-number-control
-            [value]="asNumber(rendererService.inputValues()[input.name])"
-            (valueChange)="rendererService.updateInput(input.name, $event)"
-          />
-          } @case ('union') {
-          <prism-union-control
-            [value]="asString(rendererService.inputValues()[input.name])"
-            [options]="input.values ?? []"
-            (valueChange)="rendererService.updateInput(input.name, $event)"
-          />
-          } @case ('string') {
-          <prism-string-control
-            [value]="asString(rendererService.inputValues()[input.name])"
-            (valueChange)="rendererService.updateInput(input.name, $event)"
-          />
-          } @default {
-          <prism-json-control
-            [value]="rendererService.inputValues()[input.name]"
-            (valueChange)="rendererService.updateInput(input.name, $event)"
-          />
-          } } }
-        </div>
-        }
-      </div>
-      } @if (comp.meta.inputs.length === 0) {
-      <p class="ctl-empty">No inputs available</p>
-      }
-    </div>
-    }
-  `, styles: ["\n    .ctl-panel {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-toolbar {\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: var(--prism-bg-elevated);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-dirty-info {\n      font-size: 11.5px;\n      font-family: var(--font-mono);\n      color: var(--prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--font-sans);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);\n    }\n    .ctl-reset-btn:hover {\n      color: var(--prism-text);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-row:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ctl-label {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type b {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-not-editable {\n      font-family: var(--font-mono);\n      font-size: 11.5px;\n      color: var(--prism-text-ghost);\n      font-style: italic;\n    }\n\n    .ctl-empty {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }\n  "] }]
+        args: [{ selector: 'prism-controls-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, BooleanControlComponent, StringControlComponent, NumberControlComponent, UnionControlComponent, JsonControlComponent], template: "@if (navigationService.activeComponent(); as comp) {\n    <div class=\"ctl-panel\">\n        @if (rendererService.dirtyInputCount(); as dirtyCount) {\n            <div class=\"ctl-toolbar\">\n                <span class=\"ctl-dirty-info\">\n                    <span\n                        class=\"ctl-dirty-dot\"\n                        aria-hidden=\"true\"></span>\n                    {{ dirtyCount }} {{ dirtyCount === 1 ? 'input' : 'inputs' }} modified\n                </span>\n                <button\n                    type=\"button\"\n                    class=\"ctl-reset-btn\"\n                    (click)=\"rendererService.resetInputsToVariantDefaults()\"\n                    title=\"Reset all inputs to variant defaults\">\n                    <span aria-hidden=\"true\">&#x21BB;</span> Reset\n                </button>\n            </div>\n        }\n        @for (input of comp.meta.inputs; track input.name) {\n            <div class=\"ctl-row\">\n                @if (getCustomControl(input); as customCtrl) {\n                    <ng-container\n                        [ngComponentOutlet]=\"customCtrl.component\"\n                        [ngComponentOutletInputs]=\"{\n                            inputMeta: input,\n                            rendererService: rendererService\n                        }\" />\n                } @else {\n                    <div class=\"ctl-label\">\n                        <span class=\"ctl-name\">{{ input.name }}</span>\n                        <span class=\"ctl-type\"\n                            ><b>{{ input.rawType ?? input.type }}</b></span\n                        >\n                    </div>\n                    <div class=\"ctl-input\">\n                        @if (isNonEditable(input)) {\n                            <span\n                                class=\"ctl-not-editable\"\n                                title=\"This input type can't be edited from the controls panel\"\n                                >Not editable</span\n                            >\n                        } @else {\n                            @switch (input.type) {\n                                @case ('boolean') {\n                                    <prism-boolean-control\n                                        [value]=\"asBoolean(rendererService.inputValues()[input.name])\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                                @case ('number') {\n                                    <prism-number-control\n                                        [value]=\"asNumber(rendererService.inputValues()[input.name])\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                                @case ('union') {\n                                    <prism-union-control\n                                        [value]=\"asString(rendererService.inputValues()[input.name])\"\n                                        [options]=\"input.values ?? []\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                                @case ('string') {\n                                    <prism-string-control\n                                        [value]=\"asString(rendererService.inputValues()[input.name])\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                                @default {\n                                    <prism-json-control\n                                        [value]=\"rendererService.inputValues()[input.name]\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                            }\n                        }\n                    </div>\n                }\n            </div>\n        }\n        @if (comp.meta.inputs.length === 0) {\n            <p class=\"ctl-empty\">No inputs available</p>\n        }\n    </div>\n}\n", styles: [".ctl-panel {\n    height: 100%;\n    overflow-y: auto;\n}\n\n.ctl-toolbar {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 20px;\n    background: var(--prism-bg-elevated);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.ctl-dirty-info {\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    font-family: var(--font-mono);\n    font-size: 11.5px;\n    color: var(--prism-text-muted);\n}\n\n.ctl-dirty-dot {\n    width: 6px;\n    height: 6px;\n    background: var(--prism-primary);\n    border-radius: 50%;\n    box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n}\n\n.ctl-reset-btn {\n    display: inline-flex;\n    gap: 5px;\n    align-items: center;\n    height: 24px;\n    padding: 0 10px;\n    font-family: var(--font-sans);\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: 5px;\n    transition:\n        color var(--dur-fast),\n        background var(--dur-fast),\n        border-color var(--dur-fast);\n}\n\n.ctl-reset-btn:hover {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n}\n\n.ctl-reset-btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.ctl-row {\n    display: grid;\n    grid-template-columns: 180px 1fr;\n    gap: 12px;\n    align-items: center;\n    min-height: 40px;\n    padding: 8px 20px;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.ctl-row:hover {\n    background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n}\n\n.ctl-label {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.ctl-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--prism-text);\n}\n\n.ctl-type {\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    color: var(--prism-text-ghost);\n}\n\n.ctl-type b {\n    font-weight: 500;\n    color: var(--prism-primary);\n}\n\n.ctl-input {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-width: 0;\n}\n\n.ctl-not-editable {\n    font-family: var(--font-mono);\n    font-size: 11.5px;\n    font-style: italic;\n    color: var(--prism-text-ghost);\n}\n\n.ctl-empty {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--prism-text-ghost);\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 226 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 22 }); })();

package/dist/app/panels/events/events-plugin.js

@@ -7,7 +7,7 @@ export const EVENTS_PLUGIN = {
             label: 'Events',
             icon: 'zap',
             component: PrismEventsPanelComponent,
-            position: 'bottom',
-        },
-    ],
+            position: 'bottom'
+        }
+    ]
 };

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

@@ -1 +1 @@
-{"version":3,"file":"prism-events-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-events-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;;AAGjF,qBA+Ea,yBAAyB;IACpC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM;IAQxC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCAbxB,yBAAyB;2CAAzB,yBAAyB;CAgBrC"}
+{"version":3,"file":"prism-events-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-events-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;;AAGjF,qBAQa,yBAAyB;IAClC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM;IASxC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCAd1B,yBAAyB;2CAAzB,yBAAyB;CAiBrC"}

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

@@ -1,4 +1,4 @@
-import { Component, inject, input, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { PrismEventLogService } from '../../services/prism-event-log.service.js';
 import { PrismJsonNodeComponent } from './prism-json-node.component.js';
 import * as i0 from "@angular/core";
@@ -42,7 +42,7 @@ export class PrismEventsPanelComponent {
         const d = new Date(ts);
         return d.toLocaleTimeString('en-US', {
             hour12: false,
-            fractionalSecondDigits: 3,
+            fractionalSecondDigits: 3
         });
     }
     padIdx(n) {
@@ -56,28 +56,10 @@ export class PrismEventsPanelComponent {
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.eventLogService.events());
-        } }, dependencies: [PrismJsonNodeComponent], styles: [".ev-panel[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .ev-body[_ngcontent-%COMP%] {\n      padding: 6px 0;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .ev[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: auto auto 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 6px 20px;\n      font-family: var(--%NS%font-mono);\n      font-size: 12px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      min-height: 32px;\n    }\n    .ev[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 3%, transparent);\n    }\n\n    .ev-time[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-ghost);\n      font-size: 11px;\n    }\n    .ev-idx[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      font-size: 11px;\n    }\n    .ev-name[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n      font-weight: 500;\n    }\n    .ev-args[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-2);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ev-empty[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-ghost);\n      font-size: 13px;\n      padding: 16px 20px;\n      margin: 0;\n    }"] });
+        } }, dependencies: [PrismJsonNodeComponent], styles: [".ev-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.ev-body[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 6px 0;\n    overflow-y: auto;\n}\n\n.ev[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: auto auto 1fr auto;\n    gap: 12px;\n    align-items: center;\n    min-height: 32px;\n    padding: 6px 20px;\n    font-family: var(--%NS%font-mono);\n    font-size: 12px;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.ev[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 3%, transparent);\n}\n\n.ev-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.ev-idx[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.ev-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n}\n\n.ev-args[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--%NS%prism-text-2);\n    white-space: nowrap;\n}\n\n.ev-empty[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--%NS%prism-text-ghost);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismEventsPanelComponent, [{
         type: Component,
-        args: [{ selector: 'prism-events-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismJsonNodeComponent], template: `
-    <div class="ev-panel">
-      <div class="ev-body">
-        @for (entry of eventLogService.events(); track entry.id; let i = $index)
-        {
-        <div class="ev">
-          <span class="ev-time">{{ formatTime(entry.timestamp) }}</span>
-          <span class="ev-idx"
-            >#{{ padIdx(eventLogService.events().length - i) }}</span
-          >
-          <span class="ev-name">{{ entry.name }}</span>
-          <span class="ev-args"><prism-json-node [value]="entry.value" /></span>
-        </div>
-        } @empty {
-        <p class="ev-empty">No events recorded</p>
-        }
-      </div>
-    </div>
-  `, styles: ["\n    .ev-panel {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .ev-body {\n      padding: 6px 0;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .ev {\n      display: grid;\n      grid-template-columns: auto auto 1fr auto;\n      align-items: center;\n      gap: 12px;\n      padding: 6px 20px;\n      font-family: var(--font-mono);\n      font-size: 12px;\n      border-bottom: 1px solid var(--prism-border);\n      min-height: 32px;\n    }\n    .ev:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ev-time {\n      color: var(--prism-text-ghost);\n      font-size: 11px;\n    }\n    .ev-idx {\n      color: var(--prism-text-muted);\n      font-size: 11px;\n    }\n    .ev-name {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n    .ev-args {\n      color: var(--prism-text-2);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ev-empty {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      padding: 16px 20px;\n      margin: 0;\n    }\n  "] }]
+        args: [{ selector: 'prism-events-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismJsonNodeComponent], template: "<div class=\"ev-panel\">\n    <div class=\"ev-body\">\n        @for (entry of eventLogService.events(); track entry.id; let i = $index) {\n            <div class=\"ev\">\n                <span class=\"ev-time\">{{ formatTime(entry.timestamp) }}</span>\n                <span class=\"ev-idx\">#{{ padIdx(eventLogService.events().length - i) }}</span>\n                <span class=\"ev-name\">{{ entry.name }}</span>\n                <span class=\"ev-args\"><prism-json-node [value]=\"entry.value\" /></span>\n            </div>\n        } @empty {\n            <p class=\"ev-empty\">No events recorded</p>\n        }\n    </div>\n</div>\n", styles: [".ev-panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.ev-body {\n    flex: 1;\n    padding: 6px 0;\n    overflow-y: auto;\n}\n\n.ev {\n    display: grid;\n    grid-template-columns: auto auto 1fr auto;\n    gap: 12px;\n    align-items: center;\n    min-height: 32px;\n    padding: 6px 20px;\n    font-family: var(--font-mono);\n    font-size: 12px;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.ev:hover {\n    background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n}\n\n.ev-time {\n    font-size: 11px;\n    color: var(--prism-text-ghost);\n}\n\n.ev-idx {\n    font-size: 11px;\n    color: var(--prism-text-muted);\n}\n\n.ev-name {\n    font-weight: 500;\n    color: var(--prism-primary);\n}\n\n.ev-args {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--prism-text-2);\n    white-space: nowrap;\n}\n\n.ev-empty {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--prism-text-ghost);\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismEventsPanelComponent, { className: "PrismEventsPanelComponent", filePath: "app/panels/events/prism-events-panel.component.ts", lineNumber: 85 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismEventsPanelComponent, { className: "PrismEventsPanelComponent", filePath: "app/panels/events/prism-events-panel.component.ts", lineNumber: 14 }); })();