@zendir/ui 0.3.0 → 0.4.0

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 (116) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/index.js +67 -62
  3. package/dist/index.js.map +1 -1
  4. package/dist/react/3d/ZenSpace3D.js +3 -2
  5. package/dist/react/3d/ZenSpace3DShaders.js +478 -0
  6. package/dist/react/3d/ZenSpace3DShaders.js.map +1 -0
  7. package/dist/react/3d/capturePngAnalysis.js +42 -0
  8. package/dist/react/3d/capturePngAnalysis.js.map +1 -0
  9. package/dist/react/3d/index.js +57 -0
  10. package/dist/react/3d/index.js.map +1 -0
  11. package/dist/react/3d/threeLoader.js +4 -0
  12. package/dist/react/3d/threeLoader.js.map +1 -1
  13. package/dist/react/astro/ClassificationBanner.js +1 -1
  14. package/dist/react/astro/GlobalStatusBar.js +1 -1
  15. package/dist/react/astro/MissionClock.js +8 -5
  16. package/dist/react/astro/MissionClock.js.map +1 -1
  17. package/dist/react/astro/MonitoringIcon.js +1 -1
  18. package/dist/react/astro/Notification.js +1 -1
  19. package/dist/react/astro/Progress.js +1 -1
  20. package/dist/react/astro/SimulationControls.js +1 -1
  21. package/dist/react/astro/StatusIndicator.js +1 -1
  22. package/dist/react/astro/UnifiedTimeline.js +1 -1
  23. package/dist/react/astro/index.js +34 -0
  24. package/dist/react/astro/index.js.map +1 -0
  25. package/dist/react/cards/AccessCard.js +410 -0
  26. package/dist/react/cards/AccessCard.js.map +1 -0
  27. package/dist/react/cards/OrbitCard.js +372 -0
  28. package/dist/react/cards/OrbitCard.js.map +1 -0
  29. package/dist/react/cards/SpacecraftCard.js +941 -0
  30. package/dist/react/cards/SpacecraftCard.js.map +1 -0
  31. package/dist/react/cards/TelemetryCard.js +742 -0
  32. package/dist/react/cards/TelemetryCard.js.map +1 -0
  33. package/dist/react/cards/TelemetryStreamCard.js +309 -0
  34. package/dist/react/cards/TelemetryStreamCard.js.map +1 -0
  35. package/dist/react/cards/index.js +13 -0
  36. package/dist/react/cards/index.js.map +1 -0
  37. package/dist/react/charts/GroundTrackMap.js +1 -1
  38. package/dist/react/charts/GroundTrackMapLeaflet.js +1 -1
  39. package/dist/react/charts/index.js +104 -0
  40. package/dist/react/charts/index.js.map +1 -0
  41. package/dist/react/charts/unified/AstroChart.js +1 -1
  42. package/dist/react/charts/unified/PowerOverviewChart.js +488 -0
  43. package/dist/react/charts/unified/PowerOverviewChart.js.map +1 -0
  44. package/dist/react/charts/unified/domain.js +3168 -0
  45. package/dist/react/charts/unified/domain.js.map +1 -0
  46. package/dist/react/charts/unified/generators.js +518 -0
  47. package/dist/react/charts/unified/generators.js.map +1 -0
  48. package/dist/react/charts/unified/presets.js +1000 -0
  49. package/dist/react/charts/unified/presets.js.map +1 -0
  50. package/dist/react/charts/unified/sync.js +219 -0
  51. package/dist/react/charts/unified/sync.js.map +1 -0
  52. package/dist/react/charts/unified/theme.js +331 -4
  53. package/dist/react/charts/unified/theme.js.map +1 -1
  54. package/dist/react/charts/unified/useChartStream.js +226 -0
  55. package/dist/react/charts/unified/useChartStream.js.map +1 -0
  56. package/dist/react/chatgpt/index.js +163 -0
  57. package/dist/react/chatgpt/index.js.map +1 -0
  58. package/dist/react/core/data/DataTable.js +1 -1
  59. package/dist/react/core/data/DataValue.js +1 -1
  60. package/dist/react/core/display/AstroIcon.js +1 -1
  61. package/dist/react/core/display/Badge.js +1 -1
  62. package/dist/react/core/display/CardHeader.js +1 -1
  63. package/dist/react/core/display/Container.js +1 -1
  64. package/dist/react/core/display/GlassCard.js +1 -1
  65. package/dist/react/core/display/HeaderIconWithStatus.js +1 -1
  66. package/dist/react/core/feedback/Dialog.js +24 -21
  67. package/dist/react/core/feedback/Dialog.js.map +1 -1
  68. package/dist/react/core/feedback/Toast.js +1 -1
  69. package/dist/react/core/index.d.ts +4 -0
  70. package/dist/react/core/index.js +166 -0
  71. package/dist/react/core/index.js.map +1 -0
  72. package/dist/react/core/inputs/Button.js +1 -1
  73. package/dist/react/core/inputs/Checkbox.js +1 -1
  74. package/dist/react/core/inputs/Input.js +1 -1
  75. package/dist/react/core/inputs/NumberInput.js +1 -1
  76. package/dist/react/core/inputs/PinInput.js +1 -1
  77. package/dist/react/core/inputs/Select.js +1 -1
  78. package/dist/react/core/inputs/Toggle.js +1 -1
  79. package/dist/react/core/layout/Box.js +1 -1
  80. package/dist/react/core/layout/Flex.js +1 -1
  81. package/dist/react/core/layout/Grid.js +1 -1
  82. package/dist/react/core/layout/Stack.js +1 -1
  83. package/dist/react/core/navigation/AppBar.js +1 -1
  84. package/dist/react/core/navigation/Pagination.js +1 -1
  85. package/dist/react/core/navigation/SideNav.js +1 -1
  86. package/dist/react/core/navigation/SideNav.js.map +1 -1
  87. package/dist/react/core/navigation/Tabs.js +1 -1
  88. package/dist/react/core/overlays/SidePanel.js +1 -1
  89. package/dist/react/core/overlays/Tooltip.js +1 -1
  90. package/dist/react/core/widgets/Capture.js +1 -1
  91. package/dist/react/core/widgets/ChatPanel.js +1 -1
  92. package/dist/react/core/widgets/ColorPickerPanel.js +1 -1
  93. package/dist/react/core/widgets/ConnectionForm.js +1 -1
  94. package/dist/react/core/widgets/FileExplorer.js +1 -1
  95. package/dist/react/core/widgets/ImageFrame.d.ts +51 -0
  96. package/dist/react/core/widgets/ImageFrame.js +201 -0
  97. package/dist/react/core/widgets/ImageFrame.js.map +1 -0
  98. package/dist/react/core/widgets/ImageGallery.js +1 -1
  99. package/dist/react/core/widgets/ImagePanel.d.ts +43 -0
  100. package/dist/react/core/widgets/ImagePanel.js +105 -0
  101. package/dist/react/core/widgets/ImagePanel.js.map +1 -0
  102. package/dist/react/core/widgets/MessageStream.js +1 -1
  103. package/dist/react/core/widgets/MissionCalendar.js +1 -1
  104. package/dist/react/hooks/useCompactMode.js +1 -1
  105. package/dist/react/index.d.ts +2 -2
  106. package/dist/react/panels/index.js +8 -0
  107. package/dist/react/panels/index.js.map +1 -0
  108. package/dist/react/theme/config.js +30 -0
  109. package/dist/react/theme/config.js.map +1 -0
  110. package/dist/react/theme/index.js +19 -0
  111. package/dist/react/theme/index.js.map +1 -0
  112. package/dist/react/utils/index.js +8 -0
  113. package/dist/react/utils/index.js.map +1 -1
  114. package/dist/react.js +67 -62
  115. package/dist/react.js.map +1 -1
  116. package/package.json +46 -38
@@ -6,26 +6,70 @@ const ZENDIR_BRAND_COLORS = {
6
6
  purple: "#9D70FF",
7
7
  /** Prussian Blue - Subsections (#1B2DA0) */
8
8
  prussianBlue: "#1B2DA0",
9
+ /** Black */
10
+ black: "#000000",
11
+ /** White */
12
+ white: "#FFFFFF",
9
13
  // === Electric Shades (10%, 20%, 35% overlays) ===
10
14
  electricLighter: "#9997FF",
11
15
  // 35% white overlay
12
16
  electricLight: "#6B69FF",
17
+ // 20% white overlay
18
+ electricSoft: "#5250FF",
19
+ // 10% white overlay
20
+ electricDark: "#3836E6",
13
21
  // 10% black overlay
14
22
  electricDarker: "#3230CC",
23
+ // 20% black overlay
24
+ electricDeep: "#2926A3",
15
25
  // 35% black overlay
16
26
  // === Purple Shades ===
17
27
  purpleLighter: "#C9A8FF",
18
28
  // 35% white overlay
19
29
  purpleLight: "#B48DFF",
30
+ // 20% white overlay
31
+ purpleSoft: "#A97FFF",
32
+ // 10% white overlay
33
+ purpleDark: "#8E64E6",
20
34
  // 10% black overlay
21
35
  purpleDarker: "#7E5ACC",
36
+ // 20% black overlay
37
+ purpleDeep: "#5F4499",
22
38
  // 35% black overlay
23
39
  // === Prussian Blue Shades ===
24
40
  prussianBlueLighter: "#4A5FD6",
25
41
  // 35% white overlay
26
- prussianBlueLight: "#3548C0"
42
+ prussianBlueLight: "#3548C0",
43
+ // 20% white overlay
44
+ prussianBlueSoft: "#2838B0",
45
+ // 10% white overlay
46
+ prussianBlueDark: "#182890",
47
+ // 10% black overlay
48
+ prussianBlueDarker: "#142380",
49
+ // 20% black overlay
50
+ prussianBlueDeep: "#0F1A60"
51
+ // 35% black overlay
27
52
  };
