@ng-prism/plugin-perf 21.0.0

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

@@ -0,0 +1,323 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/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.ɵɵtext(2, "\uD83E\uDDE0");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 2);
+    i0.ɵɵtext(4, "Memory API not available");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div", 3);
+    i0.ɵɵtext(6, "performance.memory is Chrome-only (non-standard)");
+    i0.ɵɵdomElementEnd()();
+} }
+function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_28_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 16)(1, "span", 17);
+    i0.ɵɵtext(2, "after destroy");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 18);
+    i0.ɵɵdomElement(4, "div", 23);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "span", 24);
+    i0.ɵɵtext(6);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    let tmp_5_0;
+    let tmp_6_0;
+    const svc_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("width", ctx_r1.barPercent((tmp_5_0 = svc_r1.afterDestroy()) == null ? null : tmp_5_0.bytes), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.formatMb((tmp_6_0 = svc_r1.afterDestroy()) == null ? null : tmp_6_0.bytes), " MB");
+} }
+function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 10)(1, "div", 6);
+    i0.ɵɵtext(2, "Heap Comparison");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 15)(4, "div", 16)(5, "span", 17);
+    i0.ɵɵtext(6, "before");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(7, "div", 18);
+    i0.ɵɵdomElement(8, "div", 19);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "span", 20);
+    i0.ɵɵtext(10);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(11, "div", 16)(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()();
+    i0.ɵɵconditionalCreate(18, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_28_Conditional_18_Template, 7, 3, "div", 16);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    let tmp_4_0;
+    let tmp_5_0;
+    let tmp_6_0;
+    let tmp_7_0;
+    const svc_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵstyleProp("width", ctx_r1.barPercent((tmp_4_0 = svc_r1.beforeCreate()) == null ? null : tmp_4_0.bytes), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.formatMb((tmp_5_0 = svc_r1.beforeCreate()) == null ? null : tmp_5_0.bytes), " MB");
+    i0.ɵɵadvance(5);
+    i0.ɵɵstyleProp("width", ctx_r1.barPercent((tmp_6_0 = svc_r1.afterCreate()) == null ? null : tmp_6_0.bytes), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.formatMb((tmp_7_0 = svc_r1.afterCreate()) == null ? null : tmp_7_0.bytes), " MB");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(svc_r1.afterDestroy() ? 18 : -1);
+} }
+function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 12);
+    i0.ɵɵdomElement(1, "div", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    let tmp_4_0;
+    const svc_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" No significant leak detected \u2014 residual ", ctx_r1.formatMb(svc_r1.residual() + (((tmp_4_0 = svc_r1.beforeCreate()) == null ? null : tmp_4_0.bytes) ?? 0)), " MB within threshold ");
+} }
+function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 13);
+    i0.ɵɵdomElement(1, "div", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} 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 after destroy ");
+} }
+function MemorySectionComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 4)(1, "div", 5)(2, "div", 6);
+    i0.ɵɵtext(3, "Before Create");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 7);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementStart(6, "span", 8);
+    i0.ɵɵtext(7, " MB");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(8, "div", 9);
+    i0.ɵɵtext(9, "baseline heap");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(10, "div", 5)(11, "div", 6);
+    i0.ɵɵtext(12, "After Create");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(13, "div", 7);
+    i0.ɵɵtext(14);
+    i0.ɵɵdomElementStart(15, "span", 8);
+    i0.ɵɵtext(16, " MB");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(17, "div", 9);
+    i0.ɵɵtext(18);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(19, "div", 5)(20, "div", 6);
+    i0.ɵɵtext(21, "After Destroy");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(22, "div", 7);
+    i0.ɵɵtext(23);
+    i0.ɵɵdomElementStart(24, "span", 8);
+    i0.ɵɵtext(25, " MB");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(26, "div", 9);
+    i0.ɵɵtext(27);
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵconditionalCreate(28, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_28_Template, 19, 7, "div", 10);
+    i0.ɵɵdomElementStart(29, "div", 11)(30, "div", 6);
+    i0.ɵɵtext(31, "Leak Analysis");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(32, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_32_Template, 3, 1, "div", 12)(33, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_33_Template, 3, 1, "div", 13);
+    i0.ɵɵdomElementStart(34, "div", 14);
+    i0.ɵɵtext(35, " performance.memory is Chrome-only (non-standard). Not available in other browsers. ");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    let tmp_3_0;
+    let tmp_5_0;
+    let tmp_8_0;
+    const svc_r1 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.formatMb((tmp_3_0 = svc_r1.beforeCreate()) == null ? null : tmp_3_0.bytes));
+    i0.ɵɵadvance(8);
+    i0.ɵɵclassProp("delta-pos", svc_r1.delta() !== null && svc_r1.delta() > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMb((tmp_5_0 = svc_r1.afterCreate()) == null ? null : tmp_5_0.bytes));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.deltaText());
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassMap(ctx_r1.destroyClass());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMb((tmp_8_0 = svc_r1.afterDestroy()) == null ? null : tmp_8_0.bytes));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.residualText());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(svc_r1.beforeCreate() && svc_r1.afterCreate() ? 28 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(svc_r1.leakStatus() === "ok" ? 32 : svc_r1.leakStatus() === "warn" ? 33 : -1);
+} }
+function MemorySectionComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
+    i0.ɵɵtext(2, "\uD83E\uDDE0");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 2);
+    i0.ɵɵtext(4, "No memory snapshots yet");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div", 3);
+    i0.ɵɵtext(6, "Click Snapshot to capture heap data");
+    i0.ɵɵdomElementEnd()();
+} }
+function MemorySectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Conditional_0_Template, 7, 0, "div", 0)(1, MemorySectionComponent_Conditional_0_Conditional_1_Template, 36, 11)(2, MemorySectionComponent_Conditional_0_Conditional_2_Template, 7, 0, "div", 0);
+} if (rf & 2) {
+    const svc_r1 = ctx;
+    i0.ɵɵconditional(!svc_r1.available() ? 0 : svc_r1.snapshots().length > 0 ? 1 : 2);
+} }
+export class MemorySectionComponent {
+    memoryService = input.required(...(ngDevMode ? [{ debugName: "memoryService" }] : []));
+    maxBytes = computed(() => {
+        const svc = this.memoryService();
+        const vals = [
+            svc.beforeCreate()?.bytes ?? 0,
+            svc.afterCreate()?.bytes ?? 0,
+            svc.afterDestroy()?.bytes ?? 0,
+        ];
+        return Math.max(...vals);
+    }, ...(ngDevMode ? [{ debugName: "maxBytes" }] : []));
+    deltaText = computed(() => {
+        const d = this.memoryService().delta();
+        if (d === null)
+            return '';
+        return `+${this.formatMb(d)} MB delta`;
+    }, ...(ngDevMode ? [{ debugName: "deltaText" }] : []));
+    residualText = computed(() => {
+        const r = this.memoryService().residual();
+        if (r === null)
+            return '';
+        return `+${this.formatMb(r)} MB residual`;
+    }, ...(ngDevMode ? [{ debugName: "residualText" }] : []));
+    destroyClass = computed(() => {
+        const status = this.memoryService().leakStatus();
+        if (status === 'ok')
+            return 'delta-ok';
+        if (status === 'warn')
+            return 'delta-neg';
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "destroyClass" }] : []));
+    barPercent(bytes) {
+        if (!bytes || this.maxBytes() === 0)
+            return 0;
+        return (bytes / this.maxBytes()) * 100;
+    }
+    formatMb(bytes) {
+        if (bytes === null || bytes === undefined)
+            return '—';
+        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, "prism-perf-empty"], [1, "prism-perf-empty-icon"], [1, "prism-perf-empty-text"], [1, "prism-perf-empty-hint"], [1, "prism-perf-memory-hero"], [1, "prism-perf-memory-metric"], [1, "prism-perf-label"], [1, "prism-perf-memory-value"], [1, "prism-perf-memory-unit"], [1, "prism-perf-sub"], [1, "prism-perf-memory-bar-section"], [1, "prism-perf-memory-leak-section"], [1, "prism-perf-leak-badge", "ok"], [1, "prism-perf-leak-badge", "warn"], [1, "prism-perf-memory-disclaimer"], [1, "prism-perf-memory-bars"], [1, "prism-perf-memory-bar-row"], [1, "prism-perf-memory-bar-label"], [1, "prism-perf-memory-bar-track"], [1, "prism-perf-memory-bar-fill", 2, "background", "rgba(167,139,250,0.4)"], [1, "prism-perf-memory-bar-val"], [1, "prism-perf-memory-bar-fill", 2, "background", "linear-gradient(90deg,rgba(167,139,250,0.4),rgba(251,191,36,0.6))"], [1, "prism-perf-memory-bar-val", 2, "color", "var(--perf-warn, #fbbf24)"], [1, "prism-perf-memory-bar-fill", 2, "background", "rgba(74,222,128,0.4)"], [1, "prism-perf-memory-bar-val", 2, "color", "var(--perf-ok, #4ade80)"], [1, "prism-perf-leak-dot"]], 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: [".prism-perf-memory-hero[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-memory-metric[_ngcontent-%COMP%] {\n      padding: 14px 16px;\n      border-right: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n    }\n    .prism-perf-memory-metric[_ngcontent-%COMP%]:last-child { border-right: none; }\n    .prism-perf-memory-value[_ngcontent-%COMP%] {\n      font-size: 20px;\n      font-family: var(--prism-font-mono, monospace);\n      font-weight: 600;\n      color: var(--prism-text, #ede9f8);\n      line-height: 1.1;\n    }\n    .prism-perf-memory-value.delta-pos[_ngcontent-%COMP%] { color: var(--perf-warn, #fbbf24); }\n    .prism-perf-memory-value.delta-ok[_ngcontent-%COMP%] { color: var(--perf-ok, #4ade80); }\n    .prism-perf-memory-value.delta-neg[_ngcontent-%COMP%] { color: var(--perf-crit, #f87171); }\n    .prism-perf-memory-unit[_ngcontent-%COMP%] { font-size: 11px; font-weight: 400; color: var(--prism-text-muted, #8476a2); }\n    .prism-perf-label[_ngcontent-%COMP%] {\n      font-size: 9px;\n      font-weight: 600;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost, #6a5d87);\n    }\n    .prism-perf-sub[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--prism-text-ghost, #6a5d87);\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-memory-bar-section[_ngcontent-%COMP%] {\n      padding: 14px 16px;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-memory-bars[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-top: 12px;\n    }\n    .prism-perf-memory-bar-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .prism-perf-memory-bar-label[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--prism-text-muted, #8476a2);\n      width: 80px;\n      flex-shrink: 0;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-memory-bar-track[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: rgba(255,255,255,0.04);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .prism-perf-memory-bar-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      border-radius: 4px;\n    }\n    .prism-perf-memory-bar-val[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-2, #b0a6c8);\n      width: 60px;\n      text-align: right;\n      flex-shrink: 0;\n    }\n    .prism-perf-memory-leak-section[_ngcontent-%COMP%] {\n      padding: 14px 16px;\n    }\n    .prism-perf-leak-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      border-radius: 5px;\n      font-size: 12px;\n      font-weight: 500;\n      margin-top: 8px;\n    }\n    .prism-perf-leak-badge.ok[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--perf-ok, #4ade80) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--perf-ok, #4ade80) 25%, transparent);\n      color: var(--perf-ok, #4ade80);\n    }\n    .prism-perf-leak-badge.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--perf-warn, #fbbf24) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--perf-warn, #fbbf24) 25%, transparent);\n      color: var(--perf-warn, #fbbf24);\n    }\n    .prism-perf-leak-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n    }\n    .ok[_ngcontent-%COMP%]   .prism-perf-leak-dot[_ngcontent-%COMP%] { background: var(--perf-ok, #4ade80); }\n    .warn[_ngcontent-%COMP%]   .prism-perf-leak-dot[_ngcontent-%COMP%] { background: var(--perf-warn, #fbbf24); box-shadow: 0 0 6px var(--perf-warn, #fbbf24); }\n    .prism-perf-memory-disclaimer[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      font-size: 10px;\n      color: var(--prism-text-ghost, #6a5d87);\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      height: 100%;\n      min-height: 180px;\n    }\n    .prism-perf-empty-icon[_ngcontent-%COMP%] { font-size: 28px; opacity: 0.2; }\n    .prism-perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost, #6a5d87); }\n    .prism-perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost, #6a5d87); opacity: 0.6; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MemorySectionComponent, [{
+        type: Component,
+        args: [{ selector: 'perf-memory-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (memoryService(); as svc) {
+      @if (!svc.available()) {
+        <div class="prism-perf-empty">
+          <div class="prism-perf-empty-icon">&#129504;</div>
+          <div class="prism-perf-empty-text">Memory API not available</div>
+          <div class="prism-perf-empty-hint">performance.memory is Chrome-only (non-standard)</div>
+        </div>
+      } @else if (svc.snapshots().length > 0) {
+        <div class="prism-perf-memory-hero">
+          <div class="prism-perf-memory-metric">
+            <div class="prism-perf-label">Before Create</div>
+            <div class="prism-perf-memory-value">{{ formatMb(svc.beforeCreate()?.bytes) }}<span class="prism-perf-memory-unit"> MB</span></div>
+            <div class="prism-perf-sub">baseline heap</div>
+          </div>
+          <div class="prism-perf-memory-metric">
+            <div class="prism-perf-label">After Create</div>
+            <div class="prism-perf-memory-value" [class.delta-pos]="svc.delta() !== null && svc.delta()! > 0">
+              {{ formatMb(svc.afterCreate()?.bytes) }}<span class="prism-perf-memory-unit"> MB</span>
+            </div>
+            <div class="prism-perf-sub">{{ deltaText() }}</div>
+          </div>
+          <div class="prism-perf-memory-metric">
+            <div class="prism-perf-label">After Destroy</div>
+            <div class="prism-perf-memory-value" [class]="destroyClass()">
+              {{ formatMb(svc.afterDestroy()?.bytes) }}<span class="prism-perf-memory-unit"> MB</span>
+            </div>
+            <div class="prism-perf-sub">{{ residualText() }}</div>
+          </div>
+        </div>
+
+        @if (svc.beforeCreate() && svc.afterCreate()) {
+          <div class="prism-perf-memory-bar-section">
+            <div class="prism-perf-label">Heap Comparison</div>
+            <div class="prism-perf-memory-bars">
+              <div class="prism-perf-memory-bar-row">
+                <span class="prism-perf-memory-bar-label">before</span>
+                <div class="prism-perf-memory-bar-track">
+                  <div class="prism-perf-memory-bar-fill" [style.width.%]="barPercent(svc.beforeCreate()?.bytes)" style="background:rgba(167,139,250,0.4)"></div>
+                </div>
+                <span class="prism-perf-memory-bar-val">{{ formatMb(svc.beforeCreate()?.bytes) }} MB</span>
+              </div>
+              <div class="prism-perf-memory-bar-row">
+                <span class="prism-perf-memory-bar-label">after create</span>
+                <div class="prism-perf-memory-bar-track">
+                  <div class="prism-perf-memory-bar-fill" [style.width.%]="barPercent(svc.afterCreate()?.bytes)" style="background:linear-gradient(90deg,rgba(167,139,250,0.4),rgba(251,191,36,0.6))"></div>
+                </div>
+                <span class="prism-perf-memory-bar-val" style="color:var(--perf-warn, #fbbf24)">{{ formatMb(svc.afterCreate()?.bytes) }} MB</span>
+              </div>
+              @if (svc.afterDestroy()) {
+                <div class="prism-perf-memory-bar-row">
+                  <span class="prism-perf-memory-bar-label">after destroy</span>
+                  <div class="prism-perf-memory-bar-track">
+                    <div class="prism-perf-memory-bar-fill" [style.width.%]="barPercent(svc.afterDestroy()?.bytes)" style="background:rgba(74,222,128,0.4)"></div>
+                  </div>
+                  <span class="prism-perf-memory-bar-val" style="color:var(--perf-ok, #4ade80)">{{ formatMb(svc.afterDestroy()?.bytes) }} MB</span>
+                </div>
+              }
+            </div>
+          </div>
+        }
+
+        <div class="prism-perf-memory-leak-section">
+          <div class="prism-perf-label">Leak Analysis</div>
+          @if (svc.leakStatus() === 'ok') {
+            <div class="prism-perf-leak-badge ok">
+              <div class="prism-perf-leak-dot"></div>
+              No significant leak detected — residual {{ formatMb(svc.residual()! + (svc.beforeCreate()?.bytes ?? 0)) }} MB within threshold
+            </div>
+          } @else if (svc.leakStatus() === 'warn') {
+            <div class="prism-perf-leak-badge warn">
+              <div class="prism-perf-leak-dot"></div>
+              Possible leak — +{{ formatMb(svc.residual()!) }} MB not reclaimed after destroy
+            </div>
+          }
+          <div class="prism-perf-memory-disclaimer">
+            performance.memory is Chrome-only (non-standard). Not available in other browsers.
+          </div>
+        </div>
+      } @else {
+        <div class="prism-perf-empty">
+          <div class="prism-perf-empty-icon">&#129504;</div>
+          <div class="prism-perf-empty-text">No memory snapshots yet</div>
+          <div class="prism-perf-empty-hint">Click Snapshot to capture heap data</div>
+        </div>
+      }
+    }
+  `, styles: ["\n    .prism-perf-memory-hero {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-memory-metric {\n      padding: 14px 16px;\n      border-right: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n    }\n    .prism-perf-memory-metric:last-child { border-right: none; }\n    .prism-perf-memory-value {\n      font-size: 20px;\n      font-family: var(--prism-font-mono, monospace);\n      font-weight: 600;\n      color: var(--prism-text, #ede9f8);\n      line-height: 1.1;\n    }\n    .prism-perf-memory-value.delta-pos { color: var(--perf-warn, #fbbf24); }\n    .prism-perf-memory-value.delta-ok { color: var(--perf-ok, #4ade80); }\n    .prism-perf-memory-value.delta-neg { color: var(--perf-crit, #f87171); }\n    .prism-perf-memory-unit { font-size: 11px; font-weight: 400; color: var(--prism-text-muted, #8476a2); }\n    .prism-perf-label {\n      font-size: 9px;\n      font-weight: 600;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost, #6a5d87);\n    }\n    .prism-perf-sub {\n      font-size: 10px;\n      color: var(--prism-text-ghost, #6a5d87);\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-memory-bar-section {\n      padding: 14px 16px;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-memory-bars {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-top: 12px;\n    }\n    .prism-perf-memory-bar-row {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .prism-perf-memory-bar-label {\n      font-size: 10px;\n      color: var(--prism-text-muted, #8476a2);\n      width: 80px;\n      flex-shrink: 0;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-memory-bar-track {\n      flex: 1;\n      height: 8px;\n      background: rgba(255,255,255,0.04);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n    .prism-perf-memory-bar-fill {\n      height: 100%;\n      border-radius: 4px;\n    }\n    .prism-perf-memory-bar-val {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-2, #b0a6c8);\n      width: 60px;\n      text-align: right;\n      flex-shrink: 0;\n    }\n    .prism-perf-memory-leak-section {\n      padding: 14px 16px;\n    }\n    .prism-perf-leak-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      border-radius: 5px;\n      font-size: 12px;\n      font-weight: 500;\n      margin-top: 8px;\n    }\n    .prism-perf-leak-badge.ok {\n      background: color-mix(in srgb, var(--perf-ok, #4ade80) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--perf-ok, #4ade80) 25%, transparent);\n      color: var(--perf-ok, #4ade80);\n    }\n    .prism-perf-leak-badge.warn {\n      background: color-mix(in srgb, var(--perf-warn, #fbbf24) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--perf-warn, #fbbf24) 25%, transparent);\n      color: var(--perf-warn, #fbbf24);\n    }\n    .prism-perf-leak-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n    }\n    .ok .prism-perf-leak-dot { background: var(--perf-ok, #4ade80); }\n    .warn .prism-perf-leak-dot { background: var(--perf-warn, #fbbf24); box-shadow: 0 0 6px var(--perf-warn, #fbbf24); }\n    .prism-perf-memory-disclaimer {\n      margin-top: 10px;\n      font-size: 10px;\n      color: var(--prism-text-ghost, #6a5d87);\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      height: 100%;\n      min-height: 180px;\n    }\n    .prism-perf-empty-icon { font-size: 28px; opacity: 0.2; }\n    .prism-perf-empty-text { font-size: 12px; color: var(--prism-text-ghost, #6a5d87); }\n    .prism-perf-empty-hint { font-size: 11px; color: var(--prism-text-ghost, #6a5d87); opacity: 0.6; }\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: 224 }); })();

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

@@ -0,0 +1,26 @@
+import type { PrismRendererHooks } from '@ng-prism/core/plugin';
+export interface HeapSnapshot {
+    label: string;
+    bytes: number;
+    timestamp: number;
+}
+export declare class PerfMemoryService implements PrismRendererHooks {
+    static getInstance(): PerfMemoryService;
+    readonly snapshots: import("@angular/core").WritableSignal<HeapSnapshot[]>;
+    readonly available: import("@angular/core").Signal<boolean>;
+    private gcDelay;
+    readonly beforeCreate: import("@angular/core").Signal<HeapSnapshot | null>;
+    readonly afterCreate: import("@angular/core").Signal<HeapSnapshot | null>;
+    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<"ok" | "warn" | "unknown">;
+    configure(gcDelayMs: number): void;
+    onBeforeCreate(_selector: string): void;
+    onAfterCreate(_selector: string): void;
+    onAfterDestroy(_selector: string): void;
+    takeSnapshot(label: string): void;
+    clear(): void;
+    private findSnapshot;
+}
+//# sourceMappingURL=perf-memory.service.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"perf-memory.service.d.ts","sourceRoot":"","sources":["../../src/memory/perf-memory.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB;AAID,qBAAa,iBAAkB,YAAW,kBAAkB;IAC1D,MAAM,CAAC,WAAW,IAAI,iBAAiB;IAKvC,QAAQ,CAAC,SAAS,yDAA8B;IAChD,QAAQ,CAAC,SAAS,0CAAiF;IAEnG,OAAO,CAAC,OAAO,CAAO;IAEtB,QAAQ,CAAC,YAAY,sDAAsD;IAC3E,QAAQ,CAAC,WAAW,sDAAqD;IACzE,QAAQ,CAAC,YAAY,sDAAsD;IAE3E,QAAQ,CAAC,KAAK,gDAKX;IAEH,QAAQ,CAAC,QAAQ,gDAKd;IAEH,QAAQ,CAAC,UAAU,4DAIhB;IAEH,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAIlC,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAIvC,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAItC,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAIvC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASjC,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,YAAY;CAGrB"}

package/dist/memory/perf-memory.service.js

@@ -0,0 +1,62 @@
+import { signal, computed } from '@angular/core';
+let instance = null;
+export class PerfMemoryService {
+    static getInstance() {
+        if (!instance)
+            instance = new PerfMemoryService();
+        return instance;
+    }
+    snapshots = signal([], ...(ngDevMode ? [{ debugName: "snapshots" }] : []));
+    available = computed(() => typeof performance !== 'undefined' && 'memory' in performance, ...(ngDevMode ? [{ debugName: "available" }] : []));
+    gcDelay = 100;
+    beforeCreate = computed(() => this.findSnapshot('before-create'), ...(ngDevMode ? [{ debugName: "beforeCreate" }] : []));
+    afterCreate = computed(() => this.findSnapshot('after-create'), ...(ngDevMode ? [{ debugName: "afterCreate" }] : []));
+    afterDestroy = computed(() => this.findSnapshot('after-destroy'), ...(ngDevMode ? [{ debugName: "afterDestroy" }] : []));
+    delta = computed(() => {
+        const before = this.beforeCreate();
+        const after = this.afterCreate();
+        if (!before || !after)
+            return null;
+        return after.bytes - before.bytes;
+    }, ...(ngDevMode ? [{ debugName: "delta" }] : []));
+    residual = computed(() => {
+        const before = this.beforeCreate();
+        const destroy = this.afterDestroy();
+        if (!before || !destroy)
+            return null;
+        return destroy.bytes - before.bytes;
+    }, ...(ngDevMode ? [{ debugName: "residual" }] : []));
+    leakStatus = computed(() => {
+        const residualMb = this.residual();
+        if (residualMb === null)
+            return 'unknown';
+        return residualMb / (1024 * 1024) >= 0.5 ? 'warn' : 'ok';
+    }, ...(ngDevMode ? [{ debugName: "leakStatus" }] : []));
+    configure(gcDelayMs) {
+        this.gcDelay = gcDelayMs;
+    }
+    onBeforeCreate(_selector) {
+        this.takeSnapshot('before-create');
+    }
+    onAfterCreate(_selector) {
+        setTimeout(() => this.takeSnapshot('after-create'), 50);
+    }
+    onAfterDestroy(_selector) {
+        setTimeout(() => this.takeSnapshot('after-destroy'), this.gcDelay);
+    }
+    takeSnapshot(label) {
+        if (!this.available())
+            return;
+        const mem = performance.memory;
+        this.snapshots.update((arr) => [
+            ...arr.filter((s) => s.label !== label),
+            { label, bytes: mem.usedJSHeapSize, timestamp: Date.now() },
+        ]);
+    }
+    clear() {
+        this.snapshots.set([]);
+    }
+    findSnapshot(label) {
+        return this.snapshots().find((s) => s.label === label) ?? null;
+    }
+}

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

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import type { PerfPluginOptions } from './perf.types.js';
+export declare const PERF_PLUGIN_CONFIG: InjectionToken<PerfPluginOptions>;
+//# sourceMappingURL=perf-config.token.d.ts.map

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

@@ -0,0 +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"}

package/dist/perf-config.token.js

@@ -0,0 +1,2 @@
+import { InjectionToken } from '@angular/core';
+export const PERF_PLUGIN_CONFIG = new InjectionToken('PERF_PLUGIN_CONFIG');

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

@@ -0,0 +1,18 @@
+import type { BundleMetrics, PerfThresholds } from './perf.types.js';
+import { PerfRenderService } from './render/perf-render.service.js';
+import { PerfMemoryService } from './memory/perf-memory.service.js';
+import * as i0 from "@angular/core";
+type SubTab = 'bundle' | 'render' | 'memory';
+export declare class PerfPanelComponent {
+    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
+    readonly activeTab: import("@angular/core").WritableSignal<SubTab>;
+    readonly renderService: PerfRenderService;
+    readonly memoryService: PerfMemoryService;
+    readonly thresholds: PerfThresholds;
+    captureMemorySnapshots(): void;
+    readonly bundleMetrics: import("@angular/core").Signal<BundleMetrics | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PerfPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PerfPanelComponent, "prism-perf-panel", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=perf-panel.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;;AAKpE,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,qBA2Ma,kBAAkB;IAC7B,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,uDAGnB;yCAjBQ,kBAAkB;2CAAlB,kBAAkB;CAkB9B"}