@ng-prism/plugin-perf 21.6.0 → 21.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,11 +7,10 @@ export declare class BundleSectionComponent {
7
7
  readonly gzipPercent: import("@angular/core").Signal<number>;
8
8
  readonly sourceBarPercent: import("@angular/core").Signal<number>;
9
9
  readonly gzipBarPercent: import("@angular/core").Signal<number>;
10
- readonly depthSteps: import("@angular/core").Signal<{
11
- index: number;
12
- filled: boolean;
13
- deep: boolean;
14
- }[]>;
10
+ readonly sizeStatus: import("@angular/core").Signal<"warn" | "" | "crit" | "good">;
11
+ readonly sizeStatusText: import("@angular/core").Signal<"warn" | "" | "crit" | "good">;
12
+ readonly gzipStatus: import("@angular/core").Signal<"warn" | "" | "crit" | "good">;
13
+ readonly gzipStatusText: import("@angular/core").Signal<"warn" | "" | "crit" | "good">;
15
14
  readonly visibleImports: import("@angular/core").Signal<string[]>;
16
15
  readonly hiddenImportCount: import("@angular/core").Signal<number>;
17
16
  formatBytes(bytes: number): string;
@@ -1 +1 @@
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"}
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,qBAsNa,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,gEAOhB;IAEH,QAAQ,CAAC,cAAc,gEAMpB;IAEH,QAAQ,CAAC,UAAU,gEAOhB;IAEH,QAAQ,CAAC,cAAc,gEAMpB;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;yCA/EnB,sBAAsB;2CAAtB,sBAAsB;CAmFlC"}
@@ -1,173 +1,159 @@
1
1
  import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
- const _forTrack0 = ($index, $item) => $item.index;
4
- function BundleSectionComponent_Conditional_0_For_69_Template(rf, ctx) { if (rf & 1) {
5
- i0.ɵɵdomElement(0, "div", 29);
6
- } if (rf & 2) {
7
- const step_r1 = ctx.$implicit;
8
- i0.ɵɵclassProp("filled", step_r1.filled)("deep", step_r1.deep);
9
- } }
10
- function BundleSectionComponent_Conditional_0_For_77_Template(rf, ctx) { if (rf & 1) {
11
- i0.ɵɵdomElementStart(0, "span", 28);
3
+ function BundleSectionComponent_Conditional_0_For_75_Template(rf, ctx) { if (rf & 1) {
4
+ i0.ɵɵdomElementStart(0, "span", 21);
12
5
  i0.ɵɵtext(1);
13
6
  i0.ɵɵdomElementEnd();
14
7
  } if (rf & 2) {
15
- const imp_r2 = ctx.$implicit;
16
- const ctx_r2 = i0.ɵɵnextContext(2);
17
- i0.ɵɵclassMap(ctx_r2.chipClass(imp_r2));
8
+ const imp_r1 = ctx.$implicit;
9
+ const ctx_r1 = i0.ɵɵnextContext(2);
10
+ i0.ɵɵclassMap(ctx_r1.chipClass(imp_r1));
18
11
  i0.ɵɵadvance();
19
- i0.ɵɵtextInterpolate(imp_r2);
12
+ i0.ɵɵtextInterpolate(imp_r1);
20
13
  } }
21
- function BundleSectionComponent_Conditional_0_Conditional_78_Template(rf, ctx) { if (rf & 1) {
22
- i0.ɵɵdomElementStart(0, "span", 28);
14
+ function BundleSectionComponent_Conditional_0_Conditional_76_Template(rf, ctx) { if (rf & 1) {
15
+ i0.ɵɵdomElementStart(0, "span", 21);
23
16
  i0.ɵɵtext(1);
24
17
  i0.ɵɵdomElementEnd();
25
18
  } if (rf & 2) {
26
- const ctx_r2 = i0.ɵɵnextContext(2);
19
+ const ctx_r1 = i0.ɵɵnextContext(2);
27
20
  i0.ɵɵadvance();
28
- i0.ɵɵtextInterpolate1("+", ctx_r2.hiddenImportCount(), " more");
21
+ i0.ɵɵtextInterpolate1("+", ctx_r1.hiddenImportCount(), " more");
29
22
  } }
30
23
  function BundleSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
31
- i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
32
- i0.ɵɵtext(3, "Source Size");
24
+ i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "span", 4);
25
+ i0.ɵɵtext(4, "Source Size");
33
26
  i0.ɵɵdomElementEnd();
34
- i0.ɵɵdomElementStart(4, "div", 4);
35
- i0.ɵɵtext(5);
36
- i0.ɵɵdomElementStart(6, "span", 5);
37
- i0.ɵɵtext(7, "KB");
27
+ i0.ɵɵdomElementStart(5, "span", 5);
28
+ i0.ɵɵtext(6);
38
29
  i0.ɵɵdomElementEnd()();
39
- i0.ɵɵdomElementStart(8, "div", 6);
40
- i0.ɵɵtext(9);
30
+ i0.ɵɵdomElementStart(7, "div", 6);
31
+ i0.ɵɵtext(8);
32
+ i0.ɵɵdomElementStart(9, "span");
33
+ i0.ɵɵtext(10, "kb");
41
34
  i0.ɵɵdomElementEnd()();
42
- i0.ɵɵdomElementStart(10, "div", 2)(11, "div", 3);
43
- i0.ɵɵtext(12, "Gzip Estimate");
44
- i0.ɵɵdomElementEnd();
45
- i0.ɵɵdomElementStart(13, "div", 4);
46
- i0.ɵɵtext(14);
47
- i0.ɵɵdomElementStart(15, "span", 5);
48
- i0.ɵɵtext(16, "KB");
35
+ i0.ɵɵdomElementStart(11, "div", 7);
36
+ i0.ɵɵtext(12);
49
37
  i0.ɵɵdomElementEnd()();
50
- i0.ɵɵdomElementStart(17, "div", 6);
38
+ i0.ɵɵdomElementStart(13, "div", 2)(14, "div", 3)(15, "span", 4);
39
+ i0.ɵɵtext(16, "Gzip Estimate");
40
+ i0.ɵɵdomElementEnd();
41
+ i0.ɵɵdomElementStart(17, "span", 5);
51
42
  i0.ɵɵtext(18);
52
43
  i0.ɵɵdomElementEnd()();
53
- i0.ɵɵdomElementStart(19, "div", 2)(20, "div", 3);
54
- i0.ɵɵtext(21, "Direct Imports");
55
- i0.ɵɵdomElementEnd();
56
- i0.ɵɵdomElementStart(22, "div", 4);
57
- i0.ɵɵtext(23);
58
- i0.ɵɵdomElementEnd();
59
- i0.ɵɵdomElementStart(24, "div", 6);
60
- i0.ɵɵtext(25, "top-level only");
44
+ i0.ɵɵdomElementStart(19, "div", 6);
45
+ i0.ɵɵtext(20);
46
+ i0.ɵɵdomElementStart(21, "span");
47
+ i0.ɵɵtext(22, "kb");
61
48
  i0.ɵɵdomElementEnd()();
62
- i0.ɵɵdomElementStart(26, "div", 2)(27, "div", 3);
63
- i0.ɵɵtext(28, "Tree Depth");
64
- i0.ɵɵdomElementEnd();
65
- i0.ɵɵdomElementStart(29, "div", 4);
49
+ i0.ɵɵdomElementStart(23, "div", 7);
50
+ i0.ɵɵtext(24);
51
+ i0.ɵɵdomElementEnd()();
52
+ i0.ɵɵdomElementStart(25, "div", 2)(26, "div", 3)(27, "span", 4);
53
+ i0.ɵɵtext(28, "Direct Imports");
54
+ i0.ɵɵdomElementEnd()();
55
+ i0.ɵɵdomElementStart(29, "div", 6);
66
56
  i0.ɵɵtext(30);
67
- i0.ɵɵdomElementStart(31, "span", 5);
68
- i0.ɵɵtext(32, "/ 10");
57
+ i0.ɵɵdomElementEnd();
58
+ i0.ɵɵdomElementStart(31, "div", 7);
59
+ i0.ɵɵtext(32, "top-level only");
60
+ i0.ɵɵdomElementEnd()();
61
+ i0.ɵɵdomElementStart(33, "div", 2)(34, "div", 3)(35, "span", 4);
62
+ i0.ɵɵtext(36, "Tree Depth");
69
63
  i0.ɵɵdomElementEnd()();
70
- i0.ɵɵdomElementStart(33, "div", 6);
71
- i0.ɵɵtext(34, "import levels");
64
+ i0.ɵɵdomElementStart(37, "div", 6);
65
+ i0.ɵɵtext(38);
66
+ i0.ɵɵdomElementStart(39, "span");
67
+ i0.ɵɵtext(40, "/ 10");
68
+ i0.ɵɵdomElementEnd()();
69
+ i0.ɵɵdomElementStart(41, "div", 7);
70
+ i0.ɵɵtext(42, "import levels");
72
71
  i0.ɵɵdomElementEnd()()();
73
- i0.ɵɵdomElementStart(35, "div", 7)(36, "div", 3);
74
- i0.ɵɵtext(37, "Size Breakdown");
75
- i0.ɵɵdomElementEnd();
76
- i0.ɵɵdomElementStart(38, "div", 8)(39, "div", 9)(40, "span", 10);
77
- i0.ɵɵtext(41, "source");
78
- i0.ɵɵdomElementEnd();
79
- i0.ɵɵdomElementStart(42, "div", 11);
80
- i0.ɵɵdomElement(43, "div", 12);
81
- i0.ɵɵdomElementEnd();
82
- i0.ɵɵdomElementStart(44, "span", 13);
83
- i0.ɵɵtext(45);
72
+ i0.ɵɵdomElementStart(43, "div", 8)(44, "div", 9)(45, "div", 3)(46, "span", 4);
73
+ i0.ɵɵtext(47, "Size Breakdown");
84
74
  i0.ɵɵdomElementEnd()();
85
- i0.ɵɵdomElementStart(46, "div", 9)(47, "span", 10);
86
- i0.ɵɵtext(48, "gzip est.");
75
+ i0.ɵɵdomElementStart(48, "div", 10)(49, "span", 11);
76
+ i0.ɵɵtext(50, "source");
87
77
  i0.ɵɵdomElementEnd();
88
- i0.ɵɵdomElementStart(49, "div", 11);
89
- i0.ɵɵdomElement(50, "div", 14);
78
+ i0.ɵɵdomElementStart(51, "div", 12);
79
+ i0.ɵɵdomElement(52, "div", 13);
90
80
  i0.ɵɵdomElementEnd();
91
- i0.ɵɵdomElementStart(51, "span", 15);
92
- i0.ɵɵtext(52);
93
- i0.ɵɵdomElementEnd()()();
94
- i0.ɵɵdomElementStart(53, "div", 16)(54, "span");
95
- i0.ɵɵtext(55, "Thresholds: ");
96
- i0.ɵɵdomElementStart(56, "span", 17);
97
- i0.ɵɵtext(57);
81
+ i0.ɵɵdomElementStart(53, "span", 14);
82
+ i0.ɵɵtext(54);
98
83
  i0.ɵɵdomElementEnd();
99
- i0.ɵɵtext(58, " \u00B7 ");
100
- i0.ɵɵdomElementStart(59, "span", 18);
101
- i0.ɵɵtext(60);
102
- i0.ɵɵdomElementEnd()()()();
103
- i0.ɵɵdomElementStart(61, "div", 19)(62, "div", 3);
104
- i0.ɵɵtext(63, "Import Tree Depth");
84
+ i0.ɵɵdomElementStart(55, "span", 11);
85
+ i0.ɵɵtext(56, "gzip est.");
105
86
  i0.ɵɵdomElementEnd();
106
- i0.ɵɵdomElementStart(64, "div", 20)(65, "span", 21);
107
- i0.ɵɵtext(66, "depth");
87
+ i0.ɵɵdomElementStart(57, "div", 12);
88
+ i0.ɵɵdomElement(58, "div", 13);
108
89
  i0.ɵɵdomElementEnd();
109
- i0.ɵɵdomElementStart(67, "div", 22);
110
- i0.ɵɵrepeaterCreate(68, BundleSectionComponent_Conditional_0_For_69_Template, 1, 4, "div", 23, _forTrack0);
111
- i0.ɵɵdomElementEnd();
112
- i0.ɵɵdomElementStart(70, "span", 24);
113
- i0.ɵɵtext(71);
90
+ i0.ɵɵdomElementStart(59, "span", 14);
91
+ i0.ɵɵtext(60);
114
92
  i0.ɵɵdomElementEnd()();
115
- i0.ɵɵdomElementStart(72, "div", 25)(73, "div", 3);
116
- i0.ɵɵtext(74);
93
+ i0.ɵɵdomElementStart(61, "div", 15);
94
+ i0.ɵɵtext(62, "Thresholds: ");
95
+ i0.ɵɵdomElementStart(63, "span", 16);
96
+ i0.ɵɵtext(64);
117
97
  i0.ɵɵdomElementEnd();
118
- i0.ɵɵdomElementStart(75, "div", 26);
119
- i0.ɵɵrepeaterCreate(76, BundleSectionComponent_Conditional_0_For_77_Template, 2, 3, "span", 27, i0.ɵɵrepeaterTrackByIdentity);
120
- i0.ɵɵconditionalCreate(78, BundleSectionComponent_Conditional_0_Conditional_78_Template, 2, 1, "span", 28);
98
+ i0.ɵɵtext(65, " \u00B7 ");
99
+ i0.ɵɵdomElementStart(66, "span", 17);
100
+ i0.ɵɵtext(67);
101
+ i0.ɵɵdomElementEnd()()()();
102
+ i0.ɵɵdomElementStart(68, "div", 18)(69, "div", 9)(70, "div", 3)(71, "span", 4);
103
+ i0.ɵɵtext(72);
104
+ i0.ɵɵdomElementEnd()();
105
+ i0.ɵɵdomElementStart(73, "div", 19);
106
+ i0.ɵɵrepeaterCreate(74, BundleSectionComponent_Conditional_0_For_75_Template, 2, 3, "span", 20, i0.ɵɵrepeaterTrackByIdentity);
107
+ i0.ɵɵconditionalCreate(76, BundleSectionComponent_Conditional_0_Conditional_76_Template, 2, 1, "span", 21);
121
108
  i0.ɵɵdomElementEnd()()();
122
109
  } if (rf & 2) {
123
- const m_r4 = ctx;
124
- const ctx_r2 = i0.ɵɵnextContext();
125
- i0.ɵɵadvance(5);
126
- i0.ɵɵtextInterpolate(ctx_r2.formatKb(m_r4.sourceSize));
127
- i0.ɵɵadvance(4);
128
- i0.ɵɵtextInterpolate1("", ctx_r2.formatBytes(m_r4.sourceSize), " bytes");
110
+ const m_r3 = ctx;
111
+ const ctx_r1 = i0.ɵɵnextContext();
129
112
  i0.ɵɵadvance(5);
130
- i0.ɵɵtextInterpolate(ctx_r2.formatKb(m_r4.gzipEstimate));
131
- i0.ɵɵadvance(4);
132
- i0.ɵɵtextInterpolate1("~", ctx_r2.gzipPercent(), "% of source");
133
- i0.ɵɵadvance(5);
134
- i0.ɵɵtextInterpolate(m_r4.directImports);
135
- i0.ɵɵadvance(7);
136
- i0.ɵɵtextInterpolate(m_r4.treeDepth);
137
- i0.ɵɵadvance(13);
138
- i0.ɵɵstyleProp("width", ctx_r2.sourceBarPercent(), "%");
113
+ i0.ɵɵclassMap(ctx_r1.sizeStatus());
114
+ i0.ɵɵadvance();
115
+ i0.ɵɵtextInterpolate(ctx_r1.sizeStatusText());
139
116
  i0.ɵɵadvance(2);
140
- i0.ɵɵtextInterpolate1("", ctx_r2.formatKb(m_r4.sourceSize), " KB");
117
+ i0.ɵɵtextInterpolate(ctx_r1.formatKb(m_r3.sourceSize));
118
+ i0.ɵɵadvance(4);
119
+ i0.ɵɵtextInterpolate1("", ctx_r1.formatBytes(m_r3.sourceSize), " bytes");
141
120
  i0.ɵɵadvance(5);
142
- i0.ɵɵstyleProp("width", ctx_r2.gzipBarPercent(), "%");
121
+ i0.ɵɵclassMap(ctx_r1.gzipStatus());
122
+ i0.ɵɵadvance();
123
+ i0.ɵɵtextInterpolate(ctx_r1.gzipStatusText());
143
124
  i0.ɵɵadvance(2);
144
- i0.ɵɵtextInterpolate1("", ctx_r2.formatKb(m_r4.gzipEstimate), " KB");
145
- i0.ɵɵadvance(5);
146
- i0.ɵɵtextInterpolate1("warn \u2265 ", ctx_r2.warnKb(), " KB");
147
- i0.ɵɵadvance(3);
148
- i0.ɵɵtextInterpolate1("crit \u2265 ", ctx_r2.critKb(), " KB");
125
+ i0.ɵɵtextInterpolate(ctx_r1.formatKb(m_r3.gzipEstimate));
126
+ i0.ɵɵadvance(4);
127
+ i0.ɵɵtextInterpolate1("~", ctx_r1.gzipPercent(), "% of source");
128
+ i0.ɵɵadvance(6);
129
+ i0.ɵɵtextInterpolate(m_r3.directImports);
149
130
  i0.ɵɵadvance(8);
150
- i0.ɵɵrepeater(ctx_r2.depthSteps());
131
+ i0.ɵɵtextInterpolate(m_r3.treeDepth);
132
+ i0.ɵɵadvance(14);
133
+ i0.ɵɵstyleProp("width", ctx_r1.sourceBarPercent(), "%");
151
134
  i0.ɵɵadvance(2);
152
- i0.ɵɵstyleProp("color", m_r4.treeDepth >= 4 ? "var(--perf-warn, #fbbf24)" : "var(--prism-primary, #a78bfa)");
153
- i0.ɵɵadvance();
154
- i0.ɵɵtextInterpolate1("", m_r4.treeDepth, " / 10");
135
+ i0.ɵɵtextInterpolate1("", ctx_r1.formatKb(m_r3.sourceSize), " KB");
136
+ i0.ɵɵadvance(4);
137
+ i0.ɵɵstyleProp("width", ctx_r1.gzipBarPercent(), "%");
138
+ i0.ɵɵadvance(2);
139
+ i0.ɵɵtextInterpolate1("", ctx_r1.formatKb(m_r3.gzipEstimate), " KB");
140
+ i0.ɵɵadvance(4);
141
+ i0.ɵɵtextInterpolate1("warn \u2265 ", ctx_r1.warnKb(), " KB");
155
142
  i0.ɵɵadvance(3);
156
- i0.ɵɵtextInterpolate1("Direct Imports (", m_r4.directImports, ")");
143
+ i0.ɵɵtextInterpolate1("crit \u2265 ", ctx_r1.critKb(), " KB");
144
+ i0.ɵɵadvance(5);
145
+ i0.ɵɵtextInterpolate1("Direct Imports (", m_r3.directImports, ")");
157
146
  i0.ɵɵadvance(2);
158
- i0.ɵɵrepeater(ctx_r2.visibleImports());
147
+ i0.ɵɵrepeater(ctx_r1.visibleImports());
159
148
  i0.ɵɵadvance(2);
160
- i0.ɵɵconditional(ctx_r2.hiddenImportCount() > 0 ? 78 : -1);
149
+ i0.ɵɵconditional(ctx_r1.hiddenImportCount() > 0 ? 76 : -1);
161
150
  } }
162
151
  function BundleSectionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
163
- i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 30);
164
- i0.ɵɵtext(2, "\uD83D\uDCE6");
152
+ i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 22);
153
+ i0.ɵɵtext(2, "No bundle data available");
165
154
  i0.ɵɵdomElementEnd();