28
53
  const OFFICIAL_ASTRO_DATA_VIZ_COLORS = {
54
+ /** Official AstroUXDS data visualization palette (8 colors) */
55
+ primary: [
56
+ "#00c7cb",
57
+ // color-data-visualization-1 - Teal 500
58
+ "#938bdb",
59
+ // color-data-visualization-2 - Purple 400
60
+ "#4dacff",
61
+ // color-data-visualization-3 - Brightblue 500
62
+ "#70dde0",
63
+ // color-data-visualization-4 - Teal 300
64
+ "#c9c5ed",
65
+ // color-data-visualization-5 - Purple 200
66
+ "#92cbff",
67
+ // color-data-visualization-6 - Brightblue 400
68
+ "#a1e9eb",
69
+ // color-data-visualization-7 - Teal 200
70
+ "#b7dcff"
71
+ // color-data-visualization-8 - Brightblue 300
72
+ ],
29
73
  /** Extended palette - primary + additional derived colors for 11 max */
30
74
  extended: [
31
75
  "#00c7cb",
@@ -54,7 +98,13 @@ const OFFICIAL_ASTRO_DATA_VIZ_COLORS = {
54
98
  /** Sequential palettes for heatmaps using AstroUXDS colors */
55
99
  sequential: {
56
100
  /** Teal sequential */
57
- teal: ["#e5f9f9", "#a1e9eb", "#70dde0", "#00c7cb", "#009a9d", "#006e70"]
101
+ teal: ["#e5f9f9", "#a1e9eb", "#70dde0", "#00c7cb", "#009a9d", "#006e70"],
102
+ /** Purple sequential */
103
+ purple: ["#eceaf7", "#c9c5ed", "#a9a3dc", "#938bdb", "#756bb8", "#5b5299"],
104
+ /** Brightblue sequential */
105
+ brightblue: ["#e8f4ff", "#b7dcff", "#92cbff", "#4dacff", "#2b659b", "#1c3f5e"],
106
+ /** Thermal - Status colors for temperature */
107
+ thermal: ["#00c7cb", "#56f000", "#fce83a", "#ffb302", "#ff6b35", "#ff3838"]
58
108
  }
59
109
  };
60
110
  const ASTRO_DATA_VIZ_COLORS = {
@@ -89,15 +139,201 @@ const ASTRO_DATA_VIZ_COLORS = {
89
139
  ZENDIR_BRAND_COLORS.prussianBlueLighter
90
140
  // #4A5FD6 - Prussian Blue lightest
91
141
  ],
142
+ /**
143
+ * Zendir Brand palette - Full brand spectrum
144
+ * Complete set of Zendir brand colors for maximum brand expression
145
+ */
146
+ zendir: [
147
+ ZENDIR_BRAND_COLORS.electric,
148
+ // #3E3CFF - Primary
149
+ ZENDIR_BRAND_COLORS.purple,
150
+ // #9D70FF - Secondary
151
+ ZENDIR_BRAND_COLORS.electricLight,
152
+ // #6B69FF
153
+ ZENDIR_BRAND_COLORS.purpleLight,
154
+ // #B48DFF
155
+ ZENDIR_BRAND_COLORS.prussianBlue,
156
+ // #1B2DA0
157
+ ZENDIR_BRAND_COLORS.electricLighter,
158
+ // #9997FF
159
+ ZENDIR_BRAND_COLORS.purpleLighter,
160
+ // #C9A8FF
161
+ ZENDIR_BRAND_COLORS.prussianBlueLight
162
+ // #3548C0
163
+ ],
164
+ /**
165
+ * Extended Zendir palette - All shades for complex visualizations
166
+ * Includes dark and light variants for maximum differentiation
167
+ */
168
+ zendirExtended: [
169
+ ZENDIR_BRAND_COLORS.electric,
170
+ // #3E3CFF
171
+ ZENDIR_BRAND_COLORS.purple,
172
+ // #9D70FF
173
+ ZENDIR_BRAND_COLORS.prussianBlue,
174
+ // #1B2DA0
175
+ ZENDIR_BRAND_COLORS.electricLight,
176
+ // #6B69FF
177
+ ZENDIR_BRAND_COLORS.purpleLight,
178
+ // #B48DFF
179
+ ZENDIR_BRAND_COLORS.prussianBlueLight,
180
+ // #3548C0
181
+ ZENDIR_BRAND_COLORS.electricLighter,
182
+ // #9997FF
183
+ ZENDIR_BRAND_COLORS.purpleLighter,
184
+ // #C9A8FF
185
+ ZENDIR_BRAND_COLORS.electricDarker,
186
+ // #3230CC
187
+ ZENDIR_BRAND_COLORS.purpleDarker,
188
+ // #7E5ACC
189
+ ZENDIR_BRAND_COLORS.prussianBlueDarker
190
+ // #142380
191
+ ],
192
+ /**
193
+ * Cool palette - Blues and purples
194
+ * Professional Zendir-branded cool tones
195
+ */
196
+ cool: [
197
+ ZENDIR_BRAND_COLORS.electric,
198
+ // #3E3CFF
199
+ ZENDIR_BRAND_COLORS.prussianBlue,
200
+ // #1B2DA0
201
+ ZENDIR_BRAND_COLORS.purple,
202
+ // #9D70FF
203
+ ZENDIR_BRAND_COLORS.electricLight,
204
+ // #6B69FF
205
+ ZENDIR_BRAND_COLORS.prussianBlueLight,
206
+ // #3548C0
207
+ ZENDIR_BRAND_COLORS.purpleLight,
208
+ // #B48DFF
209
+ ZENDIR_BRAND_COLORS.electricLighter,
210
+ // #9997FF
211
+ ZENDIR_BRAND_COLORS.prussianBlueLighter
212
+ // #4A5FD6
213
+ ],
214
+ /**
215
+ * Warm accent palette - For charts needing warm tones
216
+ * Use sparingly - not part of Zendir brand
217
+ */
218
+ warm: [
219
+ "#ffb302",
220
+ // Amber
221
+ "#ff9966",
222
+ // Coral
223
+ "#fce83a",
224
+ // Yellow
225
+ "#ff6b6b",
226
+ // Salmon
227
+ "#f0a000",
228
+ // Orange
229
+ "#ffcc80",
230
+ // Peach
231
+ "#e0a86c",
232
+ // Tan
233
+ "#d4b896"
234
+ // Sand
235
+ ],
236
+ /**
237
+ * Electric-Purple gradient palette (Zendir brand gradient)
238
+ * Matches the official brand gradient from Electric to Purple
239
+ */
240
+ electricPurple: [
241
+ ZENDIR_BRAND_COLORS.electric,
242
+ // #3E3CFF
243
+ ZENDIR_BRAND_COLORS.electricSoft,
244
+ // #5250FF
245
+ ZENDIR_BRAND_COLORS.electricLight,
246
+ // #6B69FF
247
+ "#8070FF",
248
+ // Blend E→P
249
+ ZENDIR_BRAND_COLORS.purple,
250
+ // #9D70FF
251
+ ZENDIR_BRAND_COLORS.purpleLight,
252
+ // #B48DFF
253
+ ZENDIR_BRAND_COLORS.purpleLighter,
254
+ // #C9A8FF
255
+ "#DCC4FF"
256
+ // Lightest
257
+ ],
258
+ /**
259
+ * Prussian-Electric gradient palette
260
+ * Deep to vibrant brand progression
261
+ */
262
+ prussianElectric: [
263
+ ZENDIR_BRAND_COLORS.prussianBlueDarker,
264
+ // #142380
265
+ ZENDIR_BRAND_COLORS.prussianBlue,
266
+ // #1B2DA0
267
+ ZENDIR_BRAND_COLORS.prussianBlueLight,
268
+ // #3548C0
269
+ ZENDIR_BRAND_COLORS.electricDarker,
270
+ // #3230CC
271
+ ZENDIR_BRAND_COLORS.electric,
272
+ // #3E3CFF
273
+ ZENDIR_BRAND_COLORS.electricLight
274
+ // #6B69FF
275
+ ],
276
+ /**
277
+ * Full Zendir spectrum gradient
278
+ * Prussian Blue → Electric → Purple
279
+ */
280
+ zendirSpectrum: [
281
+ ZENDIR_BRAND_COLORS.prussianBlue,
282
+ // #1B2DA0
283
+ ZENDIR_BRAND_COLORS.prussianBlueLight,
284
+ // #3548C0
285
+ ZENDIR_BRAND_COLORS.electric,
286
+ // #3E3CFF
287
+ ZENDIR_BRAND_COLORS.electricLight,
288
+ // #6B69FF
289
+ ZENDIR_BRAND_COLORS.purple,
290
+ // #9D70FF
291
+ ZENDIR_BRAND_COLORS.purpleLight
292
+ // #B48DFF
293
+ ],
92
294
  /**
93
295
  * Sequential palettes for heatmaps and gradual data
94
296
  * Zendir brand-forward gradients
95
297
  */
96
298
  sequential: {
97
299
  /** Zendir Electric sequential - Primary brand gradient */
98
- electric: ["#E8E8FF", "#C9C8FF", "#9997FF", "#6B69FF", "#3E3CFF", "#3230CC", "#262499"]
300
+ electric: ["#E8E8FF", "#C9C8FF", "#9997FF", "#6B69FF", "#3E3CFF", "#3230CC", "#262499"],
301
+ /** Zendir Purple sequential - Secondary brand gradient */
302
+ purple: ["#F0E8FF", "#DCC4FF", "#C9A8FF", "#B48DFF", "#9D70FF", "#7E5ACC", "#5F4499"],
303
+ /** Zendir Prussian Blue sequential - Deep brand gradient */
304
+ prussianBlue: ["#E8ECFF", "#C5CFF0", "#8A9DD6", "#4A5FD6", "#3548C0", "#1B2DA0", "#0F1A60"],
305
+ /** Zendir gradient - Electric → Purple blend */
306
+ brand: ["#3E3CFF", "#5250FF", "#6B69FF", "#7E70FF", "#9D70FF", "#B48DFF", "#C9A8FF"],
307
+ /** Thermal - Status colors for temperature (AstroUXDS compliant) */
308
+ thermal: ["#00C7CB", "#56F000", "#FCE83A", "#FFB302", "#FF6B35", "#FF3838"]
99
309
  }
100
310
  };
311
+ const STATUS_COLORS = {
312
+ normal: "#56f000",
313
+ // Green - System operating normally
314
+ standby: "#2dccff",
315
+ // Cyan - Awaiting/standby state
316
+ caution: "#fce83a",
317
+ // Yellow - Requires attention
318
+ serious: "#ffb302",
319
+ // Orange - Significant issue
320
+ critical: "#ff3838",
321
+ // Red - Immediate action required
322
+ off: "#a4abb6"
323
+ // Grey - Inactive/off state
324
+ };
325
+ ({
326
+ /** Primary accent - Zendir Electric */
327
+ primary: ZENDIR_BRAND_COLORS.electric,
328
+ /** Secondary accent - Zendir Purple */
329
+ secondary: ZENDIR_BRAND_COLORS.purple,
330
+ /** Tertiary accent - Zendir Prussian Blue */
331
+ tertiary: ZENDIR_BRAND_COLORS.prussianBlue,
332
+ /** Info accent - Prussian Blue Light */
333
+ info: ZENDIR_BRAND_COLORS.prussianBlueLight,
334
+ /** Highlight - Electric Light */
335
+ highlight: ZENDIR_BRAND_COLORS.electricLight
336
+ });
101
337
  function createAstroEChartsTheme(tokens, mode, themeVariant) {
102
338
  const isDark = mode === "dark";
103
339
  const isAstroTheme = themeVariant === "astro";
@@ -311,9 +547,54 @@ function createAstroEChartsTheme(tokens, mode, themeVariant) {
311
547
  }
312
548
  };
313
549
  }
550
+ function getStatusColor(value, thresholds) {
551
+ if (thresholds.critical !== void 0 && value >= thresholds.critical) {
552
+ return STATUS_COLORS.critical;
553
+ }
554
+ if (thresholds.serious !== void 0 && value >= thresholds.serious) {
555
+ return STATUS_COLORS.serious;
556
+ }
557
+ if (thresholds.caution !== void 0 && value >= thresholds.caution) {
558
+ return STATUS_COLORS.caution;
559
+ }
560
+ return STATUS_COLORS.normal;
561
+ }
314
562
  function getSeriesColor(index, palette = ASTRO_DATA_VIZ_COLORS.mixed) {
315
563
  return palette[index % palette.length];
316
564
  }
565
+ function getPaletteForDataType(dataType, useAstroTheme = false) {
566
+ if (useAstroTheme && (dataType === "categorical" || dataType === "sequential")) {
567
+ return dataType === "sequential" ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal] : [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended];
568
+ }
569
+ switch (dataType) {
570
+ case "astro-official":
571
+ return [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended];
572
+ case "categorical":
573
+ return ASTRO_DATA_VIZ_COLORS.mixed;
574
+ case "zendir":
575
+ return ASTRO_DATA_VIZ_COLORS.zendir;
576
+ case "zendirExtended":
577
+ return ASTRO_DATA_VIZ_COLORS.zendirExtended;
578
+ case "sequential":
579
+ return ASTRO_DATA_VIZ_COLORS.sequential.electric;
580
+ case "diverging":
581
+ return [...ASTRO_DATA_VIZ_COLORS.sequential.electric].reverse().concat(ASTRO_DATA_VIZ_COLORS.sequential.purple);
582
+ case "status":
583
+ return [
584
+ STATUS_COLORS.normal,
585
+ STATUS_COLORS.standby,
586
+ STATUS_COLORS.caution,
587
+ STATUS_COLORS.serious,
588
+ STATUS_COLORS.critical
589
+ ];
590
+ case "cool":
591
+ return ASTRO_DATA_VIZ_COLORS.cool;
592
+ case "warm":
593
+ return ASTRO_DATA_VIZ_COLORS.warm;
594
+ default:
595
+ return ASTRO_DATA_VIZ_COLORS.mixed;
596
+ }
597
+ }
317
598
  function createAreaGradient(color, direction = "vertical") {
318
599
  return {
319
600
  type: "linear",
@@ -327,12 +608,58 @@ function createAreaGradient(color, direction = "vertical") {
327
608
  ]
328
609
  };
329
610
  }
