layerchart 2.0.0-next.47 → 2.0.0-next.49

package/dist/bench/PrimitiveBench.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import Chart from '../components/Chart.svelte';
+  import Layer from '../components/layers/Layer.svelte';
+  import Rect from '../components/Rect.svelte';
+  import Circle from '../components/Circle.svelte';
+  import Ellipse from '../components/Ellipse.svelte';
+  import Line from '../components/Line.svelte';
+  import Group from '../components/Group.svelte';
+  import Text from '../components/Text.svelte';
+  import Path from '../components/Path.svelte';
+
+  type Primitive = 'rect' | 'circle' | 'ellipse' | 'line' | 'group' | 'text' | 'path';
+  type Mode = 'layerchart' | 'native';
+
+  type Props = {
+    primitive: Primitive;
+    mode: Mode;
+    count?: number;
+  };
+
+  let { primitive, mode, count = 100 }: Props = $props();
+</script>
+
+{#if mode === 'layerchart'}
+  <Chart width={500} height={300}>
+    <Layer type="svg">
+      {#each Array(count) as _, i (i)}
+        {#if primitive === 'rect'}
+          <Rect x={10} y={10} width={50} height={30} fill="steelblue" />
+        {:else if primitive === 'circle'}
+          <Circle cx={30} cy={30} r={15} fill="steelblue" />
+        {:else if primitive === 'ellipse'}
+          <Ellipse cx={30} cy={30} rx={20} ry={10} fill="steelblue" />
+        {:else if primitive === 'line'}
+          <Line x1={0} y1={0} x2={50} y2={50} stroke="steelblue" strokeWidth={2} />
+        {:else if primitive === 'group'}
+          <Group x={10} y={10} />
+        {:else if primitive === 'text'}
+          <Text x={10} y={20} value="Hello" fill="steelblue" />
+        {:else if primitive === 'path'}
+          <Path pathData="M0,0 L50,50 L100,0 Z" fill="none" stroke="steelblue" strokeWidth={2} />
+        {/if}
+      {/each}
+    </Layer>
+  </Chart>
+{:else}
+  <svg width={500} height={300}>
+    {#each Array(count) as _, i (i)}
+      {#if primitive === 'rect'}
+        <rect x={10} y={10} width={50} height={30} fill="steelblue" />
+      {:else if primitive === 'circle'}
+        <circle cx={30} cy={30} r={15} fill="steelblue" />
+      {:else if primitive === 'ellipse'}
+        <ellipse cx={30} cy={30} rx={20} ry={10} fill="steelblue" />
+      {:else if primitive === 'line'}
+        <line x1={0} y1={0} x2={50} y2={50} stroke="steelblue" stroke-width={2} />
+      {:else if primitive === 'group'}
+        <g transform="translate(10,10)"></g>
+      {:else if primitive === 'text'}
+        <text x={10} y={20} fill="steelblue">Hello</text>
+      {:else if primitive === 'path'}
+        <path d="M0,0 L50,50 L100,0 Z" fill="none" stroke="steelblue" stroke-width={2} />
+      {/if}
+    {/each}
+  </svg>
+{/if}

package/dist/bench/PrimitiveBench.svelte.d.ts

@@ -0,0 +1,10 @@
+type Primitive = 'rect' | 'circle' | 'ellipse' | 'line' | 'group' | 'text' | 'path';
+type Mode = 'layerchart' | 'native';
+type Props = {
+    primitive: Primitive;
+    mode: Mode;
+    count?: number;
+};
+declare const PrimitiveBench: import("svelte").Component<Props, {}, "">;
+type PrimitiveBench = ReturnType<typeof PrimitiveBench>;
+export default PrimitiveBench;

package/dist/bench/primitives.svelte.bench.d.ts

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

package/dist/bench/primitives.svelte.bench.js

@@ -0,0 +1,42 @@
+import { describe, bench, afterEach } from 'vitest';
+import { render, cleanup } from 'vitest-browser-svelte';
+import PrimitiveBench from './PrimitiveBench.svelte';
+afterEach(() => {
+    cleanup();
+});
+const COUNT = 100;
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// LayerChart primitives vs native SVG elements — 100 instances each
+//
+// Representative subset: rect (shape), circle (shape), group (container),
+// text (complex), path (path-based). Ellipse/line follow the same
+// architecture as rect/circle and would show the same ratio.
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+const PRIMITIVES = ['rect', 'circle', 'group', 'text', 'path'];
+for (const primitive of PRIMITIVES) {
+    describe(`${primitive} — ${COUNT} instances`, () => {
+        bench(`Native <${primitive}>`, () => {
+            cleanup();
+            render(PrimitiveBench, { primitive, mode: 'native', count: COUNT });
+        });
+        bench(`LayerChart <${primitive[0].toUpperCase()}${primitive.slice(1)}>`, () => {
+            cleanup();
+            render(PrimitiveBench, { primitive, mode: 'layerchart', count: COUNT });
+        });
+    });
+}
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Scaling: rect at 10, 100, 250 instances
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+describe('rect — scaling', () => {
+    for (const count of [10, 100, 250]) {
+        bench(`Native <rect> × ${count}`, () => {
+            cleanup();
+            render(PrimitiveBench, { primitive: 'rect', mode: 'native', count });
+        });
+        bench(`LayerChart <Rect> × ${count}`, () => {
+            cleanup();
+            render(PrimitiveBench, { primitive: 'rect', mode: 'layerchart', count });
+        });
+    }
+});

package/dist/components/Axis.svelte

@@ -47,7 +47,7 @@
      * Width or height of each tick in pixels (enabling responsive count)
      * @default 80 (top|bottom|angle) or 50 (left|right|radius)
      */
-    tickSpacing?: number;
+    tickSpacing?: number | null;
 
     /**
      * Whether to render tick labels on multiple lines for additional context
@@ -220,11 +220,22 @@
             : null
   );
 
+  // For band scales with domain-mode transform, scale up effective size by the zoom factor
+  // so that more tick labels appear as bands get wider when zoomed in
+  const effectiveSize = $derived.by(() => {
+    if (!ctxSize) return ctxSize;
+    const ts = ctx.transformState;
+    if (ts?.mode === 'domain' && isScaleBand(scale) && ts.scale > 1) {
+      return ctxSize * ts.scale;
+    }
+    return ctxSize;
+  });
+
   const tickCount = $derived(
     typeof ticks === 'number'
       ? ticks
-      : tickSpacing && ctxSize
-        ? Math.round(ctxSize / tickSpacing)
+      : tickSpacing && effectiveSize
+        ? Math.round(effectiveSize / tickSpacing)
         : undefined
   );
   const tickVals = $derived.by(() => {

package/dist/components/Axis.svelte.d.ts

@@ -40,7 +40,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      * Width or height of each tick in pixels (enabling responsive count)
      * @default 80 (top|bottom|angle) or 50 (left|right|radius)
      */
-    tickSpacing?: number;
+    tickSpacing?: number | null;
     /**
      * Whether to render tick labels on multiple lines for additional context
      *

package/dist/components/Chart.svelte

@@ -7,7 +7,7 @@
 
   import { getObjectOrNull, type Accessor } from '../utils/common.js';
   import type { MotionProp } from '../utils/motion.svelte.js';
-  import { type AnyScale, type DomainType } from '../utils/scales.svelte.js';
+  import { type AnyScale, type DomainType, isScaleBand } from '../utils/scales.svelte.js';
   import type {
     BaseRange,
     Nice,
@@ -22,7 +22,7 @@
   import { geoFitObjectTransform } from '../utils/geo.js';
   import TransformContext from './TransformContext.svelte';
   import BrushContext from './BrushContext.svelte';
-  import { type BrushDomainType, type BrushState } from '../states/brush.svelte.js';
+  import { type BrushDomainType, type BrushState, expandBandBrushDomain } from '../states/brush.svelte.js';
 
   import { setChartContext } from '../contexts/chart.js';
   import { ChartState } from '../states/chart.svelte.js';
@@ -751,7 +751,7 @@
     }
 
     const defaults = isGlobe
-      ? { rotation: true, scale: false, translate: false }
+      ? { rotation: true, scale: true, translate: false }
       : { rotation: false, scale: true, translate: true };
 
     // User overrides win; enforce mutual exclusion
@@ -833,6 +833,9 @@
 
         const d0 = baseDomain[0] as unknown;
         const d1 = baseDomain[1] as unknown;
+
+        // Skip domain extent constraint for categorical scales (range clamping handles boundaries)
+        if (typeof d0 === 'string') return axisTranslate;
         const isDate = d0 instanceof Date;
         const rawD0 = isDate ? (d0 as Date).getTime() : (d0 as number);
         const rawD1 = isDate ? (d1 as Date).getTime() : (d1 as number);
@@ -925,15 +928,104 @@
     };
   });
 
-  // Compose user-provided constrain with domainExtent constrain
+  // Whether this is a band scale domain transform (affects scaleExtent and constrain defaults)
+  const isBandDomainTransform = $derived(
+    transform?.mode === 'domain' && (
+      ((transform.axis ?? 'both') !== 'y' && isScaleBand(chartState._xScaleProp)) ||
+      ((transform.axis ?? 'both') !== 'x' && isScaleBand(chartState._yScaleProp))
+    )
+  );
+
+  // For projection mode, scaleExtent is relative to the initial fitted scale (like d3-zoom).
+  // e.g. [0.5, 8] means 0.5x to 8x of the fitted projection scale.
+  // For band scale domain transforms, enforce minimum of 1 (can't zoom out past initial view).
+  const resolvedScaleExtent = $derived.by(() => {
+    if (transform?.mode === 'projection' && transform?.scaleExtent && initialTransform) {
+      const baseScale = initialTransform.scale;
+      return [
+        transform.scaleExtent[0] * baseScale,
+        transform.scaleExtent[1] * baseScale,
+      ] as [number, number];
+    }
+    if (!isBandDomainTransform) return transform?.scaleExtent;
+    const userExtent = transform?.scaleExtent;
+    return [Math.max(1, userExtent?.[0] ?? 1), userExtent?.[1] ?? Infinity] as [number, number];
+  });
+
+  // For projection mode with flat projections, translateExtent defines the pannable world bounds
+  // at the initial (1x) zoom level, similar to d3-zoom. The allowed translate range scales with
+  // the zoom ratio so you can pan more when zoomed in.
+  // For rotation mode (globes), translateExtent is passed through as degrees (yaw/pitch).
+  const resolvedTranslateExtent = $derived.by(() => {
+    if (transform?.mode === 'projection' && transform?.translateExtent) {
+      if (resolvedApply.rotation) {
+        // Rotation mode: values are degrees (yaw/pitch), pass through as-is
+        return transform.translateExtent;
+      }
+      // Flat projection translate mode: handled via projectionTranslateConstrain below
+      return undefined;
+    }
+    return transform?.translateExtent;
+  });
+
+  // For flat projection mode, implement d3-zoom-style translate constraining:
+  // The viewport (at current zoom) must overlap with the translateExtent world bounds.
+  // As zoom increases, the allowed translate range grows proportionally.
+  const projectionTranslateConstrain = $derived.by(() => {
+    if (transform?.mode !== 'projection' || !transform?.translateExtent || !initialTransform || resolvedApply.rotation) {
+      return undefined;
+    }
+
+    const baseScale = initialTransform.scale;
+    const baseTranslate = initialTransform.translate;
+    const [[x0, y0], [x1, y1]] = transform.translateExtent;
+
+    return (t: { scale: number; translate: { x: number; y: number } }) => {
+      let { scale, translate } = t;
+      // Zoom ratio relative to fitted scale
+      const k = scale / baseScale;
+
+      // Allowed translate range scales with zoom ratio
+      translate = {
+        x: Math.max(baseTranslate.x + x0 * k, Math.min(baseTranslate.x + x1 * k, translate.x)),
+        y: Math.max(baseTranslate.y + y0 * k, Math.min(baseTranslate.y + y1 * k, translate.y)),
+      };
+
+      return { scale, translate };
+    };
+  });
+
+  // Default constrain for band scale domain transforms: prevent panning past data boundaries
+  const bandScaleConstrain = $derived.by(() => {
+    if (!isBandDomainTransform) return undefined;
+    const xIsBand =
+      (transform!.axis ?? 'both') !== 'y' && isScaleBand(chartState._xScaleProp);
+    const yIsBand =
+      (transform!.axis ?? 'both') !== 'x' && isScaleBand(chartState._yScaleProp);
+
+    return (t: { scale: number; translate: { x: number; y: number } }) => {
+      let { scale, translate } = t;
+      let tx = translate.x;
+      let ty = translate.y;
+      if (xIsBand) {
+        // translate.x must be in [width * (1 - scale), 0]
+        tx = Math.max(chartState.width * (1 - scale), Math.min(0, tx));
+      }
+      if (yIsBand) {
+        ty = Math.max(chartState.height * (1 - scale), Math.min(0, ty));
+      }
+      return { scale, translate: { x: tx, y: ty } };
+    };
+  });
+
+  // Compose user-provided constrain with domainExtent constrain and band scale constrain
   const composedConstrain = $derived.by(() => {
     const userConstrain = transform?.constrain;
-    if (!domainExtentConstrain && !userConstrain) return undefined;
-    if (!domainExtentConstrain) return userConstrain;
-    if (!userConstrain) return domainExtentConstrain;
-    // Domain extent first, then user constrain
+    const constrains = [bandScaleConstrain, domainExtentConstrain, projectionTranslateConstrain, userConstrain].filter(Boolean) as Array<(t: { scale: number; translate: { x: number; y: number } }) => { scale: number; translate: { x: number; y: number } }>;
+    if (constrains.length === 0) return undefined;
+    if (constrains.length === 1) return constrains[0];
     return (t: { scale: number; translate: { x: number; y: number } }) => {
-      return userConstrain(domainExtentConstrain(t));
+      return constrains.reduce((acc, fn) => fn(acc), t);
     };
   });
 
@@ -954,8 +1046,12 @@
             chartState.zoomToBrush(e.brush, userProps.axis ?? 'x');
           } else if (zoomOnBrush) {
             const axis = userProps.axis ?? 'x';
-            if (axis === 'x' || axis === 'both') brushXDomain = e.brush.x;
-            if (axis === 'y' || axis === 'both') brushYDomain = e.brush.y;
+            if (axis === 'x' || axis === 'both') {
+              brushXDomain = expandBandBrushDomain(e.brush.x, chartState._baseXDomain);
+            }
+            if (axis === 'y' || axis === 'both') {
+              brushYDomain = expandBandBrushDomain(e.brush.y, chartState._baseYDomain);
+            }
           }
           userOnBrushEnd?.(e);
           e.brush.reset();
@@ -993,7 +1089,7 @@
   >
     {#key chartState.isMounted}
       <!-- svelte-ignore ownership_invalid_binding -->
-      {@const { domainExtent: _de, constrain: _uc, apply: _apply, ...transformProps } = transform ?? {}}
+      {@const { domainExtent: _de, constrain: _uc, apply: _apply, scaleExtent: _se, translateExtent: _te, ...transformProps } = transform ?? {}}
       <TransformContext
         bind:state={chartState.transformState}
         mode={transform?.mode ?? 'none'}
@@ -1001,6 +1097,8 @@
         initialScale={resolvedApply.scale ? initialTransform?.scale : undefined}
         {processTranslate}
         {...transformProps}
+        scaleExtent={resolvedScaleExtent}
+        translateExtent={resolvedTranslateExtent}
         constrain={composedConstrain}
         disablePointer={(brush === true || (typeof brush === 'object' && !brush.disabled)) || transform?.disablePointer}
         {ondragstart}

package/dist/components/Circle.svelte

@@ -154,19 +154,21 @@
   // --- Data mode: resolved items with optional motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  // Update motion targets when resolved values change
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveCircle(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  // Only create the data motion tracking effect when motion is actually configured
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveCircle(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   // Reading Spring .current here makes this reactive to animation frames
@@ -266,8 +268,9 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  // Only create key trackers when in canvas mode (they're only used for canvas dep tracking)
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   chartCtx.registerComponent({
     name: 'Circle',
@@ -296,9 +299,9 @@
         motionCx.current,
         motionCy.current,
         motionR.current,
-        fillKey.current,
+        fillKey!.current,
         fillOpacity,
-        strokeKey.current,
+        strokeKey!.current,
         strokeWidth,
         opacity,
         className,

package/dist/components/Contour.svelte

@@ -17,6 +17,15 @@
     /** Grid height (rows). When set, `data` is treated as a flat grid array. */
     height?: number;
 
+    /** Left bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    x1?: number;
+    /** Top bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    y1?: number;
+    /** Right bound of the raster in data coordinates. Defaults to `width` in grid mode. */
+    x2?: number;
+    /** Bottom bound of the raster in data coordinates. Defaults to `height` in grid mode. */
+    y2?: number;
+
     /**
      * Value channel. Interpretation depends on the type:
      * - `(x, y) => number`: continuous function evaluated at each pixel (function sampling mode)
@@ -51,20 +60,32 @@
   import { geoPath, geoTransform } from 'd3-geo';
   import { scaleSequential } from 'd3-scale';
   import { interpolateYlGnBu } from 'd3-scale-chromatic';
-  import { max, min, blur2 } from 'd3-array';
+  import { max, min } from 'd3-array';
 
   import Group from './Group.svelte';
   import Path from './Path.svelte';
   import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
   import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import {
+    blurGridIgnoringNaN,
+    gridCellCenterToBounds,
+    gridPointToBounds,
+    resolveRasterBounds,
+  } from '../utils/index.js';
   import { interpolateGrid } from '../utils/rasterInterpolate.js';
 
   const ctx = getChartContext();
+  const geo = getGeoContext();
 
   let {
     data: dataProp,
     width: widthProp,
     height: heightProp,
+    x1: x1Prop,
+    y1: y1Prop,
+    x2: x2Prop,
+    y2: y2Prop,
     value: valueProp,
     x: xProp,
     y: yProp,
@@ -83,6 +104,12 @@
 
   // Detect grid mode: data + width/height
   const isGridMode = $derived(!!(dataProp && widthProp && heightProp));
+  const hasExplicitBounds = $derived(
+    x1Prop !== undefined || y1Prop !== undefined || x2Prop !== undefined || y2Prop !== undefined
+  );
+  const gridBounds = $derived(
+    resolveRasterBounds(widthProp ?? 0, heightProp ?? 0, x1Prop, y1Prop, x2Prop, y2Prop)
+  );
 
   // Register as composite-mark with markInfo for grid mode domain participation
   ctx.registerComponent({
@@ -92,8 +119,8 @@
       if (!isGridMode) return {};
       return {
         data: [
-          { x: 0, y: 0 },
-          { x: widthProp, y: heightProp },
+          { x: gridBounds.x1, y: gridBounds.y1 },
+          { x: gridBounds.x2, y: gridBounds.y2 },
         ],
         x: 'x',
         y: 'y',
@@ -108,6 +135,9 @@
   // Scale factors from grid coordinates to chart pixel coordinates
   const scaleX = $derived(ctx.width / gridW);
   const scaleY = $derived(ctx.height / gridH);
+  const contourScaleX = $derived(gridW / ctx.width);
+  const contourScaleY = $derived(gridH / ctx.height);
+  const useProjectedGridSampling = $derived(!!(geo.projection && isGridMode && hasExplicitBounds));
 
   // Resolve grid values from one of three input modes
   const gridValues = $derived.by(() => {
@@ -115,9 +145,7 @@
 
     // Mode 1: Grid data (flat array + width/height)
     if (isGridMode) {
-      return dataProp instanceof Float64Array
-        ? dataProp
-        : Float64Array.from(dataProp as number[]);
+      return dataProp instanceof Float64Array ? dataProp : Float64Array.from(dataProp as number[]);
     }
 
     // Mode 2: Continuous function — evaluate at each grid cell
@@ -144,7 +172,7 @@
 
     const xAcc = xProp ? resolveAccessor(xProp) : ctx.x;
     const yAcc = yProp ? resolveAccessor(yProp) : ctx.y;
-    const valAcc = resolveAccessor(valueProp ?? 'value');
+    const valAcc = resolveAccessor((valueProp ?? 'value') as Accessor);
 
     const points: [number, number, number][] = chartData.map((d: any) => [
       ctx.xScale(xAcc(d)) / scaleX,
@@ -155,12 +183,39 @@
     return interpolateGrid(points, gridW, gridH, interpolateMethod);
   });
 
+  const projectedGridPoints = $derived.by(() => {
+    if (!useProjectedGridSampling || !widthProp || !heightProp || !geo.projection) return [];
+
+    const points: [number, number, number][] = [];
+    for (let row = 0; row < heightProp; row++) {
+      for (let column = 0; column < widthProp; column++) {
+        const value = gridValues[row * widthProp + column];
+        if (!Number.isFinite(value)) continue;
+
+        const point = gridCellCenterToBounds(column, row, widthProp, heightProp, gridBounds);
+        const projected = geo.projection([point.x, point.y]);
+        if (!projected || !Number.isFinite(projected[0]) || !Number.isFinite(projected[1]))
+          continue;
+
+        points.push([projected[0] * contourScaleX, projected[1] * contourScaleY, value]);
+      }
+    }
+
+    return points;
+  });
+
+  const contourGridValues = $derived.by(() => {
+    if (useProjectedGridSampling) {
+      return interpolateGrid(projectedGridPoints, gridW, gridH, interpolateMethod);
+    }
+
+    return gridValues;
+  });
+
   // Apply optional blur
   const blurredValues = $derived.by(() => {
-    if (!blurRadius || gridValues.length === 0) return gridValues;
-    const copy = new Float64Array(gridValues);
-    blur2({ data: copy, width: gridW, height: gridH }, blurRadius);
-    return copy;
+    if (!blurRadius || contourGridValues.length === 0) return contourGridValues;
+    return blurGridIgnoringNaN(contourGridValues, gridW, gridH, blurRadius);
   });
 
   // Run d3 contour generator
@@ -171,8 +226,29 @@
     return generator(Array.from(blurredValues));
   });
 
-  // Path generator that scales from grid to chart pixel coordinates
+  // Path generator that maps contour geometry into either data or geo space.
   const pathGenerator = $derived.by(() => {
+    if (useProjectedGridSampling) {
+      return geoPath(
+        geoTransform({
+          point(x, y) {
+            this.stream.point(x * scaleX, y * scaleY);
+          },
+        })
+      );
+    }
+
+    if (isGridMode && hasExplicitBounds) {
+      return geoPath(
+        geoTransform({
+          point(x, y) {
+            const point = gridPointToBounds(x, y, gridW, gridH, gridBounds);
+            this.stream.point(ctx.xScale(point.x), ctx.yScale(point.y));
+          },
+        })
+      );
+    }
+
     if (scaleX === 1 && scaleY === 1) return geoPath();
     return geoPath(
       geoTransform({
@@ -189,7 +265,8 @@
     const minValue = min(contourData, (d) => d.value) ?? 0;
     const maxValue = max(contourData, (d) => d.value) ?? 1;
     if (ctx.cScale) {
-      return ctx.cScale.copy().domain([minValue, maxValue]);
+      const scale = ctx.cScale.copy();
+      return ctx.props.cDomain ? scale : scale.domain([minValue, maxValue]);
     }
     return scaleSequential([minValue, maxValue], interpolateYlGnBu);
   });

package/dist/components/Contour.svelte.d.ts

@@ -14,6 +14,14 @@ export type ContourPropsWithoutHTML = {
     width?: number;
     /** Grid height (rows). When set, `data` is treated as a flat grid array. */
     height?: number;
+    /** Left bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    x1?: number;
+    /** Top bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    y1?: number;
+    /** Right bound of the raster in data coordinates. Defaults to `width` in grid mode. */
+    x2?: number;
+    /** Bottom bound of the raster in data coordinates. Defaults to `height` in grid mode. */
+    y2?: number;
     /**
      * Value channel. Interpretation depends on the type:
      * - `(x, y) => number`: continuous function evaluated at each pixel (function sampling mode)

package/dist/components/Ellipse.svelte

@@ -170,18 +170,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveEllipse(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveEllipse(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
@@ -290,8 +292,8 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   chartCtx.registerComponent({
     name: 'Ellipse',
@@ -321,9 +323,9 @@
         motionCy.current,
         motionRx.current,
         motionRy.current,
-        fillKey.current,
+        fillKey!.current,
         fillOpacity,
-        strokeKey.current,
+        strokeKey!.current,
         strokeWidth,
         opacity,
         className,