svelteplot 0.10.3 → 0.11.0

package/dist/marks/Link.svelte

@@ -2,24 +2,26 @@
     Creates connections between pairs of points with optional curve styling and markers
 -->
 
-<script lang="ts" generics="Datum extends DataRecord">
+<script lang="ts" generics="Datum = DataRecord | GeoJSON.GeoJsonObject">
     interface LinkMarkProps extends BaseMarkProps<Datum>, MarkerOptions {
-        data: Datum[];
-        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        /** the input data array; each element becomes one link */
+        data?: Datum[];
+        /** sort order for data points before rendering */
+        sort?: ConstantAccessor<RawValue, Datum> | { channel: 'stroke' | 'fill' };
         /**
          * the x1 channel accessor for the start of the link
          */
-        x1: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
         /**
          * the y1 channel accessor for the start of the link
          */
-        y1: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
         /**
          * the x2 channel accessor for the end of the link
          */
-        x2: ChannelAccessor<Datum>;
-
-        y2: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        /** the y2 channel accessor for the end of the link */
+        y2?: ChannelAccessor<Datum>;
         /**
          * the curve type, defaults to 'auto' which uses a linear curve for planar projections
          * and a spherical line for geographic projections
@@ -29,10 +31,20 @@
          * the tension of the curve, defaults to 0
          */
         tension?: number;
+        /** legacy alias for link curvature */
+        bend?: number | boolean;
         /**
          * the text label for the link, can be a constant or a function
          */
         text?: ConstantAccessor<string, Datum>;
+        /** the fill color for the text label rendered along the link */
+        textFill?: ConstantAccessor<string, Datum>;
+        /** the stroke color for the text label rendered along the link */
+        textStroke?: ConstantAccessor<string, Datum>;
+        /** the offset position for the text label along the link path */
+        textStartOffset?: ConstantAccessor<string, Datum>;
+        /** the stroke width for the text label rendered along the link */
+        textStrokeWidth?: ConstantAccessor<number, Datum>;
     }
     import type {
         DataRecord,
@@ -48,8 +60,8 @@
     import Mark from '../Mark.svelte';
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { replaceChannels } from '../transforms/rename.js';
-    import { line, type CurveFactory } from 'd3-shape';
-    import callWithProps from '../helpers/callWithProps.js';
+    import { line, type CurveFactory, type Line as D3Line } from 'd3-shape';
+    import type { MarkerShape } from './helpers/Marker.svelte';
     import { maybeCurve } from '../helpers/curves.js';
     import { geoPath } from 'd3-geo';
     import { pick } from 'es-toolkit';
@@ -67,6 +79,7 @@
         data = [{} as Datum],
         curve = 'auto',
         tension = 0,
+        bend,
         text,
         class: className = '',
         ...options
@@ -80,9 +93,9 @@
     const args = $derived(
         replaceChannels(
             sort({
-                data: indexData(data),
+                data: indexData(data as object[]) as DataRecord[],
                 stroke: 'currentColor',
-                ...options
+                ...(options as BaseMarkProps<DataRecord>)
             }),
             { y: ['y1', 'y2'], x: ['x1', 'x2'] }
         )
@@ -90,39 +103,44 @@
 
     const sphericalLine = $derived(plot.scales.projection && curve === 'auto');
 
-    const linePath: (d: ScaledDataRecord, reversed: boolean) => string = $derived.by(() => {
-        const fn = callWithProps(line, [], {
-            curve: maybeCurve(curve === 'auto' ? 'linear' : curve, tension),
-            x: (d) => d[0],
-            y: (d) => d[1]
-        });
+    const linePath: (d: ScaledDataRecord, reversed?: boolean) => string | null = $derived.by(() => {
+        const fn: D3Line<[number, number]> = line<[number, number]>()
+            .curve(
+                maybeCurve(
+                    curve === 'auto' ? 'linear' : curve,
+                    bend === true ? 0.6 : bend === false ? 0 : (bend ?? tension ?? 0)
+                )
+            )
+            .x((d) => d[0])
+            .y((d) => d[1]);
 
         return (d: ScaledDataRecord, reversed = false) =>
             fn(
                 reversed
                     ? [
-                          [d.x2, d.y2],
-                          [d.x1, d.y1]
+                          [d.x2 as number, d.y2 as number],
+                          [d.x1 as number, d.y1 as number]
                       ]
                     : [
-                          [d.x1, d.y1],
-                          [d.x2, d.y2]
+                          [d.x1 as number, d.y1 as number],
+                          [d.x2 as number, d.y2 as number]
                       ]
             );
     });
 
-    const sphericalLinePath: (d: ScaledDataRecord, reversed: boolean) => string = $derived.by(
-        () => {
+    const sphericalLinePath: (d: ScaledDataRecord, reversed?: boolean) => string | null =
+        $derived.by(() => {
             const fn = sphereLine(plot.scales.projection);
             return (d: ScaledDataRecord, reversed = false) => {
                 const x1 = resolveChannel('x1', d.datum, args);
                 const y1 = resolveChannel('y1', d.datum, args);
                 const x2 = resolveChannel('x2', d.datum, args);
                 const y2 = resolveChannel('y2', d.datum, args);
-                return reversed ? fn(x2, y2, x1, y1) : fn(x1, y1, x2, y2);
+                return reversed
+                    ? fn(x2 as number, y2 as number, x1 as number, y1 as number)
+                    : fn(x1 as number, y1 as number, x2 as number, y2 as number);
             };
-        }
-    );
+        });
     //     sphericalLine
     //         ?
 
@@ -130,7 +148,7 @@
     //         :
     // );
 
-    function sphereLine(projection) {
+    function sphereLine(projection: any) {
         const path = geoPath(projection);
         return (x1: number, y1: number, x2: number, y2: number) => {
             return path({
@@ -165,10 +183,10 @@
                         d,
                         {
                             textAnchor: 'middle',
-                            ...pick(args, ['fontSize', 'fontWeight', 'fontStyle', 'textAnchor']),
-                            fill: args.textFill || args.stroke,
-                            stroke: args.textStroke,
-                            strokeWidth: args.textStrokeWidth
+                            ...pick(args, ['fontSize', 'fontWeight', 'fontStyle']),
+                            fill: options.textFill || args.stroke,
+                            stroke: options.textStroke,
+                            strokeWidth: options.textStrokeWidth
                         },
                         'fill',
                         usedScales
@@ -176,21 +194,27 @@
 
                     <MarkerPath
                         mark={{ ...mark, options: args }}
+                        transform=""
                         scales={plot.scales}
-                        markerStart={args.markerStart}
-                        markerEnd={args.markerEnd}
-                        marker={args.marker}
-                        markerScale={args.markerScale}
-                        class={styleClass}
-                        strokeWidth={args.strokeWidth}
-                        datum={d.datum}
-                        color={d.stroke}
-                        d={sphericalLine ? sphericalLinePath(d) : linePath(d)}
-                        dInv={sphericalLine ? sphericalLinePath(d, true) : linePath(d, true)}
-                        {style}
-                        text={text ? resolveProp(text, d.datum) : null}
-                        startOffset={resolveProp(args.textStartOffset, d.datum, '50%')}
-                        {textStyle}
+                        markerStart={options.markerStart as boolean | MarkerShape | undefined}
+                        markerEnd={options.markerEnd as boolean | MarkerShape | undefined}
+                        marker={options.marker as boolean | MarkerShape | undefined}
+                        markerScale={options.markerScale}
+                        class={styleClass ?? undefined}
+                        strokeWidth={options.strokeWidth as ConstantAccessor<number>}
+                        datum={d.datum as DataRecord}
+                        color={d.stroke ?? 'currentColor'}
+                        d={(sphericalLine ? sphericalLinePath(d) : linePath(d)) ?? ''}
+                        dInv={(sphericalLine ? sphericalLinePath(d, true) : linePath(d, true)) ??
+                            undefined}
+                        style={style ?? ''}
+                        text={text ? ((resolveProp(text, d.datum as Datum) as string) ?? '') : ''}
+                        startOffset={(resolveProp(
+                            options.textStartOffset,
+                            d.datum as Datum,
+                            '50%'
+                        ) as string) ?? '50%'}
+                        textStyle={textStyle ?? ''}
                         {textStyleClass} />
                 {/if}
             {/each}

package/dist/marks/Link.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { DataRecord, ConstantAccessor, ChannelAccessor, CurveName, MarkerOptions, RawValue } from '../types/index.js';
 import { type CurveFactory } from 'd3-shape';
-declare function $$render<Datum extends DataRecord>(): {
+declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
     props: Partial<{
         filter: ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
@@ -12,6 +12,16 @@ declare function $$render<Datum extends DataRecord>(): {
         dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -25,63 +35,128 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
     }> & MarkerOptions & {
-        data: Datum[];
-        sort?: ConstantAccessor<RawValue> | {
+        /** the input data array; each element becomes one link */
+        data?: Datum[];
+        /** sort order for data points before rendering */
+        sort?: ConstantAccessor<RawValue, Datum> | {
             channel: "stroke" | "fill";
         };
         /**
          * the x1 channel accessor for the start of the link
          */
-        x1: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
         /**
          * the y1 channel accessor for the start of the link
          */
-        y1: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
         /**
          * the x2 channel accessor for the end of the link
          */
-        x2: ChannelAccessor<Datum>;
-        y2: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        /** the y2 channel accessor for the end of the link */
+        y2?: ChannelAccessor<Datum>;
         /**
          * the curve type, defaults to 'auto' which uses a linear curve for planar projections
          * and a spherical line for geographic projections
@@ -91,17 +166,27 @@ declare function $$render<Datum extends DataRecord>(): {
          * the tension of the curve, defaults to 0
          */
         tension?: number;
+        /** legacy alias for link curvature */
+        bend?: number | boolean;
         /**
          * the text label for the link, can be a constant or a function
          */
         text?: ConstantAccessor<string, Datum>;
+        /** the fill color for the text label rendered along the link */
+        textFill?: ConstantAccessor<string, Datum>;
+        /** the stroke color for the text label rendered along the link */
+        textStroke?: ConstantAccessor<string, Datum>;
+        /** the offset position for the text label along the link path */
+        textStartOffset?: ConstantAccessor<string, Datum>;
+        /** the stroke width for the text label rendered along the link */
+        textStrokeWidth?: ConstantAccessor<number, Datum>;
     };
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Datum extends DataRecord> {
+declare class __sveltets_Render<Datum = DataRecord | GeoJSON.GeoJsonObject> {
     props(): ReturnType<typeof $$render<Datum>>['props'];
     events(): ReturnType<typeof $$render<Datum>>['events'];
     slots(): ReturnType<typeof $$render<Datum>>['slots'];
@@ -109,13 +194,13 @@ declare class __sveltets_Render<Datum extends DataRecord> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+    new <Datum = DataRecord | GeoJSON.GeoJsonObject>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
     } & ReturnType<__sveltets_Render<Datum>['exports']>;
-    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum = DataRecord | GeoJSON.GeoJsonObject>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /** Creates connections between pairs of points with optional curve styling and markers */
 declare const Link: $$IsomorphicComponent;
-type Link<Datum extends DataRecord> = InstanceType<typeof Link<Datum>>;
+type Link<Datum = DataRecord | GeoJSON.GeoJsonObject> = InstanceType<typeof Link<Datum>>;
 export default Link;

package/dist/marks/Pointer.svelte

@@ -1,11 +1,18 @@
 <script lang="ts" generics="Datum extends DataRow">
     interface PointerMarkProps {
+        /** the input data array */
         data: Datum[];
+        /** snippet rendered with the currently selected data points */
         children?: Snippet<[{ data: Datum[] }]>;
+        /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y?: ChannelAccessor<Datum>;
+        /** grouping channel for splitting data into separate search trees */
         z?: ChannelAccessor<Datum>;
+        /** the horizontal facet channel */
         fx?: ChannelAccessor<Datum>;
+        /** the vertical facet channel */
         fy?: ChannelAccessor<Datum>;
         /**
          * maximum cursor distance to select data points
@@ -46,7 +53,7 @@
     };
 
     const {
-        data = [{}],
+        data = [] as Datum[],
         children,
         x,
         y,
@@ -55,20 +62,20 @@
         fy,
         maxDistance = 15,
         tolerance = Number.NEGATIVE_INFINITY,
-        onupdate = null
+        onupdate = undefined
     }: PointerMarkProps = $derived({
         ...DEFAULTS,
         ...markProps
     });
 
-    let selectedData = $state([]);
+    let selectedData = $state<any[]>([]);
 
     function onPointerMove(evt: MouseEvent) {
-        let facetEl = evt.target as SVGElement;
+        let facetEl: Element | null = evt.target as Element;
         while (facetEl && !facetEl.classList.contains('facet')) {
-            facetEl = facetEl.parentElement;
+            facetEl = facetEl.parentElement as Element | null;
         }
-        const facetRect = (facetEl?.firstChild ?? plot.body).getBoundingClientRect();
+        const facetRect = ((facetEl?.firstChild as Element) ?? plot.body).getBoundingClientRect();
 
         const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
         const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
@@ -93,11 +100,11 @@
                 .data()
                 .filter((d) => d !== points[i])
                 .filter(
-                    (d) =>
+                    (d: any) =>
                         (!isFinite(d[POINTER_X]) ||
-                            Math.abs(d[POINTER_X] - points[i]?.[POINTER_X]) < tolerance) &&
+                            Math.abs(d[POINTER_X] - (points[i] as any)?.[POINTER_X]) < tolerance) &&
                         (!isFinite(d[POINTER_Y]) ||
-                            Math.abs(d[POINTER_Y] - points[i]?.[POINTER_Y]) < tolerance)
+                            Math.abs(d[POINTER_Y] - (points[i] as any)?.[POINTER_Y]) < tolerance)
                 );
         });
         selectedData = [...points, ...otherPoints].filter((d) => d != null);
@@ -115,18 +122,20 @@
     });
 
     const groups = $derived.by(() => {
-        const groups = [];
-        groupFacetsAndZ(indexData(data), { x, y, z, fx, fy }, (d) => groups.push(d));
+        const groups: any[][] = [];
+        groupFacetsAndZ(indexData(data as object[]) as any, { x, y, z, fx, fy }, (d) =>
+            groups.push(d)
+        );
         return groups;
     });
 
     const trees = $derived(
         groups.map((items) =>
-            quadtree()
-                .x(x != null ? (d) => d[POINTER_X] : () => 0)
-                .y(y != null ? (d) => d[POINTER_Y] : () => 0)
+            quadtree<any>()
+                .x(x != null ? (d: any) => d[POINTER_X] : () => 0)
+                .y(y != null ? (d: any) => d[POINTER_Y] : () => 0)
                 .addAll(
-                    items?.map((d) => {
+                    items?.map((d: any) => {
                         const [px, py] = projectXY(
                             plot.scales,
                             resolveChannel('x', d, { x }),

package/dist/marks/Pointer.svelte.d.ts

@@ -2,14 +2,21 @@ import { type Snippet } from 'svelte';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: {
+        /** the input data array */
         data: Datum[];
+        /** snippet rendered with the currently selected data points */
         children?: Snippet<[{
             data: Datum[];
         }]>;
+        /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y?: ChannelAccessor<Datum>;
+        /** grouping channel for splitting data into separate search trees */
         z?: ChannelAccessor<Datum>;
+        /** the horizontal facet channel */
         fx?: ChannelAccessor<Datum>;
+        /** the vertical facet channel */
         fy?: ChannelAccessor<Datum>;
         /**
          * maximum cursor distance to select data points

package/dist/marks/Rect.svelte

@@ -5,19 +5,27 @@
 <script lang="ts" generics="Datum extends DataRecord">
     interface RectMarkProps
         extends BaseMarkProps<Datum>, LinkableMarkProps<Datum>, BaseRectMarkProps<Datum> {
-        data: Datum[];
+        /** the input data array; each element becomes one rectangle */
+        data?: Datum[];
+        /** the horizontal position channel; used as shorthand for x1 and x2 with an interval */
         x?: ChannelAccessor<Datum>;
+        /** the starting horizontal position channel */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position channel */
         x2?: ChannelAccessor<Datum>;
+        /** the vertical position channel; used as shorthand for y1 and y2 with an interval */
         y?: ChannelAccessor<Datum>;
+        /** the starting vertical position channel */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position channel */
         y2?: ChannelAccessor<Datum>;
+        /** converts x/y into x1/x2 or y1/y2 ranges based on the provided interval */
         interval?: number | string;
+        /** additional CSS class name(s) for the rect element */
         class?: string;
         /**
          * Renders using Canvas instead of SVG.
          */
-
         canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
@@ -33,7 +41,7 @@
     import RectPath from './helpers/RectPath.svelte';
     import RectCanvas from './helpers/RectCanvas.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
-    import { IS_SORTED } from '../transforms/sort';
+    import { IS_SORTED } from '../transforms/sort.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: RectMarkProps = $props();
@@ -58,11 +66,11 @@
 </script>
 
 <Mark
-    type="rect"
     required={[]}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     {...markProps}
-    {...args}>
+    {...args}
+    type="rect">
     {#snippet children({ usedScales, scaledData })}
         {#if canvas}
             {@const rectCanvasData = scaledData.map((d) => {