@ng-prism/plugin-perf 22.5.0 → 22.7.0-beta.0

package/dist/memory/memory-section.component.js

@@ -1,44 +1,40 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { PrismBadgeComponent, PrismMetricCardComponent } from '@ng-prism/core';
 import * as i0 from "@angular/core";
 function MemorySectionComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
+    i0.ɵɵelementStart(0, "div", 0)(1, "span");
     i0.ɵɵtext(2, "Memory API not available");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(3, "div", 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "performance.memory is Chrome-only (non-standard)");
-    i0.ɵɵdomElementEnd()();
+    i0.ɵɵelementEnd()();
 } }
-function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 9);
-    i0.ɵɵtext(1, "watch");
-    i0.ɵɵdomElementEnd();
-} }
-function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 10)(1, "div", 12)(2, "div", 5)(3, "span", 6);
-    i0.ɵɵtext(4, "Heap Comparison");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(5, "div", 16)(6, "span", 17);
-    i0.ɵɵtext(7, "before");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(8, "div", 18);
-    i0.ɵɵdomElement(9, "div", 19);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(10, "span", 20);
-    i0.ɵɵtext(11);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(12, "span", 17);
-    i0.ɵɵtext(13, "after create");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(14, "div", 18);
-    i0.ɵɵdomElement(15, "div", 21);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(16, "span", 22);
-    i0.ɵɵtext(17);
-    i0.ɵɵdomElementEnd()()()();
+function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "span", 7);
+    i0.ɵɵtext(2, "Heap comparison");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 10)(4, "span", 11);
+    i0.ɵɵtext(5, "before");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 12);
+    i0.ɵɵelement(7, "div", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 14);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 11);
+    i0.ɵɵtext(11, "after create");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 12);
+    i0.ɵɵelement(13, "div", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 14);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const svc_r1 = i0.ɵɵnextContext(2);
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(9);
+    i0.ɵɵadvance(7);
     i0.ɵɵstyleProp("width", ctx_r1.barPercent(svc_r1.beforeCreate()?.bytes), "%");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes), " MB");
@@ -47,96 +43,50 @@ function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_30_Templ
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r1.formatMb(svc_r1.afterCreate()?.bytes), " MB");
 } }
-function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 13);
-    i0.ɵɵdomElement(1, "span", 23);
-    i0.ɵɵtext(2, " No significant leak detected ");
-    i0.ɵɵdomElementEnd();
+function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-badge", 8);
 } }
-function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 14);
-    i0.ɵɵdomElement(1, "span", 23);
-    i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
+function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-badge", 9);
 } if (rf & 2) {
     const svc_r1 = i0.ɵɵnextContext(2);
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Possible leak \u2014 +", ctx_r1.formatMb(svc_r1.residual()), " MB not reclaimed ");
+    i0.ɵɵproperty("label", "Possible leak: +" + ctx_r1.formatMb(svc_r1.residual()) + " MB not reclaimed");
 } }
 function MemorySectionComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 3)(1, "div", 4)(2, "div", 5)(3, "span", 6);
