layerchart 2.0.0-next.6 → 2.0.0-next.61

package/dist/contexts/geo.js

@@ -0,0 +1,11 @@
+import { Context } from 'runed';
+/**
+ * Access or set the current GeoContext.
+ */
+const _GeoContext = new Context('GeoContext');
+export function getGeoContext() {
+    return _GeoContext.getOr({ projection: undefined });
+}
+export function setGeoContext(geo) {
+    return _GeoContext.set(geo);
+}

package/dist/contexts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './chart.js';
+export * from './geo.js';
+export * from './layer.js';
+export * from './legendPayload.js';
+export * from './settings.js';

package/dist/contexts/index.js

@@ -0,0 +1,5 @@
+export * from './chart.js';
+export * from './geo.js';
+export * from './layer.js';
+export * from './legendPayload.js';
+export * from './settings.js';

package/dist/contexts/layer.d.ts

@@ -0,0 +1,3 @@
+export type LayerContext = 'svg' | 'canvas' | 'html';
+export declare function getLayerContext(): LayerContext;
+export declare function setLayerContext(context: LayerContext): LayerContext;

package/dist/contexts/layer.js

@@ -0,0 +1,8 @@
+import { Context } from 'runed';
+const _LayerContext = new Context('LayerContext');
+export function getLayerContext() {
+    return _LayerContext.get();
+}
+export function setLayerContext(context) {
+    return _LayerContext.set(context);
+}

package/dist/contexts/settings.d.ts

@@ -0,0 +1,4 @@
+import { Settings, type SettingsOptions } from '../states/settings.svelte.js';
+/** Get the current settings context, or default if not set */
+export declare function getSettings(): Settings;
+export declare function setSettings(settings: SettingsOptions): Settings;

package/dist/contexts/settings.js

@@ -0,0 +1,10 @@
+import { Context } from 'runed';
+import { Settings, defaultSettings } from '../states/settings.svelte.js';
+const _SettingsContext = new Context('Settings');
+/** Get the current settings context, or default if not set */
+export function getSettings() {
+    return _SettingsContext.getOr(defaultSettings);
+}
+export function setSettings(settings) {
+    return _SettingsContext.set(new Settings(settings));
+}

package/dist/contexts/transform.d.ts

@@ -0,0 +1,96 @@
+import { type TransformMode, type TransformScrollMode } from '../states/transform.svelte.js';
+import type { MotionProp } from '../utils/motion.svelte.js';
+export type TransformContextValue = {
+    /**
+     * The current transform mode.
+     *
+     * - `canvas`: The transform is applied to the canvas element.
+     * - `domain`: The transform narrows/shifts the visible data domain.
+     * - `projection`: The transform updates the geo projection.
+     * - `none`: No transform is applied.
+     */
+    mode: TransformMode;
+    /**
+     * The current scale of the transform.
+     */
+    scale: number;
+    /**
+     * Set the scale of the transform
+     * @param value - the scale value to set
+     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
+     */
+    setScale(value: number, options?: MotionProp): void;
+    /**
+     * The current translate of the transform.
+     */
+    translate: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Set the translate of the transform
+     * @param point - the point to translate to
+     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
+     */
+    setTranslate(point: {
+        x: number;
+        y: number;
+    }, options?: MotionProp): void;
+    /**
+     * Whether the transform is currently being moved
+     */
+    moving: boolean;
+    /**
+     * Whether the transform is currently being dragged
+     */
+    dragging: boolean;
+    /**
+     * The scroll mode of the transform.
+     *
+     * - `scale`: Scrolling will zoom in/out the canvas.
+     * - `translate`: Scrolling will pan the canvas.
+     * - `none`: No scroll mode is applied.
+     */
+    scrollMode: TransformScrollMode;
+    /**
+     * Set the scroll mode of the transform
+     *
+     * @param mode - the scroll mode to set
+     */
+    setScrollMode(mode: TransformScrollMode): void;
+    /**
+     * Reset the transform to its initial state
+     */
+    reset(): void;
+    /**
+     * Zoom in the transform
+     */
+    zoomIn(): void;
+    /**
+     * Zoom out the transform
+     *
+     */
+    zoomOut(): void;
+    /**
+     * Translate the transform to the center of the canvas
+     */
+    translateCenter(): void;
+    /**
+     * Zoom to a specific point in the canvas
+     *
+     * @param center - The point (in chart coordinates) that should become the new
+     * center of the view after zooming.
+     *
+     * @param rect - A rectangular region (in chart coordinates) that the view should scale to fit.
+     * If omitted, the scale defaults to 1 (no zoom).
+     */
+    zoomTo(center: {
+        x: number;
+        y: number;
+    }, rect?: {
+        width: number;
+        height: number;
+    }): void;
+};
+export declare function getTransformContext(): import("../states/transform.svelte.js").TransformState | TransformContextValue;
+export declare function setTransformContext(transform: TransformContextValue): TransformContextValue;

