svelteplot 0.8.1 → 0.9.0-pr-309.0

package/dist/marks/WaffleY.svelte

@@ -8,17 +8,16 @@
         ChannelAccessor,
         BaseMarkProps,
         LinkableMarkProps,
-        PlotContext,
         BorderRadius
     } from '../types';
     import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
     import { getPlotDefaults } from '../hooks/plotDefaults';
-    import { getContext } from 'svelte';
     import { intervalY, recordizeY, sort, stackY } from '../transforms';
     import Mark from '../Mark.svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve';
     import { roundedRect } from '../helpers/roundedRect';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     interface WaffleYMarkProps
         extends BaseMarkProps<Datum>, LinkableMarkProps<Datum>, WaffleOptions<Datum> {
@@ -56,8 +55,7 @@
         ...options
     }: WaffleYMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args = $derived(
         stackY(

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

@@ -1,87 +1,6 @@
-import type { DataRecord, ChannelAccessor, LinkableMarkProps } from '../types';
-import { type WaffleOptions } from './helpers/waffle';
+import type { DataRecord } from '../types';
 declare function $$render<Datum extends DataRecord>(): {
-    props: Partial<{
-        filter: import("../types").ConstantAccessor<boolean, Datum>;
-        facet: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types").ConstantAccessor<number, Datum>;
-        dy: import("../types").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types").RawValue, b: import("../types").RawValue) => number) | {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | import("../types").ConstantAccessor<import("../types").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: string;
-        imageFilter: import("../types").ConstantAccessor<string, Datum>;
-        shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
-        paintOrder: import("../types").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").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & LinkableMarkProps<Datum> & WaffleOptions<Datum> & {
-        data?: Datum[];
-        /**
-         * bound to a babd scale
-         */
-        x?: ChannelAccessor<Datum>;
-        /**
-         * bound to a quantitative scale
-         */
-        y?: ChannelAccessor<Datum>;
-        /**
-         * bound to a quantitative scale
-         */
-        y1?: ChannelAccessor<Datum>;
-        /**
-         * bound to a quantitative scale
-         */
-        y2?: ChannelAccessor<Datum>;
-    };
+    props: any;
     exports: {};
     bindings: "";
     slots: {};

package/dist/marks/helpers/AreaCanvas.svelte

@@ -2,17 +2,16 @@
     import type {
         Mark,
         BaseMarkProps,
-        PlotContext,
         ScaledDataRecord,
         UsedScales
     } from '../../types/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { getContext } from 'svelte';
     import { type Area } from 'd3-shape';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         mark,
@@ -26,8 +25,7 @@
         areaPath: Area<ScaledDataRecord>;
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     function maybeOpacity(value: unknown) {
         return value == null ? 1 : +value;

package/dist/marks/helpers/Box.svelte

@@ -0,0 +1,271 @@
+<!-- @component
+    Internal shared box plot implementation for BoxX and BoxY
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    type Orientation = 'x' | 'y';
+
+    interface BoxMarkProps extends Pick<
+        BaseMarkProps<Datum>,
+        'class' | 'fill' | 'stroke' | 'fx' | 'fy'
+    > {
+        data: Datum[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        /**
+         * Custom sort order for grouped box plot data
+         */
+        sort?: 'min' | 'max' | 'median' | 'p25' | 'p75' | ((d: Datum) => RawValue);
+        /**
+         * Options for the rule marks that represent the min/max range
+         */
+        rule: Record<string, ChannelAccessor<Datum>>;
+        /**
+         * Options for the bar marks that represent the IQR range
+         */
+        bar: Record<string, ChannelAccessor<Datum>>;
+        /**
+         * Options for the tick marks that represent the median
+         */
+        tickMedian: Record<string, ChannelAccessor<Datum>> | boolean;
+        /**
+         * Options for the tick marks that represent the min/max range
+         */
+        tickMinMax: Record<string, ChannelAccessor<Datum>> | boolean;
+        /**
+         * Options for the dot marks that represent the outliers
+         */
+        dot: Record<string, ChannelAccessor<Datum>>;
+        orientation: Orientation;
+    }
+
+    import GroupMultiple from './GroupMultiple.svelte';
+    import { groupX, groupY, BarY, TickY, RuleX, BarX, TickX, RuleY, Dot } from '../../index.js';
+    import { resolveChannel } from '../../helpers/resolve.js';
+    import type { BaseMarkProps, ChannelAccessor, DataRecord, RawValue } from '../../types';
+    import { IS_SORTED } from '../../transforms/sort';
+
+    let markProps: BoxMarkProps = $props();
+
+    const {
+        data = [{}],
+        bar,
+        rule,
+        tickMedian,
+        tickMinMax,
+        dot,
+        x,
+        y,
+        sort,
+        fx,
+        fy,
+        fill,
+        stroke,
+        orientation,
+        class: className = ''
+    }: BoxMarkProps = $derived(markProps);
+
+    const groupFn = $derived(orientation === 'y' ? groupX : groupY);
+    const BarMark = $derived(orientation === 'y' ? BarY : BarX);
+    const RuleMark = $derived(orientation === 'y' ? RuleX : RuleY);
+    const TickMark = $derived(orientation === 'y' ? TickY : TickX);
+
+    // the channels as if this would be a BoxX
+    const xChannel = $derived(orientation === 'y' ? y : x);
+    const yChannel = $derived(orientation === 'y' ? x : y);
+    const xProp = $derived(orientation === 'x' ? 'x' : 'y');
+    const x1Prop = $derived(`${xProp}1`);
+    const x2Prop = $derived(`${xProp}2`);
+    const yProp = $derived(orientation === 'x' ? 'y' : 'x');
+
+    const { data: grouped, ...groupChannels } = $derived(
+        groupFn(
+            {
+                data: data.filter((d) => resolveChannel(xProp, d, { x, y }) != null),
+                x,
+                y,
+                [x1Prop]: xChannel,
+                [x2Prop]: xChannel,
+                fx,
+                fy
+            },
+            { [xProp]: 'median', [x1Prop]: 'p25', [x2Prop]: 'p75', fill: (rows) => rows }
+        )
+    );
+
+    const X = Symbol('x'),
+        Y = Symbol('y'),
+        FX = Symbol('fx'),
+        FY = Symbol('fy'),
+        P25 = Symbol('p25'),
+        P75 = Symbol('p75'),
+        MEDIAN = Symbol('median'),
+        MIN = Symbol('min'),
+        MAX = Symbol('max'),
+        OUTLIERS = Symbol('outliers'),
+        SORT_REF = Symbol('sortRef');
+
+    const facets = $derived({
+        ...(fx != null && { fx: FX }),
+        ...(fy != null && { fy: FY })
+    });
+
+    const sortProps = { [IS_SORTED]: true };
+
+    const compareValues = (a: RawValue, b: RawValue) =>
+        (typeof a === 'string' && typeof b === 'string'
+            ? a.localeCompare(b)
+            : a > b
+              ? 1
+              : a < b
+                ? -1
+                : 0) || 0;
+
+    const boxData = $derived.by(() => {
+        const boxes = grouped
+            .map((row) => {
+                const medianKey = groupChannels[xProp];
+                const p25Key = groupChannels[x1Prop];
+                const p75Key = groupChannels[x2Prop];
+                const groupKey = groupChannels[yProp];
+
+                const iqr = row[p75Key] - row[p25Key];
+                const whisker = iqr * 1.5;
+                const lower = row[p25Key] - whisker;
+                const upper = row[p75Key] + whisker;
+                const data = row[groupChannels.fill].map((d) => ({
+                    ...d,
+                    [orientation === 'y' ? Y : X]: resolveChannel(xProp, d, {
+                        x,
+                        y
+                    })
+                }));
+                const valueSym = orientation === 'y' ? Y : X;
+                const groupSym = orientation === 'y' ? X : Y;
+                const outliers = data.filter((d) => d[valueSym] < lower || d[valueSym] > upper);
+                const inside = data
+                    .filter((d) => d[valueSym] >= lower && d[valueSym] <= upper)
+                    .sort((a, b) => a[valueSym] - b[valueSym]);
+
+                return {
+                    ...data[0],
+                    [SORT_REF]: row[groupChannels.fill]?.[0],
+                    [groupSym]: row[groupKey],
+                    [P25]: row[p25Key],
+                    [MEDIAN]: row[medianKey],
+                    [P75]: row[p75Key],
+                    [MIN]: inside.length ? inside[0][valueSym] : null,
+                    [MAX]: inside.length ? inside.at(-1)[valueSym] : null,
+                    [FX]: resolveChannel('fx', data[0], { fx }, null),
+                    [FY]: resolveChannel('fy', data[0], { fy }, null),
+                    [OUTLIERS]: outliers
+                };
+            })
+            .filter(Boolean);
+
+        const stripSortRef = ({ [SORT_REF]: _, ...rest }) => rest;
+
+        if (!sort) return boxes.map(stripSortRef);
+
+        const [sort_, direction] = maybeSort(sort);
+
+        const sortAccessor =
+            typeof sort === 'function'
+                ? (d) => sort(d[SORT_REF])
+                : (d) => {
+                      switch (sort_) {
+                          case 'min':
+                              return d[MIN];
+                          case 'max':
+                              return d[MAX];
+                          case 'p25':
+                              return d[P25];
+                          case 'p75':
+                              return d[P75];
+                          case 'median':
+                          default:
+                              return d[MEDIAN];
+                      }
+                  };
+
+        return boxes
+            .toSorted(
+                (a, b) =>
+                    compareValues(sortAccessor(a), sortAccessor(b)) *
+                    direction *
+                    (orientation === 'x' ? -1 : 1)
+            )
+            .map(stripSortRef);
+    });
+
+    function maybeSort(
+        sort: string | ((d: Datum) => RawValue) | undefined
+    ): [string | ((d: Datum) => RawValue), 1 | -1] {
+        if (typeof sort !== 'string') return [sort, 1];
+        if (sort.startsWith('-')) {
+            return [sort.slice(1), -1];
+        }
+        return [sort, 1];
+    }
+
+    const valueSymbol = $derived(orientation === 'y' ? Y : X);
+    const groupSymbol = $derived(orientation === 'y' ? X : Y);
+    const length = $derived(className ? 2 : grouped.length);
+    const baseClass = $derived(`box-${orientation} ${className || ''}`);
+</script>
+
+<GroupMultiple class={baseClass} {length}>
+    <RuleMark
+        data={boxData}
+        {...{ [yProp]: groupSymbol, [x1Prop]: MIN, [x2Prop]: P25 }}
+        {stroke}
+        {...rule || {}}
+        {...facets}
+        {...sortProps} />
+    <RuleMark
+        data={boxData}
+        {...{ [yProp]: groupSymbol, [x1Prop]: P75, [x2Prop]: MAX }}
+        {stroke}
+        {...rule || {}}
+        {...facets} />
+    <BarMark
+        data={boxData}
+        {...{ [yProp]: groupSymbol, [x1Prop]: P25, [x2Prop]: P75 }}
+        {fill}
+        {stroke}
+        {...facets}
+        {...bar || {}} />
+    {#if tickMedian}
+        <TickMark
+            data={boxData}
+            {...{ [yProp]: groupSymbol, [xProp]: MEDIAN }}
+            {...facets}
+            {stroke}
+            strokeWidth={2}
+            {...typeof tickMedian === 'object' ? tickMedian : {}} />
+    {/if}
+    {#if tickMinMax}
+        <TickMark
+            data={boxData}
+            {...{ [yProp]: groupSymbol, [xProp]: MIN }}
+            {stroke}
+            {...facets}
+            inset="20%"
+            {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
+        <TickMark
+            data={boxData}
+            {...{ [yProp]: groupSymbol, [xProp]: MAX }}
+            {stroke}
+            {...facets}
+            inset="20%"
+            {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
+    {/if}
+    <Dot
+        data={boxData.map((d) => d[OUTLIERS]).flat()}
+        {x}
+        {y}
+        {fx}
+        {fy}
+        {fill}
+        {stroke}
+        {...dot || {}} />
+</GroupMultiple>

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

@@ -0,0 +1,55 @@
+import type { ChannelAccessor, DataRecord, RawValue } from '../../types';
+declare function $$render<Datum extends DataRecord>(): {
+    props: Pick<BaseMarkProps<Datum>, "fill" | "stroke" | "fx" | "fy" | "class"> & {
+        data: Datum[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        /**
+         * Custom sort order for grouped box plot data
+         */
+        sort?: "min" | "max" | "median" | "p25" | "p75" | ((d: Datum) => RawValue);
+        /**
+         * Options for the rule marks that represent the min/max range
+         */
+        rule: Record<string, ChannelAccessor<Datum>>;
+        /**
+         * Options for the bar marks that represent the IQR range
+         */
+        bar: Record<string, ChannelAccessor<Datum>>;
+        /**
+         * Options for the tick marks that represent the median
+         */
+        tickMedian: Record<string, ChannelAccessor<Datum>> | boolean;
+        /**
+         * Options for the tick marks that represent the min/max range
+         */
+        tickMinMax: Record<string, ChannelAccessor<Datum>> | boolean;
+        /**
+         * Options for the dot marks that represent the outliers
+         */
+        dot: Record<string, ChannelAccessor<Datum>>;
+        orientation: "x" | "y";
+    };
+    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']>;
+}
+/** Internal shared box plot implementation for BoxX and BoxY */
+declare const Box: $$IsomorphicComponent;
+type Box<Datum extends DataRecord> = InstanceType<typeof Box<Datum>>;
+export default Box;

package/dist/marks/helpers/CanvasLayer.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
-    import type { PlotContext } from '../../types/plot';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { MediaQuery } from 'svelte/reactivity';
     import type { Attachment } from 'svelte/attachments';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     const darkMode = new MediaQuery('prefers-color-scheme: dark');
     let colorScheme = $state();
@@ -26,8 +25,7 @@
 
     let restProps: {} = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 </script>
 
 <!-- 

package/dist/marks/helpers/DotCanvas.svelte

@@ -3,20 +3,18 @@
         PlotState,
         Mark,
         BaseMarkProps,
-        ScaledDataRecord,
-        PlotContext
+        ScaledDataRecord
     } from '../../types/index.js';
     import { resolveProp } from '../../helpers/resolve.js';
     import { maybeSymbol } from '../../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
     import type { Attachment } from 'svelte/attachments';
     import CanvasLayer from './CanvasLayer.svelte';
-    import { getContext } from 'svelte';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let {
         mark,

package/dist/marks/helpers/GeoCanvas.svelte

@@ -2,18 +2,17 @@
     import type {
         Mark,
         BaseMarkProps,
-        PlotContext,
         ScaledDataRecord,
         UsedScales
     } from '../../types/index.js';
     import { CSS_VAR } from '../../constants.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { getContext } from 'svelte';
     import { type GeoPath } from 'd3-geo';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { GEOJSON_PREFER_STROKE } from '../../helpers/index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         mark,
@@ -27,8 +26,7 @@
         usedScales: UsedScales;
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     function maybeOpacity(value) {
         return value == null ? 1 : +value;

package/dist/marks/helpers/LineCanvas.svelte

@@ -2,17 +2,16 @@
     import type {
         Mark,
         BaseMarkProps,
-        PlotContext,
         ScaledDataRecord,
         UsedScales
     } from '../../types/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { getContext } from 'svelte';
     import { type Line } from 'd3-shape';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         mark,
@@ -27,8 +26,7 @@
         groupByKey?: unknown;
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     function maybeOpacity(value: unknown) {
         return value == null ? 1 : +value;

package/dist/marks/helpers/LinearGradientX.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from '../../index.js';
+    import type { RawValue } from '../../index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         id,
@@ -10,8 +10,7 @@
         stops: { x: RawValue; color: string }[];
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const projectedStops = $derived(
         stops

package/dist/marks/helpers/LinearGradientY.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from '../../index.js';
+    import type { RawValue } from '../../index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         id,
@@ -10,8 +10,7 @@
         stops: { y: RawValue; color: string }[];
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const projectedStops = $derived(
         stops

package/dist/marks/helpers/MarkerPath.svelte

@@ -11,11 +11,10 @@
         ConstantAccessor,
         DataRecord,
         Mark,
-        PlotContext,
         PlotScales
     } from '../../types/index.js';
     import { addEventHandlers } from './events.js';
-    import { getContext } from 'svelte';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     type MarkerPathProps = BaseMarkProps<Datum> & {
         /**
@@ -78,7 +77,7 @@
 
     const id = randomId();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = usePlot();
 
     const points = $derived(text && d != null ? d.split(/[LMC]/).slice(1) : []);
     const hasPath = $derived(points.length > 0);
@@ -96,7 +95,7 @@
     class={className}
     stroke-width={strokeWidth_}
     {@attach addEventHandlers({
-        getPlotState,
+        plot,
         options: mark.options,
         datum: datum
     })}>
@@ -127,7 +126,7 @@
         {d}
         {style}
         {@attach addEventHandlers({
-            getPlotState,
+            plot,
             options: mark.options,
             datum: datum
         })} />