layerchart 2.0.0-next.50 → 2.0.0-next.51

package/dist/components/Text.svelte

@@ -238,7 +238,12 @@
   import { createDataMotionMap } from '../utils/motion.svelte.js';
   import { getStringWidth, truncateText, type TruncateTextOptions } from '../utils/string.js';
   import { getComputedStyles, renderText, type ComputedStylesOptions } from '../utils/canvas.js';
-  import { resolveDataProp, resolveColorProp, resolveGeoDataPair, resolveStyleProp } from '../utils/dataProp.js';
+  import {
+    resolveDataProp,
+    resolveColorProp,
+    resolveGeoDataPair,
+    resolveStyleProp,
+  } from '../utils/dataProp.js';
   import { getGeoContext } from '../contexts/geo.js';
   import { get } from '@layerstack/utils';
   import { chartDataArray } from '../utils/common.js';
@@ -294,9 +299,7 @@
   const geo = getGeoContext();
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve position for a data item
   function resolveTextPosition(d: any) {
@@ -401,7 +404,11 @@
   const motionValue = createMotion(
     typeof value === 'number' ? value : 0,
     () => (typeof value === 'number' ? value : 0),
-    typeof value === 'number' && motion ? (typeof motion === 'object' && 'type' in motion ? motion : undefined) : undefined
+    typeof value === 'number' && motion
+      ? typeof motion === 'object' && 'type' in motion
+        ? motion
+        : undefined
+      : undefined
   );
 
   // Handle null and convert `\n` strings back to newline characters
@@ -549,6 +556,13 @@
     motion
   );
 
+  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
+  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
+  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
+  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
+  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
+  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+
   function render(
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
@@ -562,20 +576,33 @@
       itemClass?: string | undefined
     ) {
       return styleOverrides
-        ? merge({ styles: { strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined) } }, styleOverrides)
+        ? merge(
+            {
+              styles: {
+                strokeWidth:
+                  itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+              },
+            },
+            styleOverrides
+          )
         : {
             styles: {
               fill: itemFill ?? fill,
-              fillOpacity: itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+              fillOpacity:
+                itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
               stroke: itemStroke ?? stroke,
-              strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+              strokeWidth:
+                itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
               opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
               paintOrder: 'stroke',
               // Only include textAnchor in constantStyles when explicitly non-default,
               // so that CSS class-based text-anchor (e.g. [text-anchor:middle]) can take effect
               ...(textAnchor !== 'start' ? { textAnchor } : {}),
             },
-            classes: cls('lc-text', itemClass ?? (typeof className === 'string' ? className : undefined)),
+            classes: cls(
+              'lc-text',
+              itemClass ?? (typeof className === 'string' ? className : undefined)
+            ),
             style: restProps.style as string | undefined,
           };
     }
@@ -584,8 +611,7 @@
       const baseStyles = getTextStyles();
       const computedStyles = getComputedStyles(ctx.canvas, baseStyles);
       ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
