@ng-prism/plugin-perf 21.0.0

package/dist/bundle/bundle-scanner.d.ts

@@ -0,0 +1,3 @@
+import type { BundleMetrics } from '../perf.types.js';
+export declare function scanBundle(filePath: string, maxTreeDepth?: number): BundleMetrics;
+//# sourceMappingURL=bundle-scanner.d.ts.map

package/dist/bundle/bundle-scanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-scanner.d.ts","sourceRoot":"","sources":["../../src/bundle/bundle-scanner.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,SAAI,GAAG,aAAa,CAkB5E"}

package/dist/bundle/bundle-scanner.js

@@ -0,0 +1,85 @@
+import { readFileSync } from 'fs';
+import { gzipSync } from 'zlib';
+import { dirname, resolve, extname } from 'path';
+import ts from 'typescript';
+export function scanBundle(filePath, maxTreeDepth = 5) {
+    const source = readFileSync(filePath, 'utf-8');
+    const sourceSize = Buffer.byteLength(source, 'utf-8');
+    let gzipEstimate;
+    try {
+        gzipEstimate = gzipSync(Buffer.from(source)).length;
+    }
+    catch {
+        gzipEstimate = Math.round(sourceSize * 0.31);
+    }
+    const sourceFile = ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true);
+    const importList = extractImports(sourceFile);
+    const directImports = importList.length;
+    const treeDepth = computeTreeDepth(filePath, importList, maxTreeDepth);
+    return { sourceSize, gzipEstimate, directImports, importList, treeDepth };
+}
+function extractImports(sourceFile) {
+    const imports = [];
+    ts.forEachChild(sourceFile, (node) => {
+        if (ts.isImportDeclaration(node) &&
+            node.moduleSpecifier &&
+            ts.isStringLiteral(node.moduleSpecifier)) {
+            imports.push(node.moduleSpecifier.text);
+        }
+    });
+    return imports;
+}
+function computeTreeDepth(filePath, imports, maxDepth, visited = new Set(), currentDepth = 1) {
+    if (currentDepth >= maxDepth)
+        return currentDepth;
+    visited.add(filePath);
+    let deepest = currentDepth;
+    const dir = dirname(filePath);
+    for (const imp of imports) {
+        if (!imp.startsWith('.'))
+            continue;
+        const resolved = resolveImport(dir, imp);
+        if (!resolved || visited.has(resolved))
+            continue;
+        try {
+            const childSource = readFileSync(resolved, 'utf-8');
+            const childSf = ts.createSourceFile(resolved, childSource, ts.ScriptTarget.Latest, true);
+            const childImports = extractImports(childSf);
+            const childDepth = computeTreeDepth(resolved, childImports, maxDepth, visited, currentDepth + 1);
+            deepest = Math.max(deepest, childDepth);
+        }
+        catch {
+            // File not readable — treat as leaf
+        }
+    }
+    return deepest;
+}
+function resolveImport(dir, importPath) {
+    const extensions = ['.ts', '.tsx', '.js', '.mjs'];
+    const base = resolve(dir, importPath);
+    if (extname(base)) {
+        const withoutExt = base.replace(/\.[^.]+$/, '');
+        for (const ext of extensions) {
+            try {
+                readFileSync(withoutExt + ext);
+                return withoutExt + ext;
+            }
+            catch { /* noop */ }
+        }
+    }
+    for (const ext of extensions) {
+        try {
+            readFileSync(base + ext);
+            return base + ext;
+        }
+        catch { /* noop */ }
+    }
+    for (const ext of extensions) {
+        try {
+            readFileSync(resolve(base, 'index' + ext));
+            return resolve(base, 'index' + ext);
+        }
+        catch { /* noop */ }
+    }
+    return null;
+}

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