package/dist/contexts/transform.js

@@ -0,0 +1,10 @@
+import { Context } from 'runed';
+import {} from '../components/TransformContext.svelte';
+import { createDefaultTransformState, } from '../states/transform.svelte.js';
+const _TransformContext = new Context('TransformContext');
+export function getTransformContext() {
+    return _TransformContext.getOr(createDefaultTransformState());
+}
+export function setTransformContext(transform) {
+    return _TransformContext.set(transform);
+}

package/dist/force.d.ts

@@ -0,0 +1 @@
+export * from './components/force/index.js';

package/dist/force.js

@@ -0,0 +1 @@
+export * from './components/force/index.js';

package/dist/geo.d.ts

@@ -0,0 +1 @@
+export * from './components/geo/index.js';

package/dist/geo.js

@@ -0,0 +1 @@
+export * from './components/geo/index.js';

package/dist/graph.d.ts

@@ -0,0 +1 @@
+export * from './components/graph/index.js';

package/dist/graph.js

@@ -0,0 +1 @@
+export * from './components/graph/index.js';

package/dist/hierarchy.d.ts

@@ -0,0 +1 @@
+export * from './components/hierarchy/index.js';

package/dist/hierarchy.js

@@ -0,0 +1 @@
+export * from './components/hierarchy/index.js';

package/dist/html.d.ts

