svelteplot 0.8.1 → 0.9.0-pr-311.0

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

@@ -1,88 +1,6 @@
-import type { DataRecord, ChannelAccessor, ScaledDataRecord, UsedScales } from '../types/index.js';
-import type { Snippet } from 'svelte';
+import type { DataRecord } from '../types/index.js';
 declare function $$render<Datum extends DataRecord>(): {
-    props: Partial<{
-        filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
-        facet: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: 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>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        class: string;
-        style: string;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & {
-        data?: Datum[];
-        type?: string;
-        x?: ChannelAccessor<Datum>;
-        x1?: ChannelAccessor<Datum>;
-        x2?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        y1?: ChannelAccessor<Datum>;
-        y2?: ChannelAccessor<Datum>;
-        r?: ChannelAccessor<Datum>;
-        mark?: Snippet<[{
-            record: ScaledDataRecord<Datum>;
-            index: number;
-            usedScales: UsedScales;
-        }]>;
-        marks?: Snippet<[{
-            records: ScaledDataRecord<Datum>[];
-            usedScales: UsedScales;
-        }]>;
-    };
+    props: any;
     exports: {};
     bindings: "";
     slots: {};

package/dist/marks/CustomMarkHTML.svelte

@@ -23,21 +23,16 @@
         class: string | null;
         children: Snippet<{ datum: Datum; x: number; y: number }>;
     }
-    import { getContext, type Snippet } from 'svelte';
-    import type {
-        ChannelAccessor,
-        ConstantAccessor,
-        DataRecord,
-        PlotContext
-    } from '../types/index.js';
-
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    import { type Snippet } from 'svelte';
+    import type { ChannelAccessor, ConstantAccessor, DataRecord } from '../types/index.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     import { resolveChannel } from '../helpers/resolve.js';
     import { projectX, projectY, projectXY } from '../helpers/scales.js';
     import { isValid } from '../helpers/index.js';
 
+    const plot = usePlot();
+
     let {
         data = [{} as Datum],
         x,

package/dist/marks/DifferenceY.svelte

@@ -49,19 +49,17 @@
         BaseMarkProps,
         ChannelAccessor,
         CurveName,
-        DataRecord,
-        PlotContext
+        DataRecord
     } from '../types/index.js';
     import { Line, Area } from './index.js';
     import { randomId, coalesce } from '../helpers/index.js';
-    import { getContext } from 'svelte';
     import { extent, max, min } from 'd3-array';
     import { resolveChannel } from '../helpers/resolve.js';
     import type { CurveFactory } from 'd3-shape';
     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: DifferenceYMarkProps = $props();
 

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

@@ -1,69 +1,7 @@
 import type { ChannelAccessor, CurveName, DataRecord } from '../types/index.js';
 import type { CurveFactory } from 'd3-shape';
 declare function $$render<Datum extends DataRecord>(): {
-    props: Omit<Partial<{
-        filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
-        facet: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: 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>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        class: string;
-        style: string;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "fill" | "fillOpacity"> & {
+    props: Omit<BaseMarkProps<Datum>, "fill" | "fillOpacity"> & {
         data: Datum[];
         x1: ChannelAccessor<Datum>;
         /**

package/dist/marks/Dot.svelte

@@ -12,9 +12,8 @@
         dotClass?: ConstantAccessor<string, Datum>;
     }
 
-    import { getContext, type Snippet } from 'svelte';
+    import { type Snippet } from 'svelte';
     import type {
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
@@ -33,6 +32,7 @@
     import Anchor from './helpers/Anchor.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { isOrdinalScale } from '../helpers/scales.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     const DEFAULTS = {
         ...getPlotDefaults().dot
@@ -48,8 +48,7 @@
         ...options
     }: DotMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     function getSymbolPath(symbolType, size) {
         return d3Symbol(maybeSymbol(symbolType), size)();
@@ -113,7 +112,7 @@
                                 ]}
                                 {style}
                                 {@attach addEventHandlers({
-                                    getPlotState,
+                                    plot,
                                     options: args,
                                     datum: d?.datum
                                 })} />

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

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

@@ -1,3 +1,4 @@
+import { recordizeX } from '../index.js';
 import type { DataRow } from '../types/index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: Omit<Partial<{
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: import("../types/channel").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: recordizeX;
+        dodgeY: recordizeX;
         fill: import("../types/channel").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: import("../types/channel").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 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>>;
@@ -70,7 +72,7 @@ declare function $$render<Datum extends DataRow>(): {
         symbol?: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>> | import("svelte").Snippet<[number, string]>;
         canvas?: boolean;
         dotClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-    }, "data" | "y"> & {
+    }, "y" | "data"> & {
         data: Datum[];
     };
     exports: {};

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

@@ -1,3 +1,4 @@
+import { recordizeY } from '../index.js';
 import type { DataRow } from '../types/index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: Omit<Partial<{
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: import("../types/channel").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: recordizeY;
+        dodgeY: recordizeY;
         fill: import("../types/channel").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: import("../types/channel").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 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>>;
@@ -70,7 +72,7 @@ declare function $$render<Datum extends DataRow>(): {
         symbol?: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>> | import("svelte").Snippet<[number, string]>;
         canvas?: boolean;
         dotClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-    }, "data" | "x"> & {
+    }, "x" | "data"> & {
         data: Datum[];
     };
     exports: {};

package/dist/marks/Frame.svelte

@@ -21,17 +21,12 @@
         insetBottom?: number;
     }
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import type {
-        PlotContext,
-        BaseRectMarkProps,
-        LinkableMarkProps,
-        DataRecord
-    } from '../types/index.js';
+    import type { BaseRectMarkProps, LinkableMarkProps, DataRecord } from '../types/index.js';
     import type { BaseMarkProps } from '../types/index.js';
     import RectPath from './helpers/RectPath.svelte';
     import { resolveProp } from '../helpers/resolve';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: FrameMarkProps = $props();
 
@@ -61,8 +56,7 @@
     const dx = $derived(resolveProp(options.dx, null, 0) || 0);
     const dy = $derived(resolveProp(options.dy, null, 0) || 0);
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 </script>
 
 <Mark type="frame" {automatic}>

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

@@ -1,4 +1,5 @@
 import type { BaseRectMarkProps, LinkableMarkProps, DataRecord } from '../types/index.js';
+import { resolveProp } from '../helpers/resolve';
 declare function $$render<Datum extends DataRecord>(): {
     props: Omit<Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: import("../types/channel").ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: resolveProp;
+        dodgeY: resolveProp;
         fill: import("../types/channel").ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        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, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: import("../types/channel").ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
@@ -26,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>;
@@ -62,7 +64,7 @@ declare function $$render<Datum extends DataRecord>(): {
         class: string;
         style: string;
         cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "fill" | "fillOpacity" | "stroke" | "strokeOpacity"> & BaseRectMarkProps<Datum> & LinkableMarkProps<Datum> & {
+    }>, "fill" | "stroke" | "fillOpacity" | "strokeOpacity"> & BaseRectMarkProps<Datum> & LinkableMarkProps<Datum> & {
         fill?: string;
         stroke?: string;
         fillOpacity?: number;

package/dist/marks/Geo.svelte

@@ -21,11 +21,10 @@
          * radius for point features
          */
         r?: ChannelAccessor<Datum>;
+        svgFilter?: ConstantAccessor<string | undefined, Datum>;
     }
-    import { getContext } from 'svelte';
     import type {
         DataRecord,
-        PlotContext,
         BaseMarkProps,
         ConstantAccessor,
         LinkableMarkProps,
@@ -42,9 +41,9 @@
     import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
     import Anchor from './helpers/Anchor.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let markProps: GeoMarkProps = $props();
 
@@ -111,8 +110,9 @@
                                 d={path(geometry)}
                                 {style}
                                 class={[styleClass]}
+                                filter={resolveProp(args.svgFilter, d.datum, undefined)}
                                 {@attach addEventHandlers({
-                                    getPlotState,
+                                    plot,
                                     options: args,
                                     datum: d?.datum
                                 })}>

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

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

@@ -8,15 +8,8 @@
         y1?: ChannelAccessor<Datum>;
         y2?: ChannelAccessor<Datum>;
     }
-    import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type {
-        PlotContext,
-        BaseMarkProps,
-        RawValue,
-        DataRecord,
-        ChannelAccessor
-    } from '../types/index.js';
+    import type { BaseMarkProps, RawValue, DataRecord, ChannelAccessor } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
@@ -24,6 +17,7 @@
     import isDataRecord from '../helpers/isDataRecord';
     import { INDEX } from '../constants';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: GridXMarkProps = $props();
 
@@ -41,8 +35,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const autoTickCount = $derived(
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))

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

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

@@ -8,14 +8,14 @@
         x1?: ChannelAccessor<Datum>;
         x2?: ChannelAccessor<Datum>;
     }
-    import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type { PlotContext, BaseMarkProps, RawValue, ChannelAccessor } from '../types/index.js';
+    import type { BaseMarkProps, RawValue, ChannelAccessor } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: GridYMarkProps = $props();
 
@@ -33,8 +33,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const autoTickCount = $derived(
         Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))