@ng-prism/plugin-perf 21.0.0

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

@@ -0,0 +1,205 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { SparklineComponent } from './sparkline.component.js';
+import * as i0 from "@angular/core";
+function RenderSectionComponent_Conditional_0_Conditional_0_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 11)(2, "span", 3);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 12);
+    i0.ɵɵtext(5, " avg ");
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(8, " \u00B7 max ");
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(11, "perf-sparkline", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const svc_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Render Time Trace \u2014 last ", svc_r1.sampleCount(), " samples");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", ctx_r1.formatMs(svc_r1.avgRerender()), " ms");
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("color", ctx_r1.colorFor(svc_r1.maxRerender()));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r1.formatMs(svc_r1.maxRerender()), " ms");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("samples", svc_r1.rerenders())("thresholdWarn", ctx_r1.warnMs());
+} }
+function RenderSectionComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
+    i0.ɵɵtext(3, "Initial Render");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 4);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(6, "span", 5);
+    i0.ɵɵtext(7, "ms");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(8, "div", 6)(9, "div", 7)(10, "span", 3);
+    i0.ɵɵtext(11, "Avg Re-render");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 8);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementStart(14, "span", 5);
+    i0.ɵɵtext(15, " ms");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "span", 9);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 7)(19, "span", 3);
+    i0.ɵɵtext(20, "Slowest");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "span", 8);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementStart(23, "span", 5);
+    i0.ɵɵtext(24, " ms");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(25, "div", 7)(26, "span", 3);
+    i0.ɵɵtext(27, "p95");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "span", 8);
+    i0.ɵɵtext(29);
+    i0.ɵɵelementStart(30, "span", 5);
+    i0.ɵɵtext(31, " ms");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(32, "div", 7)(33, "span", 3);
+    i0.ɵɵtext(34, "Last Render");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(35, "span", 8);
+    i0.ɵɵtext(36);
+    i0.ɵɵelementStart(37, "span", 5);
+    i0.ɵɵtext(38, " ms");
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵconditionalCreate(39, RenderSectionComponent_Conditional_0_Conditional_0_Conditional_39_Template, 12, 7, "div", 10);
+} if (rf & 2) {
+    const svc_r1 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassMap(ctx_r1.initialClass());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMs(svc_r1.initialRender()));
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.formatMs(svc_r1.avgRerender()));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", svc_r1.sampleCount(), " samples");
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("color", ctx_r1.colorFor(svc_r1.maxRerender()));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.formatMs(svc_r1.maxRerender()));
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.formatMs(svc_r1.p95Rerender()));
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.formatMs(svc_r1.lastRerender()));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(svc_r1.rerenders().length > 1 ? 39 : -1);
+} }
+function RenderSectionComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0)(1, "div", 14);
+    i0.ɵɵtext(2, "\u23F1");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 15);
+    i0.ɵɵtext(4, "No profiling data yet");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 16);
+    i0.ɵɵtext(6, "Click Profile to start recording render times");
+    i0.ɵɵelementEnd()();
+} }
+function RenderSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RenderSectionComponent_Conditional_0_Conditional_0_Template, 40, 11)(1, RenderSectionComponent_Conditional_0_Conditional_1_Template, 7, 0, "div", 0);
+} if (rf & 2) {
+    const svc_r1 = ctx;
+    i0.ɵɵconditional(svc_r1.initialRender() !== null || svc_r1.rerenders().length > 0 ? 0 : 1);
+} }
+export class RenderSectionComponent {
+    renderService = input.required(...(ngDevMode ? [{ debugName: "renderService" }] : []));
+    warnMs = input(5, ...(ngDevMode ? [{ debugName: "warnMs" }] : []));
+    critMs = input(16, ...(ngDevMode ? [{ debugName: "critMs" }] : []));
+    initialClass = computed(() => {
+        const v = this.renderService().initialRender();
+        if (v === null)
+            return '';
+        if (v >= this.critMs())
+            return 'crit';
+        if (v >= this.warnMs())
+            return 'warn';
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "initialClass" }] : []));
+    formatMs(value) {
+        if (value === null)
+            return '—';
+        return value < 10 ? value.toFixed(2) : value.toFixed(1);
+    }
+    colorFor(value) {
+        if (value >= this.critMs())
+            return 'var(--perf-crit, #f87171)';
+        if (value >= this.warnMs())
+            return 'var(--perf-warn, #fbbf24)';
+        return 'var(--prism-text, #ede9f8)';
+    }
+    static ɵfac = function RenderSectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RenderSectionComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RenderSectionComponent, selectors: [["perf-render-section"]], inputs: { renderService: [1, "renderService"], warnMs: [1, "warnMs"], critMs: [1, "critMs"] }, decls: 1, vars: 1, consts: [[1, "prism-perf-empty"], [1, "prism-perf-render-hero"], [1, "prism-perf-render-hero-main"], [1, "prism-perf-label"], [1, "prism-perf-render-hero-value"], [1, "prism-perf-unit"], [1, "prism-perf-render-stats-grid"], [1, "prism-perf-render-stat"], [1, "prism-perf-render-stat-value"], [1, "prism-perf-sub"], [1, "prism-perf-sparkline-section"], [1, "prism-perf-sparkline-header"], [1, "prism-perf-sparkline-legend"], [3, "samples", "thresholdWarn"], [1, "prism-perf-empty-icon"], [1, "prism-perf-empty-text"], [1, "prism-perf-empty-hint"]], template: function RenderSectionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RenderSectionComponent_Conditional_0_Template, 2, 1);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.renderService()) ? 0 : -1, tmp_0_0);
+        } }, dependencies: [SparklineComponent], styles: [".prism-perf-render-hero[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-render-hero-main[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      border-right: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .prism-perf-render-hero-value[_ngcontent-%COMP%] {\n      font-size: 34px;\n      font-family: var(--prism-font-mono, monospace);\n      font-weight: 600;\n      color: var(--perf-ok, #4ade80);\n      line-height: 1;\n      letter-spacing: -0.02em;\n    }\n    .prism-perf-render-hero-value.warn[_ngcontent-%COMP%] { color: var(--perf-warn, #fbbf24); }\n    .prism-perf-render-hero-value.crit[_ngcontent-%COMP%] { color: var(--perf-crit, #f87171); }\n    .prism-perf-render-stats-grid[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 14px 20px;\n    }\n    .prism-perf-render-stat[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .prism-perf-render-stat-value[_ngcontent-%COMP%] {\n      font-size: 16px;\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-sparkline-section[_ngcontent-%COMP%] {\n      padding: 12px 16px 14px;\n      border-top: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-sparkline-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 10px;\n    }\n    .prism-perf-sparkline-legend[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost, #6a5d87);\n    }\n    .prism-perf-sparkline-legend[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      color: var(--prism-primary, #a78bfa);\n    }\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-unit[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 400;\n      color: var(--prism-text-muted, #8476a2);\n      margin-left: 4px;\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-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(RenderSectionComponent, [{
+        type: Component,
+        args: [{ selector: 'perf-render-section', standalone: true, imports: [SparklineComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (renderService(); as svc) {
+      @if (svc.initialRender() !== null || svc.rerenders().length > 0) {
+        <div class="prism-perf-render-hero">
+          <div class="prism-perf-render-hero-main">
+            <div class="prism-perf-label">Initial Render</div>
+            <div class="prism-perf-render-hero-value" [class]="initialClass()">
+              {{ formatMs(svc.initialRender()) }}<span class="prism-perf-unit">ms</span>
+            </div>
+          </div>
+          <div class="prism-perf-render-stats-grid">
+            <div class="prism-perf-render-stat">
+              <span class="prism-perf-label">Avg Re-render</span>
+              <span class="prism-perf-render-stat-value">{{ formatMs(svc.avgRerender()) }}<span class="prism-perf-unit"> ms</span></span>
+              <span class="prism-perf-sub">{{ svc.sampleCount() }} samples</span>
+            </div>
+            <div class="prism-perf-render-stat">
+              <span class="prism-perf-label">Slowest</span>
+              <span class="prism-perf-render-stat-value" [style.color]="colorFor(svc.maxRerender())">{{ formatMs(svc.maxRerender()) }}<span class="prism-perf-unit"> ms</span></span>
+            </div>
+            <div class="prism-perf-render-stat">
+              <span class="prism-perf-label">p95</span>
+              <span class="prism-perf-render-stat-value">{{ formatMs(svc.p95Rerender()) }}<span class="prism-perf-unit"> ms</span></span>
+            </div>
+            <div class="prism-perf-render-stat">
+              <span class="prism-perf-label">Last Render</span>
+              <span class="prism-perf-render-stat-value">{{ formatMs(svc.lastRerender()) }}<span class="prism-perf-unit"> ms</span></span>
+            </div>
+          </div>
+        </div>
+
+        @if (svc.rerenders().length > 1) {
+          <div class="prism-perf-sparkline-section">
+            <div class="prism-perf-sparkline-header">
+              <span class="prism-perf-label">Render Time Trace — last {{ svc.sampleCount() }} samples</span>
+              <div class="prism-perf-sparkline-legend">
+                avg <span>{{ formatMs(svc.avgRerender()) }} ms</span> · max <span [style.color]="colorFor(svc.maxRerender())">{{ formatMs(svc.maxRerender()) }} ms</span>
+              </div>
+            </div>
+            <perf-sparkline [samples]="svc.rerenders()" [thresholdWarn]="warnMs()" />
+          </div>
+        }
+      } @else {
+        <div class="prism-perf-empty">
+          <div class="prism-perf-empty-icon">&#9201;</div>
+          <div class="prism-perf-empty-text">No profiling data yet</div>
+          <div class="prism-perf-empty-hint">Click Profile to start recording render times</div>
+        </div>
+      }
+    }
+  `, styles: ["\n    .prism-perf-render-hero {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-render-hero-main {\n      padding: 16px 20px;\n      border-right: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .prism-perf-render-hero-value {\n      font-size: 34px;\n      font-family: var(--prism-font-mono, monospace);\n      font-weight: 600;\n      color: var(--perf-ok, #4ade80);\n      line-height: 1;\n      letter-spacing: -0.02em;\n    }\n    .prism-perf-render-hero-value.warn { color: var(--perf-warn, #fbbf24); }\n    .prism-perf-render-hero-value.crit { color: var(--perf-crit, #f87171); }\n    .prism-perf-render-stats-grid {\n      padding: 12px 16px;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 14px 20px;\n    }\n    .prism-perf-render-stat {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .prism-perf-render-stat-value {\n      font-size: 16px;\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-sparkline-section {\n      padding: 12px 16px 14px;\n      border-top: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-sparkline-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 10px;\n    }\n    .prism-perf-sparkline-legend {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost, #6a5d87);\n    }\n    .prism-perf-sparkline-legend span {\n      color: var(--prism-primary, #a78bfa);\n    }\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-unit {\n      font-size: 12px;\n      font-weight: 400;\n      color: var(--prism-text-muted, #8476a2);\n      margin-left: 4px;\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-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, { renderService: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderService", required: true }] }], warnMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "warnMs", required: false }] }], critMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "critMs", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RenderSectionComponent, { className: "RenderSectionComponent", filePath: "render/render-section.component.ts", lineNumber: 155 }); })();

package/dist/render/sparkline.component.d.ts

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+export declare class SparklineComponent {
+    readonly samples: import("@angular/core").InputSignal<number[]>;
+    readonly thresholdWarn: import("@angular/core").InputSignal<number>;
+    readonly height: import("@angular/core").InputSignal<number>;
+    private readonly points;
+    readonly linePath: import("@angular/core").Signal<string>;
+    readonly areaPath: import("@angular/core").Signal<string>;
+    readonly warnY: import("@angular/core").Signal<number | null>;
+    readonly peakPoint: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+        value: number;
+    } | null>;
+    readonly currentPoint: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+        value: number;
+    } | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SparklineComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SparklineComponent, "perf-sparkline", never, { "samples": { "alias": "samples"; "required": false; "isSignal": true; }; "thresholdWarn": { "alias": "thresholdWarn"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sparkline.component.d.ts.map

package/dist/render/sparkline.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../src/render/sparkline.component.ts"],"names":[],"mappings":";AAEA,qBAoDa,kBAAkB;IAC7B,QAAQ,CAAC,OAAO,gDAAuB;IACvC,QAAQ,CAAC,aAAa,8CAAY;IAClC,QAAQ,CAAC,MAAM,8CAAa;IAE5B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAapB;IAEH,QAAQ,CAAC,QAAQ,yCAId;IAEH,QAAQ,CAAC,QAAQ,yCAMd;IAEH,QAAQ,CAAC,KAAK,gDAMX;IAEH,QAAQ,CAAC,SAAS;;;;cAQf;IAEH,QAAQ,CAAC,YAAY;;;;cAGlB;yCAvDQ,kBAAkB;2CAAlB,kBAAkB;CAwD9B"}

package/dist/render/sparkline.component.js

@@ -0,0 +1,165 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import * as i0 from "@angular/core";
+function SparklineComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "line", 12);
+    i0.ɵɵdomElementStart(1, "text", 13);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("x1", 0)("y1", ctx_r0.warnY())("x2", 600)("y2", ctx_r0.warnY());
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x", 3)("y", ctx_r0.warnY() - 3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r0.thresholdWarn(), "ms");
+} }
+function SparklineComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "circle", 11);
+} if (rf & 2) {
+    const peak_r2 = ctx;
+    i0.ɵɵattribute("cx", peak_r2.x)("cy", peak_r2.y);
+} }
+function SparklineComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElement(0, "circle", 14);
+    i0.ɵɵdomElementStart(1, "circle", 15);
+    i0.ɵɵdomElement(2, "animate", 16)(3, "animate", 17);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const current_r3 = ctx;
+    i0.ɵɵattribute("cx", current_r3.x)("cy", current_r3.y);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("cx", current_r3.x)("cy", current_r3.y);
+} }
+export class SparklineComponent {
+    samples = input([], ...(ngDevMode ? [{ debugName: "samples" }] : []));
+    thresholdWarn = input(5, ...(ngDevMode ? [{ debugName: "thresholdWarn" }] : []));
+    height = input(52, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    points = computed(() => {
+        const data = this.samples();
+        const h = this.height();
+        if (data.length === 0)
+            return [];
+        const max = Math.max(...data, this.thresholdWarn() * 1.2);
+        const step = data.length > 1 ? 600 / (data.length - 1) : 300;
+        return data.map((v, i) => ({
+            x: i * step,
+            y: h - 4 - ((v / max) * (h - 8)),
+            value: v,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "points" }] : []));
+    linePath = computed(() => {
+        const pts = this.points();
+        if (pts.length === 0)
+            return '';
+        return 'M' + pts.map((p) => `${p.x},${p.y}`).join(' L');
+    }, ...(ngDevMode ? [{ debugName: "linePath" }] : []));
+    areaPath = computed(() => {
+        const pts = this.points();
+        const h = this.height();
+        if (pts.length === 0)
+            return '';
+        const line = pts.map((p) => `${p.x},${p.y}`).join(' L');
+        return `M${pts[0].x},${h} L${line} L${pts[pts.length - 1].x},${h} Z`;
+    }, ...(ngDevMode ? [{ debugName: "areaPath" }] : []));
+    warnY = computed(() => {
+        const data = this.samples();
+        const h = this.height();
+        if (data.length === 0)
+            return null;
+        const max = Math.max(...data, this.thresholdWarn() * 1.2);
+        return h - 4 - ((this.thresholdWarn() / max) * (h - 8));
+    }, ...(ngDevMode ? [{ debugName: "warnY" }] : []));
+    peakPoint = computed(() => {
+        const pts = this.points();
+        if (pts.length < 2)
+            return null;
+        let peak = pts[0];
+        for (const p of pts) {
+            if (p.value > peak.value)
+                peak = p;
+        }
+        return peak.value > this.thresholdWarn() ? peak : null;
+    }, ...(ngDevMode ? [{ debugName: "peakPoint" }] : []));
+    currentPoint = computed(() => {
+        const pts = this.points();
+        return pts.length > 0 ? pts[pts.length - 1] : null;
+    }, ...(ngDevMode ? [{ debugName: "currentPoint" }] : []));
+    static ɵfac = function SparklineComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SparklineComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SparklineComponent, selectors: [["perf-sparkline"]], inputs: { samples: [1, "samples"], thresholdWarn: [1, "thresholdWarn"], height: [1, "height"] }, decls: 16, vars: 6, consts: [[1, "prism-perf-sparkline-wrap"], ["preserveAspectRatio", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "prism-perf-sparkline-svg"], ["id", "perf-sparkg", "x1", "0", "y1", "0", "x2", "0", "y2", "1"], ["offset", "0%", "stop-color", "#a78bfa", "stop-opacity", "0.35"], ["offset", "100%", "stop-color", "#a78bfa", "stop-opacity", "0.0"], ["id", "perf-glow"], ["stdDeviation", "1.5", "result", "coloredBlur"], ["in", "coloredBlur"], ["in", "SourceGraphic"], ["fill", "url(#perf-sparkg)"], ["fill", "none", "stroke", "#a78bfa", "stroke-width", "1.5", "filter", "url(#perf-glow)"], ["r", "3", "fill", "#fbbf24", "filter", "url(#perf-glow)"], ["stroke", "#fbbf24", "stroke-width", "0.8", "stroke-dasharray", "4 4", "opacity", "0.4"], ["font-size", "8", "fill", "#fbbf24", "opacity", "0.5", "font-family", "monospace"], ["r", "2.5", "fill", "#a78bfa"], ["r", "5", "fill", "none", "stroke", "#a78bfa", "stroke-width", "1", "opacity", "0.4"], ["attributeName", "r", "values", "3;7", "dur", "1.5s", "repeatCount", "indefinite"], ["attributeName", "opacity", "values", "0.4;0", "dur", "1.5s", "repeatCount", "indefinite"]], template: function SparklineComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵdomElementStart(1, "svg", 1)(2, "defs")(3, "linearGradient", 2);
+            i0.ɵɵdomElement(4, "stop", 3)(5, "stop", 4);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(6, "filter", 5);
+            i0.ɵɵdomElement(7, "feGaussianBlur", 6);
+            i0.ɵɵdomElementStart(8, "feMerge");
+            i0.ɵɵdomElement(9, "feMergeNode", 7)(10, "feMergeNode", 8);
+            i0.ɵɵdomElementEnd()()();
+            i0.ɵɵconditionalCreate(11, SparklineComponent_Conditional_11_Template, 3, 7);
+            i0.ɵɵdomElement(12, "path", 9)(13, "path", 10);
+            i0.ɵɵconditionalCreate(14, SparklineComponent_Conditional_14_Template, 1, 2, ":svg:circle", 11);
+            i0.ɵɵconditionalCreate(15, SparklineComponent_Conditional_15_Template, 4, 4);
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            let tmp_4_0;
+            let tmp_5_0;
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("viewBox", "0 0 600 " + ctx.height());
+            i0.ɵɵadvance(10);
+            i0.ɵɵconditional(ctx.warnY() !== null ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("d", ctx.areaPath());
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("d", ctx.linePath());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_4_0 = ctx.peakPoint()) ? 14 : -1, tmp_4_0);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_5_0 = ctx.currentPoint()) ? 15 : -1, tmp_5_0);
+        } }, styles: [".prism-perf-sparkline-wrap[_ngcontent-%COMP%] {\n      position: relative;\n    }\n    .prism-perf-sparkline-svg[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 52px;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SparklineComponent, [{
+        type: Component,
+        args: [{ selector: 'perf-sparkline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="prism-perf-sparkline-wrap">
+      <svg class="prism-perf-sparkline-svg" [attr.viewBox]="'0 0 600 ' + height()" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="perf-sparkg" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#a78bfa" stop-opacity="0.35"/>
+            <stop offset="100%" stop-color="#a78bfa" stop-opacity="0.0"/>
+          </linearGradient>
+          <filter id="perf-glow">
+            <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
+            <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
+          </filter>
+        </defs>
+
+        @if (warnY() !== null) {
+          <line [attr.x1]="0" [attr.y1]="warnY()" [attr.x2]="600" [attr.y2]="warnY()"
+                stroke="#fbbf24" stroke-width="0.8" stroke-dasharray="4 4" opacity="0.4"/>
+          <text [attr.x]="3" [attr.y]="warnY()! - 3" font-size="8" fill="#fbbf24" opacity="0.5"
+                font-family="monospace">{{ thresholdWarn() }}ms</text>
+        }
+
+        <path [attr.d]="areaPath()" fill="url(#perf-sparkg)"/>
+        <path [attr.d]="linePath()" fill="none" stroke="#a78bfa" stroke-width="1.5" filter="url(#perf-glow)"/>
+
+        @if (peakPoint(); as peak) {
+          <circle [attr.cx]="peak.x" [attr.cy]="peak.y" r="3" fill="#fbbf24" filter="url(#perf-glow)"/>
+        }
+
+        @if (currentPoint(); as current) {
+          <circle [attr.cx]="current.x" [attr.cy]="current.y" r="2.5" fill="#a78bfa"/>
+          <circle [attr.cx]="current.x" [attr.cy]="current.y" r="5" fill="none" stroke="#a78bfa" stroke-width="1" opacity="0.4">
+            <animate attributeName="r" values="3;7" dur="1.5s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0.4;0" dur="1.5s" repeatCount="indefinite"/>
+          </circle>
+        }
+      </svg>
+    </div>
+  `, styles: ["\n    .prism-perf-sparkline-wrap {\n      position: relative;\n    }\n    .prism-perf-sparkline-svg {\n      width: 100%;\n      height: 52px;\n    }\n  "] }]
+    }], null, { samples: [{ type: i0.Input, args: [{ isSignal: true, alias: "samples", required: false }] }], thresholdWarn: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholdWarn", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SparklineComponent, { className: "SparklineComponent", filePath: "render/sparkline.component.ts", lineNumber: 55 }); })();

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ng-prism/plugin-perf",
+  "version": "21.0.0",
+  "description": "Performance profiling panel for ng-prism — bundle size, render time, memory footprint.",
+  "keywords": [
+    "@ng-prism/core",
+    "performance",
+    "profiling",
+    "plugin",
+    "angular",
+    "styleguide"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/index.browser.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=20.0.0",
+    "typescript": ">=5.0.0",
+    "@ng-prism/core": ">=21.0.0"
+  },
+  "devDependencies": {
+    "@ng-prism/core": "*"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dyingangel666/ng-prism.git",
+    "directory": "packages/plugin-perf"
+  },
+  "homepage": "https://dyingangel666.github.io/ng-prism/",
+  "bugs": "https://github.com/dyingangel666/ng-prism/issues"
+}