@@ -0,0 +1,116 @@
+/**
+ * HTML-only variants of layer-agnostic components.
+ *
+ * Each export here is an HTML-specific implementation. Use these when you
+ * know your chart only renders to the HTML layer and want a smaller bundle.
+ *
+ * The agnostic versions (e.g. `import { Circle } from './index.js'`) still
+ * work and dispatch to these per-layer variants under the hood.
+ */
+export { default as Html, default as Layer } from './components/layers/Html.svelte';
+export type { HTMLProps } from './components/layers/Html.svelte';
+export { default as Chart } from './components/Chart/Chart.html.svelte';
+export { default as ChartCore } from './components/Chart/ChartCore.svelte';
+export type { ChartProps, ChartPropsWithoutHTML, ChartResizeDetail, PreservedChartConfig, LayerChartInternalMeta, } from './components/Chart/Chart.shared.svelte.js';
+export { default as ChartChildren } from './components/ChartChildren/ChartChildren.html.svelte';
+export type { ChartChildrenProps } from './components/ChartChildren/ChartChildren.shared.svelte.js';
+export { default as Circle } from './components/Circle/Circle.html.svelte';
+export type { CircleProps, CirclePropsWithoutHTML } from './components/Circle/Circle.shared.svelte.js';
+export { default as Text } from './components/Text/Text.html.svelte';
+export type { TextProps, TextPropsWithoutHTML, TextSegment, } from './components/Text/Text.shared.svelte.js';
+export { default as Rect } from './components/Rect/Rect.html.svelte';
+export type { RectProps, RectPropsWithoutHTML, } from './components/Rect/Rect.shared.svelte.js';
+export { default as Line } from './components/Line/Line.html.svelte';
+export type { LineProps, LinePropsWithoutHTML, } from './components/Line/Line.shared.svelte.js';
+export { default as ClipPath } from './components/ClipPath/ClipPath.html.svelte';
+export type { ClipPathProps, ClipPathPropsWithoutHTML, } from './components/ClipPath/ClipPath.shared.svelte.js';
+export { default as LinearGradient } from './components/LinearGradient/LinearGradient.html.svelte';
+export type { LinearGradientProps, LinearGradientPropsWithoutHTML, } from './components/LinearGradient/LinearGradient.shared.svelte.js';
+export { default as Group } from './components/Group/Group.html.svelte';
+export type { GroupProps, GroupPropsWithoutHTML, } from './components/Group/Group.shared.svelte.js';
+export { default as Pattern } from './components/Pattern/Pattern.html.svelte';
+export type { PatternProps, PatternPropsWithoutHTML, } from './components/Pattern/Pattern.shared.svelte.js';
+export { default as Ellipse } from './components/Ellipse/Ellipse.html.svelte';
+export type { EllipseProps, EllipsePropsWithoutHTML, } from './components/Ellipse/Ellipse.shared.svelte.js';
+export { default as Image } from './components/Image/Image.html.svelte';
+export type { ImageProps, ImagePropsWithoutHTML, } from './components/Image/Image.shared.svelte.js';
+export { default as Axis } from './components/Axis/Axis.html.svelte';
+export type { AxisProps, AxisPropsWithoutHTML, } from './components/Axis/Axis.shared.svelte.js';
+export { default as Rule } from './components/Rule/Rule.html.svelte';
+export type { RuleProps, RulePropsWithoutHTML, } from './components/Rule/Rule.shared.svelte.js';
+export { default as Grid } from './components/Grid/Grid.html.svelte';
+export type { GridProps, GridPropsWithoutHTML, } from './components/Grid/Grid.shared.svelte.js';
+export { default as Highlight } from './components/Highlight/Highlight.html.svelte';
+export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData, } from './components/Highlight/Highlight.shared.svelte.js';
+export { default as RectClipPath } from './components/RectClipPath/RectClipPath.html.svelte';
+export type { RectClipPathProps, RectClipPathPropsWithoutHTML, } from './components/RectClipPath/RectClipPath.shared.svelte.js';
+export { default as ChartClipPath } from './components/ChartClipPath/ChartClipPath.html.svelte';
+export type { ChartClipPathProps, ChartClipPathPropsWithoutHTML, } from './components/ChartClipPath/ChartClipPath.shared.svelte.js';
+export { default as Points } from './components/Points/Points.html.svelte';
+export type { PointsProps, PointsPropsWithoutHTML, Point as PointDatum, } from './components/Points/Points.shared.svelte.js';
+export { default as Labels } from './components/Labels/Labels.html.svelte';
+export type { LabelsProps, LabelsPropsWithoutHTML, } from './components/Labels/Labels.shared.svelte.js';
+export { default as Frame } from './components/Frame/Frame.html.svelte';
+export type { FrameProps, FramePropsWithoutHTML, } from './components/Frame/Frame.shared.svelte.js';
+export { default as Cell } from './components/Cell/Cell.html.svelte';
+export type { CellProps } from './components/Cell/Cell.shared.svelte.js';
+export { default as CircleClipPath } from './components/CircleClipPath/CircleClipPath.html.svelte';
+export type { CircleClipPathPropsWithoutHTML } from './components/CircleClipPath/CircleClipPath.shared.svelte.js';
+export { default as Raster } from './components/Raster/Raster.html.svelte';
+export type { RasterProps, RasterPropsWithoutHTML, } from './components/Raster/Raster.shared.svelte.js';
+export { default as Bar } from './components/Bar/Bar.html.svelte';
+export type { BarProps, BarPropsWithoutHTML } from './components/Bar/Bar.shared.svelte.js';
+export { default as Bars } from './components/Bars/Bars.html.svelte';
+export type { BarsProps, BarsPropsWithoutHTML } from './components/Bars/Bars.shared.svelte.js';
+export { default as AnnotationLine } from './components/AnnotationLine/AnnotationLine.html.svelte';
+export type { AnnotationLineProps, AnnotationLinePropsWithoutHTML, } from './components/AnnotationLine/AnnotationLine.shared.svelte.js';
+export { default as AnnotationPoint } from './components/AnnotationPoint/AnnotationPoint.html.svelte';
+export type { AnnotationPointProps, AnnotationPointPropsWithoutHTML, } from './components/AnnotationPoint/AnnotationPoint.shared.svelte.js';
+export { default as AnnotationRange } from './components/AnnotationRange/AnnotationRange.html.svelte';
+export type { AnnotationRangeProps, AnnotationRangePropsWithoutHTML, } from './components/AnnotationRange/AnnotationRange.shared.svelte.js';
+export { default as Calendar } from './components/Calendar/Calendar.html.svelte';
+export type { CalendarProps, CalendarPropsWithoutHTML, CalendarCell, } from './components/Calendar/Calendar.shared.svelte.js';
+export { default as Month } from './components/Month/Month.html.svelte';
+export type { MonthProps, MonthPropsWithoutHTML, MonthCell, } from './components/Month/Month.shared.svelte.js';
+export { default as Blur } from './components/Blur.svelte';
+export * from './components/Blur.svelte';
+export { default as Bounds } from './components/Bounds.svelte';
+export * from './components/Bounds.svelte';
+export { default as BrushContext } from './components/BrushContext.svelte';
+export * from './components/BrushContext.svelte';
+export { default as CircleLegend } from './components/CircleLegend.svelte';
+export * from './components/CircleLegend.svelte';
+export { default as ColorRamp } from './components/ColorRamp.svelte';
+export * from './components/ColorRamp.svelte';
+export { default as Legend } from './components/Legend.svelte';
+export * from './components/Legend.svelte';
+export { default as MotionPath } from './components/MotionPath.svelte';
+export * from './components/MotionPath.svelte';
+export { default as Point } from './components/Point.svelte';
+export * from './components/Point.svelte';
+export { default as TransformContext } from './components/TransformContext.svelte';
+export * from './components/TransformContext.svelte';
+export * as Tooltip from './components/tooltip/index.js';
+export * from './components/tooltip/TooltipContext.svelte';
+export { default as LineChart } from './components/charts/LineChart/LineChart.svelte';
+export { default as AreaChart } from './components/charts/AreaChart/AreaChart.svelte';
+export { default as BarChart } from './components/charts/BarChart/BarChart.svelte';
+export { default as PieChart } from './components/charts/PieChart/PieChart.svelte';
+export { default as ScatterChart } from './components/charts/ScatterChart/ScatterChart.svelte';
+export { default as ArcChart } from './components/charts/ArcChart/ArcChart.svelte';
+export { default as Tree } from './components/hierarchy/Tree.svelte';
+export * from './components/hierarchy/Tree.svelte';
+export { default as Treemap } from './components/hierarchy/Treemap.svelte';
+export * from './components/hierarchy/Treemap.svelte';
+export { default as Pack } from './components/hierarchy/Pack.svelte';
+export * from './components/hierarchy/Pack.svelte';
+export { default as Partition } from './components/hierarchy/Partition.svelte';
+export * from './components/hierarchy/Partition.svelte';
+export { default as Chord } from './components/graph/Chord.svelte';
+export * from './components/graph/Chord.svelte';
+export { default as Dagre } from './components/graph/Dagre.svelte';
+export * from './components/graph/Dagre.svelte';
+export { default as Sankey } from './components/graph/Sankey.svelte';
+export * from './components/graph/Sankey.svelte';
+export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
+export * from './components/force/ForceSimulation.svelte';