611
+ function formatTimeLabel(timestamp, format = "short") {
612
+ const date = new Date(timestamp);
613
+ switch (format) {
614
+ case "short":
615
+ return date.toLocaleTimeString([], {
616
+ hour: "2-digit",
617
+ minute: "2-digit",
618
+ hour12: false
619
+ });
620
+ case "medium":
621
+ return date.toLocaleTimeString([], {
622
+ hour: "2-digit",
623
+ minute: "2-digit",
624
+ second: "2-digit",
625
+ hour12: false
626
+ });
627
+ case "long":
628
+ return date.toLocaleString([], {
629
+ month: "short",
630
+ day: "numeric",
631
+ hour: "2-digit",
632
+ minute: "2-digit",
633
+ hour12: false
634
+ });
635
+ }
636
+ }
637
+ function formatValueWithUnit(value, unit, precision = 2) {
638
+ const formatted = Number.isInteger(value) ? value.toString() : value.toFixed(precision);
639
+ return unit ? `${formatted}${unit}` : formatted;
640
+ }
641
+ function calculateAxisBounds(values, padding = 0.1) {
642
+ if (values.length === 0) return { min: 0, max: 100 };
643
+ const min = Math.min(...values);
644
+ const max = Math.max(...values);
645
+ const range = max - min || 1;
646
+ return {
647
+ min: min - range * padding,
648
+ max: max + range * padding
649
+ };
650
+ }
330
651
  export {
331
652
  ASTRO_DATA_VIZ_COLORS,
332
653
  OFFICIAL_ASTRO_DATA_VIZ_COLORS,
654
+ STATUS_COLORS,
333
655
  ZENDIR_BRAND_COLORS,
656
+ calculateAxisBounds,
334
657
  createAreaGradient,
335
658
  createAstroEChartsTheme,
336
- getSeriesColor
659
+ formatTimeLabel,
660
+ formatValueWithUnit,
661
+ getPaletteForDataType,
662
+ getSeriesColor,
663
+ getStatusColor
337
664
  };
