@codeledger/insight-ui 0.8.9

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.
Files changed (50) hide show
  1. package/LICENSE +27 -0
  2. package/dist/components/CockpitLayout.d.ts +60 -0
  3. package/dist/components/CockpitLayout.d.ts.map +1 -0
  4. package/dist/components/CockpitLayout.js +49 -0
  5. package/dist/components/CockpitLayout.js.map +1 -0
  6. package/dist/components/ScopeControls.d.ts +36 -0
  7. package/dist/components/ScopeControls.d.ts.map +1 -0
  8. package/dist/components/ScopeControls.js +137 -0
  9. package/dist/components/ScopeControls.js.map +1 -0
  10. package/dist/components/SystemInsights.d.ts +13 -0
  11. package/dist/components/SystemInsights.d.ts.map +1 -0
  12. package/dist/components/SystemInsights.js +17 -0
  13. package/dist/components/SystemInsights.js.map +1 -0
  14. package/dist/index.d.ts +2 -0
  15. package/dist/index.d.ts.map +1 -0
  16. package/dist/index.js +2 -0
  17. package/dist/index.js.map +1 -0
  18. package/dist/pages/Efficiency.d.ts +8 -0
  19. package/dist/pages/Efficiency.d.ts.map +1 -0
  20. package/dist/pages/Efficiency.js +66 -0
  21. package/dist/pages/Efficiency.js.map +1 -0
  22. package/dist/pages/Integrity.d.ts +8 -0
  23. package/dist/pages/Integrity.d.ts.map +1 -0
  24. package/dist/pages/Integrity.js +39 -0
  25. package/dist/pages/Integrity.js.map +1 -0
  26. package/dist/pages/Knowledge.d.ts +8 -0
  27. package/dist/pages/Knowledge.d.ts.map +1 -0
  28. package/dist/pages/Knowledge.js +32 -0
  29. package/dist/pages/Knowledge.js.map +1 -0
  30. package/dist/pages/Overview.d.ts +8 -0
  31. package/dist/pages/Overview.d.ts.map +1 -0
  32. package/dist/pages/Overview.js +53 -0
  33. package/dist/pages/Overview.js.map +1 -0
  34. package/dist/pages/Quality.d.ts +8 -0
  35. package/dist/pages/Quality.d.ts.map +1 -0
  36. package/dist/pages/Quality.js +32 -0
  37. package/dist/pages/Quality.js.map +1 -0
  38. package/dist/pages/Value.d.ts +8 -0
  39. package/dist/pages/Value.d.ts.map +1 -0
  40. package/dist/pages/Value.js +10 -0
  41. package/dist/pages/Value.js.map +1 -0
  42. package/dist/render.d.ts +3 -0
  43. package/dist/render.d.ts.map +1 -0
  44. package/dist/render.js +105 -0
  45. package/dist/render.js.map +1 -0
  46. package/dist/theme.d.ts +2 -0
  47. package/dist/theme.d.ts.map +1 -0
  48. package/dist/theme.js +442 -0
  49. package/dist/theme.js.map +1 -0
  50. package/package.json +43 -0