-    i0.ɵɵtext(4, "Before Create");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(5, "div", 7);
-    i0.ɵɵtext(6);
-    i0.ɵɵdomElementStart(7, "span");
-    i0.ɵɵtext(8, "MB");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(9, "div", 8);
-    i0.ɵɵtext(10, "baseline heap");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(11, "div", 4)(12, "div", 5)(13, "span", 6);
-    i0.ɵɵtext(14, "After Create");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵconditionalCreate(15, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_15_Template, 2, 0, "span", 9);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(16, "div", 7);
-    i0.ɵɵtext(17);
-    i0.ɵɵdomElementStart(18, "span");
-    i0.ɵɵtext(19, "MB");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(20, "div", 8);
-    i0.ɵɵtext(21);
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(22, "div", 4)(23, "div", 5)(24, "span", 6);
-    i0.ɵɵtext(25, "After Destroy");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵdomElementStart(26, "div", 7);
-    i0.ɵɵtext(27);
-    i0.ɵɵdomElementStart(28, "span");
-    i0.ɵɵtext(29, "MB");
-    i0.ɵɵdomElementEnd()()()();
-    i0.ɵɵconditionalCreate(30, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_30_Template, 18, 6, "div", 10);
-    i0.ɵɵdomElementStart(31, "div", 11)(32, "div", 12)(33, "div", 5)(34, "span", 6);
-    i0.ɵɵtext(35, "Leak Analysis");
-    i0.ɵɵdomElementEnd()();
-    i0.ɵɵconditionalCreate(36, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_36_Template, 3, 0, "div", 13)(37, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_37_Template, 3, 1, "div", 14);
-    i0.ɵɵdomElementStart(38, "div", 15);
-    i0.ɵɵtext(39, "\u24D8 performance.memory is Chrome-only (non-standard). Not available in other browsers.");
-    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "prism-metric-card", 2)(2, "prism-metric-card", 3)(3, "prism-metric-card", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_4_Template, 16, 6, "div", 5);
+    i0.ɵɵelementStart(5, "div", 6)(6, "span", 7);
+    i0.ɵɵtext(7, "Leak analysis");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_8_Template, 1, 0, "prism-badge", 8)(9, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_9_Template, 1, 1, "prism-badge", 9);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const svc_r1 = i0.ɵɵnextContext();
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes));
-    i0.ɵɵadvance(9);
-    i0.ɵɵconditional(svc_r1.delta() !== null && svc_r1.delta() > 0 ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("color", ctx_r1.afterCreateColor());
+    i0.ɵɵproperty("value", ctx_r1.formatMb(svc_r1.beforeCreate()?.bytes));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatMb(svc_r1.afterCreate()?.bytes));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.deltaText());
-    i0.ɵɵadvance(5);
-    i0.ɵɵstyleProp("color", ctx_r1.destroyColor());
+    i0.ɵɵproperty("value", ctx_r1.formatMb(svc_r1.afterCreate()?.bytes))("tone", ctx_r1.afterCreateTone())("statusLabel", ctx_r1.afterCreateTone() ? "Watch" : null)("title", ctx_r1.deltaText() || "Heap right after the component was created");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatMb(svc_r1.afterDestroy()?.bytes));
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(svc_r1.beforeCreate() && svc_r1.afterCreate() ? 30 : -1);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(svc_r1.leakStatus() === "ok" ? 36 : svc_r1.leakStatus() === "warn" ? 37 : -1);
+    i0.ɵɵproperty("value", ctx_r1.formatMb(svc_r1.afterDestroy()?.bytes))("tone", ctx_r1.destroyTone())("statusLabel", ctx_r1.destroyTone() === "danger" ? "Leak" : ctx_r1.destroyTone() === "success" ? "OK" : null)("title", ctx_r1.residualText() || "Heap after the component was destroyed");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(svc_r1.beforeCreate() && svc_r1.afterCreate() ? 4 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(svc_r1.leakStatus() === "ok" ? 8 : svc_r1.leakStatus() === "warn" ? 9 : -1);
 } }
 function MemorySectionComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
+    i0.ɵɵelementStart(0, "div", 0)(1, "span");
     i0.ɵɵtext(2, "No memory snapshots yet");
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(3, "div", 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Click Snapshot to capture heap data");
-    i0.ɵɵdomElementEnd()();
+    i0.ɵɵelementEnd()();
 } }
 function MemorySectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Conditional_0_Template, 5, 0, "div", 0)(1, MemorySectionComponent_Conditional_0_Conditional_1_Template, 40, 11)(2, MemorySectionComponent_Conditional_0_Conditional_2_Template, 5, 0, "div", 0);
+    i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Conditional_0_Template, 5, 0, "div", 0)(1, MemorySectionComponent_Conditional_0_Conditional_1_Template, 10, 11)(2, MemorySectionComponent_Conditional_0_Conditional_2_Template, 5, 0, "div", 0);
 } if (rf & 2) {
     const svc_r1 = ctx;
     i0.ɵɵconditional(!svc_r1.available() ? 0 : svc_r1.snapshots().length > 0 ? 1 : 2);
@@ -164,25 +114,25 @@ export class MemorySectionComponent {
         return `+${this.formatMb(r)} MB residual`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "residualText" }] : /* istanbul ignore next */ []));
