layerchart 2.0.0-next.50 → 2.0.0-next.52

package/dist/states/chart.svelte.test.js

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { flushSync } from 'svelte';
 import { scaleBand } from 'd3-scale';
+import { geoAlbersUsa } from 'd3-geo';
 import { timeDay } from 'd3-time';
 import { ChartState } from './chart.svelte.js';
 import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
@@ -527,6 +528,115 @@ describe('ChartState mark registration', () => {
         }
     });
 });
+describe('ChartState geo projection skips markInfo', () => {
+    const geoData = [
+        { name: 'New York', longitude: -74.006, latitude: 40.7128 },
+        { name: 'Los Angeles', longitude: -118.2437, latitude: 34.0522 },
+        { name: 'Chicago', longitude: -87.6298, latitude: 41.8781 },
+    ];
+    it('should not create implicit series from marks when geo projection is active', () => {
+        const { state, cleanup } = createChartState({
+            data: geoData,
+            x: 'longitude',
+            y: 'latitude',
+            geo: { projection: geoAlbersUsa },
+        });
+        try {
+            // Register a mark with its own data (like a tooltip highlight Circle)
+            state.registerMark({ data: [geoData[0]], x: 'longitude', y: 'latitude' });
+            flushSync();
+            // Should remain default series — mark should not create implicit "latitude" series
+            expect(state.seriesState.isDefaultSeries).toBe(true);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should not add mark data to flatData when geo projection is active', () => {
+        const { state, cleanup } = createChartState({
+            data: geoData,
+            x: 'longitude',
+            y: 'latitude',
+            geo: { projection: geoAlbersUsa },
+        });
+        try {
+            state.registerMark({ data: [geoData[0]], x: 'longitude', y: 'latitude' });
+            flushSync();
+            // flatData should only contain chart data, not the mark's extra data
+            expect(state.flatData).toHaveLength(3);
+            expect(state.flatData).toBe(geoData);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should not derive x/y accessors from marks when geo projection is active', () => {
+        // Chart with geo but no explicit x/y — marks should not fill in the accessors
+        const { state: stateWithGeo, cleanup: cleanupGeo } = createChartState({
+            data: geoData,
+            geo: { projection: geoAlbersUsa },
+        });
+        const { state: stateWithoutGeo, cleanup: cleanupNoGeo } = createChartState({
+            data: geoData,
+        });
+        try {
+            // Both start with null x accessor (no x prop set)
+            expect(stateWithGeo.x).toBeNull();
+            expect(stateWithoutGeo.x).toBeNull();
+            stateWithGeo.registerMark({ x: 'longitude', y: 'latitude' });
+            stateWithoutGeo.registerMark({ x: 'longitude', y: 'latitude' });
+            flushSync();
+            // Without geo: mark should derive x accessor
+            expect(stateWithoutGeo.x).not.toBeNull();
+            expect(stateWithoutGeo.x(geoData[0])).toBe(geoData[0].longitude);
+            // With geo: mark should NOT derive x accessor
+            expect(stateWithGeo.x).toBeNull();
+        }
+        finally {
+            cleanupGeo();
+            cleanupNoGeo();
+        }
+    });
+    it('should preserve seriesKey/color/label from marks in geo mode for legends', () => {
+        const { state, cleanup } = createChartState({
+            data: geoData,
+            x: 'longitude',
+            y: 'latitude',
+            geo: { projection: geoAlbersUsa },
+        });
+        try {
+            state.registerMark({ seriesKey: 'earthquakes', color: 'red', label: 'Earthquakes' });
+            state.registerMark({ seriesKey: 'volcanos', color: 'orange', label: 'Volcanos' });
+            flushSync();
+            // seriesKey/color/label should still create implicit series for legends
+            expect(state.seriesState.isDefaultSeries).toBe(false);
+            expect(state.seriesState.series).toHaveLength(2);
+            expect(state.seriesState.series[0]).toMatchObject({ key: 'earthquakes', color: 'red', label: 'Earthquakes' });
+            expect(state.seriesState.series[1]).toMatchObject({ key: 'volcanos', color: 'orange', label: 'Volcanos' });
+            // But flatData should not include extra mark data
+            expect(state.flatData).toHaveLength(3);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should still process marks normally without geo projection', () => {
+        const { state, cleanup } = createChartState({
+            data: geoData,
+            x: 'name',
+        });
+        try {
+            state.registerMark({ y: 'latitude', color: 'blue' });
+            flushSync();
+            // Without geo, marks should create implicit series as normal
+            expect(state.seriesState.isDefaultSeries).toBe(false);
+            expect(state.seriesState.series[0].key).toBe('latitude');
+        }
+        finally {
+            cleanup();
+        }
+    });
+});
 describe('ChartState implicit series domain update on visibility toggle', () => {
     it('should update y domain when hiding an implicit series', () => {
         const data = [

package/dist/states/geo.svelte.d.ts

@@ -30,6 +30,7 @@ export type GeoStateProps = {
 };
 export declare class GeoState {
     private _propsGetter;
+    private _dimensionsGetter?;
     props: GeoStateProps;
     chartWidth: number;
     chartHeight: number;
@@ -40,6 +41,9 @@ export declare class GeoState {
         translate: boolean;
     };
     projection: GeoProjection | undefined;
-    constructor(propsGetter: () => GeoStateProps);
+    constructor(propsGetter: () => GeoStateProps, dimensionsGetter?: () => {
+        width: number;
+        height: number;
+    });
     fitSizeRange: [number, number];
 }

package/dist/states/geo.svelte.js

@@ -1,88 +1,100 @@
 export class GeoState {
     // Props getter function - set in constructor
     _propsGetter;
+    _dimensionsGetter;
     // Props - accessed via getter function for fine-grained reactivity
     props = $derived(this._propsGetter());
-    // Context references
+    // Context references — used by GeoProjection.svelte (client-side only)
     chartWidth = $state(100);
     chartHeight = $state(100);
     transformState = $state(null);
     transformApply = $state({ rotation: false, scale: true, translate: true });
-    // The actual projection instance
-    projection = $state(undefined);
-    constructor(propsGetter) {
-        this._propsGetter = propsGetter;
-        // Main effect to build and configure the projection
-        $effect.pre(() => {
-            if (!this.props.projection)
-                return;
-            const _projection = this.props.projection();
-            // Apply fitSize if fitGeojson is provided
-            if (this.props.fitGeojson && 'fitSize' in _projection) {
-                _projection.fitSize(this.fitSizeRange, this.props.fitGeojson);
-            }
-            // Apply scale
-            if ('scale' in _projection) {
-                if (this.props.scale) {
-                    _projection.scale(this.props.scale);
-                }
-                if (this.transformState?.mode === 'projection' && this.transformApply.scale) {
-                    _projection.scale(this.transformState.scale);
-                }
+    // The actual projection instance — derived so it works during SSR
+    projection = $derived.by(() => {
+        if (!this.props.projection)
+            return undefined;
+        const _projection = this.props.projection();
+        // Apply fitSize if fitGeojson is provided
+        if (this.props.fitGeojson && 'fitSize' in _projection) {
+            _projection.fitSize(this.fitSizeRange, this.props.fitGeojson);
+        }
+        // Apply scale
+        if ('scale' in _projection) {
+            if (this.props.scale) {
+                _projection.scale(this.props.scale);
             }
-            // Apply rotate
-            if ('rotate' in _projection) {
-                if (this.props.rotate) {
-                    _projection.rotate([
-                        this.props.rotate.yaw,
-                        this.props.rotate.pitch,
-                        this.props.rotate.roll,
-                    ]);
-                }
-                if (this.transformState?.mode === 'projection' && this.transformApply.rotation) {
-                    _projection.rotate([
-                        this.transformState.translate.x, // yaw
-                        this.transformState.translate.y, // pitch
-                    ]);
-                }
+            if (this.transformState?.mode === 'projection' && this.transformApply.scale) {
+                _projection.scale(this.transformState.scale);
             }
-            // Apply translate
-            if ('translate' in _projection) {
-                if (this.props.translate) {
-                    _projection.translate(this.props.translate);
-                }
-                if (this.transformState?.mode === 'projection' && this.transformApply.translate) {
-                    _projection.translate([
-                        this.transformState.translate.x,
-                        this.transformState.translate.y,
-                    ]);
-                }
+        }
+        // Apply rotate
+        if ('rotate' in _projection) {
+            if (this.props.rotate) {
+                _projection.rotate([
+                    this.props.rotate.yaw,
+                    this.props.rotate.pitch,
+                    this.props.rotate.roll,
+                ]);
             }
-            // Apply center
-            if (this.props.center && 'center' in _projection) {
-                _projection.center(this.props.center);
+            if (this.transformState?.mode === 'projection' && this.transformApply.rotation) {
+                _projection.rotate([
+                    this.transformState.translate.x, // yaw
+                    this.transformState.translate.y, // pitch
+                ]);
             }
-            // Apply reflectX
-            if (this.props.reflectX) {
-                _projection.reflectX(this.props.reflectX);
+        }
+        // Apply translate
+        if ('translate' in _projection) {
+            if (this.props.translate) {
+                _projection.translate(this.props.translate);
             }
-            // Apply reflectY
-            if (this.props.reflectY) {
-                _projection.reflectY(this.props.reflectY);
+            else if (!this.props.fitGeojson) {
+                // Default translate to container center when not explicitly set
+                // and not already positioned via fitSize/fitGeojson
+                _projection.translate([
+                    (this._dimensionsGetter?.().width ?? this.chartWidth) / 2,
+                    (this._dimensionsGetter?.().height ?? this.chartHeight) / 2,
+                ]);
             }
-            // Apply clipAngle
-            if (this.props.clipAngle && 'clipAngle' in _projection) {
-                _projection.clipAngle(this.props.clipAngle);
+            if (this.transformState?.mode === 'projection' && this.transformApply.translate) {
+                _projection.translate([
+                    this.transformState.translate.x,
+                    this.transformState.translate.y,
+                ]);
             }
-            // Apply clipExtent
-            if (this.props.clipExtent && 'clipExtent' in _projection) {
-                _projection.clipExtent(this.props.clipExtent);
-            }
-            this.projection = _projection;
-        });
+        }
+        // Apply center
+        if (this.props.center && 'center' in _projection) {
+            _projection.center(this.props.center);
+        }
+        // Apply reflectX
+        if (this.props.reflectX) {
+            _projection.reflectX(this.props.reflectX);
+        }
+        // Apply reflectY
+        if (this.props.reflectY) {
+            _projection.reflectY(this.props.reflectY);
+        }
+        // Apply clipAngle
+        if (this.props.clipAngle && 'clipAngle' in _projection) {
+            _projection.clipAngle(this.props.clipAngle);
+        }
+        // Apply clipExtent
+        if (this.props.clipExtent && 'clipExtent' in _projection) {
+            _projection.clipExtent(this.props.clipExtent);
+        }
+        return _projection;
+    });
+    constructor(propsGetter, dimensionsGetter) {
+        this._propsGetter = propsGetter;
+        this._dimensionsGetter = dimensionsGetter;
     }
-    // Derived properties
+    // Derived properties — use dimensions getter (from ChartState) when available,
+    // falling back to $state values (set by GeoProjection.svelte via $effect)
     fitSizeRange = $derived(this.props.fixedAspectRatio
         ? [100, 100 / this.props.fixedAspectRatio]
-        : [this.chartWidth, this.chartHeight]);
+        : [
+            this._dimensionsGetter?.().width ?? this.chartWidth,
+            this._dimensionsGetter?.().height ?? this.chartHeight,
+        ]);
 }

package/dist/utils/arcText.svelte.d.ts

@@ -39,9 +39,15 @@ export type ArcTextOptions = {
     startOffset?: string;
     /**
      * An amount of padding to add to the outer radius of the path to add space
-     * between the text and the arc.
+     * between the text and the arc. Applies to `'outer'` and `'middle'` positions.
      */
     outerPadding?: number;
+    /**
+     * An amount of padding to subtract from the inner radius of the path to add
+     * space between the text and the arc. Applies to `'inner'` and `'middle'`
+     * positions. Positive values move the text inward (toward the chart center).
+     */
+    innerPadding?: number;
     /**
      * Optional offset specifically for 'outer-radial' position from the outer arc edge.
      * If not provided, 'outerPadding' will be used.

package/dist/utils/arcText.svelte.js

@@ -172,14 +172,18 @@ export function createArcTextProps(props, opts = {}, position) {
         return undefined;
     });
     const sharedProps = $derived.by(() => {
-        if (reverseText) {
+        // Center text along the arc path by default (50% startOffset, middle anchor).
+        // When the caller provides an explicit `startOffset`, honor it with a `start`
+        // anchor so the text begins at that position instead of centering around it.
+        if (opts.startOffset != null) {
             return {
-                startOffset: opts.startOffset ?? '100%',
-                textAnchor: 'end',
+                startOffset: opts.startOffset,
+                textAnchor: 'start',
             };
         }
         return {
-            startOffset: opts.startOffset ?? undefined,
+            startOffset: '50%',
+            textAnchor: 'middle',
         };
     });
     const radialPositionProps = $derived.by(() => {

package/dist/utils/canvas.js

@@ -56,6 +56,15 @@ const supportedStyles = [
  * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
  */
 export function _getComputedStyles(canvas, { styles, classes } = {}) {
+    // Server-side: no DOM available, return styles with sensible defaults
+    if (typeof document === 'undefined') {
+        const merged = { ...styles };
+        if (!merged.fontSize)
+            merged.fontSize = '10px';
+        if (!merged.fontFamily)
+            merged.fontFamily = 'sans-serif';
+        return merged;
+    }
     // console.count(`getComputedStyles: ${getComputedStylesKey(canvas, { styles, classes })}`);
     try {
         // Get or create `<svg>` below `<canvas>`
@@ -111,10 +120,17 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     const mergedStyles = { ...styleOptions.styles, ...parsedInlineStyles };
     // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
     let resolvedStyles;
-    if (styleOptions.classes == null &&
-        !Object.values(mergedStyles).some((v) => typeof v === 'string' && v.includes('var('))) {
-        // Skip resolving styles if no classes are provided and no styles are using CSS variables
+    if (typeof document === 'undefined' ||
+        (styleOptions.classes == null &&
+            !Object.values(mergedStyles).some((v) => typeof v === 'string' && v.includes('var(')))) {
+        // Skip resolving styles if running on server (no DOM), or no classes are provided and no styles are using CSS variables
         resolvedStyles = mergedStyles;
+        // On server, provide sensible defaults for styles that would normally come from CSS
+        if (typeof document === 'undefined') {
+            if (!resolvedStyles.stroke && !resolvedStyles.fill) {
+                resolvedStyles = { ...resolvedStyles, stroke: 'black' };
+            }
+        }
     }
     else {
         // Remove constant non-css variable properties (ex. `strokeWidth: 0.5`, `fill: #123456`) as not needed and improves memoization cache hit
@@ -140,8 +156,11 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     }
     // font/text properties can be expensive to set (not sure why), so only apply if needed (renderText())
     if (applyText) {
-        // Text properties
-        ctx.font = `${resolvedStyles.fontWeight} ${resolvedStyles.fontSize} ${resolvedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+        // Text properties — use defaults for server-side rendering where computed styles aren't available
+        const fontSize = resolvedStyles.fontSize || '10px';
+        const fontFamily = resolvedStyles.fontFamily || 'sans-serif';
+        const fontWeight = resolvedStyles.fontWeight || '';
+        ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`.trim(); // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
         if (resolvedStyles.textAnchor === 'middle') {
             ctx.textAlign = 'center';
         }
@@ -176,8 +195,8 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     for (const attr of paintOrder) {
         if (attr === 'fill') {
             const fill = styleOptions.styles?.fill &&
-                (styleOptions.styles?.fill instanceof CanvasGradient ||
-                    styleOptions.styles?.fill instanceof CanvasPattern ||
+                ((typeof CanvasGradient !== 'undefined' && styleOptions.styles?.fill instanceof CanvasGradient) ||
+                    (typeof CanvasPattern !== 'undefined' && styleOptions.styles?.fill instanceof CanvasPattern) ||
                     !styleOptions.styles?.fill?.includes('var'))
                 ? styleOptions.styles.fill
                 : resolvedStyles?.fill;
@@ -194,7 +213,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
         }
         else if (attr === 'stroke') {
             const stroke = styleOptions.styles?.stroke &&
-                (styleOptions.styles?.stroke instanceof CanvasGradient ||
+                ((typeof CanvasGradient !== 'undefined' && styleOptions.styles?.stroke instanceof CanvasGradient) ||
                     !styleOptions.styles?.stroke?.includes('var'))
                 ? styleOptions.styles?.stroke
                 : resolvedStyles?.stroke;
@@ -312,7 +331,7 @@ export function clearCanvasContext(ctx, options) {
   @see: https://web.dev/articles/canvas-hidipi
 */
 export function scaleCanvas(ctx, width, height) {
-    const devicePixelRatio = window.devicePixelRatio || 1;
+    const devicePixelRatio = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1;
     ctx.canvas.width = width * devicePixelRatio;
     ctx.canvas.height = height * devicePixelRatio;
     ctx.canvas.style.width = `${width}px`;
@@ -322,7 +341,7 @@ export function scaleCanvas(ctx, width, height) {
 }
 /** Get pixel color (r,g,b,a) at canvas coordinates */
 export function getPixelColor(ctx, x, y) {
-    const dpr = window.devicePixelRatio ?? 1;
+    const dpr = (typeof window !== 'undefined' ? window.devicePixelRatio : null) ?? 1;
     const imageData = ctx.getImageData(x * dpr, y * dpr, 1, 1);
     const [r, g, b, a] = imageData.data;
     return { r, g, b, a };

package/dist/utils/canvas.svelte.test.js

@@ -270,9 +270,9 @@ describe('renderPathData', () => {
     it('applies strokeOpacity less than 1', () => {
         const globalAlphaValues = [];
         const originalStroke = ctx.stroke.bind(ctx);
-        vi.spyOn(ctx, 'stroke').mockImplementation((...args) => {
+        vi.spyOn(ctx, 'stroke').mockImplementation(function () {
             globalAlphaValues.push(ctx.globalAlpha);
-            originalStroke(...args);
+            originalStroke();
         });
         renderPathData(ctx, 'M0,0 L100,0', {
             styles: {

package/dist/utils/motion.svelte.js

@@ -62,6 +62,20 @@ class MotionNone {
 function setupTracking(motion, getValue, options) {
     if (options.controlled)
         return;
+    // On the server (SSR), $effect won't run, so eagerly set the target value
+    // to ensure render closures capture the actual computed state (not the initial/baseline value).
+    if (typeof window === 'undefined') {
+        try {
+            const value = getValue();
+            if (value != null) {
+                motion.set(value, { instant: true });
+            }
+        }
+        catch {
+            // getValue() may fail if reactive dependencies aren't ready yet; ignore
+        }
+        return;
+    }
     $effect(() => {
         const value = getValue();
         if (value == null)

package/package.json

@@ -5,9 +5,10 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.50",
+  "version": "2.0.0-next.52",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
+    "@napi-rs/canvas": "^0.1.97",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
@@ -89,6 +90,11 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "svelte": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    },
     "./utils/*": {
       "types": "./dist/utils/*.d.ts",
       "svelte": "./dist/utils/*.js",