velo-plot 2.20.0 → 3.1.0

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;

package/dist/svelte/index.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from "vitest";
+import * as svelte from "./index";
+
+describe("svelte index", () => {
+  it("re-exports public svelte bindings", () => {
+    expect(svelte.createVeloPlot).toBeTypeOf("function");
+    expect(svelte.useVeloPlot).toBe(svelte.createVeloPlot);
+    expect(svelte.createStackedPlot).toBeTypeOf("function");
+    expect(svelte.useStackedPlot).toBe(svelte.createStackedPlot);
+    expect(svelte.useIndicator).toBeTypeOf("function");
+    expect(svelte.useChartSync).toBeTypeOf("function");
+    expect(svelte.useChartGroup).toBe(svelte.useChartSync);
+  });
+
+  it("keeps SciPlot aliases for backward compatibility", () => {
+    expect(svelte.useSciPlot).toBe(svelte.useVeloPlot);
+    expect(svelte.createSciPlot).toBe(svelte.createVeloPlot);
+    expect(svelte.useSciChart).toBe(svelte.useVeloPlot);
+  });
+});

package/dist/svelte/index.ts

@@ -0,0 +1,15 @@
+export { createVeloPlot, useVeloPlot, type UseVeloPlotOptions } from "./useVeloPlot";
+export { createStackedPlot, useStackedPlot } from "./useStackedPlot";
+export { useIndicator } from "./useIndicator";
+export { useChartSync, useChartGroup } from "./useChartSync";
+
+import { useVeloPlot as useVeloPlotImpl, createVeloPlot as createVeloPlotImpl } from "./useVeloPlot";
+
+/** @deprecated Use `useVeloPlot` / `createVeloPlot` instead. **Removed in v4.0.** */
+export const useSciPlot = useVeloPlotImpl;
+/** @deprecated Use `createVeloPlot` instead. **Removed in v4.0.** */
+export const createSciPlot = createVeloPlotImpl;
+/** @deprecated Use `useVeloPlot` instead. **Removed in v4.0.** */
+export const useSciChart = useVeloPlotImpl;
+
+// Svelte components: import from 'velo-plot/svelte/VeloPlot.svelte' (shipped as source)

package/dist/svelte/useChartSync.d.ts

@@ -0,0 +1,8 @@
+import { ChartLike, SyncOptions, ChartGroup } from '../core/sync';
+
+export declare function useChartSync(getCharts: () => ChartLike[], options?: SyncOptions): {
+    group: import('svelte/store').Writable<ChartGroup | null>;
+    sync: () => void;
+    destroy: () => void;
+};
+export declare const useChartGroup: typeof useChartSync;

package/dist/svelte/useChartSync.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from "vitest";
+import { get } from "svelte/store";
+import { useChartSync } from "./useChartSync";
+import { buildMockChart } from "../bindings/test-utils";
+
+const destroy = vi.fn();
+const mockGroup = { destroy };
+
+vi.mock("../bindings/shared", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../bindings/shared")>();
+  return {
+    ...actual,
+    createChartSync: vi.fn(() => ({ group: mockGroup, destroy })),
+  };
+});
+
+describe("useChartSync svelte", () => {
+  it("re-sync destroys previous chart sync handle", () => {
+    const charts = [buildMockChart("a"), buildMockChart("b")];
+    const api = useChartSync(() => charts, { axis: "x" });
+    api.sync();
+    api.sync();
+    expect(destroy).toHaveBeenCalled();
+  });
+
+  it("syncs multiple charts with options", () => {
+    const charts = [buildMockChart("a"), buildMockChart("b")];
+    const api = useChartSync(() => charts, { axis: "y" });
+    api.sync();
+    expect(get(api.group)).toBe(mockGroup);
+    api.destroy();
+    expect(destroy).toHaveBeenCalled();
+  });
+
+  it("syncs multiple charts and destroys", () => {
+    const charts = [buildMockChart("a"), buildMockChart("b")];
+    const api = useChartSync(() => charts);
+    api.sync();
+    expect(get(api.group)).toBe(mockGroup);
+    api.destroy();
+    expect(destroy).toHaveBeenCalled();
+  });
+
+  it("skips sync for single chart", () => {
+    const api = useChartSync(() => [buildMockChart()]);
+    api.sync();
+    expect(get(api.group)).toBeNull();
+  });
+});

