svelteplot 0.12.0 → 0.14.0

package/dist/marks/helpers/GeoPathGroup.svelte

@@ -0,0 +1,103 @@
+<!-- @component
+    Renders GeoJSON geometries as SVG <path> elements (or via canvas when
+    canvas=true).  Used by the Contour and Density marks.  Each path's style is
+    resolved per-threshold using a color keyword (e.g. "value" or "density") that
+    maps the RAW_VALUE attached to each fake datum through the plot's color scale.
+-->
+<script lang="ts">
+    import type { ScaledDataRecord, PlotState } from '../../types/index.js';
+    import type { GeoPath } from 'd3-geo';
+    import { RAW_VALUE } from '../../transforms/recordize.js';
+    import GeoPathCanvas from './GeoPathCanvas.svelte';
+
+    let {
+        scaledData,
+        path,
+        geomKey,
+        colorKeyword,
+        fill,
+        stroke,
+        strokeWidth,
+        strokeOpacity,
+        fillOpacity,
+        opacity,
+        strokeMiterlimit,
+        clipPath,
+        className,
+        ariaLabel,
+        canvas = false,
+        plot
+    }: {
+        scaledData: ScaledDataRecord[];
+        /** d3 geoPath renderer (must NOT have a canvas context set). */
+        path: GeoPath;
+        /** Symbol key used to retrieve the GeoJSON geometry from each datum. */
+        geomKey: symbol;
+        /**
+         * The color keyword that, when used as fill/stroke, maps the threshold
+         * value through the plot's color scale.  E.g. "value" for Contour,
+         * "density" for Density.
+         */
+        colorKeyword: string;
+        fill: string;
+        stroke: string;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+        fillOpacity?: number;
+        opacity?: number;
+        strokeMiterlimit?: number;
+        clipPath?: string;
+        className?: string;
+        ariaLabel?: string;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+        plot: PlotState;
+    } = $props();
+
+    /** Resolve a fill/stroke prop that may be the colorKeyword. */
+    function resolveColor(prop: string | undefined, value: number): string {
+        if (prop != null && prop.toLowerCase() === colorKeyword.toLowerCase()) {
+            return (plot.scales.color?.fn(value) as string) ?? 'currentColor';
+        }
+        return prop ?? 'none';
+    }
+
+    /** Build the inline style string for a single contour/density path. */
+    function buildStyle(value: number): string {
+        const parts: string[] = [];
+        parts.push(`fill:${resolveColor(fill, value)}`);
+        parts.push(`stroke:${resolveColor(stroke, value)}`);
+        if (strokeWidth != null) parts.push(`stroke-width:${strokeWidth}`);
+        if (strokeOpacity != null) parts.push(`stroke-opacity:${strokeOpacity}`);
+        if (fillOpacity != null) parts.push(`fill-opacity:${fillOpacity}`);
+        if (opacity != null) parts.push(`opacity:${opacity}`);
+        if (strokeMiterlimit != null) parts.push(`stroke-miterlimit:${strokeMiterlimit}`);
+        return parts.join(';');
+    }
+</script>
+
+{#if canvas}
+    <GeoPathCanvas
+        {scaledData}
+        {path}
+        {geomKey}
+        {colorKeyword}
+        {fill}
+        {stroke}
+        {strokeWidth}
+        {strokeOpacity}
+        {fillOpacity}
+        {opacity}
+        {strokeMiterlimit} />
+{:else}
+    <g clip-path={clipPath} class={className || null} aria-label={ariaLabel}>
+        {#each scaledData as d, i (i)}
+            {@const geom = d.datum[geomKey as any] as any}
+            {#if geom?.coordinates?.length}
+                <path
+                    d={path(geom)}
+                    style={buildStyle((d.datum[RAW_VALUE as any] as number) ?? 0)} />
+            {/if}
+        {/each}
+    </g>
+{/if}

package/dist/marks/helpers/GeoPathGroup.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { ScaledDataRecord, PlotState } from '../../types/index.js';
+import type { GeoPath } from 'd3-geo';
+type $$ComponentProps = {
+    scaledData: ScaledDataRecord[];
+    /** d3 geoPath renderer (must NOT have a canvas context set). */
+    path: GeoPath;
+    /** Symbol key used to retrieve the GeoJSON geometry from each datum. */
+    geomKey: symbol;
+    /**
+     * The color keyword that, when used as fill/stroke, maps the threshold
+     * value through the plot's color scale.  E.g. "value" for Contour,
+     * "density" for Density.
+     */
+    colorKeyword: string;
+    fill: string;
+    stroke: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    fillOpacity?: number;
+    opacity?: number;
+    strokeMiterlimit?: number;
+    clipPath?: string;
+    className?: string;
+    ariaLabel?: string;
+    /** Render using a canvas element instead of SVG paths. */
+    canvas?: boolean;
+    plot: PlotState;
+};
+/**
+ * Renders GeoJSON geometries as SVG <path> elements (or via canvas when
+ * canvas=true).  Used by the Contour and Density marks.  Each path's style is
+ * resolved per-threshold using a color keyword (e.g. "value" or "density") that
+ * maps the RAW_VALUE attached to each fake datum through the plot's color scale.
+ */
+declare const GeoPathGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type GeoPathGroup = ReturnType<typeof GeoPathGroup>;
+export default GeoPathGroup;

package/dist/marks/helpers/ImageCanvas.svelte

@@ -0,0 +1,126 @@
+<!--
+@component
+Helper component for rendering Image marks in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ImageCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            src?: ConstantAccessor<string, Datum>;
+            width?: ConstantAccessor<number, Datum>;
+            height?: ConstantAccessor<number, Datum>;
+        };
+        usedScales: UsedScales;
+    }
+
+    import type {
+        BaseMarkProps,
+        ConstantAccessor,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp } from '../../helpers/resolve.js';
+    import type { Attachment } from 'svelte/attachments';
+    import { SvelteMap } from 'svelte/reactivity';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let { data, options, usedScales }: ImageCanvasProps = $props();
+
+    // Cache loaded images by URL to avoid redundant fetches
+    const imageCache = new SvelteMap<string, HTMLImageElement>();
+
+    // Reactive counter: incremented when an image finishes loading,
+    // which triggers the $effect to re-run and repaint the canvas.
+    let loadedCount = $state(0);
+
+    function getImage(url: string): HTMLImageElement | undefined {
+        if (imageCache.has(url)) {
+            const img = imageCache.get(url)!;
+            return img.complete && img.naturalWidth > 0 ? img : undefined;
+        }
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        imageCache.set(url, img);
+        img.onload = () => {
+            loadedCount++;
+        };
+        img.onerror = () => {
+            // Remove failed entries so they can be retried
+            imageCache.delete(url);
+        };
+        img.src = url;
+        return img.complete && img.naturalWidth > 0 ? img : undefined;
+    }
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            // Reference loadedCount so this effect re-runs when images load
+            void loadedCount;
+
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+
+                    const datum = d.datum as unknown as Datum;
+
+                    const srcUrl = resolveProp(options.src, datum, '') as string;
+                    if (!srcUrl) continue;
+
+                    const img = getImage(srcUrl);
+                    if (!img) continue;
+
+                    const w =
+                        d.r !== undefined
+                            ? (d.r as number) * 2
+                            : (Number(resolveProp(options.width, datum, 20) ?? 20) as number);
+                    const h =
+                        d.r !== undefined
+                            ? (d.r as number) * 2
+                            : (Number(
+                                  resolveProp(options.height || options.width, datum, 20) ?? 20
+                              ) as number);
+
+                    const x = (d.x ?? 0) - w * 0.5;
+                    const y = (d.y ?? 0) - h * 0.5;
+
+                    if (d.r !== undefined) {
+                        // Circular clipping
+                        const cx = d.x as number;
+                        const cy = d.y as number;
+                        const r = d.r as number;
+                        context.save();
+                        context.beginPath();
+                        context.arc(cx, cy, r, 0, Math.PI * 2);
+                        context.clip();
+                        context.drawImage(img, x, y, w, h);
+                        context.restore();
+                    } else {
+                        context.drawImage(img, x, y, w, h);
+                    }
+                }
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/ImageCanvas.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { BaseMarkProps, ConstantAccessor, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            src?: ConstantAccessor<string, Datum>;
+            width?: ConstantAccessor<number, Datum>;
+            height?: ConstantAccessor<number, Datum>;
+        };
+        usedScales: UsedScales;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    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']>> & {
+        $$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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Helper component for rendering Image marks in canvas */
+declare const ImageCanvas: $$IsomorphicComponent;
+type ImageCanvas<Datum extends DataRecord> = InstanceType<typeof ImageCanvas<Datum>>;
+export default ImageCanvas;