-      const textAlign =
-        textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
+      const textAlign = textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
       ctx.textAlign = textAlign;
 
       for (const item of resolvedItems) {
@@ -596,7 +622,14 @@
         const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
         const resolvedOpacity = resolveStyleProp(opacity, item.d);
         const resolvedClass = resolveStyleProp(className, item.d);
-        const itemStyles = getTextStyles(resolvedFill, resolvedStroke, resolvedFillOpacity, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        const itemStyles = getTextStyles(
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
         ctx.save();
         if (rotate !== undefined) {
           const radians = degreesToRadians(rotate);
@@ -634,8 +667,7 @@
 
       ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
 
-      const textAlign =
-        textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
+      const textAlign = textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
       ctx.textAlign = textAlign;
 
       for (let index = 0; index < wordsByLines.length; index++) {
@@ -668,26 +700,29 @@
         color: typeof fill === 'string' ? fill : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render,
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        value,
-        motionX.current,
-        motionY.current,
-        fillKey!.current,
-        strokeKey!.current,
-        strokeWidth,
-        opacity,
-        className,
-        truncateConfig,
-        rotate,
-        lineHeight,
-        textAnchor,
-        verticalAnchor,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              value,
+              motionX.current,
+              motionY.current,
+              fillKey!.current,
+              strokeKey!.current,
+              strokeWidth,
+              opacity,
+              className,
+              truncateConfig,
+              rotate,
+              lineHeight,
+              textAnchor,
+              verticalAnchor,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -717,11 +752,7 @@
           opacity={resolvedOpacity}
           class={['lc-text', resolvedClass]}
         >
-          <tspan
-            x={item.x}
-            dy={dataModeStartDy}
-            class="lc-text-tspan"
-          >
+          <tspan x={item.x} dy={dataModeStartDy} class="lc-text-tspan">
             {text}
           </tspan>
         </text>
@@ -741,13 +772,13 @@
           bind:this={ref}
           {dy}
           {...restProps}
-          fill={fill as string}
-          fill-opacity={fillOpacity as number}
-          stroke={stroke as string}
-          stroke-width={strokeWidth as number}
-          opacity={opacity as number}
+          fill={staticFill}
+          fill-opacity={staticFillOpacity}
+          stroke={staticStroke}
+          stroke-width={staticStrokeWidth}
+          opacity={staticOpacity}
           transform={transformProp}
-          class={['lc-text', className as string]}
+          class={['lc-text', staticClassName]}
         >
           <textPath
             style="text-anchor: {textAnchor};"
@@ -768,12 +799,12 @@
           text-anchor={textAnchor}
           dominant-baseline={dominantBaseline}
           {...restProps}
-          fill={fill as string}
-          fill-opacity={fillOpacity as number}
-          stroke={stroke as string}
-          stroke-width={strokeWidth as number}
-          opacity={opacity as number}
-          class={['lc-text', className as string]}
+          fill={staticFill}
+          fill-opacity={staticFillOpacity}
+          stroke={staticStroke}
+          stroke-width={staticStrokeWidth}
+          opacity={staticOpacity}
+          class={['lc-text', staticClassName]}
         >
           {#each wordsByLines as line, index}
             <tspan
@@ -831,7 +862,7 @@
       {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
       style:white-space="pre-wrap"
       style:line-height={lineHeight}
-      class={['lc-text', className as string]}
+      class={['lc-text', staticClassName]}
     >
       {textValue}
     </div>

package/dist/components/charts/PieChart.svelte

@@ -231,7 +231,7 @@
   // Reading context.series.allSeriesData here would create a derived_references_self cycle:
   //   SeriesState.#series → ChartState.props → data={visibleData} → chartData → context.series.allSeriesData → #series
   const chartData = $derived.by(() => {
-    const seriesData = series.flatMap((s) => s.data ?? []);
+    const seriesData = series.flatMap((s) => ('data' in s ? s.data : undefined) ?? []);
     return (seriesData.length > 0 ? seriesData : chartDataArray(data)) as Array<TData>;
   });
 
@@ -245,7 +245,7 @@
 
   // Compute series colors locally to avoid derived_references_self cycle through context.series.allSeriesColors
   const allSeriesColors = $derived(
-    series.map((s) => s.color).filter((c) => c != null) as string[]
+    series.map((s) => ('color' in s ? s.color : undefined)).filter((c) => c != null) as string[]
   );
 
   // Custom tickFormat for PieChart legends - uses data labels instead of series labels

package/dist/components/index.d.ts

@@ -68,6 +68,8 @@ export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
 export * from './GeoPoint.svelte';
+export { default as GeoRaster } from './GeoRaster.svelte';
+export * from './GeoRaster.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
 export * from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';

package/dist/components/index.js

@@ -68,6 +68,8 @@ export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
 export * from './GeoPoint.svelte';
+export { default as GeoRaster } from './GeoRaster.svelte';
+export * from './GeoRaster.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
 export * from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';

package/dist/components/layers/Canvas.svelte

@@ -1,5 +1,11 @@
 <script lang="ts" module>
   import type { ComponentNode } from '../../contexts/chart.js';
+  import type { ChartState } from '../../states/chart.svelte.js';
+
+  type SSRCaptureTarget = {
+    chartState?: ChartState<any, any, any>;
+    rootNode?: ComponentNode;
+  };
 
   export type CanvasPropsWithoutHTML = {
     /**
@@ -80,6 +86,12 @@
      */
     debug?: boolean;
 
+    /** @internal Server-side capture target used by layerchart/server. */
+    ssrCapture?: SSRCaptureTarget;
+
+    /** @internal Server-side capture callback used by layerchart/server. */
+    ssrCaptureCallback?: (data: SSRCaptureTarget) => void;
+
     children?: Snippet<
       [{ ref: HTMLCanvasElement; canvasContext: CanvasRenderingContext2D | undefined }]
     >;
@@ -87,7 +99,6 @@
 
   export type CanvasProps = CanvasPropsWithoutHTML &
     Without<HTMLCanvasAttributes, CanvasPropsWithoutHTML>;
-
 </script>
 
 <script lang="ts">
@@ -107,10 +118,13 @@
     type CanvasContextValue,
     type ComponentRender,
   } from '../../contexts/canvas.js';
+  import { renderTree } from '../../server/renderTree.js';
 
   let {
     ref: refProp = $bindable(),
     canvasContext: canvasContextProp = $bindable(),
+    ssrCapture,
+    ssrCaptureCallback,
     willReadFrequently = false,
     debug = false,
     zIndex = 0,
@@ -183,9 +197,10 @@
     // Bubble up to ancestor groups
     let ancestor = node?.parent;
     while (ancestor) {
-      const handler = ancestor.kind === 'group'
-        ? ancestor.canvasRender?.events?.[eventName] as ((e: Event) => void) | null | undefined
-        : undefined;
+      const handler =
+        ancestor.kind === 'group'
+          ? (ancestor.canvasRender?.events?.[eventName] as ((e: Event) => void) | null | undefined)
+          : undefined;
       handler?.(e);
       ancestor = ancestor.parent;
     }
@@ -225,21 +240,23 @@
    */
 
   // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
-  const { dark } = new MediaQueryPresets();
-  watch(
-    () => dark.current,
-    () => {
-      canvasContext.invalidate();
-    }
-  );
-  useMutationObserver(
-    () => document.documentElement,
-    () => canvasContext.invalidate(),
-    {
-      attributes: true,
-      attributeFilter: ['class', 'data-theme'],
-    }
-  );
+  if (typeof window !== 'undefined') {
+    const { dark } = new MediaQueryPresets();
+    watch(
+      () => dark.current,
+      () => {
+        canvasContext.invalidate();
+      }
+    );
+    useMutationObserver(
+      () => document.documentElement,
+      () => canvasContext.invalidate(),
+      {
+        attributes: true,
+        attributeFilter: ['class', 'data-theme'],
+      }
+    );
+  }
 
   onMount(() => {
     context = ref?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
@@ -310,33 +327,6 @@
     pendingInvalidation = false;
   }
 
-  /**
-   * Recursively render the component tree.
-   * Group nodes: save → render (translate/opacity) → recurse children → restore
-   * Leaf nodes: save → render → restore
-   */
-  function renderTree(canvasCtx: CanvasRenderingContext2D, node: ComponentNode) {
-    if (node.kind === 'group' && node.canvasRender) {
-      // Group: save state, apply transform, render children, restore
-      canvasCtx.save();
-      node.canvasRender.render(canvasCtx);
-      for (const child of node.children) {
-        renderTree(canvasCtx, child);
-      }
-      canvasCtx.restore();
-    } else if (node.canvasRender) {
-      // Leaf mark: save, render, restore
-      canvasCtx.save();
-      node.canvasRender.render(canvasCtx);
-      canvasCtx.restore();
-    } else {
-      // Non-rendering node (e.g. root, composite-mark): just recurse children
-      for (const child of node.children) {
-        renderTree(canvasCtx, child);
-      }
-    }
-  }
-
   function nodeHasEvents(node: ComponentNode) {
     return node.canvasRender?.events && Object.values(node.canvasRender.events).some((d) => d);
   }
@@ -345,7 +335,11 @@
    * Recursively render the hit canvas tree for pointer event detection.
    * Renders components that have event handlers (or whose ancestor group does), using unique colors.
    */
-  function renderHitTree(hitCtx: CanvasRenderingContext2D, node: ComponentNode, ancestorHasEvents = false) {
+  function renderHitTree(
+    hitCtx: CanvasRenderingContext2D,
+    node: ComponentNode,
+    ancestorHasEvents = false
+  ) {
     if (node.kind === 'group' && node.canvasRender) {
       const groupHasEvents = ancestorHasEvents || nodeHasEvents(node);
       // Group: apply transform, recurse children (scoped by save/restore)
@@ -383,11 +377,33 @@
 
     function invalidate() {
       if (pendingInvalidation) return;
+      if (typeof requestAnimationFrame === 'undefined') return;
       pendingInvalidation = true;
       frameId = requestAnimationFrame(update);
     }
 
-    return { register, invalidate };
+    function getRootNode() {
+      return rootNode;
+    }
+
+    return { register, invalidate, getRootNode };
+  }
+
+  function captureSSR() {
+    if (typeof window !== 'undefined') return '';
+    if (!ssrCapture && !ssrCaptureCallback) return '';
+
+    const captured: SSRCaptureTarget = {
+      chartState: ctx,
+      rootNode,
+    };
+
+    if (ssrCapture) {
+      Object.assign(ssrCapture, captured);
+    }
+
+    ssrCaptureCallback?.(captured);
+    return '';
   }
 
   const canvasContext = createCanvasContext();
@@ -457,6 +473,7 @@
 <canvas bind:this={hitCanvasElement} class="lc-hit-canvas" class:debug></canvas>
 
 {@render children?.({ ref, canvasContext: context })}
+{captureSSR()}
 
 <style>
   @layer base {

package/dist/components/layers/Canvas.svelte.d.ts

@@ -1,3 +1,9 @@
+import type { ComponentNode } from '../../contexts/chart.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+type SSRCaptureTarget = {
+    chartState?: ChartState<any, any, any>;
+    rootNode?: ComponentNode;
+};
 export type CanvasPropsWithoutHTML = {
     /**
      * The `<canvas>` tag. Useful for bindings.
@@ -67,6 +73,10 @@ export type CanvasPropsWithoutHTML = {
      * @default false
      */
     debug?: boolean;
+    /** @internal Server-side capture target used by layerchart/server. */
+    ssrCapture?: SSRCaptureTarget;
+    /** @internal Server-side capture callback used by layerchart/server. */
+    ssrCaptureCallback?: (data: SSRCaptureTarget) => void;
     children?: Snippet<[
         {
             ref: HTMLCanvasElement;

package/dist/contexts/canvas.d.ts

@@ -1,5 +1,6 @@
 import type { MouseEventHandler, PointerEventHandler, TouchEventHandler } from 'svelte/elements';
 import type { ComputedStylesOptions } from '../utils/canvas.js';
+import type { ComponentNode } from '../states/chart.svelte.js';
 export type ComponentRender<T extends Element = Element> = {
     render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
     events?: {
@@ -26,6 +27,8 @@ export type CanvasContextValue = {
      */
     register<T extends Element>(component: ComponentRender<T>): () => void;
     invalidate(): void;
+    /** Get the root ComponentNode of the canvas render tree. Used for server-side rendering. */
+    getRootNode?: () => ComponentNode;
 };
 export declare function getCanvasContext(): CanvasContextValue;
 export declare function setCanvasContext(context: CanvasContextValue): CanvasContextValue;

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.svelte';
+  import type { ChartProps } from '../components/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.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.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.svelte';
+	import Spline from '../components/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>