package/dist/svelte/useChartSync.ts

@@ -0,0 +1,29 @@
+import { writable } from "svelte/store";
+import type { ChartLike, SyncOptions } from "../core/sync";
+import { ChartGroup } from "../core/sync";
+import { createChartSync } from "../bindings/shared";
+
+export function useChartSync(getCharts: () => ChartLike[], options?: SyncOptions) {
+  const group = writable<ChartGroup | null>(null);
+  let handle: ReturnType<typeof createChartSync> | null = null;
+
+  const sync = () => {
+    handle?.destroy();
+    const charts = getCharts();
+    if (charts.length < 2) {
+      group.set(null);
+      return;
+    }
+    handle = createChartSync(charts, options);
+    group.set(handle.group);
+  };
+
+  const destroy = () => {
+    handle?.destroy();
+    group.set(null);
+  };
+
+  return { group, sync, destroy };
+}
+
+export const useChartGroup = useChartSync;

package/dist/svelte/useIndicator.d.ts

@@ -0,0 +1,13 @@
+import { AddIndicatorOptions, AddIndicatorResult } from '../core/indicator/addIndicator';
+import { IndicatorPresetName } from '../core/indicator/indicatorPresets';
+import { IndicatorHost } from '../bindings/shared';
+
+export declare function useIndicator(getHost: () => IndicatorHost, preset: IndicatorPresetName, options?: AddIndicatorOptions): {
+    result: import('svelte/store').Writable<(AddIndicatorResult & {
+        paneId?: string;
+    }) | null>;
+    isLoading: import('svelte/store').Writable<boolean>;
+    error: import('svelte/store').Writable<Error | null>;
+    run: () => Promise<void>;
+    cleanup: () => void;
+};

package/dist/svelte/useIndicator.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { get } from "svelte/store";
+import { useIndicator } from "./useIndicator";
+import { buildMockChart } from "../bindings/test-utils";
+
+vi.mock("../bindings/shared", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../bindings/shared")>();
+  return {
+    ...actual,
+    addIndicatorToHost: vi.fn(async () => ({ id: "rsi", seriesIds: ["rsi"] })),
+    removeIndicatorFromChart: vi.fn(),
+    isStackedChart: vi.fn(() => false),
+  };
+});
+
+describe("useIndicator svelte", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("loads indicator and cleans up on chart host", async () => {
+    const chart = buildMockChart();
+    const api = useIndicator(() => chart, "rsi");
+    await api.run();
+    expect(get(api.result)?.id).toBe("rsi");
+    api.cleanup();
+    const { removeIndicatorFromChart } = await import("../bindings/shared");
+    expect(removeIndicatorFromChart).toHaveBeenCalledWith(chart, "rsi");
+  });
+
+  it("records errors", async () => {
+    const { addIndicatorToHost } = await import("../bindings/shared");
+    vi.mocked(addIndicatorToHost).mockRejectedValueOnce(new Error("fail"));
+    const api = useIndicator(() => buildMockChart(), "macd");
+    await api.run();
+    expect(get(api.error)?.message).toBe("fail");
+  });
+
+  it("skips when host is null", async () => {
+    const api = useIndicator(() => null, "rsi");
+    await api.run();
+    expect(get(api.result)).toBeNull();
+  });
+
+  it("cleanup no-ops without indicator result", () => {
+    const api = useIndicator(() => buildMockChart(), "rsi");
+    api.cleanup();
+  });
+
+  it("skips cleanup for stacked chart hosts", async () => {
+    const { isStackedChart, removeIndicatorFromChart } = await import("../bindings/shared");
+    vi.mocked(isStackedChart).mockReturnValueOnce(true);
+    const chart = buildMockChart();
+    const api = useIndicator(() => chart, "ema");
+    await api.run();
+    api.cleanup();
+    expect(removeIndicatorFromChart).not.toHaveBeenCalled();
+  });
+
+  it("wraps non-error rejections", async () => {
+    const { addIndicatorToHost } = await import("../bindings/shared");
+    vi.mocked(addIndicatorToHost).mockRejectedValueOnce("plain failure");
+    const api = useIndicator(() => buildMockChart(), "macd");
+    await api.run();
+    expect(get(api.error)?.message).toBe("plain failure");
+  });
+});