package/dist/html.js

@@ -0,0 +1,93 @@
+/**
+ * HTML-only variants of layer-agnostic components.
+ *
+ * Each export here is an HTML-specific implementation. Use these when you
+ * know your chart only renders to the HTML layer and want a smaller bundle.
+ *
+ * The agnostic versions (e.g. `import { Circle } from './index.js'`) still
+ * work and dispatch to these per-layer variants under the hood.
+ */
+// `Layer` is an alias for the layer wrapper of this sub-path. Importing
+// `Layer` from `layerchart/html` is equivalent to importing `Html`.
+export { default as Html, default as Layer } from './components/layers/Html.svelte';
+export { default as Chart } from './components/Chart/Chart.html.svelte';
+export { default as ChartCore } from './components/Chart/ChartCore.svelte';
+export { default as ChartChildren } from './components/ChartChildren/ChartChildren.html.svelte';
+export { default as Circle } from './components/Circle/Circle.html.svelte';
+export { default as Text } from './components/Text/Text.html.svelte';
+export { default as Rect } from './components/Rect/Rect.html.svelte';
+export { default as Line } from './components/Line/Line.html.svelte';
+export { default as ClipPath } from './components/ClipPath/ClipPath.html.svelte';
+export { default as LinearGradient } from './components/LinearGradient/LinearGradient.html.svelte';
+export { default as Group } from './components/Group/Group.html.svelte';
+export { default as Pattern } from './components/Pattern/Pattern.html.svelte';
+export { default as Ellipse } from './components/Ellipse/Ellipse.html.svelte';
+export { default as Image } from './components/Image/Image.html.svelte';
+export { default as Axis } from './components/Axis/Axis.html.svelte';
+export { default as Rule } from './components/Rule/Rule.html.svelte';
+export { default as Grid } from './components/Grid/Grid.html.svelte';
+export { default as Highlight } from './components/Highlight/Highlight.html.svelte';
+export { default as RectClipPath } from './components/RectClipPath/RectClipPath.html.svelte';
+export { default as ChartClipPath } from './components/ChartClipPath/ChartClipPath.html.svelte';
+export { default as Points } from './components/Points/Points.html.svelte';
+export { default as Labels } from './components/Labels/Labels.html.svelte';
+export { default as Frame } from './components/Frame/Frame.html.svelte';
+export { default as Cell } from './components/Cell/Cell.html.svelte';
+export { default as CircleClipPath } from './components/CircleClipPath/CircleClipPath.html.svelte';
+export { default as Raster } from './components/Raster/Raster.html.svelte';
+export { default as Bar } from './components/Bar/Bar.html.svelte';
+export { default as Bars } from './components/Bars/Bars.html.svelte';
+export { default as AnnotationLine } from './components/AnnotationLine/AnnotationLine.html.svelte';
+export { default as AnnotationPoint } from './components/AnnotationPoint/AnnotationPoint.html.svelte';
+export { default as AnnotationRange } from './components/AnnotationRange/AnnotationRange.html.svelte';
+export { default as Calendar } from './components/Calendar/Calendar.html.svelte';
+export { default as Month } from './components/Month/Month.html.svelte';
+// --- Layer-agnostic re-exports ---
+// These components don't render layer-specific elements (pure logic, layout
+// helpers, context providers, or composite chart wrappers). Re-exported here
+// so the per-layer sub-path has a complete API.
+// Helpers / context providers
+export { default as Blur } from './components/Blur.svelte';
+export * from './components/Blur.svelte';
+export { default as Bounds } from './components/Bounds.svelte';
+export * from './components/Bounds.svelte';
+export { default as BrushContext } from './components/BrushContext.svelte';
+export * from './components/BrushContext.svelte';
+export { default as CircleLegend } from './components/CircleLegend.svelte';
+export * from './components/CircleLegend.svelte';
+export { default as ColorRamp } from './components/ColorRamp.svelte';
+export * from './components/ColorRamp.svelte';
+export { default as Legend } from './components/Legend.svelte';
+export * from './components/Legend.svelte';
+export { default as MotionPath } from './components/MotionPath.svelte';
+export * from './components/MotionPath.svelte';
+export { default as Point } from './components/Point.svelte';
+export * from './components/Point.svelte';
+export { default as TransformContext } from './components/TransformContext.svelte';
+export * from './components/TransformContext.svelte';
+export * as Tooltip from './components/tooltip/index.js';
+export * from './components/tooltip/TooltipContext.svelte';
+// High-level chart wrappers
+export { default as LineChart } from './components/charts/LineChart/LineChart.svelte';
+export { default as AreaChart } from './components/charts/AreaChart/AreaChart.svelte';
+export { default as BarChart } from './components/charts/BarChart/BarChart.svelte';
+export { default as PieChart } from './components/charts/PieChart/PieChart.svelte';
+export { default as ScatterChart } from './components/charts/ScatterChart/ScatterChart.svelte';
+export { default as ArcChart } from './components/charts/ArcChart/ArcChart.svelte';
+// Layout components
+export { default as Tree } from './components/hierarchy/Tree.svelte';
+export * from './components/hierarchy/Tree.svelte';
+export { default as Treemap } from './components/hierarchy/Treemap.svelte';
+export * from './components/hierarchy/Treemap.svelte';
+export { default as Pack } from './components/hierarchy/Pack.svelte';
+export * from './components/hierarchy/Pack.svelte';
+export { default as Partition } from './components/hierarchy/Partition.svelte';
+export * from './components/hierarchy/Partition.svelte';
+export { default as Chord } from './components/graph/Chord.svelte';
+export * from './components/graph/Chord.svelte';
+export { default as Dagre } from './components/graph/Dagre.svelte';
+export * from './components/graph/Dagre.svelte';
+export { default as Sankey } from './components/graph/Sankey.svelte';
+export * from './components/graph/Sankey.svelte';
+export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
+export * from './components/force/ForceSimulation.svelte';

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './contexts/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './contexts/index.js';
 export * from './utils/index.js';