package/dist/theme.js ADDED
@@ -0,0 +1,442 @@
1
+ export const insightStyles = `
2
+ :root {
3
+ --bg: #f3efe6;
4
+ --panel: #fffdf8;
5
+ --ink: #1e2430;
6
+ --muted: #596275;
7
+ --line: #d7d0c3;
8
+ --accent: #0b6e4f;
9
+ --accent-soft: #dcefe8;
10
+ --warn: #bc6c25;
11
+ --risk: #a23b2a;
12
+ --shadow: rgba(30, 36, 48, 0.08);
13
+ }
14
+ * { box-sizing: border-box; }
15
+ body {
16
+ margin: 0;
17
+ font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
18
+ color: var(--ink);
19
+ background:
20
+ radial-gradient(circle at top left, rgba(11,110,79,0.08), transparent 35%),
21
+ linear-gradient(180deg, #f6f1e8 0%, #f2eee5 100%);
22
+ }
23
+ a { color: inherit; text-decoration: none; }
24
+ .shell { max-width: 1280px; margin: 0 auto; padding: 32px 20px 48px; }
25
+ .header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
26
+ .title { font-size: 40px; line-height: 1; margin: 0 0 8px; }
27
+ .subtitle { margin: 0; color: var(--muted); max-width: 720px; }
28
+ .nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 28px; }
29
+ .nav a {
30
+ padding: 10px 14px;
31
+ border-radius: 999px;
32
+ border: 1px solid var(--line);
33
+ background: rgba(255,255,255,0.72);
34
+ }
35
+ .nav a.active { background: var(--ink); color: white; border-color: var(--ink); }
36
+ .mode-tabs {
37
+ display: flex;
38
+ gap: 10px;
39
+ flex-wrap: wrap;
40
+ margin-bottom: 12px;
41
+ }
42
+ .mode-pill {
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: 4px;
46
+ padding: 10px 14px;
47
+ border-radius: 999px;
48
+ border: 1px solid rgba(215, 208, 195, 0.9);
49
+ background: rgba(255, 255, 255, 0.85);
50
+ font-size: 14px;
51
+ color: var(--ink);
52
+ }
53
+ .mode-pill small {
54
+ font-size: 11px;
55
+ letter-spacing: 0.02em;
56
+ color: var(--muted);
57
+ }
58
+ .mode-pill.active {
59
+ background: var(--accent-soft);
60
+ border-color: var(--accent);
61
+ color: var(--accent);
62
+ }
63
+ .scope-shell {
64
+ display: flex;
65
+ justify-content: space-between;
66
+ align-items: center;
67
+ gap: 20px;
68
+ padding: 18px 20px;
69
+ background: rgba(255, 255, 255, 0.85);
70
+ border: 1px solid rgba(215, 208, 195, 0.9);
71
+ border-radius: 16px;
72
+ box-shadow: 0 6px 30px rgba(30, 36, 48, 0.06);
73
+ margin-bottom: 20px;
74
+ }
75
+ .scope-title {
76
+ font-size: 18px;
77
+ margin: 0 0 6px;
78
+ }
79
+ .scope-actions {
80
+ display: flex;
81
+ flex-direction: column;
82
+ gap: 12px;
83
+ min-width: 280px;
84
+ }
85
+ .scope-selector {
86
+ display: flex;
87
+ flex-direction: column;
88
+ gap: 6px;
89
+ }
90
+ .scope-selector-label {
91
+ font-size: 11px;
92
+ letter-spacing: 0.12em;
93
+ text-transform: uppercase;
94
+ color: var(--muted);
95
+ }
96
+ .scope-selector-row {
97
+ display: flex;
98
+ gap: 6px;
99
+ flex-wrap: wrap;
100
+ }
101
+ .scope-pill {
102
+ padding: 6px 12px;
103
+ border-radius: 999px;
104
+ border: 1px solid rgba(215, 208, 195, 0.9);
105
+ background: rgba(255, 255, 255, 0.7);
106
+ font-size: 13px;
107
+ color: var(--ink);
108
+ }
109
+ .scope-pill.active {
110
+ background: var(--ink);
111
+ color: white;
112
+ border-color: var(--ink);
113
+ }
114
+ .comparison-panel {
115
+ border-radius: 16px;
116
+ background: var(--panel);
117
+ }
118
+ .comparison-grid {
119
+ display: grid;
120
+ gap: 12px;
121
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
122
+ }
123
+ .comparison-card {
124
+ border-radius: 12px;
125
+ border: 1px solid rgba(215, 208, 195, 0.85);
126
+ padding: 12px;
127
+ background: white;
128
+ box-shadow: 0 8px 20px rgba(30, 36, 48, 0.04);
129
+ }
130
+ .comparison-card-header {
131
+ display: flex;
132
+ justify-content: space-between;
133
+ align-items: center;
134
+ margin-bottom: 6px;
135
+ gap: 12px;
136
+ }
137
+ .comparison-direction {
138
+ font-size: 11px;
139
+ text-transform: uppercase;
140
+ border-radius: 999px;
141
+ padding: 2px 8px;
142
+ border: 1px solid rgba(215, 208, 195, 0.7);
143
+ }
144
+ .comparison-direction.above {
145
+ color: #0b6e4f;
146
+ border-color: rgba(11, 110, 79, 0.6);
147
+ }
148
+ .comparison-direction.below {
149
+ color: #a23b2a;
150
+ border-color: rgba(162, 59, 42, 0.6);
151
+ }
152
+ .comparison-direction.flat {
153
+ color: var(--muted);
154
+ border-color: rgba(215, 208, 195, 0.7);
155
+ }
156
+ .comparison-value {
157
+ font-size: 22px;
158
+ font-weight: 700;
159
+ margin-bottom: 6px;
160
+ }
161
+ .comparison-detail {
162
+ margin: 0;
163
+ font-size: 13px;
164
+ color: var(--muted);
165
+ min-height: 36px;
166
+ }
167
+ .comparison-confidence {
168
+ display: inline-flex;
169
+ align-items: center;
170
+ gap: 6px;
171
+ font-size: 12px;
172
+ border-radius: 999px;
173
+ padding: 4px 10px;
174
+ border: 1px solid rgba(215, 208, 195, 0.9);
175
+ }
176
+ .comparison-confidence.high { color: var(--accent); border-color: var(--accent); }
177
+ .comparison-confidence.medium { color: var(--warn); border-color: var(--warn); }
178
+ .comparison-confidence.low { color: var(--risk); border-color: var(--risk); }
179
+ .pattern-panel {
180
+ margin-top: 16px;
181
+ }
182
+ .scenario-banner {
183
+ border-radius: 12px;
184
+ border: 1px solid rgba(215, 208, 195, 0.85);
185
+ padding: 8px 12px;
186
+ background: rgba(255, 255, 255, 0.8);
187
+ display: flex;
188
+ flex-direction: column;
189
+ gap: 4px;
190
+ font-size: 12px;
191
+ color: var(--muted);
192
+ }
193
+ .scenario-picker {
194
+ display: flex;
195
+ flex-direction: column;
196
+ gap: 6px;
197
+ }
198
+ .scenario-picker-label {
199
+ font-size: 11px;
200
+ letter-spacing: 0.12em;
201
+ text-transform: uppercase;
202
+ color: var(--muted);
203
+ }
204
+ .scenario-picker-row {
205
+ display: flex;
206
+ gap: 6px;
207
+ flex-wrap: wrap;
208
+ }
209
+ .scenario-pill {
210
+ padding: 6px 10px;
211
+ border-radius: 999px;
212
+ border: 1px solid rgba(215, 208, 195, 0.9);
213
+ background: rgba(255, 255, 255, 0.7);
214
+ font-size: 12px;
215
+ color: var(--ink);
216
+ }
217
+ .scenario-pill.active {
218
+ background: var(--ink);
219
+ color: white;
220
+ border-color: var(--ink);
221
+ }
222
+ .scenario-banner strong {
223
+ color: var(--ink);
224
+ }
225
+ .grid { display: grid; gap: 16px; }
226
+ .cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
227
+ .two-col { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; }
228
+ .insights-panel ul { list-style:none; margin:0; padding:0; }
229
+ .insights-panel li { padding: 12px 0; border-bottom:1px solid rgba(215,208,195,0.8); }
230
+ .insights-panel li:last-child { border-bottom:none; }
231
+ .insight-severity { font-size:12px; padding:3px 8px; border-radius:12px; margin-left:6px; border:1px solid rgba(215,208,195,0.9); }
232
+ .insight-severity.info { background:#f0f7f4; color:#0b6e4f; }
233
+ .insight-severity.warn { background:#fff4eb; color:#a23b2a; }
234
+ .insight-severity.critical { background:#ffe0df; color:#a23b2a; border-color:#a23b2a; }
235
+ .insight-actions { display:flex; gap:12px; align-items:center; justify-content:space-between; font-size:12px; margin-top:4px; }
236
+ .storyline { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:12px; }
237
+ .scope-context { font-size:13px; color:var(--muted); }
238
+ .scope-view-mode { font-style: italic; }
239
+ .page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; padding:20px; border-radius:20px; border:1px solid rgba(215,208,195,0.8); background:var(--panel); box-shadow:0 10px 30px var(--shadow); }
240
+ .page-title { font-size:20px; font-weight:700; margin:0; }
241
+ .page-subtitle { margin:8px 0; color:var(--muted); }
242
+ .scope-context-bar { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted); }
243
+ .scope-context-bar span { padding:4px 8px; border-radius:10px; border:1px solid rgba(215,208,195,0.8); background:rgba(255,255,255,0.7); }
244
+ .page-trend-note { margin-top:8px; font-size:13px; color:var(--muted); }
245
+ .header-badges { display:flex; flex-direction:column; gap:6px; }
246
+ .trend-note { font-size:14px; color:var(--muted); margin-top:8px; }
247
+ .story-panel { flex-direction:column; }
248
+ .story-panel .value-scope { margin-top:12px; display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); }
249
+ .value-trend-note { font-size:13px; color:var(--muted); margin-top:8px; }
250
+ .card, .panel {
251
+ background: var(--panel);
252
+ border: 1px solid rgba(215, 208, 195, 0.9);
253
+ border-radius: 20px;
254
+ padding: 18px;
255
+ box-shadow: 0 14px 40px var(--shadow);
256
+ }
257
+ .metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:20px; }
258
+ .metric-card { border-radius:18px; border:1px solid rgba(215,208,195,0.8); background:var(--panel); padding:18px; display:flex; flex-direction:column; gap:12px; box-shadow:0 10px 30px var(--shadow); }
259
+ .metric-card header { display:flex; justify-content:space-between; align-items:center; }
260
+ .metric-label { font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
261
+ .metric-display strong { font-size:28px; }
262
+ .metric-display span { font-size:13px; color:var(--muted); }
263
+ .metric-severity { font-size:11px; padding:4px 10px; border-radius:999px; border:1px solid rgba(215,208,195,0.8); text-transform:uppercase; }
264
+ .metric-severity.high { color:#a23b2a; border-color:#a23b2a; background:rgba(162,59,42,0.12); }
265
+ .metric-severity.medium { color:#bc6c25; border-color:#bc6c25; background:rgba(188,108,37,0.12); }
266
+ .metric-severity.low { color:#0b6e4f; border-color:#0b6e4f; background:rgba(11,110,79,0.12); }
267
+ .value-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px; border-radius:20px; border:1px solid rgba(215,208,195,0.8); background:var(--panel); box-shadow:0 14px 36px var(--shadow); margin-bottom:20px; }
268
+ .value-title { font-size:36px; margin:8px 0; }
269
+ .action-callout { border-radius:18px; border:1px solid rgba(215,208,195,0.8); padding:20px; background:var(--panel); box-shadow:0 10px 30px var(--shadow); margin-bottom:20px; }
270
+ .callout-grid { display:grid; gap:12px; margin-top:12px; }
271
+ .callout-title { display:flex; justify-content:space-between; align-items:center; gap:8px; }
272
+ .value-breakdown, .pattern-list, .hotspot-list { margin-bottom:20px; }
273
+ .value-breakdown-row span { font-size:13px; color:var(--muted); }
274
+ .value-breakdown .row strong, .pattern-list article strong { font-size:16px; }
275
+ .value-formula {
276
+ border-radius: 18px;
277
+ border: 1px solid rgba(215, 208, 195, 0.8);
278
+ padding: 20px;
279
+ background: var(--panel);
280
+ box-shadow: 0 10px 30px var(--shadow);
281
+ margin: 16px 0;
282
+ }
283
+ .formula-metrics {
284
+ display: flex;
285
+ gap: 10px;
286
+ flex-wrap: wrap;
287
+ margin-top: 12px;
288
+ }
289
+ .formula-metrics article {
290
+ padding: 10px 12px;
291
+ border-radius: 12px;
292
+ border: 1px solid rgba(215, 208, 195, 0.7);
293
+ background: rgba(255, 255, 255, 0.85);
294
+ display: flex;
295
+ flex-direction: column;
296
+ gap: 2px;
297
+ min-width: 140px;
298
+ font-size: 12px;
299
+ }
300
+ .confidence-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
301
+ .insight-strip { margin:20px 0; }
302
+ .insight-strip-panel { margin:0; }
303
+ .hotspot-list { border-radius:18px; border:1px solid rgba(215,208,195,0.8); padding:20px; background:var(--panel); box-shadow:0 10px 30px var(--shadow); }
304
+ .hotspot-items, .pattern-items { display:grid; gap:12px; margin-top:16px; }
305
+ .hotspot-items article, .pattern-items article { border-radius:16px; border:1px solid rgba(215,208,195,0.8); padding:12px; background:#fff; }
306
+ .hotspot-metrics { display:flex; gap:12px; font-size:12px; color:var(--muted); }
307
+ .synthetic-pill { padding:4px 10px; border-radius:999px; border:1px solid rgba(215,208,195,0.8); background:#fff; font-size:12px; }
308
+ .value-hero { display:flex; flex-direction:column; gap:8px; }
309
+ .value-scope { margin-top:12px; display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); }
310
+ .value-scope span { display:inline-flex; gap:6px; padding:4px 8px; border-radius:12px; border:1px solid rgba(215,208,195,0.8); background:rgba(255,255,255,0.5); }
311
+ .confidence-badge { border-radius:999px; padding:4px 12px; font-size:12px; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(215,208,195,0.8); }
312
+ .confidence-badge.high { background:var(--accent); color:#fff; border-color:var(--accent); }
313
+ .confidence-badge.medium { background:var(--warn); color:#fff; border-color:var(--warn); }
314
+ .confidence-badge.low { background:#fff4eb; color:#a23b2a; border-color:#a23b2a; }
315
+ .value-breakdown .row strong, .value-assumptions .row strong { font-size:16px; }
316
+ .kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
317
+ .metric { font-size: 34px; font-weight: 700; margin: 0; }
318
+ .metric small { font-size: 14px; color: var(--muted); }
319
+ .section-title { font-size: 24px; margin: 0 0 16px; }
320
+ .knowledge-summary { margin-bottom:12px; font-size:14px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
321
+ .list { display: grid; gap: 10px; }
322
+ .hotspot-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:12px; }
323
+ .hotspot-card, .shadow-card { border-radius:16px; padding:12px; border:1px solid rgba(215,208,195,0.8); display:flex; flex-direction:column; gap:8px; background:#fff; box-shadow:0 10px 30px rgba(30,36,48,0.05); }
324
+ .hotspot-header { display:flex; justify-content:space-between; align-items:center; }
325
+ .hotspot-body { display:flex; justify-content:space-between; gap:12px; }
326
+ .hotspot-body span { font-size:12px; color:var(--muted); }
327
+ .hotspot-note { margin:0; font-size:12px; color:var(--muted); }
328
+ .trend-indicator { font-size:12px; text-transform:capitalize; border-radius:999px; padding:4px 10px; border:1px solid rgba(215,208,195,0.8); }
329
+ .trend-indicator.up { color:#0b6e4f; border-color:#0b6e4f; background:rgba(11,110,79,0.12); }
330
+ .trend-indicator.down { color:#a23b2a; border-color:#a23b2a; background:rgba(162,59,42,0.12); }
331
+ .trend-indicator.flat { color:var(--muted); border-color:rgba(215,208,195,0.9); }
332
+ .pattern-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:12px; }
333
+ .pattern-card { border-radius:16px; padding:12px; border:1px solid rgba(215,208,195,0.8); background:#fff; box-shadow:0 10px 24px rgba(30,36,48,0.05); }
334
+ .pattern-meta { display:flex; flex-direction:column; font-size:12px; color:var(--muted); margin-top:6px; gap:2px; }
335
+ .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
336
+ .row:first-child { border-top: 0; padding-top: 0; }
337
+ .value-breakdown .row div, .value-assumptions .row div { font-size: 13px; color: var(--muted); }
338
+ .badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); }
339
+ .badge.high { color: white; background: var(--risk); border-color: var(--risk); }
340
+ .badge.medium { color: white; background: var(--warn); border-color: var(--warn); }
341
+ .badge.low { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
342
+ .btn-link {
343
+ border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left;
344
+ }
345
+ .evidence-drawer {
346
+ position: fixed; top: 0; right: 0; width: min(420px, 100vw); height: 100vh; background: var(--panel);
347
+ border-left: 1px solid var(--line); box-shadow: -12px 0 40px var(--shadow); padding: 20px; overflow: auto; display: none;
348
+ }
349
+ .evidence-drawer.open { display: block; }
350
+ .drawer-close { border: 0; background: var(--ink); color: white; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
351
+ .chart-wrap svg { overflow: visible; }
352
+ .footer-note { color: var(--muted); font-size: 11px; margin-top: 32px; text-align: center; opacity: 0.6; }
353
+ .impact { font-size: 12px; color: var(--muted); margin-top: 4px; }
354
+ .empty-evidence { text-align: center; padding: 24px 0; color: var(--muted); }
355
+ .empty-evidence strong { color: var(--ink); }
356
+ .source-label { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: #ede9df; color: var(--muted); }
357
+ .evidence-rich { padding: 12px 0; border-bottom: 1px solid var(--line); }
358
+ .evidence-task { margin: 4px 0; font-size: 13px; line-height: 1.5; }
359
+ .evidence-context { margin: 4px 0; font-size: 12px; color: var(--accent); }
360
+ .system-health-card { text-align: center; padding: 24px 20px; }
361
+ .health-headline { margin-bottom: 16px; }
362
+ .health-score { font-size: 48px; display: block; line-height: 1; color: var(--accent); }
363
+ .health-sentence { font-size: 15px; color: var(--muted); }
364
+ .health-sub-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
365
+ .health-sub {
366
+ display: flex; flex-direction: column; align-items: center; gap: 2px;
367
+ text-decoration: none; color: inherit; border-radius: 8px; padding: 8px 4px;
368
+ transition: background 0.15s;
369
+ }
370
+ .health-sub:hover { background: rgba(11,110,79,0.06); }
371
+ .health-sub-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
372
+ .health-sub strong { font-size: 18px; }
373
+ .severity-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
374
+ .severity-dot.green { background: var(--accent); }
375
+ .severity-dot.amber { background: var(--warn); }
376
+ .severity-dot.red { background: var(--risk); }
377
+ .drivers-section { }
378
+ .drivers-subtitle { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
379
+ .drivers-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
380
+ .driver-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
381
+ .driver-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
382
+ .driver-item strong { font-size: 22px; }
383
+ .detail-section { margin-top: 16px; opacity: 0.85; }
384
+ .detail-section .panel { padding: 14px 18px; }
385
+ .detail-section .kicker { margin-bottom: 6px; }
386
+ .snapshot-card { display: flex; flex-direction: column; align-items: center; gap: 2px; }
387
+ .snapshot-card strong { font-size: 28px; }
388
+ .snapshot-card span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
389
+ .efficiency-zero-state { text-align: center; padding: 24px; }
390
+ .efficiency-zero-state .causal-chain {
391
+ font-style: italic; color: var(--accent); font-size: 15px; margin-top: 12px;
392
+ }
393
+ .efficiency-strip-row {
394
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px;
395
+ }
396
+ .efficiency-strip-item {
397
+ display: flex; flex-direction: column; align-items: center; gap: 4px;
398
+ }
399
+ .efficiency-strip-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
400
+ .efficiency-strip-item strong { font-size: 22px; }
401
+ .trend-compact {
402
+ display: flex; gap: 6px; align-items: flex-end; height: 70px; margin-top: 12px;
403
+ }
404
+ .trend-bar-group { display: flex; gap: 2px; align-items: flex-end; }
405
+ .trend-bar { width: 8px; border-radius: 2px 2px 0 0; min-height: 2px; }
406
+ .trend-bar-lift { background: var(--accent); }
407
+ .trend-bar-quality { background: var(--warn); }
408
+ .trend-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
409
+ .legend-item { display: flex; align-items: center; gap: 4px; }
410
+ .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
411
+ .dot-lift { background: var(--accent); }
412
+ .dot-quality { background: var(--warn); }
413
+ .welcome-banner {
414
+ background: linear-gradient(135deg, var(--accent-soft), #eef6f2);
415
+ border: 1px solid var(--accent);
416
+ border-radius: 12px;
417
+ padding: 16px 20px;
418
+ margin-bottom: 20px;
419
+ }
420
+ .welcome-banner strong { display: block; font-size: 16px; margin-bottom: 4px; color: var(--accent); }
421
+ .welcome-banner p { margin: 0; color: var(--muted); font-size: 14px; }
422
+ .onboarding-hint {
423
+ background: var(--panel);
424
+ border: 1px dashed var(--line);
425
+ border-radius: 12px;
426
+ padding: 16px 20px;
427
+ margin-bottom: 20px;
428
+ }
429
+ .onboarding-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
430
+ .onboarding-col { font-size: 14px; line-height: 1.5; }
431
+ .onboarding-note { color: var(--accent); font-style: italic; }
432
+ .onboarding-steps { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
433
+ .onboarding-steps p { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
434
+ .onboarding-steps ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
435
+ .onboarding-steps code { background: #ede9df; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
436
+ @media (max-width: 900px) {
437
+ .two-col { grid-template-columns: 1fr; }
438
+ .title { font-size: 30px; }
439
+ .onboarding-columns { grid-template-columns: 1fr; }
440
+ }
441
+ `;
442
+ //# sourceMappingURL=theme.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwb5B,CAAC"}
package/package.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "name": "@codeledger/insight-ui",
3
+ "version": "0.8.9",
4
+ "type": "module",
5
+ "description": "Server-rendered manager dashboard UI for CodeLedger Insight",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/codeledgerECF/codeledger.git",
10
+ "directory": "packages/insight-ui"
11
+ },
12
+ "publishConfig": {
13
+ "access": "public"
14
+ },
15
+ "files": [
16
+ "dist"
17
+ ],
18
+ "main": "./dist/index.js",
19
+ "types": "./dist/index.d.ts",
20
+ "exports": {
21
+ ".": {
22
+ "types": "./dist/index.d.ts",
23
+ "import": "./dist/index.js"
24
+ }
25
+ },
26
+ "dependencies": {
27
+ "react": "^19.2.4",
28
+ "react-dom": "^19.2.4",
29
+ "recharts": "^3.8.1",
30
+ "@codeledger/telemetry": "0.8.9",
31
+ "@codeledger/types": "0.8.9"
32
+ },
33
+ "devDependencies": {
34
+ "@types/react": "^19.2.14",
35
+ "@types/react-dom": "^19.2.3",
36
+ "typescript": "^5.4.0"
37
+ },
38
+ "scripts": {
39
+ "build": "tsc",
40
+ "typecheck": "tsc --noEmit",
41
+ "clean": "rm -rf dist"
42
+ }
43
+ }