@@ -0,0 +1,23 @@
+import type { BundleMetrics } from '../perf.types.js';
+import * as i0 from "@angular/core";
+export declare class BundleSectionComponent {
+    readonly metrics: import("@angular/core").InputSignal<BundleMetrics | null>;
+    readonly warnKb: import("@angular/core").InputSignal<number>;
+    readonly critKb: import("@angular/core").InputSignal<number>;
+    readonly gzipPercent: import("@angular/core").Signal<number>;
+    readonly sourceBarPercent: import("@angular/core").Signal<number>;
+    readonly gzipBarPercent: import("@angular/core").Signal<number>;
+    readonly depthSteps: import("@angular/core").Signal<{
+        index: number;
+        filled: boolean;
+        deep: boolean;
+    }[]>;
+    readonly visibleImports: import("@angular/core").Signal<string[]>;
+    readonly hiddenImportCount: import("@angular/core").Signal<number>;
+    formatBytes(bytes: number): string;
+    formatKb(bytes: number): string;
+    chipClass(imp: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BundleSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BundleSectionComponent, "perf-bundle-section", never, { "metrics": { "alias": "metrics"; "required": false; "isSignal": true; }; "warnKb": { "alias": "warnKb"; "required": false; "isSignal": true; }; "critKb": { "alias": "critKb"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=bundle-section.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-section.component.d.ts","sourceRoot":"","sources":["../../src/bundle/bundle-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAEtD,qBAwPa,sBAAsB;IACjC,QAAQ,CAAC,OAAO,4DAAqC;IACrD,QAAQ,CAAC,MAAM,8CAAa;IAC5B,QAAQ,CAAC,MAAM,8CAAa;IAE5B,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,gBAAgB,yCAKtB;IAEH,QAAQ,CAAC,cAAc,yCAKpB;IAEH,QAAQ,CAAC,UAAU;;;;SAQhB;IAEH,QAAQ,CAAC,cAAc,2CAGpB;IAEH,QAAQ,CAAC,iBAAiB,yCAIvB;IAEH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIlC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAK/B,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;yCAvDnB,sBAAsB;2CAAtB,sBAAsB;CA4DlC"}

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

@@ -0,0 +1,321 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.index;
+function BundleSectionComponent_Conditional_0_For_69_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "div", 29);
+} if (rf & 2) {
+    const step_r1 = ctx.$implicit;
+    i0.ɵɵclassProp("filled", step_r1.filled)("deep", step_r1.deep);
+} }
+function BundleSectionComponent_Conditional_0_For_77_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 28);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const imp_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r2.chipClass(imp_r2));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(imp_r2);
+} }
+function BundleSectionComponent_Conditional_0_Conditional_78_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 28);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("+", ctx_r2.hiddenImportCount(), " more");
+} }
+function BundleSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
+    i0.ɵɵtext(3, "Source Size");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 4);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementStart(6, "span", 5);
+    i0.ɵɵtext(7, "KB");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(8, "div", 6);
+    i0.ɵɵtext(9);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(10, "div", 2)(11, "div", 3);
+    i0.ɵɵtext(12, "Gzip Estimate");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(13, "div", 4);
+    i0.ɵɵtext(14);
+    i0.ɵɵdomElementStart(15, "span", 5);
+    i0.ɵɵtext(16, "KB");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(17, "div", 6);
+    i0.ɵɵtext(18);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(19, "div", 2)(20, "div", 3);
+    i0.ɵɵtext(21, "Direct Imports");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(22, "div", 4);
+    i0.ɵɵtext(23);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(24, "div", 6);
+    i0.ɵɵtext(25, "top-level only");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(26, "div", 2)(27, "div", 3);
+    i0.ɵɵtext(28, "Tree Depth");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(29, "div", 4);
+    i0.ɵɵtext(30);
+    i0.ɵɵdomElementStart(31, "span", 5);
+    i0.ɵɵtext(32, "/ 10");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(33, "div", 6);
+    i0.ɵɵtext(34, "import levels");
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(35, "div", 7)(36, "div", 3);
+    i0.ɵɵtext(37, "Size Breakdown");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(38, "div", 8)(39, "div", 9)(40, "span", 10);
+    i0.ɵɵtext(41, "source");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(42, "div", 11);
+    i0.ɵɵdomElement(43, "div", 12);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(44, "span", 13);
+    i0.ɵɵtext(45);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(46, "div", 9)(47, "span", 10);
+    i0.ɵɵtext(48, "gzip est.");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(49, "div", 11);
+    i0.ɵɵdomElement(50, "div", 14);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(51, "span", 15);
+    i0.ɵɵtext(52);
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(53, "div", 16)(54, "span");
+    i0.ɵɵtext(55, "Thresholds: ");
+    i0.ɵɵdomElementStart(56, "span", 17);
+    i0.ɵɵtext(57);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(58, " \u00B7 ");
+    i0.ɵɵdomElementStart(59, "span", 18);
+    i0.ɵɵtext(60);
+    i0.ɵɵdomElementEnd()()()();
+    i0.ɵɵdomElementStart(61, "div", 19)(62, "div", 3);
+    i0.ɵɵtext(63, "Import Tree Depth");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(64, "div", 20)(65, "span", 21);
+    i0.ɵɵtext(66, "depth");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(67, "div", 22);
+    i0.ɵɵrepeaterCreate(68, BundleSectionComponent_Conditional_0_For_69_Template, 1, 4, "div", 23, _forTrack0);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(70, "span", 24);
+    i0.ɵɵtext(71);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(72, "div", 25)(73, "div", 3);
+    i0.ɵɵtext(74);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(75, "div", 26);
+    i0.ɵɵrepeaterCreate(76, BundleSectionComponent_Conditional_0_For_77_Template, 2, 3, "span", 27, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(78, BundleSectionComponent_Conditional_0_Conditional_78_Template, 2, 1, "span", 28);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const m_r4 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.formatKb(m_r4.sourceSize));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", ctx_r2.formatBytes(m_r4.sourceSize), " bytes");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.formatKb(m_r4.gzipEstimate));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("~", ctx_r2.gzipPercent(), "% of source");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(m_r4.directImports);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(m_r4.treeDepth);
+    i0.ɵɵadvance(13);
+    i0.ɵɵstyleProp("width", ctx_r2.sourceBarPercent(), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r2.formatKb(m_r4.sourceSize), " KB");
+    i0.ɵɵadvance(5);
+    i0.ɵɵstyleProp("width", ctx_r2.gzipBarPercent(), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r2.formatKb(m_r4.gzipEstimate), " KB");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("warn \u2265 ", ctx_r2.warnKb(), " KB");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("crit \u2265 ", ctx_r2.critKb(), " KB");
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(ctx_r2.depthSteps());
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("color", m_r4.treeDepth >= 4 ? "var(--perf-warn, #fbbf24)" : "var(--prism-primary, #a78bfa)");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", m_r4.treeDepth, " / 10");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Direct Imports (", m_r4.directImports, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.visibleImports());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.hiddenImportCount() > 0 ? 78 : -1);
+} }
+function BundleSectionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 30);
+    i0.ɵɵtext(2, "\uD83D\uDCE6");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 31);
+    i0.ɵɵtext(4, "No bundle data available");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div", 32);
+    i0.ɵɵtext(6, "Bundle metrics are collected at build time");
+    i0.ɵɵdomElementEnd()();
+} }
+export class BundleSectionComponent {
+    metrics = input(null, ...(ngDevMode ? [{ debugName: "metrics" }] : []));
+    warnKb = input(20, ...(ngDevMode ? [{ debugName: "warnKb" }] : []));
+    critKb = input(50, ...(ngDevMode ? [{ debugName: "critKb" }] : []));
+    gzipPercent = computed(() => {
+        const m = this.metrics();
+        if (!m || m.sourceSize === 0)
+            return 0;
+        return Math.round((m.gzipEstimate / m.sourceSize) * 100);
+    }, ...(ngDevMode ? [{ debugName: "gzipPercent" }] : []));
+    sourceBarPercent = computed(() => {
+        const m = this.metrics();
+        if (!m)
+            return 0;
+        const maxKb = this.critKb() * 1.2;
+        return Math.min(100, (m.sourceSize / 1024 / maxKb) * 100);
+    }, ...(ngDevMode ? [{ debugName: "sourceBarPercent" }] : []));
+    gzipBarPercent = computed(() => {
+        const m = this.metrics();
+        if (!m)
+            return 0;
+        const maxKb = this.critKb() * 1.2;
+        return Math.min(100, (m.gzipEstimate / 1024 / maxKb) * 100);
+    }, ...(ngDevMode ? [{ debugName: "gzipBarPercent" }] : []));
+    depthSteps = computed(() => {
+        const m = this.metrics();
+        const depth = m?.treeDepth ?? 0;
+        return Array.from({ length: 10 }, (_, i) => ({
+            index: i,
+            filled: i < depth,
+            deep: i >= 4 && i < depth,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "depthSteps" }] : []));
+    visibleImports = computed(() => {
+        const m = this.metrics();
+        return m?.importList.slice(0, 10) ?? [];
+    }, ...(ngDevMode ? [{ debugName: "visibleImports" }] : []));
+    hiddenImportCount = computed(() => {
+        const m = this.metrics();
+        if (!m)
+            return 0;
+        return Math.max(0, m.importList.length - 10);
+    }, ...(ngDevMode ? [{ debugName: "hiddenImportCount" }] : []));
+    formatBytes(bytes) {
+        return bytes.toLocaleString('en-US');
+    }
+    formatKb(bytes) {
+        const kb = bytes / 1024;
+        return kb < 10 ? kb.toFixed(1) : Math.round(kb).toString();
+    }
+    chipClass(imp) {
+        if (imp.startsWith('@angular/'))
+            return 'angular';
+        if (imp.startsWith('rxjs'))
+            return 'rxjs';
+        return '';
+    }
+    static ɵfac = function BundleSectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BundleSectionComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BundleSectionComponent, selectors: [["perf-bundle-section"]], inputs: { metrics: [1, "metrics"], warnKb: [1, "warnKb"], critKb: [1, "critKb"] }, decls: 2, vars: 1, consts: [[1, "prism-perf-empty"], [1, "prism-perf-bundle-hero"], [1, "prism-perf-bundle-metric"], [1, "prism-perf-label"], [1, "prism-perf-bundle-value"], [1, "prism-perf-bundle-unit"], [1, "prism-perf-sub"], [1, "prism-perf-bundle-section"], [1, "prism-perf-size-bars"], [1, "prism-perf-size-bar-row"], [1, "prism-perf-size-bar-label"], [1, "prism-perf-size-bar-track"], [1, "prism-perf-size-bar-fill", 2, "background", "linear-gradient(90deg, #a78bfa, #818cf8)"], [1, "prism-perf-size-bar-val", 2, "color", "#a78bfa"], [1, "prism-perf-size-bar-fill", 2, "background", "rgba(167,139,250,0.45)"], [1, "prism-perf-size-bar-val", 2, "color", "#8476a2"], [1, "prism-perf-threshold-legend"], [2, "color", "var(--perf-warn, #fbbf24)"], [2, "color", "var(--perf-crit, #f87171)"], [1, "prism-perf-bundle-section", 2, "border-bottom", "none"], [1, "prism-perf-depth-gauge"], [1, "prism-perf-depth-label"], [1, "prism-perf-depth-steps"], [1, "prism-perf-depth-step", 3, "filled", "deep"], [1, "prism-perf-depth-val"], [2, "margin-top", "14px"], [1, "prism-perf-import-list"], [1, "prism-perf-import-chip", 3, "class"], [1, "prism-perf-import-chip"], [1, "prism-perf-depth-step"], [1, "prism-perf-empty-icon"], [1, "prism-perf-empty-text"], [1, "prism-perf-empty-hint"]], template: function BundleSectionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, BundleSectionComponent_Conditional_0_Template, 79, 19)(1, BundleSectionComponent_Conditional_1_Template, 7, 0, "div", 0);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.metrics()) ? 0 : 1, tmp_0_0);
+        } }, styles: [".prism-perf-bundle-hero[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-bundle-metric[_ngcontent-%COMP%] {\n      padding: 14px 16px;\n      border-right: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-bundle-metric[_ngcontent-%COMP%]:last-child { border-right: none; }\n    .prism-perf-bundle-value[_ngcontent-%COMP%] {\n      font-size: 22px;\n      font-family: var(--prism-font-mono, monospace);\n      font-weight: 600;\n      color: var(--prism-text, #ede9f8);\n      line-height: 1;\n      margin-top: 5px;\n    }\n    .prism-perf-bundle-unit[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 400;\n      color: var(--prism-text-muted, #8476a2);\n      margin-left: 3px;\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      margin-bottom: 5px;\n    }\n    .prism-perf-sub[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--prism-text-ghost, #6a5d87);\n      margin-top: 3px;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-bundle-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-size-bars[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 7px;\n      margin-top: 10px;\n    }\n    .prism-perf-size-bar-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .prism-perf-size-bar-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted, #8476a2);\n      width: 90px;\n      flex-shrink: 0;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-size-bar-track[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 6px;\n      background: rgba(255,255,255,0.05);\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .prism-perf-size-bar-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      border-radius: 3px;\n    }\n    .prism-perf-size-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: 58px;\n      text-align: right;\n      flex-shrink: 0;\n    }\n    .prism-perf-threshold-legend[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost, #6a5d87);\n    }\n    .prism-perf-depth-gauge[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      margin-top: 10px;\n    }\n    .prism-perf-depth-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted, #8476a2);\n      width: 90px;\n      flex-shrink: 0;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-depth-steps[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 3px;\n      flex: 1;\n    }\n    .prism-perf-depth-step[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 6px;\n      border-radius: 2px;\n      background: rgba(255,255,255,0.05);\n    }\n    .prism-perf-depth-step.filled[_ngcontent-%COMP%] {\n      background: var(--prism-primary, #a78bfa);\n      opacity: 0.8;\n    }\n    .prism-perf-depth-step.deep[_ngcontent-%COMP%] {\n      background: var(--perf-warn, #fbbf24);\n      opacity: 0.5;\n    }\n    .prism-perf-depth-val[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      width: 58px;\n      text-align: right;\n      flex-shrink: 0;\n    }\n    .prism-perf-import-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 5px;\n      margin-top: 8px;\n    }\n    .prism-perf-import-chip[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      border-radius: 3px;\n      background: rgba(255,255,255,0.04);\n      border: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-muted, #8476a2);\n    }\n    .prism-perf-import-chip.angular[_ngcontent-%COMP%] {\n      color: var(--prism-primary, #a78bfa);\n      border-color: color-mix(in srgb, var(--prism-primary, #a78bfa) 25%, transparent);\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 8%, transparent);\n    }\n    .prism-perf-import-chip.rxjs[_ngcontent-%COMP%] {\n      color: #67e8f9;\n      border-color: color-mix(in srgb, #67e8f9 25%, transparent);\n      background: color-mix(in srgb, #67e8f9 8%, transparent);\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(BundleSectionComponent, [{
+        type: Component,
+        args: [{ selector: 'perf-bundle-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (metrics(); as m) {
+      <div class="prism-perf-bundle-hero">
+        <div class="prism-perf-bundle-metric">
+          <div class="prism-perf-label">Source Size</div>
+          <div class="prism-perf-bundle-value">{{ formatKb(m.sourceSize) }}<span class="prism-perf-bundle-unit">KB</span></div>
+          <div class="prism-perf-sub">{{ formatBytes(m.sourceSize) }} bytes</div>
+        </div>
+        <div class="prism-perf-bundle-metric">
+          <div class="prism-perf-label">Gzip Estimate</div>
+          <div class="prism-perf-bundle-value">{{ formatKb(m.gzipEstimate) }}<span class="prism-perf-bundle-unit">KB</span></div>
+          <div class="prism-perf-sub">~{{ gzipPercent() }}% of source</div>
+        </div>
+        <div class="prism-perf-bundle-metric">
+          <div class="prism-perf-label">Direct Imports</div>
+          <div class="prism-perf-bundle-value">{{ m.directImports }}</div>
+          <div class="prism-perf-sub">top-level only</div>
+        </div>
+        <div class="prism-perf-bundle-metric">
+          <div class="prism-perf-label">Tree Depth</div>
+          <div class="prism-perf-bundle-value">{{ m.treeDepth }}<span class="prism-perf-bundle-unit">/ 10</span></div>
+          <div class="prism-perf-sub">import levels</div>
+        </div>
+      </div>
+
+      <div class="prism-perf-bundle-section">
+        <div class="prism-perf-label">Size Breakdown</div>
+        <div class="prism-perf-size-bars">
+          <div class="prism-perf-size-bar-row">
+            <span class="prism-perf-size-bar-label">source</span>
+            <div class="prism-perf-size-bar-track">
+              <div class="prism-perf-size-bar-fill" [style.width.%]="sourceBarPercent()" style="background: linear-gradient(90deg, #a78bfa, #818cf8)"></div>
+            </div>
+            <span class="prism-perf-size-bar-val" style="color:#a78bfa">{{ formatKb(m.sourceSize) }} KB</span>
+          </div>
+          <div class="prism-perf-size-bar-row">
+            <span class="prism-perf-size-bar-label">gzip est.</span>
+            <div class="prism-perf-size-bar-track">
+              <div class="prism-perf-size-bar-fill" [style.width.%]="gzipBarPercent()" style="background: rgba(167,139,250,0.45)"></div>
+            </div>
+            <span class="prism-perf-size-bar-val" style="color:#8476a2">{{ formatKb(m.gzipEstimate) }} KB</span>
+          </div>
+        </div>
+        <div class="prism-perf-threshold-legend">
+          <span>Thresholds: <span style="color:var(--perf-warn, #fbbf24)">warn &ge; {{ warnKb() }} KB</span> · <span style="color:var(--perf-crit, #f87171)">crit &ge; {{ critKb() }} KB</span></span>
+        </div>
+      </div>
+
+      <div class="prism-perf-bundle-section" style="border-bottom:none">
+        <div class="prism-perf-label">Import Tree Depth</div>
+        <div class="prism-perf-depth-gauge">
+          <span class="prism-perf-depth-label">depth</span>
+          <div class="prism-perf-depth-steps">
+            @for (step of depthSteps(); track step.index) {
+              <div class="prism-perf-depth-step" [class.filled]="step.filled" [class.deep]="step.deep"></div>
+            }
+          </div>
+          <span class="prism-perf-depth-val" [style.color]="m.treeDepth >= 4 ? 'var(--perf-warn, #fbbf24)' : 'var(--prism-primary, #a78bfa)'">{{ m.treeDepth }} / 10</span>
+        </div>
+
+        <div style="margin-top:14px">
+          <div class="prism-perf-label">Direct Imports ({{ m.directImports }})</div>
+          <div class="prism-perf-import-list">
+            @for (imp of visibleImports(); track imp) {
+              <span class="prism-perf-import-chip" [class]="chipClass(imp)">{{ imp }}</span>
+            }
+            @if (hiddenImportCount() > 0) {
+              <span class="prism-perf-import-chip">+{{ hiddenImportCount() }} more</span>
+            }
+          </div>
+        </div>
+      </div>
+    } @else {
+      <div class="prism-perf-empty">
+        <div class="prism-perf-empty-icon">&#128230;</div>
+        <div class="prism-perf-empty-text">No bundle data available</div>
+        <div class="prism-perf-empty-hint">Bundle metrics are collected at build time</div>
+      </div>
+    }
+  `, styles: ["\n    .prism-perf-bundle-hero {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-bundle-metric {\n      padding: 14px 16px;\n      border-right: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-bundle-metric:last-child { border-right: none; }\n    .prism-perf-bundle-value {\n      font-size: 22px;\n      font-family: var(--prism-font-mono, monospace);\n      font-weight: 600;\n      color: var(--prism-text, #ede9f8);\n      line-height: 1;\n      margin-top: 5px;\n    }\n    .prism-perf-bundle-unit {\n      font-size: 11px;\n      font-weight: 400;\n      color: var(--prism-text-muted, #8476a2);\n      margin-left: 3px;\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      margin-bottom: 5px;\n    }\n    .prism-perf-sub {\n      font-size: 10px;\n      color: var(--prism-text-ghost, #6a5d87);\n      margin-top: 3px;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-bundle-section {\n      padding: 14px 16px;\n      border-bottom: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n    }\n    .prism-perf-size-bars {\n      display: flex;\n      flex-direction: column;\n      gap: 7px;\n      margin-top: 10px;\n    }\n    .prism-perf-size-bar-row {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .prism-perf-size-bar-label {\n      font-size: 11px;\n      color: var(--prism-text-muted, #8476a2);\n      width: 90px;\n      flex-shrink: 0;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-size-bar-track {\n      flex: 1;\n      height: 6px;\n      background: rgba(255,255,255,0.05);\n      border-radius: 3px;\n      overflow: hidden;\n    }\n    .prism-perf-size-bar-fill {\n      height: 100%;\n      border-radius: 3px;\n    }\n    .prism-perf-size-bar-val {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-2, #b0a6c8);\n      width: 58px;\n      text-align: right;\n      flex-shrink: 0;\n    }\n    .prism-perf-threshold-legend {\n      margin-top: 10px;\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost, #6a5d87);\n    }\n    .prism-perf-depth-gauge {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      margin-top: 10px;\n    }\n    .prism-perf-depth-label {\n      font-size: 11px;\n      color: var(--prism-text-muted, #8476a2);\n      width: 90px;\n      flex-shrink: 0;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-perf-depth-steps {\n      display: flex;\n      gap: 3px;\n      flex: 1;\n    }\n    .prism-perf-depth-step {\n      flex: 1;\n      height: 6px;\n      border-radius: 2px;\n      background: rgba(255,255,255,0.05);\n    }\n    .prism-perf-depth-step.filled {\n      background: var(--prism-primary, #a78bfa);\n      opacity: 0.8;\n    }\n    .prism-perf-depth-step.deep {\n      background: var(--perf-warn, #fbbf24);\n      opacity: 0.5;\n    }\n    .prism-perf-depth-val {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      width: 58px;\n      text-align: right;\n      flex-shrink: 0;\n    }\n    .prism-perf-import-list {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 5px;\n      margin-top: 8px;\n    }\n    .prism-perf-import-chip {\n      padding: 2px 8px;\n      border-radius: 3px;\n      background: rgba(255,255,255,0.04);\n      border: 1px solid var(--prism-border, rgba(255,255,255,0.08));\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-muted, #8476a2);\n    }\n    .prism-perf-import-chip.angular {\n      color: var(--prism-primary, #a78bfa);\n      border-color: color-mix(in srgb, var(--prism-primary, #a78bfa) 25%, transparent);\n      background: color-mix(in srgb, var(--prism-primary, #a78bfa) 8%, transparent);\n    }\n    .prism-perf-import-chip.rxjs {\n      color: #67e8f9;\n      border-color: color-mix(in srgb, #67e8f9 25%, transparent);\n      background: color-mix(in srgb, #67e8f9 8%, transparent);\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, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], warnKb: [{ type: i0.Input, args: [{ isSignal: true, alias: "warnKb", required: false }] }], critKb: [{ type: i0.Input, args: [{ isSignal: true, alias: "critKb", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BundleSectionComponent, { className: "BundleSectionComponent", filePath: "bundle/bundle-section.component.ts", lineNumber: 252 }); })();

package/dist/index.browser.d.ts

@@ -0,0 +1,5 @@
+export { perfPlugin } from './perf-plugin.browser.js';
+export { PerfPanelComponent } from './perf-panel.component.js';
+export { PERF_PLUGIN_CONFIG } from './perf-config.token.js';
+export type { PerfPluginOptions, PerfThresholds, BundleMetrics } from './perf.types.js';
+//# sourceMappingURL=index.browser.d.ts.map

package/dist/index.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.browser.d.ts","sourceRoot":"","sources":["../src/index.browser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.browser.js

@@ -0,0 +1,3 @@
+export { perfPlugin } from './perf-plugin.browser.js';
+export { PerfPanelComponent } from './perf-panel.component.js';
+export { PERF_PLUGIN_CONFIG } from './perf-config.token.js';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { perfPlugin } from './perf-plugin.js';
+export { PerfPanelComponent } from './perf-panel.component.js';
+export { PERF_PLUGIN_CONFIG } from './perf-config.token.js';
+export type { PerfPluginOptions, PerfThresholds, BundleMetrics } from './perf.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { perfPlugin } from './perf-plugin.js';
+export { PerfPanelComponent } from './perf-panel.component.js';
+export { PERF_PLUGIN_CONFIG } from './perf-config.token.js';

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

@@ -0,0 +1,14 @@
+import type { PerfMemoryService } from './perf-memory.service.js';
+import * as i0 from "@angular/core";
+export declare class MemorySectionComponent {
+    readonly memoryService: import("@angular/core").InputSignal<PerfMemoryService>;
+    private readonly maxBytes;
+    readonly deltaText: import("@angular/core").Signal<string>;
+    readonly residualText: import("@angular/core").Signal<string>;
+    readonly destroyClass: import("@angular/core").Signal<"" | "delta-ok" | "delta-neg">;
+    barPercent(bytes: number | undefined): number;
+    formatMb(bytes: number | null | undefined): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MemorySectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MemorySectionComponent, "perf-memory-section", never, { "memoryService": { "alias": "memoryService"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=memory-section.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"memory-section.component.d.ts","sourceRoot":"","sources":["../../src/memory/memory-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAElE,qBA4Na,sBAAsB;IACjC,QAAQ,CAAC,aAAa,yDAAuC;IAE7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAQtB;IAEH,QAAQ,CAAC,SAAS,yCAIf;IAEH,QAAQ,CAAC,YAAY,yCAIlB;IAEH,QAAQ,CAAC,YAAY,gEAKlB;IAEH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM;IAK7C,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM;yCArCvC,sBAAsB;2CAAtB,sBAAsB;CAyClC"}