338
665
  //# sourceMappingURL=theme.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sources":["../../../../src/react/charts/unified/theme.ts"],"sourcesContent":["/**\n * @zendir/ui - ECharts Theme Adapter\n * \n * Converts Astro UX Design System tokens to ECharts theme configuration.\n * Supports dark/light modes and colorblind-accessible palettes.\n * \n * AstroUXD Compliance:\n * - Max 11 colors per dataset\n * - Colorblind-accessible palette\n * - Sentence-case labels\n * - 14pt minimum axis text\n * - WCAG contrast compliance\n * \n * @version 2.0.0 - Full Zendir Brand Color Migration\n */\n\nimport type { ThemeTokens, ThemeMode, ThemeVariant } from '../../theme';\n\n// =============================================================================\n// AstroUXD Data Visualization Color Palettes\n// =============================================================================\n\n/**\n * Zendir Brand Colors (from Brand Guide v2026)\n * Core: Electric (#3E3CFF), Purple (#9D70FF), Prussian Blue (#1B2DA0)\n * Shades derived using 10%, 20%, 35% white/black overlays per brand guide\n */\nexport const ZENDIR_BRAND_COLORS = {\n // === Core Brand Colors ===\n /** Electric - Primary accent (#3E3CFF) */\n electric: '#3E3CFF',\n /** Purple - Secondary accent (#9D70FF) */\n purple: '#9D70FF',\n /** Prussian Blue - Subsections (#1B2DA0) */\n prussianBlue: '#1B2DA0',\n /** Black */\n black: '#000000',\n /** White */\n white: '#FFFFFF',\n \n // === Electric Shades (10%, 20%, 35% overlays) ===\n electricLighter: '#9997FF', // 35% white overlay\n electricLight: '#6B69FF', // 20% white overlay \n electricSoft: '#5250FF', // 10% white overlay\n electricDark: '#3836E6', // 10% black overlay\n electricDarker: '#3230CC', // 20% black overlay\n electricDeep: '#2926A3', // 35% black overlay\n \n // === Purple Shades ===\n purpleLighter: '#C9A8FF', // 35% white overlay\n purpleLight: '#B48DFF', // 20% white overlay\n purpleSoft: '#A97FFF', // 10% white overlay\n purpleDark: '#8E64E6', // 10% black overlay\n purpleDarker: '#7E5ACC', // 20% black overlay\n purpleDeep: '#5F4499', // 35% black overlay\n \n // === Prussian Blue Shades ===\n prussianBlueLighter: '#4A5FD6', // 35% white overlay\n prussianBlueLight: '#3548C0', // 20% white overlay\n prussianBlueSoft: '#2838B0', // 10% white overlay\n prussianBlueDark: '#182890', // 10% black overlay\n prussianBlueDarker: '#142380', // 20% black overlay\n prussianBlueDeep: '#0F1A60', // 35% black overlay\n} as const;\n\n/**\n * Official AstroUXDS Data Visualization Color Palette\n * Per https://astrouxds.com/design-tokens/system/#data-viz\n * \n * These are the OFFICIAL AstroUXDS data visualization colors from the design system.\n * Use these for pure AstroUXDS compliance (e.g., 'astro' theme).\n * \n * @see https://astrouxds.com/design-tokens/system/\n */\nexport const OFFICIAL_ASTRO_DATA_VIZ_COLORS = {\n /** Official AstroUXDS data visualization palette (8 colors) */\n primary: [\n '#00c7cb', // color-data-visualization-1 - Teal 500\n '#938bdb', // color-data-visualization-2 - Purple 400\n '#4dacff', // color-data-visualization-3 - Brightblue 500\n '#70dde0', // color-data-visualization-4 - Teal 300\n '#c9c5ed', // color-data-visualization-5 - Purple 200\n '#92cbff', // color-data-visualization-6 - Brightblue 400\n '#a1e9eb', // color-data-visualization-7 - Teal 200\n '#b7dcff', // color-data-visualization-8 - Brightblue 300\n ],\n \n /** Extended palette - primary + additional derived colors for 11 max */\n extended: [\n '#00c7cb', // Teal 500 - Primary\n '#938bdb', // Purple 400 - Secondary\n '#4dacff', // Brightblue 500\n '#70dde0', // Teal 300\n '#c9c5ed', // Purple 200\n '#92cbff', // Brightblue 400\n '#a1e9eb', // Teal 200\n '#b7dcff', // Brightblue 300\n '#009a9d', // Teal 600 (darker)\n '#756bb8', // Purple 500 (darker)\n '#2b659b', // Brightblue 700 (darker)\n ],\n \n /** Sequential palettes for heatmaps using AstroUXDS colors */\n sequential: {\n /** Teal sequential */\n teal: ['#e5f9f9', '#a1e9eb', '#70dde0', '#00c7cb', '#009a9d', '#006e70'],\n /** Purple sequential */\n purple: ['#eceaf7', '#c9c5ed', '#a9a3dc', '#938bdb', '#756bb8', '#5b5299'],\n /** Brightblue sequential */\n brightblue: ['#e8f4ff', '#b7dcff', '#92cbff', '#4dacff', '#2b659b', '#1c3f5e'],\n /** Thermal - Status colors for temperature */\n thermal: ['#00c7cb', '#56f000', '#fce83a', '#ffb302', '#ff6b35', '#ff3838'],\n },\n} as const;\n\n/**\n * Zendir-branded Data Visualization Color Palette \n * Uses Zendir brand colors (Electric, Purple, Prussian Blue)\n * while maintaining AstroUXDS compliance (max 11 colors, colorblind-accessible)\n * \n * @see https://www.astrouxds.com/patterns/data-visualization/\n */\nexport const ASTRO_DATA_VIZ_COLORS = {\n /** \n * Primary data visualization palette - Pure Zendir Brand\n * Uses only Zendir brand colors and their derived shades\n * Max 11 colors per AstroUXDS compliance requirement 3.2.1\n * \n * NOTE: Status colors (green, yellow, red) reserved for status indication only\n */\n mixed: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF - Primary\n ZENDIR_BRAND_COLORS.purple, // #9D70FF - Secondary\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF - Electric 20% lighter\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF - Purple 20% lighter\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0 - Prussian Blue lighter\n ZENDIR_BRAND_COLORS.electricLighter, // #9997FF - Electric 35% lighter\n ZENDIR_BRAND_COLORS.purpleLighter, // #C9A8FF - Purple 35% lighter\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0 - Prussian Blue\n ZENDIR_BRAND_COLORS.electricDarker, // #3230CC - Electric 20% darker\n ZENDIR_BRAND_COLORS.purpleDarker, // #7E5ACC - Purple 20% darker\n ZENDIR_BRAND_COLORS.prussianBlueLighter, // #4A5FD6 - Prussian Blue lightest\n ],\n \n /** \n * Zendir Brand palette - Full brand spectrum\n * Complete set of Zendir brand colors for maximum brand expression\n */\n zendir: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF - Primary\n ZENDIR_BRAND_COLORS.purple, // #9D70FF - Secondary\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.electricLighter, // #9997FF\n ZENDIR_BRAND_COLORS.purpleLighter, // #C9A8FF\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ],\n \n /** \n * Extended Zendir palette - All shades for complex visualizations\n * Includes dark and light variants for maximum differentiation\n */\n zendirExtended: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.purple, // #9D70FF\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ZENDIR_BRAND_COLORS.electricLighter, // #9997FF\n ZENDIR_BRAND_COLORS.purpleLighter, // #C9A8FF\n ZENDIR_BRAND_COLORS.electricDarker, // #3230CC\n ZENDIR_BRAND_COLORS.purpleDarker, // #7E5ACC\n ZENDIR_BRAND_COLORS.prussianBlueDarker, // #142380\n ],\n \n /** \n * Cool palette - Blues and purples\n * Professional Zendir-branded cool tones\n */\n cool: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.purple, // #9D70FF\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ZENDIR_BRAND_COLORS.electricLighter, // #9997FF\n ZENDIR_BRAND_COLORS.prussianBlueLighter, // #4A5FD6\n ],\n \n /** \n * Warm accent palette - For charts needing warm tones\n * Use sparingly - not part of Zendir brand\n */\n warm: [\n '#ffb302', // Amber\n '#ff9966', // Coral\n '#fce83a', // Yellow\n '#ff6b6b', // Salmon\n '#f0a000', // Orange\n '#ffcc80', // Peach\n '#e0a86c', // Tan\n '#d4b896', // Sand\n ],\n \n /** \n * Electric-Purple gradient palette (Zendir brand gradient)\n * Matches the official brand gradient from Electric to Purple\n */\n electricPurple: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.electricSoft, // #5250FF\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n '#8070FF', // Blend E→P\n ZENDIR_BRAND_COLORS.purple, // #9D70FF\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ZENDIR_BRAND_COLORS.purpleLighter, // #C9A8FF\n '#DCC4FF', // Lightest\n ],\n \n /** \n * Prussian-Electric gradient palette\n * Deep to vibrant brand progression\n */\n prussianElectric: [\n ZENDIR_BRAND_COLORS.prussianBlueDarker, // #142380\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ZENDIR_BRAND_COLORS.electricDarker, // #3230CC\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ],\n \n /** \n * Full Zendir spectrum gradient\n * Prussian Blue → Electric → Purple\n */\n zendirSpectrum: [\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ZENDIR_BRAND_COLORS.purple, // #9D70FF\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ],\n \n /**\n * Sequential palettes for heatmaps and gradual data\n * Zendir brand-forward gradients\n */\n sequential: {\n /** Zendir Electric sequential - Primary brand gradient */\n electric: ['#E8E8FF', '#C9C8FF', '#9997FF', '#6B69FF', '#3E3CFF', '#3230CC', '#262499'],\n /** Zendir Purple sequential - Secondary brand gradient */\n purple: ['#F0E8FF', '#DCC4FF', '#C9A8FF', '#B48DFF', '#9D70FF', '#7E5ACC', '#5F4499'],\n /** Zendir Prussian Blue sequential - Deep brand gradient */\n prussianBlue: ['#E8ECFF', '#C5CFF0', '#8A9DD6', '#4A5FD6', '#3548C0', '#1B2DA0', '#0F1A60'],\n /** Zendir gradient - Electric → Purple blend */\n brand: ['#3E3CFF', '#5250FF', '#6B69FF', '#7E70FF', '#9D70FF', '#B48DFF', '#C9A8FF'],\n /** Thermal - Status colors for temperature (AstroUXDS compliant) */\n thermal: ['#00C7CB', '#56F000', '#FCE83A', '#FFB302', '#FF6B35', '#FF3838'],\n },\n};\n\n/**\n * AstroUXDS Status Colors (DO NOT MODIFY)\n * Per https://www.astrouxds.com/patterns/status-system/\n * \n * These colors are RESERVED for status indication only.\n * Per compliance requirement, do not use status colors for\n * non-status data visualization.\n * \n * @see https://www.astrouxds.com/compliance/astro-design-compliance/\n * Rule 3.1.2: Elements indicating state shall use only specified Status Colors\n */\nexport const STATUS_COLORS = {\n normal: '#56f000', // Green - System operating normally\n standby: '#2dccff', // Cyan - Awaiting/standby state\n caution: '#fce83a', // Yellow - Requires attention\n serious: '#ffb302', // Orange - Significant issue\n critical: '#ff3838', // Red - Immediate action required\n off: '#a4abb6', // Grey - Inactive/off state\n} as const;\n\n/**\n * Zendir Accent Colors for UI elements (non-status)\n * Use these for interactive elements, highlights, and branding\n */\nexport const ZENDIR_ACCENT_COLORS = {\n /** Primary accent - Zendir Electric */\n primary: ZENDIR_BRAND_COLORS.electric,\n /** Secondary accent - Zendir Purple */\n secondary: ZENDIR_BRAND_COLORS.purple,\n /** Tertiary accent - Zendir Prussian Blue */\n tertiary: ZENDIR_BRAND_COLORS.prussianBlue,\n /** Info accent - Prussian Blue Light */\n info: ZENDIR_BRAND_COLORS.prussianBlueLight,\n /** Highlight - Electric Light */\n highlight: ZENDIR_BRAND_COLORS.electricLight,\n} as const;\n\n// =============================================================================\n// Theme Generator\n// =============================================================================\n\nexport interface EChartsTheme {\n color: string[];\n backgroundColor: string;\n textStyle: {\n color: string;\n fontFamily: string;\n fontSize: number;\n textBorderWidth?: number;\n textBorderColor?: string;\n };\n title: {\n textStyle: { color: string; fontSize: number; fontWeight: string; textBorderWidth?: number; textBorderColor?: string };\n subtextStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n };\n legend: {\n textStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n inactiveColor: string;\n };\n tooltip: {\n backgroundColor: string;\n borderColor: string;\n borderWidth: number;\n textStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n extraCssText: string;\n };\n axisPointer: {\n lineStyle: { color: string; width: number };\n crossStyle: { color: string; width: number };\n };\n xAxis: {\n axisLine: { lineStyle: { color: string } };\n axisTick: { lineStyle: { color: string } };\n axisLabel: { color: string; fontSize: number; fontFamily: string; textBorderWidth?: number; textBorderColor?: string };\n splitLine: { lineStyle: { color: string; type: string } };\n nameTextStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n };\n yAxis: {\n axisLine: { lineStyle: { color: string } };\n axisTick: { lineStyle: { color: string } };\n axisLabel: { color: string; fontSize: number; fontFamily: string; textBorderWidth?: number; textBorderColor?: string };\n splitLine: { lineStyle: { color: string; type: string } };\n nameTextStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n };\n series: {\n line: { lineStyle: { width: number }; symbolSize: number };\n bar: { barMaxWidth: number; itemStyle: { borderRadius: number[] } };\n pie: {\n itemStyle: { borderColor: string; borderWidth: number };\n label?: { color: string; textBorderWidth: number; textBorderColor: string; fontSize: number };\n };\n scatter: { symbolSize: number };\n gauge: { axisLine: { lineStyle: { width: number } } };\n };\n dataZoom: {\n backgroundColor: string;\n borderColor: string;\n fillerColor: string;\n handleColor: string;\n textStyle: { color: string; textBorderWidth?: number; textBorderColor?: string };\n };\n visualMap: {\n textStyle: { color: string; textBorderWidth?: number; textBorderColor?: string };\n inRange: { color: string[] };\n };\n grid: {\n borderColor: string;\n };\n}\n\n/**\n * Generate ECharts theme from Astro tokens\n * \n * Creates a theme that:\n * - Uses official AstroUXDS colors for 'astro' theme variant\n * - Uses Zendir brand colors for all other theme variants\n * - Maintains AstroUXDS compliance (max 11 colors, 14pt min font)\n * - Preserves status colors for their reserved purposes\n * - Supports both dark and light modes\n * \n * @param tokens - Theme tokens from ThemeProvider\n * @param mode - Current theme mode ('dark' | 'light')\n * @param themeVariant - Optional theme variant to determine color palette\n * @returns ECharts theme configuration\n */\nexport function createAstroEChartsTheme(\n tokens: ThemeTokens,\n mode: ThemeMode,\n themeVariant?: ThemeVariant\n): EChartsTheme {\n const isDark = mode === 'dark';\n \n // Use official AstroUXDS colors for 'astro' theme, Zendir colors for others\n const isAstroTheme = themeVariant === 'astro';\n const dataVizColors = isAstroTheme \n ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended] \n : ASTRO_DATA_VIZ_COLORS.mixed;\n \n return {\n // Data visualization color palette\n // - 'astro' theme: Official AstroUXDS colors (teal, purple, brightblue)\n // - Other themes: Zendir brand colors (electric, purple, prussian blue)\n color: dataVizColors,\n \n // Background\n backgroundColor: 'transparent',\n \n // Global text style - 14pt minimum per AstroUXDS; no white border on labels\n textStyle: {\n color: tokens.colors.text.primary,\n fontFamily: tokens.typography.fontFamily.primary,\n fontSize: 14, // AstroUXD minimum requirement\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n \n // Title - Grey for readability, AstroUXDS compliant\n title: {\n textStyle: {\n color: tokens.colors.text.secondary, // Grey for headings\n fontSize: 14,\n fontWeight: 'bold',\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n subtextStyle: {\n color: tokens.colors.text.tertiary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n },\n \n // Legend\n legend: {\n textStyle: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n inactiveColor: tokens.colors.text.tertiary,\n },\n \n // Tooltip\n tooltip: {\n backgroundColor: isDark \n ? 'rgba(27, 45, 62, 0.95)' \n : 'rgba(255, 255, 255, 0.95)',\n borderColor: tokens.colors.border.default,\n borderWidth: 1,\n textStyle: {\n color: tokens.colors.text.primary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n extraCssText: `\n border-radius: ${tokens.borderRadius.md};\n box-shadow: ${tokens.shadows.lg};\n backdrop-filter: blur(8px);\n `,\n },\n \n // Axis pointer / crosshair - Subtle grey for clarity\n axisPointer: {\n lineStyle: {\n color: tokens.colors.text.tertiary, // Subtle grey\n width: 1,\n },\n crossStyle: {\n color: tokens.colors.text.tertiary, // Subtle grey\n width: 1,\n },\n },\n \n // X Axis\n xAxis: {\n axisLine: {\n lineStyle: {\n color: tokens.colors.border.default,\n },\n },\n axisTick: {\n lineStyle: {\n color: tokens.colors.border.muted,\n },\n },\n axisLabel: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n fontFamily: tokens.typography.fontFamily.mono, // Tabular numbers\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n splitLine: {\n lineStyle: {\n color: tokens.colors.border.muted,\n type: 'dashed',\n },\n },\n nameTextStyle: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n },\n \n // Y Axis\n yAxis: {\n axisLine: {\n lineStyle: {\n color: tokens.colors.border.default,\n },\n },\n axisTick: {\n lineStyle: {\n color: tokens.colors.border.muted,\n },\n },\n axisLabel: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n fontFamily: tokens.typography.fontFamily.mono, // Tabular numbers\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n splitLine: {\n lineStyle: {\n color: tokens.colors.border.muted,\n type: 'dashed',\n },\n },\n nameTextStyle: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n },\n \n // Series defaults\n series: {\n line: {\n lineStyle: {\n width: 2,\n },\n symbolSize: 6,\n },\n bar: {\n barMaxWidth: 40,\n itemStyle: {\n borderRadius: [4, 4, 0, 0],\n },\n },\n pie: {\n itemStyle: {\n borderColor: tokens.colors.background.surface,\n borderWidth: 2,\n },\n label: {\n color: tokens.colors.text.primary,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n fontSize: 12,\n },\n },\n scatter: {\n symbolSize: 10,\n },\n gauge: {\n axisLine: {\n lineStyle: {\n width: 10,\n },\n },\n },\n },\n \n // Data zoom - Theme-aware interactive controls\n dataZoom: {\n backgroundColor: isDark \n ? 'rgba(27, 45, 62, 0.5)' \n : 'rgba(234, 238, 244, 0.5)',\n borderColor: tokens.colors.border.muted,\n // Astro theme uses brightblue, others use Zendir Electric\n fillerColor: isAstroTheme \n ? 'rgba(77, 172, 255, 0.15)' // AstroUXDS Brightblue\n : 'rgba(62, 60, 255, 0.15)', // Zendir Electric\n handleColor: isAstroTheme \n ? '#4dacff' // AstroUXDS Brightblue 500\n : ZENDIR_BRAND_COLORS.electric, // Zendir Electric\n textStyle: {\n color: tokens.colors.text.secondary,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n },\n \n // Visual map (for heatmaps) - Theme-aware sequential palette\n visualMap: {\n textStyle: {\n color: tokens.colors.text.secondary,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n inRange: {\n // Astro theme uses official teal gradient, others use Zendir Electric\n color: isAstroTheme \n ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal]\n : ASTRO_DATA_VIZ_COLORS.sequential.electric,\n },\n },\n \n // Grid\n grid: {\n borderColor: tokens.colors.border.muted,\n },\n };\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Get status color from value and thresholds\n */\nexport function getStatusColor(\n value: number,\n thresholds: {\n critical?: number;\n serious?: number;\n caution?: number;\n normal?: number;\n }\n): string {\n if (thresholds.critical !== undefined && value >= thresholds.critical) {\n return STATUS_COLORS.critical;\n }\n if (thresholds.serious !== undefined && value >= thresholds.serious) {\n return STATUS_COLORS.serious;\n }\n if (thresholds.caution !== undefined && value >= thresholds.caution) {\n return STATUS_COLORS.caution;\n }\n return STATUS_COLORS.normal;\n}\n\n/**\n * Get color for series by index (wraps around palette)\n * \n * @param index - Series index\n * @param palette - Color palette to use (defaults to Zendir-Astro mixed)\n * @returns Hex color string\n * \n * @example\n * ```tsx\n * // Uses Zendir-Astro fusion palette\n * const color = getSeriesColor(0); // #3E3CFF (Zendir Electric)\n * \n * // Use Zendir-only palette\n * const brandColor = getSeriesColor(0, ASTRO_DATA_VIZ_COLORS.zendir);\n * ```\n */\nexport function getSeriesColor(index: number, palette = ASTRO_DATA_VIZ_COLORS.mixed): string {\n return palette[index % palette.length];\n}\n\n/**\n * Get Zendir brand color by role\n * Use for consistent branding across the application\n */\nexport function getZendirAccentColor(role: keyof typeof ZENDIR_ACCENT_COLORS): string {\n return ZENDIR_ACCENT_COLORS[role];\n}\n\n/**\n * Get appropriate palette based on data type and optional theme\n * \n * @param dataType - Type of data being visualized\n * @param useAstroTheme - If true, uses official AstroUXDS colors; otherwise Zendir colors\n * @returns Appropriate color palette\n * \n * @example\n * ```tsx\n * // For general multi-series data (Zendir brand - default)\n * const colors = getPaletteForDataType('categorical');\n * \n * // For official AstroUXDS colors\n * const astroColors = getPaletteForDataType('categorical', true);\n * \n * // For Zendir brand-forward charts\n * const brandColors = getPaletteForDataType('zendir');\n * \n * // For official AstroUXDS palette explicitly\n * const officialColors = getPaletteForDataType('astro-official');\n * \n * // For status-based data (uses reserved AstroUXDS status colors)\n * const statusColors = getPaletteForDataType('status');\n * ```\n */\nexport function getPaletteForDataType(\n dataType: 'categorical' | 'sequential' | 'diverging' | 'status' | 'zendir' | 'zendirExtended' | 'cool' | 'warm' | 'astro-official',\n useAstroTheme = false\n): string[] {\n // If useAstroTheme is true, default to official AstroUXDS colors\n if (useAstroTheme && (dataType === 'categorical' || dataType === 'sequential')) {\n return dataType === 'sequential' \n ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal]\n : [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended];\n }\n \n switch (dataType) {\n case 'astro-official':\n return [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended]; // Official AstroUXDS colors\n case 'categorical':\n return ASTRO_DATA_VIZ_COLORS.mixed; // Pure Zendir brand palette\n case 'zendir':\n return ASTRO_DATA_VIZ_COLORS.zendir; // Core Zendir brand colors\n case 'zendirExtended':\n return ASTRO_DATA_VIZ_COLORS.zendirExtended; // All Zendir shades\n case 'sequential':\n return ASTRO_DATA_VIZ_COLORS.sequential.electric; // Zendir Electric gradient\n case 'diverging':\n return [...ASTRO_DATA_VIZ_COLORS.sequential.electric].reverse()\n .concat(ASTRO_DATA_VIZ_COLORS.sequential.purple);\n case 'status':\n // AstroUXDS status colors - RESERVED for status indication only\n return [\n STATUS_COLORS.normal,\n STATUS_COLORS.standby,\n STATUS_COLORS.caution,\n STATUS_COLORS.serious,\n STATUS_COLORS.critical,\n ];\n case 'cool':\n return ASTRO_DATA_VIZ_COLORS.cool;\n case 'warm':\n return ASTRO_DATA_VIZ_COLORS.warm;\n default:\n return ASTRO_DATA_VIZ_COLORS.mixed;\n }\n}\n\n/**\n * Create gradient for area charts\n */\nexport function createAreaGradient(\n color: string,\n direction: 'vertical' | 'horizontal' = 'vertical'\n): {\n type: 'linear';\n x: number;\n y: number;\n x2: number;\n y2: number;\n colorStops: Array<{ offset: number; color: string }>;\n} {\n return {\n type: 'linear',\n x: 0,\n y: direction === 'vertical' ? 0 : 0,\n x2: direction === 'horizontal' ? 1 : 0,\n y2: direction === 'vertical' ? 1 : 0,\n colorStops: [\n { offset: 0, color: `${color}40` },\n { offset: 1, color: `${color}05` },\n ],\n };\n}\n\n/**\n * Format time for axis labels\n */\nexport function formatTimeLabel(timestamp: number, format: 'short' | 'medium' | 'long' = 'short'): string {\n const date = new Date(timestamp);\n \n switch (format) {\n case 'short':\n return date.toLocaleTimeString([], { \n hour: '2-digit', \n minute: '2-digit',\n hour12: false,\n });\n case 'medium':\n return date.toLocaleTimeString([], { \n hour: '2-digit', \n minute: '2-digit',\n second: '2-digit',\n hour12: false,\n });\n case 'long':\n return date.toLocaleString([], {\n month: 'short',\n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n hour12: false,\n });\n }\n}\n\n/**\n * Format number with unit suffix\n */\nexport function formatValueWithUnit(value: number, unit?: string, precision = 2): string {\n const formatted = Number.isInteger(value) ? value.toString() : value.toFixed(precision);\n return unit ? `${formatted}${unit}` : formatted;\n}\n\n/**\n * Calculate nice axis bounds\n */\nexport function calculateAxisBounds(\n values: number[],\n padding = 0.1\n): { min: number; max: number } {\n if (values.length === 0) return { min: 0, max: 100 };\n \n const min = Math.min(...values);\n const max = Math.max(...values);\n const range = max - min || 1;\n \n return {\n min: min - range * padding,\n max: max + range * padding,\n };\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"theme.js","sources":["../../../../src/react/charts/unified/theme.ts"],"sourcesContent":["/**\n * @zendir/ui - ECharts Theme Adapter\n * \n * Converts Astro UX Design System tokens to ECharts theme configuration.\n * Supports dark/light modes and colorblind-accessible palettes.\n * \n * AstroUXD Compliance:\n * - Max 11 colors per dataset\n * - Colorblind-accessible palette\n * - Sentence-case labels\n * - 14pt minimum axis text\n * - WCAG contrast compliance\n * \n * @version 2.0.0 - Full Zendir Brand Color Migration\n */\n\nimport type { ThemeTokens, ThemeMode, ThemeVariant } from '../../theme';\n\n// =============================================================================\n// AstroUXD Data Visualization Color Palettes\n// =============================================================================\n\n/**\n * Zendir Brand Colors (from Brand Guide v2026)\n * Core: Electric (#3E3CFF), Purple (#9D70FF), Prussian Blue (#1B2DA0)\n * Shades derived using 10%, 20%, 35% white/black overlays per brand guide\n */\nexport const ZENDIR_BRAND_COLORS = {\n // === Core Brand Colors ===\n /** Electric - Primary accent (#3E3CFF) */\n electric: '#3E3CFF',\n /** Purple - Secondary accent (#9D70FF) */\n purple: '#9D70FF',\n /** Prussian Blue - Subsections (#1B2DA0) */\n prussianBlue: '#1B2DA0',\n /** Black */\n black: '#000000',\n /** White */\n white: '#FFFFFF',\n \n // === Electric Shades (10%, 20%, 35% overlays) ===\n electricLighter: '#9997FF', // 35% white overlay\n electricLight: '#6B69FF', // 20% white overlay \n electricSoft: '#5250FF', // 10% white overlay\n electricDark: '#3836E6', // 10% black overlay\n electricDarker: '#3230CC', // 20% black overlay\n electricDeep: '#2926A3', // 35% black overlay\n \n // === Purple Shades ===\n purpleLighter: '#C9A8FF', // 35% white overlay\n purpleLight: '#B48DFF', // 20% white overlay\n purpleSoft: '#A97FFF', // 10% white overlay\n purpleDark: '#8E64E6', // 10% black overlay\n purpleDarker: '#7E5ACC', // 20% black overlay\n purpleDeep: '#5F4499', // 35% black overlay\n \n // === Prussian Blue Shades ===\n prussianBlueLighter: '#4A5FD6', // 35% white overlay\n prussianBlueLight: '#3548C0', // 20% white overlay\n prussianBlueSoft: '#2838B0', // 10% white overlay\n prussianBlueDark: '#182890', // 10% black overlay\n prussianBlueDarker: '#142380', // 20% black overlay\n prussianBlueDeep: '#0F1A60', // 35% black overlay\n} as const;\n\n/**\n * Official AstroUXDS Data Visualization Color Palette\n * Per https://astrouxds.com/design-tokens/system/#data-viz\n * \n * These are the OFFICIAL AstroUXDS data visualization colors from the design system.\n * Use these for pure AstroUXDS compliance (e.g., 'astro' theme).\n * \n * @see https://astrouxds.com/design-tokens/system/\n */\nexport const OFFICIAL_ASTRO_DATA_VIZ_COLORS = {\n /** Official AstroUXDS data visualization palette (8 colors) */\n primary: [\n '#00c7cb', // color-data-visualization-1 - Teal 500\n '#938bdb', // color-data-visualization-2 - Purple 400\n '#4dacff', // color-data-visualization-3 - Brightblue 500\n '#70dde0', // color-data-visualization-4 - Teal 300\n '#c9c5ed', // color-data-visualization-5 - Purple 200\n '#92cbff', // color-data-visualization-6 - Brightblue 400\n '#a1e9eb', // color-data-visualization-7 - Teal 200\n '#b7dcff', // color-data-visualization-8 - Brightblue 300\n ],\n \n /** Extended palette - primary + additional derived colors for 11 max */\n extended: [\n '#00c7cb', // Teal 500 - Primary\n '#938bdb', // Purple 400 - Secondary\n '#4dacff', // Brightblue 500\n '#70dde0', // Teal 300\n '#c9c5ed', // Purple 200\n '#92cbff', // Brightblue 400\n '#a1e9eb', // Teal 200\n '#b7dcff', // Brightblue 300\n '#009a9d', // Teal 600 (darker)\n '#756bb8', // Purple 500 (darker)\n '#2b659b', // Brightblue 700 (darker)\n ],\n \n /** Sequential palettes for heatmaps using AstroUXDS colors */\n sequential: {\n /** Teal sequential */\n teal: ['#e5f9f9', '#a1e9eb', '#70dde0', '#00c7cb', '#009a9d', '#006e70'],\n /** Purple sequential */\n purple: ['#eceaf7', '#c9c5ed', '#a9a3dc', '#938bdb', '#756bb8', '#5b5299'],\n /** Brightblue sequential */\n brightblue: ['#e8f4ff', '#b7dcff', '#92cbff', '#4dacff', '#2b659b', '#1c3f5e'],\n /** Thermal - Status colors for temperature */\n thermal: ['#00c7cb', '#56f000', '#fce83a', '#ffb302', '#ff6b35', '#ff3838'],\n },\n} as const;\n\n/**\n * Zendir-branded Data Visualization Color Palette \n * Uses Zendir brand colors (Electric, Purple, Prussian Blue)\n * while maintaining AstroUXDS compliance (max 11 colors, colorblind-accessible)\n * \n * @see https://www.astrouxds.com/patterns/data-visualization/\n */\nexport const ASTRO_DATA_VIZ_COLORS = {\n /** \n * Primary data visualization palette - Pure Zendir Brand\n * Uses only Zendir brand colors and their derived shades\n * Max 11 colors per AstroUXDS compliance requirement 3.2.1\n * \n * NOTE: Status colors (green, yellow, red) reserved for status indication only\n */\n mixed: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF - Primary\n ZENDIR_BRAND_COLORS.purple, // #9D70FF - Secondary\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF - Electric 20% lighter\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF - Purple 20% lighter\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0 - Prussian Blue lighter\n ZENDIR_BRAND_COLORS.electricLighter, // #9997FF - Electric 35% lighter\n ZENDIR_BRAND_COLORS.purpleLighter, // #C9A8FF - Purple 35% lighter\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0 - Prussian Blue\n ZENDIR_BRAND_COLORS.electricDarker, // #3230CC - Electric 20% darker\n ZENDIR_BRAND_COLORS.purpleDarker, // #7E5ACC - Purple 20% darker\n ZENDIR_BRAND_COLORS.prussianBlueLighter, // #4A5FD6 - Prussian Blue lightest\n ],\n \n /** \n * Zendir Brand palette - Full brand spectrum\n * Complete set of Zendir brand colors for maximum brand expression\n */\n zendir: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF - Primary\n ZENDIR_BRAND_COLORS.purple, // #9D70FF - Secondary\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.electricLighter, // #9997FF\n ZENDIR_BRAND_COLORS.purpleLighter, // #C9A8FF\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ],\n \n /** \n * Extended Zendir palette - All shades for complex visualizations\n * Includes dark and light variants for maximum differentiation\n */\n zendirExtended: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.purple, // #9D70FF\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ZENDIR_BRAND_COLORS.electricLighter, // #9997FF\n ZENDIR_BRAND_COLORS.purpleLighter, // #C9A8FF\n ZENDIR_BRAND_COLORS.electricDarker, // #3230CC\n ZENDIR_BRAND_COLORS.purpleDarker, // #7E5ACC\n ZENDIR_BRAND_COLORS.prussianBlueDarker, // #142380\n ],\n \n /** \n * Cool palette - Blues and purples\n * Professional Zendir-branded cool tones\n */\n cool: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.purple, // #9D70FF\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ZENDIR_BRAND_COLORS.electricLighter, // #9997FF\n ZENDIR_BRAND_COLORS.prussianBlueLighter, // #4A5FD6\n ],\n \n /** \n * Warm accent palette - For charts needing warm tones\n * Use sparingly - not part of Zendir brand\n */\n warm: [\n '#ffb302', // Amber\n '#ff9966', // Coral\n '#fce83a', // Yellow\n '#ff6b6b', // Salmon\n '#f0a000', // Orange\n '#ffcc80', // Peach\n '#e0a86c', // Tan\n '#d4b896', // Sand\n ],\n \n /** \n * Electric-Purple gradient palette (Zendir brand gradient)\n * Matches the official brand gradient from Electric to Purple\n */\n electricPurple: [\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.electricSoft, // #5250FF\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n '#8070FF', // Blend E→P\n ZENDIR_BRAND_COLORS.purple, // #9D70FF\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ZENDIR_BRAND_COLORS.purpleLighter, // #C9A8FF\n '#DCC4FF', // Lightest\n ],\n \n /** \n * Prussian-Electric gradient palette\n * Deep to vibrant brand progression\n */\n prussianElectric: [\n ZENDIR_BRAND_COLORS.prussianBlueDarker, // #142380\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ZENDIR_BRAND_COLORS.electricDarker, // #3230CC\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ],\n \n /** \n * Full Zendir spectrum gradient\n * Prussian Blue → Electric → Purple\n */\n zendirSpectrum: [\n ZENDIR_BRAND_COLORS.prussianBlue, // #1B2DA0\n ZENDIR_BRAND_COLORS.prussianBlueLight, // #3548C0\n ZENDIR_BRAND_COLORS.electric, // #3E3CFF\n ZENDIR_BRAND_COLORS.electricLight, // #6B69FF\n ZENDIR_BRAND_COLORS.purple, // #9D70FF\n ZENDIR_BRAND_COLORS.purpleLight, // #B48DFF\n ],\n \n /**\n * Sequential palettes for heatmaps and gradual data\n * Zendir brand-forward gradients\n */\n sequential: {\n /** Zendir Electric sequential - Primary brand gradient */\n electric: ['#E8E8FF', '#C9C8FF', '#9997FF', '#6B69FF', '#3E3CFF', '#3230CC', '#262499'],\n /** Zendir Purple sequential - Secondary brand gradient */\n purple: ['#F0E8FF', '#DCC4FF', '#C9A8FF', '#B48DFF', '#9D70FF', '#7E5ACC', '#5F4499'],\n /** Zendir Prussian Blue sequential - Deep brand gradient */\n prussianBlue: ['#E8ECFF', '#C5CFF0', '#8A9DD6', '#4A5FD6', '#3548C0', '#1B2DA0', '#0F1A60'],\n /** Zendir gradient - Electric → Purple blend */\n brand: ['#3E3CFF', '#5250FF', '#6B69FF', '#7E70FF', '#9D70FF', '#B48DFF', '#C9A8FF'],\n /** Thermal - Status colors for temperature (AstroUXDS compliant) */\n thermal: ['#00C7CB', '#56F000', '#FCE83A', '#FFB302', '#FF6B35', '#FF3838'],\n },\n};\n\n/**\n * AstroUXDS Status Colors (DO NOT MODIFY)\n * Per https://www.astrouxds.com/patterns/status-system/\n * \n * These colors are RESERVED for status indication only.\n * Per compliance requirement, do not use status colors for\n * non-status data visualization.\n * \n * @see https://www.astrouxds.com/compliance/astro-design-compliance/\n * Rule 3.1.2: Elements indicating state shall use only specified Status Colors\n */\nexport const STATUS_COLORS = {\n normal: '#56f000', // Green - System operating normally\n standby: '#2dccff', // Cyan - Awaiting/standby state\n caution: '#fce83a', // Yellow - Requires attention\n serious: '#ffb302', // Orange - Significant issue\n critical: '#ff3838', // Red - Immediate action required\n off: '#a4abb6', // Grey - Inactive/off state\n} as const;\n\n/**\n * Zendir Accent Colors for UI elements (non-status)\n * Use these for interactive elements, highlights, and branding\n */\nexport const ZENDIR_ACCENT_COLORS = {\n /** Primary accent - Zendir Electric */\n primary: ZENDIR_BRAND_COLORS.electric,\n /** Secondary accent - Zendir Purple */\n secondary: ZENDIR_BRAND_COLORS.purple,\n /** Tertiary accent - Zendir Prussian Blue */\n tertiary: ZENDIR_BRAND_COLORS.prussianBlue,\n /** Info accent - Prussian Blue Light */\n info: ZENDIR_BRAND_COLORS.prussianBlueLight,\n /** Highlight - Electric Light */\n highlight: ZENDIR_BRAND_COLORS.electricLight,\n} as const;\n\n// =============================================================================\n// Theme Generator\n// =============================================================================\n\nexport interface EChartsTheme {\n color: string[];\n backgroundColor: string;\n textStyle: {\n color: string;\n fontFamily: string;\n fontSize: number;\n textBorderWidth?: number;\n textBorderColor?: string;\n };\n title: {\n textStyle: { color: string; fontSize: number; fontWeight: string; textBorderWidth?: number; textBorderColor?: string };\n subtextStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n };\n legend: {\n textStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n inactiveColor: string;\n };\n tooltip: {\n backgroundColor: string;\n borderColor: string;\n borderWidth: number;\n textStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n extraCssText: string;\n };\n axisPointer: {\n lineStyle: { color: string; width: number };\n crossStyle: { color: string; width: number };\n };\n xAxis: {\n axisLine: { lineStyle: { color: string } };\n axisTick: { lineStyle: { color: string } };\n axisLabel: { color: string; fontSize: number; fontFamily: string; textBorderWidth?: number; textBorderColor?: string };\n splitLine: { lineStyle: { color: string; type: string } };\n nameTextStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n };\n yAxis: {\n axisLine: { lineStyle: { color: string } };\n axisTick: { lineStyle: { color: string } };\n axisLabel: { color: string; fontSize: number; fontFamily: string; textBorderWidth?: number; textBorderColor?: string };\n splitLine: { lineStyle: { color: string; type: string } };\n nameTextStyle: { color: string; fontSize: number; textBorderWidth?: number; textBorderColor?: string };\n };\n series: {\n line: { lineStyle: { width: number }; symbolSize: number };\n bar: { barMaxWidth: number; itemStyle: { borderRadius: number[] } };\n pie: {\n itemStyle: { borderColor: string; borderWidth: number };\n label?: { color: string; textBorderWidth: number; textBorderColor: string; fontSize: number };\n };\n scatter: { symbolSize: number };\n gauge: { axisLine: { lineStyle: { width: number } } };\n };\n dataZoom: {\n backgroundColor: string;\n borderColor: string;\n fillerColor: string;\n handleColor: string;\n textStyle: { color: string; textBorderWidth?: number; textBorderColor?: string };\n };\n visualMap: {\n textStyle: { color: string; textBorderWidth?: number; textBorderColor?: string };\n inRange: { color: string[] };\n };\n grid: {\n borderColor: string;\n };\n}\n\n/**\n * Generate ECharts theme from Astro tokens\n * \n * Creates a theme that:\n * - Uses official AstroUXDS colors for 'astro' theme variant\n * - Uses Zendir brand colors for all other theme variants\n * - Maintains AstroUXDS compliance (max 11 colors, 14pt min font)\n * - Preserves status colors for their reserved purposes\n * - Supports both dark and light modes\n * \n * @param tokens - Theme tokens from ThemeProvider\n * @param mode - Current theme mode ('dark' | 'light')\n * @param themeVariant - Optional theme variant to determine color palette\n * @returns ECharts theme configuration\n */\nexport function createAstroEChartsTheme(\n tokens: ThemeTokens,\n mode: ThemeMode,\n themeVariant?: ThemeVariant\n): EChartsTheme {\n const isDark = mode === 'dark';\n \n // Use official AstroUXDS colors for 'astro' theme, Zendir colors for others\n const isAstroTheme = themeVariant === 'astro';\n const dataVizColors = isAstroTheme \n ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended] \n : ASTRO_DATA_VIZ_COLORS.mixed;\n \n return {\n // Data visualization color palette\n // - 'astro' theme: Official AstroUXDS colors (teal, purple, brightblue)\n // - Other themes: Zendir brand colors (electric, purple, prussian blue)\n color: dataVizColors,\n \n // Background\n backgroundColor: 'transparent',\n \n // Global text style - 14pt minimum per AstroUXDS; no white border on labels\n textStyle: {\n color: tokens.colors.text.primary,\n fontFamily: tokens.typography.fontFamily.primary,\n fontSize: 14, // AstroUXD minimum requirement\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n \n // Title - Grey for readability, AstroUXDS compliant\n title: {\n textStyle: {\n color: tokens.colors.text.secondary, // Grey for headings\n fontSize: 14,\n fontWeight: 'bold',\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n subtextStyle: {\n color: tokens.colors.text.tertiary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n },\n \n // Legend\n legend: {\n textStyle: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n inactiveColor: tokens.colors.text.tertiary,\n },\n \n // Tooltip\n tooltip: {\n backgroundColor: isDark \n ? 'rgba(27, 45, 62, 0.95)' \n : 'rgba(255, 255, 255, 0.95)',\n borderColor: tokens.colors.border.default,\n borderWidth: 1,\n textStyle: {\n color: tokens.colors.text.primary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n extraCssText: `\n border-radius: ${tokens.borderRadius.md};\n box-shadow: ${tokens.shadows.lg};\n backdrop-filter: blur(8px);\n `,\n },\n \n // Axis pointer / crosshair - Subtle grey for clarity\n axisPointer: {\n lineStyle: {\n color: tokens.colors.text.tertiary, // Subtle grey\n width: 1,\n },\n crossStyle: {\n color: tokens.colors.text.tertiary, // Subtle grey\n width: 1,\n },\n },\n \n // X Axis\n xAxis: {\n axisLine: {\n lineStyle: {\n color: tokens.colors.border.default,\n },\n },\n axisTick: {\n lineStyle: {\n color: tokens.colors.border.muted,\n },\n },\n axisLabel: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n fontFamily: tokens.typography.fontFamily.mono, // Tabular numbers\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n splitLine: {\n lineStyle: {\n color: tokens.colors.border.muted,\n type: 'dashed',\n },\n },\n nameTextStyle: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n },\n \n // Y Axis\n yAxis: {\n axisLine: {\n lineStyle: {\n color: tokens.colors.border.default,\n },\n },\n axisTick: {\n lineStyle: {\n color: tokens.colors.border.muted,\n },\n },\n axisLabel: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n fontFamily: tokens.typography.fontFamily.mono, // Tabular numbers\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n splitLine: {\n lineStyle: {\n color: tokens.colors.border.muted,\n type: 'dashed',\n },\n },\n nameTextStyle: {\n color: tokens.colors.text.secondary,\n fontSize: 12,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n },\n \n // Series defaults\n series: {\n line: {\n lineStyle: {\n width: 2,\n },\n symbolSize: 6,\n },\n bar: {\n barMaxWidth: 40,\n itemStyle: {\n borderRadius: [4, 4, 0, 0],\n },\n },\n pie: {\n itemStyle: {\n borderColor: tokens.colors.background.surface,\n borderWidth: 2,\n },\n label: {\n color: tokens.colors.text.primary,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n fontSize: 12,\n },\n },\n scatter: {\n symbolSize: 10,\n },\n gauge: {\n axisLine: {\n lineStyle: {\n width: 10,\n },\n },\n },\n },\n \n // Data zoom - Theme-aware interactive controls\n dataZoom: {\n backgroundColor: isDark \n ? 'rgba(27, 45, 62, 0.5)' \n : 'rgba(234, 238, 244, 0.5)',\n borderColor: tokens.colors.border.muted,\n // Astro theme uses brightblue, others use Zendir Electric\n fillerColor: isAstroTheme \n ? 'rgba(77, 172, 255, 0.15)' // AstroUXDS Brightblue\n : 'rgba(62, 60, 255, 0.15)', // Zendir Electric\n handleColor: isAstroTheme \n ? '#4dacff' // AstroUXDS Brightblue 500\n : ZENDIR_BRAND_COLORS.electric, // Zendir Electric\n textStyle: {\n color: tokens.colors.text.secondary,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n },\n \n // Visual map (for heatmaps) - Theme-aware sequential palette\n visualMap: {\n textStyle: {\n color: tokens.colors.text.secondary,\n textBorderWidth: 0,\n textBorderColor: 'transparent',\n },\n inRange: {\n // Astro theme uses official teal gradient, others use Zendir Electric\n color: isAstroTheme \n ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal]\n : ASTRO_DATA_VIZ_COLORS.sequential.electric,\n },\n },\n \n // Grid\n grid: {\n borderColor: tokens.colors.border.muted,\n },\n };\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Get status color from value and thresholds\n */\nexport function getStatusColor(\n value: number,\n thresholds: {\n critical?: number;\n serious?: number;\n caution?: number;\n normal?: number;\n }\n): string {\n if (thresholds.critical !== undefined && value >= thresholds.critical) {\n return STATUS_COLORS.critical;\n }\n if (thresholds.serious !== undefined && value >= thresholds.serious) {\n return STATUS_COLORS.serious;\n }\n if (thresholds.caution !== undefined && value >= thresholds.caution) {\n return STATUS_COLORS.caution;\n }\n return STATUS_COLORS.normal;\n}\n\n/**\n * Get color for series by index (wraps around palette)\n * \n * @param index - Series index\n * @param palette - Color palette to use (defaults to Zendir-Astro mixed)\n * @returns Hex color string\n * \n * @example\n * ```tsx\n * // Uses Zendir-Astro fusion palette\n * const color = getSeriesColor(0); // #3E3CFF (Zendir Electric)\n * \n * // Use Zendir-only palette\n * const brandColor = getSeriesColor(0, ASTRO_DATA_VIZ_COLORS.zendir);\n * ```\n */\nexport function getSeriesColor(index: number, palette = ASTRO_DATA_VIZ_COLORS.mixed): string {\n return palette[index % palette.length];\n}\n\n/**\n * Get Zendir brand color by role\n * Use for consistent branding across the application\n */\nexport function getZendirAccentColor(role: keyof typeof ZENDIR_ACCENT_COLORS): string {\n return ZENDIR_ACCENT_COLORS[role];\n}\n\n/**\n * Get appropriate palette based on data type and optional theme\n * \n * @param dataType - Type of data being visualized\n * @param useAstroTheme - If true, uses official AstroUXDS colors; otherwise Zendir colors\n * @returns Appropriate color palette\n * \n * @example\n * ```tsx\n * // For general multi-series data (Zendir brand - default)\n * const colors = getPaletteForDataType('categorical');\n * \n * // For official AstroUXDS colors\n * const astroColors = getPaletteForDataType('categorical', true);\n * \n * // For Zendir brand-forward charts\n * const brandColors = getPaletteForDataType('zendir');\n * \n * // For official AstroUXDS palette explicitly\n * const officialColors = getPaletteForDataType('astro-official');\n * \n * // For status-based data (uses reserved AstroUXDS status colors)\n * const statusColors = getPaletteForDataType('status');\n * ```\n */\nexport function getPaletteForDataType(\n dataType: 'categorical' | 'sequential' | 'diverging' | 'status' | 'zendir' | 'zendirExtended' | 'cool' | 'warm' | 'astro-official',\n useAstroTheme = false\n): string[] {\n // If useAstroTheme is true, default to official AstroUXDS colors\n if (useAstroTheme && (dataType === 'categorical' || dataType === 'sequential')) {\n return dataType === 'sequential' \n ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal]\n : [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended];\n }\n \n switch (dataType) {\n case 'astro-official':\n return [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended]; // Official AstroUXDS colors\n case 'categorical':\n return ASTRO_DATA_VIZ_COLORS.mixed; // Pure Zendir brand palette\n case 'zendir':\n return ASTRO_DATA_VIZ_COLORS.zendir; // Core Zendir brand colors\n case 'zendirExtended':\n return ASTRO_DATA_VIZ_COLORS.zendirExtended; // All Zendir shades\n case 'sequential':\n return ASTRO_DATA_VIZ_COLORS.sequential.electric; // Zendir Electric gradient\n case 'diverging':\n return [...ASTRO_DATA_VIZ_COLORS.sequential.electric].reverse()\n .concat(ASTRO_DATA_VIZ_COLORS.sequential.purple);\n case 'status':\n // AstroUXDS status colors - RESERVED for status indication only\n return [\n STATUS_COLORS.normal,\n STATUS_COLORS.standby,\n STATUS_COLORS.caution,\n STATUS_COLORS.serious,\n STATUS_COLORS.critical,\n ];\n case 'cool':\n return ASTRO_DATA_VIZ_COLORS.cool;\n case 'warm':\n return ASTRO_DATA_VIZ_COLORS.warm;\n default:\n return ASTRO_DATA_VIZ_COLORS.mixed;\n }\n}\n\n/**\n * Create gradient for area charts\n */\nexport function createAreaGradient(\n color: string,\n direction: 'vertical' | 'horizontal' = 'vertical'\n): {\n type: 'linear';\n x: number;\n y: number;\n x2: number;\n y2: number;\n colorStops: Array<{ offset: number; color: string }>;\n} {\n return {\n type: 'linear',\n x: 0,\n y: direction === 'vertical' ? 0 : 0,\n x2: direction === 'horizontal' ? 1 : 0,\n y2: direction === 'vertical' ? 1 : 0,\n colorStops: [\n { offset: 0, color: `${color}40` },\n { offset: 1, color: `${color}05` },\n ],\n };\n}\n\n/**\n * Format time for axis labels\n */\nexport function formatTimeLabel(timestamp: number, format: 'short' | 'medium' | 'long' = 'short'): string {\n const date = new Date(timestamp);\n \n switch (format) {\n case 'short':\n return date.toLocaleTimeString([], { \n hour: '2-digit', \n minute: '2-digit',\n hour12: false,\n });\n case 'medium':\n return date.toLocaleTimeString([], { \n hour: '2-digit', \n minute: '2-digit',\n second: '2-digit',\n hour12: false,\n });\n case 'long':\n return date.toLocaleString([], {\n month: 'short',\n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n hour12: false,\n });\n }\n}\n\n/**\n * Format number with unit suffix\n */\nexport function formatValueWithUnit(value: number, unit?: string, precision = 2): string {\n const formatted = Number.isInteger(value) ? value.toString() : value.toFixed(precision);\n return unit ? `${formatted}${unit}` : formatted;\n}\n\n/**\n * Calculate nice axis bounds\n */\nexport function calculateAxisBounds(\n values: number[],\n padding = 0.1\n): { min: number; max: number } {\n if (values.length === 0) return { min: 0, max: 100 };\n \n const min = Math.min(...values);\n const max = Math.max(...values);\n const range = max - min || 1;\n \n return {\n min: min - range * padding,\n max: max + range * padding,\n };\n}\n"],"names":[],"mappings":"AA2BO,MAAM,sBAAsB;AAAA;AAAA;AAAA,EAGjC,UAAU;AAAA;AAAA,EAEV,QAAQ;AAAA;AAAA,EAER,cAAc;AAAA;AAAA,EAEd,OAAO;AAAA;AAAA,EAEP,OAAO;AAAA;AAAA,EAGP,iBAAiB;AAAA;AAAA,EACjB,eAAe;AAAA;AAAA,EACf,cAAc;AAAA;AAAA,EACd,cAAc;AAAA;AAAA,EACd,gBAAgB;AAAA;AAAA,EAChB,cAAc;AAAA;AAAA;AAAA,EAGd,eAAe;AAAA;AAAA,EACf,aAAa;AAAA;AAAA,EACb,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,cAAc;AAAA;AAAA,EACd,YAAY;AAAA;AAAA;AAAA,EAGZ,qBAAqB;AAAA;AAAA,EACrB,mBAAmB;AAAA;AAAA,EACnB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AAAA;AAAA,EAClB,oBAAoB;AAAA;AAAA,EACpB,kBAAkB;AAAA;AACpB;AAWO,MAAM,iCAAiC;AAAA;AAAA,EAE5C,SAAS;AAAA,IACP;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA;AAAA,EAIF,UAAU;AAAA,IACR;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA;AAAA,EAIF,YAAY;AAAA;AAAA,IAEV,MAAM,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA;AAAA,IAEvE,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA;AAAA,IAEzE,YAAY,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA;AAAA,IAE7E,SAAS,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,EAAA;AAE9E;AASO,MAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQnC,OAAO;AAAA,IACL,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtB,QAAQ;AAAA,IACN,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtB,gBAAgB;AAAA,IACd,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtB,MAAM;AAAA,IACJ,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtB,MAAM;AAAA,IACJ;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOF,gBAAgB;AAAA,IACd,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB;AAAA;AAAA,IACA,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOF,kBAAkB;AAAA,IAChB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtB,gBAAgB;AAAA,IACd,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,IACpB,oBAAoB;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtB,YAAY;AAAA;AAAA,IAEV,UAAU,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA;AAAA,IAEtF,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA;AAAA,IAEpF,cAAc,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA;AAAA,IAE1F,OAAO,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA;AAAA,IAEnF,SAAS,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,EAAA;AAE9E;AAaO,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA;AAAA,EACR,SAAS;AAAA;AAAA,EACT,SAAS;AAAA;AAAA,EACT,SAAS;AAAA;AAAA,EACT,UAAU;AAAA;AAAA,EACV,KAAK;AAAA;AACP;AAAA,CAMoC;AAAA;AAAA,EAElC,SAAS,oBAAoB;AAAA;AAAA,EAE7B,WAAW,oBAAoB;AAAA;AAAA,EAE/B,UAAU,oBAAoB;AAAA;AAAA,EAE9B,MAAM,oBAAoB;AAAA;AAAA,EAE1B,WAAW,oBAAoB;AACjC;AA0FO,SAAS,wBACd,QACA,MACA,cACc;AACd,QAAM,SAAS,SAAS;AAGxB,QAAM,eAAe,iBAAiB;AACtC,QAAM,gBAAgB,eAClB,CAAC,GAAG,+BAA+B,QAAQ,IAC3C,sBAAsB;AAE1B,SAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA;AAAA,IAGP,iBAAiB;AAAA;AAAA,IAGjB,WAAW;AAAA,MACT,OAAO,OAAO,OAAO,KAAK;AAAA,MAC1B,YAAY,OAAO,WAAW,WAAW;AAAA,MACzC,UAAU;AAAA;AAAA,MACV,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA;AAAA;AAAA,IAInB,OAAO;AAAA,MACL,WAAW;AAAA,QACT,OAAO,OAAO,OAAO,KAAK;AAAA;AAAA,QAC1B,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,MAEnB,cAAc;AAAA,QACZ,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA;AAAA,IAIF,QAAQ;AAAA,MACN,WAAW;AAAA,QACT,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,MAEnB,eAAe,OAAO,OAAO,KAAK;AAAA,IAAA;AAAA;AAAA,IAIpC,SAAS;AAAA,MACP,iBAAiB,SACb,2BACA;AAAA,MACJ,aAAa,OAAO,OAAO,OAAO;AAAA,MAClC,aAAa;AAAA,MACb,WAAW;AAAA,QACT,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,MAEnB,cAAc;AAAA,yBACK,OAAO,aAAa,EAAE;AAAA,sBACzB,OAAO,QAAQ,EAAE;AAAA;AAAA;AAAA,IAAA;AAAA;AAAA,IAMnC,aAAa;AAAA,MACX,WAAW;AAAA,QACT,OAAO,OAAO,OAAO,KAAK;AAAA;AAAA,QAC1B,OAAO;AAAA,MAAA;AAAA,MAET,YAAY;AAAA,QACV,OAAO,OAAO,OAAO,KAAK;AAAA;AAAA,QAC1B,OAAO;AAAA,MAAA;AAAA,IACT;AAAA;AAAA,IAIF,OAAO;AAAA,MACL,UAAU;AAAA,QACR,WAAW;AAAA,UACT,OAAO,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEF,UAAU;AAAA,QACR,WAAW;AAAA,UACT,OAAO,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEF,WAAW;AAAA,QACT,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,UAAU;AAAA,QACV,YAAY,OAAO,WAAW,WAAW;AAAA;AAAA,QACzC,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,MAEnB,WAAW;AAAA,QACT,WAAW;AAAA,UACT,OAAO,OAAO,OAAO,OAAO;AAAA,UAC5B,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF,eAAe;AAAA,QACb,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA;AAAA,IAIF,OAAO;AAAA,MACL,UAAU;AAAA,QACR,WAAW;AAAA,UACT,OAAO,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEF,UAAU;AAAA,QACR,WAAW;AAAA,UACT,OAAO,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEF,WAAW;AAAA,QACT,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,UAAU;AAAA,QACV,YAAY,OAAO,WAAW,WAAW;AAAA;AAAA,QACzC,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,MAEnB,WAAW;AAAA,QACT,WAAW;AAAA,UACT,OAAO,OAAO,OAAO,OAAO;AAAA,UAC5B,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF,eAAe;AAAA,QACb,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA;AAAA,IAIF,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,WAAW;AAAA,UACT,OAAO;AAAA,QAAA;AAAA,QAET,YAAY;AAAA,MAAA;AAAA,MAEd,KAAK;AAAA,QACH,aAAa;AAAA,QACb,WAAW;AAAA,UACT,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,KAAK;AAAA,QACH,WAAW;AAAA,UACT,aAAa,OAAO,OAAO,WAAW;AAAA,UACtC,aAAa;AAAA,QAAA;AAAA,QAEf,OAAO;AAAA,UACL,OAAO,OAAO,OAAO,KAAK;AAAA,UAC1B,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,SAAS;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,UAAU;AAAA,UACR,WAAW;AAAA,YACT,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA;AAAA,IAIF,UAAU;AAAA,MACR,iBAAiB,SACb,0BACA;AAAA,MACJ,aAAa,OAAO,OAAO,OAAO;AAAA;AAAA,MAElC,aAAa,eACT,6BACA;AAAA;AAAA,MACJ,aAAa,eACT,YACA,oBAAoB;AAAA;AAAA,MACxB,WAAW;AAAA,QACT,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA;AAAA,IAIF,WAAW;AAAA,MACT,WAAW;AAAA,QACT,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MAAA;AAAA,MAEnB,SAAS;AAAA;AAAA,QAEP,OAAO,eACH,CAAC,GAAG,+BAA+B,WAAW,IAAI,IAClD,sBAAsB,WAAW;AAAA,MAAA;AAAA,IACvC;AAAA;AAAA,IAIF,MAAM;AAAA,MACJ,aAAa,OAAO,OAAO,OAAO;AAAA,IAAA;AAAA,EACpC;AAEJ;AASO,SAAS,eACd,OACA,YAMQ;AACR,MAAI,WAAW,aAAa,UAAa,SAAS,WAAW,UAAU;AACrE,WAAO,cAAc;AAAA,EACvB;AACA,MAAI,WAAW,YAAY,UAAa,SAAS,WAAW,SAAS;AACnE,WAAO,cAAc;AAAA,EACvB;AACA,MAAI,WAAW,YAAY,UAAa,SAAS,WAAW,SAAS;AACnE,WAAO,cAAc;AAAA,EACvB;AACA,SAAO,cAAc;AACvB;AAkBO,SAAS,eAAe,OAAe,UAAU,sBAAsB,OAAe;AAC3F,SAAO,QAAQ,QAAQ,QAAQ,MAAM;AACvC;AAmCO,SAAS,sBACd,UACA,gBAAgB,OACN;AAEV,MAAI,kBAAkB,aAAa,iBAAiB,aAAa,eAAe;AAC9E,WAAO,aAAa,eAChB,CAAC,GAAG,+BAA+B,WAAW,IAAI,IAClD,CAAC,GAAG,+BAA+B,QAAQ;AAAA,EACjD;AAEA,UAAQ,UAAA;AAAA,IACN,KAAK;AACH,aAAO,CAAC,GAAG,+BAA+B,QAAQ;AAAA,IACpD,KAAK;AACH,aAAO,sBAAsB;AAAA,IAC/B,KAAK;AACH,aAAO,sBAAsB;AAAA,IAC/B,KAAK;AACH,aAAO,sBAAsB;AAAA,IAC/B,KAAK;AACH,aAAO,sBAAsB,WAAW;AAAA,IAC1C,KAAK;AACH,aAAO,CAAC,GAAG,sBAAsB,WAAW,QAAQ,EAAE,QAAA,EACnD,OAAO,sBAAsB,WAAW,MAAM;AAAA,IACnD,KAAK;AAEH,aAAO;AAAA,QACL,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc;AAAA,MAAA;AAAA,IAElB,KAAK;AACH,aAAO,sBAAsB;AAAA,IAC/B,KAAK;AACH,aAAO,sBAAsB;AAAA,IAC/B;AACE,aAAO,sBAAsB;AAAA,EAAA;AAEnC;AAKO,SAAS,mBACd,OACA,YAAuC,YAQvC;AACA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,GAAG;AAAA,IACH,GAAG,cAAc,aAAa,IAAI;AAAA,IAClC,IAAI,cAAc,eAAe,IAAI;AAAA,IACrC,IAAI,cAAc,aAAa,IAAI;AAAA,IACnC,YAAY;AAAA,MACV,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,KAAA;AAAA,MAC5B,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,KAAA;AAAA,IAAK;AAAA,EACnC;AAEJ;AAKO,SAAS,gBAAgB,WAAmB,SAAsC,SAAiB;AACxG,QAAM,OAAO,IAAI,KAAK,SAAS;AAE/B,UAAQ,QAAA;AAAA,IACN,KAAK;AACH,aAAO,KAAK,mBAAmB,IAAI;AAAA,QACjC,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA,CACT;AAAA,IACH,KAAK;AACH,aAAO,KAAK,mBAAmB,IAAI;AAAA,QACjC,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA,CACT;AAAA,IACH,KAAK;AACH,aAAO,KAAK,eAAe,IAAI;AAAA,QAC7B,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA,CACT;AAAA,EAAA;AAEP;AAKO,SAAS,oBAAoB,OAAe,MAAe,YAAY,GAAW;AACvF,QAAM,YAAY,OAAO,UAAU,KAAK,IAAI,MAAM,aAAa,MAAM,QAAQ,SAAS;AACtF,SAAO,OAAO,GAAG,SAAS,GAAG,IAAI,KAAK;AACxC;AAKO,SAAS,oBACd,QACA,UAAU,KACoB;AAC9B,MAAI,OAAO,WAAW,EAAG,QAAO,EAAE,KAAK,GAAG,KAAK,IAAA;AAE/C,QAAM,MAAM,KAAK,IAAI,GAAG,MAAM;AAC9B,QAAM,MAAM,KAAK,IAAI,GAAG,MAAM;AAC9B,QAAM,QAAQ,MAAM,OAAO;AAE3B,SAAO;AAAA,IACL,KAAK,MAAM,QAAQ;AAAA,IACnB,KAAK,MAAM,QAAQ;AAAA,EAAA;AAEvB;"}