@zendir/ui 0.1.13 → 0.1.14

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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"}

package/dist/react/charts/unified/types.d.ts

@@ -11,7 +11,7 @@ export interface DataPoint {
     label?: string;
     /** Optional category for grouping */
     category?: string;
-    /** Optional color for this data point (used in pie/donut/histogram charts) */
+    /** Optional color for this data point (used in scatter/pie/donut/histogram charts) */
     color?: string;
     /** Optional metadata */
     meta?: Record<string, unknown>;

package/dist/react/context/DisplaySettingsContext.js

@@ -146,11 +146,23 @@ function getEffectiveCompactMode(propValue, contextValue) {
   if (contextValue !== void 0) return contextValue;
   return false;
 }
+function useCardBorderStyle(tokens, isTransparentTheme) {
+  const displaySettings = useDisplaySettingsOptional();
+  const accentBorders = (displaySettings == null ? void 0 : displaySettings.accentBorders) ?? true;
+  if (!isTransparentTheme) {
+    return tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` };
+  }
+  if (accentBorders) {
+    return tokens.colors.border.cardStyle ?? {};
+  }
+  return { border: "1px solid rgba(255, 255, 255, 0.08)" };
+}
 export {
   DisplaySettingsProvider,
   GLASS_TINTS,
   PRESET_COLORS,
   getEffectiveCompactMode,
+  useCardBorderStyle,
   useDisplaySettings,
   useDisplaySettingsOptional
 };

package/dist/react/context/DisplaySettingsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplaySettingsContext.js","sources":["../../../src/react/context/DisplaySettingsContext.tsx"],"sourcesContent":["/**\n * @zendir/ui - DisplaySettingsContext\n * \n * Centralized context for app-wide display preferences.\n * Controls compact mode, accent colors, glass tint, and other display settings.\n * \n * Features:\n * - Compact mode toggle (affects all cards globally)\n * - Accent color selection (for card accents)\n * - Glass tint selection (for transparent themes)\n * - Color target control (both, accent-only, glass-only)\n * - LocalStorage persistence\n * \n * @example\n * ```tsx\n * import { DisplaySettingsProvider, useDisplaySettings } from '@zendir/ui';\n * \n * // Wrap your app\n * <DisplaySettingsProvider>\n *   <App />\n * </DisplaySettingsProvider>\n * \n * // Use in components\n * function MyCard() {\n *   const { compactMode, accentColor } = useDisplaySettings();\n *   return <Card compact={compactMode} />;\n * }\n * ```\n */\n\nimport React, { createContext, useContext, useState, useCallback, useMemo, useEffect, type ReactNode } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type ColorTarget = 'both' | 'accent' | 'glass';\n\nexport interface DisplaySettings {\n  /** Global compact mode - affects all cards */\n  compactMode: boolean;\n  \n  /** Accent color for cards and UI elements */\n  accentColor: string;\n  \n  /** Glass tint color for transparent themes */\n  glassTint: string;\n  \n  /** Which color setting to apply: both, accent-only, or glass-only */\n  colorTarget: ColorTarget;\n  \n  /** Enable accent-colored borders on cards (for transparent themes) */\n  accentBorders: boolean;\n}\n\nexport interface DisplaySettingsContextValue extends DisplaySettings {\n  /** Set compact mode on/off */\n  setCompactMode: (value: boolean) => void;\n  \n  /** Toggle compact mode */\n  toggleCompactMode: () => void;\n  \n  /** Set accent color */\n  setAccentColor: (color: string) => void;\n  \n  /** Set glass tint color */\n  setGlassTint: (color: string) => void;\n  \n  /** Set which color setting to apply */\n  setColorTarget: (target: ColorTarget) => void;\n  \n  /** Set a color that applies based on current target */\n  setColor: (color: string) => void;\n  \n  /** Set accent borders on/off */\n  setAccentBorders: (value: boolean) => void;\n  \n  /** Toggle accent borders */\n  toggleAccentBorders: () => void;\n  \n  /** Reset all settings to defaults */\n  resetSettings: () => void;\n}\n\n// =============================================================================\n// Preset Colors\n// =============================================================================\n\nexport const PRESET_COLORS = {\n  purple: '#8b5cf6',\n  blue: '#3b82f6',\n  cyan: '#06b6d4',\n  teal: '#14b8a6',\n  green: '#10b981',\n  lime: '#84cc16',\n  amber: '#f59e0b',\n  orange: '#f97316',\n  pink: '#ec4899',\n  red: '#ef4444',\n  slate: '#64748b',\n} as const;\n\nexport const GLASS_TINTS = {\n  ...PRESET_COLORS,\n  clear: 'rgba(255,255,255,0.05)',\n  dark: 'rgba(0,0,0,0.3)',\n} as const;\n\nexport type PresetColorKey = keyof typeof PRESET_COLORS;\nexport type GlassTintKey = keyof typeof GLASS_TINTS;\n\n// =============================================================================\n// Default Values\n// =============================================================================\n\nconst DEFAULT_SETTINGS: DisplaySettings = {\n  compactMode: false,\n  accentColor: PRESET_COLORS.purple,\n  glassTint: PRESET_COLORS.purple,\n  colorTarget: 'both',\n  accentBorders: true,\n};\n\nconst STORAGE_KEY = 'zendir-display-settings';\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst DisplaySettingsContext = createContext<DisplaySettingsContextValue | null>(null);\n\n// =============================================================================\n// Provider Props\n// =============================================================================\n\nexport interface DisplaySettingsProviderProps {\n  children: ReactNode;\n  \n  /** Initial compact mode state */\n  defaultCompactMode?: boolean;\n  \n  /** Initial accent color */\n  defaultAccentColor?: string;\n  \n  /** Initial glass tint color */\n  defaultGlassTint?: string;\n  \n  /** Initial color target */\n  defaultColorTarget?: ColorTarget;\n  \n  /** Initial accent borders state */\n  defaultAccentBorders?: boolean;\n  \n  /** Enable localStorage persistence (default: true) */\n  persist?: boolean;\n}\n\n// =============================================================================\n// Provider Component\n// =============================================================================\n\nexport function DisplaySettingsProvider({\n  children,\n  defaultCompactMode,\n  defaultAccentColor,\n  defaultGlassTint,\n  defaultColorTarget,\n  defaultAccentBorders,\n  persist = true,\n}: DisplaySettingsProviderProps): React.ReactElement {\n  // Initialize state from localStorage or defaults\n  const [settings, setSettings] = useState<DisplaySettings>(() => {\n    if (persist && typeof window !== 'undefined') {\n      try {\n        const stored = localStorage.getItem(STORAGE_KEY);\n        if (stored) {\n          const parsed = JSON.parse(stored);\n          return {\n            compactMode: parsed.compactMode ?? defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n            accentColor: parsed.accentColor ?? defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n            glassTint: parsed.glassTint ?? defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n            colorTarget: parsed.colorTarget ?? defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n            accentBorders: parsed.accentBorders ?? defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n          };\n        }\n      } catch {\n        // Ignore parse errors\n      }\n    }\n    \n    return {\n      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n    };\n  });\n  \n  // Persist to localStorage when settings change\n  useEffect(() => {\n    if (persist && typeof window !== 'undefined') {\n      try {\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n      } catch {\n        // Ignore storage errors\n      }\n    }\n  }, [settings, persist]);\n  \n  // Setters\n  const setCompactMode = useCallback((value: boolean) => {\n    setSettings(prev => ({ ...prev, compactMode: value }));\n  }, []);\n  \n  const toggleCompactMode = useCallback(() => {\n    setSettings(prev => ({ ...prev, compactMode: !prev.compactMode }));\n  }, []);\n  \n  const setAccentColor = useCallback((color: string) => {\n    setSettings(prev => ({ ...prev, accentColor: color }));\n  }, []);\n  \n  const setGlassTint = useCallback((color: string) => {\n    setSettings(prev => ({ ...prev, glassTint: color }));\n  }, []);\n  \n  const setColorTarget = useCallback((target: ColorTarget) => {\n    setSettings(prev => ({ ...prev, colorTarget: target }));\n  }, []);\n  \n  // Set color based on current target\n  const setColor = useCallback((color: string) => {\n    setSettings(prev => {\n      switch (prev.colorTarget) {\n        case 'accent':\n          return { ...prev, accentColor: color };\n        case 'glass':\n          return { ...prev, glassTint: color };\n        case 'both':\n        default:\n          return { ...prev, accentColor: color, glassTint: color };\n      }\n    });\n  }, []);\n  \n  const setAccentBorders = useCallback((value: boolean) => {\n    setSettings(prev => ({ ...prev, accentBorders: value }));\n  }, []);\n  \n  const toggleAccentBorders = useCallback(() => {\n    setSettings(prev => ({ ...prev, accentBorders: !prev.accentBorders }));\n  }, []);\n  \n  const resetSettings = useCallback(() => {\n    setSettings(DEFAULT_SETTINGS);\n  }, []);\n  \n  // Memoized context value\n  const value = useMemo<DisplaySettingsContextValue>(() => ({\n    ...settings,\n    setCompactMode,\n    toggleCompactMode,\n    setAccentColor,\n    setGlassTint,\n    setColorTarget,\n    setColor,\n    setAccentBorders,\n    toggleAccentBorders,\n    resetSettings,\n  }), [\n    settings,\n    setCompactMode,\n    toggleCompactMode,\n    setAccentColor,\n    setGlassTint,\n    setColorTarget,\n    setColor,\n    setAccentBorders,\n    toggleAccentBorders,\n    resetSettings,\n  ]);\n  \n  return (\n    <DisplaySettingsContext.Provider value={value}>\n      {children}\n    </DisplaySettingsContext.Provider>\n  );\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Access display settings context\n * Must be used within a DisplaySettingsProvider\n */\nexport function useDisplaySettings(): DisplaySettingsContextValue {\n  const context = useContext(DisplaySettingsContext);\n  \n  if (!context) {\n    throw new Error('useDisplaySettings must be used within a DisplaySettingsProvider');\n  }\n  \n  return context;\n}\n\n/**\n * Optional hook that returns null if not within provider\n * Useful for components that should work with or without the provider\n */\nexport function useDisplaySettingsOptional(): DisplaySettingsContextValue | null {\n  return useContext(DisplaySettingsContext);\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Get effective compact mode value\n * Priority: explicit prop > context value > default (false)\n */\nexport function getEffectiveCompactMode(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return false;\n}\n\n/**\n * Get effective accent borders value\n * Priority: explicit prop > context value > default (true)\n */\nexport function getEffectiveAccentBorders(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return true;\n}\n\n/**\n * Hook to get card border style based on accentBorders setting\n * Returns the appropriate border style for transparent themes\n */\nexport function useCardBorderStyle(\n  tokens: any,\n  isTransparentTheme: boolean\n): React.CSSProperties {\n  const displaySettings = useDisplaySettingsOptional();\n  const accentBorders = displaySettings?.accentBorders ?? true;\n  \n  if (!isTransparentTheme) {\n    return tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` };\n  }\n  \n  if (accentBorders) {\n    return tokens.colors.border.cardStyle ?? {};\n  }\n  \n  // Fallback to subtle neutral border when accent borders disabled\n  return { border: '1px solid rgba(255, 255, 255, 0.08)' };\n}\n\nexport default DisplaySettingsProvider;\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"DisplaySettingsContext.js","sources":["../../../src/react/context/DisplaySettingsContext.tsx"],"sourcesContent":["/**\n * @zendir/ui - DisplaySettingsContext\n * \n * Centralized context for app-wide display preferences.\n * Controls compact mode, accent colors, glass tint, and other display settings.\n * \n * Features:\n * - Compact mode toggle (affects all cards globally)\n * - Accent color selection (for card accents)\n * - Glass tint selection (for transparent themes)\n * - Color target control (both, accent-only, glass-only)\n * - LocalStorage persistence\n * \n * @example\n * ```tsx\n * import { DisplaySettingsProvider, useDisplaySettings } from '@zendir/ui';\n * \n * // Wrap your app\n * <DisplaySettingsProvider>\n *   <App />\n * </DisplaySettingsProvider>\n * \n * // Use in components\n * function MyCard() {\n *   const { compactMode, accentColor } = useDisplaySettings();\n *   return <Card compact={compactMode} />;\n * }\n * ```\n */\n\nimport React, { createContext, useContext, useState, useCallback, useMemo, useEffect, type ReactNode } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type ColorTarget = 'both' | 'accent' | 'glass';\n\nexport interface DisplaySettings {\n  /** Global compact mode - affects all cards */\n  compactMode: boolean;\n  \n  /** Accent color for cards and UI elements */\n  accentColor: string;\n  \n  /** Glass tint color for transparent themes */\n  glassTint: string;\n  \n  /** Which color setting to apply: both, accent-only, or glass-only */\n  colorTarget: ColorTarget;\n  \n  /** Enable accent-colored borders on cards (for transparent themes) */\n  accentBorders: boolean;\n}\n\nexport interface DisplaySettingsContextValue extends DisplaySettings {\n  /** Set compact mode on/off */\n  setCompactMode: (value: boolean) => void;\n  \n  /** Toggle compact mode */\n  toggleCompactMode: () => void;\n  \n  /** Set accent color */\n  setAccentColor: (color: string) => void;\n  \n  /** Set glass tint color */\n  setGlassTint: (color: string) => void;\n  \n  /** Set which color setting to apply */\n  setColorTarget: (target: ColorTarget) => void;\n  \n  /** Set a color that applies based on current target */\n  setColor: (color: string) => void;\n  \n  /** Set accent borders on/off */\n  setAccentBorders: (value: boolean) => void;\n  \n  /** Toggle accent borders */\n  toggleAccentBorders: () => void;\n  \n  /** Reset all settings to defaults */\n  resetSettings: () => void;\n}\n\n// =============================================================================\n// Preset Colors\n// =============================================================================\n\nexport const PRESET_COLORS = {\n  purple: '#8b5cf6',\n  blue: '#3b82f6',\n  cyan: '#06b6d4',\n  teal: '#14b8a6',\n  green: '#10b981',\n  lime: '#84cc16',\n  amber: '#f59e0b',\n  orange: '#f97316',\n  pink: '#ec4899',\n  red: '#ef4444',\n  slate: '#64748b',\n} as const;\n\nexport const GLASS_TINTS = {\n  ...PRESET_COLORS,\n  clear: 'rgba(255,255,255,0.05)',\n  dark: 'rgba(0,0,0,0.3)',\n} as const;\n\nexport type PresetColorKey = keyof typeof PRESET_COLORS;\nexport type GlassTintKey = keyof typeof GLASS_TINTS;\n\n// =============================================================================\n// Default Values\n// =============================================================================\n\nconst DEFAULT_SETTINGS: DisplaySettings = {\n  compactMode: false,\n  accentColor: PRESET_COLORS.purple,\n  glassTint: PRESET_COLORS.purple,\n  colorTarget: 'both',\n  accentBorders: true,\n};\n\nconst STORAGE_KEY = 'zendir-display-settings';\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst DisplaySettingsContext = createContext<DisplaySettingsContextValue | null>(null);\n\n// =============================================================================\n// Provider Props\n// =============================================================================\n\nexport interface DisplaySettingsProviderProps {\n  children: ReactNode;\n  \n  /** Initial compact mode state */\n  defaultCompactMode?: boolean;\n  \n  /** Initial accent color */\n  defaultAccentColor?: string;\n  \n  /** Initial glass tint color */\n  defaultGlassTint?: string;\n  \n  /** Initial color target */\n  defaultColorTarget?: ColorTarget;\n  \n  /** Initial accent borders state */\n  defaultAccentBorders?: boolean;\n  \n  /** Enable localStorage persistence (default: true) */\n  persist?: boolean;\n}\n\n// =============================================================================\n// Provider Component\n// =============================================================================\n\nexport function DisplaySettingsProvider({\n  children,\n  defaultCompactMode,\n  defaultAccentColor,\n  defaultGlassTint,\n  defaultColorTarget,\n  defaultAccentBorders,\n  persist = true,\n}: DisplaySettingsProviderProps): React.ReactElement {\n  // Initialize state from localStorage or defaults\n  const [settings, setSettings] = useState<DisplaySettings>(() => {\n    if (persist && typeof window !== 'undefined') {\n      try {\n        const stored = localStorage.getItem(STORAGE_KEY);\n        if (stored) {\n          const parsed = JSON.parse(stored);\n          return {\n            compactMode: parsed.compactMode ?? defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n            accentColor: parsed.accentColor ?? defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n            glassTint: parsed.glassTint ?? defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n            colorTarget: parsed.colorTarget ?? defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n            accentBorders: parsed.accentBorders ?? defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n          };\n        }\n      } catch {\n        // Ignore parse errors\n      }\n    }\n    \n    return {\n      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n    };\n  });\n  \n  // Persist to localStorage when settings change\n  useEffect(() => {\n    if (persist && typeof window !== 'undefined') {\n      try {\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n      } catch {\n        // Ignore storage errors\n      }\n    }\n  }, [settings, persist]);\n  \n  // Setters\n  const setCompactMode = useCallback((value: boolean) => {\n    setSettings(prev => ({ ...prev, compactMode: value }));\n  }, []);\n  \n  const toggleCompactMode = useCallback(() => {\n    setSettings(prev => ({ ...prev, compactMode: !prev.compactMode }));\n  }, []);\n  \n  const setAccentColor = useCallback((color: string) => {\n    setSettings(prev => ({ ...prev, accentColor: color }));\n  }, []);\n  \n  const setGlassTint = useCallback((color: string) => {\n    setSettings(prev => ({ ...prev, glassTint: color }));\n  }, []);\n  \n  const setColorTarget = useCallback((target: ColorTarget) => {\n    setSettings(prev => ({ ...prev, colorTarget: target }));\n  }, []);\n  \n  // Set color based on current target\n  const setColor = useCallback((color: string) => {\n    setSettings(prev => {\n      switch (prev.colorTarget) {\n        case 'accent':\n          return { ...prev, accentColor: color };\n        case 'glass':\n          return { ...prev, glassTint: color };\n        case 'both':\n        default:\n          return { ...prev, accentColor: color, glassTint: color };\n      }\n    });\n  }, []);\n  \n  const setAccentBorders = useCallback((value: boolean) => {\n    setSettings(prev => ({ ...prev, accentBorders: value }));\n  }, []);\n  \n  const toggleAccentBorders = useCallback(() => {\n    setSettings(prev => ({ ...prev, accentBorders: !prev.accentBorders }));\n  }, []);\n  \n  const resetSettings = useCallback(() => {\n    setSettings(DEFAULT_SETTINGS);\n  }, []);\n  \n  // Memoized context value\n  const value = useMemo<DisplaySettingsContextValue>(() => ({\n    ...settings,\n    setCompactMode,\n    toggleCompactMode,\n    setAccentColor,\n    setGlassTint,\n    setColorTarget,\n    setColor,\n    setAccentBorders,\n    toggleAccentBorders,\n    resetSettings,\n  }), [\n    settings,\n    setCompactMode,\n    toggleCompactMode,\n    setAccentColor,\n    setGlassTint,\n    setColorTarget,\n    setColor,\n    setAccentBorders,\n    toggleAccentBorders,\n    resetSettings,\n  ]);\n  \n  return (\n    <DisplaySettingsContext.Provider value={value}>\n      {children}\n    </DisplaySettingsContext.Provider>\n  );\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Access display settings context\n * Must be used within a DisplaySettingsProvider\n */\nexport function useDisplaySettings(): DisplaySettingsContextValue {\n  const context = useContext(DisplaySettingsContext);\n  \n  if (!context) {\n    throw new Error('useDisplaySettings must be used within a DisplaySettingsProvider');\n  }\n  \n  return context;\n}\n\n/**\n * Optional hook that returns null if not within provider\n * Useful for components that should work with or without the provider\n */\nexport function useDisplaySettingsOptional(): DisplaySettingsContextValue | null {\n  return useContext(DisplaySettingsContext);\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Get effective compact mode value\n * Priority: explicit prop > context value > default (false)\n */\nexport function getEffectiveCompactMode(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return false;\n}\n\n/**\n * Get effective accent borders value\n * Priority: explicit prop > context value > default (true)\n */\nexport function getEffectiveAccentBorders(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return true;\n}\n\n/**\n * Hook to get card border style based on accentBorders setting\n * Returns the appropriate border style for transparent themes\n */\nexport function useCardBorderStyle(\n  tokens: any,\n  isTransparentTheme: boolean\n): React.CSSProperties {\n  const displaySettings = useDisplaySettingsOptional();\n  const accentBorders = displaySettings?.accentBorders ?? true;\n  \n  if (!isTransparentTheme) {\n    return tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` };\n  }\n  \n  if (accentBorders) {\n    return tokens.colors.border.cardStyle ?? {};\n  }\n  \n  // Fallback to subtle neutral border when accent borders disabled\n  return { border: '1px solid rgba(255, 255, 255, 0.08)' };\n}\n\nexport default DisplaySettingsProvider;\n"],"names":["value"],"mappings":"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"}

package/dist/react/index.d.ts

@@ -28,6 +28,10 @@ export { withNullSafety, safeNumber, isValidNumber, formatNumber, formatTabular,
 export type { StatusLevel, FormatNumberOptions } from './utils';
 export { StatusIndicator, ClassificationBanner, GlobalStatusBar, MissionClock, MonitoringIcon, Progress, Notification, Timeline, SimulationControls, MiniSimulationControls, SimulationControlsWithClock, } from './astro';
 export type { StatusIndicatorProps, StatusVariant, ClassificationBannerProps, ClassificationLevel, GlobalStatusBarProps, MissionClockProps, MonitoringIconProps, MonitoringStatus, ProgressProps, NotificationProps, NotificationStatus, TimelineProps, TimelineEvent, TimelineTrackDef, TimelineViewMode, TimeFormat, TimelineFilter, AstroStatus, AstroClassification, SimulationControlsProps, MiniSimulationControlsProps, SimulationControlsWithClockProps, } from './astro';
+export { AstroChart } from './charts';
+export type { AstroChartProps, AstroChartHandle } from './charts';
+export { GroundTrackMap } from './charts';
+export type { GroundTrackMapProps } from './charts';
 export { useCompactMode } from './hooks/useCompactMode';
 export type { UseCompactModeOptions, UseCompactModeResult } from './hooks/useCompactMode';
 export type { SpacecraftPosition, Spacecraft, GroundStation, GroundTrackPoint, AccessData, AccessWindow, TelemetryData, OrbitalElements, Quaternion, EulerAngles, AngularVelocity, AttitudeData, PointingMode, EclipseInfo, DetailedLinkBudget, ThermalZone, ThermalData, ThrusterStatus, PropulsionSummary, ReactionWheelData, LVLHVector, LVLHState, ThrusterFireEvent, PlanetId, PlanetInfo, } from './types';

package/dist/react.js

@@ -5,6 +5,7 @@ import { useCompactMode } from "./react/hooks/useCompactMode.js";
 import { PLANETS, auToKm, estimateOrbitalPeriod, estimateOrbitalVelocity, getPlanet, normalizePlanetName } from "./react/types.js";
 import { ActivityPlanner } from "./react/core/ActivityPlanner.js";
 import { AppBar } from "./react/core/AppBar.js";
+import { AstroChart } from "./react/charts/unified/AstroChart.js";
 import { BREAKPOINTS, useBreakpoint } from "./react/core/layout/useBreakpoint.js";
 import { Badge } from "./react/core/Badge.js";
 import { Body1, Body2, Body3, Compact, DataText, Display1, Display2, FONT_FAMILY_MONO, FONT_FAMILY_PRIMARY, FONT_WEIGHTS, H1, H2, H3, H4, H5, H6, Label, Micro, Mono, Typography } from "./react/core/Typography.js";
@@ -33,6 +34,7 @@ import { Flex } from "./react/core/layout/Flex.js";
 import { GLASS_COLOR_OVERLAYS, GlassCard } from "./react/core/GlassCard.js";
 import { GlobalStatusBar } from "./react/astro/GlobalStatusBar.js";
 import { Grid } from "./react/core/layout/Grid.js";
+import { GroundTrackMap } from "./react/charts/GroundTrackMap.js";
 import { HStack, Stack, VStack } from "./react/core/layout/Stack.js";
 import { HeaderIconWithStatus } from "./react/core/HeaderIconWithStatus.js";
 import { HexViewer, REGION_BORDER_COLORS, REGION_COLORS } from "./react/core/HexViewer.js";
@@ -68,6 +70,7 @@ import { resolveResponsive, resolveSpacing } from "./react/core/layout/responsiv
 export {
   ActivityPlanner,
   AppBar,
+  AstroChart,
   BREAKPOINTS,
   Badge,
   Body1,
@@ -118,6 +121,7 @@ export {
   GlassCard,
   GlobalStatusBar,
   Grid,
+  GroundTrackMap,
   H1,
   H2,
   H3,

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/style.css

@@ -0,0 +1,143 @@
+/**
+ * Zendir UI — Leaflet theme (hybrid / purple-hue)
+ * Use with GroundTrackMap when mapProvider="leaflet".
+ * Keeps map controls on-brand and minimizes third-party branding on the frontend.
+ */
+
+/* Container: match SDK background and radius */
+.zendir-ground-track-map .leaflet-container {
+  background: #0f1520;
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  cursor: grab;
+}
+
+/* Zoom controls: visible and above overlays so scroll/zoom work */
+.zendir-ground-track-map .leaflet-control-zoom {
+  z-index: 1000 !important;
+  border: 1px solid rgba(157, 112, 255, 0.35) !important;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+}
+
+.zendir-ground-track-map .leaflet-control-zoom a,
+.zendir-ground-track-map .leaflet-control-zoom a:hover {
+  background: #181d2e !important;
+  color: #e4e0f0 !important;
+  width: 36px !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  font-size: 20px !important;
+  font-weight: bold !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+.zendir-ground-track-map .leaflet-control-zoom a:hover {
+  background: rgba(157, 112, 255, 0.15) !important;
+  color: #b794ff !important;
+}
+
+.zendir-ground-track-map .leaflet-control-zoom-in {
+  border-bottom: 1px solid rgba(157, 112, 255, 0.15) !important;
+}
+
+/* Attribution: minimal, no Leaflet branding on frontend */
+.zendir-ground-track-map .leaflet-control-attribution {
+  background: rgba(15, 21, 32, 0.85) !important;
+  color: rgba(148, 163, 184, 0.7) !important;
+  font-size: 10px !important;
+  padding: 2px 6px !important;
+  border-radius: 4px 0 0 0;
+  border: none;
+  margin: 0 !important;
+}
+
+/* Hide "Leaflet" link in attribution so only tile provider is shown */
+.zendir-ground-track-map .leaflet-control-attribution a[href*="leaflet"] {
+  display: none !important;
+}
+
+.zendir-ground-track-map .leaflet-control-attribution a {
+  color: rgba(157, 112, 255, 0.8) !important;
+}
+
+.zendir-ground-track-map .leaflet-control-attribution a:hover {
+  color: #b794ff !important;
+}
+
+/* Popup / tooltip styling */
+.zendir-ground-track-map .leaflet-popup-content-wrapper {
+  background: #181d2e;
+  border: 1px solid rgba(157, 112, 255, 0.2);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.zendir-ground-track-map .leaflet-popup-tip {
+  background: #181d2e;
+}
+
+.zendir-ground-track-map .leaflet-popup-content {
+  margin: 8px 12px;
+  color: #e4e0f0;
+  font-size: 12px;
+}
+
+/* Ensure map is interactive (scroll zoom, drag) */
+.zendir-ground-track-map-leaflet .leaflet-container {
+  touch-action: none;
+}
+.zendir-ground-track-map .leaflet-pane,
+.zendir-ground-track-map .leaflet-tile-pane {
+  pointer-events: auto;
+}
+
+/* Dragging cursor */
+.zendir-ground-track-map .leaflet-grab {
+  cursor: grab;
+}
+
+.zendir-ground-track-map .leaflet-dragging .leaflet-grab {
+  cursor: grabbing;
+}
+
+/* ── Custom SVG div icons ──────────────────────────────────────────────────── */
+.zendir-sat-icon,
+.zendir-station-icon {
+  background: none !important;
+  border: none !important;
+  /* Let the inline SVG size itself naturally */
+  overflow: visible;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.zendir-sat-icon:hover svg,
+.zendir-station-icon:hover svg {
+  filter: drop-shadow(0 0 6px currentColor);
+}
+
+/* Leaflet default icon reset (avoid blue pin override) */
+.zendir-sat-icon img,
+.zendir-station-icon img {
+  display: none !important;
+}
+
+/* Tooltip (rich HTML) */
+.zendir-leaflet-tooltip {
+  background: rgba(13, 19, 35, 0.95) !important;
+  border: 1px solid rgba(157, 112, 255, 0.35) !important;
+  border-radius: 6px !important;
+  color: #e4e0f0 !important;
+  font-size: 11px !important;
+  font-family: 'Roboto', 'Inter', system-ui, sans-serif !important;
+  padding: 5px 9px !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.zendir-leaflet-tooltip::before {
+  border-top-color: rgba(157, 112, 255, 0.35) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendir/ui",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "React UI components for space operations, built on the Astro UX Design System",
   "type": "module",
   "main": "./dist/index.js",