@classic-homes/charts-core 0.1.36 → 0.1.37

package/dist/{chunk-ZRG25JNX.js → chunk-JM72YHZD.js}

@@ -1,4 +1,4 @@
-import { colors, semanticColors, borderRadius, fontFamily } from '@classic-homes/theme-tokens';
+import { semanticColors, colors, borderRadius, fontFamily } from '@classic-homes/theme-tokens';
 
 // src/theme/generator.ts
 function generateLightTheme() {
@@ -270,8 +270,43 @@ function generateDarkTheme() {
 var lightTheme = generateLightTheme();
 var darkTheme = generateDarkTheme();
 
-// src/theme/index.ts
+// src/theme/constants.ts
 var THEME_LIGHT = "classic-light";
 var THEME_DARK = "classic-dark";
 
-export { THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme };
+// src/theme/semantic.ts
+var lightChartColors = {
+  series: lightTheme.color,
+  foreground: semanticColors.light.foreground,
+  mutedForeground: semanticColors.light.mutedForeground,
+  axisPointerLabel: semanticColors.light.mutedForeground,
+  divider: colors.gray[600],
+  success: semanticColors.light.success,
+  destructive: semanticColors.light.destructive
+};
+var darkChartColors = {
+  series: darkTheme.color,
+  foreground: semanticColors.dark.foreground,
+  mutedForeground: semanticColors.dark.mutedForeground,
+  // mutedForeground (gray[400]) is too light under the white label text
+  axisPointerLabel: colors.gray[600],
+  divider: colors.gray[700],
+  success: semanticColors.dark.success,
+  destructive: semanticColors.dark.destructive
+};
+function getChartColors(themeName) {
+  return themeName === THEME_DARK ? darkChartColors : lightChartColors;
+}
+function colorWithAlpha(color, alpha) {
+  let hex = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(color)?.[1];
+  if (!hex) return color;
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export { THEME_DARK, THEME_LIGHT, colorWithAlpha, darkChartColors, darkTheme, generateDarkTheme, generateLightTheme, getChartColors, lightChartColors, lightTheme };

package/dist/index.cjs

@@ -272,10 +272,45 @@ function generateDarkTheme() {
 var lightTheme = generateLightTheme();
 var darkTheme = generateDarkTheme();
 
-// src/theme/index.ts
+// src/theme/constants.ts
 var THEME_LIGHT = "classic-light";
 var THEME_DARK = "classic-dark";
 
+// src/theme/semantic.ts
+var lightChartColors = {
+  series: lightTheme.color,
+  foreground: themeTokens.semanticColors.light.foreground,
+  mutedForeground: themeTokens.semanticColors.light.mutedForeground,
+  axisPointerLabel: themeTokens.semanticColors.light.mutedForeground,
+  divider: themeTokens.colors.gray[600],
+  success: themeTokens.semanticColors.light.success,
+  destructive: themeTokens.semanticColors.light.destructive
+};
+var darkChartColors = {
+  series: darkTheme.color,
+  foreground: themeTokens.semanticColors.dark.foreground,
+  mutedForeground: themeTokens.semanticColors.dark.mutedForeground,
+  // mutedForeground (gray[400]) is too light under the white label text
+  axisPointerLabel: themeTokens.colors.gray[600],
+  divider: themeTokens.colors.gray[700],
+  success: themeTokens.semanticColors.dark.success,
+  destructive: themeTokens.semanticColors.dark.destructive
+};
+function getChartColors(themeName) {
+  return themeName === THEME_DARK ? darkChartColors : lightChartColors;
+}
+function colorWithAlpha(color, alpha) {
+  let hex = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(color)?.[1];
+  if (!hex) return color;
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 // src/utils/format.ts
 function formatNumber(value, options) {
   return new Intl.NumberFormat("en-US", options).format(value);
@@ -305,7 +340,18 @@ function abbreviateNumber(value, decimals = 1) {
     abbreviated /= 1e3;
     suffixIndex++;
   }
-  return abbreviated.toFixed(decimals).replace(/\.0+$/, "") + suffixes[suffixIndex];
+  if (Math.abs(Number(abbreviated.toFixed(decimals))) >= 1e3 && suffixIndex < suffixes.length - 1) {
+    abbreviated /= 1e3;
+    suffixIndex++;
+  }
+  let fixed = abbreviated.toFixed(decimals);
+  if (fixed.includes(".")) {
+    fixed = fixed.replace(/\.?0+$/, "");
+  }
+  return fixed + suffixes[suffixIndex];
+}
+function escapeHtml(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function createTooltipFormatter(options = {}) {
   const { showSeriesName = true, valueFormatter = formatNumber } = options;
@@ -320,9 +366,9 @@ function createTooltipFormatter(options = {}) {
       const formatted = valueFormatter(value);
       const percent = param.percent ? ` (${param.percent.toFixed(1)}%)` : "";
       if (showSeriesName && param.seriesName) {
-        return `${param.seriesName}: ${formatted}${percent}`;
+        return `${escapeHtml(param.seriesName)}: ${escapeHtml(formatted)}${percent}`;
       }
-      return `${param.name}: ${formatted}${percent}`;
+      return `${escapeHtml(param.name)}: ${escapeHtml(formatted)}${percent}`;
     }).join("<br/>");
   };
 }
@@ -376,6 +422,9 @@ function generatePieChartDescription(title, data, isDonut = false) {
   const total = data.reduce((sum, slice) => sum + slice.value, 0);
   const chartType = isDonut ? "Donut" : "Pie";
   let description = `${title}. ${chartType} chart with ${data.length} segments`;
+  if (total === 0) {
+    return `${description}. All segments have a value of 0`;
+  }
   const sorted = [...data].sort((a, b) => b.value - a.value);
   const topSegments = sorted.slice(0, 3);
   const percentages = topSegments.map((segment) => {
@@ -396,8 +445,8 @@ function generateScatterChartDescription(title, data) {
   return description;
 }
 function generateDataTable(headers, rows) {
-  const headerRow = headers.map((h) => `<th scope="col">${h}</th>`).join("");
-  const bodyRows = rows.map((row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`).join("");
+  const headerRow = headers.map((h) => `<th scope="col">${escapeHtml(h)}</th>`).join("");
+  const bodyRows = rows.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join("")}</tr>`).join("");
   return `
     <table class="sr-only">
       <thead><tr>${headerRow}</tr></thead>
@@ -406,11 +455,35 @@ function generateDataTable(headers, rows) {
   `;
 }
 
+// src/utils/merge.ts
+var ALWAYS_REPLACE = ["series", "graphic"];
+function countComponents(value) {
+  if (value == null || value === false) return 0;
+  if (Array.isArray(value)) return value.filter((item) => item != null).length;
+  return 1;
+}
+function getReplaceMerge(prev, next, isComponentType) {
+  const types = new Set(ALWAYS_REPLACE);
+  if (prev) {
+    const before = prev;
+    const after = next;
+    for (const key of Object.keys(before)) {
+      if (countComponents(before[key]) > countComponents(after[key])) {
+        types.add(key);
+      }
+    }
+  }
+  return [...types].filter((type) => isComponentType(type));
+}
+
 exports.THEME_DARK = THEME_DARK;
 exports.THEME_LIGHT = THEME_LIGHT;
 exports.abbreviateNumber = abbreviateNumber;
+exports.colorWithAlpha = colorWithAlpha;
 exports.createTooltipFormatter = createTooltipFormatter;
+exports.darkChartColors = darkChartColors;
 exports.darkTheme = darkTheme;
+exports.escapeHtml = escapeHtml;
 exports.formatCurrency = formatCurrency;
 exports.formatDate = formatDate;
 exports.formatNumber = formatNumber;
@@ -422,4 +495,7 @@ exports.generateLightTheme = generateLightTheme;
 exports.generateLineChartDescription = generateLineChartDescription;
 exports.generatePieChartDescription = generatePieChartDescription;
 exports.generateScatterChartDescription = generateScatterChartDescription;
+exports.getChartColors = getChartColors;
+exports.getReplaceMerge = getReplaceMerge;
+exports.lightChartColors = lightChartColors;
 exports.lightTheme = lightTheme;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { EChartsTheme, THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme } from './theme/index.cjs';
+export { ChartSemanticColors, EChartsTheme, THEME_DARK, THEME_LIGHT, colorWithAlpha, darkChartColors, darkTheme, generateDarkTheme, generateLightTheme, getChartColors, lightChartColors, lightTheme } from './theme/index.cjs';
 import { BarChartData, LineChartData, PieSliceData, ScatterChartData } from './types/index.cjs';
 export { AreaChartData, AreaChartProps, AreaSeriesData, BarChartProps, BarSeriesData, BaseChartProps, BaseEventParams, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LineChartProps, LineSeriesData, PieChartProps, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartProps, ScatterSeriesData, SliceEventParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode } from './types/index.cjs';
 
@@ -25,6 +25,11 @@ declare function formatDate(date: Date | string, options?: Intl.DateTimeFormatOp
  * Abbreviate large numbers (e.g., 1000 -> 1K, 1000000 -> 1M)
  */
 declare function abbreviateNumber(value: number, decimals?: number): string;
+/**
+ * Escape a value for interpolation into HTML. ECharts renders the string a
+ * function tooltip formatter returns as innerHTML without encoding it.
+ */
+declare function escapeHtml(value: unknown): string;
 /**
  * Create a tooltip formatter for ECharts
  */
@@ -64,4 +69,26 @@ declare function generateScatterChartDescription(title: string, data: ScatterCha
  */
 declare function generateDataTable(headers: string[], rows: (string | number)[][]): string;
 
-export { BarChartData, LineChartData, PieSliceData, ScatterChartData, abbreviateNumber, createTooltipFormatter, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription };
+/**
+ * Helpers for applying a complete ECharts option on top of a previous one.
+ */
+/**
+ * Work out the `replaceMerge` list for `chart.setOption(next, { replaceMerge })`
+ * when `next` is a complete option that supersedes `prev`.
+ *
+ * `notMerge: true` would also drop removed series and components, but it
+ * rebuilds every component, so legend selection, dataZoom ranges and other
+ * interaction state reset on each data update. Instead this replaces only:
+ *
+ * - `series` and `graphic`, so removed series, mark lines and centre labels
+ *   disappear;
+ * - any component type that `next` has fewer of than `prev` (a hidden legend
+ *   or tooltip, a dropped volume grid and its axes).
+ *
+ * Everything else is merged, so its state survives. ECharts rejects types it
+ * has no component class for, so only types for which `isComponentType`
+ * returns true are listed; pass `echarts.ComponentModel.hasClass`.
+ */
+declare function getReplaceMerge(prev: object | null | undefined, next: object, isComponentType: (mainType: string) => boolean): string[];
+
+export { BarChartData, LineChartData, PieSliceData, ScatterChartData, abbreviateNumber, createTooltipFormatter, escapeHtml, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription, getReplaceMerge };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { EChartsTheme, THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme } from './theme/index.js';
+export { ChartSemanticColors, EChartsTheme, THEME_DARK, THEME_LIGHT, colorWithAlpha, darkChartColors, darkTheme, generateDarkTheme, generateLightTheme, getChartColors, lightChartColors, lightTheme } from './theme/index.js';
 import { BarChartData, LineChartData, PieSliceData, ScatterChartData } from './types/index.js';
 export { AreaChartData, AreaChartProps, AreaSeriesData, BarChartProps, BarSeriesData, BaseChartProps, BaseEventParams, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LineChartProps, LineSeriesData, PieChartProps, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartProps, ScatterSeriesData, SliceEventParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode } from './types/index.js';
 
@@ -25,6 +25,11 @@ declare function formatDate(date: Date | string, options?: Intl.DateTimeFormatOp
  * Abbreviate large numbers (e.g., 1000 -> 1K, 1000000 -> 1M)
  */
 declare function abbreviateNumber(value: number, decimals?: number): string;
+/**
+ * Escape a value for interpolation into HTML. ECharts renders the string a
+ * function tooltip formatter returns as innerHTML without encoding it.
+ */
+declare function escapeHtml(value: unknown): string;
 /**
  * Create a tooltip formatter for ECharts
  */
@@ -64,4 +69,26 @@ declare function generateScatterChartDescription(title: string, data: ScatterCha
  */
 declare function generateDataTable(headers: string[], rows: (string | number)[][]): string;
 
-export { BarChartData, LineChartData, PieSliceData, ScatterChartData, abbreviateNumber, createTooltipFormatter, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription };
+/**
+ * Helpers for applying a complete ECharts option on top of a previous one.
+ */
+/**
+ * Work out the `replaceMerge` list for `chart.setOption(next, { replaceMerge })`
+ * when `next` is a complete option that supersedes `prev`.
+ *
+ * `notMerge: true` would also drop removed series and components, but it
+ * rebuilds every component, so legend selection, dataZoom ranges and other
+ * interaction state reset on each data update. Instead this replaces only:
+ *
+ * - `series` and `graphic`, so removed series, mark lines and centre labels
+ *   disappear;
+ * - any component type that `next` has fewer of than `prev` (a hidden legend
+ *   or tooltip, a dropped volume grid and its axes).
+ *
+ * Everything else is merged, so its state survives. ECharts rejects types it
+ * has no component class for, so only types for which `isComponentType`
+ * returns true are listed; pass `echarts.ComponentModel.hasClass`.
+ */
+declare function getReplaceMerge(prev: object | null | undefined, next: object, isComponentType: (mainType: string) => boolean): string[];
+
+export { BarChartData, LineChartData, PieSliceData, ScatterChartData, abbreviateNumber, createTooltipFormatter, escapeHtml, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription, getReplaceMerge };

package/dist/index.js

@@ -1,4 +1,4 @@
-export { THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme } from './chunk-ZRG25JNX.js';
+export { THEME_DARK, THEME_LIGHT, colorWithAlpha, darkChartColors, darkTheme, generateDarkTheme, generateLightTheme, getChartColors, lightChartColors, lightTheme } from './chunk-JM72YHZD.js';
 
 // src/utils/format.ts
 function formatNumber(value, options) {
@@ -29,7 +29,18 @@ function abbreviateNumber(value, decimals = 1) {
     abbreviated /= 1e3;
     suffixIndex++;
   }
-  return abbreviated.toFixed(decimals).replace(/\.0+$/, "") + suffixes[suffixIndex];
+  if (Math.abs(Number(abbreviated.toFixed(decimals))) >= 1e3 && suffixIndex < suffixes.length - 1) {
+    abbreviated /= 1e3;
+    suffixIndex++;
+  }
+  let fixed = abbreviated.toFixed(decimals);
+  if (fixed.includes(".")) {
+    fixed = fixed.replace(/\.?0+$/, "");
+  }
+  return fixed + suffixes[suffixIndex];
+}
+function escapeHtml(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function createTooltipFormatter(options = {}) {
   const { showSeriesName = true, valueFormatter = formatNumber } = options;
@@ -44,9 +55,9 @@ function createTooltipFormatter(options = {}) {
       const formatted = valueFormatter(value);
       const percent = param.percent ? ` (${param.percent.toFixed(1)}%)` : "";
       if (showSeriesName && param.seriesName) {
-        return `${param.seriesName}: ${formatted}${percent}`;
+        return `${escapeHtml(param.seriesName)}: ${escapeHtml(formatted)}${percent}`;
       }
-      return `${param.name}: ${formatted}${percent}`;
+      return `${escapeHtml(param.name)}: ${escapeHtml(formatted)}${percent}`;
     }).join("<br/>");
   };
 }
@@ -100,6 +111,9 @@ function generatePieChartDescription(title, data, isDonut = false) {
   const total = data.reduce((sum, slice) => sum + slice.value, 0);
   const chartType = isDonut ? "Donut" : "Pie";
   let description = `${title}. ${chartType} chart with ${data.length} segments`;
+  if (total === 0) {
+    return `${description}. All segments have a value of 0`;
+  }
   const sorted = [...data].sort((a, b) => b.value - a.value);
   const topSegments = sorted.slice(0, 3);
   const percentages = topSegments.map((segment) => {
@@ -120,8 +134,8 @@ function generateScatterChartDescription(title, data) {
   return description;
 }
 function generateDataTable(headers, rows) {
-  const headerRow = headers.map((h) => `<th scope="col">${h}</th>`).join("");
-  const bodyRows = rows.map((row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`).join("");
+  const headerRow = headers.map((h) => `<th scope="col">${escapeHtml(h)}</th>`).join("");
+  const bodyRows = rows.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join("")}</tr>`).join("");
   return `
     <table class="sr-only">
       <thead><tr>${headerRow}</tr></thead>
@@ -130,4 +144,25 @@ function generateDataTable(headers, rows) {
   `;
 }
 
-export { abbreviateNumber, createTooltipFormatter, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription };
+// src/utils/merge.ts
+var ALWAYS_REPLACE = ["series", "graphic"];
+function countComponents(value) {
+  if (value == null || value === false) return 0;
+  if (Array.isArray(value)) return value.filter((item) => item != null).length;
+  return 1;
+}
+function getReplaceMerge(prev, next, isComponentType) {
+  const types = new Set(ALWAYS_REPLACE);
+  if (prev) {
+    const before = prev;
+    const after = next;
+    for (const key of Object.keys(before)) {
+      if (countComponents(before[key]) > countComponents(after[key])) {
+        types.add(key);
+      }
+    }
+  }
+  return [...types].filter((type) => isComponentType(type));
+}
+
+export { abbreviateNumber, createTooltipFormatter, escapeHtml, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription, getReplaceMerge };

package/dist/theme/index.cjs

@@ -272,13 +272,52 @@ function generateDarkTheme() {
 var lightTheme = generateLightTheme();
 var darkTheme = generateDarkTheme();
 
-// src/theme/index.ts
+// src/theme/constants.ts
 var THEME_LIGHT = "classic-light";
 var THEME_DARK = "classic-dark";
 
+// src/theme/semantic.ts
+var lightChartColors = {
+  series: lightTheme.color,
+  foreground: themeTokens.semanticColors.light.foreground,
+  mutedForeground: themeTokens.semanticColors.light.mutedForeground,
+  axisPointerLabel: themeTokens.semanticColors.light.mutedForeground,
+  divider: themeTokens.colors.gray[600],
+  success: themeTokens.semanticColors.light.success,
+  destructive: themeTokens.semanticColors.light.destructive
+};
+var darkChartColors = {
+  series: darkTheme.color,
+  foreground: themeTokens.semanticColors.dark.foreground,
+  mutedForeground: themeTokens.semanticColors.dark.mutedForeground,
+  // mutedForeground (gray[400]) is too light under the white label text
+  axisPointerLabel: themeTokens.colors.gray[600],
+  divider: themeTokens.colors.gray[700],
+  success: themeTokens.semanticColors.dark.success,
+  destructive: themeTokens.semanticColors.dark.destructive
+};
+function getChartColors(themeName) {
+  return themeName === THEME_DARK ? darkChartColors : lightChartColors;
+}
+function colorWithAlpha(color, alpha) {
+  let hex = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(color)?.[1];
+  if (!hex) return color;
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 exports.THEME_DARK = THEME_DARK;
 exports.THEME_LIGHT = THEME_LIGHT;
+exports.colorWithAlpha = colorWithAlpha;
+exports.darkChartColors = darkChartColors;
 exports.darkTheme = darkTheme;
 exports.generateDarkTheme = generateDarkTheme;
 exports.generateLightTheme = generateLightTheme;
+exports.getChartColors = getChartColors;
+exports.lightChartColors = lightChartColors;
 exports.lightTheme = lightTheme;

package/dist/theme/index.d.cts

@@ -133,11 +133,42 @@ declare const lightTheme: EChartsTheme;
 declare const darkTheme: EChartsTheme;
 
 /**
- * Chart theme exports
+ * Semantic chart colours
+ *
+ * Colours that chart components set per series or per element (and so cannot
+ * come from the registered ECharts theme), derived from the design tokens.
+ */
+interface ChartSemanticColors {
+    /** Series palette, in the same order as the ECharts theme `color` array */
+    series: string[];
+    /** Primary text, e.g. a donut's centre value */
+    foreground: string;
+    /** Secondary text and marks: labels, gauge ticks, volume bars */
+    mutedForeground: string;
+    /** Background of axis-pointer labels (rendered with white text) */
+    axisPointerLabel: string;
+    /** Borders between top-level blocks, e.g. treemap groups */
+    divider: string;
+    /** Positive values */
+    success: string;
+    /** Negative values */
+    destructive: string;
+}
+declare const lightChartColors: ChartSemanticColors;
+declare const darkChartColors: ChartSemanticColors;
+/**
+ * Get the semantic chart colours for a registered theme name
+ * (`THEME_LIGHT` / `THEME_DARK`). Unknown names fall back to light.
+ */
+declare function getChartColors(themeName: string): ChartSemanticColors;
+/**
+ * Apply an alpha channel to a hex colour (`#rgb` or `#rrggbb`), returning
+ * `rgba(...)`. Any other colour string is returned unchanged.
  */
+declare function colorWithAlpha(color: string, alpha: number): string;
 
 /** Theme name constants */
 declare const THEME_LIGHT = "classic-light";
 declare const THEME_DARK = "classic-dark";
 
-export { type EChartsTheme, THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme };
+export { type ChartSemanticColors, type EChartsTheme, THEME_DARK, THEME_LIGHT, colorWithAlpha, darkChartColors, darkTheme, generateDarkTheme, generateLightTheme, getChartColors, lightChartColors, lightTheme };

package/dist/theme/index.d.ts

@@ -133,11 +133,42 @@ declare const lightTheme: EChartsTheme;
 declare const darkTheme: EChartsTheme;
 
 /**
- * Chart theme exports
+ * Semantic chart colours
+ *
+ * Colours that chart components set per series or per element (and so cannot
+ * come from the registered ECharts theme), derived from the design tokens.
+ */
+interface ChartSemanticColors {
+    /** Series palette, in the same order as the ECharts theme `color` array */
+    series: string[];
+    /** Primary text, e.g. a donut's centre value */
+    foreground: string;
+    /** Secondary text and marks: labels, gauge ticks, volume bars */
+    mutedForeground: string;
+    /** Background of axis-pointer labels (rendered with white text) */
+    axisPointerLabel: string;
+    /** Borders between top-level blocks, e.g. treemap groups */
+    divider: string;
+    /** Positive values */
+    success: string;
+    /** Negative values */
+    destructive: string;
+}
+declare const lightChartColors: ChartSemanticColors;
+declare const darkChartColors: ChartSemanticColors;
+/**
+ * Get the semantic chart colours for a registered theme name
+ * (`THEME_LIGHT` / `THEME_DARK`). Unknown names fall back to light.
+ */
+declare function getChartColors(themeName: string): ChartSemanticColors;
+/**
+ * Apply an alpha channel to a hex colour (`#rgb` or `#rrggbb`), returning
+ * `rgba(...)`. Any other colour string is returned unchanged.
  */
+declare function colorWithAlpha(color: string, alpha: number): string;
 
 /** Theme name constants */
 declare const THEME_LIGHT = "classic-light";
 declare const THEME_DARK = "classic-dark";
 
-export { type EChartsTheme, THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme };
+export { type ChartSemanticColors, type EChartsTheme, THEME_DARK, THEME_LIGHT, colorWithAlpha, darkChartColors, darkTheme, generateDarkTheme, generateLightTheme, getChartColors, lightChartColors, lightTheme };

package/dist/theme/index.js

@@ -1 +1 @@
-export { THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme } from '../chunk-ZRG25JNX.js';
+export { THEME_DARK, THEME_LIGHT, colorWithAlpha, darkChartColors, darkTheme, generateDarkTheme, generateLightTheme, getChartColors, lightChartColors, lightTheme } from '../chunk-JM72YHZD.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/charts-core",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "Core utilities and theme for Classic Theme charts",
   "type": "module",
   "main": "dist/index.cjs",
@@ -31,7 +31,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "clean": "node ../../scripts/rm.mjs dist",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   },
   "dependencies": {
     "@classic-homes/theme-tokens": "*"