-    afterCreateColor = computed(() => {
+    /** A heap that grew on create is worth a look, not a verdict. */
+    afterCreateTone = computed(() => {
         const d = this.memoryService().delta();
-        if (d !== null && d > 0)
-            return 'var(--prism-warn)';
-        return '';
+        return d !== null && d > 0 ? 'warn' : null;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "afterCreateColor" }] : /* istanbul ignore next */ []));
-    destroyColor = computed(() => {
+    ...(ngDevMode ? [{ debugName: "afterCreateTone" }] : /* istanbul ignore next */ []));
+    /** Whether the heap came back after destroy: the leak verdict. */
+    destroyTone = computed(() => {
         const svc = this.memoryService();
         if (!svc.afterDestroy())
-            return 'var(--prism-text-ghost)';
+            return null;
         const status = svc.leakStatus();
         if (status === 'ok')
-            return 'var(--prism-success)';
+            return 'success';
         if (status === 'warn')
-            return 'var(--prism-danger)';
-        return '';
+            return 'danger';
+        return null;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "destroyColor" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "destroyTone" }] : /* istanbul ignore next */ []));
     barPercent(bytes) {
         if (!bytes || this.maxBytes() === 0)
             return 0;
@@ -194,15 +144,15 @@ export class MemorySectionComponent {
         return (bytes / (1024 * 1024)).toFixed(1);
     }
     static ɵfac = function MemorySectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MemorySectionComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MemorySectionComponent, selectors: [["perf-memory-section"]], inputs: { memoryService: [1, "memoryService"] }, decls: 1, vars: 1, consts: [[1, "perf-empty"], [1, "perf-empty-text"], [1, "perf-empty-hint"], [1, "perf-body"], [1, "perf-card"], [1, "perf-card-head"], [1, "perf-card-name"], [1, "perf-card-val"], [1, "perf-card-sub"], [1, "perf-card-status", "warn"], [1, "perf-detail"], [1, "perf-detail", "perf-detail--last"], [1, "perf-card", "perf-card--block"], [1, "perf-leak-badge", "perf-leak-badge--ok"], [1, "perf-leak-badge", "perf-leak-badge--warn"], [1, "perf-disclaimer"], [1, "perf-bars"], [1, "perf-bar-label"], [1, "perf-bar-track"], [1, "perf-bar-fill"], [1, "perf-bar-val"], [1, "perf-bar-fill", "perf-bar-fill--warn"], [1, "perf-bar-val", "perf-bar-val--warn"], [1, "perf-leak-dot"]], template: function MemorySectionComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MemorySectionComponent, selectors: [["perf-memory-section"]], inputs: { memoryService: [1, "memoryService"] }, decls: 1, vars: 1, consts: [[1, "perf-empty"], [1, "perf-grid"], ["label", "Before create", "unit", "MB", "title", "Baseline heap", 3, "value"], ["label", "After create", "unit", "MB", 3, "value", "tone", "statusLabel", "title"], ["label", "After destroy", "unit", "MB", 3, "value", "tone", "statusLabel", "title"], [1, "perf-block"], ["title", "performance.memory is Chrome-only (non-standard) and not available in other browsers", 1, "perf-block"], [1, "perf-block__label"], ["dot", "", "tone", "success", "label", "No significant leak detected"], ["dot", "", "tone", "danger", 3, "label"], [1, "perf-bars"], [1, "perf-bar-label"], [1, "perf-bar-track"], [1, "perf-bar-fill"], [1, "perf-bar-val"]], template: function MemorySectionComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Template, 3, 1);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.memoryService()) ? 0 : -1, tmp_0_0);
