layerchart 2.0.0-next.48 → 2.0.0-next.49

package/dist/utils/dataProp.js

@@ -80,22 +80,33 @@ export function resolveGeoDataPair(xProp, yProp, d, projection, defaults = [0, 0
  * - `function`: called with data item, result passed through cScale.
  * - `undefined`/`null`: returns undefined.
  */
-export function resolveColorProp(value, d, cScale) {
+/**
+ * Returns true if the string looks like a CSS color value rather than a data property name.
+ * Matches: `#hex`, and functional notation like `rgb(...)`, `hsl(...)`, `var(...)`,
+ * `url(...)`, `color-mix(...)`, etc.
+ */
+function isCSSColor(value) {
+    return value.startsWith('#') || value.includes('(');
+}
+export function resolveColorProp(value, d, cScale, ...args) {
     if (value === undefined || value === null)
         return undefined;
     if (typeof value === 'function') {
-        const rawValue = value(d);
+        const rawValue = value(d, ...args);
         if (rawValue === undefined || rawValue === null)
             return undefined;
         return cScale ? String(cScale(rawValue)) : String(rawValue);
     }
     if (typeof value === 'string') {
+        // CSS color literals are never data property lookups
+        if (isCSSColor(value))
+            return value;
         const dataValue = get(d, value);
         if (dataValue !== undefined) {
             // Data property — resolve through cScale
             return cScale ? String(cScale(dataValue)) : String(dataValue);
         }
-        // Not a data property — literal CSS color
+        // Not a data property — treat as literal CSS color (e.g. named colors like 'red')
         return value;
     }
     return undefined;
@@ -105,10 +116,10 @@ export function resolveColorProp(value, d, cScale) {
  * If the value is a function, calls it with the data item.
  * Otherwise returns the static value.
  */
-export function resolveStyleProp(value, d) {
+export function resolveStyleProp(value, d, ...args) {
     if (value === undefined)
         return undefined;
     if (typeof value === 'function')
-        return value(d);
+        return value(d, ...args);
     return value;
 }

package/dist/utils/index.d.ts

@@ -14,6 +14,7 @@ export * from './ticks.js';
 export * from './treemap.js';
 export * from './threshold.js';
 export * from './rasterInterpolate.js';
+export * from './rasterBounds.js';
 export * from './stats.js';
 export * from './types.js';
 export * from './graph/dagre.js';

package/dist/utils/index.js

@@ -14,6 +14,7 @@ export * from './ticks.js';
 export * from './treemap.js';
 export * from './threshold.js';
 export * from './rasterInterpolate.js';
+export * from './rasterBounds.js';
 export * from './stats.js';
 export * from './types.js';
 export * from './graph/dagre.js';

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

@@ -108,12 +108,22 @@ type InternalMotionOptions = {
      */
     controlled?: boolean;
 };
-export declare function createMotion<T = any>(initialValue: T, getValue: () => T, motionProp: MotionOptions | undefined, options?: InternalMotionOptions): MotionSpring<T> | MotionTween<any> | MotionNone<T>;
+export declare function createMotion<T = any>(initialValue: T, getValue: () => T, motionProp: MotionOptions | undefined, options?: InternalMotionOptions): MotionSpring<T> | MotionTween<any> | MotionNone<T> | {
+    type: "none";
+    readonly current: T;
+    target: T;
+    set(_value: T, _options?: any): Promise<void>;
+};
 /**
  * Creates a controlled motion state that only updates when explicitly set
  * rather than automatically tracking changes to the source value
  */
-export declare function createControlledMotion<T = any>(initialValue: T, motionProp: MotionOptions | undefined): MotionTween<any> | MotionSpring<T> | MotionNone<T>;
+export declare function createControlledMotion<T = any>(initialValue: T, motionProp: MotionOptions | undefined): MotionTween<any> | MotionSpring<T> | MotionNone<T> | {
+    type: "none";
+    readonly current: T;
+    target: T;
+    set(_value: T, _options?: any): Promise<void>;
+};
 /**
  * Creates a state tracker for animation completion
  * This helps track whether any motion transitions are currently in progress

package/dist/utils/motion.svelte.js

@@ -74,6 +74,25 @@ function setupTracking(motion, getValue, options) {
     });
 }
 export function createMotion(initialValue, getValue, motionProp, options = {}) {
+    // Fast path: when no motion is configured, skip all state/effect overhead
+    // and return a lightweight passthrough that reads directly from the getter.
+    if (motionProp === undefined) {
+        return {
+            type: 'none',
+            get current() {
+                return getValue();
+            },
+            get target() {
+                return getValue();
+            },
+            set target(v) {
+                // no-op for passthrough
+            },
+            set(_value, _options) {
+                return Promise.resolve();
+            },
+        };
+    }
     const motion = parseMotionProp(motionProp);
     const motionState = motion.type === 'spring'
         ? new MotionSpring(initialValue, motion.options)
@@ -128,6 +147,9 @@ export function createMotionTracker() {
  * Returns null if no motion is configured (type: 'none').
  */
 export function createDataMotionMap(motionProp) {
+    // Fast path: skip parseMotionProp overhead when no motion is configured
+    if (motionProp === undefined)
+        return null;
     const config = parseMotionProp(motionProp);
     if (config.type === 'none')
         return null;

package/dist/utils/motion.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { parseMotionProp, extractTweenConfig } from './motion.svelte.js';
+import { createMotion, parseMotionProp, extractTweenConfig } from './motion.svelte.js';
 describe('parseMotionProp', () => {
     it('should return "none" type when config is undefined', () => {
         const result = parseMotionProp(undefined);
@@ -117,6 +117,54 @@ describe('parseMotionProp', () => {
         });
     });
 });
+describe('createMotion', () => {
+    describe('fast path (motionProp === undefined)', () => {
+        it('should return a passthrough that reads from the getter', () => {
+            let value = 42;
+            const motion = createMotion(0, () => value, undefined);
+            expect(motion.current).toBe(42);
+            value = 99;
+            expect(motion.current).toBe(99);
+        });
+        it('should have type "none"', () => {
+            const motion = createMotion(0, () => 0, undefined);
+            expect(motion.type).toBe('none');
+        });
+        it('should return resolved promise from set()', async () => {
+            const motion = createMotion(0, () => 0, undefined);
+            const result = motion.set(10);
+            expect(result).toBeInstanceOf(Promise);
+            await expect(result).resolves.toBeUndefined();
+        });
+        it('target getter should read from getValue', () => {
+            let value = 5;
+            const motion = createMotion(0, () => value, undefined);
+            expect(motion.target).toBe(5);
+            value = 20;
+            expect(motion.target).toBe(20);
+        });
+    });
+    describe('with explicit "none" motion', () => {
+        it('should create a MotionNone state (not a passthrough)', () => {
+            const motion = createMotion(0, () => 42, 'none');
+            // MotionNone stores its own state, so current reflects the initial value
+            // until the tracking effect runs (which requires Svelte runtime)
+            expect(motion.type).toBe('none');
+        });
+    });
+    describe('with spring motion', () => {
+        it('should create a spring motion state', () => {
+            const motion = createMotion(0, () => 42, 'spring');
+            expect(motion.type).toBe('spring');
+        });
+    });
+    describe('with tween motion', () => {
+        it('should create a tween motion state', () => {
+            const motion = createMotion(0, () => 42, 'tween');
+            expect(motion.type).toBe('tween');
+        });
+    });
+});
 describe('extractTweenConfig', () => {
     // Test case 1: Undefined input
     it('should return undefined when config is undefined', () => {

package/dist/utils/rasterBounds.d.ts

@@ -0,0 +1,18 @@
+import type { InterpolateMethod } from './rasterInterpolate.js';
+export type RasterBounds = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export declare function resolveRasterBounds(width: number, height: number, x1?: number, y1?: number, x2?: number, y2?: number): RasterBounds;
+export declare function gridPointToBounds(x: number, y: number, width: number, height: number, bounds: RasterBounds): {
+    x: number;
+    y: number;
+};
+export declare function gridCellCenterToBounds(column: number, row: number, width: number, height: number, bounds: RasterBounds): {
+    x: number;
+    y: number;
+};
+export declare function sampleGridAtBounds(values: ArrayLike<number>, width: number, height: number, bounds: RasterBounds, x: number, y: number, method?: InterpolateMethod): number;
+export declare function blurGridIgnoringNaN(values: ArrayLike<number>, width: number, height: number, radius: number): Float64Array<ArrayBufferLike>;

package/dist/utils/rasterBounds.js

@@ -0,0 +1,98 @@
+import { blur2 } from 'd3-array';
+export function resolveRasterBounds(width, height, x1, y1, x2, y2) {
+    return {
+        x1: x1 ?? 0,
+        y1: y1 ?? 0,
+        x2: x2 ?? width,
+        y2: y2 ?? height,
+    };
+}
+export function gridPointToBounds(x, y, width, height, bounds) {
+    return {
+        x: bounds.x1 + (x / width) * (bounds.x2 - bounds.x1),
+        y: bounds.y1 + (y / height) * (bounds.y2 - bounds.y1),
+    };
+}
+export function gridCellCenterToBounds(column, row, width, height, bounds) {
+    return {
+        x: bounds.x1 + ((column + 0.5) / width) * (bounds.x2 - bounds.x1),
+        y: bounds.y1 + ((row + 0.5) / height) * (bounds.y2 - bounds.y1),
+    };
+}
+export function sampleGridAtBounds(values, width, height, bounds, x, y, method = 'barycentric') {
+    const dx = bounds.x2 - bounds.x1;
+    const dy = bounds.y2 - bounds.y1;
+    if (!width || !height || dx === 0 || dy === 0)
+        return NaN;
+    const fx = ((x - bounds.x1) / dx) * width - 0.5;
+    const fy = ((y - bounds.y1) / dy) * height - 0.5;
+    if (fx < -0.5 || fx > width - 0.5 || fy < -0.5 || fy > height - 0.5) {
+        return NaN;
+    }
+    switch (method) {
+        case 'barycentric':
+            return sampleBilinear(values, width, height, fx, fy);
+        case 'nearest':
+        case 'none':
+        default:
+            return sampleNearest(values, width, height, fx, fy);
+    }
+}
+export function blurGridIgnoringNaN(values, width, height, radius) {
+    if (!radius || !values.length) {
+        return values instanceof Float64Array ? values : Float64Array.from(values);
+    }
+    const numerators = new Float64Array(values.length);
+    const weights = new Float64Array(values.length);
+    for (let index = 0; index < values.length; index++) {
+        const value = values[index] ?? NaN;
+        if (!Number.isFinite(value))
+            continue;
+        numerators[index] = value;
+        weights[index] = 1;
+    }
+    blur2({ data: numerators, width, height }, radius);
+    blur2({ data: weights, width, height }, radius);
+    const result = new Float64Array(values.length);
+    for (let index = 0; index < values.length; index++) {
+        const weight = weights[index];
+        result[index] = weight > 1e-12 ? numerators[index] / weight : NaN;
+    }
+    return result;
+}
+function sampleNearest(values, width, height, x, y) {
+    const column = clamp(Math.round(x), 0, width - 1);
+    const row = clamp(Math.round(y), 0, height - 1);
+    return values[row * width + column] ?? NaN;
+}
+function sampleBilinear(values, width, height, x, y) {
+    const x0 = Math.floor(x);
+    const y0 = Math.floor(y);
+    const x1 = x0 + 1;
+    const y1 = y0 + 1;
+    const tx = x - x0;
+    const ty = y - y0;
+    const weightedValues = [
+        [getSample(values, width, height, x0, y0), (1 - tx) * (1 - ty)],
+        [getSample(values, width, height, x1, y0), tx * (1 - ty)],
+        [getSample(values, width, height, x0, y1), (1 - tx) * ty],
+        [getSample(values, width, height, x1, y1), tx * ty],
+    ];
+    let totalWeight = 0;
+    let totalValue = 0;
+    for (const [value, weight] of weightedValues) {
+        if (!Number.isFinite(value))
+            continue;
+        totalWeight += weight;
+        totalValue += value * weight;
+    }
+    return totalWeight > 0 ? totalValue / totalWeight : NaN;
+}
+function getSample(values, width, height, x, y) {
+    const column = clamp(x, 0, width - 1);
+    const row = clamp(y, 0, height - 1);
+    return values[row * width + column] ?? NaN;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}

package/dist/utils/rasterBounds.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/rasterBounds.test.js

@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import { blurGridIgnoringNaN, gridCellCenterToBounds, gridPointToBounds, resolveRasterBounds, sampleGridAtBounds, } from './rasterBounds.js';
+describe('resolveRasterBounds', () => {
+    it('defaults to grid dimensions', () => {
+        expect(resolveRasterBounds(360, 180)).toEqual({
+            x1: 0,
+            y1: 0,
+            x2: 360,
+            y2: 180,
+        });
+    });
+    it('uses explicit geographic bounds', () => {
+        expect(resolveRasterBounds(360, 180, -180, 90, 180, -90)).toEqual({
+            x1: -180,
+            y1: 90,
+            x2: 180,
+            y2: -90,
+        });
+    });
+});
+describe('gridPointToBounds', () => {
+    it('maps contour-space coordinates back into bound coordinates', () => {
+        expect(gridPointToBounds(180, 90, 360, 180, resolveRasterBounds(360, 180, -180, 90, 180, -90))).toEqual({
+            x: 0,
+            y: 0,
+        });
+    });
+});
+describe('gridCellCenterToBounds', () => {
+    it('maps grid cell centers into bound coordinates', () => {
+        expect(gridCellCenterToBounds(0, 0, 360, 180, resolveRasterBounds(360, 180, -180, 90, 180, -90))).toEqual({
+            x: -179.5,
+            y: 89.5,
+        });
+    });
+});
+describe('sampleGridAtBounds', () => {
+    const grid = [0, 1, 2, 3];
+    const bounds = resolveRasterBounds(2, 2, -1, 1, 1, -1);
+    it('samples the nearest grid cell center', () => {
+        expect(sampleGridAtBounds(grid, 2, 2, bounds, -0.5, 0.5, 'nearest')).toBe(0);
+        expect(sampleGridAtBounds(grid, 2, 2, bounds, 0.5, -0.5, 'nearest')).toBe(3);
+    });
+    it('interpolates between adjacent cells', () => {
+        expect(sampleGridAtBounds(grid, 2, 2, bounds, 0, 0, 'barycentric')).toBe(1.5);
+    });
+    it('returns NaN outside the raster bounds', () => {
+        expect(sampleGridAtBounds(grid, 2, 2, bounds, 4, 4, 'barycentric')).toBeNaN();
+    });
+});
+describe('blurGridIgnoringNaN', () => {
+    it('preserves nearby finite values when blurring through NaN gaps', () => {
+        const blurred = blurGridIgnoringNaN([1, NaN, 3], 3, 1, 1);
+        expect(blurred[0]).toBeGreaterThan(0);
+        expect(blurred[1]).toBeGreaterThan(1);
+        expect(blurred[1]).toBeLessThan(3);
+        expect(blurred[2]).toBeGreaterThan(0);
+    });
+    it('keeps fully empty regions as NaN', () => {
+        const blurred = blurGridIgnoringNaN([NaN, NaN, NaN], 3, 1, 1);
+        expect(Array.from(blurred).every((value) => Number.isNaN(value))).toBe(true);
+    });
+});

package/dist/utils/scales.svelte.js

@@ -60,9 +60,11 @@ export function createMotionScale(scale, motion, options) {
 export function scaleBandInvert(scale) {
     const domain = scale.domain();
     const eachBand = scale.step();
-    const paddingOuter = eachBand * (scale.paddingOuter?.() ?? scale.padding()); // `scaleBand` uses paddingOuter(), while `scalePoint` uses padding() for outer paddding - https://github.com/d3/d3-scale#point_padding
+    const rangeStart = scale.range()[0];
+    const paddingOuter = scale.paddingOuter?.() ?? scale.padding(); // `scaleBand` uses paddingOuter(), while `scalePoint` uses padding() for outer paddding - https://github.com/d3/d3-scale#point_padding
     return function (value) {
-        const index = Math.floor((value - paddingOuter / 2) / eachBand);
+        // band[i] = rangeStart + step * (paddingOuter + i), so: i = (value - rangeStart) / step - paddingOuter
+        const index = Math.floor((value - rangeStart) / eachBand - paddingOuter);
         return domain[Math.max(0, Math.min(index, domain.length - 1))];
     };
 }

package/dist/utils/scales.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { scaleBand } from 'd3-scale';
+import { scaleBandInvert, scaleInvert } from './scales.svelte.js';
+describe('scaleBandInvert', () => {
+    const domain = ['A', 'B', 'C', 'D', 'E'];
+    it('should return correct category for standard range [0, width]', () => {
+        const scale = scaleBand().domain(domain).range([0, 500]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        // Each category should map back from its center
+        for (const category of domain) {
+            const x = scale(category) + scale.bandwidth() / 2;
+            expect(invert(x)).toBe(category);
+        }
+    });
+    it('should clamp to first category for values before range', () => {
+        const scale = scaleBand().domain(domain).range([0, 500]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        expect(invert(-50)).toBe('A');
+    });
+    it('should clamp to last category for values after range', () => {
+        const scale = scaleBand().domain(domain).range([0, 500]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        expect(invert(600)).toBe('E');
+    });
+    it('should handle offset range (non-zero start)', () => {
+        // Simulates a zoomed band scale where the range is shifted
+        const scale = scaleBand().domain(domain).range([-200, 800]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        // Each category should still map correctly
+        for (const category of domain) {
+            const x = scale(category) + scale.bandwidth() / 2;
+            expect(invert(x)).toBe(category);
+        }
+    });
+    it('should return correct category at viewport edges with offset range', () => {
+        // Range [-400, 600] means categories span 1000px but viewport is [0, ~500]
+        const scale = scaleBand().domain(domain).range([-400, 600]).padding(0.4);
+        const invert = scaleBandInvert(scale);
+        // At x=0, we should get whichever category is nearest that pixel position
+        const categoryAtZero = invert(0);
+        expect(domain).toContain(categoryAtZero);
+        // The returned category should be close to x=0 (within one step)
+        const pos = scale(categoryAtZero);
+        expect(Math.abs(pos)).toBeLessThan(scale.step());
+    });
+    it('should work with no padding', () => {
+        const scale = scaleBand().domain(domain).range([0, 500]);
+        const invert = scaleBandInvert(scale);
+        // bandwidth = 100, each category is 100px wide
+        expect(invert(50)).toBe('A');
+        expect(invert(150)).toBe('B');
+        expect(invert(450)).toBe('E');
+    });
+    it('should work with single-element domain', () => {
+        const scale = scaleBand().domain(['X']).range([0, 500]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        expect(invert(250)).toBe('X');
+        expect(invert(0)).toBe('X');
+    });
+});
+describe('scaleInvert', () => {
+    it('should use scaleBandInvert for band scales', () => {
+        const scale = scaleBand().domain(['A', 'B', 'C']).range([0, 300]).padding(0.1);
+        const center = scale('B') + scale.bandwidth() / 2;
+        expect(scaleInvert(scale, center)).toBe('B');
+    });
+});

package/dist/utils/ticks.js

@@ -126,9 +126,13 @@ export function autoTickVals(scale, ticks, count) {
     }
     // Band (use domain)
     if (isScaleBand(scale)) {
-        return ticks && typeof ticks === 'number'
-            ? scale.domain().filter((_, i) => i % ticks === 0)
-            : scale.domain();
+        const domain = scale.domain();
+        const resolvedCount = typeof ticks === 'number' ? ticks : count;
+        if (resolvedCount != null && resolvedCount < domain.length) {
+            const step = Math.max(1, Math.ceil(domain.length / resolvedCount));
+            return domain.filter((_, i) => i % step === 0);
+        }
+        return domain;
     }
     // Ticks from scale
     if (scale.ticks && typeof scale.ticks === 'function') {

package/dist/utils/ticks.test.js

@@ -27,11 +27,21 @@ describe('autoTickVals', () => {
         const scale = { ticks: mockTicksFn };
         expect(autoTickVals(scale, ticksConfig)).toEqual([]);
     });
-    it('filters band scale domain with number ticks', () => {
+    it('filters band scale domain with explicit number ticks', () => {
         const scale = { domain: mockDomain, bandwidth: vi.fn() };
-        expect(autoTickVals(scale, 2)).toEqual(['a', 'c', 'e']);
+        // ticks=2, domain has 5 items → step = ceil(5/2) = 3 → indices 0, 3
+        expect(autoTickVals(scale, 2)).toEqual(['a', 'd']);
     });
-    it('returns full domain for band scale without ticks', () => {
+    it('filters band scale domain using count parameter (from tickSpacing)', () => {
+        const scale = { domain: mockDomain, bandwidth: vi.fn() };
+        // count=3, domain has 5 items → step = ceil(5/3) = 2 → indices 0, 2, 4
+        expect(autoTickVals(scale, undefined, 3)).toEqual(['a', 'c', 'e']);
+    });
+    it('returns full domain for band scale when count >= domain length', () => {
+        const scale = { domain: mockDomain, bandwidth: vi.fn() };
+        expect(autoTickVals(scale, undefined, 10)).toEqual(['a', 'b', 'c', 'd', 'e']);
+    });
+    it('returns full domain for band scale without ticks or count', () => {
         const scale = { domain: mockDomain, bandwidth: vi.fn() };
         expect(autoTickVals(scale)).toEqual(['a', 'b', 'c', 'd', 'e']);
     });

package/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.48",
+  "version": "2.0.0-next.49",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@sveltejs/adapter-auto": "^7.0.1",
@@ -111,7 +111,8 @@
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "TZ=UTC-5 vitest",
     "test:ui": "TZ=UTC-5 vitest --ui",
-    "bench": "pnpm bench:linechart && pnpm bench:composable && pnpm bench:svg-vs-canvas",
+    "bench": "pnpm bench:primitives && pnpm bench:linechart && pnpm bench:composable && pnpm bench:svg-vs-canvas",
+    "bench:primitives": "TZ=UTC-5 vitest bench --project bench src/lib/bench/primitives.svelte.bench.ts",
     "bench:linechart": "TZ=UTC-5 vitest bench --project bench src/lib/components/charts/LineChart.svelte.bench.ts",
     "bench:composable": "TZ=UTC-5 vitest bench --project bench src/lib/bench/composable-vs-linechart.svelte.bench.ts",
     "bench:svg-vs-canvas": "TZ=UTC-5 vitest bench --project bench src/lib/bench/svg-vs-canvas.svelte.bench.ts",