@chartts/core 0.1.0

package/dist/chunk-XHQWWR5M.cjs

@@ -0,0 +1,4892 @@
+'use strict';
+
+// src/constants.ts
+var CSS_PREFIX = "--chartts";
+var PALETTE = [
+  "var(--color-blue-500, #3b82f6)",
+  "var(--color-red-500, #ef4444)",
+  "var(--color-emerald-500, #10b981)",
+  "var(--color-amber-500, #f59e0b)",
+  "var(--color-violet-500, #8b5cf6)",
+  "var(--color-pink-500, #ec4899)",
+  "var(--color-cyan-500, #06b6d4)",
+  "var(--color-lime-500, #84cc16)",
+  "var(--color-orange-500, #f97316)",
+  "var(--color-indigo-500, #6366f1)"
+];
+var FONT_FAMILY = 'var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif)';
+var LIGHT_THEME = {
+  colors: [...PALETTE],
+  background: "transparent",
+  textColor: "var(--color-gray-800, #1f2937)",
+  textMuted: "var(--color-gray-500, #6b7280)",
+  axisColor: "var(--color-gray-300, #d1d5db)",
+  gridColor: "var(--color-gray-200, #e5e7eb)",
+  tooltipBackground: "var(--color-white, #ffffff)",
+  tooltipText: "var(--color-gray-800, #1f2937)",
+  tooltipBorder: "var(--color-gray-200, #e5e7eb)",
+  fontFamily: FONT_FAMILY,
+  fontSize: 12,
+  fontSizeSmall: 10,
+  fontSizeLarge: 14,
+  borderRadius: 8,
+  gridStyle: "dashed",
+  gridWidth: 1,
+  axisWidth: 1,
+  pointRadius: 4,
+  lineWidth: 2.5
+};
+var DARK_THEME = {
+  colors: [...PALETTE],
+  background: "transparent",
+  textColor: "var(--color-gray-100, #f3f4f6)",
+  textMuted: "var(--color-gray-500, #6b7280)",
+  axisColor: "var(--color-gray-700, #374151)",
+  gridColor: "var(--color-gray-800, #1f2937)",
+  tooltipBackground: "var(--color-gray-900, #111827)",
+  tooltipText: "var(--color-gray-100, #f3f4f6)",
+  tooltipBorder: "var(--color-gray-700, #374151)",
+  fontFamily: FONT_FAMILY,
+  fontSize: 12,
+  fontSizeSmall: 10,
+  fontSizeLarge: 14,
+  borderRadius: 8,
+  gridStyle: "dashed",
+  gridWidth: 1,
+  axisWidth: 1,
+  pointRadius: 4,
+  lineWidth: 2.5
+};
+var NO_AXES_TYPES = /* @__PURE__ */ new Set([
+  "sparkline",
+  "gauge",
+  "funnel",
+  "radar",
+  "pie",
+  "donut",
+  "heatmap",
+  "horizontal-bar",
+  "treemap",
+  "polar",
+  "radial-bar",
+  "bullet",
+  "dumbbell",
+  "calendar",
+  "sankey",
+  "sunburst",
+  "tree",
+  "graph",
+  "parallel",
+  "themeriver",
+  "pictorialbar",
+  "chord",
+  "geo",
+  "lines",
+  "matrix",
+  "custom",
+  "kagi",
+  "renko"
+]);
+var BAND_SCALE_TYPES = /* @__PURE__ */ new Set([
+  "bar",
+  "stacked-bar",
+  "horizontal-bar",
+  "candlestick",
+  "waterfall",
+  "histogram",
+  "boxplot",
+  "lollipop",
+  "combo",
+  "ohlc",
+  "volume"
+]);
+function resolveOptions(opts, seriesCount) {
+  const multi = seriesCount > 1;
+  return {
+    ...opts,
+    width: opts.width ?? 0,
+    height: opts.height ?? 0,
+    padding: opts.padding ?? [12, 16, 8, 8],
+    renderer: opts.renderer ?? "svg",
+    theme: opts.theme ?? "auto",
+    xLabel: opts.xLabel ?? "",
+    yLabel: opts.yLabel ?? "",
+    xFormat: opts.xFormat ?? formatX,
+    yFormat: opts.yFormat ?? formatY,
+    xGrid: opts.xGrid ?? false,
+    yGrid: opts.yGrid ?? true,
+    xAxis: opts.xAxis ?? true,
+    yAxis: opts.yAxis ?? true,
+    xTicks: opts.xTicks ?? 0,
+    yTicks: opts.yTicks ?? 5,
+    yMin: opts.yMin,
+    yMax: opts.yMax,
+    legend: opts.legend === void 0 ? multi ? "top" : false : opts.legend === true ? "top" : opts.legend,
+    tooltip: opts.tooltip === void 0 || opts.tooltip === true ? { enabled: true } : opts.tooltip === false ? false : opts.tooltip,
+    animate: opts.animate ?? true,
+    duration: opts.duration ?? 300,
+    zoom: opts.zoom ?? false,
+    pan: opts.pan ?? false,
+    crosshair: !opts.crosshair ? false : opts.crosshair === true ? { enabled: true, mode: "vertical" } : { enabled: opts.crosshair.enabled ?? true, mode: opts.crosshair.mode ?? "vertical" },
+    brush: opts.brush ?? false,
+    colors: opts.colors ?? [...PALETTE],
+    fontFamily: opts.fontFamily ?? FONT_FAMILY,
+    fontSize: opts.fontSize ?? 12,
+    curve: opts.curve ?? "monotone",
+    barRadius: opts.barRadius ?? 4,
+    barGap: opts.barGap ?? 0.2,
+    ariaLabel: opts.ariaLabel ?? "Chart",
+    ariaDescription: opts.ariaDescription ?? "",
+    onClick: opts.onClick,
+    onHover: opts.onHover,
+    className: opts.className ?? ""
+  };
+}
+function formatX(value) {
+  if (value instanceof Date) return value.toLocaleDateString();
+  return String(value);
+}
+function formatY(value) {
+  const abs = Math.abs(value);
+  if (abs >= 1e12) return trim(value / 1e12, "T");
+  if (abs >= 1e9) return trim(value / 1e9, "B");
+  if (abs >= 1e6) return trim(value / 1e6, "M");
+  if (abs >= 1e3) return trim(value / 1e3, "K");
+  if (Number.isInteger(value)) return String(value);
+  return value.toFixed(1);
+}
+function trim(v, suffix) {
+  const s = v.toFixed(1);
+  return (s.endsWith(".0") ? s.slice(0, -2) : s) + suffix;
+}
+
+// src/theme/presets.ts
+var CORPORATE_THEME = {
+  colors: [
+    "#1e40af",
+    "#2563eb",
+    "#3b82f6",
+    "#60a5fa",
+    "#93c5fd",
+    "#1e3a5f",
+    "#0f766e",
+    "#4f46e5",
+    "#7c3aed",
+    "#be185d"
+  ],
+  background: "transparent",
+  textColor: "#1e293b",
+  textMuted: "#64748b",
+  axisColor: "#94a3b8",
+  gridColor: "#e2e8f0",
+  tooltipBackground: "#ffffff",
+  tooltipText: "#1e293b",
+  tooltipBorder: "#cbd5e1",
+  fontFamily: '"Inter", "Segoe UI", -apple-system, sans-serif',
+  fontSize: 11,
+  fontSizeSmall: 9,
+  fontSizeLarge: 13,
+  borderRadius: 4,
+  gridStyle: "solid",
+  gridWidth: 1,
+  axisWidth: 1,
+  pointRadius: 3,
+  lineWidth: 2
+};
+var SAAS_THEME = {
+  colors: [
+    "#6366f1",
+    "#8b5cf6",
+    "#ec4899",
+    "#f43f5e",
+    "#f97316",
+    "#eab308",
+    "#22c55e",
+    "#06b6d4",
+    "#0ea5e9",
+    "#a855f7"
+  ],
+  background: "transparent",
+  textColor: "#0f172a",
+  textMuted: "#475569",
+  axisColor: "#cbd5e1",
+  gridColor: "#f1f5f9",
+  tooltipBackground: "#0f172a",
+  tooltipText: "#f8fafc",
+  tooltipBorder: "#334155",
+  fontFamily: FONT_FAMILY,
+  fontSize: 12,
+  fontSizeSmall: 10,
+  fontSizeLarge: 14,
+  borderRadius: 8,
+  gridStyle: "dashed",
+  gridWidth: 1,
+  axisWidth: 1,
+  pointRadius: 4,
+  lineWidth: 2.5
+};
+var STARTUP_THEME = {
+  colors: [
+    "#ff6b6b",
+    "#feca57",
+    "#48dbfb",
+    "#ff9ff3",
+    "#54a0ff",
+    "#5f27cd",
+    "#01a3a4",
+    "#f368e0",
+    "#ff6348",
+    "#2ed573"
+  ],
+  background: "transparent",
+  textColor: "#2d3436",
+  textMuted: "#636e72",
+  axisColor: "#b2bec3",
+  gridColor: "#dfe6e9",
+  tooltipBackground: "#2d3436",
+  tooltipText: "#dfe6e9",
+  tooltipBorder: "#636e72",
+  fontFamily: '"DM Sans", "Inter", -apple-system, sans-serif',
+  fontSize: 12,
+  fontSizeSmall: 10,
+  fontSizeLarge: 15,
+  borderRadius: 10,
+  gridStyle: "dotted",
+  gridWidth: 1,
+  axisWidth: 2,
+  pointRadius: 5,
+  lineWidth: 3
+};
+var EDITORIAL_THEME = {
+  colors: [
+    "#1a1a1a",
+    "#c0392b",
+    "#2980b9",
+    "#8e44ad",
+    "#27ae60",
+    "#d35400",
+    "#2c3e50",
+    "#16a085",
+    "#f39c12",
+    "#7f8c8d"
+  ],
+  background: "transparent",
+  textColor: "#1a1a1a",
+  textMuted: "#7f8c8d",
+  axisColor: "#bdc3c7",
+  gridColor: "#ecf0f1",
+  tooltipBackground: "#1a1a1a",
+  tooltipText: "#ecf0f1",
+  tooltipBorder: "#34495e",
+  fontFamily: '"Georgia", "Times New Roman", serif',
+  fontSize: 12,
+  fontSizeSmall: 10,
+  fontSizeLarge: 14,
+  borderRadius: 0,
+  gridStyle: "solid",
+  gridWidth: 0.5,
+  axisWidth: 1.5,
+  pointRadius: 3,
+  lineWidth: 1.5
+};
+var OCEAN_THEME = {
+  colors: [
+    "#00d2ff",
+    "#3a7bd5",
+    "#00b894",
+    "#fdcb6e",
+    "#e17055",
+    "#a29bfe",
+    "#fd79a8",
+    "#55efc4",
+    "#74b9ff",
+    "#ffeaa7"
+  ],
+  background: "transparent",
+  textColor: "#dfe6e9",
+  textMuted: "#636e72",
+  axisColor: "#2d3436",
+  gridColor: "#2d3436",
+  tooltipBackground: "#0a0a23",
+  tooltipText: "#dfe6e9",
+  tooltipBorder: "#2d3436",
+  fontFamily: FONT_FAMILY,
+  fontSize: 12,
+  fontSizeSmall: 10,
+  fontSizeLarge: 14,
+  borderRadius: 6,
+  gridStyle: "dashed",
+  gridWidth: 1,
+  axisWidth: 1,
+  pointRadius: 3.5,
+  lineWidth: 2
+};
+var THEME_PRESETS = {
+  corporate: CORPORATE_THEME,
+  saas: SAAS_THEME,
+  startup: STARTUP_THEME,
+  editorial: EDITORIAL_THEME,
+  ocean: OCEAN_THEME
+};
+
+// src/theme/engine.ts
+function resolveTheme(theme) {
+  if (typeof theme === "object") return { ...LIGHT_THEME, ...theme };
+  switch (theme) {
+    case "dark":
+      return DARK_THEME;
+    case "light":
+      return LIGHT_THEME;
+    case "auto":
+      return detectScheme() === "dark" ? DARK_THEME : LIGHT_THEME;
+    default: {
+      const preset = THEME_PRESETS[theme];
+      if (preset) return preset;
+      return LIGHT_THEME;
+    }
+  }
+}
+function applyTheme(el2, theme) {
+  const s = el2.style;
+  theme.colors.forEach((c, i) => s.setProperty(`${CSS_PREFIX}-color-${i + 1}`, c));
+  s.setProperty(`${CSS_PREFIX}-bg`, theme.background);
+  s.setProperty(`${CSS_PREFIX}-text`, theme.textColor);
+  s.setProperty(`${CSS_PREFIX}-text-muted`, theme.textMuted);
+  s.setProperty(`${CSS_PREFIX}-axis`, theme.axisColor);
+  s.setProperty(`${CSS_PREFIX}-grid`, theme.gridColor);
+  s.setProperty(`${CSS_PREFIX}-tooltip-bg`, theme.tooltipBackground);
+  s.setProperty(`${CSS_PREFIX}-tooltip-text`, theme.tooltipText);
+  s.setProperty(`${CSS_PREFIX}-tooltip-border`, theme.tooltipBorder);
+  s.setProperty(`${CSS_PREFIX}-font-family`, theme.fontFamily);
+  s.setProperty(`${CSS_PREFIX}-font-size`, `${theme.fontSize}px`);
+  s.setProperty(`${CSS_PREFIX}-font-size-sm`, `${theme.fontSizeSmall}px`);
+  s.setProperty(`${CSS_PREFIX}-font-size-lg`, `${theme.fontSizeLarge}px`);
+  s.setProperty(`${CSS_PREFIX}-radius`, `${theme.borderRadius}px`);
+  s.setProperty(`${CSS_PREFIX}-grid-width`, String(theme.gridWidth));
+  s.setProperty(`${CSS_PREFIX}-axis-width`, String(theme.axisWidth));
+  s.setProperty(`${CSS_PREFIX}-point-r`, String(theme.pointRadius));
+  s.setProperty(`${CSS_PREFIX}-line-w`, String(theme.lineWidth));
+}
+function watchScheme(cb) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {
+  };
+  const mql = window.matchMedia("(prefers-color-scheme: dark)");
+  const handler = (e) => cb(e.matches ? "dark" : "light");
+  mql.addEventListener("change", handler);
+  return () => mql.removeEventListener("change", handler);
+}
+function detectScheme() {
+  if (typeof window === "undefined" || !window.matchMedia) return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+// src/events/bus.ts
+function createEventBus() {
+  const listeners = /* @__PURE__ */ new Map();
+  return {
+    on(event, handler) {
+      let set = listeners.get(event);
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        listeners.set(event, set);
+      }
+      set.add(handler);
+      return () => {
+        set.delete(handler);
+        if (set.size === 0) listeners.delete(event);
+      };
+    },
+    emit(event, payload) {
+      const set = listeners.get(event);
+      if (set) for (const h of set) h(payload);
+    },
+    off(event, handler) {
+      const set = listeners.get(event);
+      if (!set) return;
+      set.delete(handler);
+      if (set.size === 0) listeners.delete(event);
+    },
+    destroy() {
+      listeners.clear();
+    }
+  };
+}
+
+// src/styles/chart.ts
+var CHART_CSS = (
+  /* css */
+  `
+/* ---- Base ---- */
+.chartts {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ---- Lines ---- */
+.chartts-line {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: stroke-width 0.2s ease, opacity 0.2s ease;
+}
+.chartts-series:hover .chartts-line {
+  stroke-width: 2.5;
+}
+
+/* Line draw animation */
+@keyframes chartts-draw {
+  from { stroke-dashoffset: var(--chartts-path-len); }
+  to { stroke-dashoffset: 0; }
+}
+.chartts-line[style*="--chartts-path-len"] {
+  animation: chartts-draw 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* ---- Area fills ---- */
+@keyframes chartts-fade-up {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.chartts-area {
+  animation: chartts-fade-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  transition: opacity 0.2s ease;
+}
+
+/* ---- Line glow ---- */
+.chartts-line-glow {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+/* ---- Point glow ---- */
+.chartts-point-glow, .chartts-dot-glow {
+  pointer-events: none;
+}
+
+/* ---- Data points ---- */
+@keyframes chartts-point-pop {
+  0% { opacity: 0; transform: scale(0); }
+  60% { transform: scale(1.3); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.chartts-point {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-point-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 30ms + 0.4s);
+  opacity: 0;
+  transition: opacity 0.15s ease, stroke-width 0.15s ease;
+  cursor: pointer;
+}
+.chartts-point:hover {
+  stroke-width: 3;
+  filter: brightness(1.15);
+}
+
+/* ---- Bars ---- */
+@keyframes chartts-bar-in {
+  from { opacity: 0; transform: scaleY(0.3); }
+  to { opacity: 1; transform: scaleY(1); }
+}
+.chartts-bar {
+  transform-origin: bottom center;
+  transform-box: fill-box;
+  animation: chartts-bar-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 40ms);
+  opacity: 0;
+  transition: filter 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-bar:hover {
+  filter: brightness(1.12) saturate(1.1);
+}
+.chartts-bar-horizontal {
+  transform-origin: left center;
+  animation-name: chartts-hbar-in;
+}
+@keyframes chartts-hbar-in {
+  from { opacity: 0; transform: scaleX(0.3); }
+  to { opacity: 1; transform: scaleX(1); }
+}
+
+/* ---- Pie / Donut slices ---- */
+@keyframes chartts-slice-in {
+  from { opacity: 0; transform: scale(0.85); }
+  to { opacity: 1; transform: scale(1); }
+}
+.chartts-slice {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-slice-in 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 60ms);
+  opacity: 0;
+  transition: filter 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+  pointer-events: all;
+}
+.chartts-slice:hover {
+  filter: brightness(1.1) saturate(1.15);
+  opacity: 0.92;
+}
+
+/* ---- Sparkline ---- */
+.chartts-sparkline-line {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.chartts-sparkline-line[style*="--chartts-path-len"] {
+  animation: chartts-draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* ---- Radar ---- */
+@keyframes chartts-radar-in {
+  from { opacity: 0; transform: scale(0.3); }
+  to { opacity: 1; transform: scale(1); }
+}
+.chartts-radar-area {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-radar-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: calc(var(--chartts-radar-i, 0) * 120ms);
+  opacity: 0;
+  transition: opacity 0.2s ease, fill-opacity 0.2s ease;
+}
+.chartts-radar-area:hover {
+  fill-opacity: 0.35;
+}
+.chartts-radar-point {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-point-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 30ms + 0.5s);
+  opacity: 0;
+  transition: r 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-radar-point:hover {
+  filter: brightness(1.15);
+}
+
+/* ---- Gauge ---- */
+@keyframes chartts-gauge-draw {
+  from { stroke-dashoffset: var(--chartts-path-len); }
+  to { stroke-dashoffset: 0; }
+}
+@keyframes chartts-gauge-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.chartts-gauge-fill[style*="--chartts-path-len"] {
+  animation: chartts-gauge-draw 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+.chartts-gauge-needle {
+  animation: chartts-gauge-fade 0.4s ease 0.6s forwards;
+  opacity: 0;
+}
+.chartts-gauge-needle-cap {
+  animation: chartts-gauge-fade 0.3s ease 0.65s forwards;
+  opacity: 0;
+}
+.chartts-gauge-tick {
+  opacity: 0.5;
+}
+
+/* ---- Funnel ---- */
+@keyframes chartts-funnel-slide {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.chartts-funnel-step {
+  animation: chartts-funnel-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 80ms);
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-funnel-step:hover {
+  filter: brightness(1.1);
+}
+
+/* ---- Waterfall ---- */
+@keyframes chartts-waterfall-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.chartts-waterfall-bar {
+  animation: chartts-waterfall-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-waterfall-bar:hover {
+  filter: brightness(1.12);
+}
+
+/* ---- Candlestick ---- */
+@keyframes chartts-candle-in {
+  from { opacity: 0; transform: scaleY(0.5); }
+  to { opacity: 1; transform: scaleY(1); }
+}
+.chartts-candle {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-candle-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-candle:hover {
+  filter: brightness(1.15);
+}
+.chartts-wick {
+  transition: opacity 0.15s ease;
+}
+
+/* ---- Bubble ---- */
+@keyframes chartts-bubble-pop {
+  0% { opacity: 0; transform: scale(0); }
+  70% { transform: scale(1.08); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.chartts-bubble {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-bubble-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  opacity: 0;
+  transition: filter 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-bubble:hover {
+  filter: brightness(1.1) saturate(1.1);
+}
+
+/* ---- Scatter dots ---- */
+.chartts-dot {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-point-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 30ms);
+  opacity: 0;
+  transition: filter 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-dot:hover {
+  filter: brightness(1.15);
+  opacity: 1;
+}
+
+/* ---- Heatmap ---- */
+@keyframes chartts-cell-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.chartts-heatmap-cell {
+  animation: chartts-cell-in 0.3s ease forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 15ms);
+  opacity: 0;
+  transition: filter 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-heatmap-cell:hover {
+  filter: brightness(1.2) saturate(1.2);
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+/* ---- Boxplot ---- */
+@keyframes chartts-boxplot-in {
+  from { opacity: 0; transform: scaleY(0.4); }
+  to { opacity: 1; transform: scaleY(1); }
+}
+.chartts-boxplot-box {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-boxplot-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 60ms);
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-boxplot-box:hover {
+  filter: brightness(1.15);
+}
+.chartts-boxplot-whisker, .chartts-boxplot-cap, .chartts-boxplot-median {
+  pointer-events: none;
+}
+
+/* ---- Treemap ---- */
+@keyframes chartts-cell-grow {
+  from { opacity: 0; transform: scale(0.85); }
+  to { opacity: 1; transform: scale(1); }
+}
+.chartts-treemap-cell {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-cell-grow 0.4s ease forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 40ms);
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+.chartts-treemap-cell:hover {
+  filter: brightness(1.15);
+}
+.chartts-treemap-label, .chartts-treemap-value {
+  pointer-events: none;
+}
+
+/* ---- Polar ---- */
+@keyframes chartts-wedge-in {
+  from { opacity: 0; transform: scale(0); }
+  to { opacity: 1; transform: scale(1); }
+}
+.chartts-polar-wedge {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-wedge-in 0.5s ease forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+.chartts-polar-wedge:hover {
+  filter: brightness(1.15);
+}
+.chartts-polar-label {
+  pointer-events: none;
+}
+.chartts-polar-grid {
+  pointer-events: none;
+}
+
+/* ---- Radial Bar ---- */
+@keyframes chartts-radialbar-in {
+  from { opacity: 0; stroke-dashoffset: var(--chartts-path-len, 200); }
+  to { opacity: 1; stroke-dashoffset: 0; }
+}
+.chartts-radialbar-arc {
+  animation: chartts-radialbar-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 100ms);
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-radialbar-arc:hover {
+  filter: brightness(1.15);
+}
+.chartts-radialbar-track {
+  pointer-events: none;
+}
+
+/* ---- Lollipop ---- */
+@keyframes chartts-lollipop-in {
+  from { opacity: 0; transform: scaleY(0.3); }
+  to { opacity: 1; transform: scaleY(1); }
+}
+.chartts-lollipop-stem {
+  transform-origin: bottom center;
+  transform-box: fill-box;
+  animation: chartts-lollipop-in 0.4s ease forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 40ms);
+}
+.chartts-lollipop-dot {
+  cursor: pointer;
+  transition: r 0.15s ease, filter 0.15s ease;
+}
+.chartts-lollipop-dot:hover {
+  filter: brightness(1.15);
+}
+
+/* ---- Bullet ---- */
+@keyframes chartts-bullet-in {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+.chartts-bullet-bar {
+  transform-origin: left center;
+  transform-box: fill-box;
+  animation: chartts-bullet-in 0.5s ease forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 80ms);
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+.chartts-bullet-bar:hover {
+  filter: brightness(1.15);
+}
+.chartts-bullet-range, .chartts-bullet-target, .chartts-bullet-label {
+  pointer-events: none;
+}
+
+/* ---- Dumbbell ---- */
+@keyframes chartts-dumbbell-in {
+  0% { opacity: 0; transform: scale(0); }
+  70% { transform: scale(1.15); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.chartts-dumbbell-dot {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-dumbbell-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 60ms);
+  opacity: 0;
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+.chartts-dumbbell-dot:hover {
+  filter: brightness(1.15);
+}
+.chartts-dumbbell-connector, .chartts-dumbbell-label {
+  pointer-events: none;
+}
+
+/* ---- Calendar ---- */
+.chartts-calendar-cell {
+  cursor: pointer;
+  transition: filter 0.15s ease;
+  animation: chartts-cell-in 0.3s ease forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 8ms);
+}
+.chartts-calendar-cell:hover {
+  filter: brightness(1.2);
+}
+.chartts-calendar-daylabel {
+  pointer-events: none;
+}
+
+/* ---- Sankey ---- */
+@keyframes chartts-sankey-link-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.chartts-sankey-link {
+  animation: chartts-sankey-link-in 0.5s ease forwards;
+  opacity: 0;
+  transition: fill-opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-sankey-link:hover {
+  fill-opacity: 0.5 !important;
+}
+.chartts-sankey-node {
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+.chartts-sankey-node:hover {
+  filter: brightness(1.15);
+}
+.chartts-sankey-label {
+  pointer-events: none;
+}
+
+/* ---- Combo ---- */
+.chartts-combo-line {
+  pointer-events: none;
+}
+.chartts-combo-point {
+  cursor: pointer;
+  transition: r 0.15s ease;
+}
+
+/* ---- Sunburst ---- */
+@keyframes chartts-sunburst-in {
+  from { opacity: 0; transform: scale(0.85); }
+  to { opacity: 1; transform: scale(1); }
+}
+.chartts-sunburst-sector {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-sunburst-in 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 30ms);
+  opacity: 0;
+  transition: filter 0.15s ease, fill-opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-sunburst-sector:hover {
+  filter: brightness(1.15);
+  fill-opacity: 0.95 !important;
+}
+.chartts-sunburst-label {
+  pointer-events: none;
+}
+
+/* ---- Tree ---- */
+@keyframes chartts-tree-node-in {
+  0% { opacity: 0; transform: scale(0); }
+  70% { transform: scale(1.2); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.chartts-tree-node {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-tree-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  opacity: 0;
+  transition: filter 0.15s ease, r 0.15s ease;
+  cursor: pointer;
+}
+.chartts-tree-node:hover {
+  filter: brightness(1.15);
+}
+.chartts-tree-edge {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.chartts-tree-label {
+  pointer-events: none;
+}
+
+/* ---- Graph ---- */
+@keyframes chartts-graph-node-in {
+  0% { opacity: 0; transform: scale(0); }
+  70% { transform: scale(1.15); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.chartts-graph-node {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-graph-node-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 40ms);
+  opacity: 0;
+  transition: filter 0.15s ease, r 0.15s ease;
+  cursor: pointer;
+}
+.chartts-graph-node:hover {
+  filter: brightness(1.15) saturate(1.2);
+}
+.chartts-graph-edge {
+  pointer-events: none;
+  animation: chartts-sankey-link-in 0.5s ease forwards;
+  opacity: 0;
+}
+.chartts-graph-label {
+  pointer-events: none;
+}
+
+/* ---- Parallel ---- */
+@keyframes chartts-parallel-in {
+  from { opacity: 0; stroke-dashoffset: var(--chartts-path-len, 1000); }
+  to { opacity: 1; stroke-dashoffset: 0; }
+}
+.chartts-parallel-line {
+  transition: opacity 0.2s ease, stroke-width 0.2s ease;
+  cursor: pointer;
+}
+.chartts-parallel-line:hover {
+  opacity: 1 !important;
+  stroke-width: 3;
+}
+.chartts-parallel-axis {
+  pointer-events: none;
+}
+.chartts-parallel-label, .chartts-parallel-tick {
+  pointer-events: none;
+}
+
+/* ---- ThemeRiver ---- */
+@keyframes chartts-stream-in {
+  from { opacity: 0; transform: scaleY(0.3); }
+  to { opacity: 1; transform: scaleY(1); }
+}
+.chartts-themeriver-stream {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-stream-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 80ms);
+  opacity: 0;
+  transition: fill-opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-themeriver-stream:hover {
+  fill-opacity: 0.9 !important;
+}
+.chartts-themeriver-label {
+  pointer-events: none;
+}
+
+/* ---- PictorialBar ---- */
+@keyframes chartts-pictorial-in {
+  0% { opacity: 0; transform: scale(0); }
+  70% { transform: scale(1.1); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.chartts-pictorialbar-symbol {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-pictorial-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 20ms);
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-pictorialbar-symbol:hover {
+  filter: brightness(1.15);
+}
+.chartts-pictorialbar-value, .chartts-pictorialbar-label {
+  pointer-events: none;
+}
+
+/* ---- Chord ---- */
+@keyframes chartts-chord-arc-in {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+.chartts-chord-arc {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: chartts-chord-arc-in 0.5s ease forwards;
+  animation-delay: calc(var(--chartts-i, 0) * 60ms);
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-chord-arc:hover {
+  filter: brightness(1.15);
+}
+@keyframes chartts-chord-ribbon-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.chartts-chord-ribbon {
+  animation: chartts-chord-ribbon-in 0.6s ease 0.3s forwards;
+  opacity: 0;
+  transition: fill-opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-chord-ribbon:hover {
+  fill-opacity: 0.55 !important;
+}
+.chartts-chord-label {
+  pointer-events: none;
+}
+
+/* ---- States (empty / loading / error) ---- */
+.chartts-state {
+  opacity: 1;
+}
+@keyframes chartts-shimmer {
+  0% { opacity: 0.3; }
+  50% { opacity: 0.7; }
+  100% { opacity: 0.3; }
+}
+.chartts-skeleton-bar {
+  animation: chartts-shimmer 1.5s ease-in-out infinite;
+  animation-delay: calc(var(--chartts-i, 0) * 150ms);
+}
+
+/* ---- Grid ---- */
+.chartts-grid-h, .chartts-grid-v {
+  opacity: 0.6;
+}
+
+/* ---- GEO/Map ---- */
+@keyframes chartts-geo-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.chartts-geo-region {
+  animation: chartts-geo-in 0.4s ease calc(var(--chartts-i, 0) * 30ms) forwards;
+  opacity: 0;
+  transition: fill-opacity 0.2s ease, filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-geo-region:hover {
+  filter: brightness(1.1);
+  fill-opacity: 0.95 !important;
+}
+.chartts-geo-scatter {
+  transition: r 0.15s ease;
+  cursor: pointer;
+}
+
+/* ---- Lines (flow) ---- */
+@keyframes chartts-lines-flow-in {
+  from { stroke-dashoffset: 300; opacity: 0; }
+  to { stroke-dashoffset: 0; opacity: 1; }
+}
+.chartts-lines-flow {
+  stroke-dasharray: 300;
+  animation: chartts-lines-flow-in 0.8s ease calc(var(--chartts-i, 0) * 80ms) forwards;
+  opacity: 0;
+  transition: stroke-width 0.2s ease, stroke-opacity 0.2s ease;
+  cursor: pointer;
+}
+.chartts-lines-flow:hover {
+  stroke-opacity: 0.9;
+  stroke-width: 4;
+}
+.chartts-lines-node {
+  transition: r 0.15s ease;
+  cursor: pointer;
+}
+
+/* ---- Matrix ---- */
+@keyframes chartts-matrix-in {
+  from { opacity: 0; transform: scale(0.8); }
+  to { opacity: 1; transform: scale(1); }
+}
+.chartts-matrix-cell {
+  animation: chartts-matrix-in 0.3s ease calc(var(--chartts-i, 0) * 15ms) forwards;
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-matrix-cell:hover {
+  filter: brightness(1.15);
+}
+
+/* ---- OHLC ---- */
+@keyframes chartts-ohlc-in {
+  from { opacity: 0; transform: scaleY(0.5); }
+  to { opacity: 1; transform: scaleY(1); }
+}
+.chartts-ohlc-stem, .chartts-ohlc-tick {
+  animation: chartts-ohlc-in 0.3s ease calc(var(--chartts-i, 0) * 20ms) forwards;
+  opacity: 0;
+  transition: stroke-width 0.15s ease;
+}
+.chartts-ohlc-stem:hover, .chartts-ohlc-tick:hover {
+  stroke-width: 2.5;
+}
+
+/* ---- Volume ---- */
+@keyframes chartts-volume-in {
+  from { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
+  to { opacity: 1; transform: scaleY(1); }
+}
+.chartts-volume-bar {
+  animation: chartts-volume-in 0.3s ease calc(var(--chartts-i, 0) * 20ms) forwards;
+  opacity: 0;
+  transition: filter 0.15s ease, fill-opacity 0.15s ease;
+  cursor: pointer;
+}
+.chartts-volume-bar:hover {
+  filter: brightness(1.1);
+  fill-opacity: 1 !important;
+}
+
+/* ---- Range / Band ---- */
+@keyframes chartts-range-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.chartts-range-band {
+  animation: chartts-range-in 0.5s ease forwards;
+  opacity: 0;
+}
+.chartts-range-center {
+  animation: chartts-range-in 0.6s ease 0.1s forwards;
+  opacity: 0;
+}
+.chartts-range-bound {
+  animation: chartts-range-in 0.5s ease 0.05s forwards;
+  opacity: 0;
+}
+
+/* ---- Baseline ---- */
+@keyframes chartts-baseline-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.chartts-baseline-pos, .chartts-baseline-neg {
+  animation: chartts-baseline-in 0.5s ease forwards;
+  opacity: 0;
+}
+.chartts-baseline-line {
+  animation: chartts-baseline-in 0.6s ease 0.1s forwards;
+  opacity: 0;
+}
+.chartts-baseline-ref {
+  animation: chartts-baseline-in 0.3s ease forwards;
+  opacity: 0;
+}
+
+/* ---- Kagi ---- */
+@keyframes chartts-kagi-in {
+  from { stroke-dashoffset: 200; opacity: 0; }
+  to { stroke-dashoffset: 0; opacity: 1; }
+}
+.chartts-kagi-line {
+  stroke-dasharray: 200;
+  animation: chartts-kagi-in 0.6s ease calc(var(--chartts-i, 0) * 40ms) forwards;
+  opacity: 0;
+  transition: stroke-width 0.15s ease;
+}
+
+/* ---- Renko ---- */
+@keyframes chartts-renko-in {
+  from { opacity: 0; transform: scale(0.8); }
+  to { opacity: 1; transform: scale(1); }
+}
+.chartts-renko-brick {
+  animation: chartts-renko-in 0.3s ease calc(var(--chartts-i, 0) * 25ms) forwards;
+  opacity: 0;
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+.chartts-renko-brick:hover {
+  filter: brightness(1.15);
+}
+
+/* ---- DataZoom ---- */
+.chartts-datazoom-handle {
+  cursor: ew-resize;
+  transition: fill 0.15s ease;
+}
+.chartts-datazoom-handle:hover {
+  fill: #374151;
+}
+.chartts-datazoom-selected {
+  cursor: grab;
+}
+
+/* ---- Text ---- */
+.chartts-x-label, .chartts-y-label,
+.chartts-x-axis-label, .chartts-y-axis-label,
+.chartts-legend text, .chartts-slice-label {
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ---- Legend ---- */
+.chartts-legend-item {
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+.chartts-legend-item:hover {
+  opacity: 0.7;
+}
+
+/* ---- Reduced motion ---- */
+@media (prefers-reduced-motion: reduce) {
+  .chartts-line, .chartts-area, .chartts-point,
+  .chartts-bar, .chartts-slice, .chartts-bubble,
+  .chartts-funnel-step, .chartts-waterfall-bar,
+  .chartts-sparkline-line, .chartts-gauge-fill,
+  .chartts-gauge-needle, .chartts-gauge-needle-cap,
+  .chartts-radar-area, .chartts-radar-point,
+  .chartts-treemap-cell, .chartts-polar-wedge,
+  .chartts-lollipop-stem, .chartts-bullet-bar,
+  .chartts-dumbbell-dot, .chartts-boxplot-box,
+  .chartts-radialbar-arc, .chartts-sankey-link,
+  .chartts-calendar-cell,
+  .chartts-sunburst-sector, .chartts-tree-node,
+  .chartts-graph-node, .chartts-graph-edge,
+  .chartts-themeriver-stream, .chartts-pictorialbar-symbol,
+  .chartts-chord-arc, .chartts-chord-ribbon,
+  .chartts-geo-region, .chartts-lines-flow,
+  .chartts-lines-node, .chartts-matrix-cell,
+  .chartts-ohlc-stem, .chartts-ohlc-tick,
+  .chartts-volume-bar, .chartts-range-band,
+  .chartts-baseline-pos, .chartts-baseline-neg,
+  .chartts-baseline-line, .chartts-kagi-line,
+  .chartts-renko-brick {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  .chartts-gauge-fill {
+    stroke-dashoffset: 0 !important;
+  }
+}
+`
+);
+
+// src/render/svg.ts
+var NS = "http://www.w3.org/2000/svg";
+function createSVGRenderer() {
+  return {
+    createRoot(target, width, height, attrs) {
+      const svg = document.createElementNS(NS, "svg");
+      svg.setAttribute("xmlns", NS);
+      svg.setAttribute("width", "100%");
+      svg.setAttribute("height", "100%");
+      svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+      svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+      svg.classList.add("chartts");
+      if (attrs) applyAttrs(svg, attrs);
+      const styleEl = document.createElementNS(NS, "style");
+      styleEl.textContent = CHART_CSS;
+      svg.appendChild(styleEl);
+      target.appendChild(svg);
+      return { element: svg };
+    },
+    render(root, nodes) {
+      const styleEl = root.element.querySelector("style");
+      clear(root.element);
+      if (styleEl) root.element.appendChild(styleEl);
+      appendNodes(root.element, nodes);
+      applyEntryAnimations(root.element);
+    },
+    update(root, nodes) {
+      const styleEl = root.element.querySelector("style");
+      clear(root.element);
+      if (styleEl) root.element.appendChild(styleEl);
+      appendNodes(root.element, nodes);
+      applyEntryAnimations(root.element);
+    },
+    clear(root) {
+      clear(root.element);
+    },
+    destroy(root) {
+      root.element.remove();
+    }
+  };
+}
+function clear(el2) {
+  while (el2.firstChild) el2.removeChild(el2.firstChild);
+}
+function appendNodes(parent, nodes) {
+  for (const node of nodes) {
+    const el2 = createNode(node);
+    if (el2) parent.appendChild(el2);
+  }
+}
+function createNode(node) {
+  switch (node.type) {
+    case "group": {
+      const g = el("g");
+      if (node.attrs) applyAttrs(g, node.attrs);
+      for (const child of node.children) {
+        const c = createNode(child);
+        if (c) g.appendChild(c);
+      }
+      return g;
+    }
+    case "path": {
+      const p = el("path");
+      p.setAttribute("d", node.d);
+      if (!node.attrs?.fill) p.setAttribute("fill", "none");
+      if (node.attrs) applyAttrs(p, node.attrs);
+      return p;
+    }
+    case "rect": {
+      const r = el("rect");
+      setNum(r, "x", node.x);
+      setNum(r, "y", node.y);
+      setNum(r, "width", node.width);
+      setNum(r, "height", node.height);
+      if (node.rx != null) setNum(r, "rx", node.rx);
+      if (node.ry != null) setNum(r, "ry", node.ry);
+      if (node.attrs) applyAttrs(r, node.attrs);
+      return r;
+    }
+    case "circle": {
+      const c = el("circle");
+      setNum(c, "cx", node.cx);
+      setNum(c, "cy", node.cy);
+      setNum(c, "r", node.r);
+      if (node.attrs) applyAttrs(c, node.attrs);
+      return c;
+    }
+    case "line": {
+      const l = el("line");
+      setNum(l, "x1", node.x1);
+      setNum(l, "y1", node.y1);
+      setNum(l, "x2", node.x2);
+      setNum(l, "y2", node.y2);
+      if (node.attrs) applyAttrs(l, node.attrs);
+      return l;
+    }
+    case "text": {
+      const t = el("text");
+      setNum(t, "x", node.x);
+      setNum(t, "y", node.y);
+      t.textContent = node.content;
+      if (node.attrs) {
+        const a = node.attrs;
+        if ("textAnchor" in a && a.textAnchor) t.setAttribute("text-anchor", a.textAnchor);
+        if ("dominantBaseline" in a && a.dominantBaseline) t.setAttribute("dominant-baseline", a.dominantBaseline);
+        if ("fontSize" in a && a.fontSize) t.setAttribute("font-size", String(a.fontSize));
+        if ("fontFamily" in a && a.fontFamily) t.setAttribute("font-family", a.fontFamily);
+        if ("fontWeight" in a && a.fontWeight) t.setAttribute("font-weight", String(a.fontWeight));
+        applyAttrs(t, a);
+      }
+      return t;
+    }
+    case "clipPath": {
+      const cp = el("clipPath");
+      cp.setAttribute("id", node.id);
+      for (const child of node.children) {
+        const c = createNode(child);
+        if (c) cp.appendChild(c);
+      }
+      return cp;
+    }
+    case "defs": {
+      const d = el("defs");
+      for (const child of node.children) {
+        const c = createNode(child);
+        if (c) d.appendChild(c);
+      }
+      return d;
+    }
+    default:
+      return null;
+  }
+}
+function el(tag) {
+  return document.createElementNS(NS, tag);
+}
+function setNum(el2, attr, val) {
+  el2.setAttribute(attr, String(val));
+}
+function applyAttrs(el2, attrs) {
+  const ATTR_MAP2 = {
+    class: "class",
+    style: "style",
+    stroke: "stroke",
+    strokeWidth: "stroke-width",
+    strokeDasharray: "stroke-dasharray",
+    fill: "fill",
+    fillOpacity: "fill-opacity",
+    opacity: "opacity",
+    transform: "transform",
+    role: "role",
+    ariaLabel: "aria-label",
+    tabindex: "tabindex"
+  };
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value == null) continue;
+    if (["textAnchor", "dominantBaseline", "fontSize", "fontFamily", "fontWeight", "rx", "ry"].includes(key)) continue;
+    if (key === "clipPath") {
+      el2.setAttribute("clip-path", `url(#${value})`);
+    } else if (key.startsWith("data-")) {
+      el2.setAttribute(key, String(value));
+    } else if (ATTR_MAP2[key]) {
+      el2.setAttribute(ATTR_MAP2[key], String(value));
+    }
+  }
+}
+function applyEntryAnimations(svg) {
+  svg.querySelectorAll(".chartts-line, .chartts-sparkline-line").forEach((p) => {
+    try {
+      const existing = p.getAttribute("stroke-dasharray");
+      if (existing && existing.includes(",")) return;
+      const len = p.getTotalLength();
+      p.style.setProperty("--chartts-path-len", String(len));
+      p.setAttribute("stroke-dasharray", String(len));
+      p.setAttribute("stroke-dashoffset", String(len));
+    } catch {
+    }
+  });
+  const STAGGER_SELECTORS = [
+    ".chartts-point",
+    ".chartts-bar",
+    ".chartts-slice",
+    ".chartts-bubble",
+    ".chartts-funnel-step",
+    ".chartts-waterfall-bar",
+    ".chartts-candle",
+    ".chartts-dot",
+    ".chartts-radar-point",
+    ".chartts-heatmap-cell",
+    ".chartts-treemap-cell",
+    ".chartts-polar-wedge",
+    ".chartts-lollipop-stem",
+    ".chartts-bullet-bar",
+    ".chartts-calendar-cell",
+    ".chartts-radialbar-arc",
+    ".chartts-dumbbell-dot",
+    ".chartts-boxplot-box",
+    ".chartts-sankey-link",
+    ".chartts-sunburst-sector",
+    ".chartts-tree-node",
+    ".chartts-graph-node",
+    ".chartts-themeriver-stream",
+    ".chartts-pictorialbar-symbol",
+    ".chartts-chord-arc",
+    ".chartts-chord-ribbon",
+    ".chartts-geo-region",
+    ".chartts-lines-flow",
+    ".chartts-lines-node",
+    ".chartts-matrix-cell",
+    ".chartts-ohlc-stem",
+    ".chartts-volume-bar",
+    ".chartts-kagi-line",
+    ".chartts-renko-brick"
+  ];
+  for (const selector of STAGGER_SELECTORS) {
+    svg.querySelectorAll(selector).forEach((el2, i) => {
+      el2.style.setProperty("--chartts-i", String(i));
+    });
+  }
+  svg.querySelectorAll(".chartts-gauge-fill").forEach((p) => {
+    try {
+      const len = p.getTotalLength();
+      p.style.setProperty("--chartts-path-len", String(len));
+      p.setAttribute("stroke-dasharray", String(len));
+      p.setAttribute("stroke-dashoffset", String(len));
+    } catch {
+    }
+  });
+  svg.querySelectorAll(".chartts-radar-area").forEach((el2, i) => {
+    el2.style.setProperty("--chartts-radar-i", String(i));
+  });
+}
+
+// src/render/canvas.ts
+function resolveColor(value, fallback = "#000") {
+  if (!value) return fallback;
+  if (value === "none" || value === "transparent") return "transparent";
+  if (value.startsWith("url(")) return value;
+  const match = value.match(/var\([^,]+,\s*([^)]+)\)/);
+  return match ? match[1].trim() : value;
+}
+function hexToRgba(hex, alpha) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h;
+  const r = parseInt(full.substring(0, 2), 16);
+  const g = parseInt(full.substring(2, 4), 16);
+  const b = parseInt(full.substring(4, 6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function resolveGradientRef(id, colors, ctx, x, y, _w, h) {
+  const areaMatch = id.match(/^chartts-area-(\d+)$/);
+  if (areaMatch) {
+    const color = resolveColor(colors[parseInt(areaMatch[1])]);
+    const grad = ctx.createLinearGradient(x, y, x, y + h);
+    grad.addColorStop(0, hexToRgba(color, 0.35));
+    grad.addColorStop(1, hexToRgba(color, 0.02));
+    return grad;
+  }
+  const barMatch = id.match(/^chartts-bar-(\d+)$/);
+  if (barMatch) {
+    const color = resolveColor(colors[parseInt(barMatch[1])]);
+    const grad = ctx.createLinearGradient(x, y, x, y + h);
+    grad.addColorStop(0, hexToRgba(color, 1));
+    grad.addColorStop(1, hexToRgba(color, 0.75));
+    return grad;
+  }
+  const pieMatch = id.match(/^chartts-pie-(\d+)$/);
+  if (pieMatch) {
+    const color = resolveColor(colors[parseInt(pieMatch[1])]);
+    return color;
+  }
+  const glowMatch = id.match(/^chartts-pglow-(\d+)$/);
+  if (glowMatch) {
+    const color = resolveColor(colors[parseInt(glowMatch[1])]);
+    return hexToRgba(color, 0.4);
+  }
+  return null;
+}
+function parseUrlRef(value) {
+  const match = value.match(/url\(#([^)]+)\)/);
+  return match ? match[1] : null;
+}
+function mapTextAlign(anchor) {
+  switch (anchor) {
+    case "middle":
+      return "center";
+    case "end":
+      return "right";
+    default:
+      return "left";
+  }
+}
+function mapTextBaseline(baseline) {
+  switch (baseline) {
+    case "middle":
+    case "central":
+      return "middle";
+    case "hanging":
+      return "hanging";
+    default:
+      return "alphabetic";
+  }
+}
+function createCanvasRenderer(theme) {
+  const colors = theme.colors;
+  let clipPaths = /* @__PURE__ */ new Map();
+  return {
+    createRoot(target, width, height, attrs) {
+      const canvas = document.createElement("canvas");
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      canvas.style.display = "block";
+      if (attrs?.class) canvas.className = attrs.class;
+      if (attrs?.role) canvas.setAttribute("role", attrs.role);
+      if (attrs?.ariaLabel) canvas.setAttribute("aria-label", attrs.ariaLabel);
+      const ctx2d = canvas.getContext("2d", { alpha: false });
+      ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
+      target.appendChild(canvas);
+      const root = { element: canvas };
+      root.ctx = ctx2d;
+      root.width = width;
+      root.height = height;
+      root.dpr = dpr;
+      return root;
+    },
+    render(root, nodes) {
+      const cr = root;
+      const canvas = cr.element;
+      const dpr = window.devicePixelRatio || 1;
+      cr.width = canvas.width / dpr;
+      cr.height = canvas.height / dpr;
+      cr.dpr = dpr;
+      clipPaths = /* @__PURE__ */ new Map();
+      const ctx = cr.ctx;
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = "high";
+      ctx.save();
+      ctx.fillStyle = resolveColor(theme.background, "#ffffff");
+      ctx.fillRect(0, 0, cr.width, cr.height);
+      ctx.restore();
+      collectClipPaths(nodes);
+      drawNodes(cr.ctx, nodes, cr.width, cr.height);
+    },
+    update(root, nodes) {
+      this.render(root, nodes);
+    },
+    clear(root) {
+      const cr = root;
+      cr.ctx.clearRect(0, 0, cr.width, cr.height);
+    },
+    destroy(root) {
+      root.element.remove();
+    }
+  };
+  function collectClipPaths(nodes) {
+    for (const node of nodes) {
+      if (node.type === "defs") {
+        for (const child of node.children) {
+          if (child.type === "clipPath") {
+            const path2 = new Path2D();
+            for (const cp of child.children) {
+              if (cp.type === "rect") {
+                path2.rect(cp.x, cp.y, cp.width, cp.height);
+              }
+            }
+            clipPaths.set(child.id, path2);
+          }
+        }
+      } else if (node.type === "group") {
+        collectClipPaths(node.children);
+      }
+    }
+  }
+  function drawNodes(ctx, nodes, cw, ch) {
+    for (const node of nodes) {
+      drawNode(ctx, node, cw, ch);
+    }
+  }
+  function drawNode(ctx, node, cw, ch) {
+    switch (node.type) {
+      case "group": {
+        ctx.save();
+        applyClip(ctx, node.attrs);
+        applyTransform(ctx, node.attrs);
+        applyOpacity(ctx, node.attrs);
+        drawNodes(ctx, node.children, cw, ch);
+        ctx.restore();
+        break;
+      }
+      case "path": {
+        const fill = resolveFill(ctx, node.attrs?.fill, 0, 0, cw, ch);
+        const stroke = resolveColor(node.attrs?.stroke);
+        const strokeWidth = node.attrs?.strokeWidth ?? 0;
+        const opacity = node.attrs?.opacity ?? 1;
+        const fillOpacity = node.attrs?.fillOpacity ?? 1;
+        const strokeOpacity = node.attrs?.strokeOpacity ?? 1;
+        ctx.save();
+        applyClip(ctx, node.attrs);
+        ctx.globalAlpha = opacity;
+        applyLineCaps(ctx, node.attrs);
+        const p = new Path2D(node.d);
+        if (fill && fill !== "transparent" && fill !== "none" && node.attrs?.fill) {
+          ctx.save();
+          ctx.globalAlpha = opacity * fillOpacity;
+          ctx.fillStyle = typeof fill === "object" ? fill : fill;
+          ctx.fill(p);
+          ctx.restore();
+        }
+        if (stroke && stroke !== "transparent" && stroke !== "none" && strokeWidth > 0) {
+          ctx.save();
+          ctx.globalAlpha = opacity * strokeOpacity;
+          ctx.strokeStyle = typeof stroke === "string" ? stroke : "#000";
+          ctx.lineWidth = strokeWidth;
+          applyDash(ctx, node.attrs?.strokeDasharray);
+          ctx.stroke(p);
+          ctx.restore();
+        }
+        ctx.restore();
+        break;
+      }
+      case "rect": {
+        const fill = resolveFill(ctx, node.attrs?.fill, node.x, node.y, node.width, node.height);
+        const stroke = resolveColor(node.attrs?.stroke);
+        const strokeWidth = node.attrs?.strokeWidth ?? 0;
+        const opacity = node.attrs?.opacity ?? 1;
+        const fillOpacity = node.attrs?.fillOpacity ?? 1;
+        const strokeOpacity = node.attrs?.strokeOpacity ?? 1;
+        const rx = node.rx ?? 0;
+        ctx.save();
+        applyClip(ctx, node.attrs);
+        ctx.globalAlpha = opacity;
+        if (fill && fill !== "transparent" && fill !== "none") {
+          ctx.save();
+          ctx.globalAlpha = opacity * fillOpacity;
+          ctx.fillStyle = typeof fill === "object" ? fill : fill;
+          if (rx > 0) {
+            roundRect(ctx, node.x, node.y, node.width, node.height, rx);
+            ctx.fill();
+          } else {
+            ctx.fillRect(node.x, node.y, node.width, node.height);
+          }
+          ctx.restore();
+        }
+        if (stroke && stroke !== "transparent" && stroke !== "none" && strokeWidth > 0) {
+          ctx.save();
+          ctx.globalAlpha = opacity * strokeOpacity;
+          ctx.strokeStyle = typeof stroke === "string" ? stroke : "#000";
+          ctx.lineWidth = strokeWidth;
+          applyDash(ctx, node.attrs?.strokeDasharray);
+          if (rx > 0) {
+            roundRect(ctx, node.x, node.y, node.width, node.height, rx);
+            ctx.stroke();
+          } else {
+            ctx.strokeRect(node.x, node.y, node.width, node.height);
+          }
+          ctx.restore();
+        }
+        ctx.restore();
+        break;
+      }
+      case "circle": {
+        const fill = resolveFill(ctx, node.attrs?.fill, node.cx - node.r, node.cy - node.r, node.r * 2, node.r * 2);
+        const stroke = resolveColor(node.attrs?.stroke);
+        const strokeWidth = node.attrs?.strokeWidth ?? 0;
+        const opacity = node.attrs?.opacity ?? 1;
+        const fillOpacity = node.attrs?.fillOpacity ?? 1;
+        const strokeOpacity = node.attrs?.strokeOpacity ?? 1;
+        ctx.save();
+        ctx.globalAlpha = opacity;
+        ctx.beginPath();
+        ctx.arc(node.cx, node.cy, node.r, 0, Math.PI * 2);
+        if (fill && fill !== "transparent" && fill !== "none") {
+          ctx.save();
+          ctx.globalAlpha = opacity * fillOpacity;
+          ctx.fillStyle = typeof fill === "object" ? fill : fill;
+          ctx.fill();
+          ctx.restore();
+        }
+        if (stroke && stroke !== "transparent" && stroke !== "none" && strokeWidth > 0) {
+          ctx.save();
+          ctx.globalAlpha = opacity * strokeOpacity;
+          ctx.strokeStyle = typeof stroke === "string" ? stroke : "#000";
+          ctx.lineWidth = strokeWidth;
+          ctx.stroke();
+          ctx.restore();
+        }
+        ctx.restore();
+        break;
+      }
+      case "line": {
+        const stroke = resolveColor(node.attrs?.stroke, "#000");
+        const strokeWidth = node.attrs?.strokeWidth ?? 1;
+        const opacity = node.attrs?.opacity ?? 1;
+        const strokeOpacity = node.attrs?.strokeOpacity ?? 1;
+        if (stroke === "transparent" || stroke === "none") break;
+        ctx.save();
+        ctx.globalAlpha = opacity * strokeOpacity;
+        ctx.strokeStyle = stroke;
+        ctx.lineWidth = strokeWidth;
+        applyLineCaps(ctx, node.attrs);
+        applyDash(ctx, node.attrs?.strokeDasharray);
+        const offset = strokeWidth % 2 === 1 ? 0.5 : 0;
+        ctx.beginPath();
+        ctx.moveTo(snapPixel(node.x1, offset), snapPixel(node.y1, offset));
+        ctx.lineTo(snapPixel(node.x2, offset), snapPixel(node.y2, offset));
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.restore();
+        break;
+      }
+      case "text": {
+        const fill = resolveColor(node.attrs?.fill, theme.textColor);
+        const resolvedFill = resolveColor(fill);
+        const opacity = node.attrs?.opacity ?? 1;
+        const extra = node.attrs;
+        const fontSize = extra?.fontSize ?? theme.fontSize;
+        const fontFamily = extra?.fontFamily ?? theme.fontFamily;
+        const fontWeight = extra?.fontWeight ?? "normal";
+        const textAnchor = extra?.textAnchor;
+        const baseline = extra?.dominantBaseline;
+        ctx.save();
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = resolvedFill;
+        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        ctx.textAlign = mapTextAlign(textAnchor);
+        ctx.textBaseline = mapTextBaseline(baseline);
+        applyTransform(ctx, node.attrs);
+        ctx.fillText(node.content, node.x, node.y);
+        ctx.restore();
+        break;
+      }
+    }
+  }
+  function resolveFill(ctx, fill, x, y, w, h) {
+    if (!fill) return "transparent";
+    const urlId = parseUrlRef(fill);
+    if (urlId) {
+      const grad = resolveGradientRef(urlId, colors, ctx, x, y, w, h);
+      return grad ?? resolveColor(fill);
+    }
+    return resolveColor(fill);
+  }
+  function applyClip(ctx, attrs) {
+    if (!attrs?.clipPath) return;
+    const clipId = attrs.clipPath;
+    const path2 = clipPaths.get(clipId);
+    if (path2) {
+      ctx.clip(path2);
+    }
+  }
+  function applyTransform(ctx, attrs) {
+    if (!attrs?.transform) return;
+    const t = attrs.transform;
+    const translateMatch = t.match(/translate\(\s*([^,)]+)[,\s]+([^)]+)\)/);
+    if (translateMatch) {
+      ctx.translate(parseFloat(translateMatch[1]), parseFloat(translateMatch[2]));
+    }
+    const rotateMatch = t.match(/rotate\(\s*([^,)]+)(?:[,\s]+([^,)]+)[,\s]+([^)]+))?\)/);
+    if (rotateMatch) {
+      const angle = parseFloat(rotateMatch[1]) * Math.PI / 180;
+      if (rotateMatch[2] && rotateMatch[3]) {
+        const cx = parseFloat(rotateMatch[2]);
+        const cy = parseFloat(rotateMatch[3]);
+        ctx.translate(cx, cy);
+        ctx.rotate(angle);
+        ctx.translate(-cx, -cy);
+      } else {
+        ctx.rotate(angle);
+      }
+    }
+    const scaleMatch = t.match(/scale\(\s*([^,)]+)(?:[,\s]+([^)]+))?\)/);
+    if (scaleMatch) {
+      const sx = parseFloat(scaleMatch[1]);
+      const sy = scaleMatch[2] ? parseFloat(scaleMatch[2]) : sx;
+      ctx.scale(sx, sy);
+    }
+  }
+  function applyOpacity(ctx, attrs) {
+    if (attrs?.opacity != null) {
+      ctx.globalAlpha *= attrs.opacity;
+    }
+  }
+  function applyLineCaps(ctx, attrs) {
+    if (attrs?.strokeLinecap) ctx.lineCap = attrs.strokeLinecap;
+    if (attrs?.strokeLinejoin) ctx.lineJoin = attrs.strokeLinejoin;
+  }
+  function applyDash(ctx, dasharray) {
+    if (!dasharray) return;
+    const segments = dasharray.split(/[\s,]+/).map(Number).filter((n2) => !isNaN(n2));
+    if (segments.length > 0) {
+      ctx.setLineDash(segments);
+    }
+  }
+  function snapPixel(v, offset) {
+    return Math.round(v) + offset;
+  }
+  function roundRect(ctx, x, y, w, h, r) {
+    r = Math.min(r, w / 2, h / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.arcTo(x + w, y, x + w, y + r, r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+    ctx.lineTo(x + r, y + h);
+    ctx.arcTo(x, y + h, x, y + h - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+    ctx.closePath();
+  }
+}
+
+// src/render/webgl.ts
+var LINE_VERT = `
+attribute vec2 a_position;
+attribute vec4 a_color;
+uniform vec2 u_resolution;
+varying vec4 v_color;
+void main() {
+  vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  v_color = a_color;
+}
+`;
+var LINE_FRAG = `
+precision mediump float;
+varying vec4 v_color;
+void main() {
+  gl_FragColor = v_color;
+}
+`;
+var POINT_VERT = `
+attribute vec2 a_position;
+attribute float a_radius;
+attribute vec4 a_color;
+uniform vec2 u_resolution;
+varying vec4 v_color;
+void main() {
+  vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  gl_PointSize = a_radius * 2.0;
+  v_color = a_color;
+}
+`;
+var POINT_FRAG = `
+precision mediump float;
+varying vec4 v_color;
+void main() {
+  vec2 coord = gl_PointCoord - vec2(0.5);
+  float dist = length(coord);
+  if (dist > 0.5) discard;
+  float alpha = 1.0 - smoothstep(0.4, 0.5, dist);
+  gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);
+}
+`;
+var RECT_VERT = `
+attribute vec2 a_position;
+attribute vec4 a_color;
+uniform vec2 u_resolution;
+varying vec4 v_color;
+void main() {
+  vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  v_color = a_color;
+}
+`;
+var RECT_FRAG = `
+precision mediump float;
+varying vec4 v_color;
+void main() {
+  gl_FragColor = v_color;
+}
+`;
+function resolveColor2(value, fallback = "#000") {
+  if (!value) return fallback;
+  if (value === "none" || value === "transparent") return "transparent";
+  if (value.startsWith("url(")) return fallback;
+  const match = value.match(/var\([^,]+,\s*([^)]+)\)/);
+  return match ? match[1].trim() : value;
+}
+function hexToRGBA(hex, alpha = 1) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h;
+  return [
+    parseInt(full.substring(0, 2), 16) / 255,
+    parseInt(full.substring(2, 4), 16) / 255,
+    parseInt(full.substring(4, 6), 16) / 255,
+    alpha
+  ];
+}
+function colorToRGBA(color, alpha = 1) {
+  const resolved = resolveColor2(color);
+  if (resolved === "transparent") return [0, 0, 0, 0];
+  if (resolved.startsWith("#")) return hexToRGBA(resolved, alpha);
+  const rgbaMatch = resolved.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/);
+  if (rgbaMatch) {
+    return [
+      parseInt(rgbaMatch[1]) / 255,
+      parseInt(rgbaMatch[2]) / 255,
+      parseInt(rgbaMatch[3]) / 255,
+      rgbaMatch[4] ? parseFloat(rgbaMatch[4]) * alpha : alpha
+    ];
+  }
+  return [0, 0, 0, alpha];
+}
+function createShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function createProgram(gl, vertSrc, fragSrc) {
+  const vert = createShader(gl, gl.VERTEX_SHADER, vertSrc);
+  const frag = createShader(gl, gl.FRAGMENT_SHADER, fragSrc);
+  if (!vert || !frag) return null;
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vert);
+  gl.attachShader(program, frag);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  return program;
+}
+function mapTextAlign2(anchor) {
+  switch (anchor) {
+    case "middle":
+      return "center";
+    case "end":
+      return "right";
+    default:
+      return "left";
+  }
+}
+function mapTextBaseline2(baseline) {
+  switch (baseline) {
+    case "middle":
+    case "central":
+      return "middle";
+    case "hanging":
+      return "hanging";
+    default:
+      return "alphabetic";
+  }
+}
+function createWebGLRenderer(theme) {
+  return {
+    createRoot(target, width, height, attrs) {
+      const container = document.createElement("div");
+      container.style.cssText = `position:relative;width:${width}px;height:${height}px;`;
+      if (attrs?.class) container.className = attrs.class;
+      if (attrs?.role) container.setAttribute("role", attrs.role);
+      if (attrs?.ariaLabel) container.setAttribute("aria-label", attrs.ariaLabel);
+      const dpr = window.devicePixelRatio || 1;
+      const glCanvas = document.createElement("canvas");
+      glCanvas.width = width * dpr;
+      glCanvas.height = height * dpr;
+      glCanvas.style.cssText = `position:absolute;top:0;left:0;width:${width}px;height:${height}px;`;
+      container.appendChild(glCanvas);
+      const gl = glCanvas.getContext("webgl", {
+        alpha: true,
+        antialias: true,
+        premultipliedAlpha: false
+      });
+      const overlay = document.createElement("canvas");
+      overlay.width = width * dpr;
+      overlay.height = height * dpr;
+      overlay.style.cssText = `position:absolute;top:0;left:0;width:${width}px;height:${height}px;`;
+      container.appendChild(overlay);
+      const ctx2d = overlay.getContext("2d");
+      ctx2d.scale(dpr, dpr);
+      const lineProgram = createProgram(gl, LINE_VERT, LINE_FRAG);
+      const pointProgram = createProgram(gl, POINT_VERT, POINT_FRAG);
+      const rectProgram = createProgram(gl, RECT_VERT, RECT_FRAG);
+      gl.viewport(0, 0, width * dpr, height * dpr);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      target.appendChild(container);
+      const webglRoot = {
+        container,
+        glCanvas,
+        gl,
+        overlay,
+        ctx2d,
+        width,
+        height,
+        dpr,
+        programs: {
+          line: lineProgram,
+          point: pointProgram,
+          rect: rectProgram
+        }
+      };
+      container.__chartts_webgl = webglRoot;
+      return { element: container };
+    },
+    render(root, nodes) {
+      const wr = getWebGLRoot(root);
+      if (!wr) return;
+      const { gl, ctx2d, width, height, dpr } = wr;
+      gl.viewport(0, 0, width * dpr, height * dpr);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx2d.clearRect(0, 0, width, height);
+      const lines = [];
+      const points = [];
+      const rects = [];
+      collectGLNodes(nodes, lines, points, rects);
+      drawGLLines(wr, lines);
+      drawGLPoints(wr, points);
+      drawGLRects(wr, rects);
+      draw2DNodes(ctx2d, nodes, width, height, theme);
+    },
+    update(root, nodes) {
+      this.render(root, nodes);
+    },
+    clear(root) {
+      const wr = getWebGLRoot(root);
+      if (!wr) return;
+      wr.gl.clear(wr.gl.COLOR_BUFFER_BIT);
+      wr.ctx2d.clearRect(0, 0, wr.width, wr.height);
+    },
+    destroy(root) {
+      const el2 = root.element;
+      el2.remove();
+    }
+  };
+}
+function getWebGLRoot(root) {
+  const container = root.element;
+  const glCanvas = container.querySelector("canvas:first-child");
+  const overlay = container.querySelector("canvas:last-child");
+  if (!glCanvas || !overlay) return null;
+  const gl = glCanvas.getContext("webgl");
+  const ctx2d = overlay.getContext("2d");
+  if (!gl || !ctx2d) return null;
+  const dpr = window.devicePixelRatio || 1;
+  const width = parseInt(container.style.width) || 400;
+  const height = parseInt(container.style.height) || 300;
+  const lineProgram = createProgram(gl, LINE_VERT, LINE_FRAG);
+  const pointProgram = createProgram(gl, POINT_VERT, POINT_FRAG);
+  const rectProgram = createProgram(gl, RECT_VERT, RECT_FRAG);
+  return {
+    container,
+    glCanvas,
+    gl,
+    overlay,
+    ctx2d,
+    width,
+    height,
+    dpr,
+    programs: {
+      line: lineProgram,
+      point: pointProgram,
+      rect: rectProgram
+    }
+  };
+}
+function collectGLNodes(nodes, lines, points, rects, _parentAttrs) {
+  for (const node of nodes) {
+    switch (node.type) {
+      case "group":
+        collectGLNodes(node.children, lines, points, rects, node.attrs);
+        break;
+      case "line": {
+        const stroke = resolveColor2(node.attrs?.stroke, "#000");
+        if (stroke === "transparent" || stroke === "none") break;
+        const opacity = node.attrs?.opacity ?? 1;
+        lines.push({
+          x1: node.x1,
+          y1: node.y1,
+          x2: node.x2,
+          y2: node.y2,
+          color: colorToRGBA(stroke, opacity),
+          width: node.attrs?.strokeWidth ?? 1
+        });
+        break;
+      }
+      case "circle": {
+        const fill = resolveColor2(node.attrs?.fill);
+        if (fill === "transparent" || fill === "none") break;
+        const opacity = (node.attrs?.opacity ?? 1) * (node.attrs?.fillOpacity ?? 1);
+        points.push({
+          x: node.cx,
+          y: node.cy,
+          radius: node.r,
+          color: colorToRGBA(fill, opacity)
+        });
+        break;
+      }
+      case "rect": {
+        const fill = resolveColor2(node.attrs?.fill);
+        if (fill === "transparent" || fill === "none") break;
+        const opacity = (node.attrs?.opacity ?? 1) * (node.attrs?.fillOpacity ?? 1);
+        rects.push({
+          x: node.x,
+          y: node.y,
+          w: node.width,
+          h: node.height,
+          color: colorToRGBA(fill, opacity)
+        });
+        break;
+      }
+      case "path": {
+        const stroke = resolveColor2(node.attrs?.stroke);
+        if (stroke && stroke !== "transparent" && stroke !== "none") {
+          const segs = pathToSegments(node.d);
+          const opacity = node.attrs?.opacity ?? 1;
+          const color = colorToRGBA(stroke, opacity);
+          const width = node.attrs?.strokeWidth ?? 2;
+          for (const seg of segs) {
+            lines.push({ ...seg, color, width });
+          }
+        }
+        break;
+      }
+    }
+  }
+}
+function pathToSegments(d) {
+  const segments = [];
+  const commands = d.match(/[MLHVCSQTAZmlhvcsqtaz][^MLHVCSQTAZmlhvcsqtaz]*/g);
+  if (!commands) return segments;
+  let cx = 0, cy = 0;
+  let startX = 0, startY = 0;
+  for (const cmd of commands) {
+    const type = cmd[0];
+    const nums = (cmd.slice(1).match(/-?[\d.]+(?:e[+-]?\d+)?/gi) ?? []).map(Number);
+    switch (type) {
+      case "M":
+        cx = nums[0] ?? 0;
+        cy = nums[1] ?? 0;
+        startX = cx;
+        startY = cy;
+        for (let i = 2; i < nums.length; i += 2) {
+          const nx = nums[i] ?? 0;
+          const ny = nums[i + 1] ?? 0;
+          segments.push({ x1: cx, y1: cy, x2: nx, y2: ny });
+          cx = nx;
+          cy = ny;
+        }
+        break;
+      case "m":
+        cx += nums[0] ?? 0;
+        cy += nums[1] ?? 0;
+        startX = cx;
+        startY = cy;
+        for (let i = 2; i < nums.length; i += 2) {
+          const nx = cx + (nums[i] ?? 0);
+          const ny = cy + (nums[i + 1] ?? 0);
+          segments.push({ x1: cx, y1: cy, x2: nx, y2: ny });
+          cx = nx;
+          cy = ny;
+        }
+        break;
+      case "L":
+        for (let i = 0; i < nums.length; i += 2) {
+          const nx = nums[i] ?? 0;
+          const ny = nums[i + 1] ?? 0;
+          segments.push({ x1: cx, y1: cy, x2: nx, y2: ny });
+          cx = nx;
+          cy = ny;
+        }
+        break;
+      case "l":
+        for (let i = 0; i < nums.length; i += 2) {
+          const nx = cx + (nums[i] ?? 0);
+          const ny = cy + (nums[i + 1] ?? 0);
+          segments.push({ x1: cx, y1: cy, x2: nx, y2: ny });
+          cx = nx;
+          cy = ny;
+        }
+        break;
+      case "H":
+        for (const n2 of nums) {
+          segments.push({ x1: cx, y1: cy, x2: n2, y2: cy });
+          cx = n2;
+        }
+        break;
+      case "h":
+        for (const n2 of nums) {
+          const nx = cx + n2;
+          segments.push({ x1: cx, y1: cy, x2: nx, y2: cy });
+          cx = nx;
+        }
+        break;
+      case "V":
+        for (const n2 of nums) {
+          segments.push({ x1: cx, y1: cy, x2: cx, y2: n2 });
+          cy = n2;
+        }
+        break;
+      case "v":
+        for (const n2 of nums) {
+          const ny = cy + n2;
+          segments.push({ x1: cx, y1: cy, x2: cx, y2: ny });
+          cy = ny;
+        }
+        break;
+      case "C": {
+        for (let i = 0; i < nums.length; i += 6) {
+          const cp1x = nums[i], cp1y = nums[i + 1];
+          const cp2x = nums[i + 2], cp2y = nums[i + 3];
+          const ex = nums[i + 4], ey = nums[i + 5];
+          approximateCubic(segments, cx, cy, cp1x, cp1y, cp2x, cp2y, ex, ey);
+          cx = ex;
+          cy = ey;
+        }
+        break;
+      }
+      case "c": {
+        for (let i = 0; i < nums.length; i += 6) {
+          const cp1x = cx + nums[i], cp1y = cy + nums[i + 1];
+          const cp2x = cx + nums[i + 2], cp2y = cy + nums[i + 3];
+          const ex = cx + nums[i + 4], ey = cy + nums[i + 5];
+          approximateCubic(segments, cx, cy, cp1x, cp1y, cp2x, cp2y, ex, ey);
+          cx = ex;
+          cy = ey;
+        }
+        break;
+      }
+      case "S": {
+        for (let i = 0; i < nums.length; i += 4) {
+          const cp2x = nums[i], cp2y = nums[i + 1];
+          const ex = nums[i + 2], ey = nums[i + 3];
+          approximateCubic(segments, cx, cy, cx, cy, cp2x, cp2y, ex, ey);
+          cx = ex;
+          cy = ey;
+        }
+        break;
+      }
+      case "Q": {
+        for (let i = 0; i < nums.length; i += 4) {
+          const cpx = nums[i], cpy = nums[i + 1];
+          const ex = nums[i + 2], ey = nums[i + 3];
+          approximateQuadratic(segments, cx, cy, cpx, cpy, ex, ey);
+          cx = ex;
+          cy = ey;
+        }
+        break;
+      }
+      case "Z":
+      case "z":
+        if (cx !== startX || cy !== startY) {
+          segments.push({ x1: cx, y1: cy, x2: startX, y2: startY });
+        }
+        cx = startX;
+        cy = startY;
+        break;
+      // A (arc) — simplified: just connect endpoints
+      case "A":
+        if (nums.length >= 7) {
+          const ex = nums[5], ey = nums[6];
+          segments.push({ x1: cx, y1: cy, x2: ex, y2: ey });
+          cx = ex;
+          cy = ey;
+        }
+        break;
+    }
+  }
+  return segments;
+}
+function approximateCubic(out, x0, y0, cp1x, cp1y, cp2x, cp2y, x3, y3, steps = 8) {
+  let px = x0, py = y0;
+  for (let i = 1; i <= steps; i++) {
+    const t = i / steps;
+    const t2 = t * t;
+    const t3 = t2 * t;
+    const mt = 1 - t;
+    const mt2 = mt * mt;
+    const mt3 = mt2 * mt;
+    const nx = mt3 * x0 + 3 * mt2 * t * cp1x + 3 * mt * t2 * cp2x + t3 * x3;
+    const ny = mt3 * y0 + 3 * mt2 * t * cp1y + 3 * mt * t2 * cp2y + t3 * y3;
+    out.push({ x1: px, y1: py, x2: nx, y2: ny });
+    px = nx;
+    py = ny;
+  }
+}
+function approximateQuadratic(out, x0, y0, cpx, cpy, x2, y2, steps = 6) {
+  let px = x0, py = y0;
+  for (let i = 1; i <= steps; i++) {
+    const t = i / steps;
+    const mt = 1 - t;
+    const nx = mt * mt * x0 + 2 * mt * t * cpx + t * t * x2;
+    const ny = mt * mt * y0 + 2 * mt * t * cpy + t * t * y2;
+    out.push({ x1: px, y1: py, x2: nx, y2: ny });
+    px = nx;
+    py = ny;
+  }
+}
+function drawGLLines(wr, lines) {
+  if (lines.length === 0) return;
+  const { gl, programs, width, height, dpr } = wr;
+  gl.useProgram(programs.line);
+  const posLoc = gl.getAttribLocation(programs.line, "a_position");
+  const colorLoc = gl.getAttribLocation(programs.line, "a_color");
+  const resLoc = gl.getUniformLocation(programs.line, "u_resolution");
+  gl.uniform2f(resLoc, width, height);
+  const data = new Float32Array(lines.length * 12);
+  for (let i = 0; i < lines.length; i++) {
+    const l = lines[i];
+    const off = i * 12;
+    data[off] = l.x1;
+    data[off + 1] = l.y1;
+    data[off + 2] = l.color[0];
+    data[off + 3] = l.color[1];
+    data[off + 4] = l.color[2];
+    data[off + 5] = l.color[3];
+    data[off + 6] = l.x2;
+    data[off + 7] = l.y2;
+    data[off + 8] = l.color[0];
+    data[off + 9] = l.color[1];
+    data[off + 10] = l.color[2];
+    data[off + 11] = l.color[3];
+  }
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+  const stride = 24;
+  gl.enableVertexAttribArray(posLoc);
+  gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, stride, 0);
+  gl.enableVertexAttribArray(colorLoc);
+  gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, stride, 8);
+  const maxWidth = lines.reduce((m, l) => Math.max(m, l.width), 1);
+  gl.lineWidth(Math.min(maxWidth * dpr, gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE)[1]));
+  gl.drawArrays(gl.LINES, 0, lines.length * 2);
+  gl.disableVertexAttribArray(posLoc);
+  gl.disableVertexAttribArray(colorLoc);
+  gl.deleteBuffer(buf);
+}
+function drawGLPoints(wr, points) {
+  if (points.length === 0) return;
+  const { gl, programs, width, height, dpr } = wr;
+  gl.useProgram(programs.point);
+  const posLoc = gl.getAttribLocation(programs.point, "a_position");
+  const radiusLoc = gl.getAttribLocation(programs.point, "a_radius");
+  const colorLoc = gl.getAttribLocation(programs.point, "a_color");
+  const resLoc = gl.getUniformLocation(programs.point, "u_resolution");
+  gl.uniform2f(resLoc, width, height);
+  const data = new Float32Array(points.length * 7);
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    const off = i * 7;
+    data[off] = p.x;
+    data[off + 1] = p.y;
+    data[off + 2] = p.radius * dpr;
+    data[off + 3] = p.color[0];
+    data[off + 4] = p.color[1];
+    data[off + 5] = p.color[2];
+    data[off + 6] = p.color[3];
+  }
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+  const stride = 28;
+  gl.enableVertexAttribArray(posLoc);
+  gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, stride, 0);
+  gl.enableVertexAttribArray(radiusLoc);
+  gl.vertexAttribPointer(radiusLoc, 1, gl.FLOAT, false, stride, 8);
+  gl.enableVertexAttribArray(colorLoc);
+  gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, stride, 12);
+  gl.drawArrays(gl.POINTS, 0, points.length);
+  gl.disableVertexAttribArray(posLoc);
+  gl.disableVertexAttribArray(radiusLoc);
+  gl.disableVertexAttribArray(colorLoc);
+  gl.deleteBuffer(buf);
+}
+function drawGLRects(wr, rects) {
+  if (rects.length === 0) return;
+  const { gl, programs, width, height } = wr;
+  gl.useProgram(programs.rect);
+  const posLoc = gl.getAttribLocation(programs.rect, "a_position");
+  const colorLoc = gl.getAttribLocation(programs.rect, "a_color");
+  const resLoc = gl.getUniformLocation(programs.rect, "u_resolution");
+  gl.uniform2f(resLoc, width, height);
+  const data = new Float32Array(rects.length * 36);
+  for (let i = 0; i < rects.length; i++) {
+    const r = rects[i];
+    const off = i * 36;
+    const x0 = r.x, y0 = r.y, x1 = r.x + r.w, y1 = r.y + r.h;
+    const c = r.color;
+    data[off] = x0;
+    data[off + 1] = y0;
+    data[off + 2] = c[0];
+    data[off + 3] = c[1];
+    data[off + 4] = c[2];
+    data[off + 5] = c[3];
+    data[off + 6] = x1;
+    data[off + 7] = y0;
+    data[off + 8] = c[0];
+    data[off + 9] = c[1];
+    data[off + 10] = c[2];
+    data[off + 11] = c[3];
+    data[off + 12] = x0;
+    data[off + 13] = y1;
+    data[off + 14] = c[0];
+    data[off + 15] = c[1];
+    data[off + 16] = c[2];
+    data[off + 17] = c[3];
+    data[off + 18] = x1;
+    data[off + 19] = y0;
+    data[off + 20] = c[0];
+    data[off + 21] = c[1];
+    data[off + 22] = c[2];
+    data[off + 23] = c[3];
+    data[off + 24] = x1;
+    data[off + 25] = y1;
+    data[off + 26] = c[0];
+    data[off + 27] = c[1];
+    data[off + 28] = c[2];
+    data[off + 29] = c[3];
+    data[off + 30] = x0;
+    data[off + 31] = y1;
+    data[off + 32] = c[0];
+    data[off + 33] = c[1];
+    data[off + 34] = c[2];
+    data[off + 35] = c[3];
+  }
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+  const stride = 24;
+  gl.enableVertexAttribArray(posLoc);
+  gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, stride, 0);
+  gl.enableVertexAttribArray(colorLoc);
+  gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, stride, 8);
+  gl.drawArrays(gl.TRIANGLES, 0, rects.length * 6);
+  gl.disableVertexAttribArray(posLoc);
+  gl.disableVertexAttribArray(colorLoc);
+  gl.deleteBuffer(buf);
+}
+function draw2DNodes(ctx, nodes, _cw, _ch, theme) {
+  for (const node of nodes) {
+    draw2DNode(ctx, node, theme);
+  }
+}
+function draw2DNode(ctx, node, theme) {
+  switch (node.type) {
+    case "group":
+      ctx.save();
+      if (node.attrs?.transform) apply2DTransform(ctx, node.attrs.transform);
+      if (node.attrs?.opacity != null) ctx.globalAlpha *= node.attrs.opacity;
+      for (const child of node.children) draw2DNode(ctx, child, theme);
+      ctx.restore();
+      break;
+    case "text": {
+      const fill = resolveColor2(node.attrs?.fill, resolveColor2(theme.textColor));
+      const opacity = node.attrs?.opacity ?? 1;
+      const fontSize = node.attrs?.fontSize ?? theme.fontSize;
+      const fontFamily = node.attrs?.fontFamily ?? theme.fontFamily;
+      const fontWeight = node.attrs?.fontWeight ?? "normal";
+      const textAnchor = node.attrs?.textAnchor;
+      const baseline = node.attrs?.dominantBaseline;
+      ctx.save();
+      ctx.globalAlpha = opacity;
+      ctx.fillStyle = resolveColor2(fill);
+      ctx.font = `${fontWeight} ${fontSize}px ${resolveColor2(fontFamily)}`;
+      ctx.textAlign = mapTextAlign2(textAnchor);
+      ctx.textBaseline = mapTextBaseline2(baseline);
+      if (node.attrs?.transform) apply2DTransform(ctx, node.attrs.transform);
+      ctx.fillText(node.content, node.x, node.y);
+      ctx.restore();
+      break;
+    }
+    case "path": {
+      const fill = resolveColor2(node.attrs?.fill);
+      if (fill && fill !== "transparent" && fill !== "none" && node.attrs?.fill) {
+        const opacity = (node.attrs?.opacity ?? 1) * (node.attrs?.fillOpacity ?? 1);
+        ctx.save();
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = fill;
+        const p = new Path2D(node.d);
+        ctx.fill(p);
+        ctx.restore();
+      }
+      break;
+    }
+  }
+}
+function apply2DTransform(ctx, t) {
+  const translateMatch = t.match(/translate\(\s*([^,)]+)[,\s]+([^)]+)\)/);
+  if (translateMatch) {
+    ctx.translate(parseFloat(translateMatch[1]), parseFloat(translateMatch[2]));
+  }
+  const rotateMatch = t.match(/rotate\(\s*([^,)]+)(?:[,\s]+([^,)]+)[,\s]+([^)]+))?\)/);
+  if (rotateMatch) {
+    const angle = parseFloat(rotateMatch[1]) * Math.PI / 180;
+    if (rotateMatch[2] && rotateMatch[3]) {
+      const cx = parseFloat(rotateMatch[2]);
+      const cy = parseFloat(rotateMatch[3]);
+      ctx.translate(cx, cy);
+      ctx.rotate(angle);
+      ctx.translate(-cx, -cy);
+    } else {
+      ctx.rotate(angle);
+    }
+  }
+}
+
+// src/scales/nice.ts
+function niceNumber(value, round) {
+  if (value === 0) return 0;
+  const exp = Math.floor(Math.log10(Math.abs(value)));
+  const frac = value / Math.pow(10, exp);
+  let nice;
+  if (round) {
+    nice = frac < 1.5 ? 1 : frac < 3 ? 2 : frac < 7 ? 5 : 10;
+  } else {
+    nice = frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 5 ? 5 : 10;
+  }
+  return nice * Math.pow(10, exp);
+}
+function niceRange(dataMin, dataMax, tickCount) {
+  if (tickCount < 2) tickCount = 2;
+  if (dataMin === dataMax) {
+    if (dataMin === 0) return { min: 0, max: 1, spacing: 0.2 };
+    const pad = Math.abs(dataMin) * 0.1 || 1;
+    return niceRange(dataMin - pad, dataMax + pad, tickCount);
+  }
+  const range = niceNumber(dataMax - dataMin, false);
+  const spacing = niceNumber(range / (tickCount - 1), true);
+  const min = Math.floor(dataMin / spacing) * spacing;
+  const max = Math.ceil(dataMax / spacing) * spacing;
+  return { min, max, spacing };
+}
+function generateTicks(min, max, spacing) {
+  if (spacing <= 0) return [min];
+  const ticks = [];
+  const eps = spacing * 1e-10;
+  for (let v = min; v <= max + eps; v += spacing) {
+    ticks.push(Math.round(v * 1e12) / 1e12);
+  }
+  return ticks;
+}
+
+// src/scales/linear.ts
+function createLinearScale(opts) {
+  let dMin = opts?.domain?.[0] ?? 0;
+  let dMax = opts?.domain?.[1] ?? 1;
+  let rMin = opts?.range?.[0] ?? 0;
+  let rMax = opts?.range?.[1] ?? 1;
+  const useNice = opts?.nice ?? true;
+  const clamp = opts?.clamp ?? false;
+  const fmt = opts?.format ?? defaultFmt;
+  if (useNice && dMin !== dMax) {
+    const { min, max } = niceRange(dMin, dMax, 5);
+    dMin = min;
+    dMax = max;
+  }
+  function map(value) {
+    const v = Number(value);
+    const span = dMax - dMin;
+    if (span === 0) return (rMin + rMax) / 2;
+    let t = (v - dMin) / span;
+    if (clamp) t = Math.max(0, Math.min(1, t));
+    return round2(rMin + t * (rMax - rMin));
+  }
+  function invert(px) {
+    const span = rMax - rMin;
+    if (span === 0) return (dMin + dMax) / 2;
+    return dMin + (px - rMin) / span * (dMax - dMin);
+  }
+  function ticks(count = 5) {
+    const { min, max, spacing } = niceRange(dMin, dMax, count);
+    const vals = generateTicks(useNice ? min : dMin, useNice ? max : dMax, spacing);
+    return vals.map((v) => ({ value: v, position: map(v), label: fmt(v) }));
+  }
+  return {
+    map,
+    invert,
+    ticks,
+    setDomain(min, max) {
+      dMin = Number(min);
+      dMax = Number(max);
+    },
+    setRange(min, max) {
+      rMin = min;
+      rMax = max;
+    },
+    getDomain() {
+      return [dMin, dMax];
+    },
+    getRange() {
+      return [rMin, rMax];
+    },
+    bandwidth() {
+      return 0;
+    }
+  };
+}
+function round2(n2) {
+  return Math.round(n2 * 100) / 100;
+}
+function defaultFmt(v) {
+  const abs = Math.abs(v);
+  if (abs >= 1e12) return trimSuffix(v / 1e12, "T");
+  if (abs >= 1e9) return trimSuffix(v / 1e9, "B");
+  if (abs >= 1e6) return trimSuffix(v / 1e6, "M");
+  if (abs >= 1e3) return trimSuffix(v / 1e3, "K");
+  if (Number.isInteger(v)) return String(v);
+  return v.toFixed(1);
+}
+function trimSuffix(v, suffix) {
+  const s = v.toFixed(1);
+  return (s.endsWith(".0") ? s.slice(0, -2) : s) + suffix;
+}
+
+// src/scales/categorical.ts
+function createCategoricalScale(opts) {
+  let cats = opts?.categories ?? [];
+  let rMin = opts?.range?.[0] ?? 0;
+  let rMax = opts?.range?.[1] ?? 1;
+  const fmt = opts?.format ?? String;
+  const useBand = opts?.band ?? false;
+  function round22(n2) {
+    return Math.round(n2 * 100) / 100;
+  }
+  function pos(index) {
+    const n2 = cats.length;
+    if (n2 === 0) return round22((rMin + rMax) / 2);
+    if (useBand) {
+      const slotWidth = (rMax - rMin) / n2;
+      return round22(rMin + (index + 0.5) * slotWidth);
+    }
+    if (n2 <= 1) return round22((rMin + rMax) / 2);
+    return round22(rMin + index / (n2 - 1) * (rMax - rMin));
+  }
+  function bandwidth() {
+    const n2 = cats.length;
+    if (n2 === 0) return 0;
+    if (useBand) return (rMax - rMin) / n2;
+    if (n2 <= 1) return rMax - rMin;
+    return (rMax - rMin) / (n2 - 1);
+  }
+  function map(value) {
+    if (typeof value === "number" && Number.isFinite(value)) return pos(value);
+    const idx = cats.findIndex(
+      (c) => c instanceof Date && value instanceof Date ? c.getTime() === value.getTime() : String(c) === String(value)
+    );
+    return idx === -1 ? (rMin + rMax) / 2 : pos(idx);
+  }
+  function invert(px) {
+    const n2 = cats.length;
+    if (n2 === 0) return 0;
+    if (useBand) {
+      const slotWidth = (rMax - rMin) / n2;
+      return Math.floor((px - rMin) / slotWidth);
+    }
+    if (n2 <= 1) return 0;
+    const t = (px - rMin) / (rMax - rMin);
+    return Math.round(t * (n2 - 1));
+  }
+  function ticks() {
+    return cats.map((c, i) => ({ value: c, position: pos(i), label: fmt(c) }));
+  }
+  return {
+    map,
+    invert,
+    ticks,
+    setDomain() {
+    },
+    setRange(min, max) {
+      rMin = min;
+      rMax = max;
+    },
+    getDomain() {
+      return [cats[0] ?? "", cats[cats.length - 1] ?? ""];
+    },
+    getRange() {
+      return [rMin, rMax];
+    },
+    setCategories(c) {
+      cats = c;
+    },
+    bandwidth
+  };
+}
+
+// src/interaction/zoom-pan.ts
+function createZoomPan(config, onUpdate, interactionState) {
+  const cfg = {
+    x: config.x ?? true,
+    y: config.y ?? false,
+    wheel: config.wheel ?? true,
+    drag: config.drag ?? true,
+    pinch: config.pinch ?? true,
+    minZoom: config.minZoom ?? 1,
+    maxZoom: config.maxZoom ?? 20
+  };
+  const state = {
+    zoomX: 1,
+    zoomY: 1,
+    panX: 0,
+    panY: 0
+  };
+  let el2 = null;
+  let getArea = null;
+  let isDragging = false;
+  let dragStartX = 0;
+  let dragStartY = 0;
+  let dragStartPanX = 0;
+  let dragStartPanY = 0;
+  let lastPinchDist = 0;
+  function onWheel(e) {
+    if (!cfg.wheel || !getArea) return;
+    e.preventDefault();
+    const area = getArea();
+    const rect2 = el2.getBoundingClientRect();
+    const mouseX = e.clientX - rect2.left;
+    const relX = (mouseX - area.x) / area.width;
+    const delta = e.deltaY > 0 ? 0.9 : 1.1;
+    if (cfg.x) {
+      const newZoom = clamp(state.zoomX * delta, cfg.minZoom, cfg.maxZoom);
+      const zoomRatio = newZoom / state.zoomX;
+      state.panX = relX - (relX - state.panX) * zoomRatio;
+      state.zoomX = newZoom;
+    }
+    if (cfg.y) {
+      state.zoomY = clamp(state.zoomY * delta, cfg.minZoom, cfg.maxZoom);
+    }
+    clampPan();
+    onUpdate();
+  }
+  function onPointerDown(e) {
+    if (!cfg.drag) return;
+    if (e.shiftKey) return;
+    isDragging = true;
+    if (interactionState) interactionState.isPanning = true;
+    dragStartX = e.clientX;
+    dragStartY = e.clientY;
+    dragStartPanX = state.panX;
+    dragStartPanY = state.panY;
+    el2.setPointerCapture(e.pointerId);
+    el2.style.cursor = "grabbing";
+  }
+  function onPointerMove(e) {
+    if (!isDragging || !getArea) return;
+    const area = getArea();
+    const dx = e.clientX - dragStartX;
+    const dy = e.clientY - dragStartY;
+    if (cfg.x) {
+      state.panX = dragStartPanX + dx / (area.width * state.zoomX);
+    }
+    if (cfg.y) {
+      state.panY = dragStartPanY + dy / (area.height * state.zoomY);
+    }
+    clampPan();
+    onUpdate();
+  }
+  function onPointerUp(e) {
+    if (!isDragging) return;
+    isDragging = false;
+    if (interactionState) interactionState.isPanning = false;
+    el2.releasePointerCapture(e.pointerId);
+    el2.style.cursor = "crosshair";
+  }
+  function onTouchStart(e) {
+    if (!cfg.pinch || e.touches.length !== 2) return;
+    lastPinchDist = pinchDistance(e);
+  }
+  function onTouchMove(e) {
+    if (!cfg.pinch || e.touches.length !== 2) return;
+    e.preventDefault();
+    const dist = pinchDistance(e);
+    const scale = dist / lastPinchDist;
+    lastPinchDist = dist;
+    if (cfg.x) {
+      state.zoomX = clamp(state.zoomX * scale, cfg.minZoom, cfg.maxZoom);
+    }
+    if (cfg.y) {
+      state.zoomY = clamp(state.zoomY * scale, cfg.minZoom, cfg.maxZoom);
+    }
+    clampPan();
+    onUpdate();
+  }
+  function clampPan() {
+    const visibleX = 1 / state.zoomX;
+    state.panX = clamp(state.panX, -(1 - visibleX), 0);
+    const visibleY = 1 / state.zoomY;
+    state.panY = clamp(state.panY, -(1 - visibleY), 0);
+  }
+  function pinchDistance(e) {
+    const dx = e.touches[0].clientX - e.touches[1].clientX;
+    const dy = e.touches[0].clientY - e.touches[1].clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+  function clamp(v, min, max) {
+    return Math.min(Math.max(v, min), max);
+  }
+  return {
+    attach(element, areaFn, _scalesFn) {
+      el2 = element;
+      getArea = areaFn;
+      if (cfg.wheel) {
+        el2.addEventListener("wheel", onWheel, { passive: false });
+      }
+      if (cfg.drag) {
+        el2.addEventListener("pointerdown", onPointerDown);
+        el2.addEventListener("pointermove", onPointerMove);
+        el2.addEventListener("pointerup", onPointerUp);
+      }
+      if (cfg.pinch) {
+        el2.addEventListener("touchstart", onTouchStart, { passive: false });
+        el2.addEventListener("touchmove", onTouchMove, { passive: false });
+      }
+    },
+    reset() {
+      state.zoomX = 1;
+      state.zoomY = 1;
+      state.panX = 0;
+      state.panY = 0;
+      onUpdate();
+    },
+    getState() {
+      return { ...state };
+    },
+    /**
+     * Apply current zoom/pan to scales by adjusting their domains.
+     * Call this at the start of each render, after creating scales.
+     */
+    applyToScales(xScale, yScale, area) {
+      if (state.zoomX === 1 && state.zoomY === 1 && state.panX === 0 && state.panY === 0) return;
+      if (cfg.x && state.zoomX !== 1) {
+        const [xMin, xMax] = xScale.getRange();
+        const fullWidth = xMax - xMin;
+        const visibleWidth = fullWidth / state.zoomX;
+        const offset = -state.panX * fullWidth;
+        xScale.setRange(area.x + offset, area.x + offset + visibleWidth);
+      }
+      if (cfg.y && state.zoomY !== 1) {
+        const [yMin, yMax] = yScale.getDomain();
+        const fullRange = yMax - yMin;
+        const visibleRange = fullRange / state.zoomY;
+        const offset = -state.panY * fullRange;
+        yScale.setDomain(yMin + offset, yMin + offset + visibleRange);
+      }
+    },
+    destroy() {
+      if (!el2) return;
+      el2.removeEventListener("wheel", onWheel);
+      el2.removeEventListener("pointerdown", onPointerDown);
+      el2.removeEventListener("pointermove", onPointerMove);
+      el2.removeEventListener("pointerup", onPointerUp);
+      el2.removeEventListener("touchstart", onTouchStart);
+      el2.removeEventListener("touchmove", onTouchMove);
+      el2 = null;
+      getArea = null;
+    }
+  };
+}
+
+// src/interaction/brush.ts
+function createBrush(config, bus, el2, getArea, getXScale, getData, isPanEnabled) {
+  const fillColor = config.fillColor ?? "rgba(59,130,246,0.15)";
+  const strokeColor = config.strokeColor ?? "rgba(59,130,246,0.5)";
+  let isBrushing = false;
+  let startClientX = 0;
+  let brushRect = null;
+  let parentEl = null;
+  function getParent() {
+    if (parentEl) return parentEl;
+    parentEl = el2.parentElement;
+    if (!parentEl) parentEl = el2;
+    parentEl.style.position = "relative";
+    return parentEl;
+  }
+  function toLocalX(clientX) {
+    const r = el2.getBoundingClientRect();
+    return clientX - r.left;
+  }
+  function onPointerDown(e) {
+    if (isPanEnabled && !e.shiftKey) return;
+    if (!isPanEnabled && e.shiftKey) return;
+    const area = getArea();
+    const localX = toLocalX(e.clientX);
+    const r = el2.getBoundingClientRect();
+    const localY = e.clientY - r.top;
+    if (localX < area.x || localX > area.x + area.width) return;
+    if (localY < area.y || localY > area.y + area.height) return;
+    isBrushing = true;
+    startClientX = e.clientX;
+    el2.setPointerCapture(e.pointerId);
+    brushRect = document.createElement("div");
+    brushRect.className = "chartts-brush-rect";
+    brushRect.style.cssText = `
+      position: absolute;
+      top: ${area.y}px;
+      height: ${area.height}px;
+      left: ${localX}px;
+      width: 0px;
+      background: ${fillColor};
+      border-left: 1px solid ${strokeColor};
+      border-right: 1px solid ${strokeColor};
+      pointer-events: none;
+      z-index: 10;
+    `;
+    getParent().appendChild(brushRect);
+  }
+  function onPointerMove(e) {
+    if (!isBrushing || !brushRect) return;
+    const area = getArea();
+    const startX = Math.max(toLocalX(startClientX), area.x);
+    const currentX = Math.min(Math.max(toLocalX(e.clientX), area.x), area.x + area.width);
+    const left = Math.min(startX, currentX);
+    const width = Math.abs(currentX - startX);
+    brushRect.style.left = `${left}px`;
+    brushRect.style.width = `${width}px`;
+  }
+  function onPointerUp(e) {
+    if (!isBrushing) return;
+    isBrushing = false;
+    el2.releasePointerCapture(e.pointerId);
+    const area = getArea();
+    const xScale = getXScale();
+    const data = getData();
+    const startX = Math.max(toLocalX(startClientX), area.x);
+    const endX = Math.min(Math.max(toLocalX(e.clientX), area.x), area.x + area.width);
+    brushRect?.remove();
+    brushRect = null;
+    if (Math.abs(endX - startX) < 5) return;
+    const leftX = Math.min(startX, endX);
+    const rightX = Math.max(startX, endX);
+    let startIdx = 0;
+    let endIdx = data.labels.length - 1;
+    let bestStartDist = Infinity;
+    let bestEndDist = Infinity;
+    for (let i = 0; i < data.labels.length; i++) {
+      const pos = xScale.map(data.labels[i]);
+      const distToStart = Math.abs(pos - leftX);
+      const distToEnd = Math.abs(pos - rightX);
+      if (distToStart < bestStartDist) {
+        bestStartDist = distToStart;
+        startIdx = i;
+      }
+      if (distToEnd < bestEndDist) {
+        bestEndDist = distToEnd;
+        endIdx = i;
+      }
+    }
+    if (startIdx > endIdx) [startIdx, endIdx] = [endIdx, startIdx];
+    bus.emit("brush:end", {
+      startIndex: startIdx,
+      endIndex: endIdx,
+      startLabel: data.labels[startIdx],
+      endLabel: data.labels[endIdx]
+    });
+  }
+  function onKeyDown(e) {
+    if (e.key === "Escape" && isBrushing) {
+      isBrushing = false;
+      brushRect?.remove();
+      brushRect = null;
+    }
+  }
+  el2.addEventListener("pointerdown", onPointerDown);
+  el2.addEventListener("pointermove", onPointerMove);
+  el2.addEventListener("pointerup", onPointerUp);
+  document.addEventListener("keydown", onKeyDown);
+  return {
+    destroy() {
+      el2.removeEventListener("pointerdown", onPointerDown);
+      el2.removeEventListener("pointermove", onPointerMove);
+      el2.removeEventListener("pointerup", onPointerUp);
+      document.removeEventListener("keydown", onKeyDown);
+      brushRect?.remove();
+    }
+  };
+}
+
+// src/debug/debug.ts
+function createDebugPanel() {
+  let panel = null;
+  let treeEl = null;
+  let statsEl = null;
+  function attach(container, svg) {
+    panel = document.createElement("div");
+    panel.className = "chartts-debug";
+    panel.style.cssText = `
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 320px;
+      max-height: 100%;
+      overflow-y: auto;
+      background: rgba(0,0,0,0.9);
+      color: #e5e7eb;
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 11px;
+      padding: 12px;
+      border-left: 1px solid #333;
+      z-index: 10000;
+    `;
+    statsEl = document.createElement("div");
+    statsEl.style.cssText = "margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #333;";
+    panel.appendChild(statsEl);
+    const treeLabel = document.createElement("div");
+    treeLabel.textContent = "RENDER TREE";
+    treeLabel.style.cssText = "color: #8b5cf6; font-weight: 700; margin-bottom: 8px; font-size: 10px; letter-spacing: 0.05em;";
+    panel.appendChild(treeLabel);
+    treeEl = document.createElement("pre");
+    treeEl.style.cssText = "margin: 0; white-space: pre-wrap; word-break: break-all; line-height: 1.4;";
+    panel.appendChild(treeEl);
+    container.style.position = "relative";
+    container.appendChild(panel);
+    svg.addEventListener("mouseover", (e) => {
+      const target = e.target;
+      if (target !== svg) {
+        target.style.outline = "1px solid rgba(139, 92, 246, 0.5)";
+      }
+    });
+    svg.addEventListener("mouseout", (e) => {
+      const target = e.target;
+      target.style.outline = "";
+    });
+  }
+  function update(ctx, nodes) {
+    if (!statsEl || !treeEl) return;
+    const nodeCount = countNodes(nodes);
+    const { data, options, area } = ctx;
+    statsEl.innerHTML = `
+      <div style="color:#8b5cf6;font-weight:700;font-size:10px;letter-spacing:0.05em;margin-bottom:8px;">CHART INFO</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
+        <span style="color:#6b7280;">Series:</span><span>${data.series.length}</span>
+        <span style="color:#6b7280;">Points:</span><span>${data.series[0]?.values.length ?? 0}</span>
+        <span style="color:#6b7280;">SVG nodes:</span><span>${nodeCount}</span>
+        <span style="color:#6b7280;">Area:</span><span>${Math.round(area.width)}x${Math.round(area.height)}</span>
+        <span style="color:#6b7280;">Y range:</span><span>${data.bounds.yMin} \u2014 ${data.bounds.yMax}</span>
+        <span style="color:#6b7280;">Theme:</span><span>${typeof options.theme === "string" ? options.theme : "custom"}</span>
+        <span style="color:#6b7280;">Curve:</span><span>${options.curve}</span>
+        <span style="color:#6b7280;">Animate:</span><span>${options.animate}</span>
+      </div>
+    `;
+    treeEl.innerHTML = renderTreeToString(nodes, 0);
+  }
+  function destroy() {
+    panel?.remove();
+    panel = null;
+    treeEl = null;
+    statsEl = null;
+  }
+  return { attach, update, destroy };
+}
+function countNodes(nodes) {
+  let count = 0;
+  for (const node of nodes) {
+    count++;
+    if ("children" in node && Array.isArray(node.children)) {
+      count += countNodes(node.children);
+    }
+  }
+  return count;
+}
+function renderTreeToString(nodes, depth) {
+  const indent = "  ".repeat(depth);
+  let result = "";
+  for (const node of nodes) {
+    const attrs = "attrs" in node ? node.attrs : void 0;
+    const cls = attrs?.class ? ` <span style="color:#3b82f6">.${attrs.class}</span>` : "";
+    const type = `<span style="color:#10b981">${node.type}</span>`;
+    if ("children" in node && Array.isArray(node.children)) {
+      result += `${indent}${type}${cls} (${node.children.length})
+`;
+      result += renderTreeToString(node.children, depth + 1);
+    } else if (node.type === "text") {
+      result += `${indent}${type}${cls} "${node.content}"
+`;
+    } else if (node.type === "path") {
+      const d = node.d;
+      result += `${indent}${type}${cls} d="${d.length > 40 ? d.slice(0, 40) + "..." : d}"
+`;
+    } else {
+      result += `${indent}${type}${cls}
+`;
+    }
+  }
+  return result;
+}
+
+// src/data/decimate.ts
+function decimateData(data, opts) {
+  const threshold = opts.threshold ?? 1e3;
+  const algo = opts.algorithm ?? "lttb";
+  const needsDecimation = data.series.some((s) => s.values.length > threshold);
+  if (!needsDecimation) return data;
+  const decimated = data.series.map((s) => {
+    if (s.values.length <= threshold) return s;
+    const values = algo === "lttb" ? lttb(s.values, threshold) : minMax(s.values, threshold);
+    return { ...s, values: values.map((p) => p.value) };
+  });
+  const primarySeries = data.series[0];
+  let labels = data.labels;
+  if (labels && primarySeries && primarySeries.values.length > threshold) {
+    const indices = decimated[0].values.length === threshold ? getDecimatedIndices(primarySeries.values, threshold, algo) : void 0;
+    if (indices) {
+      labels = indices.map((i) => labels[i]);
+    }
+  }
+  return { labels, series: decimated };
+}
+function lttb(values, threshold) {
+  const len = values.length;
+  if (len <= threshold) {
+    return values.map((v, i) => ({ index: i, value: v }));
+  }
+  const sampled = [];
+  sampled.push({ index: 0, value: values[0] });
+  const bucketSize = (len - 2) / (threshold - 2);
+  let prevIndex = 0;
+  for (let i = 1; i < threshold - 1; i++) {
+    const bucketStart = Math.floor((i - 1) * bucketSize) + 1;
+    const bucketEnd = Math.min(Math.floor(i * bucketSize) + 1, len - 1);
+    const nextBucketStart = Math.floor(i * bucketSize) + 1;
+    const nextBucketEnd = Math.min(Math.floor((i + 1) * bucketSize) + 1, len - 1);
+    let avgX = 0;
+    let avgY = 0;
+    let avgCount = 0;
+    for (let j = nextBucketStart; j < nextBucketEnd; j++) {
+      avgX += j;
+      avgY += values[j];
+      avgCount++;
+    }
+    if (avgCount > 0) {
+      avgX /= avgCount;
+      avgY /= avgCount;
+    }
+    let maxArea = -1;
+    let bestIndex = bucketStart;
+    const px = prevIndex;
+    const py = values[prevIndex];
+    for (let j = bucketStart; j < bucketEnd; j++) {
+      const area = Math.abs(
+        (px - avgX) * (values[j] - py) - (px - j) * (avgY - py)
+      ) * 0.5;
+      if (area > maxArea) {
+        maxArea = area;
+        bestIndex = j;
+      }
+    }
+    sampled.push({ index: bestIndex, value: values[bestIndex] });
+    prevIndex = bestIndex;
+  }
+  sampled.push({ index: len - 1, value: values[len - 1] });
+  return sampled;
+}
+function minMax(values, threshold) {
+  const len = values.length;
+  if (len <= threshold) {
+    return values.map((v, i) => ({ index: i, value: v }));
+  }
+  const sampled = [];
+  const bucketSize = len / (threshold / 2);
+  sampled.push({ index: 0, value: values[0] });
+  for (let i = 0; i < threshold / 2 - 1; i++) {
+    const start = Math.floor(i * bucketSize);
+    const end = Math.min(Math.floor((i + 1) * bucketSize), len);
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    let minIdx = start;
+    let maxIdx = start;
+    for (let j = start; j < end; j++) {
+      const v = values[j];
+      if (v < minVal) {
+        minVal = v;
+        minIdx = j;
+      }
+      if (v > maxVal) {
+        maxVal = v;
+        maxIdx = j;
+      }
+    }
+    if (minIdx < maxIdx) {
+      sampled.push({ index: minIdx, value: minVal });
+      sampled.push({ index: maxIdx, value: maxVal });
+    } else {
+      sampled.push({ index: maxIdx, value: maxVal });
+      sampled.push({ index: minIdx, value: minVal });
+    }
+  }
+  sampled.push({ index: len - 1, value: values[len - 1] });
+  return sampled;
+}
+function getDecimatedIndices(values, threshold, algo) {
+  if (algo === "lttb") {
+    return lttb(values, threshold).map((p) => p.index);
+  }
+  return minMax(values, threshold).map((p) => p.index);
+}
+
+// src/layout/compute.ts
+function computeLayout(width, height, options, data) {
+  const [pt, pr, pb, pl] = options.padding;
+  let top = pt;
+  let right = pr;
+  let bottom = pb;
+  let left = pl;
+  if (options.yAxis) {
+    const maxLabel = estimateYLabelWidth(data, options);
+    left += maxLabel + 10;
+  }
+  if (options.yLabel) {
+    left += options.fontSize + 4;
+  }
+  if (options.xAxis) {
+    bottom += options.fontSize + 8;
+  }
+  if (options.xLabel) {
+    bottom += options.fontSize + 4;
+  }
+  if (options.legend) {
+    switch (options.legend) {
+      case "top":
+        top += 20;
+        break;
+      case "bottom":
+        bottom += 20;
+        break;
+      case "left":
+        left += 80;
+        break;
+      case "right":
+        right += 80;
+        break;
+    }
+  }
+  const area = {
+    x: left,
+    y: top,
+    width: Math.max(0, width - left - right),
+    height: Math.max(0, height - top - bottom)
+  };
+  return { area, margins: { top, right, bottom, left } };
+}
+function estimateYLabelWidth(data, options) {
+  const { yMin, yMax } = data.bounds;
+  const labels = [options.yFormat(yMin), options.yFormat(yMax)];
+  const maxLen = Math.max(...labels.map((l) => l.length));
+  return maxLen * (options.fontSize * 0.55);
+}
+
+// src/layout/responsive.ts
+function observeResize(element, callback) {
+  if (typeof ResizeObserver === "undefined") return () => {
+  };
+  const observer = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) return;
+    const { width, height } = entry.contentRect;
+    if (width > 0 && height > 0) {
+      callback(Math.floor(width), Math.floor(height));
+    }
+  });
+  observer.observe(element);
+  return () => observer.disconnect();
+}
+
+// src/render/tree.ts
+function group(children, attrs) {
+  return { type: "group", children, attrs };
+}
+function path(d, attrs) {
+  return { type: "path", d, attrs };
+}
+function rect(x, y, width, height, attrs) {
+  return { type: "rect", x, y, width, height, rx: attrs?.rx, ry: attrs?.ry, attrs };
+}
+function circle(cx, cy, r, attrs) {
+  return { type: "circle", cx, cy, r, attrs };
+}
+function line(x1, y1, x2, y2, attrs) {
+  return { type: "line", x1, y1, x2, y2, attrs };
+}
+function text(x, y, content, attrs) {
+  return { type: "text", x, y, content, attrs };
+}
+function defs(children) {
+  return { type: "defs", children };
+}
+function clipPathDef(id, children) {
+  return { type: "clipPath", id, children };
+}
+var PathBuilder = class {
+  constructor() {
+    this.cmds = [];
+  }
+  moveTo(x, y) {
+    this.cmds.push(`M${n(x)},${n(y)}`);
+    return this;
+  }
+  lineTo(x, y) {
+    this.cmds.push(`L${n(x)},${n(y)}`);
+    return this;
+  }
+  curveTo(cx1, cy1, cx2, cy2, x, y) {
+    this.cmds.push(`C${n(cx1)},${n(cy1)},${n(cx2)},${n(cy2)},${n(x)},${n(y)}`);
+    return this;
+  }
+  quadTo(cx, cy, x, y) {
+    this.cmds.push(`Q${n(cx)},${n(cy)},${n(x)},${n(y)}`);
+    return this;
+  }
+  arc(rx, ry, rot, large, sweep, x, y) {
+    this.cmds.push(`A${n(rx)},${n(ry)},${rot},${large ? 1 : 0},${sweep ? 1 : 0},${n(x)},${n(y)}`);
+    return this;
+  }
+  hTo(x) {
+    this.cmds.push(`H${n(x)}`);
+    return this;
+  }
+  vTo(y) {
+    this.cmds.push(`V${n(y)}`);
+    return this;
+  }
+  close() {
+    this.cmds.push("Z");
+    return this;
+  }
+  build() {
+    return this.cmds.join("");
+  }
+  reset() {
+    this.cmds = [];
+    return this;
+  }
+};
+function n(v) {
+  return Number.isInteger(v) ? String(v) : v.toFixed(2);
+}
+
+// src/axis/axis.ts
+function renderXAxis(scale, area, options, theme) {
+  const nodes = [];
+  const y = area.y + area.height;
+  if (options.xAxis) {
+    nodes.push(line(area.x, y, area.x + area.width, y, {
+      class: "chartts-x-axis",
+      stroke: `var(${CSS_PREFIX}-axis)`,
+      strokeWidth: theme.axisWidth
+    }));
+  }
+  const ticks = scale.ticks(options.xTicks || void 0);
+  for (const tick of ticks) {
+    const x = tick.position;
+    if (x < area.x - 1 || x > area.x + area.width + 1) continue;
+    nodes.push(line(x, y, x, y + 4, {
+      class: "chartts-x-tick",
+      stroke: `var(${CSS_PREFIX}-axis)`,
+      strokeWidth: theme.axisWidth
+    }));
+    nodes.push(text(x, y + 14, tick.label, {
+      class: "chartts-x-label",
+      fill: `var(${CSS_PREFIX}-text-muted)`,
+      textAnchor: "middle",
+      fontSize: theme.fontSizeSmall,
+      fontFamily: `var(${CSS_PREFIX}-font-family)`
+    }));
+  }
+  if (options.xLabel) {
+    nodes.push(text(
+      area.x + area.width / 2,
+      y + 30,
+      options.xLabel,
+      {
+        class: "chartts-x-axis-label",
+        fill: `var(${CSS_PREFIX}-text)`,
+        textAnchor: "middle",
+        fontSize: theme.fontSize,
+        fontFamily: `var(${CSS_PREFIX}-font-family)`,
+        fontWeight: 500
+      }
+    ));
+  }
+  return group(nodes, { class: "chartts-x-axis-group" });
+}
+function renderYAxis(scale, area, options, theme) {
+  const nodes = [];
+  if (options.yAxis) {
+    nodes.push(line(area.x, area.y, area.x, area.y + area.height, {
+      class: "chartts-y-axis",
+      stroke: `var(${CSS_PREFIX}-axis)`,
+      strokeWidth: theme.axisWidth
+    }));
+  }
+  const ticks = scale.ticks(options.yTicks);
+  for (const tick of ticks) {
+    const y = tick.position;
+    if (y < area.y - 1 || y > area.y + area.height + 1) continue;
+    nodes.push(line(area.x - 4, y, area.x, y, {
+      class: "chartts-y-tick",
+      stroke: `var(${CSS_PREFIX}-axis)`,
+      strokeWidth: theme.axisWidth
+    }));
+    nodes.push(text(area.x - 7, y, tick.label, {
+      class: "chartts-y-label",
+      fill: `var(${CSS_PREFIX}-text-muted)`,
+      textAnchor: "end",
+      dominantBaseline: "middle",
+      fontSize: theme.fontSizeSmall,
+      fontFamily: `var(${CSS_PREFIX}-font-family)`
+    }));
+  }
+  if (options.yLabel) {
+    nodes.push(text(
+      12,
+      area.y + area.height / 2,
+      options.yLabel,
+      {
+        class: "chartts-y-axis-label",
+        fill: `var(${CSS_PREFIX}-text)`,
+        textAnchor: "middle",
+        fontSize: theme.fontSize,
+        fontFamily: `var(${CSS_PREFIX}-font-family)`,
+        fontWeight: 500,
+        transform: `rotate(-90, 12, ${area.y + area.height / 2})`
+      }
+    ));
+  }
+  return group(nodes, { class: "chartts-y-axis-group" });
+}
+function renderGrid(xScale, yScale, area, options, theme) {
+  const nodes = [];
+  const dasharray = theme.gridStyle === "dashed" ? "4,4" : theme.gridStyle === "dotted" ? "2,2" : void 0;
+  if (options.yGrid) {
+    const ticks = yScale.ticks(options.yTicks);
+    for (const tick of ticks) {
+      if (tick.position < area.y - 1 || tick.position > area.y + area.height + 1) continue;
+      if (Math.abs(tick.position - area.y) < 1 || Math.abs(tick.position - (area.y + area.height)) < 1) continue;
+      nodes.push(line(area.x, tick.position, area.x + area.width, tick.position, {
+        class: "chartts-grid-h",
+        stroke: `var(${CSS_PREFIX}-grid)`,
+        strokeWidth: theme.gridWidth,
+        strokeDasharray: dasharray
+      }));
+    }
+  }
+  if (options.xGrid) {
+    const ticks = xScale.ticks(options.xTicks || void 0);
+    for (const tick of ticks) {
+      if (tick.position < area.x - 1 || tick.position > area.x + area.width + 1) continue;
+      if (Math.abs(tick.position - area.x) < 1 || Math.abs(tick.position - (area.x + area.width)) < 1) continue;
+      nodes.push(line(tick.position, area.y, tick.position, area.y + area.height, {
+        class: "chartts-grid-v",
+        stroke: `var(${CSS_PREFIX}-grid)`,
+        strokeWidth: theme.gridWidth,
+        strokeDasharray: dasharray
+      }));
+    }
+  }
+  return group(nodes, { class: "chartts-grid-group" });
+}
+
+// src/legend/legend.ts
+function renderLegend(data, area, options, theme) {
+  if (!options.legend || data.series.length <= 1) return null;
+  const items = [];
+  const pos = options.legend;
+  if (pos === "top" || pos === "bottom") {
+    const totalWidth = estimateLegendWidth(data, theme);
+    let x = area.x + Math.max(0, (area.width - totalWidth) / 2);
+    const y = pos === "top" ? area.y - 10 : area.y + area.height + 32;
+    for (const series of data.series) {
+      items.push(circle(x + 4, y, 3.5, {
+        class: "chartts-legend-dot",
+        fill: series.color
+      }));
+      items.push(text(x + 12, y, series.name, {
+        class: "chartts-legend-text",
+        fill: `var(${CSS_PREFIX}-text-muted)`,
+        dominantBaseline: "central",
+        fontSize: theme.fontSizeSmall,
+        fontFamily: `var(${CSS_PREFIX}-font-family)`
+      }));
+      x += 12 + series.name.length * (theme.fontSizeSmall * 0.58) + 14;
+    }
+  } else {
+    const x = pos === "left" ? 8 : area.x + area.width + 16;
+    let y = area.y + 4;
+    for (const series of data.series) {
+      items.push(circle(x + 4, y + 5, 3.5, {
+        class: "chartts-legend-dot",
+        fill: series.color
+      }));
+      items.push(text(x + 12, y + 5, series.name, {
+        class: "chartts-legend-text",
+        fill: `var(${CSS_PREFIX}-text-muted)`,
+        dominantBaseline: "central",
+        fontSize: theme.fontSizeSmall,
+        fontFamily: `var(${CSS_PREFIX}-font-family)`
+      }));
+      y += 18;
+    }
+  }
+  return group(items, {
+    class: "chartts-legend",
+    role: "list",
+    ariaLabel: "Chart legend"
+  });
+}
+function estimateLegendWidth(data, theme) {
+  let width = 0;
+  for (const series of data.series) {
+    width += 12 + series.name.length * (theme.fontSizeSmall * 0.58) + 14;
+  }
+  return width;
+}
+
+// src/render/effects.ts
+function extractHex(css) {
+  const match = css.match(/#[0-9a-fA-F]{3,8}/);
+  return match ? match[0] : css;
+}
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h;
+  return {
+    r: parseInt(full.substring(0, 2), 16),
+    g: parseInt(full.substring(2, 4), 16),
+    b: parseInt(full.substring(4, 6), 16)
+  };
+}
+function createEffectDefs(colors) {
+  let svg = "";
+  for (let i = 0; i < colors.length; i++) {
+    const hex = extractHex(colors[i]);
+    const { r, g, b } = hexToRgb(hex);
+    const rgba = (a) => `rgba(${r},${g},${b},${a})`;
+    svg += `<linearGradient id="chartts-area-${i}" x1="0" y1="0" x2="0" y2="1">`;
+    svg += `<stop offset="0%" stop-color="${hex}" stop-opacity="0.35"/>`;
+    svg += `<stop offset="100%" stop-color="${hex}" stop-opacity="0.02"/>`;
+    svg += `</linearGradient>`;
+    svg += `<linearGradient id="chartts-bar-${i}" x1="0" y1="0" x2="0" y2="1">`;
+    svg += `<stop offset="0%" stop-color="${hex}" stop-opacity="1"/>`;
+    svg += `<stop offset="100%" stop-color="${hex}" stop-opacity="0.75"/>`;
+    svg += `</linearGradient>`;
+    svg += `<radialGradient id="chartts-pglow-${i}">`;
+    svg += `<stop offset="0%" stop-color="${hex}" stop-opacity="0.4"/>`;
+    svg += `<stop offset="100%" stop-color="${hex}" stop-opacity="0"/>`;
+    svg += `</radialGradient>`;
+    svg += `<radialGradient id="chartts-pie-${i}" cx="30%" cy="30%" r="70%">`;
+    svg += `<stop offset="0%" stop-color="${hex}" stop-opacity="1"/>`;
+    svg += `<stop offset="100%" stop-color="${rgba(0.85)}"/>`;
+    svg += `</radialGradient>`;
+  }
+  svg += `<filter id="chartts-glow" filterUnits="userSpaceOnUse">`;
+  svg += `<feGaussianBlur in="SourceGraphic" stdDeviation="3.5" result="blur"/>`;
+  svg += `<feColorMatrix in="blur" type="saturate" values="2" result="saturated"/>`;
+  svg += `<feMerge><feMergeNode in="saturated"/><feMergeNode in="SourceGraphic"/></feMerge>`;
+  svg += `</filter>`;
+  svg += `<filter id="chartts-shadow">`;
+  svg += `<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/>`;
+  svg += `</filter>`;
+  return svg;
+}
+
+// src/tooltip/tooltip.ts
+function createTooltip(config, theme) {
+  let el2 = null;
+  function getOrCreate() {
+    if (el2) return el2;
+    el2 = document.createElement("div");
+    el2.className = "chartts-tooltip";
+    el2.style.cssText = `
+      position: absolute;
+      pointer-events: none;
+      z-index: 9999;
+      padding: 10px 14px;
+      border-radius: var(${CSS_PREFIX}-radius, 8px);
+      background: var(${CSS_PREFIX}-tooltip-bg, ${theme.tooltipBackground});
+      color: var(${CSS_PREFIX}-tooltip-text, ${theme.tooltipText});
+      border: 1px solid var(${CSS_PREFIX}-tooltip-border, ${theme.tooltipBorder});
+      font-family: var(${CSS_PREFIX}-font-family, ${theme.fontFamily});
+      font-size: var(${CSS_PREFIX}-font-size-sm, ${theme.fontSizeSmall}px);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
+      backdrop-filter: blur(12px) saturate(1.5);
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
+      transition: opacity 0.15s ease, transform 0.1s ease;
+      opacity: 0;
+      transform: translateY(4px);
+      white-space: nowrap;
+    `;
+    return el2;
+  }
+  function show(point, color, x, y, container) {
+    const tip = getOrCreate();
+    if (config.render) {
+      const result = config.render({ ...point, color });
+      if (typeof result === "string") {
+        tip.innerHTML = result;
+      } else {
+        tip.innerHTML = "";
+        tip.appendChild(result);
+      }
+    } else if (config.format) {
+      tip.textContent = config.format(point);
+    } else {
+      tip.innerHTML = `
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
+          <span style="width:8px;height:8px;border-radius:50%;background:${color};display:inline-block;box-shadow:0 0 6px ${color};"></span>
+          <span style="font-weight:600;letter-spacing:-0.01em;">${point.seriesName}</span>
+        </div>
+        <div style="display:flex;justify-content:space-between;align-items:baseline;gap:16px;">
+          <span style="color:var(${CSS_PREFIX}-text-muted, #6b7280);font-size:0.9em;">${point.label}</span>
+          <span style="font-size:1.15em;font-weight:700;font-variant-numeric:tabular-nums;">${point.value}</span>
+        </div>
+      `;
+    }
+    if (!tip.parentElement) {
+      container.style.position = "relative";
+      container.appendChild(tip);
+    }
+    const tipRect = tip.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    let left = x - tipRect.width / 2;
+    let top = y - tipRect.height - 12;
+    if (left < 0) left = 0;
+    if (left + tipRect.width > containerRect.width) left = containerRect.width - tipRect.width;
+    if (top < 0) top = y + 16;
+    tip.style.left = `${left}px`;
+    tip.style.top = `${top}px`;
+    tip.style.opacity = "1";
+    tip.style.transform = "translateY(0)";
+  }
+  function hide() {
+    if (el2) {
+      el2.style.opacity = "0";
+      el2.style.transform = "translateY(4px)";
+    }
+  }
+  function destroy() {
+    el2?.remove();
+    el2 = null;
+  }
+  return { show, hide, destroy };
+}
+
+// src/interaction/interaction.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function createInteractionLayer(chartType, getContext, getData, bus, tooltipConfig, theme, onClick, onHover, interactionState) {
+  let targetEl = null;
+  let container = null;
+  let tooltip = null;
+  let crosshairVLineEl = null;
+  let crosshairHLineEl = null;
+  let crosshairTipEl = null;
+  let crosshairYTipEl = null;
+  let crosshairDots = [];
+  let activePoint = null;
+  let activeCrosshairIndex = -1;
+  let linkedUnsubs = [];
+  let overlayEl = null;
+  let isCanvas = false;
+  if (tooltipConfig) {
+    tooltip = createTooltip(
+      typeof tooltipConfig === "object" ? tooltipConfig : { enabled: true },
+      theme
+    );
+  }
+  function getOverlay() {
+    if (isCanvas) return overlayEl;
+    return targetEl;
+  }
+  function syncOverlay() {
+    if (!overlayEl || !targetEl) return;
+    const w = targetEl.clientWidth || parseInt(targetEl.style.width) || 400;
+    const h = targetEl.clientHeight || parseInt(targetEl.style.height) || 300;
+    overlayEl.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    overlayEl.setAttribute("width", String(w));
+    overlayEl.setAttribute("height", String(h));
+  }
+  function getCrosshairConfig() {
+    try {
+      return getContext().options.crosshair;
+    } catch {
+      return false;
+    }
+  }
+  function ensureCrosshairVLine() {
+    if (crosshairVLineEl) return crosshairVLineEl;
+    crosshairVLineEl = document.createElementNS(SVG_NS, "line");
+    crosshairVLineEl.setAttribute("class", "chartts-crosshair-line chartts-crosshair-vline");
+    crosshairVLineEl.setAttribute("stroke", theme.textMuted);
+    crosshairVLineEl.setAttribute("stroke-width", "1");
+    crosshairVLineEl.setAttribute("stroke-dasharray", "4,3");
+    crosshairVLineEl.style.pointerEvents = "none";
+    crosshairVLineEl.style.opacity = "0";
+    crosshairVLineEl.style.transition = "opacity 0.12s ease";
+    return crosshairVLineEl;
+  }
+  function ensureCrosshairHLine() {
+    if (crosshairHLineEl) return crosshairHLineEl;
+    crosshairHLineEl = document.createElementNS(SVG_NS, "line");
+    crosshairHLineEl.setAttribute("class", "chartts-crosshair-line chartts-crosshair-hline");
+    crosshairHLineEl.setAttribute("stroke", theme.textMuted);
+    crosshairHLineEl.setAttribute("stroke-width", "1");
+    crosshairHLineEl.setAttribute("stroke-dasharray", "4,3");
+    crosshairHLineEl.style.pointerEvents = "none";
+    crosshairHLineEl.style.opacity = "0";
+    crosshairHLineEl.style.transition = "opacity 0.12s ease";
+    return crosshairHLineEl;
+  }
+  function ensureCrosshairTip() {
+    if (crosshairTipEl) return crosshairTipEl;
+    crosshairTipEl = document.createElement("div");
+    crosshairTipEl.className = "chartts-crosshair-tooltip";
+    crosshairTipEl.style.cssText = `
+      position: absolute;
+      pointer-events: none;
+      z-index: 9999;
+      padding: 10px 14px;
+      border-radius: var(${CSS_PREFIX}-radius, 8px);
+      background: var(${CSS_PREFIX}-tooltip-bg, ${theme.tooltipBackground});
+      color: var(${CSS_PREFIX}-tooltip-text, ${theme.tooltipText});
+      border: 1px solid var(${CSS_PREFIX}-tooltip-border, ${theme.tooltipBorder});
+      font-family: var(${CSS_PREFIX}-font-family, ${theme.fontFamily});
+      font-size: var(${CSS_PREFIX}-font-size-sm, ${theme.fontSizeSmall}px);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
+      backdrop-filter: blur(12px) saturate(1.5);
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
+      transition: opacity 0.15s ease, transform 0.1s ease;
+      opacity: 0;
+      transform: translateY(4px);
+      white-space: nowrap;
+    `;
+    return crosshairTipEl;
+  }
+  function ensureCrosshairYTip() {
+    if (crosshairYTipEl) return crosshairYTipEl;
+    crosshairYTipEl = document.createElement("div");
+    crosshairYTipEl.className = "chartts-crosshair-ytip";
+    crosshairYTipEl.style.cssText = `
+      position: absolute;
+      pointer-events: none;
+      z-index: 9998;
+      padding: 2px 6px;
+      border-radius: 3px;
+      background: ${theme.textMuted};
+      color: ${theme.tooltipBackground};
+      font-family: ${theme.fontFamily};
+      font-size: ${theme.fontSizeSmall - 1}px;
+      font-variant-numeric: tabular-nums;
+      opacity: 0;
+      transition: opacity 0.12s ease;
+      white-space: nowrap;
+    `;
+    return crosshairYTipEl;
+  }
+  function clearCrosshairDots() {
+    for (const d of crosshairDots) d.remove();
+    crosshairDots = [];
+  }
+  function showCrosshair(pointIndex, mouseX, mouseY, svgY) {
+    if (!targetEl || !container) return;
+    const overlay = getOverlay();
+    if (!overlay) return;
+    if (isCanvas) syncOverlay();
+    const ctx = getContext();
+    const data = getData();
+    const { area, xScale } = ctx;
+    const chConfig = getCrosshairConfig();
+    if (!chConfig) return;
+    const mode = chConfig.mode ?? "vertical";
+    const label = data.labels[pointIndex];
+    const xPos = xScale.map(label);
+    if (mode === "vertical" || mode === "both") {
+      const vline = ensureCrosshairVLine();
+      vline.setAttribute("x1", String(xPos));
+      vline.setAttribute("y1", String(area.y));
+      vline.setAttribute("x2", String(xPos));
+      vline.setAttribute("y2", String(area.y + area.height));
+      vline.style.opacity = "0.6";
+      if (!vline.parentElement) overlay.appendChild(vline);
+    }
+    if (mode === "horizontal" || mode === "both") {
+      const hline = ensureCrosshairHLine();
+      hline.setAttribute("x1", String(area.x));
+      hline.setAttribute("y1", String(svgY));
+      hline.setAttribute("x2", String(area.x + area.width));
+      hline.setAttribute("y2", String(svgY));
+      hline.style.opacity = "0.6";
+      if (!hline.parentElement) overlay.appendChild(hline);
+      const yVal = ctx.yScale.invert(svgY);
+      const yTip = ensureCrosshairYTip();
+      yTip.textContent = ctx.options.yFormat(yVal);
+      if (!yTip.parentElement) {
+        container.style.position = "relative";
+        container.appendChild(yTip);
+      }
+      yTip.style.left = "0px";
+      yTip.style.top = `${mouseY - 10}px`;
+      yTip.style.opacity = "1";
+    }
+    if (mode === "vertical" || mode === "both") {
+      clearCrosshairDots();
+      for (const series of data.series) {
+        const val = series.values[pointIndex];
+        if (val == null || isNaN(val)) continue;
+        const yPos = ctx.yScale.map(val);
+        const dot = document.createElementNS(SVG_NS, "circle");
+        dot.setAttribute("cx", String(xPos));
+        dot.setAttribute("cy", String(yPos));
+        dot.setAttribute("r", "5");
+        dot.setAttribute("fill", series.color);
+        dot.setAttribute("stroke", theme.tooltipBackground);
+        dot.setAttribute("stroke-width", "2");
+        dot.style.pointerEvents = "none";
+        dot.style.transition = "cx 0.1s ease, cy 0.1s ease";
+        overlay.appendChild(dot);
+        crosshairDots.push(dot);
+      }
+    }
+    const tip = ensureCrosshairTip();
+    let html = `<div style="font-weight:600;margin-bottom:6px;letter-spacing:-0.01em;">${formatLabel(label)}</div>`;
+    for (const series of data.series) {
+      const val = series.values[pointIndex];
+      if (val == null || isNaN(val)) continue;
+      html += `<div style="display:flex;align-items:center;gap:8px;margin-top:3px;">
+        <span style="width:8px;height:8px;border-radius:50%;background:${series.color};display:inline-block;box-shadow:0 0 6px ${series.color};flex-shrink:0;"></span>
+        <span style="flex:1;color:var(${CSS_PREFIX}-text-muted, #6b7280);">${series.name}</span>
+        <span style="font-weight:700;font-variant-numeric:tabular-nums;margin-left:12px;">${ctx.options.yFormat(val)}</span>
+      </div>`;
+    }
+    tip.innerHTML = html;
+    if (!tip.parentElement) {
+      container.style.position = "relative";
+      container.appendChild(tip);
+    }
+    requestAnimationFrame(() => {
+      if (!tip.parentElement || !container) return;
+      const tipRect = tip.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      let left = mouseX + 16;
+      let top = mouseY - tipRect.height / 2;
+      if (left + tipRect.width > containerRect.width) left = mouseX - tipRect.width - 16;
+      if (top < 0) top = 4;
+      if (top + tipRect.height > containerRect.height) top = containerRect.height - tipRect.height - 4;
+      tip.style.left = `${left}px`;
+      tip.style.top = `${top}px`;
+      tip.style.opacity = "1";
+      tip.style.transform = "translateY(0)";
+    });
+    activeCrosshairIndex = pointIndex;
+    bus.emit("crosshair:move", { x: xPos, label });
+  }
+  function hideCrosshair() {
+    if (crosshairVLineEl) crosshairVLineEl.style.opacity = "0";
+    if (crosshairHLineEl) crosshairHLineEl.style.opacity = "0";
+    if (crosshairTipEl) {
+      crosshairTipEl.style.opacity = "0";
+      crosshairTipEl.style.transform = "translateY(4px)";
+    }
+    if (crosshairYTipEl) {
+      crosshairYTipEl.style.opacity = "0";
+    }
+    clearCrosshairDots();
+    activeCrosshairIndex = -1;
+    bus.emit("crosshair:hide", void 0);
+  }
+  function formatLabel(label) {
+    try {
+      return getContext().options.xFormat(label);
+    } catch {
+      return String(label);
+    }
+  }
+  function nearestLabelIndex(svgX) {
+    const data = getData();
+    const ctx = getContext();
+    let bestIdx = 0;
+    let bestDist = Infinity;
+    for (let i = 0; i < data.labels.length; i++) {
+      const pos = ctx.xScale.map(data.labels[i]);
+      const dist = Math.abs(svgX - pos);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestIdx = i;
+      }
+    }
+    return bestIdx;
+  }
+  function toChartCoords(el2, clientX, clientY) {
+    const r = el2.getBoundingClientRect();
+    const x = clientX - r.left;
+    const y = clientY - r.top;
+    if (el2 instanceof HTMLCanvasElement) {
+      return { x, y, svgX: x, svgY: y };
+    }
+    const viewBox = el2.getAttribute("viewBox")?.split(" ").map(Number) ?? [0, 0, r.width, r.height];
+    const scaleX = viewBox[2] / r.width;
+    const scaleY = viewBox[3] / r.height;
+    return { x, y, svgX: x * scaleX, svgY: y * scaleY };
+  }
+  function onMouseMove(e) {
+    if (!targetEl || !container) return;
+    if (interactionState?.isPanning) return;
+    const { x, y, svgX, svgY } = toChartCoords(targetEl, e.clientX, e.clientY);
+    const ctx = getContext();
+    const chConfig = getCrosshairConfig();
+    if (chConfig) {
+      const { area } = ctx;
+      if (svgX >= area.x && svgX <= area.x + area.width && svgY >= area.y && svgY <= area.y + area.height) {
+        const idx = nearestLabelIndex(svgX);
+        if (idx !== activeCrosshairIndex) {
+          showCrosshair(idx, x, y, svgY);
+        } else {
+          if (chConfig.mode === "horizontal" || chConfig.mode === "both") {
+            if (crosshairHLineEl) {
+              crosshairHLineEl.setAttribute("y1", String(svgY));
+              crosshairHLineEl.setAttribute("y2", String(svgY));
+            }
+            if (crosshairYTipEl) {
+              const yVal = ctx.yScale.invert(svgY);
+              crosshairYTipEl.textContent = ctx.options.yFormat(yVal);
+              crosshairYTipEl.style.top = `${y - 10}px`;
+            }
+          }
+          if (crosshairTipEl) {
+            const tipRect = crosshairTipEl.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+            let left = x + 16;
+            let top = y - tipRect.height / 2;
+            if (left + tipRect.width > containerRect.width) left = x - tipRect.width - 16;
+            if (top < 0) top = 4;
+            if (top + tipRect.height > containerRect.height) top = containerRect.height - tipRect.height - 4;
+            crosshairTipEl.style.left = `${left}px`;
+            crosshairTipEl.style.top = `${top}px`;
+          }
+        }
+      } else {
+        hideCrosshair();
+      }
+      return;
+    }
+    const hit = chartType.hitTest(ctx, svgX, svgY);
+    if (hit) {
+      const data = getData();
+      const series = data.series[hit.seriesIndex];
+      const point = {
+        label: data.labels[hit.pointIndex],
+        value: series.values[hit.pointIndex],
+        index: hit.pointIndex,
+        seriesIndex: hit.seriesIndex,
+        seriesName: series.name
+      };
+      if (!activePoint || activePoint.seriesIndex !== hit.seriesIndex || activePoint.pointIndex !== hit.pointIndex) {
+        clearHighlights();
+        highlightPoint(hit.seriesIndex, hit.pointIndex, svgX, svgY);
+        activePoint = { seriesIndex: hit.seriesIndex, pointIndex: hit.pointIndex };
+        bus.emit("point:enter", { point, event: e });
+        onHover?.(point, e);
+      }
+      if (tooltip) {
+        tooltip.show(point, series.color, x, y, container);
+        bus.emit("tooltip:show", { point, x: svgX, y: svgY });
+      }
+    } else {
+      if (activePoint) {
+        clearHighlights();
+        activePoint = null;
+        bus.emit("point:leave", { event: e });
+        onHover?.(null, e);
+      }
+      if (tooltip) {
+        tooltip.hide();
+        bus.emit("tooltip:hide", void 0);
+      }
+    }
+  }
+  function onMouseLeave(e) {
+    clearHighlights();
+    activePoint = null;
+    tooltip?.hide();
+    hideCrosshair();
+    bus.emit("point:leave", { event: e });
+    onHover?.(null, e);
+  }
+  function onClickHandler(e) {
+    if (!targetEl || !onClick) return;
+    const { svgX, svgY } = toChartCoords(targetEl, e.clientX, e.clientY);
+    const ctx = getContext();
+    const hit = chartType.hitTest(ctx, svgX, svgY);
+    if (hit) {
+      const data = getData();
+      const series = data.series[hit.seriesIndex];
+      const point = {
+        label: data.labels[hit.pointIndex],
+        value: series.values[hit.pointIndex],
+        index: hit.pointIndex,
+        seriesIndex: hit.seriesIndex,
+        seriesName: series.name
+      };
+      onClick(point, e);
+      bus.emit("point:click", { point, event: e });
+    }
+  }
+  function setupLinkedCrosshair() {
+    const unsub1 = bus.on("crosshair:move", ((payload) => {
+      if (!targetEl || !container) return;
+      const data = getData();
+      const idx = data.labels.findIndex((l) => String(l) === String(payload.label));
+      if (idx < 0) return;
+      if (idx === activeCrosshairIndex) return;
+      const ctx = getContext();
+      const xPos = ctx.xScale.map(data.labels[idx]);
+      const rect2 = targetEl.getBoundingClientRect();
+      showCrosshair(idx, xPos, rect2.height / 2, ctx.area.y + ctx.area.height / 2);
+    }));
+    const unsub2 = bus.on("crosshair:hide", (() => {
+      hideCrosshair();
+    }));
+    linkedUnsubs.push(unsub1, unsub2);
+  }
+  function highlightPoint(seriesIndex, pointIndex, hitX, hitY) {
+    const overlay = getOverlay();
+    if (!overlay) return;
+    if (isCanvas) {
+      if (hitX == null || hitY == null) return;
+      syncOverlay();
+      const data = getData();
+      const series = data.series[seriesIndex];
+      if (!series) return;
+      const glow = document.createElementNS(SVG_NS, "circle");
+      glow.setAttribute("cx", String(hitX));
+      glow.setAttribute("cy", String(hitY));
+      glow.setAttribute("r", "12");
+      glow.setAttribute("fill", "none");
+      glow.setAttribute("stroke", series.color);
+      glow.setAttribute("stroke-width", "2");
+      glow.setAttribute("opacity", "0.3");
+      glow.setAttribute("class", "chartts-canvas-highlight");
+      glow.style.pointerEvents = "none";
+      overlay.appendChild(glow);
+      const dot = document.createElementNS(SVG_NS, "circle");
+      dot.setAttribute("cx", String(hitX));
+      dot.setAttribute("cy", String(hitY));
+      dot.setAttribute("r", "5");
+      dot.setAttribute("fill", series.color);
+      dot.setAttribute("stroke", "#fff");
+      dot.setAttribute("stroke-width", "2");
+      dot.setAttribute("class", "chartts-canvas-highlight");
+      dot.style.pointerEvents = "none";
+      overlay.appendChild(dot);
+      return;
+    }
+    const svg = targetEl;
+    const target = svg.querySelector(
+      `[data-series="${seriesIndex}"][data-index="${pointIndex}"]`
+    );
+    if (target?.classList.contains("chartts-point")) {
+      target.style.transition = "r 0.15s ease, stroke-width 0.15s ease";
+      target.setAttribute("r", "6");
+      target.setAttribute("stroke-width", "3");
+    }
+    const targetGroup = target?.closest(".chartts-series");
+    svg.querySelectorAll(".chartts-series").forEach((el2) => {
+      if (el2 !== targetGroup) {
+        el2.style.opacity = "0.3";
+        el2.style.transition = "opacity 0.15s ease";
+      }
+    });
+  }
+  function clearHighlights() {
+    if (isCanvas) {
+      overlayEl?.querySelectorAll(".chartts-canvas-highlight").forEach((el2) => el2.remove());
+      return;
+    }
+    const svg = targetEl;
+    if (!svg) return;
+    svg.querySelectorAll(".chartts-point").forEach((p) => {
+      const el2 = p;
+      el2.setAttribute("r", el2.getAttribute("data-original-r") || "3.5");
+      el2.setAttribute("stroke-width", "2");
+    });
+    svg.querySelectorAll(".chartts-series").forEach((el2) => {
+      el2.style.opacity = "";
+    });
+  }
+  return {
+    attach(svgEl, containerEl) {
+      targetEl = svgEl;
+      container = containerEl;
+      isCanvas = svgEl instanceof HTMLCanvasElement;
+      if (isCanvas) {
+        containerEl.style.position = "relative";
+        overlayEl = document.createElementNS(SVG_NS, "svg");
+        const w = svgEl.clientWidth || parseInt(svgEl.style.width) || 400;
+        const h = svgEl.clientHeight || parseInt(svgEl.style.height) || 300;
+        overlayEl.setAttribute("viewBox", `0 0 ${w} ${h}`);
+        overlayEl.setAttribute("width", String(w));
+        overlayEl.setAttribute("height", String(h));
+        overlayEl.style.cssText = "position:absolute;top:0;left:0;pointer-events:none;overflow:visible;";
+        containerEl.appendChild(overlayEl);
+      }
+      svgEl.style.cursor = "crosshair";
+      const el2 = svgEl;
+      el2.addEventListener("mousemove", onMouseMove);
+      el2.addEventListener("mouseleave", onMouseLeave);
+      el2.addEventListener("click", onClickHandler);
+      setupLinkedCrosshair();
+    },
+    detach() {
+      if (!targetEl) return;
+      const el2 = targetEl;
+      el2.removeEventListener("mousemove", onMouseMove);
+      el2.removeEventListener("mouseleave", onMouseLeave);
+      el2.removeEventListener("click", onClickHandler);
+      for (const unsub of linkedUnsubs) unsub();
+      linkedUnsubs = [];
+    },
+    destroy() {
+      this.detach();
+      tooltip?.destroy();
+      crosshairVLineEl?.remove();
+      crosshairHLineEl?.remove();
+      crosshairTipEl?.remove();
+      crosshairYTipEl?.remove();
+      clearCrosshairDots();
+      overlayEl?.remove();
+      overlayEl = null;
+      targetEl = null;
+      container = null;
+    }
+  };
+}
+
+// src/render/states.ts
+function renderEmptyState(width, height, theme, message = "No data to display") {
+  const cx = width / 2;
+  const cy = height / 2;
+  return [group([
+    // Empty chart icon — simple bar chart outline
+    ...emptyBars(cx, cy - 16, theme),
+    // Message
+    text(cx, cy + 28, message, {
+      class: "chartts-state-text",
+      fill: theme.textMuted,
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      fontSize: theme.fontSize,
+      fontFamily: theme.fontFamily
+    })
+  ], { class: "chartts-state chartts-state-empty" })];
+}
+function renderLoadingState(width, height, theme) {
+  const barCount = 5;
+  const padding = width * 0.15;
+  const barAreaW = width - padding * 2;
+  const barW = barAreaW / barCount * 0.6;
+  const gap = barAreaW / barCount * 0.4;
+  const maxH = height * 0.6;
+  const baseY = height * 0.8;
+  const bars = [];
+  const heights = [0.6, 0.85, 0.45, 0.95, 0.7];
+  for (let i = 0; i < barCount; i++) {
+    const x = padding + i * (barW + gap);
+    const h = maxH * heights[i];
+    const y = baseY - h;
+    bars.push(rect(x, y, barW, h, {
+      class: "chartts-skeleton-bar",
+      fill: theme.gridColor,
+      rx: 3,
+      ry: 3,
+      opacity: 0.6
+    }));
+  }
+  bars.push(rect(padding, baseY, barAreaW, 1, {
+    fill: theme.axisColor,
+    opacity: 0.4
+  }));
+  return [group(bars, { class: "chartts-state chartts-state-loading" })];
+}
+function renderErrorState(width, height, theme, message = "Failed to render chart") {
+  const cx = width / 2;
+  const cy = height / 2;
+  return [group([
+    // Error icon — circle with exclamation
+    ...errorIcon(cx, cy - 18, theme),
+    // Message
+    text(cx, cy + 24, message, {
+      class: "chartts-state-text",
+      fill: theme.textMuted,
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      fontSize: theme.fontSize,
+      fontFamily: theme.fontFamily
+    })
+  ], { class: "chartts-state chartts-state-error" })];
+}
+function emptyBars(cx, cy, theme) {
+  const barW = 6;
+  const gap = 4;
+  const heights = [14, 22, 10, 18];
+  const totalW = heights.length * barW + (heights.length - 1) * gap;
+  const startX = cx - totalW / 2;
+  return heights.map(
+    (h, i) => rect(startX + i * (barW + gap), cy - h / 2, barW, h, {
+      fill: theme.gridColor,
+      rx: 1,
+      ry: 1
+    })
+  );
+}
+function errorIcon(cx, cy, theme) {
+  return [
+    // Circle outline
+    rect(cx - 14, cy - 14, 28, 28, {
+      fill: "none",
+      stroke: theme.textMuted,
+      strokeWidth: 1.5,
+      rx: 14,
+      ry: 14,
+      opacity: 0.6
+    }),
+    // Exclamation line
+    rect(cx - 1, cy - 7, 2, 10, {
+      fill: theme.textMuted,
+      opacity: 0.6
+    }),
+    // Exclamation dot
+    rect(cx - 1, cy + 5, 2, 2, {
+      fill: theme.textMuted,
+      opacity: 0.6
+    })
+  ];
+}
+
+// src/api/create.ts
+function createChart(target, chartType, data, options = {}) {
+  const container = typeof target === "string" ? document.querySelector(target) : target;
+  if (!container) {
+    throw new Error(`[chartts] Target element not found: ${target}`);
+  }
+  let currentData = data;
+  let currentOptions = resolveOptions(options, data.series.length);
+  let currentTheme = resolveTheme(currentOptions.theme);
+  let width = currentOptions.width || container.clientWidth || 400;
+  let height = currentOptions.height || container.clientHeight || 300;
+  let lastCtx = null;
+  let lastPrepared = null;
+  let chartState = "ready";
+  let stateMessage;
+  let resolvedRenderer = currentOptions.renderer;
+  if (resolvedRenderer === "auto") {
+    const totalPoints = data.series.reduce((sum, s) => sum + s.values.length, 0);
+    resolvedRenderer = totalPoints > 1e5 ? "webgl" : totalPoints > 5e3 ? "canvas" : "svg";
+  }
+  const useCanvas = resolvedRenderer === "canvas" || resolvedRenderer === "webgl";
+  const bus = createEventBus();
+  const renderer = resolvedRenderer === "webgl" ? createWebGLRenderer(currentTheme) : resolvedRenderer === "canvas" ? createCanvasRenderer(currentTheme) : createSVGRenderer();
+  const root = renderer.createRoot(container, width, height, {
+    class: `chartts ${currentOptions.className}`.trim(),
+    role: "img",
+    ariaLabel: currentOptions.ariaLabel
+  });
+  if (!useCanvas) {
+    applyTheme(root.element, currentTheme);
+  } else {
+    container.style.position = "relative";
+    container.style.background = currentTheme.background;
+  }
+  const interactionState = { isPanning: false };
+  const interaction = createInteractionLayer(
+    chartType,
+    () => lastCtx,
+    () => lastPrepared,
+    bus,
+    currentOptions.tooltip,
+    currentTheme,
+    currentOptions.onClick,
+    currentOptions.onHover,
+    interactionState
+  );
+  if (useCanvas) {
+    interaction.attach(root.element, container);
+  } else {
+    interaction.attach(root.element, container);
+  }
+  let zoomPan = null;
+  if (currentOptions.zoom || currentOptions.pan) {
+    zoomPan = createZoomPan(
+      {
+        x: true,
+        y: false,
+        wheel: currentOptions.zoom,
+        drag: currentOptions.pan,
+        pinch: currentOptions.zoom
+      },
+      () => {
+        render();
+        const state = zoomPan.getState();
+        bus.emit("zoom:change", state);
+      },
+      interactionState
+    );
+    zoomPan.attach(
+      root.element,
+      () => lastCtx.area,
+      () => ({ xScale: lastCtx.xScale, yScale: lastCtx.yScale })
+    );
+  }
+  let brush = null;
+  if (currentOptions.brush) {
+    brush = createBrush(
+      {},
+      bus,
+      root.element,
+      () => lastCtx.area,
+      () => lastCtx.xScale,
+      () => lastPrepared,
+      !!currentOptions.pan
+    );
+  }
+  let debug = null;
+  if (options.debug) {
+    debug = createDebugPanel();
+    debug.attach(container, root.element);
+  }
+  const stopResize = currentOptions.width && currentOptions.height ? () => {
+  } : observeResize(container, (w, h) => {
+    width = w;
+    height = h;
+    render();
+    bus.emit("resize", { width: w, height: h });
+  });
+  const stopThemeWatch = currentOptions.theme === "auto" ? watchScheme(() => {
+    currentTheme = resolveTheme("auto");
+    applyTheme(root.element, currentTheme);
+    render();
+  }) : () => {
+  };
+  render();
+  function render() {
+    if (useCanvas) {
+      const canvas = root.element;
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      const ctx2d = canvas.getContext("2d");
+      ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
+    } else {
+      root.element.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    }
+    if (chartState === "loading") {
+      renderer.render(root, renderLoadingState(width, height, currentTheme));
+      return;
+    }
+    if (chartState === "error") {
+      renderer.render(root, renderErrorState(width, height, currentTheme, stateMessage));
+      return;
+    }
+    const isEmpty = !currentData.series.length || currentData.series.every((s) => s.values.length === 0);
+    if (chartState === "empty" || isEmpty) {
+      renderer.render(root, renderEmptyState(width, height, currentTheme, stateMessage));
+      return;
+    }
+    const decimateOpt = options.decimate;
+    const dataForRender = decimateOpt ? decimateData(currentData, typeof decimateOpt === "object" ? decimateOpt : { threshold: Math.max(width * 2, 500) }) : currentData;
+    const prepared = chartType.prepareData(dataForRender, currentOptions);
+    lastPrepared = prepared;
+    const suppressAxes = NO_AXES_TYPES.has(chartType.type);
+    const layoutOpts = suppressAxes ? { ...currentOptions, xAxis: false, yAxis: false, xLabel: "", yLabel: "", legend: false, padding: [4, 4, 4, 4] } : currentOptions;
+    const { area } = computeLayout(width, height, layoutOpts, prepared);
+    const useBand = BAND_SCALE_TYPES.has(chartType.type);
+    const xScale = createCategoricalScale({
+      categories: prepared.labels,
+      range: [area.x, area.x + area.width],
+      format: currentOptions.xFormat,
+      band: useBand
+    });
+    const yScale = createLinearScale({
+      domain: [prepared.bounds.yMin, prepared.bounds.yMax],
+      range: [area.y + area.height, area.y],
+      nice: true,
+      format: currentOptions.yFormat
+    });
+    if (zoomPan) {
+      zoomPan.applyToScales(xScale, yScale, area);
+    }
+    const ctx = {
+      data: prepared,
+      options: currentOptions,
+      area,
+      xScale,
+      yScale,
+      theme: currentTheme
+    };
+    lastCtx = ctx;
+    const clipId = "chartts-clip";
+    const nodes = [];
+    nodes.push(defs([
+      clipPathDef(clipId, [rect(area.x, area.y, area.width, area.height)])
+    ]));
+    if (!suppressAxes) {
+      nodes.push(renderGrid(xScale, yScale, area, currentOptions, currentTheme));
+      nodes.push(renderXAxis(xScale, area, currentOptions, currentTheme));
+      nodes.push(renderYAxis(yScale, area, currentOptions, currentTheme));
+    }
+    const chartNodes = chartType.render(ctx);
+    nodes.push(group(chartNodes, { class: "chartts-content", clipPath: clipId }));
+    if (!suppressAxes) {
+      const legend = renderLegend(prepared, area, currentOptions, currentTheme);
+      if (legend) nodes.push(legend);
+    }
+    renderer.render(root, nodes);
+    if (!useCanvas) {
+      const NS2 = "http://www.w3.org/2000/svg";
+      let fxDefs = root.element.querySelector("defs.chartts-fx");
+      if (!fxDefs) {
+        fxDefs = document.createElementNS(NS2, "defs");
+        fxDefs.classList.add("chartts-fx");
+        root.element.insertBefore(fxDefs, root.element.firstChild);
+      }
+      fxDefs.innerHTML = createEffectDefs(currentOptions.colors);
+    }
+    debug?.update(ctx, nodes);
+  }
+  const instance = {
+    setData(newData) {
+      const prev = currentData;
+      currentData = newData;
+      currentOptions = resolveOptions(options, newData.series.length);
+      chartState = "ready";
+      stateMessage = void 0;
+      render();
+      bus.emit("data:change", { previous: prev, current: newData });
+    },
+    setOptions(newOpts) {
+      Object.assign(options, newOpts);
+      currentOptions = resolveOptions(options, currentData.series.length);
+      currentTheme = resolveTheme(currentOptions.theme);
+      applyTheme(root.element, currentTheme);
+      render();
+    },
+    getData() {
+      return currentData;
+    },
+    getOptions() {
+      return currentOptions;
+    },
+    setLoading(loading = true) {
+      chartState = loading ? "loading" : "ready";
+      stateMessage = void 0;
+      render();
+    },
+    setError(message) {
+      chartState = "error";
+      stateMessage = message;
+      render();
+    },
+    setEmpty(message) {
+      chartState = "empty";
+      stateMessage = message;
+      render();
+    },
+    toSVG() {
+      if (useCanvas) throw new Error("[chartts] toSVG() is not available with canvas renderer");
+      return root.element.outerHTML;
+    },
+    async toPNG(opts) {
+      if (useCanvas) {
+        const canvas2 = root.element;
+        return new Promise((resolve, reject) => {
+          canvas2.toBlob((b) => b ? resolve(b) : reject(new Error("PNG export failed")), "image/png");
+        });
+      }
+      const scale = opts?.scale ?? 2;
+      const canvas = document.createElement("canvas");
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      const canvasCtx = canvas.getContext("2d");
+      const svgStr = this.toSVG();
+      const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const img = new Image();
+      img.width = width * scale;
+      img.height = height * scale;
+      return new Promise((resolve, reject) => {
+        img.onload = () => {
+          canvasCtx.drawImage(img, 0, 0, width * scale, height * scale);
+          URL.revokeObjectURL(url);
+          canvas.toBlob((b) => b ? resolve(b) : reject(new Error("PNG export failed")), "image/png");
+        };
+        img.onerror = reject;
+        img.src = url;
+      });
+    },
+    async toClipboard() {
+      const blob = await this.toPNG();
+      await navigator.clipboard.write([
+        new ClipboardItem({ "image/png": blob })
+      ]);
+    },
+    on(event, handler) {
+      return bus.on(event, handler);
+    },
+    resize(w, h) {
+      width = w;
+      height = h;
+      render();
+    },
+    resetZoom() {
+      if (zoomPan) {
+        zoomPan.reset();
+        bus.emit("zoom:reset", void 0);
+      }
+    },
+    destroy() {
+      stopResize();
+      stopThemeWatch();
+      interaction.destroy();
+      zoomPan?.destroy();
+      brush?.destroy();
+      debug?.destroy();
+      bus.emit("destroy", void 0);
+      bus.destroy();
+      renderer.destroy(root);
+    },
+    get element() {
+      return root.element;
+    },
+    get _bus() {
+      return bus;
+    }
+  };
+  return instance;
+}
+
+// src/render/string.ts
+function renderToString(chartType, data, options = {}) {
+  const width = options.width ?? 600;
+  const height = options.height ?? 400;
+  const resolved = resolveOptions({ ...options, width, height }, data.series.length);
+  const theme = resolveTheme(resolved.theme);
+  const prepared = chartType.prepareData(data, resolved);
+  const suppressAxes = NO_AXES_TYPES.has(chartType.type);
+  const layoutOpts = suppressAxes ? { ...resolved, xAxis: false, yAxis: false, xLabel: "", yLabel: "", legend: false, padding: [4, 4, 4, 4] } : resolved;
+  const { area } = computeLayout(width, height, layoutOpts, prepared);
+  const useBand = BAND_SCALE_TYPES.has(chartType.type);
+  const xScale = createCategoricalScale({
+    categories: prepared.labels,
+    range: [area.x, area.x + area.width],
+    format: resolved.xFormat,
+    band: useBand
+  });
+  const yScale = createLinearScale({
+    domain: [prepared.bounds.yMin, prepared.bounds.yMax],
+    range: [area.y + area.height, area.y],
+    nice: true,
+    format: resolved.yFormat
+  });
+  const ctx = { data: prepared, options: resolved, area, xScale, yScale, theme };
+  const clipId = "chartts-clip";
+  const nodes = [];
+  nodes.push(defs([
+    clipPathDef(clipId, [rect(area.x, area.y, area.width, area.height)])
+  ]));
+  if (!suppressAxes) {
+    nodes.push(renderGrid(xScale, yScale, area, resolved, theme));
+    nodes.push(renderXAxis(xScale, area, resolved, theme));
+    nodes.push(renderYAxis(yScale, area, resolved, theme));
+  }
+  const chartNodes = chartType.render(ctx);
+  nodes.push(group(chartNodes, { class: "chartts-content", clipPath: clipId }));
+  if (!suppressAxes) {
+    const legend = renderLegend(prepared, area, resolved, theme);
+    if (legend) nodes.push(legend);
+  }
+  const childrenStr = nodes.map(nodeToString).join("");
+  const styleStr = `<style>${CHART_CSS}</style>`;
+  const fxDefsStr = `<defs class="chartts-fx">${createEffectDefs(resolved.colors)}</defs>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="${escapeAttr(resolved.ariaLabel)}" class="chartts">${styleStr}${fxDefsStr}${childrenStr}</svg>`;
+}
+function nodeToString(node) {
+  switch (node.type) {
+    case "group": {
+      const attrs = renderAttrs(node.attrs);
+      const children = node.children.map(nodeToString).join("");
+      return `<g${attrs}>${children}</g>`;
+    }
+    case "path": {
+      const attrs = renderAttrs(node.attrs);
+      const fill = node.attrs?.fill ? "" : ' fill="none"';
+      return `<path d="${escapeAttr(node.d)}"${fill}${attrs}/>`;
+    }
+    case "rect": {
+      const attrs = renderAttrs(node.attrs);
+      const rx = node.rx != null ? ` rx="${node.rx}"` : "";
+      const ry = node.ry != null ? ` ry="${node.ry}"` : "";
+      return `<rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}"${rx}${ry}${attrs}/>`;
+    }
+    case "circle": {
+      const attrs = renderAttrs(node.attrs);
+      return `<circle cx="${node.cx}" cy="${node.cy}" r="${node.r}"${attrs}/>`;
+    }
+    case "line": {
+      const attrs = renderAttrs(node.attrs);
+      return `<line x1="${node.x1}" y1="${node.y1}" x2="${node.x2}" y2="${node.y2}"${attrs}/>`;
+    }
+    case "text": {
+      const a = node.attrs;
+      let attrs = renderAttrs(a);
+      if (a) {
+        if ("textAnchor" in a && a.textAnchor) attrs += ` text-anchor="${a.textAnchor}"`;
+        if ("dominantBaseline" in a && a.dominantBaseline) attrs += ` dominant-baseline="${a.dominantBaseline}"`;
+        if ("fontSize" in a && a.fontSize) attrs += ` font-size="${a.fontSize}"`;
+        if ("fontFamily" in a && a.fontFamily) attrs += ` font-family="${escapeAttr(a.fontFamily)}"`;
+        if ("fontWeight" in a && a.fontWeight) attrs += ` font-weight="${a.fontWeight}"`;
+      }
+      return `<text x="${node.x}" y="${node.y}"${attrs}>${escapeXml(node.content)}</text>`;
+    }
+    case "clipPath": {
+      const children = node.children.map(nodeToString).join("");
+      return `<clipPath id="${escapeAttr(node.id)}">${children}</clipPath>`;
+    }
+    case "defs": {
+      const children = node.children.map(nodeToString).join("");
+      return `<defs>${children}</defs>`;
+    }
+  }
+}
+var ATTR_MAP = {
+  class: "class",
+  style: "style",
+  stroke: "stroke",
+  strokeWidth: "stroke-width",
+  strokeDasharray: "stroke-dasharray",
+  fill: "fill",
+  fillOpacity: "fill-opacity",
+  opacity: "opacity",
+  transform: "transform",
+  role: "role",
+  ariaLabel: "aria-label",
+  tabindex: "tabindex"
+};
+var SKIP_KEYS = /* @__PURE__ */ new Set([
+  "textAnchor",
+  "dominantBaseline",
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "rx",
+  "ry"
+]);
+function renderAttrs(attrs) {
+  if (!attrs) return "";
+  let result = "";
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value == null) continue;
+    if (SKIP_KEYS.has(key)) continue;
+    if (key === "clipPath") {
+      result += ` clip-path="url(#${escapeAttr(String(value))})"`;
+    } else if (key.startsWith("data-")) {
+      result += ` ${key}="${escapeAttr(String(value))}"`;
+    } else if (ATTR_MAP[key]) {
+      result += ` ${ATTR_MAP[key]}="${escapeAttr(String(value))}"`;
+    }
+  }
+  return result;
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeXml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/data/validate.ts
+var CharttsError = class extends Error {
+  constructor(message) {
+    super(`[chartts] ${message}`);
+    this.name = "CharttsError";
+  }
+};
+function validateData(data) {
+  if (!data) {
+    throw new CharttsError("No data provided. Pass { series: [{ name, values }] }");
+  }
+  if (!Array.isArray(data.series) || data.series.length === 0) {
+    throw new CharttsError("data.series must be a non-empty array.");
+  }
+  const len = data.series[0].values.length;
+  for (let i = 0; i < data.series.length; i++) {
+    const s = data.series[i];
+    if (!s.name || typeof s.name !== "string") {
+      throw new CharttsError(`series[${i}].name must be a non-empty string.`);
+    }
+    if (!Array.isArray(s.values)) {
+      throw new CharttsError(`series[${i}] ("${s.name}").values must be an array.`);
+    }
+    if (s.values.length !== len) {
+      throw new CharttsError(
+        `Series length mismatch: "${data.series[0].name}" has ${len} values but "${s.name}" has ${s.values.length}. All series must have equal length.`
+      );
+    }
+    for (let j = 0; j < s.values.length; j++) {
+      const v = s.values[j];
+      if (typeof v !== "number" || !Number.isFinite(v) && !Number.isNaN(v)) {
+        throw new CharttsError(
+          `series[${i}] ("${s.name}").values[${j}] must be a finite number (or NaN for missing data). Got: ${JSON.stringify(v)}`
+        );
+      }
+    }
+  }
+  if (data.labels && data.labels.length > 0 && data.labels.length !== len) {
+    throw new CharttsError(
+      `labels has ${data.labels.length} entries but series have ${len} values. They must match.`
+    );
+  }
+}
+
+// src/data/prepare.ts
+function prepareData(data, options) {
+  validateData(data);
+  const count = data.series[0].values.length;
+  const labels = data.labels ?? Array.from({ length: count }, (_, i) => i);
+  const series = data.series.map((s, i) => ({
+    name: s.name,
+    values: s.values,
+    color: s.color ?? options.colors[i % options.colors.length],
+    style: s.style ?? "solid",
+    fill: s.fill ?? false,
+    fillOpacity: s.fillOpacity ?? 0.15,
+    showPoints: s.showPoints ?? true,
+    index: i
+  }));
+  const bounds = computeBounds(series, options);
+  return { labels, series, bounds };
+}
+function computeBounds(series, options) {
+  let yMin = Infinity;
+  let yMax = -Infinity;
+  for (const s of series) {
+    for (const v of s.values) {
+      if (isNaN(v)) continue;
+      if (v < yMin) yMin = v;
+      if (v > yMax) yMax = v;
+    }
+  }
+  if (yMin === yMax) {
+    yMin = yMin === 0 ? 0 : yMin - Math.abs(yMin) * 0.1;
+    yMax = yMax === 0 ? 1 : yMax + Math.abs(yMax) * 0.1;
+  }
+  if (options.yMin !== void 0) yMin = options.yMin;
+  if (options.yMax !== void 0) yMax = options.yMax;
+  const count = series[0]?.values.length ?? 0;
+  return {
+    xMin: 0,
+    xMax: Math.max(0, count - 1),
+    yMin,
+    yMax
+  };
+}
+
+exports.CORPORATE_THEME = CORPORATE_THEME;
+exports.CSS_PREFIX = CSS_PREFIX;
+exports.DARK_THEME = DARK_THEME;
+exports.EDITORIAL_THEME = EDITORIAL_THEME;
+exports.LIGHT_THEME = LIGHT_THEME;
+exports.OCEAN_THEME = OCEAN_THEME;
+exports.PALETTE = PALETTE;
+exports.PathBuilder = PathBuilder;
+exports.SAAS_THEME = SAAS_THEME;
+exports.STARTUP_THEME = STARTUP_THEME;
+exports.THEME_PRESETS = THEME_PRESETS;
+exports.applyTheme = applyTheme;
+exports.circle = circle;
+exports.createBrush = createBrush;
+exports.createCanvasRenderer = createCanvasRenderer;
+exports.createCategoricalScale = createCategoricalScale;
+exports.createChart = createChart;
+exports.createDebugPanel = createDebugPanel;
+exports.createEventBus = createEventBus;
+exports.createLinearScale = createLinearScale;
+exports.createSVGRenderer = createSVGRenderer;
+exports.createWebGLRenderer = createWebGLRenderer;
+exports.createZoomPan = createZoomPan;
+exports.decimateData = decimateData;
+exports.group = group;
+exports.line = line;
+exports.path = path;
+exports.prepareData = prepareData;
+exports.rect = rect;
+exports.renderToString = renderToString;
+exports.resolveTheme = resolveTheme;
+exports.text = text;
+//# sourceMappingURL=chunk-XHQWWR5M.cjs.map
+//# sourceMappingURL=chunk-XHQWWR5M.cjs.map