166
- i0.ɵɵdomElementStart(3, "div", 31);
167
- i0.ɵɵtext(4, "No bundle data available");
168
- i0.ɵɵdomElementEnd();
169
- i0.ɵɵdomElementStart(5, "div", 32);
170
- i0.ɵɵtext(6, "Bundle metrics are collected at build time");
155
+ i0.ɵɵdomElementStart(3, "div", 23);
156
+ i0.ɵɵtext(4, "Bundle metrics are collected at build time");
171
157
  i0.ɵɵdomElementEnd()();
172
158
  } }
173
159
  export class BundleSectionComponent {
@@ -194,15 +180,48 @@ export class BundleSectionComponent {
194
180
  const maxKb = this.critKb() * 1.2;
195
181
  return Math.min(100, (m.gzipEstimate / 1024 / maxKb) * 100);
196
182
  }, ...(ngDevMode ? [{ debugName: "gzipBarPercent" }] : []));
197
- depthSteps = computed(() => {
183
+ sizeStatus = computed(() => {
184
+ const m = this.metrics();
185
+ if (!m)
186
+ return '';
187
+ const kb = m.sourceSize / 1024;
188
+ if (kb >= this.critKb())
189
+ return 'crit';
190
+ if (kb >= this.warnKb())
191
+ return 'warn';
192
+ return 'good';
193
+ }, ...(ngDevMode ? [{ debugName: "sizeStatus" }] : []));
194
+ sizeStatusText = computed(() => {
195
+ const s = this.sizeStatus();
196
+ if (s === 'good')
197
+ return 'good';
198
+ if (s === 'warn')
199
+ return 'warn';
200
+ if (s === 'crit')
201
+ return 'crit';
202
+ return '';
203
+ }, ...(ngDevMode ? [{ debugName: "sizeStatusText" }] : []));
204
+ gzipStatus = computed(() => {
198
205
  const m = this.metrics();
199
- const depth = m?.treeDepth ?? 0;
200
- return Array.from({ length: 10 }, (_, i) => ({
201
- index: i,
202
- filled: i < depth,
203
- deep: i >= 4 && i < depth,
204
- }));
205
- }, ...(ngDevMode ? [{ debugName: "depthSteps" }] : []));
206
+ if (!m)
207
+ return '';
208
+ const kb = m.gzipEstimate / 1024;
209
+ if (kb >= this.critKb())
210
+ return 'crit';
211
+ if (kb >= this.warnKb())
212
+ return 'warn';
213
+ return 'good';
214
+ }, ...(ngDevMode ? [{ debugName: "gzipStatus" }] : []));
215
+ gzipStatusText = computed(() => {
216
+ const s = this.gzipStatus();
217
+ if (s === 'good')
218
+ return 'good';
219
+ if (s === 'warn')
220
+ return 'warn';
221
+ if (s === 'crit')
222
+ return 'crit';
223
+ return '';
224
+ }, ...(ngDevMode ? [{ debugName: "gzipStatusText" }] : []));
206
225
  visibleImports = computed(() => {
207
226
  const m = this.metrics();
208
227
  return m?.importList.slice(0, 10) ?? [];
@@ -223,99 +242,87 @@ export class BundleSectionComponent {
223
242
  chipClass(imp) {
224
243
  if (imp.startsWith('@angular/'))
225
244
  return 'angular';
226
- if (imp.startsWith('rxjs'))
227
- return 'rxjs';
228
245
  return '';
229
246
  }
230
247
  static ɵfac = function BundleSectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BundleSectionComponent)(); };
231
- 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) {
232
- i0.ɵɵconditionalCreate(0, BundleSectionComponent_Conditional_0_Template, 79, 19)(1, BundleSectionComponent_Conditional_1_Template, 7, 0, "div", 0);
248
+ 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, "perf-empty"], [1, "perf-body", "perf-body--4col"], [1, "perf-card"], [1, "perf-card-head"], [1, "perf-card-name"], [1, "perf-card-status"], [1, "perf-card-val"], [1, "perf-card-sub"], [1, "perf-detail"], [1, "perf-card", "perf-card--block"], [1, "perf-bars"], [1, "perf-bar-label"], [1, "perf-bar-track"], [1, "perf-bar-fill"], [1, "perf-bar-val"], [1, "perf-thresholds"], [1, "perf-thresholds--warn"], [1, "perf-thresholds--crit"], [1, "perf-detail", "perf-detail--last"], [1, "perf-chips"], [1, "perf-chip", 3, "class"], [1, "perf-chip"], [1, "perf-empty-text"], [1, "perf-empty-hint"]], template: function BundleSectionComponent_Template(rf, ctx) { if (rf & 1) {
249
+ i0.ɵɵconditionalCreate(0, BundleSectionComponent_Conditional_0_Template, 77, 22)(1, BundleSectionComponent_Conditional_1_Template, 5, 0, "div", 0);
233
250
  } if (rf & 2) {
234
251
  let tmp_0_0;
235
252
  i0.ɵɵconditional((tmp_0_0 = ctx.metrics()) ? 0 : 1, tmp_0_0);
236
- } }, 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 });
253
+ } }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n .perf-body--4col[_ngcontent-%COMP%] { grid-template-columns: repeat(4, 1fr); }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.good[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n color: var(--prism-success);\n }\n .perf-card-status.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .perf-card-status.crit[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-danger) 15%, transparent);\n color: var(--prism-danger);\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 16px; }\n .perf-detail--last[_ngcontent-%COMP%] { padding-bottom: 20px; }\n\n .perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 80px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label[_ngcontent-%COMP%] { color: var(--prism-text-muted); }\n .perf-bar-track[_ngcontent-%COMP%] {\n height: 8px;\n background: var(--prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-val[_ngcontent-%COMP%] { color: var(--prism-primary); }\n\n .perf-thresholds[_ngcontent-%COMP%] {\n margin-top: 10px;\n font-size: 11px;\n color: var(--prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n .perf-thresholds--warn[_ngcontent-%COMP%] { color: var(--prism-warn); }\n .perf-thresholds--crit[_ngcontent-%COMP%] { color: var(--prism-danger); }\n\n .perf-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n }\n .perf-chip[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n padding: 4px 10px;\n background: var(--prism-input-bg);\n color: var(--prism-text-2);\n border: 1px solid var(--prism-border);\n border-radius: 5px;\n }\n .perf-chip.angular[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n color: var(--prism-primary);\n border-color: color-mix(in srgb, var(--prism-primary) 25%, transparent);\n }\n\n .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 .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }"], changeDetection: 0 });
237
254
  }
238
255
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BundleSectionComponent, [{
239
256
  type: Component,
240
257
  args: [{ selector: 'perf-bundle-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
241
258
  @if (metrics(); as m) {
242
- <div class="prism-perf-bundle-hero">
243
- <div class="prism-perf-bundle-metric">
244
- <div class="prism-perf-label">Source Size</div>
245
- <div class="prism-perf-bundle-value">{{ formatKb(m.sourceSize) }}<span class="prism-perf-bundle-unit">KB</span></div>
246
- <div class="prism-perf-sub">{{ formatBytes(m.sourceSize) }} bytes</div>
247
- </div>
248
- <div class="prism-perf-bundle-metric">
249
- <div class="prism-perf-label">Gzip Estimate</div>
250
- <div class="prism-perf-bundle-value">{{ formatKb(m.gzipEstimate) }}<span class="prism-perf-bundle-unit">KB</span></div>
251
- <div class="prism-perf-sub">~{{ gzipPercent() }}% of source</div>
252
- </div>
253
- <div class="prism-perf-bundle-metric">
254
- <div class="prism-perf-label">Direct Imports</div>
255
- <div class="prism-perf-bundle-value">{{ m.directImports }}</div>
256
- <div class="prism-perf-sub">top-level only</div>
257
- </div>
258
- <div class="prism-perf-bundle-metric">
259
- <div class="prism-perf-label">Tree Depth</div>
260
- <div class="prism-perf-bundle-value">{{ m.treeDepth }}<span class="prism-perf-bundle-unit">/ 10</span></div>
261
- <div class="prism-perf-sub">import levels</div>
259
+ <div class="perf-body perf-body--4col">
260
+ <div class="perf-card">
261
+ <div class="perf-card-head">
262
+ <span class="perf-card-name">Source Size</span>
263
+ <span class="perf-card-status" [class]="sizeStatus()">{{ sizeStatusText() }}</span>
264
+ </div>
265
+ <div class="perf-card-val">{{ formatKb(m.sourceSize) }}<span>kb</span></div>
266
+ <div class="perf-card-sub">{{ formatBytes(m.sourceSize) }} bytes</div>
262
267
  </div>
263
- </div>
264
-
265
- <div class="prism-perf-bundle-section">
266
- <div class="prism-perf-label">Size Breakdown</div>
267
- <div class="prism-perf-size-bars">
268
- <div class="prism-perf-size-bar-row">
269
- <span class="prism-perf-size-bar-label">source</span>
270
- <div class="prism-perf-size-bar-track">
271
- <div class="prism-perf-size-bar-fill" [style.width.%]="sourceBarPercent()" style="background: linear-gradient(90deg, #a78bfa, #818cf8)"></div>
272
- </div>
273
- <span class="prism-perf-size-bar-val" style="color:#a78bfa">{{ formatKb(m.sourceSize) }} KB</span>
268
+ <div class="perf-card">
269
+ <div class="perf-card-head">
270
+ <span class="perf-card-name">Gzip Estimate</span>
271
+ <span class="perf-card-status" [class]="gzipStatus()">{{ gzipStatusText() }}</span>
274
272
  </div>
275
- <div class="prism-perf-size-bar-row">
276
- <span class="prism-perf-size-bar-label">gzip est.</span>
277
- <div class="prism-perf-size-bar-track">
278
- <div class="prism-perf-size-bar-fill" [style.width.%]="gzipBarPercent()" style="background: rgba(167,139,250,0.45)"></div>
279
- </div>
280
- <span class="prism-perf-size-bar-val" style="color:#8476a2">{{ formatKb(m.gzipEstimate) }} KB</span>
273
+ <div class="perf-card-val">{{ formatKb(m.gzipEstimate) }}<span>kb</span></div>
274
+ <div class="perf-card-sub">~{{ gzipPercent() }}% of source</div>
275
+ </div>
276
+ <div class="perf-card">
277
+ <div class="perf-card-head">
278
+ <span class="perf-card-name">Direct Imports</span>
281
279
  </div>
280
+ <div class="perf-card-val">{{ m.directImports }}</div>
281
+ <div class="perf-card-sub">top-level only</div>
282
282
  </div>
283
- <div class="prism-perf-threshold-legend">
284
- <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>
283
+ <div class="perf-card">
284
+ <div class="perf-card-head">
285
+ <span class="perf-card-name">Tree Depth</span>
286
+ </div>
287
+ <div class="perf-card-val">{{ m.treeDepth }}<span>/ 10</span></div>
288
+ <div class="perf-card-sub">import levels</div>
285
289
  </div>
286
290
  </div>
287
291
 
288
- <div class="prism-perf-bundle-section" style="border-bottom:none">
289
- <div class="prism-perf-label">Import Tree Depth</div>
290
- <div class="prism-perf-depth-gauge">
291
- <span class="prism-perf-depth-label">depth</span>
292
- <div class="prism-perf-depth-steps">
293
- @for (step of depthSteps(); track step.index) {
294
- <div class="prism-perf-depth-step" [class.filled]="step.filled" [class.deep]="step.deep"></div>
295
- }
292
+ <div class="perf-detail">
293
+ <div class="perf-card perf-card--block">
294
+ <div class="perf-card-head"><span class="perf-card-name">Size Breakdown</span></div>
295
+ <div class="perf-bars">
296
+ <span class="perf-bar-label">source</span>
297
+ <div class="perf-bar-track"><div class="perf-bar-fill" [style.width.%]="sourceBarPercent()"></div></div>
298
+ <span class="perf-bar-val">{{ formatKb(m.sourceSize) }} KB</span>
299
+ <span class="perf-bar-label">gzip est.</span>
300
+ <div class="perf-bar-track"><div class="perf-bar-fill" [style.width.%]="gzipBarPercent()"></div></div>
301
+ <span class="perf-bar-val">{{ formatKb(m.gzipEstimate) }} KB</span>
296
302
  </div>
297
- <span class="prism-perf-depth-val" [style.color]="m.treeDepth >= 4 ? 'var(--perf-warn, #fbbf24)' : 'var(--prism-primary, #a78bfa)'">{{ m.treeDepth }} / 10</span>
303
+ <div class="perf-thresholds">Thresholds: <span class="perf-thresholds--warn">warn &ge; {{ warnKb() }} KB</span> &middot; <span class="perf-thresholds--crit">crit &ge; {{ critKb() }} KB</span></div>
298
304
  </div>
305
+ </div>
299
306
 
300
- <div style="margin-top:14px">
301
- <div class="prism-perf-label">Direct Imports ({{ m.directImports }})</div>
302
- <div class="prism-perf-import-list">
307
+ <div class="perf-detail perf-detail--last">
308
+ <div class="perf-card perf-card--block">
309
+ <div class="perf-card-head"><span class="perf-card-name">Direct Imports ({{ m.directImports }})</span></div>
310
+ <div class="perf-chips">
303
311
  @for (imp of visibleImports(); track imp) {
304
- <span class="prism-perf-import-chip" [class]="chipClass(imp)">{{ imp }}</span>
312
+ <span class="perf-chip" [class]="chipClass(imp)">{{ imp }}</span>
305
313
  }
306
314
  @if (hiddenImportCount() > 0) {
307
- <span class="prism-perf-import-chip">+{{ hiddenImportCount() }} more</span>
315
+ <span class="perf-chip">+{{ hiddenImportCount() }} more</span>
308
316
  }
309
317
  </div>
310
318
  </div>
311
319
  </div>
312
320
  } @else {
313
- <div class="prism-perf-empty">
314
- <div class="prism-perf-empty-icon">&#128230;</div>
315
- <div class="prism-perf-empty-text">No bundle data available</div>
316
- <div class="prism-perf-empty-hint">Bundle metrics are collected at build time</div>
321
+ <div class="perf-empty">
322
+ <div class="perf-empty-text">No bundle data available</div>
323
+ <div class="perf-empty-hint">Bundle metrics are collected at build time</div>
317
324
  </div>
318
325
  }
319
- `, 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 "] }]
326
+ `, styles: ["\n .perf-body {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n .perf-body--4col { grid-template-columns: repeat(4, 1fr); }\n\n .perf-card {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block { display: block; }\n .perf-card-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.good {\n background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n color: var(--prism-success);\n }\n .perf-card-status.warn {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .perf-card-status.crit {\n background: color-mix(in srgb, var(--prism-danger) 15%, transparent);\n color: var(--prism-danger);\n }\n .perf-card-val {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val span {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail { padding: 0 24px 16px; }\n .perf-detail--last { padding-bottom: 20px; }\n\n .perf-bars {\n display: grid;\n grid-template-columns: 80px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label { color: var(--prism-text-muted); }\n .perf-bar-track {\n height: 8px;\n background: var(--prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-val { color: var(--prism-primary); }\n\n .perf-thresholds {\n margin-top: 10px;\n font-size: 11px;\n color: var(--prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n .perf-thresholds--warn { color: var(--prism-warn); }\n .perf-thresholds--crit { color: var(--prism-danger); }\n\n .perf-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n }\n .perf-chip {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n padding: 4px 10px;\n background: var(--prism-input-bg);\n color: var(--prism-text-2);\n border: 1px solid var(--prism-border);\n border-radius: 5px;\n }\n .perf-chip.angular {\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n color: var(--prism-primary);\n border-color: color-mix(in srgb, var(--prism-primary) 25%, transparent);\n }\n\n .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 .perf-empty-text { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }\n "] }]
320
327
  }], 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 }] }] }); })();
