layerchart 2.0.0-next.62 → 2.0.0-next.63

package/dist/canvas.d.ts

@@ -166,6 +166,10 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.svelte';
 export { default as GeoLegend } from './components/geo/GeoLegend/GeoLegend.svelte';
 export { default as GeoProjection } from './components/geo/GeoProjection/GeoProjection.svelte';
 export { default as GeoRaster } from './components/geo/GeoRaster/GeoRaster.svelte';

package/dist/canvas.js

@@ -119,6 +119,10 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.svelte';
 // Geo helpers (no per-layer rendering)
 export { default as GeoLegend } from './components/geo/GeoLegend/GeoLegend.svelte';
 export { default as GeoProjection } from './components/geo/GeoProjection/GeoProjection.svelte';

package/dist/components/Arc/Arc.shared.svelte.d.ts

@@ -115,6 +115,7 @@ export declare class ArcState {
         dx?: string | number;
         dy?: string | number;
         lineHeight?: string;
+        fontSize?: number | string;
         capHeight?: string;
         scaleToFit?: boolean;
         textAnchor?: "start" | "middle" | "end" | "inherit";
@@ -144,6 +145,7 @@ export declare class ArcState {
         dx?: string | number;
         dy?: string | number;
         lineHeight?: string;
+        fontSize?: number | string;
         capHeight?: string;
         scaleToFit?: boolean;
         textAnchor?: "start" | "middle" | "end" | "inherit";

package/dist/components/ArcLabel/ArcLabel.shared.svelte.d.ts

@@ -69,6 +69,7 @@ export declare class ArcLabelState {
         dx?: string | number;
         dy?: string | number;
         lineHeight?: string;
+        fontSize?: number | string;
         capHeight?: string;
         scaleToFit?: boolean;
         textAnchor?: "start" | "middle" | "end" | "inherit";

package/dist/components/Circle/Circle.shared.svelte.js

@@ -11,18 +11,36 @@ const defaultKey = (_, i) => i;
  * either the geo projection or the chart's x/y/r scales.
  */
 export function resolveCircle(d, props, chartCtx, geo) {
+    // When cx/cy/r are omitted, fall back to the chart's accessors
+    // (xGet/yGet/rGet) — same pattern as `Points`. Hardcoded defaults
+    // (0/0/1) only apply when neither prop nor chart-level config is set.
+    const cxDefault = typeof props.cx === 'number'
+        ? props.cx
+        : props.cx == null && chartCtx.config.x != null
+            ? Number(chartCtx.xGet(d)) || 0
+            : 0;
+    const cyDefault = typeof props.cy === 'number'
+        ? props.cy
+        : props.cy == null && chartCtx.config.y != null
+            ? Number(chartCtx.yGet(d)) || 0
+            : 0;
+    const rDefault = typeof props.r === 'number'
+        ? props.r
+        : props.r == null && chartCtx.config.r != null
+            ? Number(chartCtx.rGet(d)) || 1
+            : 1;
     if (geo.projection) {
         const [projX, projY] = resolveGeoDataPair(props.cx, props.cy, d, geo.projection);
         return {
             cx: projX,
             cy: projY,
-            r: resolveDataProp(props.r, d, chartCtx.rScale, typeof props.r === 'number' ? props.r : 1),
+            r: resolveDataProp(props.r, d, chartCtx.rScale, rDefault),
         };
     }
     return {
-        cx: resolveDataProp(props.cx, d, chartCtx.xScale, 0),
-        cy: resolveDataProp(props.cy, d, chartCtx.yScale, 0),
-        r: resolveDataProp(props.r, d, chartCtx.rScale, typeof props.r === 'number' ? props.r : 1),
+        cx: resolveDataProp(props.cx, d, chartCtx.xScale, cxDefault),
+        cy: resolveDataProp(props.cy, d, chartCtx.yScale, cyDefault),
+        r: resolveDataProp(props.r, d, chartCtx.rScale, rDefault),
     };
 }
 /**
@@ -46,7 +64,8 @@ export class CircleState {
     // Reactive derivations
     dashArrayResolved = $derived(parseDashArray(this.#getProps().dashArray));
     dashArrayAttr = $derived(this.dashArrayResolved ? this.dashArrayResolved.join(' ') : undefined);
-    dataMode = $derived(hasAnyDataProp(this.#getProps().cx, this.#getProps().cy, this.#getProps().r));
+    dataMode = $derived(this.#getProps().data != null ||
+        hasAnyDataProp(this.#getProps().cx, this.#getProps().cy, this.#getProps().r));
     #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
     // Per-key motion tracking (only created when motion is configured)
     #dataMotionMap = null;

package/dist/components/Circle/Circle.svelte.test.js

@@ -137,5 +137,75 @@ describe('Circle', () => {
             const circles = page.getByTestId(componentTestId).elements();
             await expect.poll(() => circles.length).toBe(1);
         });
+        it('should enter data mode when only `data` prop is set, using chart accessors', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    r: 'value',
+                    rRange: [2, 10],
+                },
+                componentProps: {
+                    data,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            const radii = circles.map((c) => Number(c.getAttribute('r')));
+            for (const r of radii) {
+                expect(r).toBeGreaterThanOrEqual(2);
+                expect(r).toBeLessThanOrEqual(10);
+            }
+            expect(radii[2]).toBeGreaterThan(radii[0]);
+        });
+        it('should mix explicit and chart-inherited position props', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data,
+                    cx: 'date',
+                    r: 4,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            const cys = circles.map((c) => Number(c.getAttribute('cy')));
+            expect(cys[0]).toBeGreaterThan(cys[1]);
+            expect(cys[1]).toBeGreaterThan(cys[2]);
+            for (const c of circles) {
+                expect(c.getAttribute('r')).toBe('4');
+            }
+        });
+        it('explicit r should win over chart rGet', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    r: 'value',
+                    rRange: [2, 10],
+                },
+                componentProps: {
+                    data,
+                    r: 7,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            for (const c of circles) {
+                expect(c.getAttribute('r')).toBe('7');
+            }
+        });
     });
 });

package/dist/components/Dodge/Dodge.shared.svelte.d.ts

@@ -0,0 +1,132 @@
+import type { Snippet } from 'svelte';
+export type DodgeAnchor = 'top' | 'middle' | 'bottom' | 'left' | 'right';
+export type DodgeItem<T> = {
+    data: T;
+    /** Pixel position along the x-axis. */
+    x: number;
+    /** Pixel position along the y-axis. */
+    y: number;
+    /** Resolved circular radius (circular mode) or anchor-axis half-extent (rectangular mode). */
+    r: number;
+    /** Resolved x-axis half-extent. Equal to `r` in circular mode. */
+    rx: number;
+    /** Resolved y-axis half-extent. Equal to `r` in circular mode. */
+    ry: number;
+    /** Original index of the datum in the input `data` array. */
+    index: number;
+};
+export type DodgePropsWithoutHTML<T = any> = {
+    /** Data to dodge. Falls back to chart context data when omitted. */
+    data?: T[];
+    /**
+     * Axis to dodge along (the axis whose value is computed; the other axis is the anchor).
+     * @default 'y'
+     */
+    axis?: 'x' | 'y';
+    /**
+     * Anchor edge along the dodge axis.
+     *   - `axis='y'`: `'top'` (stack down), `'middle'` (stack from center), `'bottom'` (stack up). Default `'bottom'`.
+     *   - `axis='x'`: `'left'` (stack right), `'middle'`, `'right'`. Default `'left'`.
+     */
+    anchor?: DodgeAnchor;
+    /**
+     * Minimum padding between items in pixels.
+     * @default 1
+     */
+    padding?: number;
+    /**
+     * Circular collision radius (or accessor). Used unless both `rx` and `ry`
+     * are provided.
+     *
+     * Resolution priority:
+     * 1. This prop, if set.
+     * 2. The chart's `r` accessor (via `rScale`/`rRange`), if configured.
+     * 3. Default of `5`.
+     */
+    r?: number | ((d: T) => number);
+    /**
+     * X-axis half-extent (or accessor). When set together with `ry`, switches
+     * to axis-aligned **rectangular** packing instead of circular collision.
+     *
+     * For `axis='y'` (vertical dodge), `rx` controls the horizontal collision
+     * extent (typically the per-item value, e.g. half the label width). For
+     * `axis='x'` (horizontal dodge), `rx` becomes the dodge-axis (column)
+     * half-extent and is typically a constant.
+     */
+    rx?: number | ((d: T) => number);
+    /**
+     * Y-axis half-extent (or accessor). When set together with `rx`, switches
+     * to axis-aligned **rectangular** packing instead of circular collision.
+     *
+     * For `axis='y'` (vertical dodge), `ry` becomes the dodge-axis (row)
+     * half-extent and is typically a constant. For `axis='x'`, `ry` controls
+     * the vertical collision extent.
+     */
+    ry?: number | ((d: T) => number);
+    /**
+     * Override the anchor-axis pixel accessor.
+     * For `axis='y'`, this is x; for `axis='x'`, this is y.
+     * Defaults to the chart context's `xGet`/`yGet` (which applies the chart's
+     * scale to the chart's `x`/`y` accessor).
+     */
+    position?: (d: T) => number;
+    /**
+     * Pixel coordinate (along the dodge axis) of the line items grow away from:
+     * the centerline for `anchor='middle'`, the edge for the others.
+     *
+     * Default depends on `axis` + `anchor`:
+     * - `axis='y'`: `0` (top), `ctx.height / 2` (middle), `ctx.height` (bottom)
+     * - `axis='x'`: `0` (left), `ctx.width / 2` (middle), `ctx.width` (right)
+     *
+     * Pass a custom value to dodge within a sub-region — e.g. a band scale's
+     * `bandLeft + bandwidth/2` for per-band beeswarms, or a horizontal
+     * baseline pixel for split top/bottom timeline labels. Output positions
+     * are in chart coordinates (no snippet translation needed).
+     */
+    baseline?: number;
+    /** Snippet receives computed positions in original data order. */
+    children?: Snippet<[{
+        items: DodgeItem<T>[];
+    }]>;
+};
+export type DodgeProps<T = any> = DodgePropsWithoutHTML<T>;
+type DodgeInput<T> = {
+    /** Anchor-axis pixel position (always — the algorithm packs the other axis). */
+    x: number;
+    /** X-axis half-extent. */
+    rx: number;
+    /** Y-axis half-extent. */
+    ry: number;
+    data: T;
+    index: number;
+};
+type DodgeOpts = {
+    axis: 'x' | 'y';
+    anchor: DodgeAnchor;
+    padding: number;
+    /** Pixel coordinate (along the dodge axis) of the line items grow away from. */
+    baseline: number;
+    /**
+     * When `true`, switch from circular to axis-aligned rectangular packing.
+     * Inputs' `rx` / `ry` are then treated as independent half-extents per axis
+     * (the dodge-axis half-extent should be uniform for sensible row alignment).
+     */
+    rectangular?: boolean;
+};
+/**
+ * Pack items along one axis so they don't overlap, given their positions on
+ * the other axis. Modeled after Observable Plot's `dodge` transform — uses an
+ * interval tree to find candidate positions in `O(log n + k)` per item.
+ *
+ * `input.x` is always the anchor-axis position regardless of `axis`. The
+ * algorithm packs along the dodge axis and the wrapper swaps `x`/`y` in the
+ * result for `axis='x'`.
+ *
+ * Set `opts.rectangular` to true to switch from circular to axis-aligned
+ * rectangular packing — useful for text labels where the bounding box is much
+ * wider than tall (so a circular `r` would produce excessive vertical gaps).
+ *
+ * @see https://observablehq.com/plot/transforms/dodge
+ */
+export declare function dodge<T>(input: DodgeInput<T>[], opts: DodgeOpts): DodgeItem<T>[];
+export {};

package/dist/components/Dodge/Dodge.shared.svelte.js

@@ -0,0 +1,240 @@
+function createIntervalTree() {
+    let root = null;
+    function insertInto(node, interval) {
+        if (!node) {
+            return { interval, maxHi: interval[1], left: null, right: null };
+        }
+        if (interval[0] < node.interval[0]) {
+            node.left = insertInto(node.left, interval);
+        }
+        else {
+            node.right = insertInto(node.right, interval);
+        }
+        if (interval[1] > node.maxHi)
+            node.maxHi = interval[1];
+        return node;
+    }
+    function queryNode(node, lo, hi, visit) {
+        if (!node || node.maxHi < lo)
+            return;
+        queryNode(node.left, lo, hi, visit);
+        const it = node.interval;
+        if (it[0] <= hi && it[1] >= lo)
+            visit(it);
+        // Once `it[0] > hi` the right subtree (all `lo >= it[0]`) cannot overlap.
+        if (it[0] <= hi)
+            queryNode(node.right, lo, hi, visit);
+    }
+    return {
+        insert(interval) {
+            root = insertInto(root, interval);
+        },
+        queryInterval(lo, hi, visit) {
+            queryNode(root, lo, hi, visit);
+        },
+    };
+}
+/**
+ * Direction multiplier for an anchor along its dodge axis.
+ *
+ *  - `'top'` / `'left'`:    `+1` — items grow at increasing chart coord
+ *  - `'bottom'` / `'right'`: `-1` — items grow at decreasing chart coord
+ *  - `'middle'`:              `0` — items spread symmetrically (algorithm
+ *    treats this specially, not multiplied)
+ *
+ * Combined with `baseline` (the anchor's pixel coordinate), the algorithm
+ * maps a packed local position `p` to chart coords via `baseline + dir * p`
+ * (or `baseline ± p` for middle).
+ */
+function anchorDirection(axis, anchor) {
+    if (anchor === 'middle')
+        return 0;
+    if (axis === 'y')
+        return anchor === 'top' ? 1 : -1; // bottom
+    return anchor === 'right' ? -1 : 1; // left
+}
+function compareSymmetric(a, b) {
+    return Math.abs(a) - Math.abs(b);
+}
+/**
+ * Pack items along one axis so they don't overlap, given their positions on
+ * the other axis. Modeled after Observable Plot's `dodge` transform — uses an
+ * interval tree to find candidate positions in `O(log n + k)` per item.
+ *
+ * `input.x` is always the anchor-axis position regardless of `axis`. The
+ * algorithm packs along the dodge axis and the wrapper swaps `x`/`y` in the
+ * result for `axis='x'`.
+ *
+ * Set `opts.rectangular` to true to switch from circular to axis-aligned
+ * rectangular packing — useful for text labels where the bounding box is much
+ * wider than tall (so a circular `r` would produce excessive vertical gaps).
+ *
+ * @see https://observablehq.com/plot/transforms/dodge
+ */
+export function dodge(input, opts) {
+    if (opts.rectangular) {
+        return dodgeRows(input, opts);
+    }
+    return dodgeCircular(input, opts);
+}
+/**
+ * Map per-item normalized dodge-axis positions (`packed`) back to chart space
+ * and package as `DodgeItem`s. Handles the axis swap for `axis='x'` (where
+ * `input.x` is the chart-y anchor).
+ */
+function buildResult(input, packed, axis, dir, baseline) {
+    const factor = dir === 0 ? 1 : dir;
+    const result = new Array(input.length);
+    for (let i = 0; i < input.length; i++) {
+        const item = input[i];
+        const dodgePos = packed[i] * factor + baseline;
+        // `r` carries the anchor-axis half-extent for back-compat with circular
+        // callers (`<Circle r={r}>`). In rectangular mode that's `rx` for axis='y'
+        // and `ry` for axis='x' — i.e. whichever axis the layout collides on.
+        const rAnchor = axis === 'y' ? item.rx : item.ry;
+        result[i] =
+            axis === 'y'
+                ? {
+                    data: item.data,
+                    x: item.x,
+                    y: dodgePos,
+                    r: rAnchor,
+                    rx: item.rx,
+                    ry: item.ry,
+                    index: item.index,
+                }
+                : {
+                    data: item.data,
+                    x: dodgePos,
+                    y: item.x,
+                    r: rAnchor,
+                    rx: item.rx,
+                    ry: item.ry,
+                    index: item.index,
+                };
+    }
+    return result;
+}
+function dodgeCircular(input, opts) {
+    const { axis, anchor, padding, baseline } = opts;
+    const dir = anchorDirection(axis, anchor);
+    const isMiddle = dir === 0;
+    // `intervals[0..k]` is a flat array of [lo0, hi0, lo1, hi1, ...] forbidden
+    // zones along the dodge axis for the current item. Slot 0/1 is reserved
+    // for the natural anchor zone ([0, 0], a no-op zone keeping y=0 in the
+    // candidate set). Tangent positions from each colliding placed item add
+    // two more candidate y values each. `candidates` is a parallel buffer for
+    // the sortable copy — pre-allocated once to avoid per-iteration allocation.
+    const cap = 2 * input.length + 2;
+    const intervals = new Float64Array(cap);
+    const candidates = new Float64Array(cap);
+    const packed = new Float64Array(input.length);
+    const tree = createIntervalTree();
+    for (let i = 0; i < input.length; i++) {
+        const item = input[i];
+        // Circular mode: `rx === ry` (Dodge.svelte ensures this), so either one
+        // is the circular radius. Using `rx` keeps the field reference uniform.
+        const ri = item.rx;
+        // y0 shifts the natural anchor by ri+padding so the item sits flush
+        // against the baseline. middle anchor (dir=0) needs no shift.
+        const y0 = isMiddle ? 0 : ri + padding;
+        const l = item.x - ri;
+        const h = item.x + ri;
+        let k = 2;
+        tree.queryInterval(l - padding, h + padding, (interval) => {
+            const j = interval[2];
+            const yj = packed[j] - y0;
+            const dx = item.x - input[j].x;
+            const dr = ri + input[j].rx + padding;
+            const sq = dr * dr - dx * dx;
+            if (sq >= 0) {
+                const dy = Math.sqrt(sq);
+                intervals[k++] = yj - dy;
+                intervals[k++] = yj + dy;
+            }
+        });
+        // Sort the candidate y-values in-place into our reusable buffer. Native
+        // typed-array sort is materially faster than Array.sort with a JS
+        // comparator. For non-middle anchors we want ascending order (default);
+        // for middle we want symmetric (closest to 0 first), which still goes
+        // through the typed-array sort and avoids the prior allocation.
+        const view = candidates.subarray(0, k);
+        view.set(intervals.subarray(0, k));
+        if (isMiddle) {
+            view.sort(compareSymmetric);
+        }
+        else {
+            view.sort();
+        }
+        let chosen = y0; // fallback: natural anchor when nothing fits
+        outer: for (let c = 0; c < k; c++) {
+            const y = view[c];
+            // For non-middle anchors, items grow only in the +y direction relative
+            // to y0 — negative candidates are below the baseline and inadmissible.
+            if (!isMiddle && y < 0)
+                continue;
+            for (let j = 0; j < k; j += 2) {
+                if (intervals[j] + 1e-6 < y && y < intervals[j + 1] - 1e-6) {
+                    continue outer;
+                }
+            }
+            chosen = y + y0;
+            break;
+        }
+        packed[i] = chosen;
+        tree.insert([l, h, i]);
+    }
+    return buildResult(input, packed, axis, dir, baseline);
+}
+/**
+ * Axis-aligned rectangular packing — same interval-tree query as circular
+ * dodge, but we only care which rows/columns are already occupied in the
+ * overlap range. Items snap to the lowest free row at fixed increments along
+ * the dodge axis.
+ *
+ * Half-extent semantics:
+ *  - For `axis='y'`: `rx` is the anchor-axis (horizontal) collision extent;
+ *    `ry` is the dodge-axis (row) half-extent. Row spacing = `2 * ry`.
+ *  - For `axis='x'`: `ry` is the anchor-axis (vertical) collision extent;
+ *    `rx` is the dodge-axis (column) half-extent. Column spacing = `2 * rx`.
+ *
+ * The anchor-axis half-extent typically varies per item (e.g. half a label's
+ * width); the dodge-axis half-extent should be uniform for sensible
+ * row alignment.
+ */
+function dodgeRows(input, opts) {
+    const { axis, anchor, padding, baseline } = opts;
+    const dir = anchorDirection(axis, anchor);
+    const isVertical = axis === 'y';
+    const rows = new Int32Array(input.length);
+    const packed = new Float64Array(input.length);
+    const tree = createIntervalTree();
+    for (let i = 0; i < input.length; i++) {
+        const item = input[i];
+        const rAnchor = isVertical ? item.rx : item.ry;
+        const rDodge = isVertical ? item.ry : item.rx;
+        const l = item.x - rAnchor;
+        const h = item.x + rAnchor;
+        const used = new Set();
+        tree.queryInterval(l - padding, h + padding, (interval) => {
+            used.add(rows[interval[2]]);
+        });
+        let row = 0;
+        while (used.has(row))
+            row++;
+        rows[i] = row;
+        // Row spacing is `2 * rDodge`; centers fall at half-row offsets.
+        if (dir === 0) {
+            // middle: alternate above/below (even rows above, odd rows below)
+            const sign = row % 2 === 0 ? -1 : 1;
+            const step = Math.floor(row / 2) + (row === 0 ? 0 : 1);
+            packed[i] = sign * step * 2 * rDodge;
+        }
+        else {
+            // start/end: stack outward from the anchor edge
+            packed[i] = row * 2 * rDodge + rDodge;
+        }
+        tree.insert([l, h, i]);
+    }
+    return buildResult(input, packed, axis, dir, baseline);
+}

package/dist/components/Dodge/Dodge.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" module>
+  export type {
+    DodgeAnchor,
+    DodgeItem,
+    DodgeProps,
+    DodgePropsWithoutHTML,
+  } from './Dodge.shared.svelte.js';
+  export { dodge } from './Dodge.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T = any">
+  import { getChartContext } from '../../contexts/chart.js';
+  import { dodge, type DodgeProps } from './Dodge.shared.svelte.js';
+
+  let {
+    data: dataProp,
+    axis = 'y',
+    anchor,
+    padding = 1,
+    r,
+    rx,
+    ry,
+    position,
+    baseline: baselineProp,
+    children,
+  }: DodgeProps<T> = $props();
+
+  const ctx = getChartContext<T>();
+
+  ctx.registerComponent({ name: 'Dodge', kind: 'composite-mark' });
+
+  const resolvedAnchor = $derived(anchor ?? (axis === 'y' ? 'bottom' : 'left'));
+
+  const data = $derived((dataProp ?? (ctx.data as T[] | undefined) ?? []) as T[]);
+
+  const positionFn = $derived(
+    position ?? ((axis === 'y' ? ctx.xGet : ctx.yGet) as (d: T) => number)
+  );
+
+  // Rectangular mode is opt-in by providing both `rx` and `ry`.
+  const rectangular = $derived(rx != null && ry != null);
+
+  // Resolve `r` (circular fallback) — also serves as the default per-axis
+  // half-extent in circular mode (rx === ry === r).
+  const rFn = $derived.by(() => {
+    if (typeof r === 'function') return r as (d: T) => number;
+    if (r != null) return () => r as number;
+    if (ctx.config.r) return (d: T) => Number(ctx.rGet(d)) || 0;
+    return () => 5;
+  });
+
+  function asFn(v: number | ((d: T) => number) | undefined, fallback: (d: T) => number) {
+    if (typeof v === 'function') return v as (d: T) => number;
+    if (v != null) return () => v as number;
+    return fallback;
+  }
+
+  const rxFn = $derived(asFn(rx, rFn));
+  const ryFn = $derived(asFn(ry, rFn));
+
+  // Default baseline: the chart-coord position of the anchor edge / centerline.
+  const baseline = $derived.by(() => {
+    if (baselineProp != null) return baselineProp;
+    const dim = axis === 'y' ? ctx.height : ctx.width;
+    if (resolvedAnchor === 'middle') return dim / 2;
+    if (axis === 'y') return resolvedAnchor === 'top' ? 0 : dim; // bottom
+    return resolvedAnchor === 'right' ? dim : 0; // left
+  });
+
+  const items = $derived.by(() => {
+    const input = data.map((d, index) => ({
+      x: Number(positionFn(d)) || 0,
+      rx: Number(rxFn(d)) || 0,
+      ry: Number(ryFn(d)) || 0,
+      data: d,
+      index,
+    }));
+    return dodge(input, {
+      axis,
+      anchor: resolvedAnchor,
+      padding,
+      baseline,
+      rectangular,
+    });
+  });
+</script>
+
+{@render children?.({ items })}

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

@@ -0,0 +1,27 @@
+export type { DodgeAnchor, DodgeItem, DodgeProps, DodgePropsWithoutHTML, } from './Dodge.shared.svelte.js';
+export { dodge } from './Dodge.shared.svelte.js';
+import { type DodgeProps } from './Dodge.shared.svelte.js';
+declare function $$render<T = any>(): {
+    props: DodgeProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = any> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = any>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Dodge: $$IsomorphicComponent;
+type Dodge<T = any> = InstanceType<typeof Dodge<T>>;
+export default Dodge;

package/dist/components/Dodge/Dodge.test.d.ts

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