@ng-prism/plugin-perf 21.0.0

package/dist/perf-panel.component.js

@@ -0,0 +1,247 @@
+import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
+import { DEFAULT_THRESHOLDS } from './perf.types.js';
+import { PerfRenderService } from './render/perf-render.service.js';
+import { PerfMemoryService } from './memory/perf-memory.service.js';
+import { BundleSectionComponent } from './bundle/bundle-section.component.js';
+import { RenderSectionComponent } from './render/render-section.component.js';
+import { MemorySectionComponent } from './memory/memory-section.component.js';
+import * as i0 from "@angular/core";
+function PerfPanelComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r0.renderService.cdRunCount(), " CD runs");
+} }
+function PerfPanelComponent_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_15_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.renderService.stopRecording()); });
+    i0.ɵɵelementStart(1, "i", 12);
+    i0.ɵɵtext(2, "\u23F8");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3, " Pause ");
+    i0.ɵɵelementEnd();
+} }
+function PerfPanelComponent_Conditional_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_15_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.renderService.startRecording()); });
+    i0.ɵɵelementStart(1, "i", 12);
+    i0.ɵɵtext(2, "\u25B6");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3, " Profile ");
+    i0.ɵɵelementEnd();
+} }
+function PerfPanelComponent_Conditional_15_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "div", 16);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" live \u00B7 ", ctx_r0.renderService.sampleCount(), " samples ");
+} }
+function PerfPanelComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵconditionalCreate(1, PerfPanelComponent_Conditional_15_Conditional_1_Template, 4, 0, "button", 10)(2, PerfPanelComponent_Conditional_15_Conditional_2_Template, 4, 0, "button", 10);
+    i0.ɵɵelementStart(3, "button", 11);
+    i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_15_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.renderService.clear()); });
+    i0.ɵɵelementStart(4, "i", 12);
+    i0.ɵɵtext(5, "\u2715");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(6, " Clear ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(7, "div", 13);
+    i0.ɵɵconditionalCreate(8, PerfPanelComponent_Conditional_15_Conditional_8_Template, 3, 1, "div", 14);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.renderService.isRecording() ? 1 : 2);
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r0.renderService.isRecording() ? 8 : -1);
+} }
+function PerfPanelComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "button", 15);
+    i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.captureMemorySnapshots()); });
+    i0.ɵɵelementStart(2, "i", 12);
+    i0.ɵɵtext(3, "\u25B6");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4, " Snapshot ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 11);
+    i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.memoryService.clear()); });
+    i0.ɵɵelementStart(6, "i", 12);
+    i0.ɵɵtext(7, "\u2715");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(8, " Clear ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(9, "div", 13);
+    i0.ɵɵelementEnd();
+} }
+function PerfPanelComponent_Case_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "perf-bundle-section", 7);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("metrics", ctx_r0.bundleMetrics())("warnKb", ctx_r0.thresholds.bundleWarnKb)("critKb", ctx_r0.thresholds.bundleCritKb);
+} }
+function PerfPanelComponent_Case_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "perf-render-section", 8);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("renderService", ctx_r0.renderService)("warnMs", ctx_r0.thresholds.renderWarnMs)("critMs", ctx_r0.thresholds.renderCritMs);
+} }
+function PerfPanelComponent_Case_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "perf-memory-section", 9);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("memoryService", ctx_r0.memoryService);
+} }
+export class PerfPanelComponent {
+    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
+    activeTab = signal('bundle', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    renderService = PerfRenderService.getInstance();
+    memoryService = PerfMemoryService.getInstance();
+    thresholds = DEFAULT_THRESHOLDS;
+    captureMemorySnapshots() {
+        this.memoryService.takeSnapshot('before-create');
+        setTimeout(() => this.memoryService.takeSnapshot('after-create'), 50);
+    }
+    bundleMetrics = computed(() => {
+        const comp = this.activeComponent();
+        return comp?.meta?.showcaseConfig?.meta?.perf?.bundle ?? null;
+    }, ...(ngDevMode ? [{ debugName: "bundleMetrics" }] : []));
+    static ɵfac = function PerfPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PerfPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerfPanelComponent, selectors: [["prism-perf-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 21, vars: 10, consts: [[1, "prism-perf-panel"], [1, "prism-perf-subtabs"], [1, "prism-perf-subtab", 3, "click"], [1, "prism-perf-subtab-icon"], [1, "prism-perf-cd-badge"], [1, "prism-perf-toolbar"], [1, "prism-perf-content"], [3, "metrics", "warnKb", "critKb"], [3, "renderService", "warnMs", "critMs"], [3, "memoryService"], [1, "prism-perf-btn", "prism-perf-btn--primary"], [1, "prism-perf-btn", 3, "click"], [1, "prism-perf-btn-icon"], [1, "prism-perf-toolbar-spacer"], [1, "prism-perf-status"], [1, "prism-perf-btn", "prism-perf-btn--primary", 3, "click"], [1, "prism-perf-status-dot"]], template: function PerfPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
+            i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_2_listener() { return ctx.activeTab.set("bundle"); });
+            i0.ɵɵelementStart(3, "span", 3);
+            i0.ɵɵtext(4, "\uD83D\uDCE6");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(5, " Bundle ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 2);
+            i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_6_listener() { return ctx.activeTab.set("render"); });
+            i0.ɵɵelementStart(7, "span", 3);
+            i0.ɵɵtext(8, "\u23F1");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(9, " Render ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "button", 2);
+            i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_10_listener() { return ctx.activeTab.set("memory"); });
+            i0.ɵɵelementStart(11, "span", 3);
+            i0.ɵɵtext(12, "\uD83E\uDDE0");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(13, " Memory ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(14, PerfPanelComponent_Conditional_14_Template, 2, 1, "div", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(15, PerfPanelComponent_Conditional_15_Template, 9, 2, "div", 5);
+            i0.ɵɵconditionalCreate(16, PerfPanelComponent_Conditional_16_Template, 10, 0, "div", 5);
+            i0.ɵɵelementStart(17, "div", 6);
+            i0.ɵɵconditionalCreate(18, PerfPanelComponent_Case_18_Template, 1, 3, "perf-bundle-section", 7)(19, PerfPanelComponent_Case_19_Template, 1, 3, "perf-render-section", 8)(20, PerfPanelComponent_Case_20_Template, 1, 1, "perf-memory-section", 9);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            let tmp_6_0;
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.activeTab() === "bundle");
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("active", ctx.activeTab() === "render");
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("active", ctx.activeTab() === "memory");
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.renderService.cdRunCount() > 0 ? 14 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.activeTab() === "render" ? 15 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.activeTab() === "memory" ? 16 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional((tmp_6_0 = ctx.activeTab()) === "bundle" ? 18 : tmp_6_0 === "render" ? 19 : tmp_6_0 === "memory" ? 20 : -1);
+        } }, dependencies: [BundleSectionComponent, RenderSectionComponent, MemorySectionComponent], styles: [".prism-perf-panel[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 340px;\n    }\n    .prism-perf-subtabs[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      background: var(--prism-bg-elevated, #1a1535);\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      padding: 0 4px;\n    }\n    .prism-perf-subtab[_ngcontent-%COMP%] {\n      padding: 7px 12px;\n      font-size: 11px;\n      font-family: var(--prism-font-sans, system-ui);\n      font-weight: 500;\n      color: var(--prism-text-muted, #8476a2);\n      border: none;\n      background: none;\n      cursor: pointer;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      transition: color 0.12s;\n      letter-spacing: 0.01em;\n      user-select: none;\n    }\n    .prism-perf-subtab[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      bottom: -1px; left: 4px; right: 4px;\n      height: 2px;\n      background: var(--prism-primary, #a78bfa);\n      opacity: 0;\n    }\n    .prism-perf-subtab.active[_ngcontent-%COMP%] { color: var(--prism-primary, #a78bfa); }\n    .prism-perf-subtab.active[_ngcontent-%COMP%]::after { opacity: 1; }\n    .prism-perf-subtab-icon[_ngcontent-%COMP%] { font-size: 10px; opacity: 0.8; }\n    .prism-perf-cd-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 2px 8px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 12%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary, #a78bfa) 20%, transparent);\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-primary, #a78bfa);\n      margin-left: auto;\n    }\n    .prism-perf-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      background: var(--prism-bg-surface, #131022);\n      flex-shrink: 0;\n    }\n    .prism-perf-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      padding: 4px 10px;\n      border: 1px solid var(--prism-border-strong, rgba(255,255,255,0.16));\n      border-radius: 5px;\n      background: var(--prism-bg-elevated, #1a1535);\n      color: var(--prism-text-2, #b0a6c8);\n      font-family: var(--prism-font-sans, system-ui);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.1s, border-color 0.1s, color 0.1s;\n      user-select: none;\n    }\n    .prism-perf-btn[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 12%, var(--prism-bg-elevated, #1a1535));\n      border-color: color-mix(in srgb, var(--prism-primary, #a78bfa) 40%, transparent);\n      color: var(--prism-primary, #a78bfa);\n    }\n    .prism-perf-btn--primary[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 15%, var(--prism-bg-elevated, #1a1535));\n      border-color: color-mix(in srgb, var(--prism-primary, #a78bfa) 35%, transparent);\n      color: var(--prism-primary, #a78bfa);\n    }\n    .prism-perf-btn--primary[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 22%, var(--prism-bg-elevated, #1a1535));\n    }\n    .prism-perf-btn-icon[_ngcontent-%COMP%] { font-style: normal; font-size: 10px; }\n    .prism-perf-toolbar-spacer[_ngcontent-%COMP%] { flex: 1; }\n    .prism-perf-status[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--prism-text-ghost, #6a5d87);\n      font-family: var(--prism-font-mono, monospace);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .prism-perf-status-dot[_ngcontent-%COMP%] {\n      width: 5px; height: 5px;\n      border-radius: 50%;\n      background: var(--perf-ok, #4ade80);\n      box-shadow: 0 0 6px var(--perf-ok, #4ade80);\n      animation: _ngcontent-%COMP%_prism-perf-pulse 2s ease-in-out infinite;\n    }\n    @keyframes _ngcontent-%COMP%_prism-perf-pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.4; }\n    }\n    .prism-perf-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      background: var(--prism-bg-surface, #131022);\n      scrollbar-width: thin;\n      scrollbar-color: var(--prism-border, rgba(255,255,255,0.08)) transparent;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerfPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-perf-panel', standalone: true, imports: [BundleSectionComponent, RenderSectionComponent, MemorySectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="prism-perf-panel">
+      <div class="prism-perf-subtabs">
+        <button class="prism-perf-subtab" [class.active]="activeTab() === 'bundle'" (click)="activeTab.set('bundle')">
+          <span class="prism-perf-subtab-icon">&#128230;</span> Bundle
+        </button>
+        <button class="prism-perf-subtab" [class.active]="activeTab() === 'render'" (click)="activeTab.set('render')">
+          <span class="prism-perf-subtab-icon">&#9201;</span> Render
+        </button>
+        <button class="prism-perf-subtab" [class.active]="activeTab() === 'memory'" (click)="activeTab.set('memory')">
+          <span class="prism-perf-subtab-icon">&#129504;</span> Memory
+        </button>
+        @if (renderService.cdRunCount() > 0) {
+          <div class="prism-perf-cd-badge">{{ renderService.cdRunCount() }} CD runs</div>
+        }
+      </div>
+
+      @if (activeTab() === 'render') {
+        <div class="prism-perf-toolbar">
+          @if (renderService.isRecording()) {
+            <button class="prism-perf-btn prism-perf-btn--primary" (click)="renderService.stopRecording()">
+              <i class="prism-perf-btn-icon">&#9208;</i> Pause
+            </button>
+          } @else {
+            <button class="prism-perf-btn prism-perf-btn--primary" (click)="renderService.startRecording()">
+              <i class="prism-perf-btn-icon">&#9654;</i> Profile
+            </button>
+          }
+          <button class="prism-perf-btn" (click)="renderService.clear()">
+            <i class="prism-perf-btn-icon">&#10005;</i> Clear
+          </button>
+          <div class="prism-perf-toolbar-spacer"></div>
+          @if (renderService.isRecording()) {
+            <div class="prism-perf-status">
+              <div class="prism-perf-status-dot"></div>
+              live · {{ renderService.sampleCount() }} samples
+            </div>
+          }
+        </div>
+      }
+
+      @if (activeTab() === 'memory') {
+        <div class="prism-perf-toolbar">
+          <button class="prism-perf-btn prism-perf-btn--primary" (click)="captureMemorySnapshots()">
+            <i class="prism-perf-btn-icon">&#9654;</i> Snapshot
+          </button>
+          <button class="prism-perf-btn" (click)="memoryService.clear()">
+            <i class="prism-perf-btn-icon">&#10005;</i> Clear
+          </button>
+          <div class="prism-perf-toolbar-spacer"></div>
+        </div>
+      }
+
+      <div class="prism-perf-content">
+        @switch (activeTab()) {
+          @case ('bundle') {
+            <perf-bundle-section
+              [metrics]="bundleMetrics()"
+              [warnKb]="thresholds.bundleWarnKb"
+              [critKb]="thresholds.bundleCritKb"
+            />
+          }
+          @case ('render') {
+            <perf-render-section
+              [renderService]="renderService"
+              [warnMs]="thresholds.renderWarnMs"
+              [critMs]="thresholds.renderCritMs"
+            />
+          }
+          @case ('memory') {
+            <perf-memory-section [memoryService]="memoryService" />
+          }
+        }
+      </div>
+    </div>
+  `, styles: ["\n    .prism-perf-panel {\n      display: flex;\n      flex-direction: column;\n      height: 340px;\n    }\n    .prism-perf-subtabs {\n      display: flex;\n      align-items: center;\n      background: var(--prism-bg-elevated, #1a1535);\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      padding: 0 4px;\n    }\n    .prism-perf-subtab {\n      padding: 7px 12px;\n      font-size: 11px;\n      font-family: var(--prism-font-sans, system-ui);\n      font-weight: 500;\n      color: var(--prism-text-muted, #8476a2);\n      border: none;\n      background: none;\n      cursor: pointer;\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      transition: color 0.12s;\n      letter-spacing: 0.01em;\n      user-select: none;\n    }\n    .prism-perf-subtab::after {\n      content: '';\n      position: absolute;\n      bottom: -1px; left: 4px; right: 4px;\n      height: 2px;\n      background: var(--prism-primary, #a78bfa);\n      opacity: 0;\n    }\n    .prism-perf-subtab.active { color: var(--prism-primary, #a78bfa); }\n    .prism-perf-subtab.active::after { opacity: 1; }\n    .prism-perf-subtab-icon { font-size: 10px; opacity: 0.8; }\n    .prism-perf-cd-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 2px 8px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 12%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary, #a78bfa) 20%, transparent);\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-primary, #a78bfa);\n      margin-left: auto;\n    }\n    .prism-perf-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      background: var(--prism-bg-surface, #131022);\n      flex-shrink: 0;\n    }\n    .prism-perf-btn {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      padding: 4px 10px;\n      border: 1px solid var(--prism-border-strong, rgba(255,255,255,0.16));\n      border-radius: 5px;\n      background: var(--prism-bg-elevated, #1a1535);\n      color: var(--prism-text-2, #b0a6c8);\n      font-family: var(--prism-font-sans, system-ui);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.1s, border-color 0.1s, color 0.1s;\n      user-select: none;\n    }\n    .prism-perf-btn:hover {\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 12%, var(--prism-bg-elevated, #1a1535));\n      border-color: color-mix(in srgb, var(--prism-primary, #a78bfa) 40%, transparent);\n      color: var(--prism-primary, #a78bfa);\n    }\n    .prism-perf-btn--primary {\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 15%, var(--prism-bg-elevated, #1a1535));\n      border-color: color-mix(in srgb, var(--prism-primary, #a78bfa) 35%, transparent);\n      color: var(--prism-primary, #a78bfa);\n    }\n    .prism-perf-btn--primary:hover {\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 22%, var(--prism-bg-elevated, #1a1535));\n    }\n    .prism-perf-btn-icon { font-style: normal; font-size: 10px; }\n    .prism-perf-toolbar-spacer { flex: 1; }\n    .prism-perf-status {\n      font-size: 10px;\n      color: var(--prism-text-ghost, #6a5d87);\n      font-family: var(--prism-font-mono, monospace);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .prism-perf-status-dot {\n      width: 5px; height: 5px;\n      border-radius: 50%;\n      background: var(--perf-ok, #4ade80);\n      box-shadow: 0 0 6px var(--perf-ok, #4ade80);\n      animation: prism-perf-pulse 2s ease-in-out infinite;\n    }\n    @keyframes prism-perf-pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.4; }\n    }\n    .prism-perf-content {\n      flex: 1;\n      overflow-y: auto;\n      background: var(--prism-bg-surface, #131022);\n      scrollbar-width: thin;\n      scrollbar-color: var(--prism-border, rgba(255,255,255,0.08)) transparent;\n    }\n  "] }]
+    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerfPanelComponent, { className: "PerfPanelComponent", filePath: "perf-panel.component.ts", lineNumber: 215 }); })();

package/dist/perf-plugin.browser.d.ts

@@ -0,0 +1,4 @@
+import type { NgPrismPlugin } from '@ng-prism/core/plugin';
+import type { PerfPluginOptions } from './perf.types.js';
+export declare function perfPlugin(_options?: PerfPluginOptions): NgPrismPlugin;
+//# sourceMappingURL=perf-plugin.browser.d.ts.map

package/dist/perf-plugin.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf-plugin.browser.d.ts","sourceRoot":"","sources":["../src/perf-plugin.browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,wBAAgB,UAAU,CAAC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,aAAa,CActE"}

package/dist/perf-plugin.browser.js

@@ -0,0 +1,14 @@
+export function perfPlugin(_options) {
+    return {
+        name: '@ng-prism/plugin-perf',
+        panels: [
+            {
+                id: 'perf',
+                label: 'Performance',
+                loadComponent: () => import('./perf-panel.component.js').then((m) => m.PerfPanelComponent),
+                position: 'bottom',
+                placement: 'view',
+            },
+        ],
+    };
+}

package/dist/perf-plugin.d.ts

@@ -0,0 +1,4 @@
+import type { NgPrismPlugin } from '@ng-prism/core/plugin';
+import type { PerfPluginOptions } from './perf.types.js';
+export declare function perfPlugin(options?: PerfPluginOptions): NgPrismPlugin;
+//# sourceMappingURL=perf-plugin.d.ts.map

package/dist/perf-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf-plugin.d.ts","sourceRoot":"","sources":["../src/perf-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,wBAAgB,UAAU,CAAC,OAAO,CAAC,EAAE,iBAAiB,GAAG,aAAa,CA+BrE"}

package/dist/perf-plugin.js

@@ -0,0 +1,27 @@
+import { scanBundle } from './bundle/bundle-scanner.js';
+export function perfPlugin(options) {
+    return {
+        name: '@ng-prism/plugin-perf',
+        async onComponentScanned(component) {
+            const bundle = scanBundle(component.filePath, options?.bundle?.maxTreeDepth ?? 5);
+            return {
+                ...component,
+                showcaseConfig: {
+                    ...component.showcaseConfig,
+                    meta: {
+                        ...component.showcaseConfig.meta,
+                        perf: { bundle },
+                    },
+                },
+            };
+        },
+        panels: [
+            {
+                id: 'perf',
+                label: 'Performance',
+                loadComponent: () => import('./perf-panel.component.js').then((m) => m.PerfPanelComponent),
+                position: 'bottom',
+            },
+        ],
+    };
+}

package/dist/perf.types.d.ts

@@ -0,0 +1,31 @@
+export interface BundleMetrics {
+    sourceSize: number;
+    gzipEstimate: number;
+    directImports: number;
+    importList: string[];
+    treeDepth: number;
+}
+export interface PerfThresholds {
+    bundleWarnKb: number;
+    bundleCritKb: number;
+    renderWarnMs: number;
+    renderCritMs: number;
+    memoryWarnMb: number;
+    memoryLeakMb: number;
+}
+export interface PerfPluginOptions {
+    thresholds?: Partial<PerfThresholds>;
+    bundle?: {
+        maxTreeDepth?: number;
+        excludeImports?: string[];
+    };
+    render?: {
+        bufferSize?: number;
+        autoStart?: boolean;
+    };
+    memory?: {
+        gcDelayMs?: number;
+    };
+}
+export declare const DEFAULT_THRESHOLDS: PerfThresholds;
+//# sourceMappingURL=perf.types.d.ts.map

package/dist/perf.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf.types.d.ts","sourceRoot":"","sources":["../src/perf.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE;QACP,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;KAC3B,CAAC;IACF,MAAM,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,kBAAkB,EAAE,cAOhC,CAAC"}

package/dist/perf.types.js

@@ -0,0 +1,8 @@
+export const DEFAULT_THRESHOLDS = {
+    bundleWarnKb: 20,
+    bundleCritKb: 50,
+    renderWarnMs: 5,
+    renderCritMs: 16,
+    memoryWarnMb: 5,
+    memoryLeakMb: 0.5,
+};

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

@@ -0,0 +1,19 @@
+export declare class PerfRenderService {
+    static getInstance(): PerfRenderService;
+    readonly isRecording: import("@angular/core").WritableSignal<boolean>;
+    readonly initialRender: import("@angular/core").WritableSignal<number | null>;
+    readonly rerenders: import("@angular/core").WritableSignal<number[]>;
+    readonly cdRunCount: import("@angular/core").WritableSignal<number>;
+    private observer;
+    private bufferSize;
+    readonly avgRerender: import("@angular/core").Signal<number>;
+    readonly p95Rerender: import("@angular/core").Signal<number>;
+    readonly maxRerender: import("@angular/core").Signal<number>;
+    readonly lastRerender: import("@angular/core").Signal<number | null>;
+    readonly sampleCount: import("@angular/core").Signal<number>;
+    configure(bufferSize: number): void;
+    startRecording(): void;
+    stopRecording(): void;
+    clear(): void;
+}
+//# sourceMappingURL=perf-render.service.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"perf-render.service.d.ts","sourceRoot":"","sources":["../../src/render/perf-render.service.ts"],"names":[],"mappings":"AAIA,qBAAa,iBAAiB;IAC5B,MAAM,CAAC,WAAW,IAAI,iBAAiB;IAKvC,QAAQ,CAAC,WAAW,kDAAiB;IACrC,QAAQ,CAAC,aAAa,wDAA+B;IACrD,QAAQ,CAAC,SAAS,mDAAwB;IAC1C,QAAQ,CAAC,UAAU,iDAAa;IAEhC,OAAO,CAAC,QAAQ,CAAoC;IACpD,OAAO,CAAC,UAAU,CAAM;IAExB,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,WAAW,yCAMjB;IAEH,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,YAAY,gDAGlB;IAEH,QAAQ,CAAC,WAAW,yCAA2C;IAE/D,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAInC,cAAc,IAAI,IAAI;IAqBtB,aAAa,IAAI,IAAI;IAMrB,KAAK,IAAI,IAAI;CAKd"}

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

@@ -0,0 +1,73 @@
+import { signal, computed } from '@angular/core';
+let instance = null;
+export class PerfRenderService {
+    static getInstance() {
+        if (!instance)
+            instance = new PerfRenderService();
+        return instance;
+    }
+    isRecording = signal(false, ...(ngDevMode ? [{ debugName: "isRecording" }] : []));
+    initialRender = signal(null, ...(ngDevMode ? [{ debugName: "initialRender" }] : []));
+    rerenders = signal([], ...(ngDevMode ? [{ debugName: "rerenders" }] : []));
+    cdRunCount = signal(0, ...(ngDevMode ? [{ debugName: "cdRunCount" }] : []));
+    observer = null;
+    bufferSize = 50;
+    avgRerender = computed(() => {
+        const samples = this.rerenders();
+        if (samples.length === 0)
+            return 0;
+        return samples.reduce((a, b) => a + b, 0) / samples.length;
+    }, ...(ngDevMode ? [{ debugName: "avgRerender" }] : []));
+    p95Rerender = computed(() => {
+        const samples = this.rerenders();
+        if (samples.length === 0)
+            return 0;
+        const sorted = [...samples].sort((a, b) => a - b);
+        const idx = Math.ceil(sorted.length * 0.95) - 1;
+        return sorted[idx];
+    }, ...(ngDevMode ? [{ debugName: "p95Rerender" }] : []));
+    maxRerender = computed(() => {
+        const samples = this.rerenders();
+        if (samples.length === 0)
+            return 0;
+        return Math.max(...samples);
+    }, ...(ngDevMode ? [{ debugName: "maxRerender" }] : []));
+    lastRerender = computed(() => {
+        const samples = this.rerenders();
+        return samples.length > 0 ? samples[samples.length - 1] : null;
+    }, ...(ngDevMode ? [{ debugName: "lastRerender" }] : []));
+    sampleCount = computed(() => this.rerenders().length, ...(ngDevMode ? [{ debugName: "sampleCount" }] : []));
+    configure(bufferSize) {
+        this.bufferSize = bufferSize;
+    }
+    startRecording() {
+        if (this.isRecording())
+            return;
+        this.isRecording.set(true);
+        this.observer = new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+                if (entry.name === 'prism:render') {
+                    this.initialRender.set(entry.duration);
+                }
+                else if (entry.name === 'prism:rerender') {
+                    this.cdRunCount.update((c) => c + 1);
+                    this.rerenders.update((arr) => {
+                        const next = [...arr, entry.duration];
+                        return next.length > this.bufferSize ? next.slice(-this.bufferSize) : next;
+                    });
+                }
+            }
+        });
+        this.observer.observe({ type: 'measure', buffered: true });
+    }
+    stopRecording() {
+        this.isRecording.set(false);
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    clear() {
+        this.initialRender.set(null);
+        this.rerenders.set([]);
+        this.cdRunCount.set(0);
+    }
+}

package/dist/render/render-section.component.d.ts

@@ -0,0 +1,13 @@
+import type { PerfRenderService } from './perf-render.service.js';
+import * as i0 from "@angular/core";
+export declare class RenderSectionComponent {
+    readonly renderService: import("@angular/core").InputSignal<PerfRenderService>;
+    readonly warnMs: import("@angular/core").InputSignal<number>;
+    readonly critMs: import("@angular/core").InputSignal<number>;
+    readonly initialClass: import("@angular/core").Signal<"warn" | "" | "crit">;
+    formatMs(value: number | null): string;
+    colorFor(value: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RenderSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RenderSectionComponent, "perf-render-section", never, { "renderService": { "alias": "renderService"; "required": true; "isSignal": true; }; "warnMs": { "alias": "warnMs"; "required": false; "isSignal": true; }; "critMs": { "alias": "critMs"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=render-section.component.d.ts.map

package/dist/render/render-section.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-section.component.d.ts","sourceRoot":"","sources":["../../src/render/render-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAGlE,qBAsJa,sBAAsB;IACjC,QAAQ,CAAC,aAAa,yDAAuC;IAC7D,QAAQ,CAAC,MAAM,8CAAY;IAC3B,QAAQ,CAAC,MAAM,8CAAa;IAE5B,QAAQ,CAAC,YAAY,uDAMlB;IAEH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;IAKtC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;yCAlBpB,sBAAsB;2CAAtB,sBAAsB;CAuBlC"}