package/dist/marks/helpers/LinkCanvas.svelte

@@ -0,0 +1,103 @@
+<!--
+@component
+Helper component for rendering Link marks in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface LinkCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum>;
+        usedScales: UsedScales;
+        curveFactory: CurveFactory | CurveBundleFactory;
+    }
+
+    import type {
+        BaseMarkProps,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import {
+        line,
+        type CurveFactory,
+        type CurveBundleFactory,
+        type Line as D3Line
+    } from 'd3-shape';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let { data, options, usedScales, curveFactory }: LinkCanvasProps = $props();
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                const fn: D3Line<[number, number]> = line<[number, number]>()
+                    .curve(curveFactory as CurveFactory)
+                    .x((d) => d[0])
+                    .y((d) => d[1])
+                    .context(context);
+
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+                context.lineJoin = 'round';
+                context.lineCap = 'round';
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+
+                    const styleProps = resolveScaledStyleProps(
+                        d.datum,
+                        options,
+                        usedScales,
+                        plot,
+                        'stroke'
+                    ) as Record<string, unknown>;
+
+                    const opacity = +(styleProps['opacity'] ?? 1);
+                    const strokeOpacity = +(styleProps['stroke-opacity'] ?? 1);
+                    const stroke = resolveColor(
+                        String(styleProps.stroke || 'currentColor'),
+                        canvas
+                    );
+
+                    if (!stroke || stroke === 'none') continue;
+
+                    const strokeWidth = (resolveProp(options.strokeWidth, d.datum, 1.6) ??
+                        1.6) as number;
+
+                    context.lineWidth = strokeWidth;
+                    context.strokeStyle = stroke;
+                    context.globalAlpha = opacity * strokeOpacity;
+
+                    context.beginPath();
+                    fn([
+                        [d.x1 as number, d.y1 as number],
+                        [d.x2 as number, d.y2 as number]
+                    ]);
+                    context.stroke();
+                }
+
+                fn.context(null);
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/LinkCanvas.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { BaseMarkProps, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+import { type CurveFactory, type CurveBundleFactory } from 'd3-shape';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum>;
+        usedScales: UsedScales;
+        curveFactory: CurveFactory | CurveBundleFactory;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    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']>> & {
+        $$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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Helper component for rendering Link marks in canvas */
+declare const LinkCanvas: $$IsomorphicComponent;
+type LinkCanvas<Datum extends DataRecord> = InstanceType<typeof LinkCanvas<Datum>>;
+export default LinkCanvas;

package/dist/marks/helpers/PathGroup.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    import type {
+        PlotState,
+        ScaledDataRecord,
+        ScaledChannelName,
+        ChannelAccessor,
+        MarkStyleProps
+    } from '../../types/index.js';
+    import { resolveStyles, resolveProp } from '../../helpers/resolve.js';
+
+    type StyleArgs = Partial<Record<ScaledChannelName | MarkStyleProps, ChannelAccessor>>;
+    import { resolveColor } from './canvas.js';
+    import type { Attachment } from 'svelte/attachments';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+
+    let {
+        paths,
+        args,
+        className,
+        usedScales,
+        plot,
+        defaultStrokeWidth = 1,
+        canvas = false
+    }: {
+        paths: { path: string; datum: ScaledDataRecord }[];
+        args: Record<string | symbol, any>;
+        className: string;
+        usedScales: Record<ScaledChannelName, boolean>;
+        plot: PlotState;
+        defaultStrokeWidth?: number;
+        canvas?: boolean;
+    } = $props();
+
+    const render: Attachment = (el: Element) => {
+        const canvasEl = el as HTMLCanvasElement;
+        const context = canvasEl.getContext('2d');
+
+        $effect(() => {
+            if (!context) return;
+
+            context.resetTransform();
+            context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+            for (const { path: pathStr, datum } of paths) {
+                const fillColor = resolveColor(datum.fill ?? 'none', canvasEl) as string;
+                const strokeColor = resolveColor(datum.stroke ?? 'none', canvasEl) as string;
+                const opacity = datum.opacity ?? 1;
+                const fillOpacity = datum.fillOpacity ?? 1;
+                const strokeOpacity = datum.strokeOpacity ?? 1;
+                const strokeWidth = resolveProp(
+                    (args as StyleArgs).strokeWidth as ChannelAccessor,
+                    datum.datum,
+                    defaultStrokeWidth
+                ) as number;
+
+                const p = new Path2D(pathStr);
+
+                if (fillColor && fillColor !== 'none') {
+                    context.fillStyle = fillColor;
+                    context.globalAlpha = opacity * fillOpacity;
+                    context.fill(p);
+                }
+
+                if (strokeColor && strokeColor !== 'none') {
+                    context.strokeStyle = strokeColor;
+                    context.lineWidth = strokeWidth ?? defaultStrokeWidth;
+                    context.globalAlpha = opacity * strokeOpacity;
+                    context.stroke(p);
+                }
+            }
+
+            return () => {
+                context.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+{#if canvas}
+    <CanvasLayer {@attach render} />
+{:else}
+    <g class={className}>
+        {#each paths as { path, datum }, i (i)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                datum,
+                { strokeWidth: defaultStrokeWidth, ...(args as StyleArgs) },
+                'stroke',
+                usedScales
+            )}
+            <path d={path} class={styleClass} {style} />
+        {/each}
+    </g>
+{/if}

package/dist/marks/helpers/PathGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { PlotState, ScaledDataRecord, ScaledChannelName } from '../../types/index.js';
+type $$ComponentProps = {
+    paths: {
+        path: string;
+        datum: ScaledDataRecord;
+    }[];
+    args: Record<string | symbol, any>;
+    className: string;
+    usedScales: Record<ScaledChannelName, boolean>;
+    plot: PlotState;
+    defaultStrokeWidth?: number;
+    canvas?: boolean;
+};
+declare const PathGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type PathGroup = ReturnType<typeof PathGroup>;
+export default PathGroup;

package/dist/marks/helpers/PathItems.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import type {
+        PlotState,
+        ScaledDataRecord,
+        ScaledChannelName,
+        ChannelAccessor,
+        MarkStyleProps
+    } from '../../types/index.js';
+    import { resolveStyles, resolveProp } from '../../helpers/resolve.js';
+
+    type StyleArgs = Partial<Record<ScaledChannelName | MarkStyleProps, ChannelAccessor>>;
+    import { resolveColor } from './canvas.js';
+    import type { Attachment } from 'svelte/attachments';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import SvelteAnchor from './Anchor.svelte';
+    import { addEventHandlers } from './events.js';
+
+    let {
+        paths,
+        args,
+        options,
+        className,
+        usedScales,
+        plot,
+        canvas = false
+    }: {
+        paths: { path: string; datum: ScaledDataRecord }[];
+        args: Record<string | symbol, any>;
+        options: Record<string, any>;
+        className: string;
+        usedScales: Record<ScaledChannelName, boolean>;
+        plot: PlotState;
+        canvas?: boolean;
+    } = $props();
+
+    const render: Attachment = (el: Element) => {
+        const canvasEl = el as HTMLCanvasElement;
+        const context = canvasEl.getContext('2d');
+
+        $effect(() => {
+            if (!context) return;
+
+            context.resetTransform();
+            context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+            for (const { path: pathStr, datum } of paths) {
+                const fillColor = resolveColor(datum.fill ?? 'none', canvasEl) as string;
+                const strokeColor = resolveColor(datum.stroke ?? 'none', canvasEl) as string;
+                const opacity = datum.opacity ?? 1;
+                const fillOpacity = datum.fillOpacity ?? 1;
+                const strokeOpacity = datum.strokeOpacity ?? 1;
+                const strokeWidth = resolveProp(
+                    (args as StyleArgs).strokeWidth as ChannelAccessor,
+                    datum.datum,
+                    1
+                ) as number;
+
+                const p = new Path2D(pathStr);
+
+                if (fillColor && fillColor !== 'none') {
+                    context.fillStyle = fillColor;
+                    context.globalAlpha = opacity * fillOpacity;
+                    context.fill(p);
+                }
+
+                if (strokeColor && strokeColor !== 'none') {
+                    context.strokeStyle = strokeColor;
+                    context.lineWidth = strokeWidth ?? 1;
+                    context.globalAlpha = opacity * strokeOpacity;
+                    context.stroke(p);
+                }
+            }
+
+            return () => {
+                context.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+{#if canvas}
+    <CanvasLayer {@attach render} />
+{:else}
+    <g class={className}>
+        {#each paths as { path, datum }, i (i)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                datum,
+                { strokeWidth: 1, ...(args as StyleArgs) },
+                'stroke',
+                usedScales
+            )}
+            <SvelteAnchor {options} datum={datum.datum}>
+                <path
+                    d={path}
+                    class={styleClass}
+                    {style}
+                    {@attach addEventHandlers({
+                        plot,
+                        options: args as any,
+                        datum: datum.datum
+                    })} />
+            </SvelteAnchor>
+        {/each}
+    </g>
+{/if}

package/dist/marks/helpers/PathItems.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { PlotState, ScaledDataRecord, ScaledChannelName } from '../../types/index.js';
+type $$ComponentProps = {
+    paths: {
+        path: string;
+        datum: ScaledDataRecord;
+    }[];
+    args: Record<string | symbol, any>;
+    options: Record<string, any>;
+    className: string;
+    usedScales: Record<ScaledChannelName, boolean>;
+    plot: PlotState;
+    canvas?: boolean;
+};
+declare const PathItems: import("svelte").Component<$$ComponentProps, {}, "">;
+type PathItems = ReturnType<typeof PathItems>;
+export default PathItems;