svelteplot 0.2.0 → 0.2.1

package/dist/Mark.svelte

@@ -18,6 +18,7 @@
         ScaledDataRecord,
         ScaleType
     } from './types.js';
+    import { isEqual } from 'es-toolkit';
     import { getUsedScales, projectXY, projectX, projectY } from './helpers/scales.js';
     import { testFilter, isValid } from './helpers/index.js';
     import { resolveChannel, resolveProp } from './helpers/resolve.js';
@@ -105,6 +106,13 @@
 
     let added = false;
 
+    $effect(() => {
+        const prevOptions = untrack(() => mark.options);
+        if (!isEqual(prevOptions, optionsWithAutoFacet)) {
+            mark.options = optionsWithAutoFacet;
+        }
+    });
+
     $effect(() => {
         if (added) return;
         // without using untrack() here we end up with inexplicable
@@ -118,6 +126,7 @@
         );
         mark.data = untrack(() => data);
         mark.options = untrack(() => optionsWithAutoFacet);
+
         addMark(mark);
         added = true;
     });
@@ -225,6 +234,7 @@
                                       usedScales.y,
                                       suffix
                                   );
+
                         out[`x${suffix}`] = x;
                         out[`y${suffix}`] = y;
                         out.valid =
@@ -243,7 +253,7 @@
                 ScaleName
             ][]) {
                 // check if the mark has defined an accessor for this channel
-                if (options?.[channel] !== undefined && out[channel] === undefined) {
+                if (options?.[channel] != null && out[channel] === undefined) {
                     // resolve value
                     const value = row[channel];
 
@@ -256,6 +266,7 @@
                         : value;
 
                     out.valid = out.valid && isValid(value);
+
                     // apply dx/dy transform
                     out[channel] =
                         scale === 'x' && Number.isFinite(scaled) ? (scaled as number) + dx : scaled;

package/dist/helpers/index.d.ts

@@ -16,3 +16,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>;

package/dist/helpers/index.js

@@ -53,3 +53,4 @@ export function omit(obj, ...keys) {
 export function identity(x) {
     return x;
 }
+export const GEOJSON_PREFER_STROKE = new Set(['MultiLineString', 'LineString']);

package/dist/helpers/resolve.js

@@ -4,16 +4,17 @@ import isRawValue from './isRawValue.js';
 import { isValid } from './isValid.js';
 import { pick } from 'es-toolkit';
 import { getBaseStylesObject } from './getBaseStyles.js';
+import { RAW_VALUE } from '../transforms/recordize.js';
 export function resolveProp(accessor, datum, _defaultValue = null) {
     if (typeof accessor === 'function') {
-        // datum.___orig___ exists if an array of raw values was used as dataset and got
+        // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
         // "recordized" by the recordize transform. We want to hide this wrapping to the user
         // so we're passing the original value to accessor functions instead of our wrapped record
         return datum == null
             ? accessor()
-            : accessor(datum.___orig___ != null ? datum.___orig___ : datum);
+            : accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
     }
-    else if (typeof accessor === 'string' && datum && datum[accessor] !== undefined) {
+    else if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum && datum[accessor] !== undefined) {
         return datum[accessor];
     }
     return isRawValue(accessor) ? accessor : _defaultValue;
@@ -46,10 +47,10 @@ function resolve(datum, accessor, channel, scale) {
     if (isDataRecord(datum)) {
         // use accessor function
         if (typeof accessor === 'function')
-            // datum.___orig___ exists if an array of raw values was used as dataset and got
+            // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
             // "recordized" by the recordize transform. We want to hide this wrapping to the user
             // so we're passing the original value to accessor functions instead of our wrapped record
-            return accessor(datum.___orig___ != null ? datum.___orig___ : datum);
+            return accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
         // use accessor string
         if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum[accessor] !== undefined)
             return datum[accessor];

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 } from '../types.js';
+import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types.js';
 /**
  * compute the plot scales
  */
@@ -35,7 +35,7 @@ export declare function inferScaleType(name: ScaleName, dataValues: RawValue[],
  * scales, we need to check if the the scale is supposed to be used
  * not. That's what this function is used for.
  */
-export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): { [k in ScaledChannelName]: boolean; };
+export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): UsedScales;
 export declare function looksLikeANumber(input: string | number): boolean;
 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;

package/dist/helpers/scales.js

@@ -113,7 +113,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                             for (const datum of mark.data) {
                                 const value = resolveProp(channelOptions.value, datum);
                                 dataValues.add(value);
-                                if (name === 'color' && scaleOptions.type === 'quantile') {
+                                if (name === 'color' && scaleOptions.type === 'quantile' || scaleOptions.type === 'quantile-cont') {
                                     allDataValues.push(value);
                                 }
                             }
@@ -146,6 +146,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
     if (isOrdinal && sortOrdinalDomain) {
         valueArr.sort(ascending);
     }
+    const valueArray = type === 'quantile' || type === 'quantile-cont' ? allDataValues.toSorted() : valueArr;
     const domain = scaleOptions.domain
         ? isOrdinal
             ? scaleOptions.domain
@@ -157,9 +158,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
             type === 'quantile' ||
             type === 'quantile-cont'
             ? name === 'y'
-                ? valueArr.toReversed()
-                : valueArr
-            : extent(scaleOptions.zero ? [0, ...valueArr] : valueArr);
+                ? valueArray.toReversed()
+                : valueArray
+            : extent(scaleOptions.zero ? [0, ...valueArray] : valueArray);
     if (!scaleOptions.scale) {
         throw new Error(`No scale function defined for ${name}`);
     }

package/dist/helpers/typeChecks.js

@@ -26,16 +26,20 @@ export function isSymbolOrNull(v) {
     return v == null || ((typeof v === 'string' || typeof v === 'object') && isSymbol(v));
 }
 export function isColorOrNull(v) {
-    return (v == null ||
-        (typeof v === 'string' &&
-            (v === 'currentColor' ||
-                CSS_VAR.test(v) ||
-                CSS_COLOR.test(v) ||
-                CSS_COLOR_MIX.test(v) ||
-                CSS_COLOR_CONTRAST.test(v) ||
-                CSS_RGBA.test(v) ||
-                CSS_URL.test(v) ||
-                color(v) !== null)));
+    if (v == null)
+        return true;
+    if (typeof v === 'string') {
+        v = `${v}`.toLowerCase();
+        return (v === 'currentcolor' ||
+            CSS_VAR.test(v) ||
+            CSS_COLOR.test(v) ||
+            CSS_COLOR_MIX.test(v) ||
+            CSS_COLOR_CONTRAST.test(v) ||
+            CSS_RGBA.test(v) ||
+            CSS_URL.test(v) ||
+            color(v) !== null);
+    }
+    return false;
 }
 export function isOpacityOrNull(v) {
     return v == null || (typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 1);

package/dist/marks/ColorLegend.svelte

@@ -2,7 +2,7 @@
     import { getContext } from 'svelte';
     import { Plot, AxisX, Frame } from '../index.js';
     import { symbol as d3Symbol, symbol } from 'd3-shape';
-    import { range as d3Range } from 'd3-array';
+    import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
     import type { DefaultOptions, PlotContext } from '../types.js';
@@ -72,7 +72,7 @@
                 </div>
             {/each}
         {:else if scaleType === 'quantile' || scaleType === 'quantize' || scaleType === 'threshold'}
-            {@const domain = plot.scales.color.domain}
+            {@const domain = extent(plot.scales.color.fn.domain())}
             {@const range = plot.scales.color.range}
             {@const tickLabels =
                 scaleType === 'quantile'
@@ -85,7 +85,6 @@
                 domain[1],
                 (domain[1] - domain[0]) / range.length
             ).slice(1)}
-
             <Plot
                 maxWidth="240px"
                 margins={1}
@@ -112,16 +111,13 @@
                     </linearGradient>
                 </defs>
                 <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
-                <AxisX tickSize={18} dy={-17} />
+                <AxisX tickSize={18} dy={-17} tickFormat={(d, i) => tickFormat(tickLabels[i])} />
             </Plot>
         {:else}
             <!--- continuous -->
-            {@const domain = plot.scales.color.domain}
-            {@const ticks = new Set([
-                domain[0],
-                ...(plot.scales.color?.fn?.ticks?.(Math.ceil(width / 5)) ?? []),
-                domain[1]
-            ])}
+            {@const domain = extent(plot.scales.color.domain)}
+            {@const ticks = d3Range(domain[0], domain[1], (domain[1] - domain[0]) / 7).slice(1)}
+
             <Plot
                 maxWidth="240px"
                 margins={1}

package/dist/marks/Dot.svelte

@@ -53,7 +53,7 @@
     }: DotProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
     function getSymbolPath(symbolType, size) {
         return d3Symbol(maybeSymbol(symbolType), size)();
@@ -96,7 +96,7 @@
     {#snippet children({ mark, usedScales, scaledData })}
         <g class="dots {className || ''}">
             {#if canvas}
-                <DotCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} />
+                <DotCanvas data={scaledData} {mark} />
             {:else}
                 {#each scaledData as d}
                     {#if d.valid && isValid(d.r)}

package/dist/marks/Geo.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { DataRecord, PlotContext, BaseMarkProps } from '../types.js';
+    import type {
+        DataRecord,
+        PlotContext,
+        BaseMarkProps,
+        FacetContext,
+        ConstantAccessor,
+        UsedScales
+    } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
-    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
-    import { getUsedScales } from '../helpers/scales.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import callWithProps from '../helpers/callWithProps.js';
     import { sort } from '../index.js';
-    import { testFilter } from '../helpers/index.js';
     import { addEventHandlers } from './helpers/events.js';
     import GeoCanvas from './helpers/GeoCanvas.svelte';
+    import { recordize } from '../transforms/recordize.js';
+    import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -19,6 +26,8 @@
         geoType?: 'sphere' | 'graticule';
         dragRotate: boolean;
         canvas: boolean;
+        href: ConstantAccessor<string>;
+        target: ConstantAccessor<string>;
     } & BaseMarkProps;
 
     let {
@@ -39,60 +48,60 @@
     );
 
     const args = $derived(
-        sort({
-            data,
-            ...(options.r ? { sort: { channel: '-r' } } : {}),
-            ...options
-        })
+        sort(
+            recordize({
+                data,
+                ...(options.r ? { sort: { channel: '-r' } } : {}),
+                ...options
+            })
+        )
     );
-    const preferStroke = new Set(['MultiLineString', 'LineString']);
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    const testFacet = $derived(getTestFacet());
 </script>
 
 <Mark
     type="geo"
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
-    {#snippet children({ mark, usedScales })}
+    {#snippet children({ mark, scaledData, usedScales })}
+        {#snippet el(d)}
+            {@const title = resolveProp(args.title, d.datum, '')}
+            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                d,
+                args,
+                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                usedScales
+            )}
+            <path
+                d={path(geometry)}
+                {style}
+                class={[styleClass]}
+                use:addEventHandlers={{
+                    getPlotState,
+                    options: args,
+                    datum: d.datum
+                }}>
+                {#if title}<title>{title}</title>{/if}
+            </path>
+        {/snippet}
         <g
             aria-label="geo"
             class={['geo', geoType && `geo-${geoType}`, className]}
             style="fill:currentColor">
             {#if canvas}
-                <GeoCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} {path} />
+                <GeoCanvas data={scaledData} {path} {mark} {usedScales} />
             {:else}
-                {#each args.data as datum}
-                    {#if testFilter(datum, mark.options) && testFacet(datum, mark.options)}
-                        {#snippet el(datum)}
-                            {@const title = resolveProp(args.title, datum, '')}
-                            {@const geometry = resolveProp(args.geometry, datum, datum)}
-                            <path
-                                d={path(geometry)}
-                                style={resolveScaledStyles(
-                                    datum,
-                                    args,
-                                    usedScales,
-                                    plot,
-                                    preferStroke.has(geometry.type) ? 'stroke' : 'fill'
-                                )}
-                                use:addEventHandlers={{
-                                    getPlotState,
-                                    options: args,
-                                    datum
-                                }}>
-                                {#if title}<title>{title}</title>{/if}
-                            </path>
-                        {/snippet}
+                {#each scaledData as d}
+                    {#if d.valid}
                         {#if options.href}
                             <a
-                                href={resolveProp(args.href, datum, '')}
-                                target={resolveProp(args.target, datum, '_self')}>
-                                {@render el(datum)}
+                                href={resolveProp(args.href, d.datum, '')}
+                                target={resolveProp(args.target, d.datum, '_self')}>
+                                {@render el(d)}
                             </a>
                         {:else}
-                            {@render el(datum)}
+                            {@render el(d)}
                         {/if}
                     {/if}
                 {/each}

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

@@ -1,9 +1,11 @@
-import type { DataRecord, BaseMarkProps } from '../types.js';
+import type { DataRecord, BaseMarkProps, ConstantAccessor } from '../types.js';
 type GeoMarkProps = {
     data: DataRecord[];
     geoType?: 'sphere' | 'graticule';
     dragRotate: boolean;
     canvas: boolean;
+    href: ConstantAccessor<string>;
+    target: ConstantAccessor<string>;
 } & BaseMarkProps;
 declare const Geo: import("svelte").Component<GeoMarkProps, {}, "">;
 type Geo = ReturnType<typeof Geo>;

package/dist/marks/GridX.svelte

@@ -39,9 +39,9 @@
 
 <Mark
     type="gridX"
-    data={data.length ? data.map((tick) => ({ __x: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
     channels={['y1', 'y2', 'x', 'stroke', 'strokeOpacity']}
-    {...{ ...options, x: '__x' }}
+    {...{ ...options, x: RAW_VALUE }}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-x">

package/dist/marks/GridY.svelte

@@ -36,9 +36,9 @@
 
 <Mark
     type="gridY"
-    data={data.length ? data.map((tick) => ({ ___orig___: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
     channels={['x1', 'x2', 'y', 'stroke', 'strokeOpacity']}
-    {...{ ...options, y: '___orig___' }}
+    {...{ ...options, y: RAW_VALUE }}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-y">

package/dist/marks/Pointer.svelte

@@ -31,6 +31,7 @@
     import { quadtree } from 'd3-quadtree';
     import { projectXY } from '../helpers/scales.js';
     import isDataRecord from '../helpers/isDataRecord.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     let {
         data = [{}],
@@ -109,7 +110,7 @@
                             true
                         );
                         return {
-                            ...(isDataRecord(d) ? d : { ___orig___: d }),
+                            ...(isDataRecord(d) ? d : { [RAW_VALUE]: d }),
                             __pointerX: px,
                             __pointerY: py
                         };

package/dist/marks/helpers/CanvasLayer.svelte

@@ -1,18 +1,12 @@
 <script lang="ts">
-    let {
-        canvas = $bindable(),
-        devicePixelRatio = $bindable(1),
-        plot
-    }: {
-        canvas: HTMLCanvasElement;
-        devicePixelRatio: number;
-        plot: PlotState;
-    } = $props();
+    import { getContext } from 'svelte';
+    import type { PlotContext } from '../../types';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
 
-    $effect(() => {
-        devicePixelRatio = window.devicePixelRatio || 1;
-        const ctx = canvas.getContext('2d');
-    });
+    let restProps: {} = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 </script>
 
 <!-- 
@@ -24,9 +18,9 @@
 <foreignObject x="0" y="0" width={plot.width} height={plot.height}>
     <canvas
         xmlns="http://www.w3.org/1999/xhtml"
-        bind:this={canvas}
-        width={plot.width * devicePixelRatio}
-        height={plot.height * devicePixelRatio}
+        {...restProps}
+        width={plot.width * (devicePixelRatio.current ?? 1)}
+        height={plot.height * (devicePixelRatio.current ?? 1)}
         style="width: {plot.width}px; height: {plot.height}px;"></canvas>
 </foreignObject>
 

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

@@ -1,13 +1,9 @@
-type $$ComponentProps = {
-    canvas: HTMLCanvasElement;
-    devicePixelRatio: number;
-    plot: PlotState;
-};
+type $$ComponentProps = {};
 /**
  * The CanvasLayer component is a helper component that inserts a
  * canvas element inside a foreignObject for use in a plot and takes care of
  * scaling it to the device pixel ratio.
  */
-declare const CanvasLayer: import("svelte").Component<$$ComponentProps, {}, "canvas" | "devicePixelRatio">;
+declare const CanvasLayer: import("svelte").Component<$$ComponentProps, {}, "">;
 type CanvasLayer = ReturnType<typeof CanvasLayer>;
 export default CanvasLayer;

package/dist/marks/helpers/DotCanvas.svelte

@@ -1,29 +1,30 @@
 <script lang="ts">
-    import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+    import type {
+        PlotState,
+        Mark,
+        BaseMarkProps,
+        ScaledDataRecord,
+        PlotContext
+    } from '../../types.js';
     import { CSS_VAR } from '../../constants.js';
-    import { isValid, testFilter } from '../../helpers/index.js';
-    import { resolveChannel, resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { projectXY } from '../../helpers/scales.js';
+    import { resolveProp } from '../../helpers/resolve.js';
     import { maybeSymbol } from '../../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
-    import { untrack } from 'svelte';
-    import { isEqual } from 'es-toolkit';
+    import type { Attachment } from 'svelte/attachments';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { getContext } from 'svelte';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
 
-    let canvas: HTMLCanvasElement | undefined = $state();
-    let devicePixelRatio = $state(1);
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 
     let {
         mark,
-        plot,
-        data,
-        testFacet,
-        usedScales
+        data
     }: {
         mark: Mark<BaseMarkProps>;
         plot: PlotState;
-        data: DataRecord[];
-        testFacet: any;
-        usedScales: any;
+        data: ScaledDataRecord[];
     } = $props();
 
     function drawSymbolPath(symbolType: string, size: number, context) {
@@ -31,154 +32,76 @@
         return d3Symbol(maybeSymbol(symbolType), size).context(context)();
     }
 
-    function scaleHash(scale) {
-        return { domain: scale.domain, type: scale.type, range: scale.range };
-    }
-
-    let _plotSize = $state([plot.width, plot.height]);
-    let _usedScales = $state(usedScales);
     let _markOptions = $state(mark.options);
-    const xScale = $derived(scaleHash(plot.scales.x));
-    const yScale = $derived(scaleHash(plot.scales.y));
-    const rScale = $derived(scaleHash(plot.scales.r));
-    let _xScale = $state(xScale);
-    let _yScale = $state(yScale);
-    let _rScale = $state(rScale);
-
-    const filteredData = $derived(
-        data.filter((datum) => testFilter(datum, _markOptions) && testFacet(datum, _markOptions))
-    );
-
-    let _filteredData: DataRecord[] = $state([]);
-
-    $effect(() => {
-        // update _usedScales only if changed
-        if (!isEqual(usedScales, _usedScales)) _usedScales = usedScales;
-        if (!isEqual(mark.options, _markOptions)) _markOptions = mark.options;
-
-        const plotSize = [plot.width, plot.height];
-        if (!isEqual(plotSize, _plotSize)) _plotSize = plotSize;
-
-        if (
-            _markOptions.filter
-                ? !isEqual(filteredData, _filteredData)
-                : filteredData.length !== _filteredData.length
-        ) {
-            _filteredData = filteredData;
-        }
-        if (!isEqual(xScale, _xScale)) _xScale = xScale;
-        if (!isEqual(yScale, _yScale)) _yScale = yScale;
-        if (!isEqual(rScale, _rScale)) _rScale = rScale;
-    });
-
-    $effect(() => {
-        // track plot size, since we're untracking the scales
-        _plotSize;
-        _markOptions;
-        _xScale;
-        _yScale;
-        _rScale;
-        const plotScales = untrack(() => plot.scales);
+
+    const renderDots: Attachment = (canvas: HTMLCanvasElement) => {
         const context = canvas.getContext('2d');
-        if (context === null) return;
-        // this will re-run whenever `color` or `size` change
-        context.resetTransform();
-        context.scale(devicePixelRatio, devicePixelRatio);
-
-        for (const datum of _filteredData) {
-            // untrack the filter test to avoid redrawing when not necessary
-            const x = resolveChannel('x', datum, _markOptions);
-            const y = resolveChannel('y', datum, _markOptions);
-            const r = resolveChannel('r', datum, _markOptions) || 2;
-            const symbol_ = resolveChannel('symbol', datum, {
-                symbol: 'circle',
-                ..._markOptions
-            });
-            const symbol = _usedScales.symbol ? plotScales.symbol.fn(symbol_) : symbol_;
-
-            if (isValid(x) && isValid(y) && isValid(r)) {
-                const [px, py] = projectXY(plotScales, x, y, true, true);
-
-                const r_ = _usedScales.r ? plotScales.r.fn(r) : r;
-                const size = r_ * r_ * Math.PI * devicePixelRatio;
-                let { stroke, strokeOpacity, fillOpacity, fill, opacity } = resolveScaledStyleProps(
-                    datum,
-                    _markOptions,
-                    _usedScales,
-                    untrack(() => plot),
-                    'stroke'
-                );
 
-                if (`${fill}`.toLowerCase() === 'currentcolor')
-                    fill = getComputedStyle(canvas.parentElement.parentElement).getPropertyValue(
-                        'color'
-                    );
-                if (`${stroke}`.toLowerCase() === 'currentcolor')
-                    stroke = getComputedStyle(canvas.parentElement.parentElement).getPropertyValue(
-                        'color'
-                    );
-                if (CSS_VAR.test(fill))
-                    fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
-                if (CSS_VAR.test(stroke))
-                    stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
-
-                if (stroke && stroke !== 'none') {
-                    const strokeWidth = resolveProp(_markOptions.strokeWidth, datum, 1.6);
-                    context.lineWidth = strokeWidth;
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                for (const datum of data) {
+                    if (datum.valid) {
+                        let { fill, stroke } = datum;
+
+                        if (`${fill}`.toLowerCase() === 'currentcolor')
+                            fill = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color');
+                        if (`${stroke}`.toLowerCase() === 'currentcolor')
+                            stroke = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color');
+
+                        if (CSS_VAR.test(fill))
+                            fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
+                        if (CSS_VAR.test(stroke))
+                            stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
+
+                        if (stroke && stroke !== 'none') {
+                            const strokeWidth = resolveProp(
+                                _markOptions.strokeWidth,
+                                datum.datum,
+                                1.6
+                            );
+                            context.lineWidth = strokeWidth;
+                        }
+
+                        context.fillStyle = fill ? fill : 'none';
+                        context.strokeStyle = stroke ? stroke : 'none';
+                        context.translate(datum.x, datum.y);
+
+                        const size = datum.r * datum.r * Math.PI;
+
+                        context.beginPath();
+                        drawSymbolPath(datum.symbol, size, context);
+                        context.closePath();
+
+                        const { opacity = 1, fillOpacity = 1, strokeOpacity = 1 } = datum;
+
+                        if (opacity != null) context.globalAlpha = opacity ?? 1;
+                        if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
+                        if (fill && fill !== 'none') context.fill();
+                        if (strokeOpacity != null)
+                            context.globalAlpha = (opacity ?? 1) * strokeOpacity;
+                        if (stroke && stroke !== 'none') context.stroke();
+                        context.translate(-datum.x, -datum.y);
+                    }
                 }
-                context.fillStyle = fill ? fill : 'none';
-                context.strokeStyle = stroke ? stroke : 'none';
-                context.translate(px, py);
-
-                context.beginPath();
-                drawSymbolPath(symbol, size, context);
-                context.closePath();
-
-                if (opacity != null) context.globalAlpha = opacity ?? 1;
-                if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
-                if (fill && fill !== 'none') context.fill();
-                if (strokeOpacity != null) context.globalAlpha = (opacity ?? 1) * strokeOpacity;
-                if (stroke && stroke !== 'none') context.stroke();
-                context.translate(-px, -py);
             }
-        }
-        return () => {
-            canvas?.getContext('2d')?.clearRect(0, 0, canvas?.width, canvas?.height);
-        };
-    });
-
-    // code from https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
-    let remove: null | (() => void) = null;
-
-    function updatePixelRatio() {
-        if (remove != null) {
-            remove();
-        }
-        const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
-        const media = matchMedia(mqString);
-        media.addEventListener('change', updatePixelRatio);
-        remove = () => {
-            media.removeEventListener('change', updatePixelRatio);
-        };
-        devicePixelRatio = window.devicePixelRatio;
-    }
-    $effect(() => {
-        updatePixelRatio();
-    });
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
 </script>
 
-<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
-    <canvas
-        xmlns="http://www.w3.org/1999/xhtml"
-        bind:this={canvas}
-        width={plot.width * devicePixelRatio}
-        height={plot.height * devicePixelRatio}
-        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
-</foreignObject>
-
-<style>
-    foreignObject,
-    canvas {
-        color: currentColor;
-    }
-</style>
+<CanvasLayer {@attach renderDots} />

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

@@ -1,10 +1,8 @@
-import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+import type { PlotState, Mark, BaseMarkProps, ScaledDataRecord } from '../../types.js';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;
     plot: PlotState;
-    data: DataRecord[];
-    testFacet: any;
-    usedScales: any;
+    data: ScaledDataRecord[];
 };
 declare const DotCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
 type DotCanvas = ReturnType<typeof DotCanvas>;

package/dist/marks/helpers/GeoCanvas.svelte

@@ -1,165 +1,115 @@
 <script lang="ts">
-    import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+    import type {
+        Mark,
+        BaseMarkProps,
+        PlotContext,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types.js';
     import { CSS_VAR } from '../../constants.js';
-    import { testFilter } from '../../helpers/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { untrack } from 'svelte';
-    import { isEqual } from 'es-toolkit';
+    import { getContext, untrack } from 'svelte';
     import { type GeoPath } from 'd3-geo';
-
-    let canvas: HTMLCanvasElement | undefined = $state();
-    let devicePixelRatio = $state(1);
+    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';
 
     let {
         mark,
-        plot,
         data,
-        testFacet,
-        usedScales,
-        path
+        path,
+        usedScales
     }: {
         mark: Mark<BaseMarkProps>;
-        plot: PlotState;
-        data: DataRecord[];
-        testFacet: any;
-        usedScales: any;
+        data: ScaledDataRecord[];
         path: GeoPath;
+        usedScales: UsedScales;
     } = $props();
 
-    function scaleHash(scale) {
-        return { domain: scale.domain, type: scale.type, range: scale.range };
-    }
-
-    let _plotSize = $state([plot.width, plot.height]);
-    let _usedScales = $state(usedScales);
-    let _markOptions = $state(mark.options);
-
-    const filteredData = $derived(
-        data.filter((datum) => testFilter(datum, _markOptions) && testFacet(datum, _markOptions))
-    );
-
-    let _filteredData: DataRecord[] = $state([]);
-
-    $effect(() => {
-        // update _usedScales only if changed
-        if (!isEqual(usedScales, _usedScales)) _usedScales = usedScales;
-        if (!isEqual(mark.options, _markOptions)) _markOptions = mark.options;
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 
-        const plotSize = [plot.width, plot.height];
-        if (!isEqual(plotSize, _plotSize)) _plotSize = plotSize;
-
-        if (
-            _markOptions.filter
-                ? !isEqual(filteredData, _filteredData)
-                : filteredData.length !== _filteredData.length
-        ) {
-            _filteredData = filteredData;
-        }
-    });
-
-    $effect(() => {
-        // track plot size, since we're untracking the scales
-        _plotSize;
-        _markOptions;
+    function maybeOpacity(value) {
+        return value == null ? 1 : +value;
+    }
 
-        const plotScales = untrack(() => plot.scales);
+    const render: Attachment = (canvas: HTMLCanvasElement) => {
         const context = canvas.getContext('2d');
-        if (context === null) return;
-        // this will re-run whenever `color` or `size` change
-        context.resetTransform();
-        context.scale(devicePixelRatio, devicePixelRatio);
-
-        let currentColor;
-
-        path.context(context);
-
-        const plot_ = untrack(() => plot);
 
-        for (const datum of _filteredData) {
-            // untrack the filter test to avoid redrawing when not necessary
-            let { stroke, fill, opacity, ...restStyles } = resolveScaledStyleProps(
-                datum,
-                _markOptions,
-                _usedScales,
-                plot_,
-                'fill'
-            );
-
-            const fillOpacity = restStyles['fill-opacity'];
-            const strokeOpacity = restStyles['stroke-opacity'];
-
-            if (`${fill}`.toLowerCase() === 'currentcolor')
-                fill =
-                    currentColor ||
-                    (currentColor = getComputedStyle(
-                        canvas?.parentElement?.parentElement
-                    ).getPropertyValue('color'));
-            if (`${stroke}`.toLowerCase() === 'currentcolor')
-                stroke =
-                    currentColor ||
-                    (currentColor = getComputedStyle(
-                        canvas?.parentElement?.parentElement
-                    ).getPropertyValue('color'));
-            if (CSS_VAR.test(fill))
-                fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
-            if (CSS_VAR.test(stroke))
-                stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
-
-            if (stroke && stroke !== 'none') {
-                const strokeWidth = resolveProp(_markOptions.strokeWidth, datum, 1.6);
-                context.lineWidth = strokeWidth;
+        $effect(() => {
+            path.context(context);
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+                let currentColor;
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+                    const geometry = resolveProp(mark.options.geometry, d.datum, d.datum);
+                    // untrack the filter test to avoid redrawing when not necessary
+                    let { stroke, fill, ...restStyles } = resolveScaledStyleProps(
+                        d.datum,
+                        mark.options,
+                        usedScales,
+                        plot,
+                        GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill'
+                    );
+
+                    const opacity = maybeOpacity(restStyles['opacity']);
+                    const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
+                    const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
+
+                    if (`${fill}`.toLowerCase() === 'currentcolor')
+                        fill =
+                            currentColor ||
+                            (currentColor = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color'));
+                    if (`${stroke}`.toLowerCase() === 'currentcolor')
+                        stroke =
+                            currentColor ||
+                            (currentColor = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color'));
+                    if (CSS_VAR.test(fill))
+                        fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
+                    if (CSS_VAR.test(stroke))
+                        stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
+
+                    if (stroke && stroke !== 'none') {
+                        const strokeWidth = resolveProp(mark.options.strokeWidth, d.datum, 1);
+                        context.lineWidth = strokeWidth ?? 1;
+                    }
+
+                    context.fillStyle = fill ? fill : 'none';
+                    context.strokeStyle = stroke ? stroke : 'none';
+                    context.lineJoin = 'round';
+                    context.beginPath();
+
+                    path(geometry);
+                    context.closePath();
+
+                    if (opacity != null) context.globalAlpha = opacity;
+                    if (fillOpacity != null) context.globalAlpha = opacity * fillOpacity;
+
+                    if (fill && fill !== 'none') context.fill();
+                    if (strokeOpacity != null) context.globalAlpha = opacity * strokeOpacity;
+                    if (stroke && stroke !== 'none') context.stroke();
+                }
             }
-            context.fillStyle = fill ? fill : 'none';
-            context.strokeStyle = stroke ? stroke : 'none';
-
-            context.beginPath();
-            path(datum);
-            context.closePath();
-
-            if (opacity != null) context.globalAlpha = opacity ?? 1;
-            if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
-
-            if (fill && fill !== 'none') context.fill();
-            if (strokeOpacity != null) context.globalAlpha = (opacity ?? 1) * strokeOpacity;
-            if (stroke && stroke !== 'none') context.stroke();
-        }
-        return () => {
-            canvas?.getContext('2d')?.clearRect(0, 0, canvas?.width, canvas?.height);
-        };
-    });
-
-    // code from https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
-    let remove: null | (() => void) = null;
-
-    function updatePixelRatio() {
-        if (remove != null) {
-            remove();
-        }
-        const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
-        const media = matchMedia(mqString);
-        media.addEventListener('change', updatePixelRatio);
-        remove = () => {
-            media.removeEventListener('change', updatePixelRatio);
-        };
-        devicePixelRatio = window.devicePixelRatio;
-    }
-    $effect(() => {
-        updatePixelRatio();
-    });
+            // reset path context in case we switch back to SVG
+            path.context(null);
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
 </script>
 
-<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
-    <canvas
-        xmlns="http://www.w3.org/1999/xhtml"
-        bind:this={canvas}
-        width={plot.width * devicePixelRatio}
-        height={plot.height * devicePixelRatio}
-        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
-</foreignObject>
-
-<style>
-    foreignObject,
-    canvas {
-        color: currentColor;
-    }
-</style>
+<CanvasLayer {@attach render} />

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

@@ -1,12 +1,10 @@
-import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types.js';
 import { type GeoPath } from 'd3-geo';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;
-    plot: PlotState;
-    data: DataRecord[];
-    testFacet: any;
-    usedScales: any;
+    data: ScaledDataRecord[];
     path: GeoPath;
+    usedScales: UsedScales;
 };
 declare const GeoCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
 type GeoCanvas = ReturnType<typeof GeoCanvas>;

package/dist/transforms/recordize.d.ts

@@ -13,3 +13,4 @@ export declare function recordizeY({ data, ...channels }: TransformArgsRow, { wi
  * the rest of our code doesn't have to deal with this case anymore.
  */
 export declare function recordizeXY({ data, ...channels }: TransformArgsRow): TransformArgsRecord;
+export declare function recordize({ data, ...channels }: TransformArgsRow): TransformArgsRecord;

package/dist/transforms/recordize.js

@@ -11,13 +11,12 @@ export function recordizeX({ data, ...channels }, { withIndex } = { withIndex: t
         return {
             data: data.map((value, index) => ({
                 __value: value,
-                ...(withIndex ? { __index: index } : {}),
+                ...(withIndex ? { [INDEX]: index } : {}),
                 [RAW_VALUE]: value,
-                ___orig___: value
             })),
             ...channels,
-            x: '__value',
-            ...(withIndex ? { y: '__index' } : {})
+            x: RAW_VALUE,
+            ...(withIndex ? { y: INDEX } : {})
         };
     }
     return { data: data, ...channels };
@@ -35,7 +34,6 @@ export function recordizeY({ data, ...channels }, { withIndex } = { withIndex: t
             data: Array.from(data).map((value, index) => ({
                 ...(withIndex ? { __index: index } : {}),
                 [RAW_VALUE]: value,
-                ___orig___: value
             })),
             ...channels,
             ...(withIndex ? { x: '__index' } : {}),
@@ -76,3 +74,16 @@ export function recordizeXY({ data, ...channels }) {
     }
     return { data, ...channels };
 }
+export function recordize({ data, ...channels }) {
+    if (!data)
+        return { data, ...channels };
+    if (!isDataRecord(data[0])) {
+        return {
+            data: data.map((d) => ({
+                [RAW_VALUE]: d,
+            })),
+            ...channels,
+        };
+    }
+    return { data, ...channels };
+}

package/dist/transforms/stack.js

@@ -2,6 +2,9 @@ import isDataRecord from '../helpers/isDataRecord.js';
 import { resolveChannel } from '../helpers/resolve.js';
 import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone, stackOffsetDiverging } from 'd3-shape';
 import { index, union, groups as d3Groups } from 'd3-array';
+import { RAW_VALUE } from './recordize';
+const GROUP = Symbol('group');
+const FACET = Symbol('group');
 const DEFAULT_STACK_OPTIONS = {
     order: null,
     offset: null,
@@ -39,8 +42,8 @@ function stackXY(byDim, data, channels, options) {
         const resolvedData = data.map((d) => ({
             ...(isDataRecord(d) ? d : { __orig: d }),
             [`__${secondDim}`]: resolveChannel(secondDim, d, channels),
-            __group: groupBy === true ? 'G' : resolveChannel(groupBy, d, channels),
-            __facet: groupFacetsBy.length > 0
+            [GROUP]: groupBy === true ? 'G' : resolveChannel(groupBy, d, channels),
+            [FACET]: groupFacetsBy.length > 0
                 ? groupFacetsBy
                     .map((channel) => String(resolveChannel(channel, d, channels)))
                     .join('---')
@@ -51,11 +54,11 @@ function stackXY(byDim, data, channels, options) {
         const out = [];
         // first we group the dataset by facets to avoid stacking of rows that are
         // in separate panels
-        const groups = d3Groups(resolvedData, (d) => d.__facet);
+        const groups = d3Groups(resolvedData, (d) => d[FACET]);
         for (const [, facetData] of groups) {
             // now we index the data on the second dimension, e.g. over x
             // when stacking over y
-            const indexed = index(facetData, (d) => d[`__${secondDim}`], (d) => d.__group);
+            const indexed = index(facetData, (d) => d[`__${secondDim}`], (d) => d[GROUP]);
             const stackOrder = (series) => {
                 const f = STACK_ORDER[options.order || 'none'];
                 return options.reverse ? f(series).reverse() : f(series);
@@ -64,7 +67,7 @@ function stackXY(byDim, data, channels, options) {
             const series = stack()
                 .order(stackOrder)
                 .offset(STACK_OFFSET[options.offset])
-                .keys(union(facetData.map((d) => d.__group)))
+                .keys(union(facetData.map((d) => d[GROUP])))
                 .value(([, group], key) => (group.get(key) ? group.get(key)[`__${byDim}`] : 0))(indexed);
             // and combine it all back into a flat array
             const newData = series
@@ -75,8 +78,8 @@ function stackXY(byDim, data, channels, options) {
                     .map((d) => {
                     const datum = d.data[1].get(groupKey);
                     // cleanup our internal keys
-                    delete datum.__group;
-                    delete datum.__facet;
+                    delete datum[GROUP];
+                    delete datum[FACET];
                     return { ...datum, [`__${byLow}`]: d[0], [`__${byHigh}`]: d[1] };
                 });
             })

package/dist/types.d.ts

@@ -246,11 +246,11 @@ export type PlotOptions = {
     /**
      * Options for the shared radius scale
      */
-    r: ScaleOptions;
+    r: Partial<ScaleOptions>;
     color: Partial<ColorScaleOptions>;
-    opacity: ScaleOptions;
-    symbol: LegendScaleOptions;
-    length: ScaleOptions;
+    opacity: Partial<ScaleOptions>;
+    symbol: Partial<LegendScaleOptions>;
+    length: Partial<ScaleOptions>;
     fx: Partial<ScaleOptions>;
     fy: Partial<ScaleOptions>;
     children: Snippet<[
@@ -652,4 +652,5 @@ export type MapIndexObject = {
 };
 export type MapMethod = 'cumsum' | 'rank' | 'quantile' | ((I: number[], S: number[]) => number[]) | MapIndexObject;
 export type MapOptions = Partial<Record<ScaledChannelName, MapMethod>>;
+export type UsedScales = Record<ScaledChannelName, boolean>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -47,15 +47,15 @@
     "devDependencies": {
         "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
         "@emotion/css": "^11.13.5",
-        "@sveltejs/adapter-auto": "^6.0.0",
+        "@sveltejs/adapter-auto": "^6.0.1",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/eslint-config": "^8.2.0",
-        "@sveltejs/kit": "^2.20.8",
+        "@sveltejs/kit": "^2.21.0",
         "@sveltejs/package": "^2.3.11",
         "@sveltejs/vite-plugin-svelte": "5.0.3",
-        "@sveltepress/theme-default": "^6.0.2",
-        "@sveltepress/twoslash": "^1.2.1",
-        "@sveltepress/vite": "^1.2.1",
+        "@sveltepress/theme-default": "^6.0.3",
+        "@sveltepress/twoslash": "^1.2.2",
+        "@sveltepress/vite": "^1.2.2",
         "@testing-library/svelte": "^5.2.7",
         "@testing-library/user-event": "^14.6.1",
         "@types/d3-array": "^3.2.1",
@@ -68,32 +68,33 @@
         "@types/d3-scale": "^4.0.9",
         "@types/d3-scale-chromatic": "^3.1.0",
         "@types/d3-shape": "^3.1.7",
-        "@typescript-eslint/eslint-plugin": "^8.31.1",
-        "@typescript-eslint/parser": "^8.31.1",
+        "@typescript-eslint/eslint-plugin": "^8.32.1",
+        "@typescript-eslint/parser": "^8.32.1",
         "csstype": "^3.1.3",
         "d3-dsv": "^3.0.1",
         "d3-fetch": "^3.0.1",
         "d3-force": "^3.0.0",
         "eslint": "^9.26.0",
-        "eslint-config-prettier": "^10.1.2",
-        "eslint-plugin-svelte": "3.5.1",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-svelte": "3.7.0",
         "jsdom": "^26.1.0",
         "prettier": "^3.5.3",
-        "prettier-plugin-svelte": "^3.3.3",
+        "prettier-plugin-svelte": "^3.4.0",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "resize-observer-polyfill": "^1.5.1",
-        "sass": "^1.87.0",
-        "svelte-check": "^4.1.7",
-        "svelte-eslint-parser": "1.1.3",
+        "sass": "^1.89.0",
+        "svelte-check": "^4.2.1",
+        "svelte-eslint-parser": "1.2.0",
         "svelte-highlight": "^7.8.3",
         "topojson-client": "^3.1.0",
         "tslib": "^2.8.1",
         "typedoc": "^0.28.4",
         "typedoc-plugin-markdown": "^4.6.3",
         "typescript": "^5.8.3",
-        "vite": "^6.3.4",
-        "vitest": "^3.1.2"
+        "vite": "^6.3.5",
+        "vitest": "^3.1.3",
+        "vitest-matchmedia-mock": "^2.0.3"
     },
     "types": "./dist/index.d.ts",
     "type": "module",
@@ -114,6 +115,6 @@
         "es-toolkit": "^1.37.2",
         "fast-equals": "^5.2.2",
         "merge-deep": "^3.0.3",
-        "svelte": "5.28.2"
+        "svelte": "5.30.1"
     }
 }