package/dist/svelte/useIndicator.ts

@@ -0,0 +1,43 @@
+import { writable } from "svelte/store";
+import type { AddIndicatorOptions, AddIndicatorResult } from "../core/indicator/addIndicator";
+import type { IndicatorPresetName } from "../core/indicator/indicatorPresets";
+import { addIndicatorToHost, isStackedChart, removeIndicatorFromChart, type IndicatorHost } from "../bindings/shared";
+import type { Chart } from "../core/chart/types";
+
+export function useIndicator(
+  getHost: () => IndicatorHost,
+  preset: IndicatorPresetName,
+  options: AddIndicatorOptions = {},
+) {
+  const result = writable<(AddIndicatorResult & { paneId?: string }) | null>(null);
+  const isLoading = writable(false);
+  const error = writable<Error | null>(null);
+
+  const run = async () => {
+    const host = getHost();
+    if (!host) return;
+    isLoading.set(true);
+    try {
+      const res = await addIndicatorToHost(host, preset, options);
+      result.set(res);
+      isLoading.set(false);
+    } catch (e) {
+      error.set(e instanceof Error ? e : new Error(String(e)));
+      isLoading.set(false);
+    }
+  };
+
+  const cleanupIndicator = () => {
+    const host = getHost();
+    let currentId: string | null = null;
+    const unsub = result.subscribe((r) => {
+      currentId = r?.id ?? null;
+    });
+    unsub();
+    if (currentId && host && !isStackedChart(host)) {
+      removeIndicatorFromChart(host as Chart, currentId);
+    }
+  };
+
+  return { result, isLoading, error, run, cleanup: cleanupIndicator };
+}

package/dist/svelte/useStackedPlot.d.ts

@@ -0,0 +1,16 @@
+import { StackedChart, StackedChartOptions } from '../core/stacked';
+import { Range } from '../types';
+
+export declare function createStackedPlot(options: Omit<StackedChartOptions, "container">): {
+    stack: import('svelte/store').Writable<StackedChart | null>;
+    isReady: import('svelte/store').Writable<boolean>;
+    mount: (container: HTMLDivElement) => void;
+    unmount: () => void;
+    sync: (next: Omit<StackedChartOptions, "container">) => void;
+    fitAll: (opts?: {
+        x?: Range;
+        padding?: number;
+    }) => void | undefined;
+    resetAll: () => void | undefined;
+};
+export { createStackedPlot as useStackedPlot };

