svelteplot 0.8.0-pr-282.2 → 0.8.1-pr-283.0

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,12 @@ 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.`);
+            console.warn(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
         }
     }
+    else if (domain != null) {
+        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/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,157 @@
+<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 { last } from 'es-toolkit';
+    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 />
+            {: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>;

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

@@ -0,0 +1,26 @@
+export default TrailCanvas;
+type TrailCanvas = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TrailCanvas: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/marks/helpers/trail.d.ts

@@ -0,0 +1,23 @@
+import type { Path } from 'd3-path';
+import type { CurveName } from '../../types/index.js';
+import type { CurveFactory } from 'd3-shape';
+export type TrailContext = CanvasRenderingContext2D | Path;
+export type TrailCurve = CurveName | CurveFactory;
+export type TrailCap = 'round' | 'butt';
+export type TrailOptions = {
+    curve?: TrailCurve;
+    samplesPerSegment?: number;
+    cap?: TrailCap;
+    tension?: number;
+};
+export type TrailSample = {
+    x: number;
+    y: number;
+    r: number;
+};
+/**
+ * Draw a stroked capsule trail along successive points with varying widths.
+ * Adapted from Vega's trail mark implementation.
+ */
+export declare function trailPath(samples: TrailSample[], defined: boolean[], context: TrailContext, options?: TrailOptions): string | void;
+export default trailPath;

package/dist/marks/helpers/trail.js

@@ -0,0 +1,372 @@
+import { TAU } from '../../constants.js';
+import { maybeCurve } from '../../helpers/curves.js';
+/**
+ * Draw a stroked capsule trail along successive points with varying widths.
+ * Adapted from Vega's trail mark implementation.
+ */
+export function trailPath(samples, defined, context, options = {}) {
+    const { curve = 'linear', cap = 'round', tension = 0.5 } = options;
+    const samplesPerSegment = options.samplesPerSegment ?? estimateSamplesPerSegment(samples, defined);
+    const curveFactory = maybeCurve(curve, tension);
+    let drawSamples = samples;
+    let drawDefined = defined;
+    if (curve !== 'linear' || tension !== 0) {
+        const smoothedSamples = [];
+        const smoothedDefined = [];
+        const len = Math.min(samples.length, defined.length);
+        let i = 0;
+        while (i < len) {
+            if (!defined[i]) {
+                smoothedSamples.push(samples[i]);
+                smoothedDefined.push(false);
+                i += 1;
+                continue;
+            }
+            const segment = [];
+            while (i < len && defined[i]) {
+                segment.push(samples[i]);
+                i += 1;
+            }
+            const resampled = resampleCurve(segment, curveFactory, Math.max(1, samplesPerSegment));
+            smoothedSamples.push(...resampled);
+            smoothedDefined.push(...new Array(resampled.length).fill(true));
+            // preserve a gap between defined segments
+            if (i < len) {
+                smoothedSamples.push(samples[i]);
+                smoothedDefined.push(false);
+            }
+        }
+        drawSamples = smoothedSamples;
+        drawDefined = smoothedDefined;
+    }
+    const len = Math.min(drawSamples.length, drawDefined.length);
+    if (len === 0)
+        return;
+    // Butt caps: build joined polygon offsets using angle bisectors to avoid gaps.
+    if (cap === 'butt') {
+        const normalizeVec = (x, y) => {
+            const lenVec = Math.hypot(x, y);
+            return lenVec === 0 ? [0, 0] : [x / lenVec, y / lenVec];
+        };
+        let i = 0;
+        while (i < len) {
+            if (!drawDefined[i]) {
+                i += 1;
+                continue;
+            }
+            const runStart = i;
+            while (i < len && drawDefined[i])
+                i += 1;
+            const runEnd = i - 1;
+            const left = [];
+            const right = [];
+            for (let j = runStart; j <= runEnd; j += 1) {
+                const curr = drawSamples[j];
+                const r = curr.r;
+                const hasPrev = j > runStart;
+                const hasNext = j < runEnd;
+                const prev = hasPrev ? drawSamples[j - 1] : curr;
+                const next = hasNext ? drawSamples[j + 1] : curr;
+                const dirPrev = hasPrev
+                    ? normalizeVec(curr.x - prev.x, curr.y - prev.y)
+                    : normalizeVec(next.x - curr.x, next.y - curr.y);
+                const dirNext = hasNext ? normalizeVec(next.x - curr.x, next.y - curr.y) : dirPrev;
+                const normPrev = [-dirPrev[1], dirPrev[0]];
+                const normNext = [-dirNext[1], dirNext[0]];
+                let nx = normPrev[0] + normNext[0];
+                let ny = normPrev[1] + normNext[1];
+                const nLen = Math.hypot(nx, ny);
+                if (nLen < 1e-6) {
+                    // Straight/180-deg turn: fall back to current normal.
+                    nx = normPrev[0];
+                    ny = normPrev[1];
+                }
+                else {
+                    nx /= nLen;
+                    ny /= nLen;
+                }
+                // Scale to preserve half-width along the miter direction.
+                const dot = nx * normPrev[0] + ny * normPrev[1];
+                const safeDot = Math.abs(dot) < 1e-6 ? 1 : dot;
+                const scale = r / safeDot;
+                const ox = nx * scale;
+                const oy = ny * scale;
+                left.push([curr.x + ox, curr.y + oy]);
+                right.push([curr.x - ox, curr.y - oy]);
+            }
+            if (left.length > 0) {
+                context.moveTo(left[0][0], left[0][1]);
+                for (let j = 1; j < left.length; j += 1) {
+                    context.lineTo(left[j][0], left[j][1]);
+                }
+                for (let j = right.length - 1; j >= 0; j -= 1) {
+                    context.lineTo(right[j][0], right[j][1]);
+                }
+                context.closePath();
+            }
+        }
+        return typeof context.toString === 'function' ? context.toString() : undefined;
+    }
+    // Round caps: original capsule behavior.
+    let ready = false;
+    let x1 = 0;
+    let y1 = 0;
+    let r1 = 0;
+    function point(x2, y2, r2, isStartOfRun, isEndOfRun) {
+        if (ready) {
+            let ux = y1 - y2;
+            let uy = x2 - x1;
+            if (ux || uy) {
+                // compute normal vector scaled by radius
+                const ud = Math.hypot(ux, uy);
+                const rx = (ux /= ud) * r1;
+                const ry = (uy /= ud) * r1;
+                const t = Math.atan2(uy, ux);
+                // keep rounded joins for interior segments even when using butt caps
+                const drawStartCap = !isStartOfRun || cap === 'round';
+                const drawEndCap = !isEndOfRun || cap === 'round';
+                context.moveTo(x1 - rx, y1 - ry);
+                context.lineTo(x2 - ux * r2, y2 - uy * r2);
+                if (drawEndCap) {
+                    context.arc(x2, y2, r2, t - Math.PI, t);
+                }
+                else {
+                    context.lineTo(x2 + ux * r2, y2 + uy * r2);
+                }
+                context.lineTo(x1 + rx, y1 + ry);
+                if (drawStartCap) {
+                    context.arc(x1, y1, r1, t, t + Math.PI);
+                }
+            }
+            else {
+                if (cap === 'round' || (!isStartOfRun && !isEndOfRun)) {
+                    context.arc(x2, y2, r2, 0, TAU);
+                }
+            }
+            context.closePath();
+        }
+        else {
+            ready = true;
+        }
+        x1 = x2;
+        y1 = y2;
+        r1 = r2;
+    }
+    let i = 0;
+    while (i < len) {
+        // Skip gaps
+        if (!drawDefined[i]) {
+            i += 1;
+            ready = false;
+            continue;
+        }
+        const runStart = i;
+        while (i < len && drawDefined[i])
+            i += 1;
+        const runEnd = i - 1;
+        // Prime the first point of the run
+        const first = drawSamples[runStart];
+        ready = false;
+        x1 = first.x;
+        y1 = first.y;
+        r1 = first.r;
+        ready = true;
+        for (let j = runStart + 1; j <= runEnd; j += 1) {
+            const { x: x2, y: y2, r } = drawSamples[j];
+            const isStart = j - 1 === runStart;
+            const isEnd = j === runEnd;
+            point(Number(x2), Number(y2), Number(r), isStart, isEnd);
+        }
+        ready = false;
+    }
+    return typeof context.toString === 'function' ? context.toString() : undefined;
+}
+function resampleCurve(points, curveFactory, samplesPerSegment) {
+    if (points.length === 0)
+        return [];
+    const commands = [];
+    let pendingRadius = points[0].r;
+    let currentRadius = points[0].r;
+    let currentPoint = null;
+    const ctx = {
+        beginPath() { },
+        closePath() { },
+        moveTo(x, y) {
+            currentPoint = [x, y];
+            currentRadius = pendingRadius;
+            commands.push({ type: 'move', to: [x, y], r: currentRadius });
+        },
+        lineTo(x, y) {
+            const from = currentPoint ?? [x, y];
+            commands.push({
+                type: 'line',
+                from: [from[0], from[1], currentRadius],
+                to: [x, y, pendingRadius]
+            });
+            currentPoint = [x, y];
+            currentRadius = pendingRadius;
+        },
+        bezierCurveTo(x1, y1, x2, y2, x, y) {
+            const from = currentPoint ?? [x, y];
+            commands.push({
+                type: 'cubic',
+                from: [from[0], from[1], currentRadius],
+                cp1: [x1, y1],
+                cp2: [x2, y2],
+                to: [x, y, pendingRadius]
+            });
+            currentPoint = [x, y];
+            currentRadius = pendingRadius;
+        },
+        quadraticCurveTo(x1, y1, x, y) {
+            const from = currentPoint ?? [x, y];
+            commands.push({
+                type: 'quad',
+                from: [from[0], from[1], currentRadius],
+                cp: [x1, y1],
+                to: [x, y, pendingRadius]
+            });
+            currentPoint = [x, y];
+            currentRadius = pendingRadius;
+        },
+        arc() { },
+        rect() { }
+    };
+    const curve = curveFactory(ctx);
+    curve.lineStart();
+    for (let idx = 0; idx < points.length; idx += 1) {
+        const pt = points[idx];
+        pendingRadius = pt.r;
+        curve.point(pt.x, pt.y);
+    }
+    curve.lineEnd();
+    const geom = flattenCommands(commands, samplesPerSegment);
+    if (geom.length === 0)
+        return geom;
+    // Re-map radii along the resampled path using the original cumulative
+    // length as the parameter to avoid curve-specific radius drift.
+    const origCum = [0];
+    for (let i = 1; i < points.length; i += 1) {
+        const dx = points[i].x - points[i - 1].x;
+        const dy = points[i].y - points[i - 1].y;
+        origCum.push(origCum[i - 1] + Math.hypot(dx, dy));
+    }
+    const origTotal = origCum[origCum.length - 1] || 1;
+    const resCum = [0];
+    for (let i = 1; i < geom.length; i += 1) {
+        const dx = geom[i].x - geom[i - 1].x;
+        const dy = geom[i].y - geom[i - 1].y;
+        resCum.push(resCum[i - 1] + Math.hypot(dx, dy));
+    }
+    const resTotal = resCum[resCum.length - 1] || 1;
+    const radiusAt = (target) => {
+        let idx = 1;
+        while (idx < origCum.length && origCum[idx] < target)
+            idx += 1;
+        if (idx === origCum.length)
+            return points[points.length - 1].r;
+        const t0 = origCum[idx - 1];
+        const t1 = origCum[idx];
+        const r0 = points[idx - 1].r;
+        const r1 = points[idx].r;
+        const t = t1 === t0 ? 0 : (target - t0) / (t1 - t0);
+        return lerp(r0, r1, t);
+    };
+    for (let i = 0; i < geom.length; i += 1) {
+        const frac = resCum[i] / resTotal;
+        geom[i].r = Number(radiusAt(frac * origTotal).toFixed(2));
+    }
+    return geom;
+}
+function flattenCommands(commands, samplesPerSegment, precision = 2) {
+    const result = [];
+    let last = null;
+    const round = (v) => {
+        const m = 10 ** precision;
+        return Math.round(v * m) / m;
+    };
+    const pushPoint = (x, y, r) => {
+        x = round(x);
+        y = round(y);
+        r = round(r);
+        if (!last || last[0] !== x || last[1] !== y || last[2] !== r) {
+            result.push({ x, y, r });
+            last = [x, y, r];
+        }
+    };
+    for (const cmd of commands) {
+        if (cmd.type === 'move') {
+            pushPoint(cmd.to[0], cmd.to[1], cmd.r);
+            continue;
+        }
+        if (cmd.type === 'line') {
+            const [x1, y1, r1] = cmd.from;
+            const [x2, y2, r2] = cmd.to;
+            for (let step = 1; step <= samplesPerSegment; step += 1) {
+                const t = step / samplesPerSegment;
+                pushPoint(lerp(x1, x2, t), lerp(y1, y2, t), lerp(r1, r2, t));
+            }
+            continue;
+        }
+        if (cmd.type === 'cubic') {
+            const [x0, y0, r0] = cmd.from;
+            const [x1, y1] = cmd.cp1;
+            const [x2, y2] = cmd.cp2;
+            const [x3, y3, r3] = cmd.to;
+            for (let step = 1; step <= samplesPerSegment; step += 1) {
+                const t = step / samplesPerSegment;
+                pushPoint(cubic(x0, x1, x2, x3, t), cubic(y0, y1, y2, y3, t), lerp(r0, r3, t));
+            }
+            continue;
+        }
+        if (cmd.type === 'quad') {
+            const [x0, y0, r0] = cmd.from;
+            const [cx, cy] = cmd.cp;
+            const [x1, y1, r1] = cmd.to;
+            for (let step = 1; step <= samplesPerSegment; step += 1) {
+                const t = step / samplesPerSegment;
+                pushPoint(quad(x0, cx, x1, t), quad(y0, cy, y1, t), lerp(r0, r1, t));
+            }
+        }
+    }
+    return result;
+}
+function cubic(p0, p1, p2, p3, t) {
+    const it = 1 - t;
+    return it * it * it * p0 + 3 * it * it * t * p1 + 3 * it * t * t * p2 + t * t * t * p3;
+}
+function quad(p0, p1, p2, t) {
+    const it = 1 - t;
+    return it * it * p0 + 2 * it * t * p1 + t * t * p2;
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+function estimateSamplesPerSegment(samples, defined) {
+    const n = Math.min(samples.length, defined.length);
+    let distSum = 0;
+    let distCount = 0;
+    let rSum = 0;
+    let rCount = 0;
+    for (let i = 0; i < n; i++) {
+        if (defined[i]) {
+            rSum += samples[i].r;
+            rCount += 1;
+        }
+        if (i === 0 || !defined[i] || !defined[i - 1])
+            continue;
+        const dx = samples[i].x - samples[i - 1].x;
+        const dy = samples[i].y - samples[i - 1].y;
+        const d = Math.hypot(dx, dy);
+        if (isFinite(d) && d > 0) {
+            distSum += d;
+            distCount += 1;
+        }
+    }
+    const meanDist = distCount ? distSum / distCount : 0;
+    const meanRadius = rCount ? rSum / rCount : 0;
+    const base = meanRadius > 0 ? meanDist / meanRadius : meanDist;
+    // Keep within a reasonable range to avoid excessive subdivision.
+    return Math.max(1, Math.min(32, Math.round(base || 1)));
+}
+export default trailPath;

package/dist/marks/index.d.ts

@@ -45,6 +45,7 @@ export { default as Spike } from './Spike.svelte';
 export { default as Text } from './Text.svelte';
 export { default as TickX } from './TickX.svelte';
 export { default as TickY } from './TickY.svelte';
+export { default as Trail } from './Trail.svelte';
 export { default as Vector } from './Vector.svelte';
 export { default as WaffleX } from './WaffleX.svelte';
 export { default as WaffleY } from './WaffleY.svelte';

package/dist/marks/index.js

@@ -45,6 +45,7 @@ export { default as Spike } from './Spike.svelte';
 export { default as Text } from './Text.svelte';
 export { default as TickX } from './TickX.svelte';
 export { default as TickY } from './TickY.svelte';
+export { default as Trail } from './Trail.svelte';
 export { default as Vector } from './Vector.svelte';
 export { default as WaffleX } from './WaffleX.svelte';
 export { default as WaffleY } from './WaffleY.svelte';

package/dist/types/mark.d.ts

@@ -6,7 +6,7 @@ export type Mark<T> = {
     data: DataRecord<T>[];
     options: T;
 };
-export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'waffleX' | 'waffleY';
+export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'trail' | 'waffleX' | 'waffleY';
 export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontFamily' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'letterSpacing' | 'wordSpacing' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'textTransform' | 'textDecoration' | 'width';
 import type { MouseEventHandler } from 'svelte/elements';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';
@@ -44,6 +44,7 @@ export type BaseMarkProps<T> = Partial<{
     strokeDashoffset: ConstantAccessor<number, T>;
     mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, T>;
     clipPath: string;
+    mask: string;
     imageFilter: ConstantAccessor<string, T>;
     shapeRendering: ConstantAccessor<CSS.Property.ShapeRendering, T>;
     paintOrder: ConstantAccessor<string, T>;

package/dist/types/plot.d.ts

@@ -3,7 +3,7 @@ import type { ColorScheme } from './colorScheme.js';
 import type { GeoProjection } from 'd3-geo';
 import type { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, LegendScaleOptions, PlotScales, RawValue, ScaleOptions, XScaleOptions, YScaleOptions } from './index.js';
 import type { Snippet } from 'svelte';
-import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Image, Line, Link, Pointer, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Vector } from '../marks/index.js';
+import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Image, Line, Link, Pointer, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Trail, Vector } from '../marks/index.js';
 import type WaffleX from '../marks/WaffleX.svelte';
 import type WaffleY from '../marks/WaffleY.svelte';
 export type PlotState = {
@@ -296,6 +296,10 @@ export type PlotDefaults = {
      * default props for tickY marks
      */
     tickY: Partial<Omit<ComponentProps<typeof TickY>, IgnoreDefaults>>;
+    /**
+     * default props for tickY marks
+     */
+    trail: Partial<Omit<ComponentProps<typeof Trail>, IgnoreDefaults>>;
     /**
      * default props for vector marks
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.8.0-pr-282.2",
+    "version": "0.8.1-pr-283.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -54,12 +54,12 @@
     "devDependencies": {
         "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
         "@emotion/css": "^11.13.5",
-        "@shikijs/twoslash": "^3.18.0",
+        "@shikijs/twoslash": "^3.19.0",
         "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/adapter-static": "^3.0.10",
         "@sveltejs/enhanced-img": "^0.9.2",
         "@sveltejs/eslint-config": "^8.3.4",
-        "@sveltejs/kit": "^2.49.1",
+        "@sveltejs/kit": "^2.49.2",
         "@sveltejs/package": "^2.5.7",
         "@sveltejs/vite-plugin-svelte": "6.2.1",
         "@sveltepress/twoslash": "^1.3.2",
@@ -80,8 +80,8 @@
         "@types/geojson": "^7946.0.16",
         "@types/topojson": "^3.2.6",
         "@types/topojson-client": "^3.1.5",
-        "@typescript-eslint/eslint-plugin": "^8.48.1",
-        "@typescript-eslint/parser": "^8.48.1",
+        "@typescript-eslint/eslint-plugin": "^8.49.0",
+        "@typescript-eslint/parser": "^8.49.0",
         "@unocss/extractor-svelte": "^66.5.10",
         "@vite-pwa/sveltekit": "^1.1.0",
         "csstype": "^3.2.3",
@@ -91,27 +91,27 @@
         "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-regexp": "^2.10.0",
-        "eslint-plugin-svelte": "3.13.0",
+        "eslint-plugin-svelte": "3.13.1",
         "jqmath": "^0.4.9",
-        "jsdom": "^27.2.0",
+        "jsdom": "^27.3.0",
         "log-update": "^7.0.2",
         "lru-cache": "^11.2.4",
         "mdast-util-from-markdown": "^2.0.2",
         "mdast-util-gfm": "^3.1.0",
-        "prettier": "^3.7.3",
+        "pixelmatch": "^7.1.0",
+        "pngjs": "^7.0.0",
+        "prettier": "^3.7.4",
         "prettier-plugin-svelte": "^3.4.0",
-        "puppeteer": "^24.31.0",
+        "puppeteer": "^24.32.1",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "remark-math": "^6.0.0",
         "resize-observer-polyfill": "^1.5.1",
-        "sass": "^1.94.2",
-        "shiki": "^3.18.0",
+        "sass": "^1.96.0",
+        "shiki": "^3.19.0",
         "svelte-check": "^4.3.4",
-        "svelte-eslint-parser": "1.4.0",
+        "svelte-eslint-parser": "1.4.1",
         "svelte-highlight": "^7.9.0",
-        "pixelmatch": "^5.3.0",
-        "pngjs": "^7.0.0",
         "svg-path-parser": "^1.1.0",
         "temml": "^0.12.1",
         "topojson-client": "^3.1.0",
@@ -123,9 +123,10 @@
         "uid": "^2.0.2",
         "unist-util-visit": "^5.0.0",
         "unocss": "^66.5.10",
-        "vite": "^7.2.6",
+        "vite": "^7.2.7",
         "vitest": "^4.0.15",
         "vitest-matchmedia-mock": "^2.0.3",
+        "wx-svelte-grid": "^2.4.0",
         "yoctocolors": "^2.1.2"
     },
     "types": "./dist/index.d.ts",