package/dist/server/ContextCapture.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { getChartContext } from '../contexts/chart.js';
+  import { getCanvasContext } from '../contexts/canvas.js';
+  import { setSSRCapture, type CaptureTarget } from './captureStore.js';
+
+  let {
+    capture,
+    onCapture,
+  }: {
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
+
+  const chartState = getChartContext();
+  const canvasCtx = getCanvasContext();
+
+  const captured = {
+    chartState,
+    rootNode: canvasCtx.getRootNode?.(),
+  };
+
+  if (typeof window === 'undefined') {
+    if (capture) {
+      Object.assign(capture, captured);
+    }
+
+    setSSRCapture(captured);
+    onCapture?.(captured);
+  }
+</script>

package/dist/server/ContextCapture.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const ContextCapture: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextCapture = ReturnType<typeof ContextCapture>;
+export default ContextCapture;

package/dist/server/ServerChart.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Chart from '../components/Chart/Chart.svelte';
+  import type { ChartProps } from '../components/Chart/Chart.svelte';
+  import Canvas from '../components/layers/Canvas.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+
+  let {
+    children,
+    capture,
+    onCapture,
+    ...chartProps
+  }: {
+    children?: Snippet;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } & Omit<ChartProps<any>, 'children'> = $props();
+</script>
+
+<Chart ssr={true} {...chartProps}>
+  <Canvas ssrCapture={capture} ssrCaptureCallback={onCapture}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </Canvas>
+</Chart>

package/dist/server/ServerChart.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ChartProps } from '../components/Chart/Chart.svelte';
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    children?: Snippet;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+} & Omit<ChartProps<any>, 'children'>;
+declare const ServerChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type ServerChart = ReturnType<typeof ServerChart>;
+export default ServerChart;

