@zendir/ui 0.1.0

package/dist/react/charts/unified/theme.js

@@ -0,0 +1,562 @@
+const ZENDIR_BRAND_COLORS = {
+  // === Core Brand Colors ===
+  /** Electric - Primary accent (#3E3CFF) */
+  electric: "#3E3CFF",
+  /** Purple - Secondary accent (#9D70FF) */
+  purple: "#9D70FF",
+  /** Prussian Blue - Subsections (#1B2DA0) */
+  prussianBlue: "#1B2DA0",
+  // === Electric Shades (10%, 20%, 35% overlays) ===
+  electricLighter: "#9997FF",
+  // 35% white overlay
+  electricLight: "#6B69FF",
+  // 20% white overlay  
+  electricSoft: "#5250FF",
+  // 10% white overlay
+  electricDark: "#3836E6",
+  // 10% black overlay
+  electricDarker: "#3230CC",
+  // 35% black overlay
+  // === Purple Shades ===
+  purpleLighter: "#C9A8FF",
+  // 35% white overlay
+  purpleLight: "#B48DFF",
+  // 10% black overlay
+  purpleDarker: "#7E5ACC",
+  // 35% black overlay
+  // === Prussian Blue Shades ===
+  prussianBlueLighter: "#4A5FD6",
+  // 35% white overlay
+  prussianBlueLight: "#3548C0",
+  // 10% black overlay
+  prussianBlueDarker: "#142380"
+};
+const OFFICIAL_ASTRO_DATA_VIZ_COLORS = {
+  /** Extended palette - primary + additional derived colors for 11 max */
+  extended: [
+    "#00c7cb",
+    // Teal 500 - Primary
+    "#938bdb",
+    // Purple 400 - Secondary
+    "#4dacff",
+    // Brightblue 500
+    "#70dde0",
+    // Teal 300
+    "#c9c5ed",
+    // Purple 200
+    "#92cbff",
+    // Brightblue 400
+    "#a1e9eb",
+    // Teal 200
+    "#b7dcff",
+    // Brightblue 300
+    "#009a9d",
+    // Teal 600 (darker)
+    "#756bb8",
+    // Purple 500 (darker)
+    "#2b659b"
+    // Brightblue 700 (darker)
+  ],
+  /** Sequential palettes for heatmaps using AstroUXDS colors */
+  sequential: {
+    /** Teal sequential */
+    teal: ["#e5f9f9", "#a1e9eb", "#70dde0", "#00c7cb", "#009a9d", "#006e70"]
+  }
+};
+const ASTRO_DATA_VIZ_COLORS = {
+  /** 
+   * Primary data visualization palette - Pure Zendir Brand
+   * Uses only Zendir brand colors and their derived shades
+   * Max 11 colors per AstroUXDS compliance requirement 3.2.1
+   * 
+   * NOTE: Status colors (green, yellow, red) reserved for status indication only
+   */
+  mixed: [
+    ZENDIR_BRAND_COLORS.electric,
+    // #3E3CFF - Primary
+    ZENDIR_BRAND_COLORS.purple,
+    // #9D70FF - Secondary
+    ZENDIR_BRAND_COLORS.electricLight,
+    // #6B69FF - Electric 20% lighter
+    ZENDIR_BRAND_COLORS.purpleLight,
+    // #B48DFF - Purple 20% lighter
+    ZENDIR_BRAND_COLORS.prussianBlueLight,
+    // #3548C0 - Prussian Blue lighter
+    ZENDIR_BRAND_COLORS.electricLighter,
+    // #9997FF - Electric 35% lighter
+    ZENDIR_BRAND_COLORS.purpleLighter,
+    // #C9A8FF - Purple 35% lighter
+    ZENDIR_BRAND_COLORS.prussianBlue,
+    // #1B2DA0 - Prussian Blue
+    ZENDIR_BRAND_COLORS.electricDarker,
+    // #3230CC - Electric 20% darker
+    ZENDIR_BRAND_COLORS.purpleDarker,
+    // #7E5ACC - Purple 20% darker
+    ZENDIR_BRAND_COLORS.prussianBlueLighter
+    // #4A5FD6 - Prussian Blue lightest
+  ],
+  /** 
+   * Zendir Brand palette - Full brand spectrum
+   * Complete set of Zendir brand colors for maximum brand expression
+   */
+  zendir: [
+    ZENDIR_BRAND_COLORS.electric,
+    // #3E3CFF - Primary
+    ZENDIR_BRAND_COLORS.purple,
+    // #9D70FF - Secondary
+    ZENDIR_BRAND_COLORS.electricLight,
+    // #6B69FF
+    ZENDIR_BRAND_COLORS.purpleLight,
+    // #B48DFF
+    ZENDIR_BRAND_COLORS.prussianBlue,
+    // #1B2DA0
+    ZENDIR_BRAND_COLORS.electricLighter,
+    // #9997FF
+    ZENDIR_BRAND_COLORS.purpleLighter,
+    // #C9A8FF
+    ZENDIR_BRAND_COLORS.prussianBlueLight
+    // #3548C0
+  ],
+  /** 
+   * Extended Zendir palette - All shades for complex visualizations
+   * Includes dark and light variants for maximum differentiation
+   */
+  zendirExtended: [
+    ZENDIR_BRAND_COLORS.electric,
+    // #3E3CFF
+    ZENDIR_BRAND_COLORS.purple,
+    // #9D70FF
+    ZENDIR_BRAND_COLORS.prussianBlue,
+    // #1B2DA0
+    ZENDIR_BRAND_COLORS.electricLight,
+    // #6B69FF
+    ZENDIR_BRAND_COLORS.purpleLight,
+    // #B48DFF
+    ZENDIR_BRAND_COLORS.prussianBlueLight,
+    // #3548C0
+    ZENDIR_BRAND_COLORS.electricLighter,
+    // #9997FF
+    ZENDIR_BRAND_COLORS.purpleLighter,
+    // #C9A8FF
+    ZENDIR_BRAND_COLORS.electricDarker,
+    // #3230CC
+    ZENDIR_BRAND_COLORS.purpleDarker,
+    // #7E5ACC
+    ZENDIR_BRAND_COLORS.prussianBlueDarker
+    // #142380
+  ],
+  /** 
+   * Cool palette - Blues and purples
+   * Professional Zendir-branded cool tones
+   */
+  cool: [
+    ZENDIR_BRAND_COLORS.electric,
+    // #3E3CFF
+    ZENDIR_BRAND_COLORS.prussianBlue,
+    // #1B2DA0
+    ZENDIR_BRAND_COLORS.purple,
+    // #9D70FF
+    ZENDIR_BRAND_COLORS.electricLight,
+    // #6B69FF
+    ZENDIR_BRAND_COLORS.prussianBlueLight,
+    // #3548C0
+    ZENDIR_BRAND_COLORS.purpleLight,
+    // #B48DFF
+    ZENDIR_BRAND_COLORS.electricLighter,
+    // #9997FF
+    ZENDIR_BRAND_COLORS.prussianBlueLighter
+    // #4A5FD6
+  ],
+  /** 
+   * Warm accent palette - For charts needing warm tones
+   * Use sparingly - not part of Zendir brand
+   */
+  warm: [
+    "#ffb302",
+    // Amber
+    "#ff9966",
+    // Coral
+    "#fce83a",
+    // Yellow
+    "#ff6b6b",
+    // Salmon
+    "#f0a000",
+    // Orange
+    "#ffcc80",
+    // Peach
+    "#e0a86c",
+    // Tan
+    "#d4b896"
+    // Sand
+  ],
+  /** 
+   * Electric-Purple gradient palette (Zendir brand gradient)
+   * Matches the official brand gradient from Electric to Purple
+   */
+  electricPurple: [
+    ZENDIR_BRAND_COLORS.electric,
+    // #3E3CFF
+    ZENDIR_BRAND_COLORS.electricSoft,
+    // #5250FF
+    ZENDIR_BRAND_COLORS.electricLight,
+    // #6B69FF
+    "#8070FF",
+    // Blend E→P
+    ZENDIR_BRAND_COLORS.purple,
+    // #9D70FF
+    ZENDIR_BRAND_COLORS.purpleLight,
+    // #B48DFF
+    ZENDIR_BRAND_COLORS.purpleLighter,
+    // #C9A8FF
+    "#DCC4FF"
+    // Lightest
+  ],
+  /** 
+   * Prussian-Electric gradient palette
+   * Deep to vibrant brand progression
+   */
+  prussianElectric: [
+    ZENDIR_BRAND_COLORS.prussianBlueDarker,
+    // #142380
+    ZENDIR_BRAND_COLORS.prussianBlue,
+    // #1B2DA0
+    ZENDIR_BRAND_COLORS.prussianBlueLight,
+    // #3548C0
+    ZENDIR_BRAND_COLORS.electricDarker,
+    // #3230CC
+    ZENDIR_BRAND_COLORS.electric,
+    // #3E3CFF
+    ZENDIR_BRAND_COLORS.electricLight
+    // #6B69FF
+  ],
+  /** 
+   * Full Zendir spectrum gradient
+   * Prussian Blue → Electric → Purple
+   */
+  zendirSpectrum: [
+    ZENDIR_BRAND_COLORS.prussianBlue,
+    // #1B2DA0
+    ZENDIR_BRAND_COLORS.prussianBlueLight,
+    // #3548C0
+    ZENDIR_BRAND_COLORS.electric,
+    // #3E3CFF
+    ZENDIR_BRAND_COLORS.electricLight,
+    // #6B69FF
+    ZENDIR_BRAND_COLORS.purple,
+    // #9D70FF
+    ZENDIR_BRAND_COLORS.purpleLight
+    // #B48DFF
+  ],
+  /**
+   * Sequential palettes for heatmaps and gradual data
+   * Zendir brand-forward gradients
+   */
+  sequential: {
+    /** Zendir Electric sequential - Primary brand gradient */
+    electric: ["#E8E8FF", "#C9C8FF", "#9997FF", "#6B69FF", "#3E3CFF", "#3230CC", "#262499"],
+    /** Zendir Purple sequential - Secondary brand gradient */
+    purple: ["#F0E8FF", "#DCC4FF", "#C9A8FF", "#B48DFF", "#9D70FF", "#7E5ACC", "#5F4499"],
+    /** Zendir Prussian Blue sequential - Deep brand gradient */
+    prussianBlue: ["#E8ECFF", "#C5CFF0", "#8A9DD6", "#4A5FD6", "#3548C0", "#1B2DA0", "#0F1A60"],
+    /** Zendir gradient - Electric → Purple blend */
+    brand: ["#3E3CFF", "#5250FF", "#6B69FF", "#7E70FF", "#9D70FF", "#B48DFF", "#C9A8FF"],
+    /** Thermal - Status colors for temperature (AstroUXDS compliant) */
+    thermal: ["#00C7CB", "#56F000", "#FCE83A", "#FFB302", "#FF6B35", "#FF3838"]
+  }
+};
+const STATUS_COLORS = {
+  normal: "#56f000",
+  // Green - System operating normally
+  standby: "#2dccff",
+  // Cyan - Awaiting/standby state
+  caution: "#fce83a",
+  // Yellow - Requires attention
+  serious: "#ffb302",
+  // Orange - Significant issue
+  critical: "#ff3838",
+  // Red - Immediate action required
+  off: "#a4abb6"
+  // Grey - Inactive/off state
+};
+function createAstroEChartsTheme(tokens, mode, themeVariant) {
+  const isDark = mode === "dark";
+  const isAstroTheme = themeVariant === "astro";
+  const dataVizColors = isAstroTheme ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended] : ASTRO_DATA_VIZ_COLORS.mixed;
+  return {
+    // Data visualization color palette
+    // - 'astro' theme: Official AstroUXDS colors (teal, purple, brightblue)
+    // - Other themes: Zendir brand colors (electric, purple, prussian blue)
+    color: dataVizColors,
+    // Background
+    backgroundColor: "transparent",
+    // Global text style - 14pt minimum per AstroUXDS; no white border on labels
+    textStyle: {
+      color: tokens.colors.text.primary,
+      fontFamily: tokens.typography.fontFamily.primary,
+      fontSize: 14,
+      // AstroUXD minimum requirement
+      textBorderWidth: 0,
+      textBorderColor: "transparent"
+    },
+    // Title - Grey for readability, AstroUXDS compliant
+    title: {
+      textStyle: {
+        color: tokens.colors.text.secondary,
+        // Grey for headings
+        fontSize: 14,
+        fontWeight: "bold",
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      },
+      subtextStyle: {
+        color: tokens.colors.text.tertiary,
+        fontSize: 12,
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      }
+    },
+    // Legend
+    legend: {
+      textStyle: {
+        color: tokens.colors.text.secondary,
+        fontSize: 12,
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      },
+      inactiveColor: tokens.colors.text.tertiary
+    },
+    // Tooltip
+    tooltip: {
+      backgroundColor: isDark ? "rgba(27, 45, 62, 0.95)" : "rgba(255, 255, 255, 0.95)",
+      borderColor: tokens.colors.border.default,
+      borderWidth: 1,
+      textStyle: {
+        color: tokens.colors.text.primary,
+        fontSize: 12,
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      },
+      extraCssText: `
+        border-radius: ${tokens.borderRadius.md};
+        box-shadow: ${tokens.shadows.lg};
+        backdrop-filter: blur(8px);
+      `
+    },
+    // Axis pointer / crosshair - Subtle grey for clarity
+    axisPointer: {
+      lineStyle: {
+        color: tokens.colors.text.tertiary,
+        // Subtle grey
+        width: 1
+      },
+      crossStyle: {
+        color: tokens.colors.text.tertiary,
+        // Subtle grey
+        width: 1
+      }
+    },
+    // X Axis
+    xAxis: {
+      axisLine: {
+        lineStyle: {
+          color: tokens.colors.border.default
+        }
+      },
+      axisTick: {
+        lineStyle: {
+          color: tokens.colors.border.muted
+        }
+      },
+      axisLabel: {
+        color: tokens.colors.text.secondary,
+        fontSize: 12,
+        fontFamily: tokens.typography.fontFamily.mono,
+        // Tabular numbers
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      },
+      splitLine: {
+        lineStyle: {
+          color: tokens.colors.border.muted,
+          type: "dashed"
+        }
+      },
+      nameTextStyle: {
+        color: tokens.colors.text.secondary,
+        fontSize: 12,
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      }
+    },
+    // Y Axis
+    yAxis: {
+      axisLine: {
+        lineStyle: {
+          color: tokens.colors.border.default
+        }
+      },
+      axisTick: {
+        lineStyle: {
+          color: tokens.colors.border.muted
+        }
+      },
+      axisLabel: {
+        color: tokens.colors.text.secondary,
+        fontSize: 12,
+        fontFamily: tokens.typography.fontFamily.mono,
+        // Tabular numbers
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      },
+      splitLine: {
+        lineStyle: {
+          color: tokens.colors.border.muted,
+          type: "dashed"
+        }
+      },
+      nameTextStyle: {
+        color: tokens.colors.text.secondary,
+        fontSize: 12,
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      }
+    },
+    // Series defaults
+    series: {
+      line: {
+        lineStyle: {
+          width: 2
+        },
+        symbolSize: 6
+      },
+      bar: {
+        barMaxWidth: 40,
+        itemStyle: {
+          borderRadius: [4, 4, 0, 0]
+        }
+      },
+      pie: {
+        itemStyle: {
+          borderColor: tokens.colors.background.surface,
+          borderWidth: 2
+        },
+        label: {
+          color: tokens.colors.text.primary,
+          textBorderWidth: 0,
+          textBorderColor: "transparent",
+          fontSize: 12
+        }
+      },
+      scatter: {
+        symbolSize: 10
+      },
+      gauge: {
+        axisLine: {
+          lineStyle: {
+            width: 10
+          }
+        }
+      }
+    },
+    // Data zoom - Theme-aware interactive controls
+    dataZoom: {
+      backgroundColor: isDark ? "rgba(27, 45, 62, 0.5)" : "rgba(234, 238, 244, 0.5)",
+      borderColor: tokens.colors.border.muted,
+      // Astro theme uses brightblue, others use Zendir Electric
+      fillerColor: isAstroTheme ? "rgba(77, 172, 255, 0.15)" : "rgba(62, 60, 255, 0.15)",
+      // Zendir Electric
+      handleColor: isAstroTheme ? "#4dacff" : ZENDIR_BRAND_COLORS.electric,
+      // Zendir Electric
+      textStyle: {
+        color: tokens.colors.text.secondary,
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      }
+    },
+    // Visual map (for heatmaps) - Theme-aware sequential palette
+    visualMap: {
+      textStyle: {
+        color: tokens.colors.text.secondary,
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      },
+      inRange: {
+        // Astro theme uses official teal gradient, others use Zendir Electric
+        color: isAstroTheme ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal] : ASTRO_DATA_VIZ_COLORS.sequential.electric
+      }
+    },
+    // Grid
+    grid: {
+      borderColor: tokens.colors.border.muted
+    }
+  };
+}
+function getSeriesColor(index, palette = ASTRO_DATA_VIZ_COLORS.mixed) {
+  return palette[index % palette.length];
+}
+function createAreaGradient(color, direction = "vertical") {
+  return {
+    type: "linear",
+    x: 0,
+    y: direction === "vertical" ? 0 : 0,
+    x2: direction === "horizontal" ? 1 : 0,
+    y2: direction === "vertical" ? 1 : 0,
+    colorStops: [
+      { offset: 0, color: `${color}40` },
+      { offset: 1, color: `${color}05` }
+    ]
+  };
+}
+function formatTimeLabel(timestamp, format = "short") {
+  const date = new Date(timestamp);
+  switch (format) {
+    case "short":
+      return date.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+    case "medium":
+      return date.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false
+      });
+    case "long":
+      return date.toLocaleString([], {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+  }
+}
+function formatValueWithUnit(value, unit, precision = 2) {
+  const formatted = Number.isInteger(value) ? value.toString() : value.toFixed(precision);
+  return unit ? `${formatted}${unit}` : formatted;
+}
+function calculateAxisBounds(values, padding = 0.1) {
+  if (values.length === 0) return { min: 0, max: 100 };
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  return {
+    min: min - range * padding,
+    max: max + range * padding
+  };
+}
+export {
+  ASTRO_DATA_VIZ_COLORS,
+  OFFICIAL_ASTRO_DATA_VIZ_COLORS,
+  STATUS_COLORS,
+  ZENDIR_BRAND_COLORS,
+  calculateAxisBounds,
+  createAreaGradient,
+  createAstroEChartsTheme,
+  formatTimeLabel,
+  formatValueWithUnit,
+  getSeriesColor
+};
+//# sourceMappingURL=theme.js.map

package/dist/react/charts/unified/theme.js.map

@@ -0,0 +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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"}