svelteplot 0.8.1 → 0.9.0-pr-311.0

package/README.md

@@ -1,11 +1,11 @@
 # SveltePlot
 
-![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
-
-SveltePlot is a visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) ideas. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.
+![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg) [![Netlify Status](https://api.netlify.com/api/v1/badges/81163b24-76c1-4256-833c-919284f211ed/deploy-status)](https://app.netlify.com/projects/svelteplot/deploys)
 
 <img src="static/logo.svg" alt="SveltePlot logo" width="401" />
 
+SveltePlot is a [Svelte](https://svelte.dev/)-native visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) principle. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.
+
 ## Development
 
 Clone the repo and install dependencies:
@@ -46,3 +46,4 @@ pnpm vi:report
 ```
 
 To see the differences side by side you can open http://localhost:5173/\_\_vr/report.html
+

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

@@ -1,4 +1,5 @@
 import { type Snippet } from 'svelte';
+import { CHANNEL_SCALE } from './constants.js';
 import type { ScaledChannelName, MarkType, DataRecord, ChannelAccessor, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types/index.js';
 import { getUsedScales } from './helpers/scales.js';
 declare function $$render<Datum extends DataRecord>(): {
@@ -9,14 +10,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: CHANNEL_SCALE;
+        dodgeY: CHANNEL_SCALE;
         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>;
@@ -28,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

@@ -13,4 +13,6 @@ export declare const CSS_COLOR_MIX: RegExp;
 export declare const CSS_COLOR_CONTRAST: RegExp;
 export declare const CSS_RGBA: RegExp;
 export declare const CSS_URL: RegExp;
-export declare const INDEX: unique symbol;
+export declare const INDEX: any;
+export declare const PI: number;
+export declare const TAU: number;

package/dist/constants.js

@@ -86,8 +86,15 @@ export const VALID_SCALE_TYPES = {
         'quantile',
         'quantize',
         'threshold'
-    ])
-    // ...
+    ]),
+    symbol: new Set(['categorical', 'ordinal']),
+    opacity: new Set(['linear', 'log', 'symlog', 'sqrt', 'pow']),
+    r: new Set(['linear', 'log', 'symlog', 'sqrt', 'pow']),
+    length: new Set(['linear', 'log', 'symlog', 'sqrt', 'pow']),
+    fx: new Set(['band']),
+    fy: new Set(['band']),
+    // projection is a special type not mapping to a D3 scale
+    projection: new Set()
 };
 /**
  * Map of all scaled channels
@@ -117,6 +124,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/core/Plot.svelte

@@ -31,6 +31,7 @@
     import { CHANNEL_SCALE, SCALES } from '../constants.js';
     import { getPlotDefaults, setPlotDefaults } from '../hooks/plotDefaults.js';
     import { maybeNumber } from '../helpers/index.js';
+    import { setPlot, usePlot } from '../hooks/usePlot.svelte.js';
 
     // automatic margins can be applied by the marks, registered
     // with their respective unique identifier as keys
@@ -261,11 +262,10 @@
     let facetWidth: number | null = $state(null);
     let facetHeight: number | null = $state(null);
 
-    // eslint-disable-next-line svelte/prefer-writable-derived
-    let plotState: PlotState = $state(computePlotState());
+    let plotState = setPlot(computePlotState());
 
     $effect(() => {
-        plotState = computePlotState();
+        plotState.update(computePlotState());
     });
 
     function computePlotState() {
@@ -337,7 +337,7 @@
             if (facetHeight !== h) facetHeight = h;
         },
         updatePlotState() {
-            plotState = computePlotState();
+            plotState.update(computePlotState());
         }
     });
 

package/dist/helpers/autoScales.d.ts

@@ -9,7 +9,7 @@ export declare function autoScale({ name, type, domain, scaleOptions, plotOption
     plotHeight: number;
     plotHasFilledDotMarks: boolean;
     plotDefaults: PlotDefaults;
-}): Record<string, (v: any) => void>;
+}): (val: any) => any;
 export declare function autoScaleColor({ type, domain, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks, plotDefaults }: {
     name: ScaleName;
     type: ScaleType;

package/dist/helpers/callWithProps.d.ts

@@ -1,8 +1,6 @@
 import type { RawValue } from '../types/index.js';
-type Setter = (v: any) => void;
 /**
  * Helper function to call a D3 "function class" while also calling
  * property setter functions on the result.
  */
-export default function (d3func: () => Record<string, Setter>, args: RawValue[], props?: Record<string, RawValue>): Record<string, Setter>;
-export {};
+export default function <T extends object>(d3func: (...args: RawValue[]) => T, args?: RawValue[], props?: Record<string, RawValue>): T;

package/dist/helpers/callWithProps.js

@@ -2,12 +2,14 @@
  * Helper function to call a D3 "function class" while also calling
  * property setter functions on the result.
  */
-export default function (d3func, args, props = {}) {
+export default function (d3func, args = [], props = {}) {
     const res = d3func(...args);
+    const resWithKeys = res;
     for (const [key, val] of Object.entries(props)) {
-        if (typeof res[key] !== 'function')
+        const setter = resWithKeys[key];
+        if (typeof setter !== 'function')
             throw new Error(`function ${key} does not exist`);
-        res[key](val);
+        setter(val);
     }
     return res;
 }

package/dist/helpers/colors.d.ts

@@ -1,13 +1,10 @@
-import { interpolateBrBG } from 'd3-scale-chromatic';
 import type { ColorScheme } from '../types/index.js';
-export declare const categoricalSchemes: Map<string, readonly string[]>;
-export declare function isCategoricalScheme(scheme: string): boolean;
-type SchemeGetter = (n: number) => readonly string[];
-export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
-export declare function ordinalScheme(scheme: string): SchemeGetter | undefined;
-export declare function ordinalRange(scheme: string, length: number): readonly string[] | undefined;
-export declare function maybeBooleanRange(domain: boolean[], scheme?: string): unknown[] | undefined;
-export declare function isQuantitativeScheme(scheme: string): boolean;
-export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
-export declare function isDivergingScheme(scheme: string): boolean;
-export {};
+export declare const categoricalSchemes: any;
+export declare function isCategoricalScheme(scheme: string): any;
+export declare function isOrdinalScheme(scheme: ColorScheme): any;
+export declare function ordinalScheme(scheme: string): any;
+export declare function ordinalRange(scheme: string, length: number): any;
+export declare function maybeBooleanRange(domain: boolean[], scheme?: string): any[] | undefined;
+export declare function isQuantitativeScheme(scheme: string): any;
+export declare function quantitativeScheme(scheme: string): any;
+export declare function isDivergingScheme(scheme: string): any;

package/dist/helpers/facets.d.ts

@@ -9,4 +9,4 @@ import type { GenericMarkOptions, Mark, RawValue } from '../types/index.js';
  * @param fyValues y facet domain
  * @returns
  */
-export declare function getEmptyFacets(marks: Mark<GenericMarkOptions>[], fxValues: RawValue[], fyValues: RawValue[]): Map<RawValue, Map<RawValue, boolean>>;
+export declare function getEmptyFacets(marks: Mark<GenericMarkOptions>[], fxValues: RawValue[], fyValues: RawValue[]): any;

package/dist/helpers/getBaseStyles.d.ts

@@ -1,9 +1,7 @@
 import type { Channels } from '../types/index.js';
 import type { DataRow } from '../types/index.js';
-export declare function getBaseStylesObject(datum: DataRow, props: Partial<Channels>): {
-    [k: string]: string | number;
-};
-export default function (datum: DataRow, props: Partial<Channels>): string;
+export declare function getBaseStylesObject(datum: DataRow, props: Partial<Channels>): any;
+export default function (datum: DataRow, props: Partial<Channels>): any;
 export declare function maybeToPixel(cssKey: string, value: string | number): string | number;
 export declare function maybeFromPixel(value: string | number): string | number;
 export declare function maybeFromRem(value: string | number, rootFontSize?: number): string | number;

package/dist/helpers/index.d.ts

@@ -3,8 +3,8 @@ import type { Snippet } from 'svelte';
 /**
  * Returns first argument that is not null or undefined
  */
-export declare function coalesce(...args: (RawValue | undefined | null)[]): string | number | boolean | symbol | object | null;
-export declare function testFilter<T>(datum: T, options: Channels<T>): true | T | null;
+export declare function coalesce(...args: (RawValue | undefined | null)[]): any;
+export declare function testFilter<T>(datum: T, options: Channels<T>): any;
 export declare function randomId(): string;
 export declare function isSnippet(value: unknown): value is Snippet;
 export declare function isValid(value: RawValue | undefined): value is number | Date | string;
@@ -15,4 +15,4 @@ export declare const POSITION_CHANNELS: Set<ChannelName>;
 export declare function parseInset(inset: number | string, width: number): number;
 export declare function omit<T extends {}, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
 export declare function identity<T>(x: T): T;
-export declare const GEOJSON_PREFER_STROKE: Set<string>;
+export declare const GEOJSON_PREFER_STROKE: any;

package/dist/helpers/projection.js

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

package/dist/helpers/reduce.d.ts

@@ -4,7 +4,7 @@ type ReducerOption = ReducerName | ReducerFunc;
 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 export type ReducerPercentile = (`p${Digit}${Digit}` & Record<never, never>) | 'p25' | 'p50' | 'p75';
 export type ReducerName = 'count' | 'deviation' | 'difference' | 'first' | 'last' | 'max' | 'mean' | 'median' | 'min' | 'mode' | 'ratio' | 'sum' | 'variance' | ReducerPercentile;
-export declare const Reducer: Record<ReducerName, ReducerFunc>;
+export declare const Reducer: any;
 export declare function mayberReducer(r: ReducerOption): ReducerFunc;
 export declare function reduceOutputs(newDatum: DataRecord, data: DataRecord[], options: Record<ChannelName, ReducerOption>, outputs: Iterable<ChannelName>, channels: Channels, newChannels: Channels): void;
 export {};

package/dist/helpers/scales.d.ts

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types/index.js';
+import type { GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, UsedScales } from '../types/index.js';
 /**
  * compute the plot scales
  */
@@ -8,19 +8,19 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
     domain: number[];
     range: number[];
     fn: (() => string) | (() => number);
-    skip: Map<any, any>;
+    skip: any;
     isDummy: boolean;
     manualActiveMarks?: undefined;
     uniqueScaleProps?: undefined;
     autoTitle?: undefined;
 } | {
     type: ScaleType;
-    domain: RawValue[] | [undefined, undefined];
+    domain: any;
     range: any;
     fn: any;
-    skip: Map<ScaledChannelName, Set<symbol>>;
+    skip: any;
     manualActiveMarks: number;
-    uniqueScaleProps: Set<ChannelAccessor>;
+    uniqueScaleProps: any;
     autoTitle: string | null;
     isDummy?: undefined;
 };
@@ -36,8 +36,8 @@ export declare function inferScaleType(name: ScaleName, dataValues: RawValue[],
  * not. That's what this function is used for.
  */
 export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): UsedScales;
-export declare function looksLikeANumber(input: string | number): boolean;
+export declare function looksLikeANumber(input: string | number): any;
 export declare function projectXY(scales: PlotScales, x: RawValue, y: RawValue, useXScale?: boolean, useYScale?: boolean): [number, number];
 export declare function projectX(channel: 'x' | 'x1' | 'x2', scales: PlotScales, value: RawValue): number;
 export declare function projectY(channel: 'y' | 'y1' | 'y2', scales: PlotScales, value: RawValue): number;
-export declare function isOrdinalScale(scaleType: ScaleType): scaleType is "ordinal" | "point" | "band" | "categorical" | "threshold";
+export declare function isOrdinalScale(scaleType: ScaleType): scaleType is "point" | "ordinal" | "band" | "categorical" | "threshold";

package/dist/helpers/symbols.d.ts

@@ -1,5 +1,5 @@
 import { type SymbolType } from 'd3-shape';
 export declare const sqrt3: number;
 export declare const sqrt4_3: number;
-export declare function isSymbol(value: string | SymbolType): boolean;
-export declare function maybeSymbol(symbol: SymbolType | string): SymbolType;
+export declare function isSymbol(value: string | SymbolType): any;
+export declare function maybeSymbol(symbol: SymbolType | string): any;

package/dist/helpers/time.d.ts

@@ -1,6 +1,6 @@
-export declare const durations: Map<string, number>;
-export declare const intervalDuration: unique symbol;
-export declare const intervalType: unique symbol;
+export declare const durations: any;
+export declare const intervalDuration: any;
+export declare const intervalType: any;
 export declare function parseTimeInterval(input: string): [string, number];
 export declare function maybeTimeInterval(input: string): any;
 export declare function maybeUtcInterval(input: string): any;

package/dist/helpers/typeChecks.d.ts

@@ -1,10 +1,10 @@
 import type { RawValue } from '../types/index.js';
-export declare function isBooleanOrNull(v: RawValue): v is boolean;
+export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDate(v: RawValue): v is Date;
-export declare function isDateOrNull(v: RawValue | null | undefined): v is Date | null | undefined;
-export declare function isNumberOrNull(v: RawValue | null | undefined): boolean;
-export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): boolean;
-export declare function isStringOrNull(v: RawValue | null | undefined): v is string | null | undefined;
-export declare function isSymbolOrNull(v: RawValue | null | undefined): boolean;
-export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
-export declare function isOpacityOrNull(v: RawValue): boolean;
+export declare function isDateOrNull(v: RawValue | null | undefined): boolean;
+export declare function isNumberOrNull(v: RawValue | null | undefined): any;
+export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): any;
+export declare function isStringOrNull(v: RawValue | null | undefined): boolean;
+export declare function isSymbolOrNull(v: RawValue | null | undefined): any;
+export declare function isColorOrNull(v: RawValue | null | undefined): any;
+export declare function isOpacityOrNull(v: RawValue): any;

package/dist/hooks/usePlot.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { PlotOptions } from '../types/plot';
+import type { PlotScales, PlotState as TPlotState } from '../types';
+/**
+ * Internal state representation of a Plot.
+ */
+declare class PlotState implements TPlotState {
+    width: number;
+    height: number;
+    options: PlotOptions;
+    facetWidth: number;
+    facetHeight: number;
+    plotWidth: number;
+    plotHeight: number;
+    scales: PlotScales;
+    body: HTMLDivElement;
+    /**
+     * True if there's a color scale and a symbol scale and both are bound to the same
+     * single channel accessor.
+     */
+    colorSymbolRedundant: boolean;
+    /**
+     * True if the plot is using filled dot marks.
+     */
+    hasFilledDotMarks: boolean;
+    css: ((d: string) => string) | null;
+    constructor(state: PlotState);
+    update(newState: Partial<PlotState>): void;
+    get publicState(): PublicPlotState;
+}
+/**
+ * A public-facing wrapper around PlotState that exposes only read-only properties.
+ */
+declare class PublicPlotState {
+    #private;
+    constructor(plotState: PlotState);
+    get width(): number;
+    get height(): number;
+    get options(): PlotOptions;
+    get scales(): PlotScales;
+    get plotWidth(): number;
+    get plotHeight(): number;
+    get facetWidth(): number;
+    get facetHeight(): number;
+    get body(): HTMLDivElement;
+    get colorSymbolRedundant(): boolean;
+    get hasFilledDotMarks(): boolean;
+    get css(): ((d: string) => string) | null;
+}
+export declare function setPlot(initialState: PlotState): PlotState;
+export declare function usePlot(): Readonly<TPlotState>;
+export {};

package/dist/hooks/usePlot.svelte.js

@@ -0,0 +1,90 @@
+import { getContext } from 'svelte';
+/**
+ * Internal state representation of a Plot.
+ */
+class PlotState {
+    // Define properties and methods for PlotState as needed
+    width = $state(50);
+    height = $state(50);
+    options = $state({});
+    facetWidth = $state(0);
+    facetHeight = $state(0);
+    plotWidth = $state(0);
+    plotHeight = $state(0);
+    scales = $state();
+    body = $state();
+    /**
+     * True if there's a color scale and a symbol scale and both are bound to the same
+     * single channel accessor.
+     */
+    colorSymbolRedundant = $state(false);
+    /**
+     * True if the plot is using filled dot marks.
+     */
+    hasFilledDotMarks = $state(false);
+    css = $state(null);
+    constructor(state) {
+        // Initialization code here
+        Object.assign(this, state);
+    }
+    update(newState) {
+        Object.assign(this, newState);
+    }
+    get publicState() {
+        return new PublicPlotState(this);
+    }
+}
+/**
+ * A public-facing wrapper around PlotState that exposes only read-only properties.
+ */
+class PublicPlotState {
+    #plotState;
+    constructor(plotState) {
+        this.#plotState = plotState;
+    }
+    get width() {
+        return this.#plotState.width;
+    }
+    get height() {
+        return this.#plotState.height;
+    }
+    get options() {
+        return this.#plotState.options;
+    }
+    get scales() {
+        return this.#plotState.scales;
+    }
+    get plotWidth() {
+        return this.#plotState.plotWidth;
+    }
+    get plotHeight() {
+        return this.#plotState.plotHeight;
+    }
+    get facetWidth() {
+        return this.#plotState.facetWidth;
+    }
+    get facetHeight() {
+        return this.#plotState.facetHeight;
+    }
+    get body() {
+        return this.#plotState.body;
+    }
+    get colorSymbolRedundant() {
+        return this.#plotState.colorSymbolRedundant;
+    }
+    get hasFilledDotMarks() {
+        return this.#plotState.hasFilledDotMarks;
+    }
+    get css() {
+        return this.#plotState.css;
+    }
+}
+export function setPlot(initialState) {
+    return new PlotState({
+        ...initialState
+    });
+}
+export function usePlot() {
+    const { getPlotState } = getContext('svelteplot');
+    return getPlotState().publicState;
+}

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export * from './transforms/index.js';
 export { formatMonth } from './helpers/formats.js';
 export { default as wordwrap } from './helpers/wordwrap.js';
 export * from './hooks/plotDefaults.js';
+export { usePlot } from './hooks/usePlot.svelte.js';

package/dist/index.js

@@ -7,3 +7,4 @@ export { formatMonth } from './helpers/formats.js';
 export { default as wordwrap } from './helpers/wordwrap.js';
 // hooks
 export * from './hooks/plotDefaults.js';
+export { usePlot } from './hooks/usePlot.svelte.js';

package/dist/marks/Area.svelte

@@ -19,7 +19,6 @@
 
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { groups as d3Groups } from 'd3-array';
     import { area, type CurveFactory } from 'd3-shape';
@@ -31,7 +30,6 @@
 
     import type {
         CurveName,
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
@@ -43,6 +41,7 @@
     import type { StackOptions } from '../transforms/stack.js';
     import { addEventHandlers } from './helpers/events';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: AreaMarkProps = $props();
 
@@ -64,8 +63,7 @@
         ...options
     }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const groupByKey = $derived(options.z || options.fill || options.stroke);
 
@@ -144,7 +142,7 @@
                                 clip-path={options.clipPath}
                                 d={areaPath(areaData)}
                                 {@attach addEventHandlers({
-                                    getPlotState,
+                                    plot,
                                     options,
                                     datum: datum?.datum
                                 })}

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

@@ -1,4 +1,5 @@
 import { type CurveFactory } from 'd3-shape';
+import callWithProps from '../helpers/callWithProps.js';
 import type { CurveName, DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps, RawValue } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
 declare function $$render<Datum extends DataRecord>(): {
@@ -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: callWithProps;
+        dodgeY: callWithProps;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<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<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

@@ -1,3 +1,4 @@
+import { renameChannels } from '../transforms/rename.js';
 import type { ChannelAccessor, 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: 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: renameChannels;
+        dodgeY: renameChannels;
         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 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>>;
@@ -74,7 +76,7 @@ declare function $$render<Datum extends DataRow>(): {
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
             channel: "stroke" | "fill";
         };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
+        stack?: Partial<renameChannels>;
         canvas?: boolean;
         areaClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
     }, "y1" | "y2"> & {