@tensor_1/react 2.31.0 → 2.32.0

package/dist/calendar-model.js

@@ -38,17 +38,148 @@ function buildMonthGrid(month, weekStartsOn = 1) {
     };
   });
 }
+const FORMATTER_CACHE_LIMIT = 64;
+const formatterCache = /* @__PURE__ */ new Map();
+function cachedDateTimeFormat(locale, options = {}) {
+  const shape = Object.keys(options).sort().map((key2) => [key2, options[key2]]);
+  const key = JSON.stringify([locale ?? null, shape]);
+  let formatter = formatterCache.get(key);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat(locale, options);
+    if (formatterCache.size >= FORMATTER_CACHE_LIMIT) formatterCache.delete(formatterCache.keys().next().value);
+    formatterCache.set(key, formatter);
+  }
+  return formatter;
+}
+const partsFormatter = (timeZone) => cachedDateTimeFormat("en-US", {
+  timeZone,
+  hourCycle: "h23",
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit"
+});
+function toInstant(value) {
+  const ms = value instanceof Date ? value.getTime() : typeof value === "number" ? value : Date.parse(value);
+  if (Number.isNaN(ms)) throw new TypeError(`Invalid instant: ${String(value)}`);
+  return ms;
+}
+function wallClock(ms, timeZone) {
+  const wall = { year: 0, month: 0, day: 0, hour: 0, minute: 0, second: 0 };
+  for (const part of partsFormatter(timeZone).formatToParts(new Date(ms))) {
+    if (part.type in wall) wall[part.type] = Number(part.value);
+  }
+  return wall;
+}
+const wallKey = (wall) => `${String(wall.year).padStart(4, "0")}-${String(wall.month).padStart(2, "0")}-${String(wall.day).padStart(2, "0")}`;
+const wallAsUtc = (wall) => Date.UTC(wall.year, wall.month - 1, wall.day, wall.hour, wall.minute, wall.second);
+const wholeSecond = (ms) => Math.floor(ms / 1e3) * 1e3;
+function offsetAt(ms, timeZone) {
+  return wallAsUtc(wallClock(ms, timeZone)) - wholeSecond(ms);
+}
+function formatOffset(offset) {
+  const sign = offset < 0 ? "-" : "+";
+  const minutes = Math.round(Math.abs(offset) / 6e4);
+  return `${sign}${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+}
 function zonedDateKey(instant, timeZone) {
-  const date = instant instanceof Date ? instant : new Date(instant);
-  if (Number.isNaN(date.getTime())) throw new TypeError(`Invalid instant: ${String(instant)}`);
-  const parts = new Intl.DateTimeFormat("en-CA", {
-    timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
-  }).formatToParts(date);
-  const get = (type) => parts.find((part) => part.type === type)?.value ?? "";
-  return `${get("year")}-${get("month")}-${get("day")}`;
+  return wallKey(wallClock(toInstant(instant), timeZone));
+}
+function zonedTimeOfDay(instant, timeZone) {
+  const wall = wallClock(toInstant(instant), timeZone);
+  return `${String(wall.hour).padStart(2, "0")}:${String(wall.minute).padStart(2, "0")}`;
+}
+function checkedDateKey(value) {
+  if (toDateKey(fromDateKey(value)) !== value) throw new TypeError(`Invalid ISO date: ${value}`);
+  return value;
+}
+const DAY_START_CACHE_LIMIT = 2048;
+const dayStartCache = /* @__PURE__ */ new Map();
+function zonedDayStart(dateKey, timeZone) {
+  const cacheKey = `${timeZone} ${dateKey}`;
+  const cached = dayStartCache.get(cacheKey);
+  if (cached !== void 0) return cached;
+  const midnightUtc = fromDateKey(checkedDateKey(dateKey)).getTime();
+  let lo = (midnightUtc - 30 * 36e5) / 1e3;
+  let hi = (midnightUtc + 30 * 36e5) / 1e3;
+  const keyAt = (seconds) => wallKey(wallClock(seconds * 1e3, timeZone));
+  if (keyAt(lo) >= dateKey || keyAt(hi) < dateKey) throw new RangeError(`Cannot find the start of ${dateKey} in ${timeZone}`);
+  while (hi - lo > 1) {
+    const mid = Math.floor((lo + hi) / 2);
+    if (keyAt(mid) >= dateKey) hi = mid;
+    else lo = mid;
+  }
+  const start = hi * 1e3;
+  if (dayStartCache.size >= DAY_START_CACHE_LIMIT) dayStartCache.delete(dayStartCache.keys().next().value);
+  dayStartCache.set(cacheKey, start);
+  return start;
+}
+function zonedDayBounds(dateKey, timeZone) {
+  return { start: new Date(zonedDayStart(dateKey, timeZone)), end: new Date(zonedDayStart(addCalendarDays(dateKey, 1), timeZone)) };
+}
+function zonedHourSlots(dateKey, timeZone) {
+  const dayStart = zonedDayStart(dateKey, timeZone);
+  const dayEnd = zonedDayStart(addCalendarDays(dateKey, 1), timeZone);
+  const QUARTER = 15 * 6e4;
+  const slots = [];
+  let at = dayStart;
+  while (at < dayEnd) {
+    const wall = wallClock(at, timeZone);
+    if (wall.minute === 0 && wall.second === 0) {
+      slots.push({ at, hour: wall.hour });
+      at += 36e5;
+    } else {
+      at = dayStart + (Math.floor((at - dayStart) / QUARTER) + 1) * QUARTER;
+    }
+  }
+  const counts = /* @__PURE__ */ new Map();
+  for (const slot of slots) counts.set(slot.hour, (counts.get(slot.hour) ?? 0) + 1);
+  return slots.map(({ at: ms, hour }) => ({
+    instant: new Date(ms),
+    label: String(hour).padStart(2, "0"),
+    offsetLabel: (counts.get(hour) ?? 0) > 1 ? formatOffset(offsetAt(ms, timeZone)) : null
+  }));
+}
+function addZonedDays(instant, days, timeZone) {
+  if (!Number.isInteger(days)) throw new RangeError(`addZonedDays needs a whole number of days, got ${days}`);
+  const ms = toInstant(instant);
+  const fraction = ms - wholeSecond(ms);
+  const wall = wallClock(ms, timeZone);
+  const sourceOffset = wallAsUtc(wall) - wholeSecond(ms);
+  const target = fromDateKey(addCalendarDays(wallKey(wall), days));
+  const targetWall = Date.UTC(target.getUTCFullYear(), target.getUTCMonth(), target.getUTCDate(), wall.hour, wall.minute, wall.second);
+  const before = offsetAt(targetWall - 864e5, timeZone);
+  const after = offsetAt(targetWall + 864e5, timeZone);
+  const valid = [.../* @__PURE__ */ new Set([sourceOffset, before, after])].filter((offset) => offsetAt(targetWall - offset, timeZone) === offset).sort((a, b) => b - a);
+  if (valid.length) {
+    const offset = valid.includes(sourceOffset) ? sourceOffset : valid[0];
+    return { instant: new Date(targetWall - offset + fraction), adjusted: null };
+  }
+  return { instant: new Date(targetWall - before + fraction), adjusted: "gap_forward" };
+}
+function zonedDaySpan(start, end, timeZone) {
+  const from = toInstant(start);
+  const to = toInstant(end);
+  if (to <= from) {
+    throw new RangeError(`zonedDaySpan: end (${new Date(to).toISOString()}) must be after start (${new Date(from).toISOString()}); the interval is inverted or empty`);
+  }
+  return { start: zonedDateKey(new Date(from), timeZone), end: addCalendarDays(zonedDateKey(new Date(to - 1), timeZone), 1) };
+}
+function enumerateDateKeys(span, options = {}) {
+  const limit = options.limit ?? 370;
+  if (!(limit === Infinity || Number.isInteger(limit) && limit >= 0)) throw new RangeError(`enumerateDateKeys: limit must be a non-negative integer or Infinity, got ${limit}`);
+  checkedDateKey(span.start);
+  checkedDateKey(span.end);
+  if (span.end < span.start) throw new RangeError(`enumerateDateKeys: end (${span.end}) is before start (${span.start}); the span is inverted`);
+  const dates = [];
+  let current = span.start;
+  while (current < span.end && dates.length < limit) {
+    dates.push(current);
+    current = addCalendarDays(current, 1);
+  }
+  return { dates, truncated: current < span.end };
 }
 function zonedDateSpan(start, end, timeZone) {
   const startKey = zonedDateKey(start, timeZone);
@@ -64,6 +195,55 @@ function enumerateDateSpan(span, limit = 370) {
   }
   return dates;
 }
+function packLanes(intervals, maxLanes, options = {}) {
+  if (!(maxLanes === Infinity || Number.isInteger(maxLanes) && maxLanes >= 0)) throw new RangeError(`packLanes: maxLanes must be a non-negative integer, got ${maxLanes}`);
+  const order = options.order ?? "start";
+  if (order !== "start" && order !== "given") throw new TypeError(`packLanes: unknown order ${String(order)}`);
+  const seen = /* @__PURE__ */ new Set();
+  const items = intervals.map((interval) => {
+    if (seen.has(interval.id)) throw new TypeError(`packLanes: duplicate id ${interval.id}`);
+    seen.add(interval.id);
+    const start = toInstant(interval.start);
+    const end = toInstant(interval.end);
+    if (end < start) throw new RangeError(`packLanes: interval ${interval.id} ends before it starts`);
+    return { id: interval.id, start, end: end === start ? start + 1 : end };
+  });
+  const byStart = [...items].sort((a, b) => a.start - b.start || a.end - b.end || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+  const clusterOf = /* @__PURE__ */ new Map();
+  const clusters = [];
+  let reach = -Infinity;
+  for (const item of byStart) {
+    if (item.start >= reach) clusters.push({ ids: [], laneCount: 0, overflow: 0 });
+    reach = Math.max(reach, item.end);
+    clusters[clusters.length - 1].ids.push(item.id);
+    clusterOf.set(item.id, clusters.length - 1);
+  }
+  const occupied = [];
+  const lanes = {};
+  for (const item of order === "start" ? byStart : items) {
+    let lane = null;
+    for (let index = 0; index < Math.min(maxLanes, occupied.length + 1); index++) {
+      if (!(occupied[index] ?? []).some((other) => item.start < other.end && other.start < item.end)) {
+        lane = index;
+        break;
+      }
+    }
+    const cluster = clusters[clusterOf.get(item.id)];
+    if (lane === null) cluster.overflow++;
+    else {
+      (occupied[lane] ?? (occupied[lane] = [])).push(item);
+      cluster.laneCount = Math.max(cluster.laneCount, lane + 1);
+    }
+    lanes[item.id] = { lane, cluster: clusterOf.get(item.id) };
+  }
+  return { lanes, clusters, overflow: clusters.reduce((sum, cluster) => sum + cluster.overflow, 0) };
+}
+function rankOverflow(items, compare, n) {
+  if (!(n === Infinity || Number.isInteger(n) && n >= 0)) throw new RangeError(`rankOverflow: n must be a non-negative integer, got ${n}`);
+  const sorted = [...items].sort(compare);
+  const visible = sorted.slice(0, n);
+  return { visible, hidden: sorted.length - visible.length };
+}
 function selectRangeDate(current, date) {
   if (!current.start || current.end) return { start: date };
   return date < current.start ? { start: date, end: current.start } : { start: current.start, end: date };
@@ -77,13 +257,22 @@ function isDateUnavailable(date, options) {
 export {
   addCalendarDays,
   addCalendarMonths,
+  addZonedDays,
   buildMonthGrid,
+  cachedDateTimeFormat,
+  enumerateDateKeys,
   enumerateDateSpan,
   isDateInRange,
   isDateUnavailable,
+  packLanes,
+  rankOverflow,
   selectRangeDate,
   startOfMonth,
   toDateKey,
   zonedDateKey,
-  zonedDateSpan
+  zonedDateSpan,
+  zonedDayBounds,
+  zonedDaySpan,
+  zonedHourSlots,
+  zonedTimeOfDay
 };

package/dist/chart-preset.cjs

@@ -36,7 +36,11 @@ __export(chart_preset_exports, {
   ChartLegendItem: () => ChartLegendItem,
   ChartMetric: () => ChartMetric,
   DEFAULT_CHART_LABELS: () => DEFAULT_CHART_LABELS,
-  uixChartPalette: () => uixChartPalette
+  mergeChartTheme: () => mergeChartTheme,
+  uixChartAreaGradient: () => uixChartAreaGradient,
+  uixChartPalette: () => uixChartPalette,
+  uixChartTheme: () => uixChartTheme,
+  uixChartTokens: () => uixChartTokens
 });
 module.exports = __toCommonJS(chart_preset_exports);
 var echarts = __toESM(require("echarts/core"), 1);
@@ -52,6 +56,101 @@ function cx(...args) {
   return args.filter(Boolean).join(" ");
 }
 
+// src/chart-theme.ts
+function reader(source) {
+  if (typeof source === "function") return source;
+  if (typeof getComputedStyle === "undefined" || typeof document === "undefined") return () => "";
+  const style = getComputedStyle(source ?? document.documentElement);
+  return (token) => style.getPropertyValue(token).trim();
+}
+function uixChartTokens(source) {
+  const read = reader(source);
+  const t = (name) => read(`--uix-${name}`);
+  const unquote = (font) => font.replace(/"/g, "");
+  return {
+    palette: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => t(`chart-${i}`)),
+    neutral: t("chart-neutral"),
+    grid: t("chart-grid"),
+    axis: t("chart-axis"),
+    reference: t("chart-reference"),
+    zoneWarning: t("chart-zone-warning"),
+    zoneDanger: t("chart-zone-danger"),
+    forecastBand: t("chart-forecast-band"),
+    event: t("chart-event"),
+    partial: t("chart-partial"),
+    comparison: t("chart-comparison"),
+    surface: t("surface"),
+    text: t("text"),
+    textMuted: t("text-muted"),
+    border: t("border-strong"),
+    fontSans: unquote(t("font-sans")),
+    fontMono: unquote(t("font-mono"))
+  };
+}
+function uixChartTheme(source) {
+  const k = uixChartTokens(source);
+  const read = reader(source);
+  const axis = {
+    axisLine: { lineStyle: { color: k.axis } },
+    axisTick: { show: false },
+    axisLabel: { color: k.textMuted, fontFamily: k.fontMono, fontSize: 11 },
+    splitLine: { lineStyle: { color: k.grid, type: "solid", width: 1 } }
+  };
+  return {
+    color: k.palette,
+    backgroundColor: "transparent",
+    textStyle: { color: k.textMuted, fontFamily: k.fontSans, fontSize: 12 },
+    title: { textStyle: { color: k.text, fontFamily: k.fontSans }, subtextStyle: { color: k.textMuted, fontFamily: k.fontSans } },
+    legend: { textStyle: { color: k.textMuted, fontFamily: k.fontSans, fontSize: 12 }, icon: "roundRect", itemWidth: 10, itemHeight: 6, itemGap: 12 },
+    tooltip: {
+      backgroundColor: k.surface,
+      borderColor: k.border,
+      borderWidth: 1,
+      padding: [8, 10],
+      textStyle: { color: k.text, fontFamily: k.fontSans, fontSize: 12 },
+      extraCssText: `border-radius:${read("--uix-radius-sm")};box-shadow:${read("--uix-shadow-popover")}`,
+      axisPointer: { lineStyle: { color: k.reference, width: 1 }, crossStyle: { color: k.reference }, shadowStyle: { color: k.forecastBand } }
+    },
+    xAxis: axis,
+    yAxis: axis
+  };
+}
+function uixChartAreaGradient(color) {
+  const alpha = (opacity) => {
+    const hex = color.replace("#", "");
+    if (!/^[0-9a-f]{6}$/i.test(hex)) return color;
+    const [r, g, b] = hex.match(/.{2}/g).map((channel) => Number.parseInt(channel, 16));
+    return `rgba(${r},${g},${b},${opacity})`;
+  };
+  return {
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [{ offset: 0, color: alpha(0.28) }, { offset: 0.72, color: alpha(0.06) }, { offset: 1, color: alpha(0) }]
+  };
+}
+var isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype;
+function deepMerge(base, over) {
+  if (over === void 0) return base;
+  if (!isPlainObject(base) || !isPlainObject(over)) return over;
+  const out = { ...base };
+  for (const key of Object.keys(over)) out[key] = deepMerge(base[key], over[key]);
+  return out;
+}
+var STYLED_ONLY = ["xAxis", "yAxis", "legend", "title"];
+function mergeChartTheme(theme, option) {
+  const merged = deepMerge(theme, option);
+  const source = option;
+  const base = theme;
+  for (const key of STYLED_ONLY) {
+    if (Array.isArray(source[key])) merged[key] = source[key].map((axis) => deepMerge(base[key], axis));
+    else if (!(key in source)) delete merged[key];
+  }
+  return merged;
+}
+
 // src/components/ChartCore.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function readToken(name) {
@@ -61,6 +160,9 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
+function themed(option, theme, element) {
+  return theme === "none" ? option : mergeChartTheme(uixChartTheme(element), option);
+}
 function motionSafe(option) {
   if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
     return { ...option, animation: false };
@@ -89,7 +191,8 @@ function ChartCore({
   footer,
   loading = false,
   empty,
-  labels: labelOverrides
+  labels: labelOverrides,
+  theme = "uix"
 }) {
   const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
   const containerRef = (0, import_react.useRef)(null);
@@ -101,7 +204,9 @@ function ChartCore({
   const hasEmpty = empty != null;
   const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length);
   const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
+  const themeRef = (0, import_react.useRef)(theme);
   latestOptionRef.current = option;
+  themeRef.current = theme;
   onReadyRef.current = onReady;
   hasTextAlternativeRef.current = hasTextAlternative;
   (0, import_react.useEffect)(() => {
@@ -109,9 +214,17 @@ function ChartCore({
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(motionSafe(latestOptionRef.current));
+    chart.setOption(motionSafe(themed(latestOptionRef.current, themeRef.current, element)));
     appliedOptionRef.current = latestOptionRef.current;
     onReadyRef.current?.(chart);
+    const retheme = () => {
+      if (themeRef.current === "none") return;
+      chart.setOption(motionSafe(themed(latestOptionRef.current, themeRef.current, element)));
+    };
+    const themeObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(retheme);
+    themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
+    const scheme = typeof matchMedia === "undefined" ? null : matchMedia("(prefers-color-scheme: dark)");
+    scheme?.addEventListener?.("change", retheme);
     if (!hasTextAlternativeRef.current) {
       console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
     }
@@ -133,6 +246,8 @@ function ChartCore({
     observer.observe(element);
     return () => {
       observer.disconnect();
+      themeObserver?.disconnect();
+      scheme?.removeEventListener?.("change", retheme);
       if (frame) cancelAnimationFrame(frame);
       chart.dispose();
       chartRef.current = null;
@@ -141,10 +256,11 @@ function ChartCore({
   }, [engine, hasEmpty]);
   (0, import_react.useEffect)(() => {
     const chart = chartRef.current;
-    if (!chart || appliedOptionRef.current === option) return;
-    chart.setOption(motionSafe(option), { notMerge: false });
+    const element = containerRef.current;
+    if (!chart || !element || appliedOptionRef.current === option) return;
+    chart.setOption(motionSafe(themed(option, theme, element)), { notMerge: false });
     appliedOptionRef.current = option;
-  }, [option]);
+  }, [option, theme]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
   const effectiveAriaLabel = ariaLabel ?? title ?? labels.chart;
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);
@@ -220,5 +336,9 @@ function Chart(props) {
   ChartLegendItem,
   ChartMetric,
   DEFAULT_CHART_LABELS,
-  uixChartPalette
+  mergeChartTheme,
+  uixChartAreaGradient,
+  uixChartPalette,
+  uixChartTheme,
+  uixChartTokens
 });

package/dist/chart-preset.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { C as ChartProps } from './ChartCore-DzWe10bN.cjs';
-export { a as ChartLabels, b as ChartLegend, c as ChartLegendItem, d as ChartLegendItemProps, e as ChartLegendProps, f as ChartMetric, g as ChartMetricProps, h as ChartTableRow, D as DEFAULT_CHART_LABELS, u as uixChartPalette } from './ChartCore-DzWe10bN.cjs';
+import { C as ChartProps } from './chart-theme-Cl0IrkKQ.cjs';
+export { a as ChartLabels, b as ChartLegend, c as ChartLegendItem, d as ChartLegendItemProps, e as ChartLegendProps, f as ChartMetric, g as ChartMetricProps, h as ChartTableRow, i as ChartTokenSource, D as DEFAULT_CHART_LABELS, U as UixChartTokens, m as mergeChartTheme, u as uixChartAreaGradient, j as uixChartPalette, k as uixChartTheme, l as uixChartTokens } from './chart-theme-Cl0IrkKQ.cjs';
 import 'echarts';
 
 /** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */

package/dist/chart-preset.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ChartProps } from './components/ChartCore.js';
 export { ChartLabels, ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette } from './components/ChartCore.js';
+export { ChartTokenSource, UixChartTokens, mergeChartTheme, uixChartAreaGradient, uixChartTheme, uixChartTokens } from './chart-theme.js';
 import 'echarts';
 
 /** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */

package/dist/chart-preset.js

@@ -29,11 +29,16 @@ function Chart(props) {
   return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: presetEngine });
 }
 import { ChartLegend, ChartLegendItem, ChartMetric, DEFAULT_CHART_LABELS, uixChartPalette } from "./components/ChartCore.js";
+import { mergeChartTheme, uixChartAreaGradient, uixChartTheme, uixChartTokens } from "./chart-theme.js";
 export {
   Chart,
   ChartLegend,
   ChartLegendItem,
   ChartMetric,
   DEFAULT_CHART_LABELS,
-  uixChartPalette
+  mergeChartTheme,
+  uixChartAreaGradient,
+  uixChartPalette,
+  uixChartTheme,
+  uixChartTokens
 };

package/dist/chart-theme-Cl0IrkKQ.d.cts

@@ -0,0 +1,112 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode, HTMLAttributes } from 'react';
+import { EChartsOption, ECharts } from 'echarts';
+
+declare function uixChartPalette(): string[];
+interface ChartTableRow {
+    [key: string]: string | number;
+}
+/**
+ * Every word the chart renders itself (TENSOR RX-125, UIX-04 / UIX-05). The
+ * loading text used to live in CSS `content:`, where nothing could translate it.
+ */
+interface ChartLabels {
+    /** Shown (and announced inside the busy region) while `loading`. */
+    loading: ReactNode;
+    /** Accessible name when neither `ariaLabel` nor `title` is given. */
+    chart: string;
+    /** Appended to the chart's name for its data-table alternative. */
+    dataTableSuffix: string;
+}
+declare const DEFAULT_CHART_LABELS: ChartLabels;
+interface ChartProps {
+    option: EChartsOption;
+    title?: string;
+    subtitle?: string;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    tableData?: ChartTableRow[];
+    tableHeaders?: string[];
+    onReady?: (chart: ECharts) => void;
+    header?: ReactNode;
+    headerAction?: ReactNode;
+    footer?: ReactNode;
+    loading?: boolean;
+    empty?: ReactNode;
+    /** Translatable words; English defaults in {@link DEFAULT_CHART_LABELS}. */
+    labels?: Partial<ChartLabels>;
+    /**
+     * `'uix'` (default) merges {@link uixChartTheme} under `option` — token palette, fonts, a solid hairline
+     * grid and the UIx tooltip — and re-applies it when the page theme changes. `'none'` renders `option` as is.
+     */
+    theme?: 'uix' | 'none';
+}
+interface ChartMetricProps extends HTMLAttributes<HTMLDivElement> {
+    value: ReactNode;
+    label?: ReactNode;
+    delta?: ReactNode;
+    deltaTone?: 'neutral' | 'positive' | 'negative' | 'warning';
+}
+declare function ChartMetric({ value, label, delta, deltaTone, className, ...props }: ChartMetricProps): react.JSX.Element;
+interface ChartLegendProps extends HTMLAttributes<HTMLUListElement> {
+    children?: ReactNode;
+}
+declare function ChartLegend({ children, className, ...props }: ChartLegendProps): react.JSX.Element;
+interface ChartLegendItemProps extends HTMLAttributes<HTMLLIElement> {
+    label: ReactNode;
+    color?: string;
+    swatch?: 'block' | 'line' | 'dash';
+}
+declare function ChartLegendItem({ label, color, swatch, className, style, ...props }: ChartLegendItemProps): react.JSX.Element;
+
+/** Where tokens are read from: an element (its computed style), or a reader for tests and non-DOM use. */
+type ChartTokenSource = Element | ((token: string) => string);
+/** The analytic chart roles: reference lines, threshold zones, forecast bands, events, partial periods. */
+interface UixChartTokens {
+    palette: string[];
+    neutral: string;
+    grid: string;
+    axis: string;
+    reference: string;
+    zoneWarning: string;
+    zoneDanger: string;
+    forecastBand: string;
+    event: string;
+    partial: string;
+    comparison: string;
+    surface: string;
+    text: string;
+    textMuted: string;
+    border: string;
+    fontSans: string;
+    fontMono: string;
+}
+/** Resolve the chart tokens once (current theme). */
+declare function uixChartTokens(source?: ChartTokenSource): UixChartTokens;
+/**
+ * The base option every UIx chart merges under the consumer's option (the consumer wins).
+ * Axis defaults apply to every x/y axis, whether the consumer passes one axis or an array.
+ */
+declare function uixChartTheme(source?: ChartTokenSource): EChartsOption;
+/** A vertical area fill that fades the series colour (28 % → 6 % → 0) toward the baseline. */
+declare function uixChartAreaGradient(color: string): {
+    type: "linear";
+    x: number;
+    y: number;
+    x2: number;
+    y2: number;
+    colorStops: {
+        offset: number;
+        color: string;
+    }[];
+};
+/**
+ * Merge the theme under a consumer option: plain objects merge deeply, everything else (arrays,
+ * series, data, functions) is the consumer's. Array-valued components (`xAxis: [...]`, `title: [...]`)
+ * take the theme entry per element.
+ */
+declare function mergeChartTheme(theme: EChartsOption, option: EChartsOption): EChartsOption;
+
+export { type ChartProps as C, DEFAULT_CHART_LABELS as D, type UixChartTokens as U, type ChartLabels as a, ChartLegend as b, ChartLegendItem as c, type ChartLegendItemProps as d, type ChartLegendProps as e, ChartMetric as f, type ChartMetricProps as g, type ChartTableRow as h, type ChartTokenSource as i, uixChartPalette as j, uixChartTheme as k, uixChartTokens as l, mergeChartTheme as m, uixChartAreaGradient as u };

package/dist/chart-theme.d.ts

@@ -0,0 +1,51 @@
+import { EChartsOption } from 'echarts';
+
+/** Where tokens are read from: an element (its computed style), or a reader for tests and non-DOM use. */
+type ChartTokenSource = Element | ((token: string) => string);
+/** The analytic chart roles: reference lines, threshold zones, forecast bands, events, partial periods. */
+interface UixChartTokens {
+    palette: string[];
+    neutral: string;
+    grid: string;
+    axis: string;
+    reference: string;
+    zoneWarning: string;
+    zoneDanger: string;
+    forecastBand: string;
+    event: string;
+    partial: string;
+    comparison: string;
+    surface: string;
+    text: string;
+    textMuted: string;
+    border: string;
+    fontSans: string;
+    fontMono: string;
+}
+/** Resolve the chart tokens once (current theme). */
+declare function uixChartTokens(source?: ChartTokenSource): UixChartTokens;
+/**
+ * The base option every UIx chart merges under the consumer's option (the consumer wins).
+ * Axis defaults apply to every x/y axis, whether the consumer passes one axis or an array.
+ */
+declare function uixChartTheme(source?: ChartTokenSource): EChartsOption;
+/** A vertical area fill that fades the series colour (28 % → 6 % → 0) toward the baseline. */
+declare function uixChartAreaGradient(color: string): {
+    type: "linear";
+    x: number;
+    y: number;
+    x2: number;
+    y2: number;
+    colorStops: {
+        offset: number;
+        color: string;
+    }[];
+};
+/**
+ * Merge the theme under a consumer option: plain objects merge deeply, everything else (arrays,
+ * series, data, functions) is the consumer's. Array-valued components (`xAxis: [...]`, `title: [...]`)
+ * take the theme entry per element.
+ */
+declare function mergeChartTheme(theme: EChartsOption, option: EChartsOption): EChartsOption;
+
+export { type ChartTokenSource, type UixChartTokens, mergeChartTheme, uixChartAreaGradient, uixChartTheme, uixChartTokens };