-        } }, styles: [".perf-body[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 16px;\n    align-content: start;\n    padding: 20px 24px;\n}\n\n.perf-card[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 10px;\n}\n\n.perf-card--block[_ngcontent-%COMP%] {\n    display: block;\n}\n\n.perf-card-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 10px;\n}\n\n.perf-card-name[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.perf-card-status[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    border-radius: 3px;\n}\n\n.perf-card-status.warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: color-mix(in srgb, var(--%NS%prism-warn) 15%, transparent);\n}\n\n.perf-card-val[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    align-items: baseline;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 26px;\n    font-weight: 700;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.02em;\n}\n\n.perf-card-val[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n}\n\n.perf-card-sub[_ngcontent-%COMP%] {\n    margin-top: 4px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.perf-detail[_ngcontent-%COMP%] {\n    padding: 0 24px 16px;\n}\n\n.perf-detail--last[_ngcontent-%COMP%] {\n    padding-bottom: 20px;\n}\n\n.perf-bars[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 1fr auto;\n    gap: 10px;\n    align-items: center;\n    margin-top: 8px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 12px;\n}\n\n.perf-bar-label[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.perf-bar-track[_ngcontent-%COMP%] {\n    height: 8px;\n    overflow: hidden;\n    background: var(--%NS%prism-input-bg);\n    border-radius: 4px;\n}\n\n.perf-bar-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n    border-radius: 4px;\n}\n\n.perf-bar-fill--warn[_ngcontent-%COMP%] {\n    background: linear-gradient(90deg, var(--%NS%prism-warn), var(--%NS%prism-warn));\n    opacity: 0.8;\n}\n\n.perf-bar-val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n}\n\n.perf-bar-val--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n}\n\n.perf-leak-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n    padding: 8px 14px;\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    border-radius: 5px;\n}\n\n.perf-leak-badge--ok[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-success);\n    background: color-mix(in srgb, var(--%NS%prism-success) 10%, transparent);\n    border: 1px solid color-mix(in srgb, var(--%NS%prism-success) 25%, transparent);\n}\n\n.perf-leak-badge--warn[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: color-mix(in srgb, var(--%NS%prism-warn) 10%, transparent);\n    border: 1px solid color-mix(in srgb, var(--%NS%prism-warn) 25%, transparent);\n}\n\n.perf-leak-dot[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n}\n\n.perf-leak-badge--ok[_ngcontent-%COMP%]   .perf-leak-dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-success);\n}\n\n.perf-leak-badge--warn[_ngcontent-%COMP%]   .perf-leak-dot[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-warn);\n    box-shadow: 0 0 6px var(--%NS%prism-warn);\n}\n\n.perf-disclaimer[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 12px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.perf-empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 180px;\n}\n\n.perf-empty-text[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.perf-empty-hint[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--%NS%prism-text-ghost);\n    opacity: 0.6;\n}"] });
+        } }, dependencies: [PrismMetricCardComponent, PrismBadgeComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: block;\n}\n\n.perf-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 12px;\n    padding: 16px 18px 0;\n}\n\n.perf-block[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 10px 12px;\n    margin: 12px 18px 0;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 6px;\n}\n\n.perf-block[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 16px;\n}\n\n.perf-block__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.06em;\n}\n\n\n.perf-bars[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 84px minmax(0, 1fr) auto;\n    gap: 10px;\n    align-items: center;\n    font-family: var(--%NS%font-mono);\n    font-size: 12px;\n}\n\n.perf-bar-label[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.perf-bar-track[_ngcontent-%COMP%] {\n    height: 6px;\n    overflow: hidden;\n    background: var(--%NS%prism-input-bg);\n    border-radius: 3px;\n}\n\n.perf-bar-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    background: var(--%NS%prism-primary);\n    border-radius: 3px;\n}\n\n.perf-bar-val[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-2);\n    white-space: nowrap;\n}\n\n.perf-empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 160px;\n    font-size: 12.5px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.perf-block[_ngcontent-%COMP%]    > prism-badge[_ngcontent-%COMP%] {\n    align-self: flex-start;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MemorySectionComponent, [{
         type: Component,
-        args: [{ selector: 'perf-memory-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (memoryService(); as svc) {\n    @if (!svc.available()) {\n        <div class=\"perf-empty\">\n            <div class=\"perf-empty-text\">Memory API not available</div>\n            <div class=\"perf-empty-hint\">performance.memory is Chrome-only (non-standard)</div>\n        </div>\n    } @else if (svc.snapshots().length > 0) {\n        <div class=\"perf-body\">\n            <div class=\"perf-card\">\n                <div class=\"perf-card-head\"><span class=\"perf-card-name\">Before Create</span></div>\n                <div class=\"perf-card-val\">{{ formatMb(svc.beforeCreate()?.bytes) }}<span>MB</span></div>\n                <div class=\"perf-card-sub\">baseline heap</div>\n            </div>\n            <div class=\"perf-card\">\n                <div class=\"perf-card-head\">\n                    <span class=\"perf-card-name\">After Create</span>\n                    @if (svc.delta() !== null && svc.delta()! > 0) {\n                        <span class=\"perf-card-status warn\">watch</span>\n                    }\n                </div>\n                <div\n                    class=\"perf-card-val\"\n                    [style.color]=\"afterCreateColor()\"\n                    >{{ formatMb(svc.afterCreate()?.bytes) }}<span>MB</span></div\n                >\n                <div class=\"perf-card-sub\">{{ deltaText() }}</div>\n            </div>\n            <div class=\"perf-card\">\n                <div class=\"perf-card-head\"><span class=\"perf-card-name\">After Destroy</span></div>\n                <div\n                    class=\"perf-card-val\"\n                    [style.color]=\"destroyColor()\"\n                    >{{ formatMb(svc.afterDestroy()?.bytes) }}<span>MB</span></div\n                >\n            </div>\n        </div>\n\n        @if (svc.beforeCreate() && svc.afterCreate()) {\n            <div class=\"perf-detail\">\n                <div class=\"perf-card perf-card--block\">\n                    <div class=\"perf-card-head\"><span class=\"perf-card-name\">Heap Comparison</span></div>\n                    <div class=\"perf-bars\">\n                        <span class=\"perf-bar-label\">before</span>\n                        <div class=\"perf-bar-track\"\n                            ><div\n                                class=\"perf-bar-fill\"\n                                [style.width.%]=\"barPercent(svc.beforeCreate()?.bytes)\"></div\n                        ></div>\n                        <span class=\"perf-bar-val\">{{ formatMb(svc.beforeCreate()?.bytes) }} MB</span>\n                        <span class=\"perf-bar-label\">after create</span>\n                        <div class=\"perf-bar-track\"\n                            ><div\n                                class=\"perf-bar-fill perf-bar-fill--warn\"\n                                [style.width.%]=\"barPercent(svc.afterCreate()?.bytes)\"></div\n                        ></div>\n                        <span class=\"perf-bar-val perf-bar-val--warn\">{{ formatMb(svc.afterCreate()?.bytes) }} MB</span>\n                    </div>\n                </div>\n            </div>\n        }\n\n        <div class=\"perf-detail perf-detail--last\">\n            <div class=\"perf-card perf-card--block\">\n                <div class=\"perf-card-head\"><span class=\"perf-card-name\">Leak Analysis</span></div>\n                @if (svc.leakStatus() === 'ok') {\n                    <div class=\"perf-leak-badge perf-leak-badge--ok\">\n                        <span class=\"perf-leak-dot\"></span>\n                        No significant leak detected\n                    </div>\n                } @else if (svc.leakStatus() === 'warn') {\n                    <div class=\"perf-leak-badge perf-leak-badge--warn\">\n                        <span class=\"perf-leak-dot\"></span>\n                        Possible leak &mdash; +{{ formatMb(svc.residual()!) }} MB not reclaimed\n                    </div>\n                }\n                <div class=\"perf-disclaimer\">&#9432; performance.memory is Chrome-only (non-standard). Not available in other browsers.</div>\n            </div>\n        </div>\n    } @else {\n        <div class=\"perf-empty\">\n            <div class=\"perf-empty-text\">No memory snapshots yet</div>\n            <div class=\"perf-empty-hint\">Click Snapshot to capture heap data</div>\n        </div>\n    }\n}\n", styles: [".perf-body {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 16px;\n    align-content: start;\n    padding: 20px 24px;\n}\n\n.perf-card {\n    padding: 16px;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 10px;\n}\n\n.perf-card--block {\n    display: block;\n}\n\n.perf-card-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 10px;\n}\n\n.perf-card-name {\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.perf-card-status {\n    padding: 2px 6px;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    border-radius: 3px;\n}\n\n.perf-card-status.warn {\n    color: var(--prism-warn);\n    background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n}\n\n.perf-card-val {\n    display: flex;\n    gap: 4px;\n    align-items: baseline;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 26px;\n    font-weight: 700;\n    color: var(--prism-text);\n    letter-spacing: -0.02em;\n}\n\n.perf-card-val span {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n}\n\n.perf-card-sub {\n    margin-top: 4px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 11px;\n    color: var(--prism-text-muted);\n}\n\n.perf-detail {\n    padding: 0 24px 16px;\n}\n\n.perf-detail--last {\n    padding-bottom: 20px;\n}\n\n.perf-bars {\n    display: grid;\n    grid-template-columns: 100px 1fr auto;\n    gap: 10px;\n    align-items: center;\n    margin-top: 8px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 12px;\n}\n\n.perf-bar-label {\n    color: var(--prism-text-muted);\n}\n\n.perf-bar-track {\n    height: 8px;\n    overflow: hidden;\n    background: var(--prism-input-bg);\n    border-radius: 4px;\n}\n\n.perf-bar-fill {\n    height: 100%;\n    background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n    border-radius: 4px;\n}\n\n.perf-bar-fill--warn {\n    background: linear-gradient(90deg, var(--prism-warn), var(--prism-warn));\n    opacity: 0.8;\n}\n\n.perf-bar-val {\n    color: var(--prism-primary);\n}\n\n.perf-bar-val--warn {\n    color: var(--prism-warn);\n}\n\n.perf-leak-badge {\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n    padding: 8px 14px;\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    border-radius: 5px;\n}\n\n.perf-leak-badge--ok {\n    color: var(--prism-success);\n    background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n    border: 1px solid color-mix(in srgb, var(--prism-success) 25%, transparent);\n}\n\n.perf-leak-badge--warn {\n    color: var(--prism-warn);\n    background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n    border: 1px solid color-mix(in srgb, var(--prism-warn) 25%, transparent);\n}\n\n.perf-leak-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n}\n\n.perf-leak-badge--ok .perf-leak-dot {\n    background: var(--prism-success);\n}\n\n.perf-leak-badge--warn .perf-leak-dot {\n    background: var(--prism-warn);\n    box-shadow: 0 0 6px var(--prism-warn);\n}\n\n.perf-disclaimer {\n    margin-top: 8px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 12px;\n    color: var(--prism-text-muted);\n}\n\n.perf-empty {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 180px;\n}\n\n.perf-empty-text {\n    font-size: 12px;\n    color: var(--prism-text-ghost);\n}\n\n.perf-empty-hint {\n    font-size: 11px;\n    color: var(--prism-text-ghost);\n    opacity: 0.6;\n}\n"] }]
+        args: [{ selector: 'perf-memory-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismMetricCardComponent, PrismBadgeComponent], template: "@if (memoryService(); as svc) {\n    @if (!svc.available()) {\n        <div class=\"perf-empty\">\n            <span>Memory API not available</span>\n            <span>performance.memory is Chrome-only (non-standard)</span>\n        </div>\n    } @else if (svc.snapshots().length > 0) {\n        <div class=\"perf-grid\">\n            <prism-metric-card\n                label=\"Before create\"\n                unit=\"MB\"\n                title=\"Baseline heap\"\n                [value]=\"formatMb(svc.beforeCreate()?.bytes)\" />\n            <prism-metric-card\n                label=\"After create\"\n                unit=\"MB\"\n                [value]=\"formatMb(svc.afterCreate()?.bytes)\"\n                [tone]=\"afterCreateTone()\"\n                [statusLabel]=\"afterCreateTone() ? 'Watch' : null\"\n                [title]=\"deltaText() || 'Heap right after the component was created'\" />\n            <prism-metric-card\n                label=\"After destroy\"\n                unit=\"MB\"\n                [value]=\"formatMb(svc.afterDestroy()?.bytes)\"\n                [tone]=\"destroyTone()\"\n                [statusLabel]=\"destroyTone() === 'danger' ? 'Leak' : destroyTone() === 'success' ? 'OK' : null\"\n                [title]=\"residualText() || 'Heap after the component was destroyed'\" />\n        </div>\n\n        @if (svc.beforeCreate() && svc.afterCreate()) {\n            <div class=\"perf-block\">\n                <span class=\"perf-block__label\">Heap comparison</span>\n                <div class=\"perf-bars\">\n                    <span class=\"perf-bar-label\">before</span>\n                    <div class=\"perf-bar-track\"\n                        ><div\n                            class=\"perf-bar-fill\"\n                            [style.width.%]=\"barPercent(svc.beforeCreate()?.bytes)\"></div\n                    ></div>\n                    <span class=\"perf-bar-val\">{{ formatMb(svc.beforeCreate()?.bytes) }} MB</span>\n                    <span class=\"perf-bar-label\">after create</span>\n                    <div class=\"perf-bar-track\"\n                        ><div\n                            class=\"perf-bar-fill\"\n                            [style.width.%]=\"barPercent(svc.afterCreate()?.bytes)\"></div\n                    ></div>\n                    <span class=\"perf-bar-val\">{{ formatMb(svc.afterCreate()?.bytes) }} MB</span>\n                </div>\n            </div>\n        }\n\n        <div\n            class=\"perf-block\"\n            title=\"performance.memory is Chrome-only (non-standard) and not available in other browsers\">\n            <span class=\"perf-block__label\">Leak analysis</span>\n            @if (svc.leakStatus() === 'ok') {\n                <prism-badge\n                    dot\n                    tone=\"success\"\n                    label=\"No significant leak detected\" />\n            } @else if (svc.leakStatus() === 'warn') {\n                <prism-badge\n                    dot\n                    tone=\"danger\"\n                    [label]=\"'Possible leak: +' + formatMb(svc.residual()!) + ' MB not reclaimed'\" />\n            }\n        </div>\n    } @else {\n        <div class=\"perf-empty\">\n            <span>No memory snapshots yet</span>\n            <span>Click Snapshot to capture heap data</span>\n        </div>\n    }\n}\n", styles: ["/* Shared by the bundle, render and memory sections: metric cards on a 12 px\n   grid, block cards for bars and traces, and the empty state. The cards\n   themselves are prism-metric-card from @ng-prism/core. */\n:host {\n    display: block;\n}\n\n.perf-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 12px;\n    padding: 16px 18px 0;\n}\n\n.perf-block {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 10px 12px;\n    margin: 12px 18px 0;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 6px;\n}\n\n.perf-block:last-child {\n    margin-bottom: 16px;\n}\n\n.perf-block__label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n}\n\n/* Quantities, not verdicts: one colour, the primary, never the brand gradient. */\n.perf-bars {\n    display: grid;\n    grid-template-columns: 84px minmax(0, 1fr) auto;\n    gap: 10px;\n    align-items: center;\n    font-family: var(--font-mono);\n    font-size: 12px;\n}\n\n.perf-bar-label {\n    color: var(--prism-text-muted);\n}\n\n.perf-bar-track {\n    height: 6px;\n    overflow: hidden;\n    background: var(--prism-input-bg);\n    border-radius: 3px;\n}\n\n.perf-bar-fill {\n    height: 100%;\n    background: var(--prism-primary);\n    border-radius: 3px;\n}\n\n.perf-bar-val {\n    color: var(--prism-text-2);\n    white-space: nowrap;\n}\n\n.perf-empty {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 160px;\n    font-size: 12.5px;\n    color: var(--prism-text-muted);\n}\n\n.perf-block > prism-badge {\n    align-self: flex-start;\n}\n"] }]
     }], null, { memoryService: [{ type: i0.Input, args: [{ isSignal: true, alias: "memoryService", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MemorySectionComponent, { className: "MemorySectionComponent", filePath: "memory/memory-section.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MemorySectionComponent, { className: "MemorySectionComponent", filePath: "memory/memory-section.component.ts", lineNumber: 13 }); })();

package/dist/memory/perf-memory.service.d.ts

@@ -14,7 +14,7 @@ export declare class PerfMemoryService implements PrismRendererHooks {
     readonly afterDestroy: import("@angular/core").Signal<HeapSnapshot | null>;
     readonly delta: import("@angular/core").Signal<number | null>;
     readonly residual: import("@angular/core").Signal<number | null>;
-    readonly leakStatus: import("@angular/core").Signal<"warn" | "ok" | "unknown">;
+    readonly leakStatus: import("@angular/core").Signal<"ok" | "warn" | "unknown">;
     configure(gcDelayMs: number): void;
     onBeforeCreate(_selector: string): void;
     onAfterCreate(_selector: string): void;

package/dist/perf-config.token.d.ts

@@ -1,4 +1,5 @@
 import { InjectionToken } from '@angular/core';
 import type { PerfPluginOptions } from './perf.types.js';
+/** @deprecated Deprecated since 22.6.0, removed in 23.0.0. It has never had an effect: nothing reads it. Nothing provides it either. */
 export declare const PERF_PLUGIN_CONFIG: InjectionToken<PerfPluginOptions>;
 //# sourceMappingURL=perf-config.token.d.ts.map

package/dist/perf-config.token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"perf-config.token.d.ts","sourceRoot":"","sources":["../src/perf-config.token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,eAAO,MAAM,kBAAkB,mCAA8D,CAAC"}
+{"version":3,"file":"perf-config.token.d.ts","sourceRoot":"","sources":["../src/perf-config.token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,wIAAwI;AACxI,eAAO,MAAM,kBAAkB,mCAA8D,CAAC"}

package/dist/perf-config.token.js

@@ -1,2 +1,3 @@
 import { InjectionToken } from '@angular/core';
+/** @deprecated Deprecated since 22.6.0, removed in 23.0.0. It has never had an effect: nothing reads it. Nothing provides it either. */
 export const PERF_PLUGIN_CONFIG = new InjectionToken('PERF_PLUGIN_CONFIG');

package/dist/perf-panel.component.d.ts

@@ -1,3 +1,4 @@
+import { type PrismTabItem } from '@ng-prism/core';
 import { PerfMemoryService } from './memory/perf-memory.service.js';
 import type { BundleMetrics, PerfThresholds } from './perf.types.js';
 import { PerfRenderService } from './render/perf-render.service.js';
@@ -9,6 +10,10 @@ export declare class PerfPanelComponent {
     readonly renderService: PerfRenderService;
     readonly memoryService: PerfMemoryService;
     readonly thresholds: PerfThresholds;
+    protected readonly tabs: PrismTabItem[];
+    protected selectTab(id: string | null): void;
+    /** Recording state and change-detection runs: meta for the tooltip, not for the toolbar. */
+    protected readonly profileTitle: import("@angular/core").Signal<string>;
     captureMemorySnapshots(): void;
     readonly bundleMetrics: import("@angular/core").Signal<BundleMetrics | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PerfPanelComponent, never>;

package/dist/perf-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;;AAGpE,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,qBAQa,kBAAkB;IAC3B,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,QAAQ,CAAC,SAAS,iDAA4B;IAC9C,QAAQ,CAAC,aAAa,oBAAmC;IACzD,QAAQ,CAAC,aAAa,oBAAmC;IAEzD,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAsB;IAEzD,sBAAsB,IAAI,IAAI;IAK9B,QAAQ,CAAC,aAAa,uDAQnB;yCAtBM,kBAAkB;2CAAlB,kBAAkB;CAuB9B"}
+{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAoD,KAAK,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAGzH,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;;AAGpE,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,qBAQa,kBAAkB;IAC3B,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,QAAQ,CAAC,SAAS,iDAA4B;IAC9C,QAAQ,CAAC,aAAa,oBAAmC;IACzD,QAAQ,CAAC,aAAa,oBAAmC;IAEzD,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAsB;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,EAAE,CAIrC;IAEF,SAAS,CAAC,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAI5C,4FAA4F;IAC5F,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAS5B;IAEH,sBAAsB,IAAI,IAAI;IAK9B,QAAQ,CAAC,aAAa,uDAQnB;yCA5CM,kBAAkB;2CAAlB,kBAAkB;CA6C9B"}