svelteplot 0.8.1-pr-298.0 → 0.8.1-pr-298.2

package/dist/Mark.svelte

@@ -151,7 +151,7 @@
                     // check if the mark has defined an accessor for this channel
                     if (options?.[channel] !== undefined && out[channel] === undefined) {
                         // resolve value
-                        out[channel] = resolveChannel(channel, row, options);
+                        out[channel] = resolveChannel(channel, row, options, index);
                         if (options[channel] === INDEX) {
                             const scale = plot.scales[CHANNEL_SCALE[channel]];
                             if (scale.type === 'band' || scale.type === 'point') {

package/dist/Mark.svelte.d.ts

@@ -29,6 +29,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("./types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("./types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("./types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("./types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("./types/index.js").ConstantAccessor<string, Datum>;

package/dist/constants.d.ts

@@ -14,3 +14,5 @@ export declare const CSS_COLOR_CONTRAST: RegExp;
 export declare const CSS_RGBA: RegExp;
 export declare const CSS_URL: RegExp;
 export declare const INDEX: any;
+export declare const PI: number;
+export declare const TAU: number;

package/dist/constants.js

@@ -117,6 +117,8 @@ export const CSS_COLOR_CONTRAST = /^color-contrast\(/; // just check for prefix
 export const CSS_RGBA = /^rgba\(/; // just check for prefix
 export const CSS_URL = /^url\(#/; // just check for prefix
 export const INDEX = Symbol('index');
+export const PI = Math.PI;
+export const TAU = PI * 2;
 // export const CHANNEL_MAP: Record<ScaleName, ValueOf<typeof SCALE_TYPES>> = {
 // 	x: SCALE_TYPES.x,
 // 	y: SCALE_TYPES.y,

package/dist/helpers/projection.js

@@ -50,7 +50,7 @@ export function createProjection({ projOptions, inset: globalInset = 2, insetTop
     let transform;
     let invertTransform = (d) => d;
     // If a domain is specified, fit the projection to the frame.
-    if (domain != null) {
+    if (domain != null && dx > 0 && dy > 0) {
         const [[x0, y0], [x1, y1]] = geoPath(projInstance).bounds(domain);
         const k = Math.min(dx / (x1 - x0), dy / (y1 - y0));
         aspectRatio = (y1 - y0) / (x1 - x0);
@@ -66,9 +66,14 @@ export function createProjection({ projOptions, inset: globalInset = 2, insetTop
             invertTransform = ([x, y]) => [(x - tx) / k, (y - ty) / k];
         }
         else {
-            throw new Error(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
+            // eslint-disable-next-line no-console
+            console.warn(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
         }
     }
+    else if (domain != null) {
+        // eslint-disable-next-line no-console
+        console.warn(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
+    }
     transform ??=
         tx === 0 && ty === 0
             ? identity()

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

@@ -29,6 +29,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;

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

@@ -28,6 +28,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -28,6 +28,7 @@ declare function $$render<Datum extends RawValue>(): {
         strokeDashoffset: ConstantAccessor<number, Datum>;
         mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<CSS.Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;

package/dist/marks/AxisY.svelte

@@ -170,7 +170,7 @@
               : optionsLabel !== undefined
                 ? optionsLabel
                 : plot.scales.y.autoTitle
-                  ? `↑ ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
+                  ? `${!plot.options.y.reverse ? '↑' : '↓'} ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
                   : ''
     );
 

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends RawValue>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -29,6 +29,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

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

@@ -28,6 +28,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

package/dist/marks/BoxX.svelte

@@ -14,6 +14,7 @@
     const DEFAULTS = {
         tickMedian: true,
         tickMinMax: false,
+        sort: 'median',
         ...getPlotDefaults().box,
         ...getPlotDefaults().boxX
     };

package/dist/marks/BoxY.svelte

@@ -43,6 +43,7 @@
     const DEFAULTS = {
         tickMedian: true,
         tickMinMax: false,
+        sort: 'median',
         ...getPlotDefaults().box,
         ...getPlotDefaults().boxY
     };

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

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

@@ -28,6 +28,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

package/dist/marks/Geo.svelte

@@ -21,6 +21,7 @@
          * radius for point features
          */
         r?: ChannelAccessor<Datum>;
+        svgFilter?: ConstantAccessor<string | undefined, Datum>;
     }
     import { getContext } from 'svelte';
     import type {
@@ -111,6 +112,7 @@
                                 d={path(geometry)}
                                 {style}
                                 class={[styleClass]}
+                                filter={resolveProp(args.svgFilter, d.datum, undefined)}
                                 {@attach addEventHandlers({
                                     getPlotState,
                                     options: args,

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

@@ -27,6 +27,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;
@@ -84,6 +85,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
          * radius for point features
          */
         r?: ChannelAccessor<Datum>;
+        svgFilter?: ConstantAccessor<string | undefined, Datum>;
     };
     exports: {};
     bindings: "";

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

@@ -27,6 +27,7 @@ declare function $$render<Datum = RawValue>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum = RawValue>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

package/dist/marks/Line.svelte

@@ -76,7 +76,10 @@
 
     const args = $derived(sort(recordizeXY({ data, ...options })));
 
-    function groupIndex(data: ScaledDataRecord[], groupByKey) {
+    /**
+     * Groups the data by the specified key
+     */
+    function groupIndex(data: ScaledDataRecord[], groupByKey: ChannelAccessor<Datum> | null) {
         if (!groupByKey) return [data];
         let group = [];
         const groups = [group];
@@ -95,7 +98,7 @@
         return groups;
     }
 
-    const groupByKey = $derived(args.z || args.stroke);
+    const groupByKey = $derived(args.z || args.stroke) as ChannelAccessor<Datum> | null;
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -29,6 +29,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
         mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types").RawValue>>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
         shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types").RawValue>>;
         paintOrder: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
         mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types").RawValue>>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
         shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types").RawValue>>;
         paintOrder: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;

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

@@ -28,6 +28,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum = DataRecord | RawValue>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum = DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;

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

@@ -29,6 +29,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, Datum>;
         mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<CSS.Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: ConstantAccessor<number, 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>;

package/dist/marks/Trail.svelte

@@ -0,0 +1,163 @@
+<script lang="ts" generics="Datum extends DataRecord">
+    interface TrailMarkProps extends Omit<
+        BaseMarkProps<Datum>,
+        'stroke' | 'strokeWidth' | 'strokeDasharray'
+    > {
+        data?: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+        sort?: ConstantAccessor<RawValue, Datum> | { channel: 'stroke' | 'fill' };
+        defined?: ConstantAccessor<boolean, Datum>;
+        canvas?: boolean;
+        cap?: 'butt' | 'round';
+        /**
+         * Samples per segment for curve interpolation
+         */
+        resolution?: number | 'auto';
+    }
+    import type {
+        DataRecord,
+        ChannelAccessor,
+        BaseMarkProps,
+        ConstantAccessor,
+        RawValue,
+        PlotContext,
+        ScaledDataRecord,
+        CurveName
+    } from '../types';
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { path as d3Path } from 'd3-path';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { sort } from '../transforms';
+    import trailPath, { type TrailSample } from './helpers/trail.js';
+    import TrailCanvas from './helpers/TrailCanvas.svelte';
+    import { addEventHandlers } from './helpers/events';
+    import type { CurveFactory } from 'd3-shape';
+
+    let markProps: TrailMarkProps = $props();
+
+    const DEFAULTS: TrailMarkProps = {
+        curve: 'linear',
+        r: 3,
+        canvas: false,
+        resolution: 'auto',
+        cap: 'round',
+        tension: 0,
+        ...getPlotDefaults().trail
+    };
+
+    const {
+        data = [{} as Datum],
+        curve,
+        resolution,
+        tension,
+        canvas,
+        cap,
+        class: className,
+        ...options
+    }: TrailMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
+
+    const args = $derived(sort({ data, ...options })) as TrailMarkProps;
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    /**
+     * Groups the data by the specified key
+     */
+    function groupIndex(data: ScaledDataRecord[], groupByKey: ChannelAccessor<Datum> | null) {
+        if (!groupByKey) return [data];
+        let group: ScaledDataRecord[] = [];
+        const groups = [group];
+        let lastGroupValue;
+        for (const d of data) {
+            const groupValue = resolveProp(groupByKey, d.datum);
+            if (groupValue === lastGroupValue || group.length === 0) {
+                group.push(d);
+                lastGroupValue = groupValue;
+            } else {
+                // new group
+                group = [d];
+                groups.push(group);
+                lastGroupValue = groupValue;
+            }
+        }
+        return groups.filter((d) => d.length > 0);
+    }
+
+    const groupByKey = $derived(args.z || args.fill) as ChannelAccessor<Datum> | null;
+</script>
+
+<Mark
+    type="trail"
+    channels={['x', 'y', 'opacity', 'fill', 'fillOpacity', 'r']}
+    required={['x', 'y']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {#if scaledData.length > 0}
+            {@const groupedTrailData = groupIndex(scaledData, groupByKey)}
+            {#if canvas}
+                <!-- todo -->
+                <TrailCanvas
+                    {curve}
+                    {cap}
+                    {tension}
+                    {resolution}
+                    {usedScales}
+                    data={groupedTrailData}
+                    options={args} />
+            {:else}
+                <g class={['trail', className]}>
+                    {#each groupedTrailData as trailData, i (i)}
+                        {@const samples = trailData.map((d) => ({
+                            x: Number(d.x),
+                            y: Number(d.y),
+                            r: Number(d.r ?? 0)
+                        })) satisfies TrailSample[]}
+                        {@const defined = trailData.map(
+                            (d) =>
+                                d.valid &&
+                                d.r >= 0 &&
+                                (resolveProp(options.defined, d.datum, true) ?? true)
+                        )}
+                        {@const pathString = trailPath(samples, defined, d3Path(), {
+                            curve,
+                            cap,
+                            tension,
+                            ...(typeof resolution === 'number'
+                                ? { samplesPerSegment: resolution }
+                                : {})
+                        })}
+                        {@const [style, styleClass] = resolveStyles(
+                            plot,
+                            trailData[0],
+                            {
+                                ...args
+                            },
+                            'fill',
+                            usedScales
+                        )}
+                        <path
+                            d={pathString}
+                            {style}
+                            class={styleClass}
+                            {@attach addEventHandlers({
+                                getPlotState,
+                                options: mark.options,
+                                datum: trailData[0].datum
+                            })} />
+                    {/each}
+                </g>
+            {/if}
+        {/if}
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,44 @@
+import type { DataRecord, ChannelAccessor, ConstantAccessor, RawValue, CurveName } from '../types';
+import type { CurveFactory } from 'd3-shape';
+declare function $$render<Datum extends DataRecord>(): {
+    props: Omit<BaseMarkProps<Datum>, "stroke" | "strokeDasharray" | "strokeWidth"> & {
+        data?: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+        sort?: ConstantAccessor<RawValue, Datum> | {
+            channel: "stroke" | "fill";
+        };
+        defined?: ConstantAccessor<boolean, Datum>;
+        canvas?: boolean;
+        cap?: "butt" | "round";
+        /**
+         * Samples per segment for curve interpolation
+         */
+        resolution?: number | "auto";
+    };
+    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']>;
+}
+declare const Trail: $$IsomorphicComponent;
+type Trail<Datum extends DataRecord> = InstanceType<typeof Trail<Datum>>;
+export default Trail;

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

@@ -32,6 +32,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;