velo-plot 2.0.0 → 3.0.0

package/dist/solid/useVeloPlot.d.ts

@@ -0,0 +1,18 @@
+import { Chart } from '../core/Chart';
+import { SeriesOptions, SeriesUpdateData, ZoomOptions, Bounds } from '../types';
+import { ChartBindingOptions } from '../bindings/shared';
+
+export interface UseVeloPlotOptions extends ChartBindingOptions {
+}
+export declare function useVeloPlot(options?: () => UseVeloPlotOptions): {
+    setContainerRef: (el: HTMLDivElement | null | undefined) => void;
+    chart: import('solid-js').Accessor<Chart | null>;
+    isReady: import('solid-js').Accessor<boolean>;
+    error: import('solid-js').Accessor<Error | null>;
+    bounds: import('solid-js').Accessor<Bounds | null>;
+    addSeries: (opts: SeriesOptions) => void;
+    updateSeries: (id: string, data: SeriesUpdateData) => void | undefined;
+    removeSeries: (id: string) => void | undefined;
+    zoom: (z: ZoomOptions) => void | undefined;
+    resetZoom: () => void;
+};

package/dist/solid.d.ts

@@ -0,0 +1 @@
+export * from './solid/index'

package/dist/solid.js

@@ -0,0 +1,172 @@
+import { template as E, use as b, effect as P, setStyleProperty as g } from "solid-js/web";
+import { createSignal as f, onCleanup as C, createEffect as y } from "solid-js";
+import { c as I, a as B, i as $, r as A, b as K } from "./chartSyncBridge-DbWrwtyP.js";
+import { p as w, o as V, s as L, d as M } from "./optionsSync-QUiN4Inw.js";
+import { c as z } from "./createStackedChart-Dm-YqUT7.js";
+import "./ChartCore-BpzRvN4Y.js";
+import "./index-x4stH3jD.js";
+import "./symbols-DT0eLlpW.js";
+import { s as R, a as G, b as x } from "./stackedSync-tnrunZMt.js";
+function k(e = () => ({})) {
+  const [t, l] = f(null), [n, a] = f(!1), [o, u] = f(null), [d, h] = f(null);
+  let m, r = null, s = w(e());
+  const v = (i) => {
+    m = i, r == null || r();
+    const c = I(i, e(), {
+      onBoundsChange: h,
+      onError: u
+    });
+    l(c.chart), r = c.destroy, h(c.getBounds()), a(!0), s = w(e());
+  };
+  return C(() => {
+    r == null || r(), l(null), a(!1);
+  }), y(() => {
+    const i = t(), c = e();
+    if (!i) return;
+    const S = w(c);
+    V(s, S) && (L(i, s, S), s = S);
+  }), {
+    setContainerRef: (i) => {
+      i && i !== m && v(i);
+    },
+    chart: t,
+    isReady: n,
+    error: o,
+    bounds: d,
+    addSeries: (i) => {
+      var S;
+      (S = t()) == null || S.addSeries(i);
+      const c = t();
+      c && h(c.getViewBounds());
+    },
+    updateSeries: (i, c) => {
+      var S;
+      return (S = t()) == null ? void 0 : S.updateSeries(i, c);
+    },
+    removeSeries: (i) => {
+      var c;
+      return (c = t()) == null ? void 0 : c.removeSeries(i);
+    },
+    zoom: (i) => {
+      var c;
+      return (c = t()) == null ? void 0 : c.zoom(i);
+    },
+    resetZoom: () => {
+      var c;
+      (c = t()) == null || c.resetZoom();
+      const i = t();
+      i && h(i.getViewBounds());
+    }
+  };
+}
+function N(e) {
+  const [t, l] = f(null), [n, a] = f(!1);
+  let o = null, u = "", d = /* @__PURE__ */ new Map();
+  const h = (r) => {
+    o == null || o();
+    const s = e(), v = z({ ...s, container: r });
+    l(v), o = () => v.destroy(), u = R(s.panes), d = x(v, s.panes, /* @__PURE__ */ new Map()), v.whenReady().then(() => a(!0));
+  }, m = (r) => {
+    r && h(r);
+  };
+  return C(() => {
+    o == null || o(), l(null), a(!1);
+  }), {
+    setContainerRef: m,
+    stack: t,
+    isReady: n,
+    fitAll: (r) => {
+      var s;
+      return (s = t()) == null ? void 0 : s.fitAll(r);
+    },
+    resetAll: () => {
+      var r;
+      return (r = t()) == null ? void 0 : r.resetAll();
+    },
+    sync: () => {
+      const r = t(), s = e();
+      if (!r || !n()) return;
+      if (R(s.panes) !== u) {
+        h(r.container);
+        return;
+      }
+      G(r, s), d = x(r, s.panes, d);
+    }
+  };
+}
+var p = /* @__PURE__ */ E("<div role=img style=position:relative>");
+function O(e) {
+  const t = k(() => e);
+  let l = /* @__PURE__ */ new Map();
+  return y(() => {
+    !t.isReady() || !t.chart() || (l = M({
+      addSeries: t.addSeries,
+      updateSeries: t.updateSeries,
+      removeSeries: t.removeSeries,
+      autoScale: () => t.chart().autoScale()
+    }, e.series ?? [], l));
+  }), (() => {
+    var n = p();
+    return b((a) => t.setContainerRef(a), n), P((a) => {
+      var o = `velo-plot-container${e.class ? ` ${e.class}` : ""}`, u = typeof e.width == "number" ? `${e.width}px` : e.width ?? "100%", d = typeof e.height == "number" ? `${e.height}px` : e.height ?? "400px";
+      return o !== a.e && (n.className = a.e = o), u !== a.t && g(n, "width", a.t = u), d !== a.a && g(n, "height", a.a = d), a;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), n;
+  })();
+}
+function W(e) {
+  const t = N(() => e);
+  return y(() => t.sync()), (() => {
+    var l = p();
+    return b((n) => t.setContainerRef(n), l), P((n) => {
+      var a = `velo-plot-stacked${e.class ? ` ${e.class}` : ""}`, o = typeof e.width == "number" ? `${e.width}px` : e.width ?? "100%", u = typeof e.height == "number" ? `${e.height}px` : e.height ?? "480px";
+      return a !== n.e && (l.className = n.e = a), o !== n.t && g(l, "width", n.t = o), u !== n.a && g(l, "height", n.a = u), n;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), l;
+  })();
+}
+function X(e, t, l = {}) {
+  const [n, a] = f(null), [o, u] = f(!1), [d, h] = f(null);
+  return y(() => {
+    const m = e();
+    if (!m) return;
+    let r = !1;
+    u(!0), B(m, t, l).then((s) => {
+      r || (a(s), u(!1));
+    }).catch((s) => {
+      r || (h(s instanceof Error ? s : new Error(String(s))), u(!1));
+    }), C(() => {
+      r = !0;
+      const s = n();
+      s && !$(m) && A(m, s.id);
+    });
+  }), { result: n, isLoading: o, error: d };
+}
+function Z(e, t) {
+  const [l, n] = f(null);
+  return y(() => {
+    const a = e();
+    let o = null;
+    a.length >= 2 ? (o = K(a, t), n(o.group)) : n(null), C(() => o == null ? void 0 : o.destroy());
+  }), { group: l };
+}
+const Y = Z, _ = O, ee = k, te = k;
+export {
+  _ as SciPlot,
+  W as StackedPlot,
+  O as VeloPlot,
+  Y as useChartGroup,
+  Z as useChartSync,
+  X as useIndicator,
+  te as useSciChart,
+  ee as useSciPlot,
+  N as useStackedPlot,
+  k as useVeloPlot
+};
+//# sourceMappingURL=solid.js.map

package/dist/solid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"solid.js","sources":["../src/solid/useVeloPlot.ts","../src/solid/useStackedPlot.ts","../src/solid/VeloPlot.tsx","../src/solid/useIndicator.ts","../src/solid/useChartSync.ts","../src/solid/index.ts"],"sourcesContent":["import { createSignal, onCleanup, createEffect } from \"solid-js\";\nimport type { Chart } from \"../core/Chart\";\nimport type { SeriesOptions, SeriesUpdateData, ZoomOptions, Bounds } from \"../types\";\nimport {\n  createChartLifecycle,\n  type ChartBindingOptions,\n  optionsChanged,\n  syncChartOptions,\n  pickSyncableOptions,\n} from \"../bindings/shared\";\n\nexport interface UseVeloPlotOptions extends ChartBindingOptions {}\n\nexport function useVeloPlot(options: () => UseVeloPlotOptions = () => ({})) {\n  const [chart, setChart] = createSignal<Chart | null>(null);\n  const [isReady, setIsReady] = createSignal(false);\n  const [error, setError] = createSignal<Error | null>(null);\n  const [bounds, setBounds] = createSignal<Bounds | null>(null);\n  let container: HTMLDivElement | undefined;\n  let destroy: (() => void) | null = null;\n  let prevSync = pickSyncableOptions(options());\n\n  const mount = (el: HTMLDivElement) => {\n    container = el;\n    destroy?.();\n    const handle = createChartLifecycle(el, options(), {\n      onBoundsChange: setBounds,\n      onError: setError,\n    });\n    setChart(handle.chart);\n    destroy = handle.destroy;\n    setBounds(handle.getBounds());\n    setIsReady(true);\n    prevSync = pickSyncableOptions(options());\n  };\n\n  onCleanup(() => {\n    destroy?.();\n    setChart(null);\n    setIsReady(false);\n  });\n\n  createEffect(() => {\n    const c = chart();\n    const opts = options();\n    if (!c) return;\n    const next = pickSyncableOptions(opts);\n    if (optionsChanged(prevSync, next)) {\n      syncChartOptions(c, prevSync, next);\n      prevSync = next;\n    }\n  });\n\n  return {\n    setContainerRef: (el: HTMLDivElement | null | undefined) => {\n      if (el && el !== container) mount(el);\n    },\n    chart,\n    isReady,\n    error,\n    bounds,\n    addSeries: (opts: SeriesOptions) => {\n      chart()?.addSeries(opts);\n      const c = chart();\n      if (c) setBounds(c.getViewBounds());\n    },\n    updateSeries: (id: string, data: SeriesUpdateData) => chart()?.updateSeries(id, data),\n    removeSeries: (id: string) => chart()?.removeSeries(id),\n    zoom: (z: ZoomOptions) => chart()?.zoom(z),\n    resetZoom: () => {\n      chart()?.resetZoom();\n      const c = chart();\n      if (c) setBounds(c.getViewBounds());\n    },\n  };\n}\n","import { createSignal, onCleanup } from \"solid-js\";\nimport { createStackedChart } from \"../core/stacked\";\nimport type { StackedChart, StackedChartOptions } from \"../core/stacked\";\nimport type { Range } from \"../types\";\nimport { stackedStructureKey, syncStackedOptions, syncStackedPaneSeries } from \"../bindings/shared\";\nimport type { VeloPlotSeries } from \"../bindings/shared\";\n\nexport function useStackedPlot(getOptions: () => Omit<StackedChartOptions, \"container\">) {\n  const [stack, setStack] = createSignal<StackedChart | null>(null);\n  const [isReady, setIsReady] = createSignal(false);\n  let destroy: (() => void) | null = null;\n  let structureKey = \"\";\n  let paneSeries = new Map<string, Map<string, VeloPlotSeries>>();\n\n  const mount = (el: HTMLDivElement) => {\n    destroy?.();\n    const opts = getOptions();\n    const created = createStackedChart({ ...opts, container: el });\n    setStack(created);\n    destroy = () => created.destroy();\n    structureKey = stackedStructureKey(opts.panes);\n    paneSeries = syncStackedPaneSeries(created, opts.panes, new Map());\n    created.whenReady().then(() => setIsReady(true));\n  };\n\n  const setContainerRef = (el: HTMLDivElement | null | undefined) => {\n    if (el) mount(el);\n  };\n\n  onCleanup(() => {\n    destroy?.();\n    setStack(null);\n    setIsReady(false);\n  });\n\n  return {\n    setContainerRef,\n    stack,\n    isReady,\n    fitAll: (opts?: { x?: Range; padding?: number }) => stack()?.fitAll(opts),\n    resetAll: () => stack()?.resetAll(),\n    sync: () => {\n      const s = stack();\n      const opts = getOptions();\n      if (!s || !isReady()) return;\n      const nextKey = stackedStructureKey(opts.panes);\n      if (nextKey !== structureKey) {\n        mount(s.container);\n        return;\n      }\n      syncStackedOptions(s, opts);\n      paneSeries = syncStackedPaneSeries(s, opts.panes, paneSeries);\n    },\n  };\n}\n","import { createEffect } from \"solid-js\";\nimport { useVeloPlot, type UseVeloPlotOptions } from \"./useVeloPlot\";\nimport { useStackedPlot } from \"./useStackedPlot\";\nimport { diffSeries, type VeloPlotSeries } from \"../bindings/shared\";\n\nexport interface VeloPlotProps extends UseVeloPlotOptions {\n  series?: VeloPlotSeries[];\n  width?: number | string;\n  height?: number | string;\n  class?: string;\n}\n\nexport function VeloPlot(props: VeloPlotProps) {\n  const api = useVeloPlot(() => props);\n  let previous = new Map<string, VeloPlotSeries>();\n\n  createEffect(() => {\n    if (!api.isReady() || !api.chart()) return;\n    previous = diffSeries(\n      {\n        addSeries: api.addSeries,\n        updateSeries: api.updateSeries,\n        removeSeries: api.removeSeries,\n        autoScale: () => api.chart()!.autoScale(),\n      },\n      props.series ?? [],\n      previous,\n    );\n  });\n\n  return (\n    <div\n      ref={(el) => api.setContainerRef(el)}\n      className={`velo-plot-container${props.class ? ` ${props.class}` : \"\"}`}\n      role=\"img\"\n      style={{\n        position: \"relative\",\n        width: typeof props.width === \"number\" ? `${props.width}px` : props.width ?? \"100%\",\n        height: typeof props.height === \"number\" ? `${props.height}px` : props.height ?? \"400px\",\n      }}\n    />\n  );\n}\n\nexport function StackedPlot(\n  props: {\n    panes: import(\"../core/stacked\").StackedPaneConfig[];\n    width?: number | string;\n    height?: number | string;\n    class?: string;\n  } & Omit<import(\"../core/stacked\").StackedChartOptions, \"container\" | \"panes\">,\n) {\n  const api = useStackedPlot(() => props);\n  createEffect(() => api.sync());\n\n  return (\n    <div\n      ref={(el) => api.setContainerRef(el)}\n      className={`velo-plot-stacked${props.class ? ` ${props.class}` : \"\"}`}\n      role=\"img\"\n      style={{\n        position: \"relative\",\n        width: typeof props.width === \"number\" ? `${props.width}px` : props.width ?? \"100%\",\n        height: typeof props.height === \"number\" ? `${props.height}px` : props.height ?? \"480px\",\n      }}\n    />\n  );\n}\n","import { createSignal, createEffect, onCleanup } from \"solid-js\";\nimport type { AddIndicatorOptions, AddIndicatorResult } from \"../core/indicator/addIndicator\";\nimport type { IndicatorPresetName } from \"../core/indicator/indicatorPresets\";\nimport { addIndicatorToHost, isStackedChart, removeIndicatorFromChart, type IndicatorHost } from \"../bindings/shared\";\nimport type { Chart } from \"../core/chart/types\";\n\nexport function useIndicator(\n  host: () => IndicatorHost,\n  preset: IndicatorPresetName,\n  options: AddIndicatorOptions = {},\n) {\n  const [result, setResult] = createSignal<(AddIndicatorResult & { paneId?: string }) | null>(null);\n  const [isLoading, setIsLoading] = createSignal(false);\n  const [error, setError] = createSignal<Error | null>(null);\n\n  createEffect(() => {\n    const h = host();\n    if (!h) return;\n    let cancelled = false;\n    setIsLoading(true);\n    addIndicatorToHost(h, preset, options)\n      .then((res) => {\n        if (!cancelled) {\n          setResult(res);\n          setIsLoading(false);\n        }\n      })\n      .catch((e) => {\n        if (!cancelled) {\n          setError(e instanceof Error ? e : new Error(String(e)));\n          setIsLoading(false);\n        }\n      });\n    onCleanup(() => {\n      cancelled = true;\n      const res = result();\n      if (res && !isStackedChart(h)) removeIndicatorFromChart(h as Chart, res.id);\n    });\n  });\n\n  return { result, isLoading, error };\n}\n","import { createSignal, createEffect, onCleanup } from \"solid-js\";\nimport type { ChartLike, SyncOptions } from \"../core/sync\";\nimport { ChartGroup } from \"../core/sync\";\nimport { createChartSync } from \"../bindings/shared\";\n\nexport function useChartSync(charts: () => ChartLike[], options?: SyncOptions) {\n  const [group, setGroup] = createSignal<ChartGroup | null>(null);\n\n  createEffect(() => {\n    const list = charts();\n    let handle: ReturnType<typeof createChartSync> | null = null;\n    if (list.length >= 2) {\n      handle = createChartSync(list, options);\n      setGroup(handle.group);\n    } else {\n      setGroup(null);\n    }\n    onCleanup(() => handle?.destroy());\n  });\n\n  return { group };\n}\n\nexport const useChartGroup = useChartSync;\n","export { VeloPlot, StackedPlot } from \"./VeloPlot\";\nexport { useVeloPlot, type UseVeloPlotOptions } from \"./useVeloPlot\";\nexport { useStackedPlot } from \"./useStackedPlot\";\nexport { useIndicator } from \"./useIndicator\";\nexport { useChartSync, useChartGroup } from \"./useChartSync\";\n\nimport { VeloPlot as VeloPlotImpl } from \"./VeloPlot\";\nimport { useVeloPlot as useVeloPlotImpl } from \"./useVeloPlot\";\n\n/** @deprecated Use `VeloPlot` instead. **Removed in v4.0.** */\nexport const SciPlot = VeloPlotImpl;\n/** @deprecated Use `useVeloPlot` instead. **Removed in v4.0.** */\nexport const useSciPlot = useVeloPlotImpl;\n/** @deprecated Use `useVeloPlot` instead. **Removed in v4.0.** */\nexport const useSciChart = useVeloPlotImpl;\n"],"names":["useVeloPlot","options","chart","setChart","createSignal","isReady","setIsReady","error","setError","bounds","setBounds","container","destroy","prevSync","pickSyncableOptions","mount","el","handle","createChartLifecycle","onCleanup","createEffect","c","opts","next","optionsChanged","syncChartOptions","_a","id","data","z","useStackedPlot","getOptions","stack","setStack","structureKey","paneSeries","created","createStackedChart","stackedStructureKey","syncStackedPaneSeries","setContainerRef","s","syncStackedOptions","VeloPlot","props","api","previous","Map","diffSeries","addSeries","updateSeries","removeSeries","autoScale","series","_el$","_tmpl$","_$use","_$effect","_p$","_v$","class","_v$2","width","_v$3","height","e","className","t","_$setStyleProperty","a","undefined","StackedPlot","sync","_el$2","_v$4","_v$5","_v$6","useIndicator","host","preset","result","setResult","isLoading","setIsLoading","h","cancelled","addIndicatorToHost","res","isStackedChart","removeIndicatorFromChart","useChartSync","charts","group","setGroup","list","createChartSync","useChartGroup","SciPlot","VeloPlotImpl","useSciPlot","useVeloPlotImpl","useSciChart"],"mappings":"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"}

package/dist/stackedSync-tnrunZMt.js

@@ -0,0 +1,100 @@
+import { d as w, v as x } from "./optionsSync-QUiN4Inw.js";
+function P(i) {
+  return i.map(
+    (t) => `${t.id}:${t.height}:${t.showXAxis ?? ""}:${t.showYAxis ?? ""}`
+  ).join("|");
+}
+function b(i, t) {
+  if (t !== void 0)
+    for (const d of i.getPanes())
+      d.setTheme(t);
+}
+function g(i, t) {
+  if (t === !1) {
+    i.setSyncAxis("none");
+    return;
+  }
+  t === !0 || t === void 0 || i.setSyncOptions(t);
+}
+function k(i, t, d) {
+  var s;
+  const r = /* @__PURE__ */ new Map();
+  for (const a of t) {
+    const o = i.getPane(a.id);
+    if (!o || !((s = a.series) != null && s.length)) {
+      r.set(a.id, /* @__PURE__ */ new Map());
+      continue;
+    }
+    const c = a.series.map((e) => {
+      var n, f, y, p, h, S, m;
+      if (e.type === "candlestick" && e.data)
+        return {
+          id: e.id,
+          type: "candlestick",
+          x: e.data.x,
+          open: e.data.open,
+          high: e.data.high,
+          low: e.data.low,
+          close: e.data.close,
+          color: (n = e.style) == null ? void 0 : n.color,
+          width: (f = e.style) == null ? void 0 : f.width,
+          visible: e.visible,
+          name: e.name
+        };
+      if (e.type === "bar" && e.data)
+        return {
+          id: e.id,
+          type: "bar",
+          x: e.data.x,
+          y: e.data.y,
+          color: (y = e.style) == null ? void 0 : y.color,
+          width: (p = e.style) == null ? void 0 : p.width,
+          visible: e.visible,
+          name: e.name
+        };
+      if (e.type === "heatmap" && e.data) {
+        const l = e.data;
+        return {
+          id: e.id,
+          type: "heatmap",
+          data: {
+            xValues: l.xValues,
+            yValues: l.yValues,
+            zValues: l.zValues
+          },
+          color: (h = e.style) == null ? void 0 : h.color,
+          visible: e.visible,
+          name: e.name
+        };
+      }
+      return {
+        id: e.id,
+        type: "line",
+        x: e.data.x,
+        y: e.data.y,
+        color: (S = e.style) == null ? void 0 : S.color,
+        width: (m = e.style) == null ? void 0 : m.width,
+        visible: e.visible,
+        name: e.name
+      };
+    }), u = d.get(a.id) ?? /* @__PURE__ */ new Map(), v = {
+      addSeries: (e) => o.addSeries(e),
+      updateSeries: (e, n) => o.updateSeries(e, n),
+      removeSeries: (e) => o.removeSeries(e),
+      autoScale: () => o.autoScale()
+    };
+    if (r.set(a.id, w(v, c, u)), u.size === 0 && a.series.length > 0)
+      for (const e of a.series)
+        o.getAllSeries().some((n) => n.getId() === e.id) || o.addSeries(x(c.find((n) => n.id === e.id)));
+  }
+  return r;
+}
+function z(i, t) {
+  b(i, t.theme), g(i, t.sync), t.gap !== void 0 && i.resize();
+}
+export {
+  z as a,
+  k as b,
+  P as s
+};
+//# sourceMappingURL=stackedSync-tnrunZMt.js.map

package/dist/stackedSync-tnrunZMt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stackedSync-tnrunZMt.js","sources":["../src/bindings/shared/stackedSync.ts"],"sourcesContent":["/**\n * Stacked chart option sync without full remount when possible.\n */\n\nimport type { StackedChart, StackedChartOptions } from \"../../core/stacked/types\";\nimport type { StackedPaneConfig } from \"../../core/stacked/types\";\nimport { diffSeries } from \"./seriesDiff\";\nimport type { VeloPlotSeries } from \"./types\";\nimport { veloPlotSeriesToOptions } from \"./seriesDiff\";\n\nexport type SyncableStackedOptions = Omit<StackedChartOptions, \"container\">;\n\nexport function stackedStructureKey(panes: StackedPaneConfig[]): string {\n  return panes\n    .map(\n      (p) =>\n        `${p.id}:${p.height}:${p.showXAxis ?? \"\"}:${p.showYAxis ?? \"\"}`,\n    )\n    .join(\"|\");\n}\n\nexport function syncStackedTheme(\n  stack: StackedChart,\n  theme: StackedChartOptions[\"theme\"],\n): void {\n  if (theme === undefined) return;\n  for (const pane of stack.getPanes()) {\n    pane.setTheme(theme);\n  }\n}\n\nexport function syncStackedSyncOptions(\n  stack: StackedChart,\n  sync: StackedChartOptions[\"sync\"],\n): void {\n  if (sync === false) {\n    stack.setSyncAxis(\"none\");\n    return;\n  }\n  if (sync === true || sync === undefined) return;\n  stack.setSyncOptions(sync);\n}\n\nexport function syncStackedPaneSeries(\n  stack: StackedChart,\n  panes: StackedPaneConfig[],\n  previousSeries: Map<string, Map<string, VeloPlotSeries>>,\n): Map<string, Map<string, VeloPlotSeries>> {\n  const next = new Map<string, Map<string, VeloPlotSeries>>();\n\n  for (const pane of panes) {\n    const chart = stack.getPane(pane.id);\n    if (!chart || !pane.series?.length) {\n      next.set(pane.id, new Map());\n      continue;\n    }\n\n    const asVeloPlot: VeloPlotSeries[] = pane.series.map((s) => {\n      if (s.type === \"candlestick\" && s.data) {\n        return {\n          id: s.id,\n          type: \"candlestick\" as const,\n          x: s.data.x,\n          open: s.data.open!,\n          high: s.data.high!,\n          low: s.data.low!,\n          close: s.data.close!,\n          color: s.style?.color,\n          width: s.style?.width,\n          visible: s.visible,\n          name: s.name,\n        };\n      }\n      if (s.type === \"bar\" && s.data) {\n        return {\n          id: s.id,\n          type: \"bar\" as const,\n          x: s.data.x,\n          y: s.data.y,\n          color: s.style?.color,\n          width: s.style?.width,\n          visible: s.visible,\n          name: s.name,\n        };\n      }\n      if (s.type === \"heatmap\" && s.data) {\n        const hd = s.data as unknown as import(\"../../types\").HeatmapData;\n        return {\n          id: s.id,\n          type: \"heatmap\" as const,\n          data: {\n            xValues: hd.xValues,\n            yValues: hd.yValues,\n            zValues: hd.zValues,\n          },\n          color: s.style?.color,\n          visible: s.visible,\n          name: s.name,\n        };\n      }\n      return {\n        id: s.id,\n        type: \"line\" as const,\n        x: s.data.x,\n        y: s.data.y,\n        color: s.style?.color,\n        width: s.style?.width,\n        visible: s.visible,\n        name: s.name,\n      };\n    });\n\n    const prev = previousSeries.get(pane.id) ?? new Map();\n    const actions = {\n      addSeries: (opts: Parameters<typeof chart.addSeries>[0]) =>\n        chart.addSeries(opts),\n      updateSeries: (id: string, data: Parameters<typeof chart.updateSeries>[1]) =>\n        chart.updateSeries(id, data),\n      removeSeries: (id: string) => chart.removeSeries(id),\n      autoScale: () => chart.autoScale(),\n    };\n    next.set(pane.id, diffSeries(actions, asVeloPlot, prev));\n\n    // Also handle initial series from StackedPaneConfig on first mount\n    if (prev.size === 0 && pane.series.length > 0) {\n      for (const s of pane.series) {\n        if (!chart.getAllSeries().some((existing) => existing.getId() === s.id)) {\n          chart.addSeries(veloPlotSeriesToOptions(asVeloPlot.find((x) => x.id === s.id)!));\n        }\n      }\n    }\n  }\n\n  return next;\n}\n\nexport function syncStackedOptions(\n  stack: StackedChart,\n  options: SyncableStackedOptions,\n): void {\n  syncStackedTheme(stack, options.theme);\n  syncStackedSyncOptions(stack, options.sync);\n  if (options.gap !== undefined) {\n    stack.resize();\n  }\n}\n"],"names":["stackedStructureKey","panes","p","syncStackedTheme","stack","theme","pane","syncStackedSyncOptions","sync","syncStackedPaneSeries","previousSeries","next","chart","_a","asVeloPlot","s","_b","_c","_d","hd","_e","_f","_g","prev","actions","opts","id","data","diffSeries","existing","veloPlotSeriesToOptions","x","syncStackedOptions","options"],"mappings":"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"}