package/dist/server/TestBarChart.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { scaleBand } from 'd3-scale';
+  import ServerChart from './ServerChart.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+  import Bars from '../components/Bars/Bars.svelte';
+
+  let {
+    data,
+    width,
+    height,
+    capture,
+    onCapture,
+  }: {
+    data: { category: string; value: number }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
+</script>
+
+<ServerChart
+  {capture}
+  {onCapture}
+  {width}
+  {height}
+  {data}
+  x="category"
+  xScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
+  y="value"
+  yDomain={[0, null]}
+  padding={{ top: 20, right: 20, bottom: 30, left: 40 }}
+>
+  <Bars fill="rgb(59, 130, 246)" radius={4} />
+</ServerChart>

package/dist/server/TestBarChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    data: {
+        category: string;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const TestBarChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type TestBarChart = ReturnType<typeof TestBarChart>;
+export default TestBarChart;

package/dist/server/TestLineChart.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import ServerChart from './ServerChart.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+  import Area from '../components/Area/Area.svelte';
+  import Spline from '../components/Spline/Spline.svelte';
+
+  let {
+    data,
+    width,
+    height,
+    capture,
+    onCapture,
+  }: {
+    data: { date: number; value: number }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
+</script>
+
+<ServerChart
+  {capture}
+  {onCapture}
+  {width}
+  {height}
+  {data}
+  x="date"
+  y="value"
+  yDomain={[0, null]}
+  padding={{ top: 20, right: 20, bottom: 20, left: 20 }}
+>
+  <Area fill="rgba(59, 130, 246, 0.15)" stroke="none" />
+  <Spline stroke="rgb(59, 130, 246)" strokeWidth={2} />
+</ServerChart>

package/dist/server/TestLineChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    data: {
+        date: number;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const TestLineChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type TestLineChart = ReturnType<typeof TestLineChart>;
+export default TestLineChart;

package/dist/server/captureStore.d.ts

@@ -0,0 +1,8 @@
+import type { ChartState, ComponentNode } from '../states/chart.svelte.js';
+export type CaptureTarget = {
+    chartState?: ChartState;
+    rootNode?: ComponentNode;
+};
+export type SSRCapture = CaptureTarget | null;
+export declare function setSSRCapture(target: SSRCapture): void;
+export declare function getSSRCapture(): SSRCapture;

package/dist/server/captureStore.js

@@ -0,0 +1,18 @@
+const SSR_CAPTURE_KEY = Symbol.for('layerchart.ssr-capture');
+let _capture = null;
+function getGlobalCaptureStore() {
+    return globalThis;
+}
+export function setSSRCapture(target) {
+    _capture = target;
+    const globalStore = getGlobalCaptureStore();
+    if (target == null) {
+        delete globalStore[SSR_CAPTURE_KEY];
+    }
+    else {
+        globalStore[SSR_CAPTURE_KEY] = target;
+    }
+}
+export function getSSRCapture() {
+    return getGlobalCaptureStore()[SSR_CAPTURE_KEY] ?? _capture;
+}