321
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BundleSectionComponent, { className: "BundleSectionComponent", filePath: "bundle/bundle-section.component.ts", lineNumber: 252 }); })();
328
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BundleSectionComponent, { className: "BundleSectionComponent", filePath: "bundle/bundle-section.component.ts", lineNumber: 218 }); })();
@@ -5,7 +5,8 @@ export declare class MemorySectionComponent {
5
5
  private readonly maxBytes;
6
6
  readonly deltaText: import("@angular/core").Signal<string>;
7
7
  readonly residualText: import("@angular/core").Signal<string>;
8
- readonly destroyClass: import("@angular/core").Signal<"" | "delta-ok" | "delta-neg">;
8
+ readonly afterCreateColor: import("@angular/core").Signal<"" | "var(--prism-warn)">;
9
+ readonly destroyColor: import("@angular/core").Signal<"" | "var(--prism-danger)" | "var(--prism-success)" | "var(--prism-text-ghost)">;
9
10
  barPercent(bytes: number | undefined): number;
10
11
  formatMb(bytes: number | null | undefined): string;
11
12
  static ɵfac: i0.ɵɵFactoryDeclaration<MemorySectionComponent, never>;
@@ -1 +1 @@
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"}
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,qBA2Na,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,gBAAgB,2DAItB;IAEH,QAAQ,CAAC,YAAY,kHAOlB;IAEH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM;IAK7C,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM;yCA7CvC,sBAAsB;2CAAtB,sBAAsB;CAiDlC"}