package/dist/svelte/StackedPlot.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { createStackedPlot } from "./useStackedPlot";
+  import type { StackedChartOptions } from "../core/stacked";
+
+  export let panes: StackedChartOptions["panes"];
+  export let width: number | string = "100%";
+  export let height: number | string = 480;
+  export let stackOptions: Omit<StackedChartOptions, "container" | "panes"> = {};
+  let className = "";
+  export { className as class };
+
+  const api = createStackedPlot({ panes, ...stackOptions });
+  let container: HTMLDivElement;
+
+  onMount(() => api.mount(container));
+  onDestroy(() => api.unmount());
+
+  $: api.sync({ panes, ...stackOptions });
+</script>
+
+<div
+  bind:this={container}
+  class={`velo-plot-stacked${className ? ` ${className}` : ""}`}
+  role="img"
+  style:position="relative"
+  style:width={typeof width === "number" ? `${width}px` : width}
+  style:height={typeof height === "number" ? `${height}px` : height}
+/>

package/dist/svelte/StackedPlot.test.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mount, flushSync, unmount } from "svelte";
+import StackedPlot from "./StackedPlot.svelte";
+
+const mockStack = {
+  destroy: vi.fn(),
+  whenReady: () => Promise.resolve(),
+  fitAll: vi.fn(),
+  resetAll: vi.fn(),
+};
+
+let paneKey = "a";
+
+vi.mock("../core/stacked", () => ({
+  createStackedChart: vi.fn(() => mockStack),
+}));
+
+vi.mock("../bindings/shared", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../bindings/shared")>();
+  return {
+    ...actual,
+    stackedStructureKey: () => paneKey,
+    syncStackedPaneSeries: () => new Map(),
+    syncStackedOptions: vi.fn(),
+  };
+});
+
+describe("StackedPlot.svelte", () => {
+  afterEach(() => {
+    document.body.replaceChildren();
+    vi.clearAllMocks();
+  });
+
+  it("renders with empty class by default", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const component = mount(StackedPlot, {
+      target,
+      props: {
+        panes: [{ id: "p", height: 1, series: [] }],
+      },
+    });
+    flushSync();
+    const el = target.querySelector(".velo-plot-stacked") as HTMLElement;
+    expect(el.className).toBe("velo-plot-stacked");
+    unmount(component);
+  });
+
+  it("renders with custom class", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const component = mount(StackedPlot, {
+      target,
+      props: {
+        panes: [{ id: "p", height: 1, series: [] }],
+        class: "stack-panel",
+        width: "100%",
+        height: 480,
+      },
+    });
+    flushSync();
+    expect(target.querySelector(".velo-plot-stacked.stack-panel")).toBeTruthy();
+    unmount(component);
+  });
+
+  it("renders with string height and numeric width", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const component = mount(StackedPlot, {
+      target,
+      props: {
+        panes: [{ id: "p", height: 1, series: [] }],
+        width: 500,
+        height: "50%",
+      },
+    });
+    flushSync();
+    const el = target.querySelector(".velo-plot-stacked") as HTMLElement;
+    const style = el.getAttribute("style") ?? "";
+    expect(style.includes("500px") || el.style.width === "500px").toBe(true);
+    expect(style.includes("50%") || el.style.height === "50%").toBe(true);
+    unmount(component);
+  });
+
+  it("renders stacked container and syncs options", () => {
+    paneKey = "a";
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const first = mount(StackedPlot, {
+      target,
+      props: {
+        panes: [{ id: "p", height: 1, series: [] }],
+        width: 500,
+        height: 300,
+        class: "stacked",
+      },
+    });
+    flushSync();
+    expect(target.querySelector(".velo-plot-stacked.stacked")).toBeTruthy();
+    unmount(first);
+    paneKey = "b";
+    mount(StackedPlot, {
+      target,
+      props: {
+        panes: [{ id: "q", height: 1, series: [] }],
+        stackOptions: { theme: "dark" },
+        width: "100%",
+        height: 480,
+      },
+    });
+    flushSync();
+    expect(mockStack.destroy).toHaveBeenCalled();
+  });
+});

