chartforge 0.0.1 → 0.0.2

package/dist/chartforge.js

@@ -0,0 +1,1148 @@
+import { BUILT_IN_THEMES } from "./themes.js";
+import { darkTheme, lightTheme, neonTheme } from "./themes.js";
+import { c as createSVGElement, p as polarToCartesian, u as uid, m as merge, d as debounce, r as removeChildren } from "./index-BCodEFNd.js";
+import { a, b, f, e, g, t } from "./index-BCodEFNd.js";
+class EventBus {
+  constructor() {
+    this._events = /* @__PURE__ */ new Map();
+  }
+  on(event, handler, priority = 0) {
+    if (!this._events.has(event)) this._events.set(event, []);
+    const list = this._events.get(event);
+    list.push({ handler, priority });
+    list.sort((a2, b2) => b2.priority - a2.priority);
+    return () => this.off(event, handler);
+  }
+  off(event, handler) {
+    const list = this._events.get(event);
+    if (!list) return;
+    const idx = list.findIndex((h) => h.handler === handler);
+    if (idx !== -1) list.splice(idx, 1);
+  }
+  emit(event, data) {
+    this._events.get(event)?.forEach(({ handler }) => handler(data));
+  }
+  async emitAsync(event, data) {
+    const list = this._events.get(event);
+    if (!list) return;
+    for (const { handler } of list) await handler(data);
+  }
+  clear(event) {
+    event ? this._events.delete(event) : this._events.clear();
+  }
+}
+class MiddlewarePipeline {
+  constructor() {
+    this._fns = [];
+  }
+  use(fn) {
+    this._fns.push(fn);
+    return this;
+  }
+  async execute(ctx) {
+    let i = 0;
+    const next = async () => {
+      if (i >= this._fns.length) return;
+      await this._fns[i++](ctx, next);
+    };
+    await next();
+    return ctx;
+  }
+}
+class DataPipeline {
+  constructor() {
+    this._transformers = [];
+  }
+  addTransformer(name, fn) {
+    this._transformers.push({ name, fn });
+    return this;
+  }
+  removeTransformer(name) {
+    const idx = this._transformers.findIndex((t2) => t2.name === name);
+    if (idx !== -1) this._transformers.splice(idx, 1);
+  }
+  async transform(data, config) {
+    let result = data;
+    for (const t2 of this._transformers) {
+      result = await t2.fn(result, config);
+    }
+    return result;
+  }
+}
+const EASINGS = {
+  linear: (t2) => t2,
+  easeInQuad: (t2) => t2 * t2,
+  easeOutQuad: (t2) => t2 * (2 - t2),
+  easeInOutQuad: (t2) => t2 < 0.5 ? 2 * t2 * t2 : -1 + (4 - 2 * t2) * t2,
+  easeInCubic: (t2) => t2 * t2 * t2,
+  easeOutCubic: (t2) => --t2 * t2 * t2 + 1,
+  easeInOutCubic: (t2) => t2 < 0.5 ? 4 * t2 * t2 * t2 : (t2 - 1) * (2 * t2 - 2) * (2 * t2 - 2) + 1,
+  easeInElastic: (t2) => {
+    const c4 = 2 * Math.PI / 3;
+    return t2 === 0 ? 0 : t2 === 1 ? 1 : -Math.pow(2, 10 * t2 - 10) * Math.sin((t2 * 10 - 10.75) * c4);
+  },
+  easeOutElastic: (t2) => {
+    const c4 = 2 * Math.PI / 3;
+    return t2 === 0 ? 0 : t2 === 1 ? 1 : Math.pow(2, -10 * t2) * Math.sin((t2 * 10 - 0.75) * c4) + 1;
+  },
+  easeInBounce: (t2) => {
+    const n1 = 7.5625, d1 = 2.75;
+    const eob = (t22) => {
+      if (t22 < 1 / d1) return n1 * t22 * t22;
+      if (t22 < 2 / d1) return n1 * (t22 -= 1.5 / d1) * t22 + 0.75;
+      if (t22 < 2.5 / d1) return n1 * (t22 -= 2.25 / d1) * t22 + 0.9375;
+      return n1 * (t22 -= 2.625 / d1) * t22 + 0.984375;
+    };
+    return 1 - eob(1 - t2);
+  },
+  easeOutBounce: (t2) => {
+    const n1 = 7.5625, d1 = 2.75;
+    if (t2 < 1 / d1) return n1 * t2 * t2;
+    if (t2 < 2 / d1) return n1 * (t2 -= 1.5 / d1) * t2 + 0.75;
+    if (t2 < 2.5 / d1) return n1 * (t2 -= 2.25 / d1) * t2 + 0.9375;
+    return n1 * (t2 -= 2.625 / d1) * t2 + 0.984375;
+  }
+};
+class AnimationEngine {
+  constructor() {
+    this._running = /* @__PURE__ */ new Map();
+  }
+  animate(id, from, to, duration, easing = "easeOutQuad", onUpdate, onComplete) {
+    this.stop(id);
+    const easingFn = EASINGS[easing] ?? EASINGS.linear;
+    const start = performance.now();
+    const tick = (now) => {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = easingFn(progress);
+      onUpdate(from + (to - from) * eased, progress);
+      if (progress < 1) {
+        const rafId2 = requestAnimationFrame(tick);
+        this._running.set(id, { rafId: rafId2 });
+      } else {
+        this._running.delete(id);
+        onComplete?.();
+      }
+    };
+    const rafId = requestAnimationFrame(tick);
+    this._running.set(id, { rafId });
+  }
+  stop(id) {
+    const state = this._running.get(id);
+    if (state) {
+      cancelAnimationFrame(state.rafId);
+      this._running.delete(id);
+    }
+  }
+  stopAll() {
+    this._running.forEach((s) => cancelAnimationFrame(s.rafId));
+    this._running.clear();
+  }
+}
+class ThemeManager {
+  constructor() {
+    this._themes = /* @__PURE__ */ new Map();
+    this._current = null;
+  }
+  register(name, theme) {
+    this._themes.set(name, theme);
+  }
+  get(name) {
+    return this._themes.get(name);
+  }
+  apply(name) {
+    const theme = this._themes.get(name);
+    if (!theme) {
+      console.warn(`[ChartForge] Theme "${name}" not found`);
+      return null;
+    }
+    this._current = name;
+    return theme;
+  }
+  getCurrent() {
+    return this._current ? this._themes.get(this._current) ?? null : null;
+  }
+  get currentName() {
+    return this._current;
+  }
+}
+class PluginManager {
+  constructor(_chart) {
+    this._chart = _chart;
+    this._plugins = /* @__PURE__ */ new Map();
+    this._inited = /* @__PURE__ */ new Set();
+  }
+  register(name, Plugin, config = {}) {
+    if (this._plugins.has(name)) {
+      console.warn(`[ChartForge] Plugin "${name}" already registered`);
+      return;
+    }
+    const instance = new Plugin(this._chart, config);
+    this._plugins.set(name, { instance, config });
+    if (this._chart.initialized) {
+      this._initOne(name, instance);
+    }
+  }
+  get(name) {
+    return this._plugins.get(name)?.instance ?? null;
+  }
+  has(name) {
+    return this._plugins.has(name);
+  }
+  remove(name) {
+    const entry = this._plugins.get(name);
+    if (!entry) return;
+    entry.instance.destroy?.();
+    this._plugins.delete(name);
+    this._inited.delete(name);
+  }
+  initAll() {
+    this._plugins.forEach((entry, name) => {
+      if (!this._inited.has(name)) this._initOne(name, entry.instance);
+    });
+  }
+  destroyAll() {
+    this._plugins.forEach((e2) => e2.instance.destroy?.());
+    this._plugins.clear();
+    this._inited.clear();
+  }
+  _initOne(name, plugin) {
+    plugin.init?.();
+    this._inited.add(name);
+  }
+}
+class VirtualRenderer {
+  constructor(_chart) {
+    this._chart = _chart;
+    this._viewport = { start: 0, end: 100 };
+    this._threshold = _chart.config.virtual?.threshold ?? 1e4;
+  }
+  updateViewport(start, end) {
+    this._viewport = { start, end };
+  }
+  shouldVirtualize() {
+    const total = this._chart.config.data.series.reduce(
+      (sum, s) => sum + (Array.isArray(s.data) ? s.data.length : 0),
+      0
+    );
+    return total > this._threshold;
+  }
+  getVisibleData() {
+    const { start, end } = this._viewport;
+    const src = this._chart.config.data;
+    return {
+      series: src.series.map((s) => ({
+        ...s,
+        data: s.data.slice(start, end)
+      })),
+      ...src.labels && { labels: src.labels.slice(start, end) }
+    };
+  }
+}
+class RealTimeModule {
+  constructor(_chart) {
+    this._chart = _chart;
+    this._registry = /* @__PURE__ */ new Map();
+    this._connections = /* @__PURE__ */ new Map();
+  }
+  registerAdapter(name, Adapter) {
+    this._registry.set(name, Adapter);
+  }
+  connect(type, config) {
+    const Adapter = this._registry.get(type);
+    if (!Adapter) {
+      console.error(`[ChartForge] Real-time adapter "${type}" not registered`);
+      return;
+    }
+    const adapter = new Adapter(config);
+    adapter.on("data", (data) => this._chart.updateData(data));
+    void adapter.connect();
+    this._connections.set(type, adapter);
+  }
+  disconnect(type) {
+    const adapter = this._connections.get(type);
+    if (adapter) {
+      adapter.disconnect();
+      this._connections.delete(type);
+    }
+  }
+  disconnectAll() {
+    this._connections.forEach((a2) => a2.disconnect());
+    this._connections.clear();
+  }
+}
+class WebSocketAdapter {
+  constructor(_config) {
+    this._config = _config;
+    this._ws = null;
+    this._listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, handler) {
+    if (!this._listeners.has(event)) this._listeners.set(event, []);
+    this._listeners.get(event).push(handler);
+  }
+  _emit(event, data) {
+    this._listeners.get(event)?.forEach((h) => h(data));
+  }
+  connect() {
+    this._ws = new WebSocket(this._config.url);
+    this._ws.addEventListener("message", (e2) => {
+      try {
+        const data = JSON.parse(e2.data);
+        this._emit("data", data);
+      } catch {
+        console.warn("[ChartForge] WebSocketAdapter: invalid JSON", e2.data);
+      }
+    });
+    this._ws.addEventListener("error", (e2) => this._emit("error", e2));
+  }
+  disconnect() {
+    this._ws?.close();
+    this._ws = null;
+  }
+  send(data) {
+    if (this._ws?.readyState === WebSocket.OPEN) {
+      this._ws.send(JSON.stringify(data));
+    }
+  }
+}
+class PollingAdapter {
+  constructor(_config) {
+    this._config = _config;
+    this._timer = null;
+    this._listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, handler) {
+    if (!this._listeners.has(event)) this._listeners.set(event, []);
+    this._listeners.get(event).push(handler);
+  }
+  _emit(event, data) {
+    this._listeners.get(event)?.forEach((h) => h(data));
+  }
+  async _poll() {
+    try {
+      const res = await fetch(this._config.url);
+      const data = await res.json();
+      this._emit("data", data);
+    } catch (err) {
+      this._emit("error", err);
+    }
+  }
+  connect() {
+    void this._poll();
+    this._timer = setInterval(() => void this._poll(), this._config.interval ?? 5e3);
+  }
+  disconnect() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = null;
+    }
+  }
+}
+class BaseRenderer {
+  constructor(chart, data) {
+    this.chart = chart;
+    this.data = data;
+    this.theme = chart.theme;
+    this.config = chart.config;
+    this.group = chart.mainGroup;
+    this.padding = {
+      top: chart.config.padding?.top ?? 40,
+      right: chart.config.padding?.right ?? 40,
+      bottom: chart.config.padding?.bottom ?? 60,
+      left: chart.config.padding?.left ?? 60
+    };
+  }
+  dims() {
+    const vb = this.chart.svg.getAttribute("viewBox").split(" ").map(Number);
+    const tw = vb[2], th = vb[3];
+    return {
+      width: tw - this.padding.left - this.padding.right,
+      height: th - this.padding.top - this.padding.bottom,
+      totalWidth: tw,
+      totalHeight: th
+    };
+  }
+  color(i) {
+    return this.theme.colors[i % this.theme.colors.length];
+  }
+  g(className) {
+    return createSVGElement("g", { className });
+  }
+}
+class PieRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const cx = d.totalWidth / 2;
+    const cy = d.totalHeight / 2;
+    const r = Math.min(d.width, d.height) / 2 - 20;
+    const group = this.g("chartforge-pie");
+    this.group.appendChild(group);
+    this._drawSlices(group, cx, cy, r);
+    if (this.config.animation?.enabled) this._animate(group);
+  }
+  _drawSlices(group, cx, cy, r, innerR = 0) {
+    const values = this.data.series[0].data;
+    const total = values.reduce((s, v) => s + v, 0);
+    let angle = 0;
+    values.forEach((value, i) => {
+      const sweep = value / total * 360;
+      const endAngle = angle + sweep;
+      const path = this._slice(cx, cy, r, innerR, angle, endAngle, i);
+      group.appendChild(path);
+      if (innerR === 0) {
+        const mid = angle + sweep / 2;
+        const lr = r * 0.7;
+        const lpos = polarToCartesian(cx, cy, lr, mid);
+        const text = createSVGElement("text", {
+          x: lpos.x,
+          y: lpos.y,
+          "text-anchor": "middle",
+          "dominant-baseline": "middle",
+          fill: "#fff",
+          "font-size": "12",
+          "font-weight": "bold"
+        });
+        text.textContent = `${(value / total * 100).toFixed(1)}%`;
+        group.appendChild(text);
+      }
+      angle = endAngle;
+    });
+  }
+  _slice(cx, cy, outerR, innerR, startAngle, endAngle, i) {
+    const oStart = polarToCartesian(cx, cy, outerR, endAngle);
+    const oEnd = polarToCartesian(cx, cy, outerR, startAngle);
+    const large = endAngle - startAngle <= 180 ? "0" : "1";
+    const value = this.data.series[0].data[i];
+    let d;
+    if (innerR > 0) {
+      const iStart = polarToCartesian(cx, cy, innerR, endAngle);
+      const iEnd = polarToCartesian(cx, cy, innerR, startAngle);
+      d = [
+        `M ${oStart.x} ${oStart.y}`,
+        `A ${outerR} ${outerR} 0 ${large} 0 ${oEnd.x} ${oEnd.y}`,
+        `L ${iEnd.x} ${iEnd.y}`,
+        `A ${innerR} ${innerR} 0 ${large} 1 ${iStart.x} ${iStart.y}`,
+        "Z"
+      ].join(" ");
+    } else {
+      d = [
+        `M ${cx} ${cy}`,
+        `L ${oStart.x} ${oStart.y}`,
+        `A ${outerR} ${outerR} 0 ${large} 0 ${oEnd.x} ${oEnd.y}`,
+        "Z"
+      ].join(" ");
+    }
+    const path = createSVGElement("path", {
+      d,
+      fill: this.color(i),
+      stroke: this.theme.background,
+      "stroke-width": "2"
+    });
+    path.addEventListener("mouseenter", () => {
+      path.setAttribute("opacity", "0.8");
+      this.chart.emit("hover", { type: "pie", index: i, value });
+    });
+    path.addEventListener("mouseleave", () => path.setAttribute("opacity", "1"));
+    path.addEventListener("click", () => this.chart.emit("click", { type: "pie", index: i, value }));
+    return path;
+  }
+  _animate(group) {
+    group.querySelectorAll("path").forEach((path, i) => {
+      path.style.transformOrigin = "center";
+      path.style.transform = "scale(0)";
+      this.chart.animationEngine.animate(
+        `pie-${i}`,
+        0,
+        1,
+        this.config.animation?.duration ?? 750,
+        "easeOutElastic",
+        (v) => {
+          path.style.transform = `scale(${v})`;
+        }
+      );
+    });
+  }
+}
+class DonutRenderer extends PieRenderer {
+  render() {
+    const d = this.dims();
+    const cx = d.totalWidth / 2;
+    const cy = d.totalHeight / 2;
+    const outerR = Math.min(d.width, d.height) / 2 - 20;
+    const innerR = outerR * 0.6;
+    const group = this.g("chartforge-donut");
+    this.group.appendChild(group);
+    this._drawSlices(group, cx, cy, outerR, innerR);
+    const label = createSVGElement("text", {
+      x: cx,
+      y: cy,
+      "text-anchor": "middle",
+      "dominant-baseline": "middle",
+      fill: this.theme.text,
+      "font-size": "24",
+      "font-weight": "bold"
+    });
+    label.textContent = "Total";
+    group.appendChild(label);
+    if (this.config.animation?.enabled) this._animate(group);
+  }
+}
+class ColumnRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const values = this.data.series[0].data;
+    const maxVal = Math.max(...values);
+    const cw = d.width / values.length * 0.8;
+    const gap = d.width / values.length * 0.2;
+    const group = this.g("chartforge-columns");
+    this.group.appendChild(group);
+    values.forEach((value, i) => {
+      const targetH = value / maxVal * d.height;
+      const x = this.padding.left + i * (cw + gap);
+      const baseY = this.padding.top + d.height;
+      const rect = createSVGElement("rect", {
+        x,
+        y: baseY,
+        width: cw,
+        height: 0,
+        fill: this.color(i)
+      });
+      group.appendChild(rect);
+      if (this.config.animation?.enabled) {
+        this.chart.animationEngine.animate(
+          `col-${i}`,
+          0,
+          targetH,
+          this.config.animation.duration ?? 750,
+          this.config.animation.easing ?? "easeOutQuad",
+          (h) => {
+            rect.setAttribute("height", String(h));
+            rect.setAttribute("y", String(baseY - h));
+          }
+        );
+      } else {
+        rect.setAttribute("height", String(targetH));
+        rect.setAttribute("y", String(baseY - targetH));
+      }
+      rect.addEventListener("mouseenter", () => {
+        rect.setAttribute("opacity", "0.8");
+        this.chart.emit("hover", { type: "column", index: i, value });
+      });
+      rect.addEventListener("mouseleave", () => rect.setAttribute("opacity", "1"));
+      rect.addEventListener("click", () => this.chart.emit("click", { type: "column", index: i, value }));
+    });
+  }
+}
+class BarRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const values = this.data.series[0].data;
+    const maxVal = Math.max(...values);
+    const bh = d.height / values.length * 0.8;
+    const gap = d.height / values.length * 0.2;
+    const group = this.g("chartforge-bars");
+    this.group.appendChild(group);
+    values.forEach((value, i) => {
+      const targetW = value / maxVal * d.width;
+      const y = this.padding.top + i * (bh + gap);
+      const rect = createSVGElement("rect", {
+        x: this.padding.left,
+        y,
+        width: 0,
+        height: bh,
+        fill: this.color(i)
+      });
+      group.appendChild(rect);
+      if (this.config.animation?.enabled) {
+        this.chart.animationEngine.animate(
+          `bar-${i}`,
+          0,
+          targetW,
+          this.config.animation.duration ?? 750,
+          this.config.animation.easing ?? "easeOutQuad",
+          (w) => rect.setAttribute("width", String(w))
+        );
+      } else {
+        rect.setAttribute("width", String(targetW));
+      }
+      rect.addEventListener("mouseenter", () => {
+        rect.setAttribute("opacity", "0.8");
+        this.chart.emit("hover", { type: "bar", index: i, value });
+      });
+      rect.addEventListener("mouseleave", () => rect.setAttribute("opacity", "1"));
+      rect.addEventListener("click", () => this.chart.emit("click", { type: "bar", index: i, value }));
+      const label = createSVGElement("text", {
+        x: this.padding.left + 6,
+        y: y + bh / 2,
+        fill: "#fff",
+        "font-size": "12",
+        "dominant-baseline": "middle"
+      });
+      label.textContent = String(this.data.labels?.[i] ?? `Item ${i + 1}`);
+      group.appendChild(label);
+    });
+  }
+}
+class LineRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const group = this.g("chartforge-lines");
+    this.group.appendChild(group);
+    const allVals = this.data.series.flatMap((s) => s.data);
+    const maxVal = Math.max(...allVals);
+    const minVal = Math.min(...allVals);
+    const range = maxVal - minVal || 1;
+    this.data.series.forEach((series, si) => {
+      const values = series.data;
+      const pts = values.map((v, i) => ({
+        x: this.padding.left + i / Math.max(values.length - 1, 1) * d.width,
+        y: this.padding.top + d.height - (v - minVal) / range * d.height,
+        value: v
+      }));
+      const pathD = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+      const path = createSVGElement("path", {
+        d: pathD,
+        fill: "none",
+        stroke: this.color(si),
+        "stroke-width": "2"
+      });
+      group.appendChild(path);
+      pts.forEach((pt, i) => {
+        const circle = createSVGElement("circle", {
+          cx: pt.x,
+          cy: pt.y,
+          r: 4,
+          fill: this.color(si)
+        });
+        circle.addEventListener("mouseenter", () => {
+          circle.setAttribute("r", "6");
+          this.chart.emit("hover", { type: "line", seriesIndex: si, index: i, value: pt.value });
+        });
+        circle.addEventListener("mouseleave", () => circle.setAttribute("r", "4"));
+        circle.addEventListener("click", () => this.chart.emit("click", { type: "line", seriesIndex: si, index: i, value: pt.value }));
+        group.appendChild(circle);
+      });
+      if (this.config.animation?.enabled) {
+        const len = path.getTotalLength();
+        path.style.strokeDasharray = String(len);
+        path.style.strokeDashoffset = String(len);
+        this.chart.animationEngine.animate(
+          `line-${si}`,
+          len,
+          0,
+          this.config.animation.duration ?? 750,
+          this.config.animation.easing ?? "easeOutQuad",
+          (off) => {
+            path.style.strokeDashoffset = String(off);
+          }
+        );
+      }
+    });
+  }
+}
+class ScatterRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const group = this.g("chartforge-scatter");
+    this.group.appendChild(group);
+    this.data.series.forEach((series, si) => {
+      const pts = series.data;
+      const maxX = Math.max(...pts.map((p) => p.x));
+      const maxY = Math.max(...pts.map((p) => p.y));
+      pts.forEach((pt, i) => {
+        const cx = this.padding.left + pt.x / maxX * d.width;
+        const cy = this.padding.top + d.height - pt.y / maxY * d.height;
+        const r0 = pt.r ?? 5;
+        const circle = createSVGElement("circle", {
+          cx,
+          cy,
+          r: this.config.animation?.enabled ? 0 : r0,
+          fill: this.color(si),
+          opacity: "0.7"
+        });
+        group.appendChild(circle);
+        if (this.config.animation?.enabled) {
+          this.chart.animationEngine.animate(
+            `scatter-${si}-${i}`,
+            0,
+            r0,
+            this.config.animation.duration ?? 750,
+            "easeOutElastic",
+            (r) => circle.setAttribute("r", String(r))
+          );
+        }
+        circle.addEventListener("mouseenter", () => {
+          circle.setAttribute("r", String(r0 * 1.5));
+          circle.setAttribute("opacity", "1");
+          this.chart.emit("hover", { type: "scatter", seriesIndex: si, index: i, point: pt });
+        });
+        circle.addEventListener("mouseleave", () => {
+          circle.setAttribute("r", String(r0));
+          circle.setAttribute("opacity", "0.7");
+        });
+        circle.addEventListener("click", () => this.chart.emit("click", { type: "scatter", seriesIndex: si, index: i, point: pt }));
+      });
+    });
+  }
+}
+class StackedColumnRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const labels = this.data.labels ?? [];
+    const nCats = labels.length;
+    const cw = d.width / nCats * 0.8;
+    const gap = d.width / nCats * 0.2;
+    const totals = Array.from(
+      { length: nCats },
+      (_, i) => this.data.series.reduce((s, ser) => s + (ser.data[i] ?? 0), 0)
+    );
+    const maxTotal = Math.max(...totals);
+    const group = this.g("chartforge-stacked-columns");
+    this.group.appendChild(group);
+    for (let ci = 0; ci < nCats; ci++) {
+      let yOff = 0;
+      const x = this.padding.left + ci * (cw + gap);
+      const baseY = this.padding.top + d.height;
+      this.data.series.forEach((series, si) => {
+        const value = series.data[ci] ?? 0;
+        const targetH = value / maxTotal * d.height;
+        const rect = createSVGElement("rect", {
+          x,
+          y: baseY - yOff,
+          width: cw,
+          height: 0,
+          fill: this.color(si)
+        });
+        group.appendChild(rect);
+        const capturedYOff = yOff;
+        if (this.config.animation?.enabled) {
+          this.chart.animationEngine.animate(
+            `scol-${ci}-${si}`,
+            0,
+            targetH,
+            this.config.animation.duration ?? 750,
+            this.config.animation.easing ?? "easeOutQuad",
+            (h) => {
+              rect.setAttribute("height", String(h));
+              rect.setAttribute("y", String(baseY - capturedYOff - h));
+            }
+          );
+        } else {
+          rect.setAttribute("height", String(targetH));
+          rect.setAttribute("y", String(baseY - capturedYOff - targetH));
+        }
+        rect.addEventListener("mouseenter", () => {
+          rect.setAttribute("opacity", "0.8");
+          this.chart.emit("hover", { type: "stackedColumn", catIndex: ci, seriesIndex: si, value });
+        });
+        rect.addEventListener("mouseleave", () => rect.setAttribute("opacity", "1"));
+        yOff += targetH;
+      });
+    }
+  }
+}
+class StackedBarRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const nCats = (this.data.labels ?? []).length;
+    const bh = d.height / nCats * 0.8;
+    const gap = d.height / nCats * 0.2;
+    const totals = Array.from(
+      { length: nCats },
+      (_, i) => this.data.series.reduce((s, ser) => s + (ser.data[i] ?? 0), 0)
+    );
+    const maxTotal = Math.max(...totals);
+    const group = this.g("chartforge-stacked-bars");
+    this.group.appendChild(group);
+    for (let ci = 0; ci < nCats; ci++) {
+      let xOff = 0;
+      const y = this.padding.top + ci * (bh + gap);
+      this.data.series.forEach((series, si) => {
+        const value = series.data[ci] ?? 0;
+        const targetW = value / maxTotal * d.width;
+        const rect = createSVGElement("rect", {
+          x: this.padding.left + xOff,
+          y,
+          width: 0,
+          height: bh,
+          fill: this.color(si)
+        });
+        group.appendChild(rect);
+        const capturedXOff = xOff;
+        if (this.config.animation?.enabled) {
+          this.chart.animationEngine.animate(
+            `sbar-${ci}-${si}`,
+            0,
+            targetW,
+            this.config.animation.duration ?? 750,
+            this.config.animation.easing ?? "easeOutQuad",
+            (w) => {
+              rect.setAttribute("width", String(w));
+              rect.setAttribute("x", String(this.padding.left + capturedXOff));
+            }
+          );
+        } else {
+          rect.setAttribute("width", String(targetW));
+        }
+        rect.addEventListener("mouseenter", () => {
+          rect.setAttribute("opacity", "0.8");
+          this.chart.emit("hover", { type: "stackedBar", catIndex: ci, seriesIndex: si, value });
+        });
+        rect.addEventListener("mouseleave", () => rect.setAttribute("opacity", "1"));
+        xOff += targetW;
+      });
+    }
+  }
+}
+class FunnelRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const values = this.data.series[0].data;
+    const maxVal = Math.max(...values);
+    const segH = d.height / values.length;
+    const group = this.g("chartforge-funnel");
+    this.group.appendChild(group);
+    values.forEach((value, i) => {
+      const nextVal = values[i + 1] ?? 0;
+      const topW = value / maxVal * d.width;
+      const botW = nextVal / maxVal * d.width;
+      const y = this.padding.top + i * segH;
+      const topL = this.padding.left + (d.width - topW) / 2;
+      const botL = this.padding.left + (d.width - botW) / 2;
+      const poly = createSVGElement("polygon", {
+        points: `${topL},${y} ${topL + topW},${y} ${botL + botW},${y + segH} ${botL},${y + segH}`,
+        fill: this.color(i),
+        stroke: this.theme.background,
+        "stroke-width": "2"
+      });
+      group.appendChild(poly);
+      const label = createSVGElement("text", {
+        x: d.totalWidth / 2,
+        y: y + segH / 2,
+        fill: "#fff",
+        "font-size": "14",
+        "text-anchor": "middle",
+        "dominant-baseline": "middle",
+        "font-weight": "bold"
+      });
+      label.textContent = `${this.data.labels?.[i] ?? `Stage ${i + 1}`}: ${value}`;
+      group.appendChild(label);
+      poly.addEventListener("mouseenter", () => {
+        poly.setAttribute("opacity", "0.8");
+        this.chart.emit("hover", { type: "funnel", index: i, value });
+      });
+      poly.addEventListener("mouseleave", () => poly.setAttribute("opacity", "1"));
+    });
+  }
+}
+class HeatmapRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const grid = this.data.series[0].data;
+    const rows = grid.length;
+    const cols = grid[0]?.length ?? 0;
+    const cw = d.width / cols;
+    const ch = d.height / rows;
+    const flat = grid.flat();
+    const min = Math.min(...flat);
+    const max = Math.max(...flat);
+    const rng = max - min || 1;
+    const group = this.g("chartforge-heatmap");
+    this.group.appendChild(group);
+    grid.forEach((row, ri) => {
+      row.forEach((value, ci) => {
+        const intensity = (value - min) / rng;
+        const r = Math.round(intensity * 255);
+        const b2 = Math.round((1 - intensity) * 255);
+        const fill = `rgb(${r},100,${b2})`;
+        const rect = createSVGElement("rect", {
+          x: this.padding.left + ci * cw,
+          y: this.padding.top + ri * ch,
+          width: cw,
+          height: ch,
+          fill,
+          stroke: this.theme.background,
+          "stroke-width": "1"
+        });
+        group.appendChild(rect);
+        rect.addEventListener("mouseenter", () => {
+          rect.setAttribute("stroke-width", "2");
+          this.chart.emit("hover", { type: "heatmap", row: ri, col: ci, value });
+        });
+        rect.addEventListener("mouseleave", () => rect.setAttribute("stroke-width", "1"));
+      });
+    });
+  }
+}
+class CandlestickRenderer extends BaseRenderer {
+  render() {
+    const d = this.dims();
+    const candles = this.data.series[0].data;
+    const allVals = candles.flatMap((c) => [c.open, c.high, c.low, c.close]);
+    const minVal = Math.min(...allVals);
+    const maxVal = Math.max(...allVals);
+    const range = maxVal - minVal || 1;
+    const cw = d.width / candles.length * 0.7;
+    const gap = d.width / candles.length * 0.3;
+    const group = this.g("chartforge-candlestick");
+    this.group.appendChild(group);
+    const toY = (v) => this.padding.top + d.height - (v - minVal) / range * d.height;
+    candles.forEach((candle, i) => {
+      const cx = this.padding.left + i * (cw + gap) + cw / 2;
+      const openY = toY(candle.open);
+      const closeY = toY(candle.close);
+      const highY = toY(candle.high);
+      const lowY = toY(candle.low);
+      const positive = candle.close >= candle.open;
+      const color = positive ? "#10b981" : "#ef4444";
+      const wick = createSVGElement("line", {
+        x1: cx,
+        y1: highY,
+        x2: cx,
+        y2: lowY,
+        stroke: color,
+        "stroke-width": "1"
+      });
+      group.appendChild(wick);
+      const bodyY = Math.min(openY, closeY);
+      const bodyH = Math.max(Math.abs(closeY - openY), 1);
+      const body = createSVGElement("rect", {
+        x: cx - cw / 2,
+        y: bodyY,
+        width: cw,
+        height: bodyH,
+        fill: positive ? color : "#ffffff",
+        stroke: color,
+        "stroke-width": "2"
+      });
+      group.appendChild(body);
+      body.addEventListener("mouseenter", () => {
+        body.setAttribute("opacity", "0.8");
+        this.chart.emit("hover", { type: "candlestick", index: i, candle });
+      });
+      body.addEventListener("mouseleave", () => body.setAttribute("opacity", "1"));
+      body.addEventListener("click", () => this.chart.emit("click", { type: "candlestick", index: i, candle }));
+    });
+  }
+}
+const RENDERERS = {
+  pie: PieRenderer,
+  donut: DonutRenderer,
+  column: ColumnRenderer,
+  bar: BarRenderer,
+  row: BarRenderer,
+  line: LineRenderer,
+  scatter: ScatterRenderer,
+  stackedColumn: StackedColumnRenderer,
+  stackedBar: StackedBarRenderer,
+  funnel: FunnelRenderer,
+  heatmap: HeatmapRenderer,
+  candlestick: CandlestickRenderer
+};
+const DEFAULT_CONFIG = {
+  width: "auto",
+  height: 400,
+  responsive: true,
+  theme: "light",
+  animation: { enabled: true, duration: 750, easing: "easeOutQuad" },
+  plugins: {},
+  middleware: [],
+  virtual: { enabled: false, threshold: 1e4 },
+  padding: { top: 40, right: 40, bottom: 60, left: 60 }
+};
+const _ChartForge = class _ChartForge {
+  constructor(container, config) {
+    this.initialized = false;
+    this._resizeObserver = null;
+    this._rendering = false;
+    this.id = uid();
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) throw new Error("[ChartForge] Container not found");
+    this.config = merge({ ...DEFAULT_CONFIG }, config);
+    this.eventBus = new EventBus();
+    this.middleware = new MiddlewarePipeline();
+    this.dataPipeline = new DataPipeline();
+    this.animationEngine = new AnimationEngine();
+    this.themeManager = new ThemeManager();
+    this.pluginManager = new PluginManager(this);
+    this.virtualRenderer = new VirtualRenderer(this);
+    this.realTime = new RealTimeModule(this);
+    for (const [name, t2] of Object.entries(BUILT_IN_THEMES)) {
+      this.themeManager.register(name, t2);
+    }
+    this.realTime.registerAdapter("websocket", WebSocketAdapter);
+    this.realTime.registerAdapter("polling", PollingAdapter);
+    this._init();
+  }
+  _init() {
+    const theme = this.themeManager.apply(this.config.theme ?? "light");
+    this.theme = theme ?? BUILT_IN_THEMES["light"];
+    this._createSVG();
+    this._setupMiddleware();
+    if (this.config.responsive) {
+      this._resizeObserver = new ResizeObserver(debounce(() => this.resize(), 150));
+      this._resizeObserver.observe(this.container);
+    }
+    this.initialized = true;
+    this.pluginManager.initAll();
+    void this.render();
+  }
+  _createSVG() {
+    const w = this.config.width === "auto" ? this.container.offsetWidth || 600 : this.config.width ?? 600;
+    const h = this.config.height ?? 400;
+    this.svg = createSVGElement("svg", {
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${w} ${h}`,
+      className: "chartforge-svg",
+      role: "img"
+    });
+    this.svg.appendChild(createSVGElement("defs"));
+    this.mainGroup = createSVGElement("g", { className: "chartforge-main" });
+    this.svg.appendChild(this.mainGroup);
+    this.svg.style.cssText = `
+      display:block;
+      font-family:'system-ui', sans-serif;
+      background:${this.theme.background};
+      border-radius:inherit;
+    `;
+    this.container.appendChild(this.svg);
+  }
+  _setupMiddleware() {
+    this.middleware.use(async (ctx, next) => {
+      this.eventBus.emit("beforeRender", ctx);
+      await next();
+    });
+    for (const fn of this.config.middleware ?? []) {
+      this.middleware.use(fn);
+    }
+  }
+  async render() {
+    if (this._rendering) return;
+    this._rendering = true;
+    try {
+      const ctx = {
+        data: this.config.data,
+        theme: this.theme,
+        svg: this.svg,
+        mainGroup: this.mainGroup
+      };
+      await this.middleware.execute(ctx);
+      const data = await this.dataPipeline.transform(this.config.data, this.config);
+      const useVirtual = this.config.virtual?.enabled && this.virtualRenderer.shouldVirtualize();
+      this._renderData(useVirtual ? this.virtualRenderer.getVisibleData() : data);
+      this.eventBus.emit("afterRender", ctx);
+    } finally {
+      this._rendering = false;
+    }
+  }
+  _renderData(data) {
+    removeChildren(this.mainGroup);
+    const RendererClass = RENDERERS[this.config.type];
+    if (!RendererClass) {
+      console.error(`[ChartForge] Unknown chart type: "${this.config.type}"`);
+      return;
+    }
+    new RendererClass(this, data).render();
+  }
+  updateData(data) {
+    this.config.data = merge({ ...this.config.data }, data);
+    void this.render();
+  }
+  updateConfig(config) {
+    this.config = merge({ ...this.config }, config);
+    void this.render();
+  }
+  setTheme(name) {
+    const t2 = this.themeManager.apply(name);
+    if (!t2) return;
+    this.theme = t2;
+    this.svg.style.background = t2.background;
+    void this.render();
+  }
+  use(name, Plugin, config) {
+    this.pluginManager.register(name, Plugin, config);
+    return this;
+  }
+  getPlugin(name) {
+    return this.pluginManager.get(name);
+  }
+  setViewport(start, end) {
+    this.virtualRenderer.updateViewport(start, end);
+    void this.render();
+  }
+  resize() {
+    const w = this.container.offsetWidth || 600;
+    const h = this.config.height ?? 400;
+    this.svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    void this.render();
+  }
+  on(event, handler, priority) {
+    return this.eventBus.on(event, handler, priority);
+  }
+  off(event, handler) {
+    this.eventBus.off(event, handler);
+  }
+  emit(event, data) {
+    this.eventBus.emit(event, data);
+  }
+  destroy() {
+    this.animationEngine.stopAll();
+    this.realTime.disconnectAll();
+    this.pluginManager.destroyAll();
+    this._resizeObserver?.disconnect();
+    this.eventBus.clear();
+    this.svg?.parentNode?.removeChild(this.svg);
+  }
+  static create(container, config) {
+    return new _ChartForge(container, config);
+  }
+  static registerTheme(name, theme) {
+    _ChartForge._globalThemes.set(name, theme);
+  }
+};
+_ChartForge._globalThemes = /* @__PURE__ */ new Map();
+let ChartForge = _ChartForge;
+export {
+  AnimationEngine,
+  BUILT_IN_THEMES,
+  BarRenderer,
+  BaseRenderer,
+  CandlestickRenderer,
+  ChartForge,
+  ColumnRenderer,
+  DataPipeline,
+  DonutRenderer,
+  EventBus,
+  FunnelRenderer,
+  HeatmapRenderer,
+  LineRenderer,
+  MiddlewarePipeline,
+  PieRenderer,
+  PluginManager,
+  PollingAdapter,
+  RENDERERS,
+  RealTimeModule,
+  ScatterRenderer,
+  StackedBarRenderer,
+  StackedColumnRenderer,
+  ThemeManager,
+  VirtualRenderer,
+  WebSocketAdapter,
+  a as clamp,
+  createSVGElement,
+  darkTheme,
+  debounce,
+  b as describeArc,
+  f as flatMax,
+  e as flatMin,
+  lightTheme,
+  merge,
+  neonTheme,
+  g as plugins,
+  polarToCartesian,
+  removeChildren,
+  t as throttle,
+  uid
+};