package/dist/svelte/useStackedPlot.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi } from "vitest";
+import { get } from "svelte/store";
+import { createStackedPlot } from "./useStackedPlot";
+
+const mockStack = {
+  destroy: vi.fn(),
+  whenReady: () => Promise.resolve(),
+  container: document.createElement("div"),
+  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: vi.fn(() => new Map()),
+    syncStackedOptions: vi.fn(),
+  };
+});
+
+describe("createStackedPlot svelte", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    paneKey = "a";
+  });
+
+  it("mounts stacked chart", () => {
+    const el = document.createElement("div");
+    const api = createStackedPlot({ panes: [{ id: "p", height: 1, series: [] }] });
+    api.mount(el);
+    expect(get(api.stack)).toBe(mockStack);
+    api.fitAll();
+    api.resetAll();
+    api.unmount();
+    expect(mockStack.destroy).toHaveBeenCalled();
+  });
+
+  it("syncs options when structure is unchanged", async () => {
+    const { syncStackedOptions } = await import("../bindings/shared");
+    paneKey = "same";
+    const el = document.createElement("div");
+    const api = createStackedPlot({ panes: [{ id: "p", height: 1, series: [] }], theme: "dark" });
+    api.mount(el);
+    await mockStack.whenReady();
+    api.sync({ panes: [{ id: "p", height: 1, series: [] }], theme: "light" });
+    expect(syncStackedOptions).toHaveBeenCalled();
+    api.unmount();
+  });
+
+  it("skips sync when stack is not ready", async () => {
+    const { syncStackedOptions } = await import("../bindings/shared");
+    paneKey = "same";
+    const api = createStackedPlot({ panes: [{ id: "p", height: 1, series: [] }] });
+    api.sync({ panes: [{ id: "p", height: 1, series: [] }], theme: "dark" });
+    expect(syncStackedOptions).not.toHaveBeenCalled();
+  });
+
+  it("remounts when pane structure changes", async () => {
+    paneKey = "a";
+    const el = document.createElement("div");
+    const api = createStackedPlot({ panes: [{ id: "p", height: 1, series: [] }] });
+    api.mount(el);
+    await mockStack.whenReady();
+    paneKey = "b";
+    api.sync({ panes: [{ id: "q", height: 1, series: [] }] });
+    expect(mockStack.destroy).toHaveBeenCalled();
+  });
+});

package/dist/svelte/useStackedPlot.ts

@@ -0,0 +1,54 @@
+import { writable, get } from "svelte/store";
+import { createStackedChart } from "../core/stacked";
+import type { StackedChart, StackedChartOptions } from "../core/stacked";
+import type { Range } from "../types";
+import { stackedStructureKey, syncStackedOptions, syncStackedPaneSeries } from "../bindings/shared";
+import type { VeloPlotSeries } from "../bindings/shared";
+
+export function createStackedPlot(options: Omit<StackedChartOptions, "container">) {
+  const stack = writable<StackedChart | null>(null);
+  const isReady = writable(false);
+  let destroy: (() => void) | null = null;
+  let structureKey = stackedStructureKey(options.panes);
+  let paneSeries = new Map<string, Map<string, VeloPlotSeries>>();
+
+  const mount = (container: HTMLDivElement) => {
+    destroy?.();
+    const created = createStackedChart({ ...options, container });
+    stack.set(created);
+    destroy = () => created.destroy();
+    structureKey = stackedStructureKey(options.panes);
+    paneSeries = syncStackedPaneSeries(created, options.panes, new Map());
+    created.whenReady().then(() => isReady.set(true));
+  };
+
+  const sync = (next: Omit<StackedChartOptions, "container">) => {
+    const s = get(stack);
+    if (!s || !get(isReady)) return;
+    const nextKey = stackedStructureKey(next.panes);
+    if (nextKey !== structureKey) {
+      mount(s.container);
+      return;
+    }
+    syncStackedOptions(s, next);
+    paneSeries = syncStackedPaneSeries(s, next.panes, paneSeries);
+  };
+
+  const unmount = () => {
+    destroy?.();
+    stack.set(null);
+    isReady.set(false);
+  };
+
+  return {
+    stack,
+    isReady,
+    mount,
+    unmount,
+    sync,
+    fitAll: (opts?: { x?: Range; padding?: number }) => get(stack)?.fitAll(opts),
+    resetAll: () => get(stack)?.resetAll(),
+  };
+}
+
+export { createStackedPlot as useStackedPlot };