package/dist/svelte/VeloPlot.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { createVeloPlot, type UseVeloPlotOptions } from "./useVeloPlot";
+  import { diffSeries, type VeloPlotSeries } from "../bindings/shared";
+
+  export let series: VeloPlotSeries[] = [];
+  export let width: number | string = "100%";
+  export let height: number | string = 400;
+  export let chartOptions: UseVeloPlotOptions = {};
+  let className = "";
+  export { className as class };
+
+  const api = createVeloPlot(chartOptions);
+  const { isReady, chart, mount, unmount, updateOptions, addSeries, updateSeries, removeSeries } =
+    api;
+  let container: HTMLDivElement;
+  let previous = new Map<string, VeloPlotSeries>();
+
+  onMount(() => mount(container));
+  onDestroy(() => unmount());
+
+  $: if ($isReady && $chart) {
+    updateOptions(chartOptions);
+    previous = diffSeries(
+      {
+        addSeries,
+        updateSeries,
+        removeSeries,
+        autoScale: () => $chart.autoScale(),
+      },
+      series,
+      previous,
+    );
+  }
+</script>
+
+<div
+  bind:this={container}
+  class={`velo-plot-container${className ? ` ${className}` : ""}`}
+  role="img"
+  style:position="relative"
+  style:width={typeof width === "number" ? `${width}px` : width}
+  style:height={typeof height === "number" ? `${height}px` : height}
+/>

