svelteplot 0.8.1 → 0.9.0-pr-311.0

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

@@ -1,3 +1,4 @@
+import { recordizeY } from '../transforms/recordize.js';
 import type { DataRecord, ConstantAccessor, ChannelAccessor } from '../types/index.js';
 declare function $$render<Datum = DataRecord>(): {
     props: Omit<Partial<{
@@ -7,14 +8,14 @@ declare function $$render<Datum = DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeY;
+        dodgeY: recordizeY;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -26,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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRecord } from '../types/index.js';
+import { getPlotDefaults } from '../hooks/plotDefaults.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Omit<Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: getPlotDefaults;
+        dodgeY: getPlotDefaults;
         fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
         stroke: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
@@ -26,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>>;
@@ -73,7 +75,7 @@ declare function $$render<Datum extends DataRecord>(): {
         shape?: "arrow" | "spike" | "arrow-filled" | import("./Vector.svelte").ShapeRenderer;
         children?: import("svelte").Snippet;
         canvas?: boolean;
-    }, "data" | "r" | "length" | "x" | "y" | "rotate"> & {
+    }, "r" | "length" | "x" | "y" | "data" | "rotate"> & {
         data: Datum[];
         x: ChannelAccessor<Datum>;
         y: ChannelAccessor<Datum>;

package/dist/marks/SymbolLegend.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
     import { symbol as d3Symbol } from 'd3-shape';
     import { maybeSymbol } from '../helpers/symbols.js';
-    import type { PlotContext } from '../types/index.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = usePlot();
 
     // TODO: allow styling of legend
 </script>

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

@@ -1,8 +1,23 @@
+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;
+}
 /**
  * The SymbolLegend is an HTML mark that can be placed in the header, footer and overlay
  * snippets. You can activate an implicit SymbolLegend above the chart using the global
  * symbol.legend scale option.
  */
-declare const SymbolLegend: import("svelte").Component<Record<string, never>, {}, "">;
-type SymbolLegend = ReturnType<typeof SymbolLegend>;
+declare const SymbolLegend: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SymbolLegend = InstanceType<typeof SymbolLegend>;
 export default SymbolLegend;

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

@@ -1,6 +1,7 @@
 import type * as CSS from 'csstype';
 import { type Snippet } from 'svelte';
 import type { DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+import { sort } from '../index.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -9,14 +10,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: sort;
+        dodgeY: sort;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -28,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

@@ -25,7 +25,6 @@
     import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
     import type {
-        PlotContext,
         BaseMarkProps,
         ChannelAccessor,
         DataRow,
@@ -37,9 +36,9 @@
     import { isValid } from '../helpers/index.js';
     import { testFilter, parseInset } from '../helpers/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let markProps: TickXMarkProps = $props();
     const DEFAULTS = {

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
+import { recordizeX } from '../index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeX;
+        dodgeY: recordizeX;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -26,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

@@ -24,7 +24,6 @@
     import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
     import type {
-        PlotContext,
         BaseMarkProps,
         ChannelAccessor,
         DataRow,
@@ -36,9 +35,9 @@
     import { isValid } from '../helpers/index.js';
     import { testFilter, parseInset } from '../helpers/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let markProps: TickYMarkProps = $props();
     const DEFAULTS = {

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

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, DataRow, ConstantAccessor } from '../types/index.js';
+import { recordizeY } from '../index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: recordizeY;
+        dodgeY: recordizeY;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -26,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,161 @@
+<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,
+        ScaledDataRecord,
+        CurveName
+    } from '../types';
+    import Mark from '../Mark.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';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+
+    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 plot = usePlot();
+
+    /**
+     * 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({
+                                plot,
+                                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

@@ -29,7 +29,6 @@
         canvas?: boolean;
     }
     import type {
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ChannelAccessor,
@@ -47,6 +46,7 @@
     import { addEventHandlers } from './helpers/events.js';
     import { indexData } from '../transforms/recordize.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     const defaultRadius = 3.5;
 
@@ -72,8 +72,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
     const testFacet = $derived(getTestFacet());
@@ -203,7 +202,7 @@
                                   : `translate(0, ${d.length / 2})`}"
                             {style}
                             {@attach addEventHandlers({
-                                getPlotState,
+                                plot,
                                 options: args,
                                 datum: d?.datum
                             })}

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

@@ -4,6 +4,7 @@ export type ShapeRenderer = {
 };
 import type { DataRecord, ChannelAccessor } from '../types/index.js';
 import { type Snippet } from 'svelte';
+import { sort } from '../index.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
@@ -12,14 +13,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
-        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        dodgeX: sort;
+        dodgeY: sort;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        } | ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
@@ -31,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/WaffleX.svelte

@@ -15,9 +15,9 @@
     import { intervalX, recordizeX, sort, stackX } from '../transforms';
     import type { StackOptions } from '../transforms/stack';
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve';
     import { roundedRect } from '../helpers/roundedRect';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     interface WaffleXMarkProps
         extends BaseMarkProps<Datum>, LinkableMarkProps<Datum>, WaffleOptions<Datum> {
@@ -58,8 +58,7 @@
         ...options
     }: WaffleXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args = $derived(
         stackX(
@@ -96,7 +95,7 @@
             <g class={['waffle-x', className]}>
                 <pattern {...pattern}>
                     {#if symbol}
-                        {@render symbol(rect)}
+                        {@render symbol({ ...rect, style, styleClass, datum: d.datum })}
                     {:else if hasBorderRadius}
                         <path
                             d={roundedRect(rect.x, rect.y, rect.width, rect.height, borderRadius)}