package/dist/svelte/VeloPlot.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mount, flushSync, unmount } from "svelte";
+import VeloPlot from "./VeloPlot.svelte";
+import { buildMockChart } from "../bindings/test-utils";
+
+const mockChart = buildMockChart();
+
+vi.mock("../bindings/shared/chartLifecycle", () => ({
+  createChartLifecycle: vi.fn(() => ({
+    chart: mockChart,
+    getBounds: () => mockChart.getViewBounds(),
+    destroy: mockChart.destroy,
+  })),
+  pickSyncableOptions: (o: object) => o,
+  optionsChanged: () => false,
+  syncChartOptions: vi.fn(),
+}));
+
+describe("VeloPlot.svelte", () => {
+  afterEach(() => {
+    document.body.replaceChildren();
+    vi.clearAllMocks();
+  });
+
+  it("renders with empty class by default", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const component = mount(VeloPlot, {
+      target,
+      props: { series: [] },
+    });
+    flushSync();
+    const el = target.querySelector(".velo-plot-container") as HTMLElement;
+    expect(el.className).toBe("velo-plot-container");
+    unmount(component);
+  });
+
+  it("renders with custom class and string height", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const component = mount(VeloPlot, {
+      target,
+      props: {
+        series: [],
+        class: "chart-panel",
+        width: 640,
+        height: "50vh",
+      },
+    });
+    flushSync();
+    const el = target.querySelector(".velo-plot-container.chart-panel") as HTMLElement;
+    expect(el).toBeTruthy();
+    const style = el.getAttribute("style") ?? "";
+    expect(style.includes("50vh") || el.style.height === "50vh").toBe(true);
+    unmount(component);
+  });
+
+  it("renders with string width and numeric height", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const component = mount(VeloPlot, {
+      target,
+      props: {
+        series: [],
+        width: "100%",
+        height: 320,
+      },
+    });
+    flushSync();
+    const el = target.querySelector(".velo-plot-container") as HTMLElement;
+    expect(el.style.width || el.getAttribute("style")).toContain("100%");
+    expect(el.style.height || el.getAttribute("style")).toContain("320px");
+    unmount(component);
+  });
+
+  it("mounts chart container and syncs series", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const component = mount(VeloPlot, {
+      target,
+      props: {
+        series: [{ id: "a", x: new Float32Array([0]), y: new Float32Array([0]) }],
+        width: 640,
+        height: 320,
+        class: "custom",
+        chartOptions: { animations: false },
+      },
+    });
+    flushSync();
+    expect(target.querySelector(".velo-plot-container.custom")).toBeTruthy();
+    unmount(component);
+    const updated = mount(VeloPlot, {
+      target,
+      props: {
+        series: [{ id: "b", x: new Float32Array([0, 1]), y: new Float32Array([0, 1]) }],
+        width: "100%",
+        height: 400,
+        chartOptions: { theme: "dark" },
+      },
+    });
+    flushSync();
+    expect(mockChart.addSeries).toHaveBeenCalled();
+    unmount(updated);
+  });
+});

package/dist/svelte/index.d.ts

@@ -0,0 +1,11 @@
+import { useVeloPlot as useVeloPlotImpl } from './useVeloPlot';
+export { createVeloPlot, useVeloPlot, type UseVeloPlotOptions } from './useVeloPlot';
+export { createStackedPlot, useStackedPlot } from './useStackedPlot';
+export { useIndicator } from './useIndicator';
+export { useChartSync, useChartGroup } from './useChartSync';
+/** @deprecated Use `useVeloPlot` / `createVeloPlot` instead. **Removed in v4.0.** */
+export declare const useSciPlot: typeof useVeloPlotImpl;
+/** @deprecated Use `createVeloPlot` instead. **Removed in v4.0.** */
+export declare const createSciPlot: typeof useVeloPlotImpl;
+/** @deprecated Use `useVeloPlot` instead. **Removed in v4.0.** */
+export declare const useSciChart: typeof useVeloPlotImpl;