From ca1d41ecd1ad62fa7c1009f461c54a467c096566 Mon Sep 17 00:00:00 2001
From: Wouter Kayser <wouterkayser@gmail.com>
Date: Mon, 19 May 2025 14:08:17 +0200
Subject: [PATCH 01/66] Fix type import

Importing a type with the same name causes wrong types to be emitted.
---
 src/lib/marks/Line.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/marks/Line.svelte b/src/lib/marks/Line.svelte
index 6b0156b9..9c54ffff 100644
--- a/src/lib/marks/Line.svelte
+++ b/src/lib/marks/Line.svelte
@@ -41,7 +41,7 @@
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { getContext } from 'svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { line, type CurveFactory, type Line } from 'd3-shape';
+    import { line, type CurveFactory, type Line as D3Line } from 'd3-shape';
     import { geoPath } from 'd3-geo';
     import callWithProps from '$lib/helpers/callWithProps.js';
     import { maybeCurve } from '$lib/helpers/curves.js';
@@ -100,7 +100,7 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const linePath: Line<ScaledDataRecord> = $derived(
+    const linePath: D3Line<ScaledDataRecord> = $derived(
         plot.scales.projection && curve === 'auto'
             ? sphereLine(plot.scales.projection)
             : callWithProps(line, [], {

From 0d86158af445754161a73bd0f313402ff9fd0338 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Thu, 22 May 2025 15:03:28 +0200
Subject: [PATCH 02/66] fix: use @emotion/css in axes ticks

---
 src/lib/core/Plot.svelte               | 34 +++++++--------
 src/lib/helpers/getBaseStyles.ts       |  1 +
 src/lib/marks/helpers/BaseAxisX.svelte | 36 +++++++++++-----
 src/lib/marks/helpers/BaseAxisY.svelte | 40 +++++++++++------
 src/lib/types.ts                       | 60 +++++++++++++-------------
 5 files changed, 102 insertions(+), 69 deletions(-)

diff --git a/src/lib/core/Plot.svelte b/src/lib/core/Plot.svelte
index 22f86974..6a694e00 100644
--- a/src/lib/core/Plot.svelte
+++ b/src/lib/core/Plot.svelte
@@ -28,22 +28,6 @@
     import mergeDeep from '../helpers/mergeDeep.js';
     import { computeScales, projectXY } from '../helpers/scales.js';
     import { CHANNEL_SCALE, SCALES } from '../constants.js';
-    import { scale } from 'svelte/transition';
-
-    let {
-        header,
-        footer,
-        overlay,
-        underlay,
-        children,
-        facetAxes,
-        testid,
-        facet,
-        class: className = '',
-        css,
-        width: fixedWidth,
-        ...initialOpts
-    }: Partial<PlotOptions> = $props();
 
     // automatic margins can be applied by the marks, registered
     // with their respective unique identifier as keys
@@ -95,6 +79,21 @@
         ...getContext<Partial<PlotDefaults>>('svelteplot/defaults')
     };
 
+    let {
+        header,
+        footer,
+        overlay,
+        underlay,
+        children,
+        facetAxes,
+        testid,
+        facet,
+        class: className = '',
+        css = DEFAULTS.css,
+        width: fixedWidth,
+        ...initialOpts
+    }: Partial<PlotOptions> = $props();
+
     let width = $state(DEFAULTS.initialWidth);
 
     setContext('svelteplot/_defaults', DEFAULTS);
@@ -454,7 +453,8 @@
             symbol: { type: 'ordinal' },
             fx: { type: 'band', axis: 'top' },
             fy: { type: 'band', axis: 'right' },
-            locale: DEFAULTS.locale
+            locale: DEFAULTS.locale,
+            css: DEFAULTS.css
         };
     }
 
diff --git a/src/lib/helpers/getBaseStyles.ts b/src/lib/helpers/getBaseStyles.ts
index bc141cec..cbe3c601 100644
--- a/src/lib/helpers/getBaseStyles.ts
+++ b/src/lib/helpers/getBaseStyles.ts
@@ -18,6 +18,7 @@ const styleProps: Partial<Record<MarkStyleProps, string | null>> = {
     fontWeight: 'font-weight',
     fontStyle: 'font-style',
     textAnchor: 'text-anchor',
+    fontVariant: 'font-variant',
     cursor: 'cursor',
     pointerEvents: 'pointer-events'
 };
diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte
index 2e002978..85c7a99c 100644
--- a/src/lib/marks/helpers/BaseAxisX.svelte
+++ b/src/lib/marks/helpers/BaseAxisX.svelte
@@ -11,7 +11,7 @@
         RawValue,
         ScaleType
     } from '$lib/types.js';
-    import { resolveScaledStyles, resolveProp } from '$lib/helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
     import { max } from 'd3-array';
     import { randomId, testFilter } from '$lib/helpers/index.js';
 
@@ -142,7 +142,7 @@
 </script>
 
 <g class="axis-x">
-    {#each positionedTicks as tick, t}
+    {#each positionedTicks as tick, t (t)}
         {#if testFilter(tick.value, options) && !tick.hidden}
             {@const textLines = tick.text}
             {@const prevTextLines = t && positionedTicks[t - 1].text}
@@ -152,27 +152,41 @@
             {@const moveDown =
                 (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
                 (anchor === 'bottom' ? 1 : -1)}
+            {@const [textStyle, textClass] = resolveStyles(
+                plot,
+                tick,
+                {
+                    fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+                    ...options,
+                    fontSize: tickFontSize,
+                    stroke: null
+                },
+                'fill',
+                { x: true }
+            )}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
                 text-anchor={tickRotate < 0 ? 'end' : tickRotate > 0 ? 'start' : 'middle'}>
                 {#if tickSize}
+                    {@const [tickLineStyle, tickLineClass] = resolveStyles(
+                        plot,
+                        tick,
+                        options,
+                        'stroke',
+                        { x: true }
+                    )}
                     <line
-                        style={resolveScaledStyles(tick, options, {}, plot, 'stroke')}
+                        style={tickLineStyle}
+                        class={tickLineClass}
                         y2={anchor === 'bottom' ? tickSize : -tickSize} />
                 {/if}
 
                 <text
                     bind:this={tickTextElements[t]}
                     transform="translate(0, {moveDown})  rotate({tickRotate})"
-                    style:font-variant={isQuantitative ? 'tabular-nums' : 'normal'}
-                    style={resolveScaledStyles(
-                        tick,
-                        { ...options, fontSize: tickFontSize, stroke: null },
-                        {},
-                        plot,
-                        'fill'
-                    )}
+                    style={textStyle}
+                    class={textClass}
                     x={0}
                     y={0}
                     dominant-baseline={tickRotate !== 0
diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte
index 21f9489e..d0e10f53 100644
--- a/src/lib/marks/helpers/BaseAxisY.svelte
+++ b/src/lib/marks/helpers/BaseAxisY.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { getContext, untrack } from 'svelte';
+    import { getContext, tick, untrack } from 'svelte';
     import { randomId, testFilter } from '$lib/helpers/index.js';
-    import { resolveProp, resolveScaledStyles } from '$lib/helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
     import { max } from 'd3-array';
     import type {
         AutoMarginStores,
@@ -84,6 +84,8 @@
 
     let tickTexts = $state([] as SVGTextElement[]);
 
+    const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
+
     // generate id used for registering margins
     const id = randomId();
 
@@ -141,29 +143,43 @@
 </script>
 
 <g class="axis-y">
-    {#each positionedTicks as tick, t}
+    {#each positionedTicks as tick, t (t)}
         {#if testFilter(tick.value, options) && !tick.hidden}
             {@const tickClass_ = resolveProp(tickClass, tick.value)}
+            {@const [textStyle, textClass] = resolveStyles(
+                plot,
+                tick,
+                {
+                    fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+                    ...options,
+                    fontSize: tickFontSize,
+                    stroke: null
+                },
+                'fill',
+                { y: true }
+            )}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.dx +
                     marginLeft +
                     (anchor === 'left' ? 0 : width)},{tick.y + tick.dy})">
                 {#if tickSize}
+                    {@const [tickLineStyle, tickLineClass] = resolveStyles(
+                        plot,
+                        tick,
+                        options,
+                        'stroke',
+                        { y: true }
+                    )}
                     <line
-                        style={resolveScaledStyles(tick.value, options, {}, plot, 'stroke')}
+                        style={tickLineStyle}
+                        class={tickLineClass}
                         x2={anchor === 'left' ? -tickSize : tickSize} />
                 {/if}
                 <text
                     bind:this={tickTexts[t]}
-                    class={{ 'is-left': anchor === 'left' }}
-                    style={resolveScaledStyles(
-                        tick.value,
-                        { ...options, fontSize: tickFontSize, stroke: null },
-                        {},
-                        plot,
-                        'fill'
-                    )}
+                    class={[textClass, { 'is-left': anchor === 'left' }]}
+                    style={textStyle}
                     x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
                     dominant-baseline={LINE_ANCHOR[lineAnchor]}
                     >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 7e83e2cf..9b30d915 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -151,12 +151,12 @@ export type ScaleOptions = {
     base?: number;
     // sorting for band and point scales
     sort?:
-    | ChannelAccessor
-    | ((a: RawValue, b: RawValue) => number)
-    | {
-        channel: string;
-        order: 'ascending' | 'descending';
-    };
+        | ChannelAccessor
+        | ((a: RawValue, b: RawValue) => number)
+        | {
+              channel: string;
+              order: 'ascending' | 'descending';
+          };
     // symlog scales
     constant?: number;
 };
@@ -164,18 +164,18 @@ export type ScaleOptions = {
 export type ColorScaleOptions = ScaleOptions & {
     legend: boolean;
     type:
-    | ScaleType
-    | 'categorical'
-    | 'sequential'
-    | 'cyclical'
-    | 'threshold'
-    | 'quantile'
-    | 'quantize'
-    | 'diverging'
-    | 'diverging-log'
-    | 'diverging-pow'
-    | 'diverging-sqrt'
-    | 'diverging-symlog';
+        | ScaleType
+        | 'categorical'
+        | 'sequential'
+        | 'cyclical'
+        | 'threshold'
+        | 'quantile'
+        | 'quantize'
+        | 'diverging'
+        | 'diverging-log'
+        | 'diverging-pow'
+        | 'diverging-sqrt'
+        | 'diverging-symlog';
     scheme: string;
     /**
      * fallback color used for null/undefined
@@ -394,9 +394,9 @@ export type PlotOptions = {
      */
     locale: string;
     /**
-     *
+     * pass a @emotion/css function to style plot using dynamic classes
      */
-    css: (d: string) => string;
+    css: (d: string) => string | undefined;
 };
 
 export type PlotDefaults = {
@@ -438,6 +438,7 @@ export type PlotDefaults = {
      */
     numberFormat: Intl.NumberFormatOptions;
     markerDotRadius: number;
+    css: (d: string) => string | undefined;
 };
 
 export type GenericMarkOptions = Record<string, any>;
@@ -474,9 +475,9 @@ export type PlotScale = {
     uniqueScaleProps: Set<ChannelAccessor>;
     skip: Map<ScaledChannelName, Set<symbol>>;
     fn: ScaleLinear<RawValue, number> &
-    ScaleBand<RawValue> &
-    ScaleOrdinal<string | Date, number> &
-    ScaleOrdinal<string | Date, string>;
+        ScaleBand<RawValue> &
+        ScaleOrdinal<string | Date, number> &
+        ScaleOrdinal<string | Date, string>;
 };
 
 export type CurveName =
@@ -703,11 +704,11 @@ export type BaseMarkProps = Partial<{
 export type BorderRadius =
     | number
     | {
-        topLeft?: number;
-        topRight?: number;
-        bottomRight?: number;
-        bottomLeft?: number;
-    };
+          topLeft?: number;
+          topRight?: number;
+          bottomRight?: number;
+          bottomLeft?: number;
+      };
 
 export type BaseRectMarkProps = {
     inset?: ConstantAccessor<number>;
@@ -795,6 +796,7 @@ export type MarkStyleProps =
     | 'fill'
     | 'fillOpacity'
     | 'fontWeight'
+    | 'fontVariant'
     | 'fontSize'
     | 'fontStyle'
     | 'stroke'
@@ -894,4 +896,4 @@ export type MapMethod =
 
 export type MapOptions = Partial<Record<ScaledChannelName, MapMethod>>;
 
-export type UsedScales = Record<ScaledChannelName, boolean>;
\ No newline at end of file
+export type UsedScales = Record<ScaledChannelName, boolean>;

From d57dbd2407c79098e7145515be73ef092c44b9b7 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Thu, 22 May 2025 15:04:00 +0200
Subject: [PATCH 03/66] 0.2.6-next.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4b2d188f..fd69316e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.5",
+    "version": "0.2.6-next.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",

From d63a9ebfe7e7ec715161c510d3963b58b1566b29 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james.scott-brown@london.gov.uk>
Date: Thu, 22 May 2025 14:58:19 +0100
Subject: [PATCH 04/66] fix typos

---
 src/lib/Plot.svelte                     | 2 +-
 src/lib/helpers/autoScales.ts           | 2 +-
 src/lib/helpers/callWithProps.ts        | 2 +-
 src/lib/helpers/group.test.ts           | 2 +-
 src/lib/helpers/scales.ts               | 6 +++---
 src/lib/marks/GridX.svelte              | 4 ++--
 src/lib/marks/helpers/BaseAxisX.svelte  | 2 +-
 src/lib/marks/helpers/BaseAxisY.svelte  | 2 +-
 src/lib/marks/helpers/MarkerPath.svelte | 2 +-
 src/lib/transforms/bin.test.ts          | 4 ++--
 src/lib/transforms/bin.ts               | 2 +-
 src/routes/features/plot/+page.md       | 2 +-
 src/routes/features/scales/+page.md     | 6 +++---
 src/routes/getting-started/+page.md     | 2 +-
 src/routes/introduction/+page.md        | 4 ++--
 src/routes/marks/dot/+page.md           | 2 +-
 src/routes/marks/frame/+page.md         | 2 +-
 src/routes/marks/line/+page.md          | 2 +-
 src/routes/marks/text/+page.md          | 2 +-
 src/routes/marks/vector/+page.md        | 2 +-
 20 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/lib/Plot.svelte b/src/lib/Plot.svelte
index 65c9e2bb..ae81faf6 100644
--- a/src/lib/Plot.svelte
+++ b/src/lib/Plot.svelte
@@ -4,7 +4,7 @@
     their data and channels and computes the shared scales.
 
     The Plot component is split into two parts. This is the outer Plot which 
-    provides convenient defaults and automatically adds axes etc to the grapihcs.
+    provides convenient defaults and automatically adds axes etc to the graphics.
     The downside is that it adds a bunch of imports that you may not be using.
     To help with this you can use the core/Plot component directly for a more
     low-level Plot wrapper.
diff --git a/src/lib/helpers/autoScales.ts b/src/lib/helpers/autoScales.ts
index 9c1418f0..2577fed4 100644
--- a/src/lib/helpers/autoScales.ts
+++ b/src/lib/helpers/autoScales.ts
@@ -321,7 +321,7 @@ function getScaleRange(
                     : name === 'r'
                         ? [0, 10]
                         : name === 'symbol'
-                            ? // Plot is smart enough to pick different default shapes depending on wether
+                            ? // Plot is smart enough to pick different default shapes depending on whether
                             // or not there are filled dot marks in the plot, so we have to pass this
                             // information all the way here
                             plotHasFilledDotMarks
diff --git a/src/lib/helpers/callWithProps.ts b/src/lib/helpers/callWithProps.ts
index 78f3259d..25d707fb 100644
--- a/src/lib/helpers/callWithProps.ts
+++ b/src/lib/helpers/callWithProps.ts
@@ -4,7 +4,7 @@ type Setter = (v: any) => void;
 
 /**
  * Helper function to call a D3 "function class" while also calling
- * porperty setter functions on the result.
+ * property setter functions on the result.
  */
 export default function (
     d3func: () => Record<string, Setter>,
diff --git a/src/lib/helpers/group.test.ts b/src/lib/helpers/group.test.ts
index 102e6517..432a7240 100644
--- a/src/lib/helpers/group.test.ts
+++ b/src/lib/helpers/group.test.ts
@@ -27,7 +27,7 @@ describe('groupFacetsAndZ', () => {
         expect(result).toEqual([2, 1, 1, 1]);
     });
 
-    it('implicitely groups by fill and stroke if z is not present', () => {
+    it('implicitly groups by fill and stroke if z is not present', () => {
         const items = [
             { color: 'red', value: 10 },
             { color: 'red', value: 15 },
diff --git a/src/lib/helpers/scales.ts b/src/lib/helpers/scales.ts
index 706a3ccb..fbed5e58 100644
--- a/src/lib/helpers/scales.ts
+++ b/src/lib/helpers/scales.ts
@@ -402,9 +402,9 @@ const scaledChannelNames: ScaledChannelName[] = [
 ];
 
 /**
- * Mark channels can explicitely or implicitely be exempt from being
+ * Mark channels can explicitly or implicitly be exempt from being
  * mapped to a scale, so everywhere where values are being mapped to
- * scales, we need to check if the the scale is supposed to be used
+ * scales, we need to check if the scale is supposed to be used
  * not. That's what this function is used for.
  */
 export function getUsedScales(
@@ -450,7 +450,7 @@ export function projectXY(
 ): [number, number] {
     if (scales.projection) {
         // TODO: pretty sure this is not how projection streams are supposed to be used
-        // efficiantly, in observable plot, all data points of a mark are projected using
+        // efficiently, in observable plot, all data points of a mark are projected using
         // the same stream
         let x_, y_;
         const stream = scales.projection.stream({
diff --git a/src/lib/marks/GridX.svelte b/src/lib/marks/GridX.svelte
index d3a7605c..6ae6e5f9 100644
--- a/src/lib/marks/GridX.svelte
+++ b/src/lib/marks/GridX.svelte
@@ -7,12 +7,12 @@
     import { testFilter } from '$lib/helpers/index.js';
     import { RAW_VALUE } from '$lib/transforms/recordize.js';
 
-    type GrixXMarkProps = BaseMarkProps & {
+    type GridXMarkProps = BaseMarkProps & {
         data?: RawValue[];
         automatic?: boolean;
     };
 
-    let { data = [], automatic = false, ...options }: GrixXMarkProps = $props();
+    let { data = [], automatic = false, ...options }: GridXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte
index 85c7a99c..fe531fb2 100644
--- a/src/lib/marks/helpers/BaseAxisX.svelte
+++ b/src/lib/marks/helpers/BaseAxisX.svelte
@@ -88,7 +88,7 @@
         const T = tickObjects.length;
         for (let i = 0; i < T; i++) {
             let j = i;
-            // find the preceeding tick that was not hidden
+            // find the preceding tick that was not hidden
             do {
                 j--;
             } while (j >= 0 && tickObjects[j].hidden);
diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte
index d0e10f53..d0f85d53 100644
--- a/src/lib/marks/helpers/BaseAxisY.svelte
+++ b/src/lib/marks/helpers/BaseAxisY.svelte
@@ -70,7 +70,7 @@
         const T = tickObjects.length;
         for (let i = 0; i < T; i++) {
             let j = i;
-            // find the preceeding tick that was not hidden
+            // find the preceding tick that was not hidden
             do {
                 j--;
             } while (j >= 0 && tickObjects[j].hidden);
diff --git a/src/lib/marks/helpers/MarkerPath.svelte b/src/lib/marks/helpers/MarkerPath.svelte
index 72d4c691..d7d3ef2e 100644
--- a/src/lib/marks/helpers/MarkerPath.svelte
+++ b/src/lib/marks/helpers/MarkerPath.svelte
@@ -25,7 +25,7 @@
         datum: DataRecord;
         /**
          * the marker shape to use at the start of the path, defaults to
-         * cirlce
+         * circle
          */
         markerStart?: boolean | MarkerShape;
         /**
diff --git a/src/lib/transforms/bin.test.ts b/src/lib/transforms/bin.test.ts
index 3f554a29..d8478715 100644
--- a/src/lib/transforms/bin.test.ts
+++ b/src/lib/transforms/bin.test.ts
@@ -73,7 +73,7 @@ describe('binX', () => {
         y: d
     }));
 
-    it('bins dailys into weekly data', () => {
+    it('bins daily into weekly data', () => {
         const { data, ...channels } = binX(
             {
                 data: dailyData,
@@ -119,7 +119,7 @@ describe('binX', () => {
         expect(binDuration).toBeLessThanOrEqual(7 * 24 * 60 * 60 * 1000);
     });
 
-    // it.only('bins dailys into weekly data', () => {
+    // it.only('bins daily into weekly data', () => {
     //     const { data, ...channels } = binX(
     //         {
     //             data: dailyData,
diff --git a/src/lib/transforms/bin.ts b/src/lib/transforms/bin.ts
index c4898276..e5fba5fe 100644
--- a/src/lib/transforms/bin.ts
+++ b/src/lib/transforms/bin.ts
@@ -159,7 +159,7 @@ export function binY<T>(
 }
 
 /**
- * for binning in x and y dimension simulatenously
+ * for binning in x and y dimension simultaneously
  */
 export function bin<T>(
     { data, ...channels }: TransformArg<T, DataRecord>,
diff --git a/src/routes/features/plot/+page.md b/src/routes/features/plot/+page.md
index 68070ccc..dbdaafbc 100644
--- a/src/routes/features/plot/+page.md
+++ b/src/routes/features/plot/+page.md
@@ -336,7 +336,7 @@ to add events and scoped styles.
 
 ## Core plot
 
-SveltePlot provides a lot of convenience features with the unfortunate side-effect of blowing up the bundle size a bit. In situations where this is a concern, you may use a more light-weight version of the Plot component. Note that you need to explicitely include all marks that you want, such as grids or axis marks.
+SveltePlot provides a lot of convenience features with the unfortunate side-effect of blowing up the bundle size a bit. In situations where this is a concern, you may use a more light-weight version of the Plot component. Note that you need to explicitly include all marks that you want, such as grids or axis marks.
 
 ```svelte live
 <script>
diff --git a/src/routes/features/scales/+page.md b/src/routes/features/scales/+page.md
index ffef16f3..46a9eb5b 100644
--- a/src/routes/features/scales/+page.md
+++ b/src/routes/features/scales/+page.md
@@ -194,7 +194,7 @@ SveltePlot will automatically detect a scale type, but you can also set it expli
 
 ### Bi-symmetrical log scales
 
-For input domains ranging multiple magnitudes above and below zero, the bi-symmertrical log scale may be useful. It can be controlled using the `constant` option.
+For input domains ranging multiple magnitudes above and below zero, the bi-symmetrical log scale may be useful. It can be controlled using the `constant` option.
 
 ```svelte live
 <script>
@@ -246,7 +246,7 @@ For input domains ranging multiple magnitudes above and below zero, the bi-symme
 
 ### Point scale
 
-Point scales map a discrete input domain to single coordinates in your plot. SveltePlot automatically choses a point scale if you're mapping categorical data to an extent-less mark, like the [dot](/marks/dot) mark. In the following example, the car manufactors are categorical data so the plot uses a point scale for the x scale.
+Point scales map a discrete input domain to single coordinates in your plot. SveltePlot automatically chooses a point scale if you're mapping categorical data to an extent-less mark, like the [dot](/marks/dot) mark. In the following example, the car manufacturers are categorical data so the plot uses a point scale for the x scale.
 
 ```svelte live
 <script>
@@ -1085,7 +1085,7 @@ If you also pass the `n` option to set a different number of output values, Svel
 
 ### Quantile (discrete)
 
-Similiar to the `quantile` scale. Not to be confused with the continuous [quantile](<#Quantile-(continuous)>) scale.
+Similar to the `quantile` scale. Not to be confused with the continuous [quantile](<#Quantile-(continuous)>) scale.
 
 ```svelte live
 <script>
diff --git a/src/routes/getting-started/+page.md b/src/routes/getting-started/+page.md
index a354f11a..857ba1d6 100644
--- a/src/routes/getting-started/+page.md
+++ b/src/routes/getting-started/+page.md
@@ -9,7 +9,7 @@ Welcome! SveltePlot is still in an alpha stage, and its API may change. The docu
 
 ## Try SveltePlot online
 
-You can use SveltePlot inside any platform that supports Svelte 5, such as [StackBlitz](https://stackblitz.com/edit/vitejs-vite-mh9ogv?file=src%2FApp.svelte&terminal=dev). You can click the "Fork" button next to all examples in the SveltePlot documenation to edit them in the **Svelte playground**.
+You can use SveltePlot inside any platform that supports Svelte 5, such as [StackBlitz](https://stackblitz.com/edit/vitejs-vite-mh9ogv?file=src%2FApp.svelte&terminal=dev). You can click the "Fork" button next to all examples in the SveltePlot documentation to edit them in the **Svelte playground**.
 
 ```svelte live
 <script>
diff --git a/src/routes/introduction/+page.md b/src/routes/introduction/+page.md
index aaad65e0..f6d16de3 100644
--- a/src/routes/introduction/+page.md
+++ b/src/routes/introduction/+page.md
@@ -51,7 +51,7 @@ If we want to plot a line showing the closing price over time, all we have to wr
 [Fork](https://svelte.dev/playground/ec67a8a48dce45c29373781a6b68491a)
 
 :::info
-Noticed how SveltePlot added **axes automatically**? That's because it assumes that most plots will benefit from axes and it adds them implicitely. (You can disable this by passing `axes={false}` to the Plot component).
+Noticed how SveltePlot added **axes automatically**? That's because it assumes that most plots will benefit from axes and it adds them implicitly. (You can disable this by passing `axes={false}` to the Plot component).
 :::
 
 Let's say we also want to add a grid and a horizontal rule at zero. To activate the implicit grids we set the `grid` flag. Then we add the `RuleY` mark with `y` set to zero.
@@ -278,7 +278,7 @@ Also, somehow, these axes already know the extent of our data! This is possible
 </Plot>
 ```
 
-Similarily you can enable the implicit grids by setting `grid` to `true`:
+Similarly, you can enable the implicit grids by setting `grid` to `true`:
 
 ```svelte
 <Plot grid>
diff --git a/src/routes/marks/dot/+page.md b/src/routes/marks/dot/+page.md
index 34cd9503..99be8d85 100644
--- a/src/routes/marks/dot/+page.md
+++ b/src/routes/marks/dot/+page.md
@@ -73,7 +73,7 @@ When showing plots with a lot of dots, you can switch to canvas rendering to imp
 </Plot>
 ```
 
-dsdsd sd sd sdsd sd
+This example uses stroke color and mark shape/symbol to redundantly encode a categorical variable:
 
 ```svelte live
 <script>
diff --git a/src/routes/marks/frame/+page.md b/src/routes/marks/frame/+page.md
index 625df918..4925d02f 100644
--- a/src/routes/marks/frame/+page.md
+++ b/src/routes/marks/frame/+page.md
@@ -23,7 +23,7 @@ easiest way to add a frame is to set the <b>frame</b> option of the Plot element
 </Plot>
 ```
 
-If you need more customization options, you can add the frame manually by explicitely adding the <b
+If you need more customization options, you can add the frame manually by explicitly adding the <b
         >Frame</b
     > mark to your plot:
 
diff --git a/src/routes/marks/line/+page.md b/src/routes/marks/line/+page.md
index 1f8dc152..c55720ce 100644
--- a/src/routes/marks/line/+page.md
+++ b/src/routes/marks/line/+page.md
@@ -626,7 +626,7 @@ Lines can show a text label along the path:
 
 ### Stacking
 
-Line charts do not support implicit stacking, but you can use the [stack](/transforms/stack) transform explicitely. Here we're adding the baselines and toplines for each area in a stacked area chart:
+Line charts do not support implicit stacking, but you can use the [stack](/transforms/stack) transform explicitly. Here we're adding the baselines and toplines for each area in a stacked area chart:
 
 ```svelte live
 <script lang="ts">
diff --git a/src/routes/marks/text/+page.md b/src/routes/marks/text/+page.md
index 722b932a..db8cb3a2 100644
--- a/src/routes/marks/text/+page.md
+++ b/src/routes/marks/text/+page.md
@@ -129,7 +129,7 @@ The following channels are required:
 - **lineAnchor** - `top`, `bottom` or `middle`
 - **frameAnchor** - if no x or y is given, the text can be positioned relative to the plot frame - `bottom`, `top`, `left`, `right`, `top-left`, `bottom-left`, `top-right`, `bottom-right`
 - **class** - CSS class name to applied to the `<g>` around all texts
-- **textClass** - CSS class to be applied to each `<text>` element, can be a funciton of data
+- **textClass** - CSS class to be applied to each `<text>` element, can be a function of data
 
 ### Frame anchor
 
diff --git a/src/routes/marks/vector/+page.md b/src/routes/marks/vector/+page.md
index b34b1895..39685801 100644
--- a/src/routes/marks/vector/+page.md
+++ b/src/routes/marks/vector/+page.md
@@ -32,7 +32,7 @@ The vector mark lets you place shapes (like arrows) on your plot. If you want to
 
 ## Vector options:
 
-- **x** - the horizontal postion (or longitude)
+- **x** - the horizontal position (or longitude)
 - **y** - the vertical position (or latitude)
 - **length**
 - **rotate**

From edba919114b89800e0dfcaaff3e1a4ec8d00a030 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james.scott-brown@london.gov.uk>
Date: Thu, 22 May 2025 15:46:39 +0100
Subject: [PATCH 05/66] remove some unused imports

---
 src/lib/core/Facet.svelte                  | 3 +--
 src/lib/core/FacetGrid.svelte              | 2 +-
 src/lib/helpers/facets.ts                  | 2 +-
 src/lib/helpers/index.test.ts              | 2 +-
 src/lib/helpers/index.ts                   | 1 -
 src/lib/helpers/projection.ts              | 2 +-
 src/lib/helpers/reduce.test.ts             | 2 +-
 src/lib/helpers/reduce.ts                  | 3 +--
 src/lib/helpers/resolve.ts                 | 1 -
 src/lib/helpers/scales.ts                  | 2 +-
 src/lib/marks/Arrow.svelte                 | 1 -
 src/lib/marks/AxisY.svelte                 | 2 --
 src/lib/marks/CellX.svelte                 | 2 +-
 src/lib/marks/ColorLegend.svelte           | 2 +-
 src/lib/marks/DifferenceY.svelte           | 1 -
 src/lib/marks/Dot.svelte                   | 2 +-
 src/lib/marks/Geo.svelte                   | 4 +---
 src/lib/marks/GridY.svelte                 | 2 +-
 src/lib/marks/Rect.svelte                  | 3 ---
 src/lib/marks/helpers/BaseAxisY.svelte     | 2 +-
 src/lib/marks/helpers/DotCanvas.svelte     | 1 -
 src/lib/marks/helpers/GeoCanvas.svelte     | 2 +-
 src/lib/marks/helpers/events.ts            | 4 ++--
 src/lib/transforms/bin.ts                  | 3 +--
 src/lib/transforms/interval.test.ts        | 2 +-
 src/lib/transforms/rename.test.ts          | 4 +---
 src/lib/transforms/shift.ts                | 2 +-
 src/lib/transforms/window.ts               | 2 +-
 src/routes/marks/bar/BarPlot.svelte        | 1 -
 src/routes/marks/bar/StackedBarPlot.svelte | 1 -
 src/routes/marks/line/CO2Decades.svelte    | 2 +-
 src/routes/marks/rule/__+page.svelte       | 6 +-----
 src/routes/tests/marks/ForceExample.svelte | 4 ++--
 src/tests/line.test.ts                     | 2 +-
 src/tests/plot.test.ts                     | 2 +-
 35 files changed, 28 insertions(+), 51 deletions(-)

diff --git a/src/lib/core/Facet.svelte b/src/lib/core/Facet.svelte
index 65a02f16..99e41163 100644
--- a/src/lib/core/Facet.svelte
+++ b/src/lib/core/Facet.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { setContext, type Snippet } from 'svelte';
     import { resolveChannel } from '../helpers/resolve.js';
-    import type { BaseMarkProps, DataRecord, PlotScale, RawValue } from '../types.js';
-    import { identity } from '$lib/helpers';
+    import type { BaseMarkProps, DataRecord, RawValue } from '../types.js';
 
     let {
         fx,
diff --git a/src/lib/core/FacetGrid.svelte b/src/lib/core/FacetGrid.svelte
index 64193add..51d834ce 100644
--- a/src/lib/core/FacetGrid.svelte
+++ b/src/lib/core/FacetGrid.svelte
@@ -4,7 +4,7 @@
     marks for each facet domain value 
 -->
 <script lang="ts">
-    import { getContext, setContext, type Snippet } from 'svelte';
+    import { getContext, type Snippet } from 'svelte';
     import type { PlotContext, GenericMarkOptions, Mark } from '../types.js';
     import { scaleBand } from 'd3-scale';
     import Facet from './Facet.svelte';
diff --git a/src/lib/helpers/facets.ts b/src/lib/helpers/facets.ts
index 5cbdf88f..8ed7f1b5 100644
--- a/src/lib/helpers/facets.ts
+++ b/src/lib/helpers/facets.ts
@@ -1,4 +1,4 @@
-import type { GenericMarkOptions, Mark, PlotScale, RawValue } from '$lib/types.js';
+import type { GenericMarkOptions, Mark, RawValue } from '$lib/types.js';
 import { resolveChannel } from './resolve.js';
 
 /**
diff --git a/src/lib/helpers/index.test.ts b/src/lib/helpers/index.test.ts
index 88136dac..690da416 100644
--- a/src/lib/helpers/index.test.ts
+++ b/src/lib/helpers/index.test.ts
@@ -1,4 +1,4 @@
-import { coalesce, isObject, pick, omit } from './index';
+import { coalesce, isObject, omit } from './index';
 import { describe, it, expect } from 'vitest';
 
 describe('coalesce', () => {
diff --git a/src/lib/helpers/index.ts b/src/lib/helpers/index.ts
index eea4338b..f707610d 100644
--- a/src/lib/helpers/index.ts
+++ b/src/lib/helpers/index.ts
@@ -1,5 +1,4 @@
 import type {
-    BaseMarkProps,
     ChannelAccessor,
     ChannelName,
     DataRecord,
diff --git a/src/lib/helpers/projection.ts b/src/lib/helpers/projection.ts
index 353632dc..b2983cb8 100644
--- a/src/lib/helpers/projection.ts
+++ b/src/lib/helpers/projection.ts
@@ -1,6 +1,6 @@
 import { geoClipRectangle, geoPath, geoTransform } from 'd3-geo';
 
-import { constant, isObject, isValid } from './index.js';
+import { constant, isObject } from './index.js';
 
 const identity = constant({ stream: (stream) => stream });
 
diff --git a/src/lib/helpers/reduce.test.ts b/src/lib/helpers/reduce.test.ts
index 26fc4887..2ff3e409 100644
--- a/src/lib/helpers/reduce.test.ts
+++ b/src/lib/helpers/reduce.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { reduceOutputs, type ReducerName } from './reduce.js';
-import type { ChannelAccessor, ChannelName, RawValue } from '$lib/types.js';
+import type { ChannelAccessor, ChannelName } from '$lib/types.js';
 
 describe('reduceOutputs', () => {
     it('should correctly reduce outputs', () => {
diff --git a/src/lib/helpers/reduce.ts b/src/lib/helpers/reduce.ts
index f1b58ede..bbc59efe 100644
--- a/src/lib/helpers/reduce.ts
+++ b/src/lib/helpers/reduce.ts
@@ -1,12 +1,11 @@
 import type {
-    ChannelAccessor,
     ChannelName,
     Channels,
     DataRecord,
     DataRow,
     RawValue
 } from '$lib/types.js';
-import { min, max, mode, sum, mean, median, variance, deviation, quantile, range } from 'd3-array';
+import { min, max, mode, sum, mean, median, variance, deviation, quantile } from 'd3-array';
 import { resolveChannel } from './resolve.js';
 import { POSITION_CHANNELS } from './index.js';
 
diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
index f207e3c9..b52a8213 100644
--- a/src/lib/helpers/resolve.ts
+++ b/src/lib/helpers/resolve.ts
@@ -3,7 +3,6 @@ import isDataRecord from '$lib/helpers/isDataRecord.js';
 import isRawValue from '$lib/helpers/isRawValue.js';
 import type { MarkStyleProps, PlotState, ScaledDataRecord } from '$lib/types.js';
 import { isValid } from './isValid.js';
-import { pick } from 'es-toolkit';
 
 import type {
     ScaleName,
diff --git a/src/lib/helpers/scales.ts b/src/lib/helpers/scales.ts
index 706a3ccb..0b43c01f 100644
--- a/src/lib/helpers/scales.ts
+++ b/src/lib/helpers/scales.ts
@@ -1,4 +1,4 @@
-import { extent, range as d3Range, ascending } from 'd3-array';
+import { extent, ascending } from 'd3-array';
 
 import {
     isColorOrNull,
diff --git a/src/lib/marks/Arrow.svelte b/src/lib/marks/Arrow.svelte
index f757e23e..211a176d 100644
--- a/src/lib/marks/Arrow.svelte
+++ b/src/lib/marks/Arrow.svelte
@@ -9,7 +9,6 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
         RawValue
     } from '../types.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte
index 80b9384e..88915d05 100644
--- a/src/lib/marks/AxisY.svelte
+++ b/src/lib/marks/AxisY.svelte
@@ -6,11 +6,9 @@
         PlotContext,
         BaseMarkProps,
         RawValue,
-        DataRecord,
         FacetContext,
         DefaultOptions
     } from '../types.js';
-    import getBaseStyles from '$lib/helpers/getBaseStyles.js';
     import autoTimeFormat from '$lib/helpers/autoTimeFormat.js';
     import type { ConstantAccessor } from '$lib/types.js';
     import { autoTicks } from '$lib/helpers/autoTicks.js';
diff --git a/src/lib/marks/CellX.svelte b/src/lib/marks/CellX.svelte
index 0623cf11..7e55f567 100644
--- a/src/lib/marks/CellX.svelte
+++ b/src/lib/marks/CellX.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import Cell from './Cell.svelte';
-    import { recordizeX, recordizeY } from '$lib/index.js';
+    import { recordizeY } from '$lib/index.js';
     import type { BaseMarkProps, DataRow, RectMarkProps } from '../types.js';
     import type { ChannelAccessor } from '$lib/types.js';
 
diff --git a/src/lib/marks/ColorLegend.svelte b/src/lib/marks/ColorLegend.svelte
index 880ac729..e02489b8 100644
--- a/src/lib/marks/ColorLegend.svelte
+++ b/src/lib/marks/ColorLegend.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getContext } from 'svelte';
     import { Plot, AxisX, Frame } from '$lib/index.js';
-    import { symbol as d3Symbol, symbol } from 'd3-shape';
+    import { symbol as d3Symbol } from 'd3-shape';
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '$lib/helpers/symbols.js';
 
diff --git a/src/lib/marks/DifferenceY.svelte b/src/lib/marks/DifferenceY.svelte
index ae708af3..23a642a6 100644
--- a/src/lib/marks/DifferenceY.svelte
+++ b/src/lib/marks/DifferenceY.svelte
@@ -2,7 +2,6 @@
     import type {
         BaseMarkProps,
         ChannelAccessor,
-        ConstantAccessor,
         CurveName,
         DataRecord,
         PlotContext
diff --git a/src/lib/marks/Dot.svelte b/src/lib/marks/Dot.svelte
index 875e9776..f7189ec7 100644
--- a/src/lib/marks/Dot.svelte
+++ b/src/lib/marks/Dot.svelte
@@ -15,7 +15,7 @@
     import { sort } from '$lib/index.js';
     import Mark from '../Mark.svelte';
     import DotCanvas from './helpers/DotCanvas.svelte';
-    import { maybeData, testFilter, isValid } from '$lib/helpers/index.js';
+    import { maybeData, isValid } from '$lib/helpers/index.js';
     import { recordizeXY } from '$lib/transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
 
diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
index ecb780f1..a7b1b6df 100644
--- a/src/lib/marks/Geo.svelte
+++ b/src/lib/marks/Geo.svelte
@@ -4,9 +4,7 @@
         DataRecord,
         PlotContext,
         BaseMarkProps,
-        FacetContext,
-        ConstantAccessor,
-        UsedScales
+        ConstantAccessor
     } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
diff --git a/src/lib/marks/GridY.svelte b/src/lib/marks/GridY.svelte
index 37c95899..3aab94fe 100644
--- a/src/lib/marks/GridY.svelte
+++ b/src/lib/marks/GridY.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type { PlotContext, BaseMarkProps, RawValue, DataRecord } from '../types.js';
+    import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
     import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '$lib/helpers/autoTicks.js';
     import { testFilter } from '$lib/helpers/index.js';
diff --git a/src/lib/marks/Rect.svelte b/src/lib/marks/Rect.svelte
index cba71cd9..dbdb5ecd 100644
--- a/src/lib/marks/Rect.svelte
+++ b/src/lib/marks/Rect.svelte
@@ -6,8 +6,6 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { intervalX, intervalY } from '$lib/index.js';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { coalesce, maybeNumber } from '../helpers/index.js';
     import type {
         PlotContext,
         DataRecord,
@@ -15,7 +13,6 @@
         BaseRectMarkProps,
         ChannelAccessor
     } from '../types.js';
-    import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte
index d0e10f53..4af0d59c 100644
--- a/src/lib/marks/helpers/BaseAxisY.svelte
+++ b/src/lib/marks/helpers/BaseAxisY.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getContext, tick, untrack } from 'svelte';
+    import { getContext, untrack } from 'svelte';
     import { randomId, testFilter } from '$lib/helpers/index.js';
     import { resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
     import { max } from 'd3-array';
diff --git a/src/lib/marks/helpers/DotCanvas.svelte b/src/lib/marks/helpers/DotCanvas.svelte
index ac3c510c..a897b6ce 100644
--- a/src/lib/marks/helpers/DotCanvas.svelte
+++ b/src/lib/marks/helpers/DotCanvas.svelte
@@ -6,7 +6,6 @@
         ScaledDataRecord,
         PlotContext
     } from '$lib/types.js';
-    import { CSS_VAR } from '$lib/constants.js';
     import { resolveProp } from '$lib/helpers/resolve.js';
     import { maybeSymbol } from '$lib/helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
diff --git a/src/lib/marks/helpers/GeoCanvas.svelte b/src/lib/marks/helpers/GeoCanvas.svelte
index d45867e9..c9284462 100644
--- a/src/lib/marks/helpers/GeoCanvas.svelte
+++ b/src/lib/marks/helpers/GeoCanvas.svelte
@@ -8,7 +8,7 @@
     } from '$lib/types.js';
     import { CSS_VAR } from '$lib/constants.js';
     import { resolveProp, resolveScaledStyleProps } from '$lib/helpers/resolve.js';
-    import { getContext, untrack } from 'svelte';
+    import { getContext } from 'svelte';
     import { type GeoPath } from 'd3-geo';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
diff --git a/src/lib/marks/helpers/events.ts b/src/lib/marks/helpers/events.ts
index 8d5cf2a7..694346ca 100644
--- a/src/lib/marks/helpers/events.ts
+++ b/src/lib/marks/helpers/events.ts
@@ -1,6 +1,6 @@
-import type { BaseMarkProps, DataRecord, PlotScale, PlotScales, PlotState } from '$lib/types.js';
+import type { BaseMarkProps, DataRecord, PlotScale, PlotState } from '$lib/types.js';
 import type { MouseEventHandler } from 'svelte/elements';
-import { invert, pick } from 'es-toolkit';
+import { pick } from 'es-toolkit';
 import { RAW_VALUE } from '$lib/transforms/recordize.js';
 import { INDEX } from '$lib/constants.js';
 
diff --git a/src/lib/transforms/bin.ts b/src/lib/transforms/bin.ts
index c4898276..45bbd164 100644
--- a/src/lib/transforms/bin.ts
+++ b/src/lib/transforms/bin.ts
@@ -5,13 +5,12 @@ import { maybeInterval } from '$lib/helpers/autoTicks.js';
 import {
     bin as d3Bin,
     extent,
-    groups as d3Groups,
     thresholdFreedmanDiaconis,
     thresholdScott,
     thresholdSturges,
     type ThresholdCountGenerator
 } from 'd3-array';
-import { Reducer, reduceOutputs, type ReducerName } from '$lib/helpers/reduce.js';
+import { reduceOutputs, type ReducerName } from '$lib/helpers/reduce.js';
 import { groupFacetsAndZ } from '$lib/helpers/group.js';
 import { isDate } from '$lib/helpers/typeChecks.js';
 
diff --git a/src/lib/transforms/interval.test.ts b/src/lib/transforms/interval.test.ts
index 24ecd474..bc23986d 100644
--- a/src/lib/transforms/interval.test.ts
+++ b/src/lib/transforms/interval.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { intervalX, intervalY } from './interval.js';
 
 describe('intervalX', () => {
diff --git a/src/lib/transforms/rename.test.ts b/src/lib/transforms/rename.test.ts
index e453a54d..dfe06725 100644
--- a/src/lib/transforms/rename.test.ts
+++ b/src/lib/transforms/rename.test.ts
@@ -1,8 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { renameChannels, renameChannelsAndData, replaceChannels } from './rename.js';
+import { renameChannels } from './rename.js';
 import type { DataRecord } from '$lib/types.js';
-import { csvParse } from 'd3-dsv';
-import { readFileSync } from 'fs';
 
 const inputData: DataRecord[] = [
     { year: 2000, facet: 'A', value: 10 },
diff --git a/src/lib/transforms/shift.ts b/src/lib/transforms/shift.ts
index 3b59174c..53bc35b8 100644
--- a/src/lib/transforms/shift.ts
+++ b/src/lib/transforms/shift.ts
@@ -1,6 +1,6 @@
 import { resolveChannel } from '$lib/helpers/resolve.js';
 import { maybeTimeInterval } from '$lib/helpers/time.js';
-import type { ChannelName, DataRecord, TransformArg } from '$lib/types.js';
+import type { DataRecord, TransformArg } from '$lib/types.js';
 
 type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &
     {
diff --git a/src/lib/transforms/window.ts b/src/lib/transforms/window.ts
index 041b158d..d3585205 100644
--- a/src/lib/transforms/window.ts
+++ b/src/lib/transforms/window.ts
@@ -1,6 +1,6 @@
 import { maybeInterval } from '$lib/helpers/autoTicks.js';
 import { isValid } from '$lib/helpers/index.js';
-import { Reducer, mayberReducer, type ReducerName } from '$lib/helpers/reduce.js';
+import { mayberReducer, type ReducerName } from '$lib/helpers/reduce.js';
 import { resolveChannel } from '$lib/helpers/resolve.js';
 import type { DataRecord, ScaledChannelName, TransformArg } from '$lib/types.js';
 import { groups as d3Groups } from 'd3-array';
diff --git a/src/routes/marks/bar/BarPlot.svelte b/src/routes/marks/bar/BarPlot.svelte
index 1b31b926..eeb740f8 100644
--- a/src/routes/marks/bar/BarPlot.svelte
+++ b/src/routes/marks/bar/BarPlot.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Plot, BarY, RuleY } from 'svelteplot';
-    import { getContext } from 'svelte';
 
     import { page } from '$app/stores';
     let { alphabet } = $derived($page.data.data);
diff --git a/src/routes/marks/bar/StackedBarPlot.svelte b/src/routes/marks/bar/StackedBarPlot.svelte
index b4e9a6ea..c7c3b574 100644
--- a/src/routes/marks/bar/StackedBarPlot.svelte
+++ b/src/routes/marks/bar/StackedBarPlot.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Plot, BarX } from 'svelteplot';
-    import { getContext } from 'svelte';
     import { rollups } from 'd3-array';
 
     import { page } from '$app/stores';
diff --git a/src/routes/marks/line/CO2Decades.svelte b/src/routes/marks/line/CO2Decades.svelte
index 9439c68e..e16f6904 100644
--- a/src/routes/marks/line/CO2Decades.svelte
+++ b/src/routes/marks/line/CO2Decades.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Plot, Line, Pointer, Text, RectY, RuleY, Dot, selectLast } from '$lib/index.js';
-    import { groups, range } from 'd3-array';
+    import { range } from 'd3-array';
     import { page } from '$app/stores';
 
     let { co2 } = $derived($page.data.data);
diff --git a/src/routes/marks/rule/__+page.svelte b/src/routes/marks/rule/__+page.svelte
index fcddf078..21f80ecc 100644
--- a/src/routes/marks/rule/__+page.svelte
+++ b/src/routes/marks/rule/__+page.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
-    import { Plot, Frame, Line, RuleX, RuleY } from '$lib/index.js';
+    import { Plot, Line, RuleX, RuleY } from '$lib/index.js';
     import type { Datasets } from '$lib/types.js';
-    import { range } from 'd3-array';
     import { getContext } from 'svelte';
     import SineRules from './SineRules.svelte';
     import BarcodeExample from './BarcodeExample.svelte';
     import CandlestickExample from './CandlestickExample.svelte';
-    import { randomNormal, randomLcg } from 'd3-random';
     import Code from '../../Code.svelte';
 
-    const seededNormal = randomNormal.source(randomLcg(0.1234));
-
     const { aapl } = getContext<Datasets>('data');
 
     type AAPL = (typeof aapl)[0];
diff --git a/src/routes/tests/marks/ForceExample.svelte b/src/routes/tests/marks/ForceExample.svelte
index 1d6c2768..4da6a211 100644
--- a/src/routes/tests/marks/ForceExample.svelte
+++ b/src/routes/tests/marks/ForceExample.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { Plot, Arrow, Dot, Text, LineY, RuleY } from '$lib/index.js';
+    import { Plot, Arrow, Dot, LineY, RuleY } from '$lib/index.js';
     import { json } from 'd3-fetch';
-    import { range } from 'd3-array';
+    // import { range } from 'd3-array';
     import { noise } from './noise.js';
     import { forceSimulation, forceLink, forceManyBody, forceCenter } from 'd3-force';
 
diff --git a/src/tests/line.test.ts b/src/tests/line.test.ts
index 398043d6..51fe1363 100644
--- a/src/tests/line.test.ts
+++ b/src/tests/line.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, test } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import LineTest from './line.test.svelte';
 
diff --git a/src/tests/plot.test.ts b/src/tests/plot.test.ts
index a7aa009e..47f59252 100644
--- a/src/tests/plot.test.ts
+++ b/src/tests/plot.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
+import { render } from '@testing-library/svelte';
 import PlotTest from './plot.test.svelte';
 import ResizeObserver from 'resize-observer-polyfill';
 

From 8ea793b301f2afb282697fcc7008889ff1f16fa7 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Thu, 22 May 2025 16:20:19 +0200
Subject: [PATCH 06/66] fix: use ?. chaining for rendering snippets

---
 src/lib/Plot.svelte      | 4 ++--
 src/lib/core/Plot.svelte | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/Plot.svelte b/src/lib/Plot.svelte
index ae81faf6..e738abd2 100644
--- a/src/lib/Plot.svelte
+++ b/src/lib/Plot.svelte
@@ -74,7 +74,7 @@
     {#if restOptions.title}<h2>{restOptions.title}</h2>{/if}
     {#if restOptions.subtitle}<h3>{restOptions.subtitle}</h3>{/if}
     <!-- also pass on user header -->
-    {#if userHeader}{@render userHeader()}{/if}
+    {#if userHeader}{@render userHeader?.()}{/if}
     {#if restOptions.color?.legend}
         <ColorLegend />
     {/if}
@@ -85,7 +85,7 @@
 
 {#snippet footer()}
     {#if restOptions.caption}<div>{restOptions.caption}</div>{/if}
-    {#if userFooter}{@render userFooter()}{/if}
+    {#if userFooter}{@render userFooter?.()}{/if}
 {/snippet}
 
 <!-- There's a bug triggering RangeError: Maximum call stack size exceeded 
diff --git a/src/lib/core/Plot.svelte b/src/lib/core/Plot.svelte
index 6a694e00..e25e7e16 100644
--- a/src/lib/core/Plot.svelte
+++ b/src/lib/core/Plot.svelte
@@ -471,7 +471,7 @@
     data-testid={testid}>
     {#if header}
         <div class="plot-header">
-            {#if header}{@render header()}{/if}
+            {@render header?.()}
         </div>
     {/if}
     <div class="plot-body" bind:this={plotBody}>
@@ -500,11 +500,11 @@
                 {/if}
             </FacetGrid>
         </svg>
-        {#if overlay}<div class="plot-overlay">{@render overlay()}</div>{/if}
+        {#if overlay}<div class="plot-overlay">{@render overlay?.()}</div>{/if}
     </div>
     {#if footer}
         <figcaption class="plot-footer">
-            {#if footer}{@render footer()}{/if}
+            {@render footer?.()}
         </figcaption>
     {/if}
 </figure>

From f2a39cbdfcded573ced1c1af22830bae303c0524 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Thu, 22 May 2025 17:42:09 +0200
Subject: [PATCH 07/66] 0.2.6-next.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fd69316e..e380f6db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.6-next.0",
+    "version": "0.2.6-next.1",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",

From e80859f5a1d88227f260a73d65f9ff704dcabab5 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <James.Scott-Brown@london.gov.uk>
Date: Thu, 22 May 2025 16:45:43 +0100
Subject: [PATCH 08/66] fix test in interval.test.ts for machines in BST

---
 src/lib/transforms/interval.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/transforms/interval.test.ts b/src/lib/transforms/interval.test.ts
index 24ecd474..b214e481 100644
--- a/src/lib/transforms/interval.test.ts
+++ b/src/lib/transforms/interval.test.ts
@@ -53,7 +53,7 @@ describe('intervalX', () => {
             const xTime = item.x.getTime();
 
             // x1 should be before x
-            expect(x1Time).toBeLessThan(xTime);
+            expect(x1Time).toBeLessThanOrEqual(xTime);
 
             // x2 should be after x
             expect(x2Time).toBeGreaterThan(xTime);

From 04ea15f591b50e8e67d52081632e3eb699c950eb Mon Sep 17 00:00:00 2001
From: James Scott-Brown <James.Scott-Brown@london.gov.uk>
Date: Thu, 22 May 2025 17:11:20 +0100
Subject: [PATCH 09/66] remove spurious

---
 src/routes/getting-started/+page.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/getting-started/+page.md b/src/routes/getting-started/+page.md
index 857ba1d6..287bafe4 100644
--- a/src/routes/getting-started/+page.md
+++ b/src/routes/getting-started/+page.md
@@ -46,7 +46,7 @@ You can use SveltePlot inside any platform that supports Svelte 5, such as [Stac
 </Plot>
 ```
 
-[Fork](https://svelte.dev/playground/db6bcdf02859413fa9b3af456f9b9047).
+[Fork](https://svelte.dev/playground/db6bcdf02859413fa9b3af456f9b9047)
 
 ## Use SveltePlot in Svelte 5
 

From 510982c084943f3d56a98286feddaf4a749aadb4 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james.scott-brown@london.gov.uk>
Date: Thu, 22 May 2025 17:21:33 +0100
Subject: [PATCH 10/66] add links to 'Why SveltePlot' page

---
 src/routes/why-svelteplot/+page.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/routes/why-svelteplot/+page.md b/src/routes/why-svelteplot/+page.md
index 8804dc69..b0fb163b 100644
--- a/src/routes/why-svelteplot/+page.md
+++ b/src/routes/why-svelteplot/+page.md
@@ -3,7 +3,7 @@ title: Why SveltePlot?
 description: Why do we need yet another Svelte visualization framework?
 ---
 
-SveltePlot combines the concise API and concepts of Observable Plot with Svelte reactivity. It is not just a Svelte-wrapper, but re-implemented from scratch on top of D3. But what makes SveltePlot better than the existing visualization frameworks in Svelte?
+SveltePlot combines the concise API and concepts of [Observable Plot](https://observablehq.com/plot/) with [Svelte](https://svelte.dev/) reactivity. It is not just a Svelte-wrapper, but re-implemented from scratch on top of [D3](https://d3js.org/). But what makes SveltePlot better than the existing visualization frameworks in Svelte?
 
 ## Layered grammar of graphics
 
@@ -93,7 +93,7 @@ You can think of marks as the building blocks for your visualizations -- or the
 
 [fork](https://svelte.dev/playground/b329bb028a5445ba8f884291f0475be6?version=5)
 
-This makes it a lot easier to iterate over different ideas for visualizations. For instance, if we want to combine the dot plot above with a line chart, we can just throw in a Line mark as extra layer.
+This makes it a lot easier to iterate over different ideas for visualizations. For instance, if we want to combine the dot plot above with a line chart, we can just throw in a [Line mark](/marks/line) as extra layer.
 
 ```svelte live
 <script>
@@ -149,7 +149,7 @@ This makes it a lot easier to iterate over different ideas for visualizations. F
 </Plot>
 ```
 
-And if we wanted to add uncertainty ranges, we can add a rule mark as well.
+And if we wanted to add uncertainty ranges, we can add a [Rule mark](/marks/rule) as well.
 
 ```svelte live
 <script>
@@ -244,7 +244,7 @@ Take the following example, where you can filter the data using the [filter](/tr
 </Plot>
 ```
 
-Here's an example where we're binding a live-updated dataset to a line mark. Note how the `<path>` elements rendering the line and area get re-used, and ticks and grid lines get moved around instead of being re-created on every frame:
+Here's an example where we're binding a live-updated dataset to a [Line mark](/marks/line). Note how the `<path>` elements rendering the line and area get re-used, and ticks and grid lines get moved around instead of being re-created on every frame:
 
 ```svelte live
 <script lang="ts">
@@ -336,6 +336,7 @@ Here's an example where we're binding a live-updated dataset to a line mark. Not
 [fork](https://svelte.dev/playground/e136cdefec7943cba5e6d7b604a2e50c?version=5)
 
 Also, simply by being a Svelte framework, SveltePlot can support tweens and transitions! In the following plot, we're using the [Tween state](https://svelte.dev/docs/svelte-motion#Tween) from `svelte/motion` to smoothly update the vertical domain whenever the data changes.
+Try clicking on the bars to change their values.
 
 ```svelte live
 <script>
@@ -400,7 +401,7 @@ Also, simply by being a Svelte framework, SveltePlot can support tweens and tran
 
 ## Easy to extend
 
-You can extend SveltePlot by injecting regular Svelte snippets. For instance, the Line mark allows you to provide custom markers by passing a `marker` snippet. So why no use animated line markers, just because we can?
+You can extend SveltePlot by injecting regular Svelte snippets. For instance, the [Line mark](/marks/line) allows you to provide custom markers by passing a `marker` snippet. So why no use animated line markers, just because we can?
 
 ```svelte live
 <script lang="ts">
@@ -493,4 +494,4 @@ You can extend SveltePlot by injecting regular Svelte snippets. For instance, th
 
 ## Built on top of D3
 
-Like its inspiration Observable Plot, SveltePlot is built on top of D3.
+Like its inspiration Observable Plot, SveltePlot is built on top of [D3](https://d3js.org/).

From d6ce354e33eec06198542c6ba6a1c8354d77477a Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Fri, 23 May 2025 00:33:06 +0200
Subject: [PATCH 11/66] feat: allow passing categorical colors as
 Record<domain, color>

resolves #50
---
 src/lib/core/Plot.svelte            |  3 +-
 src/lib/helpers/autoScales.ts       | 21 ++++++++-
 src/routes/features/scales/+page.md | 48 +++++++++++++++++++
 src/tests/colors.test.svelte        |  9 ++++
 src/tests/colors.test.ts            | 71 +++++++++++++++++++++++++++++
 5 files changed, 149 insertions(+), 3 deletions(-)
 create mode 100644 src/tests/colors.test.svelte
 create mode 100644 src/tests/colors.test.ts

diff --git a/src/lib/core/Plot.svelte b/src/lib/core/Plot.svelte
index e25e7e16..2f98825a 100644
--- a/src/lib/core/Plot.svelte
+++ b/src/lib/core/Plot.svelte
@@ -62,6 +62,7 @@
         initialWidth: 500,
         inset: 0,
         colorScheme: 'turbo',
+        unknown: '#cccccc',
         dotRadius: 3,
         frame: false,
         axes: true,
@@ -160,7 +161,7 @@
     );
 
     // if the plot is showing filled dot marks we're using different defaults
-    // for the symbol axis range, so we're passing on this info to the createScales
+    // for the symbol axis range, so we're passing on this info to the computeScales
     // function below
     const hasFilledDotMarks = $derived(
         !!explicitMarks.find((d) => d.type === 'dot' && d.options.fill)
diff --git a/src/lib/helpers/autoScales.ts b/src/lib/helpers/autoScales.ts
index 2577fed4..19698bdf 100644
--- a/src/lib/helpers/autoScales.ts
+++ b/src/lib/helpers/autoScales.ts
@@ -47,6 +47,7 @@ import callWithProps from './callWithProps.js';
 import { interpolateLab, interpolateRound } from 'd3-interpolate';
 import { coalesce, maybeNumber } from './index.js';
 import { getLogTicks } from './getLogTicks.js';
+import { isPlainObject } from 'es-toolkit';
 
 const Scales: Record<
     ScaleType,
@@ -207,12 +208,28 @@ export function autoScaleColor({
         scheme,
         interpolate,
         pivot,
-        n = type === 'threshold' ? domain.length + 1 : 9
+        n = type === 'threshold' ? domain.length + 1 : 9,
+        unknown = plotDefaults.unknown
     } = scaleOptions;
 
     if (type === 'categorical' || type === 'ordinal') {
         // categorical
-        const scheme_ = scheme || plotDefaults.categoricalColorScheme;
+        let scheme_ = scheme || plotDefaults.categoricalColorScheme;
+
+        if (isPlainObject(scheme_)) {
+            const newScheme = Object.values(scheme_);
+            const newDomain = Object.keys(scheme_);
+            // for every value in domain that's not part of the scheme, map to unknown
+            for (const v of domain) {
+                if (scheme_[v] == null) {
+                    newDomain.push(v);
+                    newScheme.push(unknown)
+                }
+            }
+            domain = newDomain;
+            scheme_ = newScheme;
+        }
+
         // categorical scale
         range = Array.isArray(scheme_)
             ? scheme_
diff --git a/src/routes/features/scales/+page.md b/src/routes/features/scales/+page.md
index 46a9eb5b..b59c1f84 100644
--- a/src/routes/features/scales/+page.md
+++ b/src/routes/features/scales/+page.md
@@ -569,6 +569,54 @@ Note that the colors are picked in the order the categories appear in your datas
 </Plot>
 ```
 
+[fork](https://svelte.dev/playground/573be4d5791648fcb71d8ea9cdcc7112?version=5.33.1)
+
+As a simpler syntax you can also pass domain -> scheme mapping as object:
+
+```svelte live
+<script>
+    import { Plot, Dot } from 'svelteplot';
+    import { page } from '$app/state';
+    let { penguins } = $derived(page.data.data);
+</script>
+
+<Plot
+    grid
+    color={{
+        legend: true,
+        scheme: {
+            FEMALE: 'var(--svp-green)',
+            MALE: 'var(--svp-violet)'
+        }
+    }}>
+    <Dot
+        data={penguins}
+        x="culmen_length_mm"
+        y="culmen_depth_mm"
+        fill="sex" />
+</Plot>
+```
+
+```svelte
+<Plot
+    grid
+    color={{
+        legend: true,
+        scheme: {
+            FEMALE: 'green',
+            MALE: 'violet'
+        }
+    }}>
+    <Dot
+        data={penguins}
+        x="culmen_length_mm"
+        y="culmen_depth_mm"
+        stroke="sex" />
+</Plot>
+```
+
+[fork](https://svelte.dev/playground/49fb6bcbeb9e4789ba1680c0ffc63678?version=5.33.1)
+
 ## Continuous color scales
 
 ### Linear
diff --git a/src/tests/colors.test.svelte b/src/tests/colors.test.svelte
new file mode 100644
index 00000000..3a8bc978
--- /dev/null
+++ b/src/tests/colors.test.svelte
@@ -0,0 +1,9 @@
+<script>
+    import { Plot, Dot } from 'svelteplot';
+
+    let { colorOptions: color, dotOptions } = $props();
+</script>
+
+<Plot {color} width={100} height={100} axes={false}>
+    <Dot {...dotOptions} />
+</Plot>
diff --git a/src/tests/colors.test.ts b/src/tests/colors.test.ts
new file mode 100644
index 00000000..14204cbf
--- /dev/null
+++ b/src/tests/colors.test.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ColorsTest from './colors.test.svelte';
+import { categoricalSchemes } from 'svelteplot/helpers/colors';
+
+const observable10 = categoricalSchemes.get('observable10') as string[];
+
+describe('Colors', () => {
+    it('default color scheme is observable10', () => {
+        const { container } = render(ColorsTest, {
+            props: {
+                dotOptions: {
+                    data: [{
+                        x: 1, sex: 'male'
+                    }, {
+                        x: 2, sex: 'female'
+                    }
+                    ],
+                    x: 'x',
+                    y: 0,
+                    fill: 'sex'
+                },
+                colorOptions: {}
+            }
+        });
+        const dots = container.querySelectorAll('g.dots > path') as NodeListOf<SVGPathElement>;
+        expect(dots.length).toBe(2);
+        const styles = Array.from(dots).map(getDotStyle);
+        expect(styles[0].fill).toBe(observable10[0]);
+        expect(styles[1].fill).toBe(observable10[1]);
+    });
+
+    it('set custom scheme as object', () => {
+        const { container } = render(ColorsTest, {
+            props: {
+                dotOptions: {
+                    data: [{
+                        x: 1, sex: 'male'
+                    }, {
+                        x: 2, sex: 'female'
+                    }, {
+                        x: 3, sex: 'in-between'
+                    }
+                    ],
+                    x: 'x',
+                    y: 0,
+                    fill: 'sex'
+                },
+                colorOptions: {
+                    scheme: {
+                        male: 'green',
+                        female: 'violet'
+                    }
+                }
+            }
+        });
+        const dots = container.querySelectorAll('g.dots > path') as NodeListOf<SVGPathElement>;
+        expect(dots.length).toBe(3);
+        const styles = Array.from(dots).map(getDotStyle);
+        expect(styles[0].fill).toBe('green');
+        expect(styles[1].fill).toBe('violet');
+        expect(styles[2].fill).toBe('#cccccc');
+    });
+});
+
+function getDotStyle(path: SVGPathElement) {
+    return {
+        fill: path.style.fill,
+        stroke: path.style.stroke,
+    }
+}

From 95b73e0d93e1d41468db0be54ca82a8965e8949d Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Fri, 23 May 2025 00:35:52 +0200
Subject: [PATCH 12/66] docs: document defaults

---
 src/lib/types.ts                      | 4 ++++
 src/routes/features/defaults/+page.md | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/src/lib/types.ts b/src/lib/types.ts
index 9b30d915..7cd809d1 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -438,6 +438,10 @@ export type PlotDefaults = {
      */
     numberFormat: Intl.NumberFormatOptions;
     markerDotRadius: number;
+    /**
+     * fallback color to be used for null/NA
+     */
+    unknown: string;
     css: (d: string) => string | undefined;
 };
 
diff --git a/src/routes/features/defaults/+page.md b/src/routes/features/defaults/+page.md
index d634cd7c..8673f015 100644
--- a/src/routes/features/defaults/+page.md
+++ b/src/routes/features/defaults/+page.md
@@ -29,6 +29,7 @@ If you're using SveltePlot in a SvelteKit project, you can even set the defaults
 | _inset_                  | Plot inset                                                                                                                                                             | px      | `0`              |
 | _colorScheme_            | Default scheme for color scale                                                                                                                                         | string  | `'turbo'`        |
 | _categoricalColorScheme_ | Default scheme for [categorical color scales](/features/color-scales#Categorical-colors)                                                                               | string  | `'observable10'` |
+| _unknown_                | Fallback color to be used when mapping NAs to colors s                                                                                                                 | string  | `'#cccccc'`      |
 | _tickSize_               | Axis tick line length                                                                                                                                                  | px      | `6`              |
 | _tickPadding_            | Distance between tick line and label                                                                                                                                   | px      | `3`              |
 | _tickFontSize_           | Tick label font size                                                                                                                                                   | px      | `11`             |
@@ -39,6 +40,7 @@ If you're using SveltePlot in a SvelteKit project, you can even set the defaults
 | _graticuleStep_          | Default step size in graticules                                                                                                                                        | degrees | `10`             |
 | _locale_                 | Default locale used in axis ticks etc.                                                                                                                                 | string  | `'en-US'`        |
 | _numberFormat_           | Default [number format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) in axis ticks | object  |                  |
+| _css_                    | For passing an `@emotion/css` instance to your plots                                                                                                                   |         |                  |
 
 <style>
     * :global(td) {

From 75607a6499edf987630295b601d4a697ee6f6595 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Fri, 23 May 2025 00:43:34 +0200
Subject: [PATCH 13/66] 0.2.6-next.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e380f6db..2434c32a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.6-next.1",
+    "version": "0.2.6-next.2",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",

From 7c88b26ce6c572a7651eef263a49269790229c5c Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Fri, 23 May 2025 00:48:50 +0200
Subject: [PATCH 14/66] docs: remove trailing slash from sidebar links

---
 config/sidebar.ts | 68 +++++++++++++++++++++++------------------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/config/sidebar.ts b/config/sidebar.ts
index 82bfa689..e676f74e 100644
--- a/config/sidebar.ts
+++ b/config/sidebar.ts
@@ -49,46 +49,46 @@ export default {
             title: 'Marks',
             collapsible: true,
             items: [
-                { title: 'Area', to: '/marks/area/' },
-                { title: 'Arrow', to: '/marks/arrow/' },
-                { title: 'Axis', to: '/marks/axis/' },
-                { title: 'Bar', to: '/marks/bar/' },
-                { title: 'Bollinger', to: '/marks/bollinger/' },
-                { title: 'Box', to: '/marks/box/' },
-                { title: 'Brush', to: '/marks/brush/' },
-                { title: 'Cell', to: '/marks/cell/' },
-                { title: 'Custom', to: '/marks/custom/' },
-                { title: 'Difference', to: '/marks/difference/' },
-                { title: 'Dot', to: '/marks/dot/' },
-                { title: 'Frame', to: '/marks/frame/' },
-                { title: 'Geo', to: '/marks/geo/' },
-                { title: 'Grid', to: '/marks/grid/' },
-                { title: 'Line', to: '/marks/line/' },
-                { title: 'Link', to: '/marks/link/' },
-                { title: 'Pointer', to: '/marks/pointer/' },
-                { title: 'Vector', to: '/marks/vector/' },
-                { title: 'Rect', to: '/marks/rect/' },
-                { title: 'Regression', to: '/marks/regression/' },
-                { title: 'Rule', to: '/marks/rule/' },
-                { title: 'Text', to: '/marks/text/' },
-                { title: 'Tick', to: '/marks/tick/' }
+                { title: 'Area', to: '/marks/area' },
+                { title: 'Arrow', to: '/marks/arrow' },
+                { title: 'Axis', to: '/marks/axis' },
+                { title: 'Bar', to: '/marks/bar' },
+                { title: 'Bollinger', to: '/marks/bollinger' },
+                { title: 'Box', to: '/marks/box' },
+                { title: 'Brush', to: '/marks/brush' },
+                { title: 'Cell', to: '/marks/cell' },
+                { title: 'Custom', to: '/marks/custom' },
+                { title: 'Difference', to: '/marks/difference' },
+                { title: 'Dot', to: '/marks/dot' },
+                { title: 'Frame', to: '/marks/frame' },
+                { title: 'Geo', to: '/marks/geo' },
+                { title: 'Grid', to: '/marks/grid' },
+                { title: 'Line', to: '/marks/line' },
+                { title: 'Link', to: '/marks/link' },
+                { title: 'Pointer', to: '/marks/pointer' },
+                { title: 'Vector', to: '/marks/vector' },
+                { title: 'Rect', to: '/marks/rect' },
+                { title: 'Regression', to: '/marks/regression' },
+                { title: 'Rule', to: '/marks/rule' },
+                { title: 'Text', to: '/marks/text' },
+                { title: 'Tick', to: '/marks/tick' }
             ]
         },
         {
             title: 'Transforms',
             collapsible: true,
             items: [
-                { title: 'Bin', to: '/transforms/bin/' },
-                { title: 'Filter', to: '/transforms/filter/' },
-                { title: 'Group', to: '/transforms/group/' },
-                { title: 'Interval', to: '/transforms/interval/' },
-                { title: 'Map', to: '/transforms/map/' },
-                { title: 'Normalize', to: '/transforms/normalize/' },
-                { title: 'Select', to: '/transforms/select/' },
-                { title: 'Shift', to: '/transforms/shift/' },
-                { title: 'Sort', to: '/transforms/sort/' },
-                { title: 'Stack', to: '/transforms/stack/' },
-                { title: 'Window', to: '/transforms/window/' }
+                { title: 'Bin', to: '/transforms/bin' },
+                { title: 'Filter', to: '/transforms/filter' },
+                { title: 'Group', to: '/transforms/group' },
+                { title: 'Interval', to: '/transforms/interval' },
+                { title: 'Map', to: '/transforms/map' },
+                { title: 'Normalize', to: '/transforms/normalize' },
+                { title: 'Select', to: '/transforms/select' },
+                { title: 'Shift', to: '/transforms/shift' },
+                { title: 'Sort', to: '/transforms/sort' },
+                { title: 'Stack', to: '/transforms/stack' },
+                { title: 'Window', to: '/transforms/window' }
             ]
         },
         {

From 3a262caa36faf9636f73c73e4a011c0212c86c6a Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james.scott-brown@london.gov.uk>
Date: Fri, 23 May 2025 11:29:47 +0100
Subject: [PATCH 15/66] fix infinite loop due to comparing dates incorrectly
 (fix #55)

---
 src/lib/Mark.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/Mark.svelte b/src/lib/Mark.svelte
index 2eeeeef6..aef216e6 100644
--- a/src/lib/Mark.svelte
+++ b/src/lib/Mark.svelte
@@ -174,7 +174,9 @@
                 ScaledChannelName,
                 ScaleName
             ][]) {
-                if (array1[i][channel] !== array2[i][channel]) return true;
+                if (!isEqual(array1[i][channel], array2[i][channel])) {
+                    return true;
+                }
             }
         }
         return false;

From 0904f08187e30d318df4c22f09a6790e5b67a4ec Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Fri, 23 May 2025 14:15:12 +0200
Subject: [PATCH 16/66] 0.2.6-next.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2434c32a..057b2101 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.6-next.2",
+    "version": "0.2.6-next.3",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",

From aba3db6016b5e951a22420bd2f787f3f426fae54 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Fri, 23 May 2025 14:15:38 +0200
Subject: [PATCH 17/66] 0.2.6-next.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 057b2101..9503e2f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.6-next.3",
+    "version": "0.2.6-next.4",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",

From 3ec2d19d2b64d49f50046630447758e497a406f6 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Fri, 23 May 2025 14:18:20 +0200
Subject: [PATCH 18/66] fix: remove trailing slashes from sidebar links

---
 config/sidebar.ts | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/config/sidebar.ts b/config/sidebar.ts
index e676f74e..8ece7481 100644
--- a/config/sidebar.ts
+++ b/config/sidebar.ts
@@ -6,15 +6,15 @@ export default {
             items: [
                 {
                     title: 'Getting started',
-                    to: '/getting-started/'
+                    to: '/getting-started'
                 },
                 {
                     title: 'Why SveltePlot?',
-                    to: '/why-svelteplot/'
+                    to: '/why-svelteplot'
                 }
                 // {
                 //     title: 'Introduction',
-                //     to: '/introduction/'
+                //     to: '/introduction'
                 // }
             ]
         },
@@ -24,24 +24,24 @@ export default {
             items: [
                 {
                     title: 'Plot',
-                    to: '/features/plot/'
+                    to: '/features/plot'
                 },
 
                 {
                     title: 'Marks',
-                    to: '/features/marks/'
+                    to: '/features/marks'
                 },
                 {
                     title: 'Scales',
-                    to: '/features/scales/'
+                    to: '/features/scales'
                 },
                 {
                     title: 'Transforms',
-                    to: '/features/transforms/'
+                    to: '/features/transforms'
                 },
                 {
                     title: 'Faceting',
-                    to: '/features/facets/'
+                    to: '/features/facets'
                 }
             ]
         },
@@ -97,27 +97,27 @@ export default {
             items: [
                 {
                     title: 'Markers',
-                    to: '/features/markers/'
+                    to: '/features/markers'
                 },
                 {
                     title: 'Transforms',
-                    to: '/features/transforms/'
+                    to: '/features/transforms'
                 },
                 {
                     title: 'Projections',
-                    to: '/features/projections/'
+                    to: '/features/projections'
                 },
                 {
                     title: 'Interactivity',
-                    to: '/features/interactivity/'
+                    to: '/features/interactivity'
                 },
                 {
                     title: 'Defaults',
-                    to: '/features/defaults/'
+                    to: '/features/defaults'
                 },
                 {
                     title: 'Gradients',
-                    to: '/features/gradients/'
+                    to: '/features/gradients'
                 }
             ]
         }

From deb3d30bc6e703348fca420e517c2936715ee0e6 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james.scott-brown@london.gov.uk>
Date: Fri, 23 May 2025 17:40:00 +0100
Subject: [PATCH 19/66] fix axis labels in example (fix #54)

---
 src/routes/transforms/interval/+page.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/transforms/interval/+page.md b/src/routes/transforms/interval/+page.md
index 9c6101e1..cbe417dd 100644
--- a/src/routes/transforms/interval/+page.md
+++ b/src/routes/transforms/interval/+page.md
@@ -11,12 +11,12 @@ The interval transform is often used for time-series bar charts. For example, co
     import { Plot, BarY, RuleY } from 'svelteplot';
     import type { Datasets } from '$lib/types.js';
 
-    const MONTH_YEAR = new Intl.DateTimeFormat('en-US', {
+    const DAY_MONTH = new Intl.DateTimeFormat('en-US', {
+        day: 'numeric',
         month: 'short',
-        year: 'numeric'
     });
-    const tickFormat = (date: Date) =>
-        MONTH_YEAR.format(date).split(' ');
+
+    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ');
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
@@ -72,12 +72,12 @@ The meaning of the interval mark option depends on the associated mark, such as
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
 
-    const MONTH_DAY = new Intl.DateTimeFormat('en-US', {
+    const DAY_MONTH = new Intl.DateTimeFormat('en-US', {
+        day: 'numeric',
         month: 'short',
-        date: 'numeric'
     });
-    const tickFormat = (date: Date) =>
-        MONTH_DAY.format(date).split(' ');
+
+    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ');
 </script>
 
 <Plot marginLeft={40} x={{ tickFormat }} grid>

From 52e6fcec9b269f18ed8738c6703ac9985c8c6676 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <james.scott-brown@london.gov.uk>
Date: Fri, 23 May 2025 21:40:38 +0100
Subject: [PATCH 20/66] put day nuber above month in x-axis label

---
 src/routes/transforms/interval/+page.md | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/routes/transforms/interval/+page.md b/src/routes/transforms/interval/+page.md
index cbe417dd..16ffd80f 100644
--- a/src/routes/transforms/interval/+page.md
+++ b/src/routes/transforms/interval/+page.md
@@ -16,7 +16,7 @@ The interval transform is often used for time-series bar charts. For example, co
         month: 'short',
     });
 
-    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ');
+    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse();
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
@@ -37,9 +37,15 @@ In contrast, a [rectY](/marks/rect) mark with the interval option and the day in
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
+    
+    const DAY_MONTH = new Intl.DateTimeFormat('en-US', {
+        day: 'numeric',
+        month: 'short',
+    });
+    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse();
 </script>
 
-<Plot marginLeft={40} x={{ type: 'time' }} grid>
+<Plot marginLeft={40} x={{ tickFormat }} grid>
     <RectY
         data={aapl.slice(-40)}
         x="Date"
@@ -51,7 +57,7 @@ In contrast, a [rectY](/marks/rect) mark with the interval option and the day in
 ```
 
 ```svelte
-<Plot marginLeft={40} x={{ type: 'time' }} grid>
+<Plot marginLeft={40} x={{ tickFormat }} grid>
     <RectY
         data={aapl.slice(-40)}
         x="Date"
@@ -77,7 +83,7 @@ The meaning of the interval mark option depends on the associated mark, such as
         month: 'short',
     });
 
-    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ');
+    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse();
 </script>
 
 <Plot marginLeft={40} x={{ tickFormat }} grid>

From b1f6c5a3fdd86618a978c01eec47e93d992e9128 Mon Sep 17 00:00:00 2001
From: Johan Ronsse <johan.ronsse@gmail.com>
Date: Sun, 25 May 2025 08:16:57 -0600
Subject: [PATCH 21/66] Facets fixes

* Consistency between page title and sidebar title
* Add period to end of sentence
---
 config/sidebar.ts                   | 2 +-
 src/routes/features/facets/+page.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/sidebar.ts b/config/sidebar.ts
index 8ece7481..10f7c36f 100644
--- a/config/sidebar.ts
+++ b/config/sidebar.ts
@@ -40,7 +40,7 @@ export default {
                     to: '/features/transforms'
                 },
                 {
-                    title: 'Faceting',
+                    title: 'Facets',
                     to: '/features/facets'
                 }
             ]
diff --git a/src/routes/features/facets/+page.md b/src/routes/features/facets/+page.md
index 0a1077d1..81ff0ae8 100644
--- a/src/routes/features/facets/+page.md
+++ b/src/routes/features/facets/+page.md
@@ -2,7 +2,7 @@
 title: Facets
 ---
 
-Facets are a way to split a plot into multiple panels
+Facets are a way to split a plot into multiple panels.
 
 ```svelte live
 <script>

From 491f71f25e6851f46e783b9271af3127d360b1f7 Mon Sep 17 00:00:00 2001
From: James Scott-Brown <James.Scott-Brown@london.gov.uk>
Date: Mon, 26 May 2025 11:01:53 +0100
Subject: [PATCH 22/66] Align swatches and labels in ColorLegend

---
 src/lib/marks/ColorLegend.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/marks/ColorLegend.svelte b/src/lib/marks/ColorLegend.svelte
index e02489b8..4e0f3065 100644
--- a/src/lib/marks/ColorLegend.svelte
+++ b/src/lib/marks/ColorLegend.svelte
@@ -163,7 +163,8 @@
     .item,
     .item-label,
     .swatch {
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
     }
     .item-label {
         vertical-align: super;

From ec2def9c232b55f2ee84ed8fea6d350b769f2420 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 16:27:58 +0200
Subject: [PATCH 23/66] 0.2.6-next.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9503e2f7..c98c6dfe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.6-next.4",
+    "version": "0.2.6-next.5",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",

From 35cc427d3695a9649a1af958c7f6c82f72da02f3 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 18:31:44 +0200
Subject: [PATCH 24/66] refine graticule mark props

---
 src/lib/marks/Graticule.svelte | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/lib/marks/Graticule.svelte b/src/lib/marks/Graticule.svelte
index aa6ae92d..05d4c9c0 100644
--- a/src/lib/marks/Graticule.svelte
+++ b/src/lib/marks/Graticule.svelte
@@ -1,8 +1,18 @@
+<script module lang="ts">
+    import type { DefaultOptions, BaseMarkProps } from '../types.js';
+    export type GraticuleMarkProps = Omit<
+        BaseMarkProps,
+        'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'cursor'
+    > & {
+        step?: number;
+        stepX?: number;
+        stepY?: number;
+    };
+</script>
+
 <script lang="ts">
     import Geo from './Geo.svelte';
     import { geoGraticule } from 'd3-geo';
-    import type { DefaultOptions, BaseMarkProps } from '../types.js';
-
     import { getContext } from 'svelte';
 
     const DEFAULTS = {
@@ -10,12 +20,6 @@
         ...getContext<Partial<DefaultOptions>>('svelteplot/defaults')
     };
 
-    type GraticuleMarkProps = BaseMarkProps & {
-        step?: number;
-        stepX?: number;
-        stepY?: number;
-    };
-
     let { step = DEFAULTS.graticuleStep, stepX, stepY, ...options }: GraticuleMarkProps = $props();
 
     let graticule = $derived.by(() => {

From a68281632c82aae52fdc6811416ac2f4c66e2e46 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 18:37:11 +0200
Subject: [PATCH 25/66] refine area mark prop types

---
 src/lib/marks/Area.svelte  | 24 +++++++-----------------
 src/lib/marks/AreaX.svelte |  9 +++------
 src/lib/marks/AreaY.svelte | 19 +++++--------------
 3 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
index 0e19c8bb..6f3d8e0d 100644
--- a/src/lib/marks/Area.svelte
+++ b/src/lib/marks/Area.svelte
@@ -1,16 +1,17 @@
 <script module lang="ts">
     export type AreaMarkProps = {
+        data: DataRecord[];
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
         z?: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
         curve?: CurveName | CurveFactory;
         tension?: number;
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
-    };
+    } & BaseMarkProps;
 </script>
 
 <script lang="ts">
@@ -38,17 +39,6 @@
     import type { RawValue } from '$lib/types.js';
     import type { StackOptions } from '$lib/transforms/stack.js';
 
-    type AreaProps = BaseMarkProps & {
-        data: DataRecord[];
-        /**
-         * Lorem ipsum
-         */
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-    } & AreaMarkProps;
-
     let {
         data,
         /** the curve */
@@ -57,7 +47,7 @@
         class: className = '',
         canvas = false,
         ...options
-    }: AreaProps = $props();
+    }: AreaMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/AreaX.svelte b/src/lib/marks/AreaX.svelte
index c1b19f06..9851664e 100644
--- a/src/lib/marks/AreaX.svelte
+++ b/src/lib/marks/AreaX.svelte
@@ -3,15 +3,12 @@
     import { renameChannels } from '$lib/transforms/rename.js';
     import { stackX } from '$lib/transforms/stack.js';
     import { recordizeX } from '$lib/transforms/recordize.js';
-    import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+    import type { ChannelAccessor } from '../types.js';
 
-    type AreaXProps = BaseMarkProps & {
-        data: DataRecord[];
+    type AreaXProps = Omit<AreaMarkProps, 'y1' | 'y2'> & {
         x?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
         y?: ChannelAccessor;
-    } & AreaMarkProps;
+    };
 
     // we're discarding y1 and y2 props since they are not
     let { data, stack, ...options }: AreaXProps = $props();
diff --git a/src/lib/marks/AreaY.svelte b/src/lib/marks/AreaY.svelte
index e607e40a..7d422f08 100644
--- a/src/lib/marks/AreaY.svelte
+++ b/src/lib/marks/AreaY.svelte
@@ -1,3 +1,6 @@
+<!--
+@component
+-->
 <script lang="ts">
     import Area, { type AreaMarkProps } from './Area.svelte';
     import { renameChannels } from '$lib/transforms/rename.js';
@@ -8,16 +11,10 @@
     /**
      * AreaY mark foo
      */
-    type AreaYProps = BaseMarkProps & {
-        data: DataRecord[];
+    type AreaYProps = Omit<AreaMarkProps, 'x1' | 'x2'> & {
         x?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        /**
-         * this some extensive help for the y channel
-         */
         y?: ChannelAccessor;
-    } & AreaMarkProps;
+    };
 
     let { data, stack, ...options }: AreaYProps = $props();
 
@@ -29,10 +26,4 @@
     );
 </script>
 
-<!--
-@component
-The AreaY component can be used for foobar
-
--->
-
 <Area {...args}></Area>

From 7ab586bfbb9bd1ee71dc0a0135cb535f7642a40f Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 18:42:35 +0200
Subject: [PATCH 26/66] refine & export arrow mark props

---
 src/lib/marks/Arrow.svelte | 46 ++++++++++++++++----------------
 src/lib/types.ts           | 54 +++++++++++++++++++-------------------
 2 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/lib/marks/Arrow.svelte b/src/lib/marks/Arrow.svelte
index 211a176d..c8197cb1 100644
--- a/src/lib/marks/Arrow.svelte
+++ b/src/lib/marks/Arrow.svelte
@@ -1,32 +1,14 @@
 <!--
-    @component Arrow2
+    @component Arrow
 -->
-<script lang="ts">
-    import { getContext, type Snippet } from 'svelte';
-    import type {
-        PlotContext,
-        DataRecord,
-        BaseMarkProps,
-        ConstantAccessor,
-        ChannelAccessor,
-        RawValue
-    } from '../types.js';
-    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { coalesce, maybeData, maybeNumber } from '../helpers/index.js';
-    import Mark from '../Mark.svelte';
-    import { arrowPath, maybeSweep, type SweepOption } from '../helpers/arrowPath.js';
-    import { replaceChannels } from '$lib/transforms/rename.js';
-    import { addEventHandlers } from './helpers/events.js';
-    import GroupMultiple from './helpers/GroupMultiple.svelte';
-
-    type ArrowProps = BaseMarkProps & {
+<script module lang="ts">
+    export type ArrowMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
         data: DataRecord[];
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         x1: ChannelAccessor;
         y1: ChannelAccessor;
         x2: ChannelAccessor;
         y2: ChannelAccessor;
-        stroke?: ChannelAccessor;
         /**
          * the bend angle, in degrees; defaults to 0°; true for 22.5°
          */
@@ -52,10 +34,28 @@
          */
         inset?: ConstantAccessor<number>;
         sweep?: SweepOption;
-        children?: Snippet;
     };
+</script>
+
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        RawValue
+    } from '../types.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { coalesce, maybeData, maybeNumber } from '../helpers/index.js';
+    import Mark from '../Mark.svelte';
+    import { arrowPath, maybeSweep, type SweepOption } from '../helpers/arrowPath.js';
+    import { replaceChannels } from '$lib/transforms/rename.js';
+    import { addEventHandlers } from './helpers/events.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
 
-    let { data = [{}], class: className = null, ...options }: ArrowProps = $props();
+    let { data = [{}], class: className = null, ...options }: ArrowMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 7cd809d1..6490f428 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -151,12 +151,12 @@ export type ScaleOptions = {
     base?: number;
     // sorting for band and point scales
     sort?:
-        | ChannelAccessor
-        | ((a: RawValue, b: RawValue) => number)
-        | {
-              channel: string;
-              order: 'ascending' | 'descending';
-          };
+    | ChannelAccessor
+    | ((a: RawValue, b: RawValue) => number)
+    | {
+        channel: string;
+        order: 'ascending' | 'descending';
+    };
     // symlog scales
     constant?: number;
 };
@@ -164,18 +164,18 @@ export type ScaleOptions = {
 export type ColorScaleOptions = ScaleOptions & {
     legend: boolean;
     type:
-        | ScaleType
-        | 'categorical'
-        | 'sequential'
-        | 'cyclical'
-        | 'threshold'
-        | 'quantile'
-        | 'quantize'
-        | 'diverging'
-        | 'diverging-log'
-        | 'diverging-pow'
-        | 'diverging-sqrt'
-        | 'diverging-symlog';
+    | ScaleType
+    | 'categorical'
+    | 'sequential'
+    | 'cyclical'
+    | 'threshold'
+    | 'quantile'
+    | 'quantize'
+    | 'diverging'
+    | 'diverging-log'
+    | 'diverging-pow'
+    | 'diverging-sqrt'
+    | 'diverging-symlog';
     scheme: string;
     /**
      * fallback color used for null/undefined
@@ -479,9 +479,9 @@ export type PlotScale = {
     uniqueScaleProps: Set<ChannelAccessor>;
     skip: Map<ScaledChannelName, Set<symbol>>;
     fn: ScaleLinear<RawValue, number> &
-        ScaleBand<RawValue> &
-        ScaleOrdinal<string | Date, number> &
-        ScaleOrdinal<string | Date, string>;
+    ScaleBand<RawValue> &
+    ScaleOrdinal<string | Date, number> &
+    ScaleOrdinal<string | Date, string>;
 };
 
 export type CurveName =
@@ -701,18 +701,18 @@ export type BaseMarkProps = Partial<{
     /**
      * if you want to give your mark element an extra CSS class
      */
-    class: string;
+    class: string | null;
     cursor: ConstantAccessor<CSS.Property.Cursor>;
 }>;
 
 export type BorderRadius =
     | number
     | {
-          topLeft?: number;
-          topRight?: number;
-          bottomRight?: number;
-          bottomLeft?: number;
-      };
+        topLeft?: number;
+        topRight?: number;
+        bottomRight?: number;
+        bottomLeft?: number;
+    };
 
 export type BaseRectMarkProps = {
     inset?: ConstantAccessor<number>;

From fcdc48fc6cc13b0c1ff947f8dbd705d306b6c462 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 18:49:25 +0200
Subject: [PATCH 27/66] refine & export axisX mark props

---
 src/lib/marks/AxisX.svelte | 71 ++++++++++++++++++++------------------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte
index 45cf8caf..cced3c19 100644
--- a/src/lib/marks/AxisX.svelte
+++ b/src/lib/marks/AxisX.svelte
@@ -1,3 +1,27 @@
+<script module lang="ts">
+    export type AxisXMarkProps = Omit<
+        BaseMarkProps,
+        'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+    > & {
+        data?: RawValue[];
+        automatic?: boolean;
+        title?: string;
+        anchor?: 'top' | 'bottom';
+        interval?: string | number;
+        facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
+        labelAnchor?: 'auto' | 'left' | 'center' | 'right';
+        tickSize?: number;
+        tickFontSize?: ConstantAccessor<number>;
+        tickPadding?: number;
+        tickFormat?:
+            | 'auto'
+            | Intl.DateTimeFormatOptions
+            | Intl.NumberFormatOptions
+            | ((d: RawValue) => string);
+        tickClass?: ConstantAccessor<string>;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
@@ -23,30 +47,11 @@
         ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
     };
 
-    type AxisXProps = BaseMarkProps & {
-        data?: RawValue[];
-        automatic?: boolean;
-        title?: string;
-        anchor?: 'top' | 'bottom';
-        interval?: string | number;
-        facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
-        labelAnchor?: 'auto' | 'left' | 'center' | 'right';
-        tickSize?: number;
-        tickFontSize?: ConstantAccessor<number>;
-        tickPadding?: number;
-        tickFormat?:
-            | 'auto'
-            | Intl.DateTimeFormatOptions
-            | Intl.NumberFormatOptions
-            | ((d: RawValue) => string);
-        tickClass?: ConstantAccessor<string>;
-    };
-
     let {
         data = [],
         automatic = false,
         title,
-        anchor = DEFAULTS.axisXAnchor,
+        anchor = DEFAULTS.axisXAnchor as 'top' | 'bottom',
         facetAnchor = 'auto',
         interval,
         tickSize = DEFAULTS.tickSize,
@@ -55,17 +60,18 @@
         labelAnchor,
         tickFormat,
         tickClass,
+        class: className,
         ...options
-    }: AxisXProps = $props();
+    }: AxisXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -103,12 +109,11 @@
                         }).format(d)
     );
 
-    let optionsLabel = $derived(plot.options?.x?.label);
-
-    let scaleType = $derived(plot.scales.x.type);
-    let isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
+    const optionsLabel = $derived(plot.options?.x?.label);
+    const scaleType = $derived(plot.scales.x.type);
+    const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
 
-    let useTitle = $derived(
+    const useTitle = $derived(
         title ||
             (optionsLabel === null
                 ? null
@@ -123,15 +128,15 @@
                     : '')
     );
 
-    let useLabelAnchor = $derived(labelAnchor || plot.options?.x?.labelAnchor || 'auto');
-    let titleAlign = $derived(
+    const useLabelAnchor = $derived(labelAnchor || plot.options?.x?.labelAnchor || 'auto');
+    const titleAlign = $derived(
         useLabelAnchor === 'auto' ? (isQuantitative ? 'right' : 'center') : useLabelAnchor
     );
 
     const { getFacetState } = getContext<FacetContext>('svelteplot/facet');
-    let { left, top, bottom, bottomEmpty, topEmpty } = $derived(getFacetState());
+    const { left, top, bottom, bottomEmpty, topEmpty } = $derived(getFacetState());
 
-    let useFacetAnchor = $derived(
+    const useFacetAnchor = $derived(
         facetAnchor !== 'auto' ? facetAnchor : anchor === 'bottom' ? 'bottom-empty' : 'top-empty'
     );
     let showAxis = $state(false);

From 474f50d629bb076403a034932c3467c09302f910 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 18:49:36 +0200
Subject: [PATCH 28/66] bump dependencies

---
 package.json   |  14 +-
 pnpm-lock.yaml | 849 ++++++++++++-------------------------------------
 2 files changed, 217 insertions(+), 646 deletions(-)

diff --git a/package.json b/package.json
index c98c6dfe..1e5f235b 100644
--- a/package.json
+++ b/package.json
@@ -53,13 +53,13 @@
         "@sveltejs/adapter-auto": "^6.0.1",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/eslint-config": "^8.2.0",
-        "@sveltejs/kit": "^2.21.0",
+        "@sveltejs/kit": "^2.21.1",
         "@sveltejs/package": "^2.3.11",
         "@sveltejs/vite-plugin-svelte": "5.0.3",
         "@sveltepress/theme-default": "^6.0.3",
         "@sveltepress/twoslash": "^1.2.2",
         "@sveltepress/vite": "^1.2.2",
-        "@testing-library/svelte": "^5.2.7",
+        "@testing-library/svelte": "^5.2.8",
         "@testing-library/user-event": "^14.6.1",
         "@types/d3-array": "^3.2.1",
         "@types/d3-color": "^3.1.3",
@@ -77,9 +77,9 @@
         "d3-dsv": "^3.0.1",
         "d3-fetch": "^3.0.1",
         "d3-force": "^3.0.0",
-        "eslint": "^9.26.0",
+        "eslint": "^9.27.0",
         "eslint-config-prettier": "^10.1.5",
-        "eslint-plugin-svelte": "3.7.0",
+        "eslint-plugin-svelte": "3.9.0",
         "jsdom": "^26.1.0",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
@@ -97,7 +97,7 @@
         "typedoc-plugin-markdown": "^4.6.3",
         "typescript": "^5.8.3",
         "vite": "^6.3.5",
-        "vitest": "^3.1.3",
+        "vitest": "^3.1.4",
         "vitest-matchmedia-mock": "^2.0.3"
     },
     "types": "./dist/index.d.ts",
@@ -116,9 +116,9 @@
         "d3-scale-chromatic": "^3.1.0",
         "d3-shape": "^3.2.0",
         "d3-time": "^3.1.0",
-        "es-toolkit": "^1.37.2",
+        "es-toolkit": "^1.38.0",
         "fast-equals": "^5.2.2",
         "merge-deep": "^3.0.3",
-        "svelte": "5.30.1"
+        "svelte": "5.33.2"
     }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9db2f52..2836b37a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,8 +48,8 @@ importers:
         specifier: ^3.1.0
         version: 3.1.0
       es-toolkit:
-        specifier: ^1.37.2
-        version: 1.37.2
+        specifier: ^1.38.0
+        version: 1.38.0
       fast-equals:
         specifier: ^5.2.2
         version: 5.2.2
@@ -57,8 +57,8 @@ importers:
         specifier: ^3.0.3
         version: 3.0.3
       svelte:
-        specifier: 5.30.1
-        version: 5.30.1
+        specifier: 5.33.2
+        version: 5.33.2
     devDependencies:
       '@aitodotai/json-stringify-pretty-compact':
         specifier: ^1.3.0
@@ -68,34 +68,34 @@ importers:
         version: 11.13.5
       '@sveltejs/adapter-auto':
         specifier: ^6.0.1
-        version: 6.0.1(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))
+        version: 6.0.1(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))
       '@sveltejs/adapter-static':
         specifier: ^3.0.8
-        version: 3.0.8(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))
+        version: 3.0.8(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))
       '@sveltejs/eslint-config':
         specifier: ^8.2.0
-        version: 8.2.0(@stylistic/eslint-plugin-js@1.7.2(eslint@9.26.0(jiti@1.21.0)))(eslint-config-prettier@10.1.5(eslint@9.26.0(jiti@1.21.0)))(eslint-plugin-n@17.10.1(eslint@9.26.0(jiti@1.21.0)))(eslint-plugin-svelte@3.7.0(eslint@9.26.0(jiti@1.21.0))(svelte@5.30.1))(eslint@9.26.0(jiti@1.21.0))(typescript-eslint@7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3))(typescript@5.8.3)
+        version: 8.2.0(@stylistic/eslint-plugin-js@1.7.2(eslint@9.27.0(jiti@1.21.0)))(eslint-config-prettier@10.1.5(eslint@9.27.0(jiti@1.21.0)))(eslint-plugin-n@17.10.1(eslint@9.27.0(jiti@1.21.0)))(eslint-plugin-svelte@3.9.0(eslint@9.27.0(jiti@1.21.0))(svelte@5.33.2))(eslint@9.27.0(jiti@1.21.0))(typescript-eslint@7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3))(typescript@5.8.3)
       '@sveltejs/kit':
-        specifier: ^2.21.0
-        version: 2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+        specifier: ^2.21.1
+        version: 2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       '@sveltejs/package':
         specifier: ^2.3.11
-        version: 2.3.11(svelte@5.30.1)(typescript@5.8.3)
+        version: 2.3.11(svelte@5.33.2)(typescript@5.8.3)
       '@sveltejs/vite-plugin-svelte':
         specifier: 5.0.3
-        version: 5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+        version: 5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       '@sveltepress/theme-default':
         specifier: ^6.0.3
-        version: 6.0.3(8842574121344738c5d79b13fa3b12b2)
+        version: 6.0.3(0f9affb99b0fca83246224c5605f9aba)
       '@sveltepress/twoslash':
         specifier: ^1.2.2
-        version: 1.2.2(svelte@5.30.1)(typescript@5.8.3)
+        version: 1.2.2(svelte@5.33.2)(typescript@5.8.3)
       '@sveltepress/vite':
         specifier: ^1.2.2
-        version: 1.2.2(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(rollup@2.79.1)(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+        version: 1.2.2(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(rollup@2.79.1)(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       '@testing-library/svelte':
-        specifier: ^5.2.7
-        version: 5.2.7(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(vitest@3.1.3(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+        specifier: ^5.2.8
+        version: 5.2.8(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(vitest@3.1.4(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.0)
@@ -131,10 +131,10 @@ importers:
         version: 3.1.7
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.32.1
-        version: 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+        version: 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.32.1
-        version: 8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+        version: 8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
       csstype:
         specifier: ^3.1.3
         version: 3.1.3
@@ -148,14 +148,14 @@ importers:
         specifier: ^3.0.0
         version: 3.0.0
       eslint:
-        specifier: ^9.26.0
-        version: 9.26.0(jiti@1.21.0)
+        specifier: ^9.27.0
+        version: 9.27.0(jiti@1.21.0)
       eslint-config-prettier:
         specifier: ^10.1.5
-        version: 10.1.5(eslint@9.26.0(jiti@1.21.0))
+        version: 10.1.5(eslint@9.27.0(jiti@1.21.0))
       eslint-plugin-svelte:
-        specifier: 3.7.0
-        version: 3.7.0(eslint@9.26.0(jiti@1.21.0))(svelte@5.30.1)
+        specifier: 3.9.0
+        version: 3.9.0(eslint@9.27.0(jiti@1.21.0))(svelte@5.33.2)
       jsdom:
         specifier: ^26.1.0
         version: 26.1.0
@@ -164,7 +164,7 @@ importers:
         version: 3.5.3
       prettier-plugin-svelte:
         specifier: ^3.4.0
-        version: 3.4.0(prettier@3.5.3)(svelte@5.30.1)
+        version: 3.4.0(prettier@3.5.3)(svelte@5.33.2)
       remark-code-extra:
         specifier: ^1.0.1
         version: 1.0.1
@@ -179,10 +179,10 @@ importers:
         version: 1.89.0
       svelte-check:
         specifier: ^4.2.1
-        version: 4.2.1(picomatch@4.0.2)(svelte@5.30.1)(typescript@5.8.3)
+        version: 4.2.1(picomatch@4.0.2)(svelte@5.33.2)(typescript@5.8.3)
       svelte-eslint-parser:
         specifier: 1.2.0
-        version: 1.2.0(svelte@5.30.1)
+        version: 1.2.0(svelte@5.33.2)
       svelte-highlight:
         specifier: ^7.8.3
         version: 7.8.3
@@ -208,8 +208,8 @@ importers:
         specifier: ^6.3.5
         version: 6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
       vitest:
-        specifier: ^3.1.3
-        version: 3.1.3(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
+        specifier: ^3.1.4
+        version: 3.1.4(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
       vitest-matchmedia-mock:
         specifier: ^2.0.3
         version: 2.0.3(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
@@ -1271,12 +1271,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.4.1':
-    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
   '@eslint-community/eslint-utils@4.7.0':
     resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1295,24 +1289,24 @@ packages:
     resolution: {integrity: sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.13.0':
-    resolution: {integrity: sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==}
+  '@eslint/core@0.14.0':
+    resolution: {integrity: sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@3.3.1':
     resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.26.0':
-    resolution: {integrity: sha512-I9XlJawFdSMvWjDt6wksMCrgns5ggLNfFwFvnShsleWruvXM514Qxk8V246efTw+eo9JABvVz+u3q2RiAowKxQ==}
+  '@eslint/js@9.27.0':
+    resolution: {integrity: sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.6':
     resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.8':
-    resolution: {integrity: sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==}
+  '@eslint/plugin-kit@0.3.1':
+    resolution: {integrity: sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.6.0':
@@ -1378,10 +1372,6 @@ packages:
     resolution: {integrity: sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==}
     engines: {node: '>=8'}
 
-  '@modelcontextprotocol/sdk@1.11.0':
-    resolution: {integrity: sha512-k/1pb70eD638anoi0e8wUGAlbMJXyvdV4p62Ko+EZ7eBe1xMx8Uhak1R5DgfoofsK5IBBnRwsYGTaLZl+6/+RQ==}
-    engines: {node: '>=18'}
-
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1682,8 +1672,8 @@ packages:
       typescript: '>= 5'
       typescript-eslint: '>= 8'
 
-  '@sveltejs/kit@2.21.0':
-    resolution: {integrity: sha512-kvu4h9qXduiPk1Q1oqFKDLFGu/7mslEYbVaqpbBcBxjlRJnvNCFwEvEwKt0Mx9TtSi8J77xRelvJobrGlst4nQ==}
+  '@sveltejs/kit@2.21.1':
+    resolution: {integrity: sha512-vLbtVwtDcK8LhJKnFkFYwM0uCdFmzioQnif0bjEYH1I24Arz22JPr/hLUiXGVYAwhu8INKx5qrdvr4tHgPwX6w==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -1739,8 +1729,8 @@ packages:
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
 
-  '@testing-library/svelte@5.2.7':
-    resolution: {integrity: sha512-aGhUaFmEXEVost4QOsbHUUbHLwi7ZZRRxAHFDO2Cmr0BZD3/3+XvaYEPq70Rdw0NRNjdqZHdARBEcrCOkPuAqw==}
+  '@testing-library/svelte@5.2.8':
+    resolution: {integrity: sha512-ucQOtGsJhtawOEtUmbR4rRh53e6RbM1KUluJIXRmh6D4UzxR847iIqqjRtg9mHNFmGQ8Vkam9yVcR5d1mhIHKA==}
     engines: {node: '>= 10'}
     peerDependencies:
       svelte: ^3 || ^4 || ^5 || ^5.0.0-next.0
@@ -2070,11 +2060,11 @@ packages:
       '@vite-pwa/assets-generator':
         optional: true
 
-  '@vitest/expect@3.1.3':
-    resolution: {integrity: sha512-7FTQQuuLKmN1Ig/h+h/GO+44Q1IlglPlR2es4ab7Yvfx+Uk5xsv+Ykk+MEt/M2Yn/xGmzaLKxGw2lgy2bwuYqg==}
+  '@vitest/expect@3.1.4':
+    resolution: {integrity: sha512-xkD/ljeliyaClDYqHPNCiJ0plY5YIcM0OlRiZizLhlPmpXWpxnGMyTZXOHFhFeG7w9P5PBeL4IdtJ/HeQwTbQA==}
 
-  '@vitest/mocker@3.1.3':
-    resolution: {integrity: sha512-PJbLjonJK82uCWHjzgBJZuR7zmAOrSvKk1QBxrennDIgtH4uK0TB1PvYmc0XBCigxxtiAVPfWtAdy4lpz8SQGQ==}
+  '@vitest/mocker@3.1.4':
+    resolution: {integrity: sha512-8IJ3CvwtSw/EFXqWFL8aCMu+YyYXG2WUSrQbViOZkWTKTVicVwZ/YiEZDSqD00kX+v/+W+OnxhNWoeVKorHygA==}
     peerDependencies:
       msw: ^2.4.9
       vite: ^5.0.0 || ^6.0.0
@@ -2084,24 +2074,20 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@3.1.3':
-    resolution: {integrity: sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==}
-
-  '@vitest/runner@3.1.3':
-    resolution: {integrity: sha512-Tae+ogtlNfFei5DggOsSUvkIaSuVywujMj6HzR97AHK6XK8i3BuVyIifWAm/sE3a15lF5RH9yQIrbXYuo0IFyA==}
+  '@vitest/pretty-format@3.1.4':
+    resolution: {integrity: sha512-cqv9H9GvAEoTaoq+cYqUTCGscUjKqlJZC7PRwY5FMySVj5J+xOm1KQcCiYHJOEzOKRUhLH4R2pTwvFlWCEScsg==}
 
-  '@vitest/snapshot@3.1.3':
-    resolution: {integrity: sha512-XVa5OPNTYUsyqG9skuUkFzAeFnEzDp8hQu7kZ0N25B1+6KjGm4hWLtURyBbsIAOekfWQ7Wuz/N/XXzgYO3deWQ==}
+  '@vitest/runner@3.1.4':
+    resolution: {integrity: sha512-djTeF1/vt985I/wpKVFBMWUlk/I7mb5hmD5oP8K9ACRmVXgKTae3TUOtXAEBfslNKPzUQvnKhNd34nnRSYgLNQ==}
 
-  '@vitest/spy@3.1.3':
-    resolution: {integrity: sha512-x6w+ctOEmEXdWaa6TO4ilb7l9DxPR5bwEb6hILKuxfU1NqWT2mpJD9NJN7t3OTfxmVlOMrvtoFJGdgyzZ605lQ==}
+  '@vitest/snapshot@3.1.4':
+    resolution: {integrity: sha512-JPHf68DvuO7vilmvwdPr9TS0SuuIzHvxeaCkxYcCD4jTk67XwL45ZhEHFKIuCm8CYstgI6LZ4XbwD6ANrwMpFg==}
 
-  '@vitest/utils@3.1.3':
-    resolution: {integrity: sha512-2Ltrpht4OmHO9+c/nmHtF09HWiyWdworqnHIwjfvDyWjuwKbdkcS9AnhsDn+8E2RM4x++foD1/tNuLPVvWG1Rg==}
+  '@vitest/spy@3.1.4':
+    resolution: {integrity: sha512-Xg1bXhu+vtPXIodYN369M86K8shGLouNjoVI78g8iAq2rFoHFdajNvJJ5A/9bPMFcfQqdaCpOgWKEoMQg/s0Yg==}
 
-  accepts@2.0.0:
-    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
-    engines: {node: '>= 0.6'}
+  '@vitest/utils@3.1.4':
+    resolution: {integrity: sha512-yriMuO1cfFhmiGc8ataN51+9ooHRuURdfAZfwFd3usWynjzpLslZdYnRegTv32qdgtJTsj15FoeZe2g15fY1gg==}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -2227,10 +2213,6 @@ packages:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
 
-  body-parser@2.2.0:
-    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
-    engines: {node: '>=18'}
-
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -2263,10 +2245,6 @@ packages:
     peerDependencies:
       esbuild: '>=0.18'
 
-  bytes@3.1.2:
-    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
-    engines: {node: '>= 0.8'}
-
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -2380,39 +2358,19 @@ packages:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
-  content-disposition@1.0.0:
-    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
-    engines: {node: '>= 0.6'}
-
-  content-type@1.0.5:
-    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
-    engines: {node: '>= 0.6'}
-
   convert-source-map@1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
 
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie-signature@1.2.2:
-    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
-    engines: {node: '>=6.6.0'}
-
   cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
-  cookie@0.7.2:
-    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
-    engines: {node: '>= 0.6'}
-
   core-js-compat@3.35.0:
     resolution: {integrity: sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==}
 
-  cors@2.8.5:
-    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
-    engines: {node: '>= 0.10'}
-
   cosmiconfig@7.1.0:
     resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
     engines: {node: '>=10'}
@@ -2573,10 +2531,6 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
-  depd@2.0.0:
-    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
-    engines: {node: '>= 0.8'}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -2609,9 +2563,6 @@ packages:
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
-  ee-first@1.1.1:
-    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
-
   ejs@3.1.9:
     resolution: {integrity: sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==}
     engines: {node: '>=0.10.0'}
@@ -2629,10 +2580,6 @@ packages:
   emoticon@4.0.1:
     resolution: {integrity: sha512-dqx7eA9YaqyvYtUhJwT4rC1HIp82j5ybS1/vQ42ur+jBe17dJMwZE4+gvL1XadSFfxaPFFGt3Xsw+Y8akThDlw==}
 
-  encodeurl@2.0.0:
-    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
-    engines: {node: '>= 0.8'}
-
   enhanced-resolve@5.17.1:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
@@ -2674,8 +2621,8 @@ packages:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
 
-  es-toolkit@1.37.2:
-    resolution: {integrity: sha512-ADDfk+pPFF0ofMpRAIc6on01p8heiuwuuJsYLzTP4UOjxVK9QsE2+0D1Q4J/zX2XBo6ac+27H5++YBIwmGAX/g==}
+  es-toolkit@1.38.0:
+    resolution: {integrity: sha512-OT3AxczYYd3W50bCj4V0hKoOAfqIy9tof0leNQYekEDxVKir3RTVTJOLij7VAe6fsCNsGhC0JqIkURpMXTCSEA==}
 
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
@@ -2691,9 +2638,6 @@ packages:
     resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
 
-  escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-
   escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -2730,8 +2674,8 @@ packages:
     peerDependencies:
       eslint: '>=8.23.0'
 
-  eslint-plugin-svelte@3.7.0:
-    resolution: {integrity: sha512-/MQ9gYLbA24AFUN0QwpzRqi4VCISaRyt8xa2t3iVnI5mWa38xuTXM+iz/8LxKCg34jX2PfPcEkZH7CUem/Eugw==}
+  eslint-plugin-svelte@3.9.0:
+    resolution: {integrity: sha512-nvIUNyyPGbr5922Kd1p/jXe+FfNdVPXsxLyrrXpwfSbZZEFdAYva9O/gm2lObC/wXkQo/AUmQkAihfmNJYeCjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.1 || ^9.0.0
@@ -2752,8 +2696,8 @@ packages:
     resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.26.0:
-    resolution: {integrity: sha512-Hx0MOjPh6uK9oq9nVsATZKE/Wlbai7KFjfCuw9UHaguDW3x+HF0O5nIi3ud39TWgrTjTO5nHxmL3R1eANinWHQ==}
+  eslint@9.27.0:
+    resolution: {integrity: sha512-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -2806,18 +2750,6 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  etag@1.8.1:
-    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
-    engines: {node: '>= 0.6'}
-
-  eventsource-parser@3.0.1:
-    resolution: {integrity: sha512-VARTJ9CYeuQYb0pZEPbzi740OWFgpHe7AYJ2WFZVnUDUQp5Dk2yJUgF36YsZ81cOyxT0QxmXD2EQpapAouzWVA==}
-    engines: {node: '>=18.0.0'}
-
-  eventsource@3.0.6:
-    resolution: {integrity: sha512-l19WpE2m9hSuyP06+FbuUUf1G+R0SFLrtQfbRb9PRr+oimOfxQhgGCbVaXg5IvZyyTThJsxh6L/srkMiCeBPDA==}
-    engines: {node: '>=18.0.0'}
-
   execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -2826,16 +2758,6 @@ packages:
     resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
     engines: {node: '>=12.0.0'}
 
-  express-rate-limit@7.5.0:
-    resolution: {integrity: sha512-eB5zbQh5h+VenMPM3fh+nw1YExi5nMr6HUCR62ELSP11huvxm/Uir1H1QEyTkk5QX6A58pX6NmaTMceKZ0Eodg==}
-    engines: {node: '>= 16'}
-    peerDependencies:
-      express: ^4.11 || 5 || ^5.0.0-beta.1
-
-  express@5.1.0:
-    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
-    engines: {node: '>= 18'}
-
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
@@ -2881,10 +2803,6 @@ packages:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
 
-  finalhandler@2.1.0:
-    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
-    engines: {node: '>= 0.8'}
-
   find-root@1.1.0:
     resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
 
@@ -2918,14 +2836,6 @@ packages:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
 
-  forwarded@0.2.0:
-    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
-    engines: {node: '>= 0.6'}
-
-  fresh@2.0.0:
-    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
-    engines: {node: '>= 0.8'}
-
   front-matter@3.2.1:
     resolution: {integrity: sha512-YUhgEhbL6tG+Ok3vTGIoSDKqcr47aSDvyhEqIv8B+YuBJFsPnOiArNXTPp2yO07NL+a0L4+2jXlKlKqyVcsRRA==}
 
@@ -3005,6 +2915,10 @@ packages:
     resolution: {integrity: sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==}
     engines: {node: '>=18'}
 
+  globals@16.2.0:
+    resolution: {integrity: sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==}
+    engines: {node: '>=18'}
+
   globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
     engines: {node: '>= 0.4'}
@@ -3078,10 +2992,6 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  http-errors@2.0.0:
-    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
-    engines: {node: '>= 0.8'}
-
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -3138,10 +3048,6 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
-  ipaddr.js@1.9.1:
-    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
-    engines: {node: '>= 0.10'}
-
   is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
 
@@ -3237,9 +3143,6 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
-  is-promise@4.0.0:
-    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
-
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
@@ -3524,18 +3427,10 @@ packages:
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
-  media-typer@1.1.0:
-    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
-    engines: {node: '>= 0.8'}
-
   merge-deep@3.0.3:
     resolution: {integrity: sha512-qtmzAS6t6grwEkNrunqTBdn0qKwFgNWvlxUbAV8es9M7Ot1EbyApytCnvE0jALPa46ZpKDUo527kKiaWplmlFA==}
     engines: {node: '>=0.10.0'}
 
-  merge-descriptors@2.0.0:
-    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
-    engines: {node: '>=18'}
-
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -3637,14 +3532,6 @@ packages:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
 
-  mime-db@1.54.0:
-    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@3.0.1:
-    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
-    engines: {node: '>= 0.6'}
-
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -3686,10 +3573,6 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  negotiator@1.0.0:
-    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
-    engines: {node: '>= 0.6'}
-
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
@@ -3717,10 +3600,6 @@ packages:
   nwsapi@2.2.16:
     resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
 
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -3736,10 +3615,6 @@ packages:
   ofetch@1.3.4:
     resolution: {integrity: sha512-KLIET85ik3vhEfS+3fDlc/BAZiAp+43QEC/yCo5zkNoY2YaKvNkOaFr/6wCFgFH1kuYQM5pMNi0Tg8koiIemtw==}
 
-  on-finished@2.4.1:
-    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
-    engines: {node: '>= 0.8'}
-
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -3780,10 +3655,6 @@ packages:
   parse5@7.2.1:
     resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
 
-  parseurl@1.3.3:
-    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
-    engines: {node: '>= 0.8'}
-
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
 
@@ -3802,10 +3673,6 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-to-regexp@8.2.0:
-    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
-    engines: {node: '>=16'}
-
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -3834,10 +3701,6 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
-  pkce-challenge@5.0.0:
-    resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
-    engines: {node: '>=16.20.0'}
-
   pkg-types@1.1.3:
     resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==}
 
@@ -3906,10 +3769,6 @@ packages:
   property-information@6.4.0:
     resolution: {integrity: sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==}
 
-  proxy-addr@2.0.7:
-    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
-    engines: {node: '>= 0.10'}
-
   punycode.js@2.3.1:
     resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
     engines: {node: '>=6'}
@@ -3918,24 +3777,12 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  qs@6.14.0:
-    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
-    engines: {node: '>=0.6'}
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
-  range-parser@1.2.1:
-    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
-    engines: {node: '>= 0.6'}
-
-  raw-body@3.0.0:
-    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
-    engines: {node: '>= 0.8'}
-
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -4053,10 +3900,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  router@2.2.0:
-    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
-    engines: {node: '>= 18'}
-
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
@@ -4109,17 +3952,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  send@1.2.0:
-    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
-    engines: {node: '>= 18'}
-
   serialize-javascript@4.0.0:
     resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==}
 
-  serve-static@2.2.0:
-    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
-    engines: {node: '>= 18'}
-
   set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
 
@@ -4131,9 +3966,6 @@ packages:
     resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
     engines: {node: '>= 0.4'}
 
-  setprototypeof@1.2.0:
-    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
-
   shallow-clone@0.1.2:
     resolution: {integrity: sha512-J1zdXCky5GmNnuauESROVu31MQSnLoYvlyEn6j2Ztk6Q5EHFIhxkMhYcv6vuDzl2XEzoRr856QwzMgWM/TmZgw==}
     engines: {node: '>=0.10.0'}
@@ -4219,10 +4051,6 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  statuses@2.0.1:
-    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
-    engines: {node: '>= 0.8'}
-
   std-env@3.9.0:
     resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
@@ -4299,8 +4127,8 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.30.1:
-    resolution: {integrity: sha512-QIYtKnJGkubWXtNkrUBKVCvyo9gjcccdbnvXfwsGNhvbeNNdQjRDTa/BiQcJ2kWXbXPQbWKyT7CUu53KIj1rfw==}
+  svelte@5.33.2:
+    resolution: {integrity: sha512-uiyusx2rUa9NmVMaIcShnZyDhOfFXxgkn5eXOcgjDBL3RYQGR1+7TctPcI6AWNbu4gHWF5xZ/TlFM7nnw5H+JQ==}
     engines: {node: '>=18'}
 
   svg-path-parser@1.1.0:
@@ -4363,10 +4191,6 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
-  toidentifier@1.0.1:
-    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
-    engines: {node: '>=0.6'}
-
   topojson-client@3.1.0:
     resolution: {integrity: sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==}
     hasBin: true
@@ -4428,10 +4252,6 @@ packages:
     resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
     engines: {node: '>=10'}
 
-  type-is@2.0.1:
-    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
-    engines: {node: '>= 0.6'}
-
   typed-array-buffer@1.0.0:
     resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
     engines: {node: '>= 0.4'}
@@ -4561,10 +4381,6 @@ packages:
       vite:
         optional: true
 
-  unpipe@1.0.0:
-    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
-    engines: {node: '>= 0.8'}
-
   upath@1.2.0:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
@@ -4581,18 +4397,14 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  vary@1.1.2:
-    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
-    engines: {node: '>= 0.8'}
-
   vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
   vfile@6.0.1:
     resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
 
-  vite-node@3.1.3:
-    resolution: {integrity: sha512-uHV4plJ2IxCl4u1up1FQRrqclylKAogbtBfOTwcuJ28xFi+89PZ57BRh+naIRvH70HPwxy5QHYzg1OrEaC7AbA==}
+  vite-node@3.1.4:
+    resolution: {integrity: sha512-6enNwYnpyDo4hEgytbmc6mYWHXDHYEn0D1/rw4Q+tnHUGtKTJsn8T1YkX6Q18wI5LCrS8CTYlBaiCqxOy2kvUA==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
@@ -4669,16 +4481,16 @@ packages:
   vitest-matchmedia-mock@2.0.3:
     resolution: {integrity: sha512-Oa2fI+dfaqcs67D08PqBL0D+Ymm4MYGZn1WimUgfZGDxp9/eb8gl6xqPmhjyrV3p9KdhKj2tp6E1b4YWiSg1lw==}
 
-  vitest@3.1.3:
-    resolution: {integrity: sha512-188iM4hAHQ0km23TN/adso1q5hhwKqUpv+Sd6p5sOuh6FhQnRNW3IsiIpvxqahtBabsJ2SLZgmGSpcYK4wQYJw==}
+  vitest@3.1.4:
+    resolution: {integrity: sha512-Ta56rT7uWxCSJXlBtKgIlApJnT6e6IGmTYxYcmxjJ4ujuZDI59GUQgVDObXXJujOmPDBYXHK1qmaGtneu6TNIQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/debug': ^4.1.12
       '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      '@vitest/browser': 3.1.3
-      '@vitest/ui': 3.1.3
+      '@vitest/browser': 3.1.4
+      '@vitest/ui': 3.1.4
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -4831,14 +4643,6 @@ packages:
   zimmerframe@1.1.2:
     resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
 
-  zod-to-json-schema@3.24.5:
-    resolution: {integrity: sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==}
-    peerDependencies:
-      zod: ^3.24.1
-
-  zod@3.24.3:
-    resolution: {integrity: sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==}
-
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -5983,14 +5787,9 @@ snapshots:
   '@esbuild/win32-x64@0.25.2':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.1(eslint@9.26.0(jiti@1.21.0))':
-    dependencies:
-      eslint: 9.26.0(jiti@1.21.0)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.26.0(jiti@1.21.0))':
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.27.0(jiti@1.21.0))':
     dependencies:
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
@@ -6005,7 +5804,7 @@ snapshots:
 
   '@eslint/config-helpers@0.2.1': {}
 
-  '@eslint/core@0.13.0':
+  '@eslint/core@0.14.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
@@ -6023,13 +5822,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.26.0': {}
+  '@eslint/js@9.27.0': {}
 
   '@eslint/object-schema@2.1.6': {}
 
-  '@eslint/plugin-kit@0.2.8':
+  '@eslint/plugin-kit@0.3.1':
     dependencies:
-      '@eslint/core': 0.13.0
+      '@eslint/core': 0.14.0
       levn: 0.4.1
 
   '@floating-ui/core@1.6.0':
@@ -6102,21 +5901,6 @@ snapshots:
 
   '@lukeed/csprng@1.1.0': {}
 
-  '@modelcontextprotocol/sdk@1.11.0':
-    dependencies:
-      content-type: 1.0.5
-      cors: 2.8.5
-      cross-spawn: 7.0.6
-      eventsource: 3.0.6
-      express: 5.1.0
-      express-rate-limit: 7.5.0(express@5.1.0)
-      pkce-challenge: 5.0.0
-      raw-body: 3.0.0
-      zod: 3.24.3
-      zod-to-json-schema: 3.24.5(zod@3.24.3)
-    transitivePeerDependencies:
-      - supports-color
-
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -6348,12 +6132,12 @@ snapshots:
 
   '@sindresorhus/is@4.6.0': {}
 
-  '@stylistic/eslint-plugin-js@1.7.2(eslint@9.26.0(jiti@1.21.0))':
+  '@stylistic/eslint-plugin-js@1.7.2(eslint@9.27.0(jiti@1.21.0))':
     dependencies:
       '@types/eslint': 8.56.10
       acorn: 8.14.1
       escape-string-regexp: 4.0.0
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
 
@@ -6368,29 +6152,29 @@ snapshots:
     dependencies:
       acorn: 8.14.1
 
-  '@sveltejs/adapter-auto@6.0.1(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))':
+  '@sveltejs/adapter-auto@6.0.1(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))':
     dependencies:
-      '@sveltejs/kit': 2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/kit': 2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
 
-  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))':
+  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))':
     dependencies:
-      '@sveltejs/kit': 2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/kit': 2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
 
-  '@sveltejs/eslint-config@8.2.0(@stylistic/eslint-plugin-js@1.7.2(eslint@9.26.0(jiti@1.21.0)))(eslint-config-prettier@10.1.5(eslint@9.26.0(jiti@1.21.0)))(eslint-plugin-n@17.10.1(eslint@9.26.0(jiti@1.21.0)))(eslint-plugin-svelte@3.7.0(eslint@9.26.0(jiti@1.21.0))(svelte@5.30.1))(eslint@9.26.0(jiti@1.21.0))(typescript-eslint@7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3))(typescript@5.8.3)':
+  '@sveltejs/eslint-config@8.2.0(@stylistic/eslint-plugin-js@1.7.2(eslint@9.27.0(jiti@1.21.0)))(eslint-config-prettier@10.1.5(eslint@9.27.0(jiti@1.21.0)))(eslint-plugin-n@17.10.1(eslint@9.27.0(jiti@1.21.0)))(eslint-plugin-svelte@3.9.0(eslint@9.27.0(jiti@1.21.0))(svelte@5.33.2))(eslint@9.27.0(jiti@1.21.0))(typescript-eslint@7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3))(typescript@5.8.3)':
     dependencies:
-      '@stylistic/eslint-plugin-js': 1.7.2(eslint@9.26.0(jiti@1.21.0))
-      eslint: 9.26.0(jiti@1.21.0)
-      eslint-config-prettier: 10.1.5(eslint@9.26.0(jiti@1.21.0))
-      eslint-plugin-n: 17.10.1(eslint@9.26.0(jiti@1.21.0))
-      eslint-plugin-svelte: 3.7.0(eslint@9.26.0(jiti@1.21.0))(svelte@5.30.1)
+      '@stylistic/eslint-plugin-js': 1.7.2(eslint@9.27.0(jiti@1.21.0))
+      eslint: 9.27.0(jiti@1.21.0)
+      eslint-config-prettier: 10.1.5(eslint@9.27.0(jiti@1.21.0))
+      eslint-plugin-n: 17.10.1(eslint@9.27.0(jiti@1.21.0))
+      eslint-plugin-svelte: 3.9.0(eslint@9.27.0(jiti@1.21.0))(svelte@5.33.2)
       globals: 15.9.0
       typescript: 5.8.3
-      typescript-eslint: 7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+      typescript-eslint: 7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
 
-  '@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
+  '@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
     dependencies:
       '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.1)
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       '@types/cookie': 0.6.0
       acorn: 8.14.1
       cookie: 0.6.0
@@ -6402,58 +6186,58 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 3.0.0
-      svelte: 5.30.1
+      svelte: 5.33.2
       vite: 6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
 
-  '@sveltejs/package@2.3.11(svelte@5.30.1)(typescript@5.8.3)':
+  '@sveltejs/package@2.3.11(svelte@5.33.2)(typescript@5.8.3)':
     dependencies:
       chokidar: 4.0.3
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.3
-      svelte: 5.30.1
-      svelte2tsx: 0.7.34(svelte@5.30.1)(typescript@5.8.3)
+      svelte: 5.33.2
+      svelte2tsx: 0.7.34(svelte@5.33.2)(typescript@5.8.3)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       debug: 4.4.0
-      svelte: 5.30.1
+      svelte: 5.33.2
       vite: 6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
-      svelte: 5.30.1
+      svelte: 5.33.2
       vite: 6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
       vitefu: 1.0.4(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltepress/theme-default@6.0.3(8842574121344738c5d79b13fa3b12b2)':
+  '@sveltepress/theme-default@6.0.3(0f9affb99b0fca83246224c5605f9aba)':
     dependencies:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2(@algolia/client-search@4.22.1)(search-insights@2.13.0)
       '@shikijs/twoslash': 1.24.0(typescript@5.8.3)
-      '@sveltejs/kit': 2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
-      '@sveltepress/twoslash': 1.2.2(svelte@5.30.1)(typescript@5.8.3)
-      '@sveltepress/vite': 1.2.2(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(rollup@2.79.1)(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/kit': 2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltepress/twoslash': 1.2.2(svelte@5.33.2)(typescript@5.8.3)
+      '@sveltepress/vite': 1.2.2(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(rollup@2.79.1)(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       '@unocss/extractor-svelte': 0.61.9
-      '@vite-pwa/sveltekit': 0.6.6(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(vite-plugin-pwa@0.19.0(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(workbox-build@7.0.0(@types/babel__core@7.20.5))(workbox-window@7.0.0))
+      '@vite-pwa/sveltekit': 0.6.6(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(vite-plugin-pwa@0.19.0(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(workbox-build@7.0.0(@types/babel__core@7.20.5))(workbox-window@7.0.0))
       lru-cache: 10.4.3
       mdast-util-from-markdown: 2.0.0
       mdast-util-gfm: 3.0.0
       shiki: 1.24.0
-      svelte: 5.30.1
+      svelte: 5.33.2
       uid: 2.0.2
       unist-util-visit: 5.0.0
       unocss: 0.61.9(postcss@8.5.3)(rollup@2.79.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
@@ -6474,7 +6258,7 @@ snapshots:
       - typescript
       - vite-plugin-pwa
 
-  '@sveltepress/twoslash@1.2.2(svelte@5.30.1)(typescript@5.8.3)':
+  '@sveltepress/twoslash@1.2.2(svelte@5.33.2)(typescript@5.8.3)':
     dependencies:
       '@floating-ui/dom': 1.6.3
       '@shikijs/twoslash': 1.24.0(typescript@5.8.3)
@@ -6483,18 +6267,18 @@ snapshots:
       mdast-util-to-hast: 13.1.0
       shiki: 1.24.0
       source-map-js: 1.2.1
-      svelte: 5.30.1
-      svelte2tsx: 0.7.34(svelte@5.30.1)(typescript@5.8.3)
+      svelte: 5.33.2
+      svelte2tsx: 0.7.34(svelte@5.33.2)(typescript@5.8.3)
       twoslash: 0.2.12(typescript@5.8.3)
       twoslash-protocol: 0.2.12
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@sveltepress/vite@1.2.2(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(rollup@2.79.1)(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
+  '@sveltepress/vite@1.2.2(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(rollup@2.79.1)(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
     dependencies:
-      '@sveltejs/kit': 2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/kit': 2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       cross-spawn: 7.0.6
       fs-extra: 11.2.0
       lru-cache: 10.4.3
@@ -6509,7 +6293,7 @@ snapshots:
       remark-rehype: 11.1.0
       remark-stringify: 11.0.0
       shiki: 1.24.0
-      svelte: 5.30.1
+      svelte: 5.33.2
       unified: 11.0.4
       unist-util-visit: 5.0.0
       vfile: 6.0.1
@@ -6532,13 +6316,13 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/svelte@5.2.7(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(vitest@3.1.3(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
+  '@testing-library/svelte@5.2.8(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(vitest@3.1.4(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.30.1
+      svelte: 5.33.2
     optionalDependencies:
       vite: 6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
-      vitest: 3.1.3(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
+      vitest: 3.1.4(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
     dependencies:
@@ -6648,16 +6432,16 @@ snapshots:
 
   '@types/unist@3.0.2': {}
 
-  '@typescript-eslint/eslint-plugin@7.7.0(@typescript-eslint/parser@7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)':
+  '@typescript-eslint/eslint-plugin@7.7.0(@typescript-eslint/parser@7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/parser': 7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 7.7.0
-      '@typescript-eslint/type-utils': 7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
-      '@typescript-eslint/utils': 7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/type-utils': 7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/utils': 7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 7.7.0
       debug: 4.4.0
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       graphemer: 1.4.0
       ignore: 5.3.1
       natural-compare: 1.4.0
@@ -6668,15 +6452,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)':
+  '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/type-utils': 8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/type-utils': 8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.32.1
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       graphemer: 1.4.0
       ignore: 7.0.4
       natural-compare: 1.4.0
@@ -6685,27 +6469,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)':
+  '@typescript-eslint/parser@7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 7.7.0
       '@typescript-eslint/types': 7.7.0
       '@typescript-eslint/typescript-estree': 7.7.0(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 7.7.0
       debug: 4.4.0
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)':
+  '@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.32.1
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.32.1
       debug: 4.4.0
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
@@ -6720,24 +6504,24 @@ snapshots:
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/visitor-keys': 8.32.1
 
-  '@typescript-eslint/type-utils@7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)':
+  '@typescript-eslint/type-utils@7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 7.7.0(typescript@5.8.3)
-      '@typescript-eslint/utils': 7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/utils': 7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
       debug: 4.4.0
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       ts-api-utils: 1.3.0(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)':
+  '@typescript-eslint/type-utils@8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
       debug: 4.4.0
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -6776,27 +6560,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)':
+  '@typescript-eslint/utils@7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.26.0(jiti@1.21.0))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@1.21.0))
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 7.7.0
       '@typescript-eslint/types': 7.7.0
       '@typescript-eslint/typescript-estree': 7.7.0(typescript@5.8.3)
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.32.1(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)':
+  '@typescript-eslint/utils@8.32.1(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.26.0(jiti@1.21.0))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@1.21.0))
       '@typescript-eslint/scope-manager': 8.32.1
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
@@ -6982,58 +6766,53 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vite-pwa/sveltekit@0.6.6(@sveltejs/kit@2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(vite-plugin-pwa@0.19.0(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(workbox-build@7.0.0(@types/babel__core@7.20.5))(workbox-window@7.0.0))':
+  '@vite-pwa/sveltekit@0.6.6(@sveltejs/kit@2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(vite-plugin-pwa@0.19.0(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(workbox-build@7.0.0(@types/babel__core@7.20.5))(workbox-window@7.0.0))':
     dependencies:
-      '@sveltejs/kit': 2.21.0(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.30.1)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@sveltejs/kit': 2.21.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)))(svelte@5.33.2)(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
       kolorist: 1.8.0
       tinyglobby: 0.2.13
       vite-plugin-pwa: 0.19.0(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))(workbox-build@7.0.0(@types/babel__core@7.20.5))(workbox-window@7.0.0)
 
-  '@vitest/expect@3.1.3':
+  '@vitest/expect@3.1.4':
     dependencies:
-      '@vitest/spy': 3.1.3
-      '@vitest/utils': 3.1.3
+      '@vitest/spy': 3.1.4
+      '@vitest/utils': 3.1.4
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
+  '@vitest/mocker@3.1.4(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))':
     dependencies:
-      '@vitest/spy': 3.1.3
+      '@vitest/spy': 3.1.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
       vite: 6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
 
-  '@vitest/pretty-format@3.1.3':
+  '@vitest/pretty-format@3.1.4':
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/runner@3.1.3':
+  '@vitest/runner@3.1.4':
     dependencies:
-      '@vitest/utils': 3.1.3
+      '@vitest/utils': 3.1.4
       pathe: 2.0.3
 
-  '@vitest/snapshot@3.1.3':
+  '@vitest/snapshot@3.1.4':
     dependencies:
-      '@vitest/pretty-format': 3.1.3
+      '@vitest/pretty-format': 3.1.4
       magic-string: 0.30.17
       pathe: 2.0.3
 
-  '@vitest/spy@3.1.3':
+  '@vitest/spy@3.1.4':
     dependencies:
       tinyspy: 3.0.2
 
-  '@vitest/utils@3.1.3':
+  '@vitest/utils@3.1.4':
     dependencies:
-      '@vitest/pretty-format': 3.1.3
+      '@vitest/pretty-format': 3.1.4
       loupe: 3.1.3
       tinyrainbow: 2.0.0
 
-  accepts@2.0.0:
-    dependencies:
-      mime-types: 3.0.1
-      negotiator: 1.0.0
-
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
@@ -7173,20 +6952,6 @@ snapshots:
 
   binary-extensions@2.2.0: {}
 
-  body-parser@2.2.0:
-    dependencies:
-      bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 4.4.0
-      http-errors: 2.0.0
-      iconv-lite: 0.6.3
-      on-finished: 2.4.1
-      qs: 6.14.0
-      raw-body: 3.0.0
-      type-is: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -7220,8 +6985,6 @@ snapshots:
       esbuild: 0.21.5
       load-tsconfig: 0.2.5
 
-  bytes@3.1.2: {}
-
   cac@6.7.14: {}
 
   call-bind-apply-helpers@1.0.2:
@@ -7331,31 +7094,16 @@ snapshots:
 
   consola@3.2.3: {}
 
-  content-disposition@1.0.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
-  content-type@1.0.5: {}
-
   convert-source-map@1.9.0: {}
 
   convert-source-map@2.0.0: {}
 
-  cookie-signature@1.2.2: {}
-
   cookie@0.6.0: {}
 
-  cookie@0.7.2: {}
-
   core-js-compat@3.35.0:
     dependencies:
       browserslist: 4.23.3
 
-  cors@2.8.5:
-    dependencies:
-      object-assign: 4.1.1
-      vary: 1.1.2
-
   cosmiconfig@7.1.0:
     dependencies:
       '@types/parse-json': 4.0.2
@@ -7501,8 +7249,6 @@ snapshots:
 
   defu@6.1.4: {}
 
-  depd@2.0.0: {}
-
   dequal@2.0.3: {}
 
   destr@2.0.3: {}
@@ -7530,8 +7276,6 @@ snapshots:
 
   duplexer@0.1.2: {}
 
-  ee-first@1.1.1: {}
-
   ejs@3.1.9:
     dependencies:
       jake: 10.8.7
@@ -7544,8 +7288,6 @@ snapshots:
 
   emoticon@4.0.1: {}
 
-  encodeurl@2.0.0: {}
-
   enhanced-resolve@5.17.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -7623,7 +7365,7 @@ snapshots:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
-  es-toolkit@1.37.2: {}
+  es-toolkit@1.38.0: {}
 
   esbuild@0.21.5:
     optionalDependencies:
@@ -7681,56 +7423,55 @@ snapshots:
 
   escalade@3.1.2: {}
 
-  escape-html@1.0.3: {}
-
   escape-string-regexp@1.0.5: {}
 
   escape-string-regexp@4.0.0: {}
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@9.26.0(jiti@1.21.0)):
+  eslint-compat-utils@0.5.1(eslint@9.27.0(jiti@1.21.0)):
     dependencies:
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       semver: 7.6.3
 
-  eslint-config-prettier@10.1.5(eslint@9.26.0(jiti@1.21.0)):
+  eslint-config-prettier@10.1.5(eslint@9.27.0(jiti@1.21.0)):
     dependencies:
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
 
-  eslint-plugin-es-x@7.8.0(eslint@9.26.0(jiti@1.21.0)):
+  eslint-plugin-es-x@7.8.0(eslint@9.27.0(jiti@1.21.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.26.0(jiti@1.21.0))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@1.21.0))
       '@eslint-community/regexpp': 4.12.1
-      eslint: 9.26.0(jiti@1.21.0)
-      eslint-compat-utils: 0.5.1(eslint@9.26.0(jiti@1.21.0))
+      eslint: 9.27.0(jiti@1.21.0)
+      eslint-compat-utils: 0.5.1(eslint@9.27.0(jiti@1.21.0))
 
-  eslint-plugin-n@17.10.1(eslint@9.26.0(jiti@1.21.0)):
+  eslint-plugin-n@17.10.1(eslint@9.27.0(jiti@1.21.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.26.0(jiti@1.21.0))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@1.21.0))
       enhanced-resolve: 5.17.1
-      eslint: 9.26.0(jiti@1.21.0)
-      eslint-plugin-es-x: 7.8.0(eslint@9.26.0(jiti@1.21.0))
+      eslint: 9.27.0(jiti@1.21.0)
+      eslint-plugin-es-x: 7.8.0(eslint@9.27.0(jiti@1.21.0))
       get-tsconfig: 4.7.6
       globals: 15.9.0
       ignore: 5.3.1
       minimatch: 9.0.5
       semver: 7.6.3
 
-  eslint-plugin-svelte@3.7.0(eslint@9.26.0(jiti@1.21.0))(svelte@5.30.1):
+  eslint-plugin-svelte@3.9.0(eslint@9.27.0(jiti@1.21.0))(svelte@5.33.2):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.26.0(jiti@1.21.0))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@1.21.0))
       '@jridgewell/sourcemap-codec': 1.5.0
-      eslint: 9.26.0(jiti@1.21.0)
+      eslint: 9.27.0(jiti@1.21.0)
       esutils: 2.0.3
+      globals: 16.2.0
       known-css-properties: 0.36.0
       postcss: 8.5.3
       postcss-load-config: 3.1.4(postcss@8.5.3)
       postcss-safe-parser: 7.0.1(postcss@8.5.3)
       semver: 7.6.3
-      svelte-eslint-parser: 1.2.0(svelte@5.30.1)
+      svelte-eslint-parser: 1.2.0(svelte@5.33.2)
     optionalDependencies:
-      svelte: 5.30.1
+      svelte: 5.33.2
     transitivePeerDependencies:
       - ts-node
 
@@ -7743,20 +7484,19 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.26.0(jiti@1.21.0):
+  eslint@9.27.0(jiti@1.21.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.26.0(jiti@1.21.0))
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@1.21.0))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.20.0
       '@eslint/config-helpers': 0.2.1
-      '@eslint/core': 0.13.0
+      '@eslint/core': 0.14.0
       '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.26.0
-      '@eslint/plugin-kit': 0.2.8
+      '@eslint/js': 9.27.0
+      '@eslint/plugin-kit': 0.3.1
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.2
-      '@modelcontextprotocol/sdk': 1.11.0
       '@types/estree': 1.0.7
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
@@ -7781,7 +7521,6 @@ snapshots:
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.3
-      zod: 3.24.3
     optionalDependencies:
       jiti: 1.21.0
     transitivePeerDependencies:
@@ -7827,14 +7566,6 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  etag@1.8.1: {}
-
-  eventsource-parser@3.0.1: {}
-
-  eventsource@3.0.6:
-    dependencies:
-      eventsource-parser: 3.0.1
-
   execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -7849,42 +7580,6 @@ snapshots:
 
   expect-type@1.2.1: {}
 
-  express-rate-limit@7.5.0(express@5.1.0):
-    dependencies:
-      express: 5.1.0
-
-  express@5.1.0:
-    dependencies:
-      accepts: 2.0.0
-      body-parser: 2.2.0
-      content-disposition: 1.0.0
-      content-type: 1.0.5
-      cookie: 0.7.2
-      cookie-signature: 1.2.2
-      debug: 4.4.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 2.1.0
-      fresh: 2.0.0
-      http-errors: 2.0.0
-      merge-descriptors: 2.0.0
-      mime-types: 3.0.1
-      on-finished: 2.4.1
-      once: 1.4.0
-      parseurl: 1.3.3
-      proxy-addr: 2.0.7
-      qs: 6.14.0
-      range-parser: 1.2.1
-      router: 2.2.0
-      send: 1.2.0
-      serve-static: 2.2.0
-      statuses: 2.0.1
-      type-is: 2.0.1
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   extend@3.0.2: {}
 
   fast-deep-equal@3.1.3: {}
@@ -7927,17 +7622,6 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  finalhandler@2.1.0:
-    dependencies:
-      debug: 4.4.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      statuses: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
   find-root@1.1.0: {}
 
   find-up@5.0.0:
@@ -7966,10 +7650,6 @@ snapshots:
 
   format@0.2.2: {}
 
-  forwarded@0.2.0: {}
-
-  fresh@2.0.0: {}
-
   front-matter@3.2.1:
     dependencies:
       js-yaml: 3.14.1
@@ -8059,6 +7739,8 @@ snapshots:
 
   globals@15.9.0: {}
 
+  globals@16.2.0: {}
+
   globalthis@1.0.3:
     dependencies:
       define-properties: 1.2.1
@@ -8134,14 +7816,6 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  http-errors@2.0.0:
-    dependencies:
-      depd: 2.0.0
-      inherits: 2.0.4
-      setprototypeof: 1.2.0
-      statuses: 2.0.1
-      toidentifier: 1.0.1
-
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.3
@@ -8205,8 +7879,6 @@ snapshots:
 
   internmap@2.0.3: {}
 
-  ipaddr.js@1.9.1: {}
-
   is-alphabetical@2.0.1: {}
 
   is-alphanumerical@2.0.1:
@@ -8285,8 +7957,6 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
-  is-promise@4.0.0: {}
-
   is-reference@3.0.3:
     dependencies:
       '@types/estree': 1.0.7
@@ -8649,16 +8319,12 @@ snapshots:
 
   mdurl@2.0.0: {}
 
-  media-typer@1.1.0: {}
-
   merge-deep@3.0.3:
     dependencies:
       arr-union: 3.1.0
       clone-deep: 0.2.4
       kind-of: 3.2.2
 
-  merge-descriptors@2.0.0: {}
-
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -8876,12 +8542,6 @@ snapshots:
       braces: 3.0.2
       picomatch: 2.3.1
 
-  mime-db@1.54.0: {}
-
-  mime-types@3.0.1:
-    dependencies:
-      mime-db: 1.54.0
-
   mimic-fn@2.1.0: {}
 
   minimatch@3.1.2:
@@ -8918,8 +8578,6 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  negotiator@1.0.0: {}
-
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -8947,8 +8605,6 @@ snapshots:
 
   nwsapi@2.2.16: {}
 
-  object-assign@4.1.1: {}
-
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -8966,10 +8622,6 @@ snapshots:
       node-fetch-native: 1.6.4
       ufo: 1.5.4
 
-  on-finished@2.4.1:
-    dependencies:
-      ee-first: 1.1.1
-
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -9034,8 +8686,6 @@ snapshots:
     dependencies:
       entities: 4.5.0
 
-  parseurl@1.3.3: {}
-
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
@@ -9049,8 +8699,6 @@ snapshots:
 
   path-parse@1.0.7: {}
 
-  path-to-regexp@8.2.0: {}
-
   path-type@4.0.0: {}
 
   pathe@1.1.2: {}
@@ -9067,8 +8715,6 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pkce-challenge@5.0.0: {}
-
   pkg-types@1.1.3:
     dependencies:
       confbox: 0.1.7
@@ -9105,10 +8751,10 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.30.1):
+  prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.33.2):
     dependencies:
       prettier: 3.5.3
-      svelte: 5.30.1
+      svelte: 5.33.2
 
   prettier@3.5.3: {}
 
@@ -9124,34 +8770,16 @@ snapshots:
 
   property-information@6.4.0: {}
 
-  proxy-addr@2.0.7:
-    dependencies:
-      forwarded: 0.2.0
-      ipaddr.js: 1.9.1
-
   punycode.js@2.3.1: {}
 
   punycode@2.3.1: {}
 
-  qs@6.14.0:
-    dependencies:
-      side-channel: 1.1.0
-
   queue-microtask@1.2.3: {}
 
   randombytes@2.1.0:
     dependencies:
       safe-buffer: 5.2.1
 
-  range-parser@1.2.1: {}
-
-  raw-body@3.0.0:
-    dependencies:
-      bytes: 3.1.2
-      http-errors: 2.0.0
-      iconv-lite: 0.6.3
-      unpipe: 1.0.0
-
   react-is@17.0.2: {}
 
   readdirp@3.6.0:
@@ -9332,16 +8960,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.40.0
       fsevents: 2.3.3
 
-  router@2.2.0:
-    dependencies:
-      debug: 4.4.0
-      depd: 2.0.0
-      is-promise: 4.0.0
-      parseurl: 1.3.3
-      path-to-regexp: 8.2.0
-    transitivePeerDependencies:
-      - supports-color
-
   rrweb-cssom@0.8.0: {}
 
   run-applescript@7.0.0: {}
@@ -9391,35 +9009,10 @@ snapshots:
 
   semver@7.6.3: {}
 
-  send@1.2.0:
-    dependencies:
-      debug: 4.4.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      fresh: 2.0.0
-      http-errors: 2.0.0
-      mime-types: 3.0.1
-      ms: 2.1.3
-      on-finished: 2.4.1
-      range-parser: 1.2.1
-      statuses: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
   serialize-javascript@4.0.0:
     dependencies:
       randombytes: 2.1.0
 
-  serve-static@2.2.0:
-    dependencies:
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      parseurl: 1.3.3
-      send: 1.2.0
-    transitivePeerDependencies:
-      - supports-color
-
   set-cookie-parser@2.6.0: {}
 
   set-function-length@1.1.1:
@@ -9435,8 +9028,6 @@ snapshots:
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.1
 
-  setprototypeof@1.2.0: {}
-
   shallow-clone@0.1.2:
     dependencies:
       is-extendable: 0.1.1
@@ -9532,8 +9123,6 @@ snapshots:
 
   stackback@0.0.2: {}
 
-  statuses@2.0.1: {}
-
   std-env@3.9.0: {}
 
   string.prototype.matchall@4.0.10:
@@ -9595,19 +9184,19 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.2.1(picomatch@4.0.2)(svelte@5.30.1)(typescript@5.8.3):
+  svelte-check@4.2.1(picomatch@4.0.2)(svelte@5.33.2)(typescript@5.8.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.3
       fdir: 6.4.4(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.30.1
+      svelte: 5.33.2
       typescript: 5.8.3
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@1.2.0(svelte@5.30.1):
+  svelte-eslint-parser@1.2.0(svelte@5.33.2):
     dependencies:
       eslint-scope: 8.3.0
       eslint-visitor-keys: 4.2.0
@@ -9616,20 +9205,20 @@ snapshots:
       postcss-scss: 4.0.9(postcss@8.5.3)
       postcss-selector-parser: 7.0.0
     optionalDependencies:
-      svelte: 5.30.1
+      svelte: 5.33.2
 
   svelte-highlight@7.8.3:
     dependencies:
       highlight.js: 11.11.1
 
-  svelte2tsx@0.7.34(svelte@5.30.1)(typescript@5.8.3):
+  svelte2tsx@0.7.34(svelte@5.33.2)(typescript@5.8.3):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.30.1
+      svelte: 5.33.2
       typescript: 5.8.3
 
-  svelte@5.30.1:
+  svelte@5.33.2:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -9695,8 +9284,6 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
-  toidentifier@1.0.1: {}
-
   topojson-client@3.1.0:
     dependencies:
       commander: 2.20.3
@@ -9752,12 +9339,6 @@ snapshots:
 
   type-fest@0.16.0: {}
 
-  type-is@2.0.1:
-    dependencies:
-      content-type: 1.0.5
-      media-typer: 1.1.0
-      mime-types: 3.0.1
-
   typed-array-buffer@1.0.0:
     dependencies:
       call-bind: 1.0.5
@@ -9798,12 +9379,12 @@ snapshots:
       typescript: 5.8.3
       yaml: 2.7.1
 
-  typescript-eslint@7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3):
+  typescript-eslint@7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 7.7.0(@typescript-eslint/parser@7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
-      '@typescript-eslint/parser': 7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
-      '@typescript-eslint/utils': 7.7.0(eslint@9.26.0(jiti@1.21.0))(typescript@5.8.3)
-      eslint: 9.26.0(jiti@1.21.0)
+      '@typescript-eslint/eslint-plugin': 7.7.0(@typescript-eslint/parser@7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/parser': 7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
+      '@typescript-eslint/utils': 7.7.0(eslint@9.27.0(jiti@1.21.0))(typescript@5.8.3)
+      eslint: 9.27.0(jiti@1.21.0)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -9927,8 +9508,6 @@ snapshots:
       - rollup
       - supports-color
 
-  unpipe@1.0.0: {}
-
   upath@1.2.0: {}
 
   update-browserslist-db@1.1.0(browserslist@4.23.3):
@@ -9943,8 +9522,6 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vary@1.1.2: {}
-
   vfile-message@4.0.2:
     dependencies:
       '@types/unist': 3.0.2
@@ -9956,7 +9533,7 @@ snapshots:
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
-  vite-node@3.1.3(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1):
+  vite-node@3.1.4(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
@@ -10027,7 +9604,7 @@ snapshots:
 
   vitest-matchmedia-mock@2.0.3(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1):
     dependencies:
-      vitest: 3.1.3(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
+      vitest: 3.1.4(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
     transitivePeerDependencies:
       - '@edge-runtime/vm'
       - '@types/debug'
@@ -10049,15 +9626,15 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.1.3(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1):
+  vitest@3.1.4(@types/debug@4.1.12)(@types/node@20.10.8)(jiti@1.21.0)(jsdom@26.1.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1):
     dependencies:
-      '@vitest/expect': 3.1.3
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
-      '@vitest/pretty-format': 3.1.3
-      '@vitest/runner': 3.1.3
-      '@vitest/snapshot': 3.1.3
-      '@vitest/spy': 3.1.3
-      '@vitest/utils': 3.1.3
+      '@vitest/expect': 3.1.4
+      '@vitest/mocker': 3.1.4(vite@6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1))
+      '@vitest/pretty-format': 3.1.4
+      '@vitest/runner': 3.1.4
+      '@vitest/snapshot': 3.1.4
+      '@vitest/spy': 3.1.4
+      '@vitest/utils': 3.1.4
       chai: 5.2.0
       debug: 4.4.0
       expect-type: 1.2.1
@@ -10070,7 +9647,7 @@ snapshots:
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
       vite: 6.3.5(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
-      vite-node: 3.1.3(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
+      vite-node: 3.1.4(@types/node@20.10.8)(jiti@1.21.0)(sass@1.89.0)(terser@5.26.0)(tsx@4.16.5)(yaml@2.7.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12
@@ -10271,10 +9848,4 @@ snapshots:
 
   zimmerframe@1.1.2: {}
 
-  zod-to-json-schema@3.24.5(zod@3.24.3):
-    dependencies:
-      zod: 3.24.3
-
-  zod@3.24.3: {}
-
   zwitch@2.0.4: {}

From f853d5493f2f01ed15ea0cfde785003d8d202557 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 21:37:29 +0200
Subject: [PATCH 29/66] code formatting

---
 .github/ISSUE_TEMPLATE/feature_request.md |  1 -
 .github/workflows/test.yml                | 54 +++++++--------
 src/lib/helpers/autoScales.ts             | 83 +++++++++++------------
 src/lib/helpers/index.ts                  |  7 +-
 src/lib/helpers/reduce.ts                 |  8 +--
 src/lib/helpers/resolve.test.ts           |  1 -
 src/lib/helpers/resolve.ts                | 36 ++++++----
 src/lib/helpers/scales.ts                 | 56 ++++++++-------
 src/lib/helpers/typeChecks.ts             |  6 +-
 src/lib/marks/Geo.svelte                  |  7 +-
 src/lib/marks/helpers/events.ts           | 11 ++-
 src/lib/transforms/recordize.ts           | 10 +--
 src/lib/types.ts                          | 52 +++++++-------
 src/routes/features/projections/+page.md  | 21 +++++-
 src/routes/marks/bollinger/+page.md       | 14 +++-
 src/routes/marks/difference/+page.md      | 14 +++-
 src/routes/marks/regression/+page.md      | 21 +++++-
 src/routes/tests/bars/+page.md            |  5 +-
 src/routes/tests/marks/+page.md           |  8 ++-
 src/routes/transforms/interval/+page.md   | 17 +++--
 src/tests/barX.test.svelte                |  2 +-
 src/tests/barX.test.ts                    | 47 +++++++------
 src/tests/barY.test.ts                    | 18 +++--
 src/tests/brush.svelte.test.ts            | 10 +--
 src/tests/colors.test.ts                  | 38 +++++++----
 src/tests/gridX.test.svelte               | 18 ++---
 src/tests/gridX.test.ts                   | 45 ++++++------
 src/tests/gridY.test.svelte               | 18 ++---
 src/tests/gridY.test.ts                   | 44 ++++++------
 src/tests/line.test.ts                    | 16 +++--
 src/tests/plot.test.ts                    |  2 +-
 src/tests/polyfill.d.ts                   | 12 ++--
 src/tests/setup.ts                        |  6 +-
 tsconfig.json                             |  4 +-
 vite.config.js                            |  4 +-
 35 files changed, 399 insertions(+), 317 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index eadc1c56..f86438d7 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,6 @@ about: Suggest an idea or feature for SveltePlot
 title: ''
 labels: enhancement
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index b09c2a09..17ffb221 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,32 +1,32 @@
 name: Run Tests
 
 on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
 
 jobs:
-  test:
-    runs-on: ubuntu-latest
-    
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Install pnpm
-      uses: pnpm/action-setup@v3
-      with:
-        version: 10
-        run_install: false
-        
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '22'
-        cache: 'pnpm'
-    
-    - name: Install dependencies
-      run: pnpm install
-    
-    - name: Run Vitest tests
-      run: pnpm test
+    test:
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v3
+              with:
+                  version: 10
+                  run_install: false
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  cache: 'pnpm'
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Run Vitest tests
+              run: pnpm test
diff --git a/src/lib/helpers/autoScales.ts b/src/lib/helpers/autoScales.ts
index 19698bdf..b83272fb 100644
--- a/src/lib/helpers/autoScales.ts
+++ b/src/lib/helpers/autoScales.ts
@@ -138,30 +138,30 @@ export function autoScale({
         range,
         ...((type === 'linear' || type === 'log') && scaleOptions.nice
             ? {
-                nice: scaleOptions.nice ? niceTickCount : true
-            }
+                  nice: scaleOptions.nice ? niceTickCount : true
+              }
             : {}),
         ...(type === 'linear'
             ? {
-                clamp: scaleOptions.clamp,
-                ...(scaleOptions.round ? { interpolate: interpolateRound } : {})
-            }
+                  clamp: scaleOptions.clamp,
+                  ...(scaleOptions.round ? { interpolate: interpolateRound } : {})
+              }
             : {}),
         ...(type === 'log'
             ? {
-                base: scaleOptions.base || 10
-            }
+                  base: scaleOptions.base || 10
+              }
             : {}),
         ...(type === 'symlog'
             ? {
-                constant: scaleOptions.constant || 1
-            }
+                  constant: scaleOptions.constant || 1
+              }
             : {}),
         ...(type === 'band' || type === 'point'
             ? {
-                align: scaleOptions.align,
-                padding: maybeNumber(coalesce(scaleOptions.padding, plotOptions.padding, 0.15))
-            }
+                  align: scaleOptions.align,
+                  padding: maybeNumber(coalesce(scaleOptions.padding, plotOptions.padding, 0.15))
+              }
             : {})
     };
 
@@ -223,7 +223,7 @@ export function autoScaleColor({
             for (const v of domain) {
                 if (scheme_[v] == null) {
                     newDomain.push(v);
-                    newScheme.push(unknown)
+                    newScheme.push(unknown);
                 }
             }
             domain = newDomain;
@@ -234,18 +234,17 @@ export function autoScaleColor({
         range = Array.isArray(scheme_)
             ? scheme_
             : isCategoricalScheme(scheme_)
-                ? categoricalSchemes.get(scheme_)
-                : ordinalScheme(scheme_)(domain.length);
+              ? categoricalSchemes.get(scheme_)
+              : ordinalScheme(scheme_)(domain.length);
         fn = scaleOrdinal().domain(domain).range(range);
     } else if (!!ThresholdScales[type]) {
-
         const scheme_ = scheme || plotDefaults.colorScheme;
 
         range =
             Array.isArray(scheme_) && (scaleOptions.n == null || scaleOptions.n === scheme_.length)
                 ? scheme_.slice(0)
                 : Array.isArray(scheme_)
-                    ? // interpolate n colors from custom colors
+                  ? // interpolate n colors from custom colors
                     d3Range(n)
                         .map((i) => i / (n - 1))
                         .map(
@@ -254,11 +253,11 @@ export function autoScaleColor({
                                 scheme_
                             ).interpolate(interpolateLab)
                         )
-                    : interpolate
-                        ? d3Range(n).map((i) => interpolate(i / (n - 1)))
-                        : isOrdinalScheme(scheme_)
-                            ? ordinalScheme(scheme_)(n)
-                            : null;
+                  : interpolate
+                    ? d3Range(n).map((i) => interpolate(i / (n - 1)))
+                    : isOrdinalScheme(scheme_)
+                      ? ordinalScheme(scheme_)(n)
+                      : null;
 
         if (range == null) {
             throw new Error('unknown ordinal scheme ' + scheme_);
@@ -324,25 +323,25 @@ function getScaleRange(
     return name === 'opacity'
         ? [0, 1]
         : name === 'length'
-            ? [0, 20]
-            : name === 'x'
-                ? [
-                    marginLeft + (insetLeft || inset || 0),
-                    marginLeft + plotWidth - (insetRight || inset || 0)
+          ? [0, 20]
+          : name === 'x'
+            ? [
+                  marginLeft + (insetLeft || inset || 0),
+                  marginLeft + plotWidth - (insetRight || inset || 0)
+              ]
+            : name === 'y'
+              ? [
+                    plotHeight + marginTop - (insetBottom || inset || 0),
+                    marginTop + (insetTop || inset || 0)
                 ]
-                : name === 'y'
-                    ? [
-                        plotHeight + marginTop - (insetBottom || inset || 0),
-                        marginTop + (insetTop || inset || 0)
-                    ]
-                    : name === 'r'
-                        ? [0, 10]
-                        : name === 'symbol'
-                            ? // Plot is smart enough to pick different default shapes depending on whether
-                            // or not there are filled dot marks in the plot, so we have to pass this
-                            // information all the way here
-                            plotHasFilledDotMarks
-                                ? ['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']
-                                : ['circle', 'plus', 'times', 'triangle2', 'asterisk', 'square2', 'diamond2']
-                            : [];
+              : name === 'r'
+                ? [0, 10]
+                : name === 'symbol'
+                  ? // Plot is smart enough to pick different default shapes depending on whether
+                    // or not there are filled dot marks in the plot, so we have to pass this
+                    // information all the way here
+                    plotHasFilledDotMarks
+                      ? ['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']
+                      : ['circle', 'plus', 'times', 'triangle2', 'asterisk', 'square2', 'diamond2']
+                  : [];
 }
diff --git a/src/lib/helpers/index.ts b/src/lib/helpers/index.ts
index f707610d..7f51116e 100644
--- a/src/lib/helpers/index.ts
+++ b/src/lib/helpers/index.ts
@@ -1,9 +1,4 @@
-import type {
-    ChannelAccessor,
-    ChannelName,
-    DataRecord,
-    RawValue
-} from '$lib/types.js';
+import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '$lib/types.js';
 import type { Snippet } from 'svelte';
 import { resolveProp } from './resolve.js';
 import { isDate } from '$lib/helpers/typeChecks.js';
diff --git a/src/lib/helpers/reduce.ts b/src/lib/helpers/reduce.ts
index bbc59efe..fdfa65d0 100644
--- a/src/lib/helpers/reduce.ts
+++ b/src/lib/helpers/reduce.ts
@@ -1,10 +1,4 @@
-import type {
-    ChannelName,
-    Channels,
-    DataRecord,
-    DataRow,
-    RawValue
-} from '$lib/types.js';
+import type { ChannelName, Channels, DataRecord, DataRow, RawValue } from '$lib/types.js';
 import { min, max, mode, sum, mean, median, variance, deviation, quantile } from 'd3-array';
 import { resolveChannel } from './resolve.js';
 import { POSITION_CHANNELS } from './index.js';
diff --git a/src/lib/helpers/resolve.test.ts b/src/lib/helpers/resolve.test.ts
index ebe1ae21..95c4ec23 100644
--- a/src/lib/helpers/resolve.test.ts
+++ b/src/lib/helpers/resolve.test.ts
@@ -2,7 +2,6 @@ import { describe, it, expect } from 'vitest';
 import { resolveChannel, resolveProp } from './resolve.js';
 import { RAW_VALUE } from '$lib/transforms/recordize.js';
 
-
 describe('resolveProp', () => {
     it('resolves string keys', () => {
         expect(resolveProp('key', { key: 42 })).toBe(42);
diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
index b52a8213..94f66044 100644
--- a/src/lib/helpers/resolve.ts
+++ b/src/lib/helpers/resolve.ts
@@ -31,7 +31,11 @@ export function resolveProp<T>(
         return datum == null
             ? accessor()
             : accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
-    } else if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum && datum[accessor] !== undefined) {
+    } else if (
+        (typeof accessor === 'string' || typeof accessor === 'symbol') &&
+        datum &&
+        datum[accessor] !== undefined
+    ) {
         return datum[accessor] as T;
     }
     return isRawValue(accessor) ? accessor : _defaultValue;
@@ -53,14 +57,14 @@ export function toChannelOption(
     return isDataRecord(channel)
         ? (channel as ChannelOptions)
         : {
-            value: channel,
-            scale:
-                (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
-                    typeof channel === 'undefined'
-                    ? null
-                    : CHANNEL_SCALE[name],
-            channel: null
-        };
+              value: channel,
+              scale:
+                  (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
+                  typeof channel === 'undefined'
+                      ? null
+                      : CHANNEL_SCALE[name],
+              channel: null
+          };
 }
 
 export function resolveChannel(
@@ -95,7 +99,11 @@ function resolve(
             // so we're passing the original value to accessor functions instead of our wrapped record
             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];
+        if (
+            (typeof accessor === 'string' || typeof accessor === 'symbol') &&
+            datum[accessor] !== undefined
+        )
+            return datum[accessor];
         // fallback to channel name as accessor
         if (accessor === null && datum[channel] !== undefined) return datum[channel];
         return isRawValue(accessor) ? accessor : null;
@@ -110,10 +118,10 @@ function resolve(
         return typeof accessor === 'function'
             ? accessor(datum)
             : accessor !== null && isRawValue(accessor)
-                ? accessor
-                : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
-                    ? datum
-                    : null;
+              ? accessor
+              : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
+                ? datum
+                : null;
     }
 }
 
diff --git a/src/lib/helpers/scales.ts b/src/lib/helpers/scales.ts
index 649fcd99..2d5be986 100644
--- a/src/lib/helpers/scales.ts
+++ b/src/lib/helpers/scales.ts
@@ -135,16 +135,16 @@ export function computeScales(
 
     const projection = plotOptions.projection
         ? createProjection(
-            { projOptions: plotOptions.projection, inset: plotOptions.inset },
-            {
-                width: plotWidth,
-                height: plotHeight,
-                marginBottom: plotOptions.marginBottom,
-                marginLeft: plotOptions.marginLeft,
-                marginRight: plotOptions.marginRight,
-                marginTop: plotOptions.marginTop
-            }
-        )
+              { projOptions: plotOptions.projection, inset: plotOptions.inset },
+              {
+                  width: plotWidth,
+                  height: plotHeight,
+                  marginBottom: plotOptions.marginBottom,
+                  marginLeft: plotOptions.marginLeft,
+                  marginRight: plotOptions.marginRight,
+                  marginTop: plotOptions.marginTop
+              }
+          )
         : null;
     return { x, y, r, color, opacity, length, symbol, fx, fy, projection };
 }
@@ -214,8 +214,8 @@ export function createScale<T extends ScaleOptions>(
                             name === 'color'
                                 ? isColorOrNull
                                 : name === 'symbol'
-                                    ? isSymbolOrNull
-                                    : false;
+                                  ? isSymbolOrNull
+                                  : false;
 
                         let allValuesAreOutputType = !!isOutputType && mark.data.length > 0;
 
@@ -251,7 +251,10 @@ export function createScale<T extends ScaleOptions>(
                             for (const datum of mark.data) {
                                 const value = resolveProp(channelOptions.value, datum);
                                 dataValues.add(value);
-                                if (name === 'color' && scaleOptions.type === 'quantile' || scaleOptions.type === 'quantile-cont') {
+                                if (
+                                    (name === 'color' && scaleOptions.type === 'quantile') ||
+                                    scaleOptions.type === 'quantile-cont'
+                                ) {
                                     allDataValues.push(value);
                                 }
                             }
@@ -296,7 +299,8 @@ export function createScale<T extends ScaleOptions>(
         valueArr.sort(ascending);
     }
 
-    const valueArray = type === 'quantile' || type === 'quantile-cont' ? allDataValues.toSorted() : valueArr;
+    const valueArray =
+        type === 'quantile' || type === 'quantile-cont' ? allDataValues.toSorted() : valueArr;
 
     const domain = scaleOptions.domain
         ? isOrdinal
@@ -308,10 +312,10 @@ export function createScale<T extends ScaleOptions>(
             type === 'categorical' ||
             type === 'quantile' ||
             type === 'quantile-cont'
-            ? name === 'y'
-                ? valueArray.toReversed()
-                : valueArray
-            : extent(scaleOptions.zero ? [0, ...valueArray] : valueArray);
+          ? name === 'y'
+              ? valueArray.toReversed()
+              : valueArray
+          : extent(scaleOptions.zero ? [0, ...valueArray] : valueArray);
 
     if (!scaleOptions.scale) {
         throw new Error(`No scale function defined for ${name}`);
@@ -341,8 +345,8 @@ export function createScale<T extends ScaleOptions>(
             type === 'time'
                 ? null
                 : propNames.size === 1
-                    ? `${[...propNames.values()][0]}${type === 'log' ? ' (log)' : ''}`
-                    : null
+                  ? `${[...propNames.values()][0]}${type === 'log' ? ' (log)' : ''}`
+                  : null
     };
 }
 
@@ -419,8 +423,8 @@ export function getUsedScales(
             return [
                 channel,
                 !skipMarks.has(mark.id) &&
-                toChannelOption(channel, options[channel]).scale !== null &&
-                !plot.scales[scale].isDummy
+                    toChannelOption(channel, options[channel]).scale !== null &&
+                    !plot.scales[scale].isDummy
             ];
         })
     ) as { [k in ScaledChannelName]: boolean };
@@ -474,8 +478,8 @@ export function projectX(channel: 'x' | 'x1' | 'x2', scales: PlotScales, value:
         (channel === 'x' && scales.x.type === 'band'
             ? scales.x.fn.bandwidth() * 0.5
             : channel === 'x2' && scales.x.type === 'band'
-                ? scales.x.fn.bandwidth()
-                : 0)
+              ? scales.x.fn.bandwidth()
+              : 0)
     );
 }
 
@@ -485,7 +489,7 @@ export function projectY(channel: 'y' | 'y1' | 'y2', scales: PlotScales, value:
         (channel === 'y' && scales.y.type === 'band'
             ? scales.y.fn.bandwidth() * 0.5
             : channel === 'y2' && scales.y.type === 'band'
-                ? scales.y.fn.bandwidth()
-                : 0)
+              ? scales.y.fn.bandwidth()
+              : 0)
     );
 }
diff --git a/src/lib/helpers/typeChecks.ts b/src/lib/helpers/typeChecks.ts
index f9614132..04d8ff22 100644
--- a/src/lib/helpers/typeChecks.ts
+++ b/src/lib/helpers/typeChecks.ts
@@ -47,14 +47,16 @@ export function isColorOrNull(v: RawValue | null | undefined) {
     if (v == null) return true;
     if (typeof v === 'string') {
         v = `${v}`.toLowerCase();
-        return (v === 'currentcolor' ||
+        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)
+            color(v) !== null
+        );
     }
     return false;
 }
diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
index a7b1b6df..eaacc36e 100644
--- a/src/lib/marks/Geo.svelte
+++ b/src/lib/marks/Geo.svelte
@@ -1,11 +1,6 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type {
-        DataRecord,
-        PlotContext,
-        BaseMarkProps,
-        ConstantAccessor
-    } from '../types.js';
+    import type { DataRecord, PlotContext, BaseMarkProps, ConstantAccessor } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
     import { resolveChannel, resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
diff --git a/src/lib/marks/helpers/events.ts b/src/lib/marks/helpers/events.ts
index 694346ca..044eb28e 100644
--- a/src/lib/marks/helpers/events.ts
+++ b/src/lib/marks/helpers/events.ts
@@ -15,14 +15,14 @@ declare global {
 }
 
 /**
- * Translates client coordinates (clientX, clientY) to the layer coordinates 
+ * Translates client coordinates (clientX, clientY) to the layer coordinates
  * of the plot frame, regardless of which element triggered the event
  */
 export function clientToLayerCoordinates(
     event: MouseEvent,
     plotBody: HTMLElement | null | undefined
 ): [number, number] {
-    // If layerX/Y already exist and the target is the plot frame (rect element), 
+    // If layerX/Y already exist and the target is the plot frame (rect element),
     // we can use them directly
     // if (event.layerX !== undefined && (event.target as SVGElement).tagName === 'rect') {
     //     return [event.layerX, event.layerY];
@@ -34,10 +34,7 @@ export function clientToLayerCoordinates(
     const plotBodyRect = plotBody.getBoundingClientRect();
 
     // Calculate the coordinates relative to the plot body
-    return [
-        event.clientX - plotBodyRect.left,
-        event.clientY - plotBodyRect.top
-    ];
+    return [event.clientX - plotBodyRect.left, event.clientY - plotBodyRect.top];
 }
 
 export function addEventHandlers(
@@ -77,7 +74,7 @@ export function addEventHandlers(
         'ontouchcancel',
         'ontouchend',
         'ontouchmove',
-        'onwheel',
+        'onwheel'
     ]);
 
     const listeners = new Map<string, MouseEventHandler<SVGElement>>();
diff --git a/src/lib/transforms/recordize.ts b/src/lib/transforms/recordize.ts
index a4043b92..b5125ae0 100644
--- a/src/lib/transforms/recordize.ts
+++ b/src/lib/transforms/recordize.ts
@@ -19,7 +19,7 @@ export function recordizeX(
             data: data.map((value, index) => ({
                 __value: value,
                 ...(withIndex ? { [INDEX]: index } : {}),
-                [RAW_VALUE]: value,
+                [RAW_VALUE]: value
             })) as DataRecord[],
             ...channels,
             x: RAW_VALUE,
@@ -44,7 +44,7 @@ export function recordizeY(
         return {
             data: Array.from(data).map((value, index) => ({
                 ...(withIndex ? { __index: index } : {}),
-                [RAW_VALUE]: value,
+                [RAW_VALUE]: value
             })) as DataRecord[],
             ...channels,
             ...(withIndex ? { x: '__index' } : {}),
@@ -93,10 +93,10 @@ export function recordize({ data, ...channels }: TransformArgsRow): TransformArg
     if (!isDataRecord(data[0])) {
         return {
             data: (data as RawValue[]).map((d) => ({
-                [RAW_VALUE]: d,
+                [RAW_VALUE]: d
             })) as DataRecord[],
-            ...channels,
+            ...channels
         };
     }
     return { data, ...channels };
-}
\ No newline at end of file
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6490f428..ec513a20 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -151,12 +151,12 @@ export type ScaleOptions = {
     base?: number;
     // sorting for band and point scales
     sort?:
-    | ChannelAccessor
-    | ((a: RawValue, b: RawValue) => number)
-    | {
-        channel: string;
-        order: 'ascending' | 'descending';
-    };
+        | ChannelAccessor
+        | ((a: RawValue, b: RawValue) => number)
+        | {
+              channel: string;
+              order: 'ascending' | 'descending';
+          };
     // symlog scales
     constant?: number;
 };
@@ -164,18 +164,18 @@ export type ScaleOptions = {
 export type ColorScaleOptions = ScaleOptions & {
     legend: boolean;
     type:
-    | ScaleType
-    | 'categorical'
-    | 'sequential'
-    | 'cyclical'
-    | 'threshold'
-    | 'quantile'
-    | 'quantize'
-    | 'diverging'
-    | 'diverging-log'
-    | 'diverging-pow'
-    | 'diverging-sqrt'
-    | 'diverging-symlog';
+        | ScaleType
+        | 'categorical'
+        | 'sequential'
+        | 'cyclical'
+        | 'threshold'
+        | 'quantile'
+        | 'quantize'
+        | 'diverging'
+        | 'diverging-log'
+        | 'diverging-pow'
+        | 'diverging-sqrt'
+        | 'diverging-symlog';
     scheme: string;
     /**
      * fallback color used for null/undefined
@@ -479,9 +479,9 @@ export type PlotScale = {
     uniqueScaleProps: Set<ChannelAccessor>;
     skip: Map<ScaledChannelName, Set<symbol>>;
     fn: ScaleLinear<RawValue, number> &
-    ScaleBand<RawValue> &
-    ScaleOrdinal<string | Date, number> &
-    ScaleOrdinal<string | Date, string>;
+        ScaleBand<RawValue> &
+        ScaleOrdinal<string | Date, number> &
+        ScaleOrdinal<string | Date, string>;
 };
 
 export type CurveName =
@@ -708,11 +708,11 @@ export type BaseMarkProps = Partial<{
 export type BorderRadius =
     | number
     | {
-        topLeft?: number;
-        topRight?: number;
-        bottomRight?: number;
-        bottomLeft?: number;
-    };
+          topLeft?: number;
+          topRight?: number;
+          bottomRight?: number;
+          bottomLeft?: number;
+      };
 
 export type BaseRectMarkProps = {
     inset?: ConstantAccessor<number>;
diff --git a/src/routes/features/projections/+page.md b/src/routes/features/projections/+page.md
index 0033ef1d..2f480e5f 100644
--- a/src/routes/features/projections/+page.md
+++ b/src/routes/features/projections/+page.md
@@ -153,7 +153,12 @@ Plot provides a variety of built-in projections. And as above, all world project
 
 ```svelte live
 <script>
-    import { Plot, Geo, Sphere, Graticule } from 'svelteplot';
+    import {
+        Plot,
+        Geo,
+        Sphere,
+        Graticule
+    } from 'svelteplot';
     import { Select } from '$lib/ui';
     import { page } from '$app/state';
     import { geoEqualEarth } from 'd3-geo';
@@ -206,7 +211,12 @@ Plot provides a variety of built-in projections. And as above, all world project
 ```svelte live
 <script>
     import { Slider } from '$lib/ui';
-    import { Plot, Geo, Sphere, Graticule } from 'svelteplot';
+    import {
+        Plot,
+        Geo,
+        Sphere,
+        Graticule
+    } from 'svelteplot';
     import { page } from '$app/state';
     import * as topojson from 'topojson-client';
     import { geoCentroid } from 'd3-geo';
@@ -262,7 +272,12 @@ You can use custom projections if you need more control over the projection para
 ```svelte live
 <script>
     import { Slider } from '$lib/ui';
-    import { Plot, Geo, Sphere, Graticule } from 'svelteplot';
+    import {
+        Plot,
+        Geo,
+        Sphere,
+        Graticule
+    } from 'svelteplot';
     import { page } from '$app/state';
     import * as topojson from 'topojson-client';
     import { geoOrthographic } from 'd3-geo';
diff --git a/src/routes/marks/bollinger/+page.md b/src/routes/marks/bollinger/+page.md
index 6b4040c9..db5c4442 100644
--- a/src/routes/marks/bollinger/+page.md
+++ b/src/routes/marks/bollinger/+page.md
@@ -6,7 +6,12 @@ Bollinger Bands are a [useful analysis tool](https://www.investopedia.com/terms/
 
 ```svelte live
 <script>
-    import { Plot, Line, Area, BollingerY } from 'svelteplot';
+    import {
+        Plot,
+        Line,
+        Area,
+        BollingerY
+    } from 'svelteplot';
     import { Slider } from '$lib/ui';
 
     import { page } from '$app/state';
@@ -117,7 +122,12 @@ For more flexibility you can also use the bollingerX and bollingerY as transform
 
 ```svelte live
 <script>
-    import { Plot, Line, Area, BollingerX } from 'svelteplot';
+    import {
+        Plot,
+        Line,
+        Area,
+        BollingerX
+    } from 'svelteplot';
     import { Slider } from '$lib/ui';
 
     import { page } from '$app/state';
diff --git a/src/routes/marks/difference/+page.md b/src/routes/marks/difference/+page.md
index bb7431d3..df1bf57f 100644
--- a/src/routes/marks/difference/+page.md
+++ b/src/routes/marks/difference/+page.md
@@ -68,7 +68,12 @@ If just one _x_ and _y_ channel is defined, the value zero will be used as compa
 
 ```svelte live
 <script>
-    import { Plot, Line, DifferenceY, RuleY } from 'svelteplot';
+    import {
+        Plot,
+        Line,
+        DifferenceY,
+        RuleY
+    } from 'svelteplot';
     import { page } from '$app/state';
     let { gistemp } = $derived(page.data.data);
 </script>
@@ -102,7 +107,12 @@ You can compare the metric to a different "baseline" by providing a constant _y1
 
 ```svelte live
 <script>
-    import { Plot, Line, DifferenceY, RuleY } from 'svelteplot';
+    import {
+        Plot,
+        Line,
+        DifferenceY,
+        RuleY
+    } from 'svelteplot';
     import { page } from '$app/state';
     let { gistemp } = $derived(page.data.data);
     import { Slider } from '$lib/ui';
diff --git a/src/routes/marks/regression/+page.md b/src/routes/marks/regression/+page.md
index a08f7a84..b66a43eb 100644
--- a/src/routes/marks/regression/+page.md
+++ b/src/routes/marks/regression/+page.md
@@ -6,7 +6,12 @@ Regressions are useful if you want to show the relationship between two variable
 
 ```svelte live
 <script lang="ts">
-    import { Plot, Dot, RuleY, RegressionY } from 'svelteplot';
+    import {
+        Plot,
+        Dot,
+        RuleY,
+        RegressionY
+    } from 'svelteplot';
     import { page } from '$app/state';
     import { Select, Slider } from '$lib/ui';
 
@@ -157,7 +162,12 @@ Returns a linear regression mark where y is the dependent variable and x is the
 
 ```svelte live
 <script lang="ts">
-    import { Plot, Dot, RuleY, RegressionY } from 'svelteplot';
+    import {
+        Plot,
+        Dot,
+        RuleY,
+        RegressionY
+    } from 'svelteplot';
     import { page } from '$app/state';
     import { Select, Slider } from '$lib/ui';
 
@@ -213,7 +223,12 @@ Returns a linear regression mark where x is the dependent variable and y is the
 
 ```svelte live
 <script lang="ts">
-    import { Plot, Dot, RuleY, RegressionX } from 'svelteplot';
+    import {
+        Plot,
+        Dot,
+        RuleY,
+        RegressionX
+    } from 'svelteplot';
     import { page } from '$app/state';
     import { Select, Slider } from '$lib/ui';
 
diff --git a/src/routes/tests/bars/+page.md b/src/routes/tests/bars/+page.md
index b6c9c477..5b05dcd7 100644
--- a/src/routes/tests/bars/+page.md
+++ b/src/routes/tests/bars/+page.md
@@ -21,9 +21,8 @@ title: Trying to cut off bars
             y: 'size',
             x: 'scenario',
             fill: 'package'
-        })}
-         />
-         <BarY
+        })} />
+    <BarY
         data={bundlesizes}
         y="size"
         insetTop={2}
diff --git a/src/routes/tests/marks/+page.md b/src/routes/tests/marks/+page.md
index 9e8f4236..149a9b96 100644
--- a/src/routes/tests/marks/+page.md
+++ b/src/routes/tests/marks/+page.md
@@ -46,7 +46,13 @@ Link to [empty page](empty).
 ```svelte
 <script lang="ts">
     import { css } from '@emotion/css';
-    import { Plot, Line, Dot, AreaY, RectX } from 'svelteplot';
+    import {
+        Plot,
+        Line,
+        Dot,
+        AreaY,
+        RectX
+    } from 'svelteplot';
     import { Slider } from '$lib/ui';
 
     import { page } from '$app/state';
diff --git a/src/routes/transforms/interval/+page.md b/src/routes/transforms/interval/+page.md
index 16ffd80f..fac7b033 100644
--- a/src/routes/transforms/interval/+page.md
+++ b/src/routes/transforms/interval/+page.md
@@ -13,10 +13,11 @@ The interval transform is often used for time-series bar charts. For example, co
 
     const DAY_MONTH = new Intl.DateTimeFormat('en-US', {
         day: 'numeric',
-        month: 'short',
+        month: 'short'
     });
 
-    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse();
+    const tickFormat = (date: Date) =>
+        DAY_MONTH.format(date).split(' ').reverse();
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
@@ -37,12 +38,13 @@ In contrast, a [rectY](/marks/rect) mark with the interval option and the day in
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
-    
+
     const DAY_MONTH = new Intl.DateTimeFormat('en-US', {
         day: 'numeric',
-        month: 'short',
+        month: 'short'
     });
-    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse();
+    const tickFormat = (date: Date) =>
+        DAY_MONTH.format(date).split(' ').reverse();
 </script>
 
 <Plot marginLeft={40} x={{ tickFormat }} grid>
@@ -80,10 +82,11 @@ The meaning of the interval mark option depends on the associated mark, such as
 
     const DAY_MONTH = new Intl.DateTimeFormat('en-US', {
         day: 'numeric',
-        month: 'short',
+        month: 'short'
     });
 
-    const tickFormat = (date: Date) => DAY_MONTH.format(date).split(' ').reverse();
+    const tickFormat = (date: Date) =>
+        DAY_MONTH.format(date).split(' ').reverse();
 </script>
 
 <Plot marginLeft={40} x={{ tickFormat }} grid>
diff --git a/src/tests/barX.test.svelte b/src/tests/barX.test.svelte
index c642cfe5..d16a8d1c 100644
--- a/src/tests/barX.test.svelte
+++ b/src/tests/barX.test.svelte
@@ -6,7 +6,7 @@
         plotArgs: ComponentProps<typeof Plot>;
         barArgs: ComponentProps<typeof BarX>;
     }
-    
+
     let { plotArgs, barArgs }: Props = $props();
 </script>
 
diff --git a/src/tests/barX.test.ts b/src/tests/barX.test.ts
index 8884e19e..5b186d83 100644
--- a/src/tests/barX.test.ts
+++ b/src/tests/barX.test.ts
@@ -3,15 +3,18 @@ import { render } from '@testing-library/svelte';
 import BarXTest from './barX.test.svelte';
 import { parseSVG, makeAbsolute } from 'svg-path-parser';
 
-const testData = [{
-    year: '2010',
-    low: 2,
-    high: 5
-}, {
-    year: '2011',
-    low: 4,
-    high: 7
-}]
+const testData = [
+    {
+        year: '2010',
+        low: 2,
+        high: 5
+    },
+    {
+        year: '2011',
+        low: 4,
+        high: 7
+    }
+];
 
 describe('BarX mark', () => {
     it('simple bar chart from number array', () => {
@@ -29,10 +32,16 @@ describe('BarX mark', () => {
         expect(bars.length).toBe(5);
         const barDims = Array.from(bars).map(getRectDims);
         // check that bar height are equal
-        expect(barDims.map(d => d.h)).toStrictEqual(new Array(5).fill(barDims[0].h))
+        expect(barDims.map((d) => d.h)).toStrictEqual(new Array(5).fill(barDims[0].h));
         // check that bar length match data
-        expect(barDims.map(d => d.w)).toStrictEqual([1, 2, 3, 4, 5].map(m => barDims[0].w * m))
-        expect(barDims.map(d => d.strokeWidth)).toStrictEqual(['1px', '2px', '3px', '4px', '5px']);
+        expect(barDims.map((d) => d.w)).toStrictEqual([1, 2, 3, 4, 5].map((m) => barDims[0].w * m));
+        expect(barDims.map((d) => d.strokeWidth)).toStrictEqual([
+            '1px',
+            '2px',
+            '3px',
+            '4px',
+            '5px'
+        ]);
     });
 
     it('bar chart from objects', () => {
@@ -71,9 +80,9 @@ describe('BarX mark', () => {
         expect(bars.length).toBe(5);
         const barDims = Array.from(bars).map(getPathDims);
         // // check that bar height are equal
-        expect(barDims.map(d => d.h)).toStrictEqual(new Array(5).fill(barDims[0].h))
+        expect(barDims.map((d) => d.h)).toStrictEqual(new Array(5).fill(barDims[0].h));
         // // check that bar length match data
-        expect(barDims.map(d => d.w)).toStrictEqual([1, 2, 3, 4, 5].map(m => barDims[0].w * m))
+        expect(barDims.map((d) => d.w)).toStrictEqual([1, 2, 3, 4, 5].map((m) => barDims[0].w * m));
     });
 });
 
@@ -88,14 +97,14 @@ function getRectDims(rect: SVGRectElement) {
         h: Math.round(+rect.getAttribute('height')),
         fill: rect.style.fill,
         stroke: rect.style.stroke,
-        strokeWidth: rect.style.strokeWidth,
-    }
+        strokeWidth: rect.style.strokeWidth
+    };
 }
 
 function getPathDims(path: SVGPathElement) {
     const r = makeAbsolute(parseSVG(path.getAttribute('d')));
-    const x = r.flatMap(d => [d.x, d.x0, d.x1]).filter(x => x != null);
-    const y = r.flatMap(d => [d.y, d.y0, d.y1]).filter(y => y != null);
+    const x = r.flatMap((d) => [d.x, d.x0, d.x1]).filter((x) => x != null);
+    const y = r.flatMap((d) => [d.y, d.y0, d.y1]).filter((y) => y != null);
     const t = path
         ?.getAttribute('transform')
         ?.match(/translate\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?)\)/);
@@ -107,6 +116,6 @@ function getPathDims(path: SVGPathElement) {
         h: Math.round(Math.max(...y) - Math.min(...y)),
         fill: path.style.fill,
         stroke: path.style.stroke,
-        strokeWidth: path.style.strokeWidth,
+        strokeWidth: path.style.strokeWidth
     };
 }
diff --git a/src/tests/barY.test.ts b/src/tests/barY.test.ts
index 972d6452..118b2725 100644
--- a/src/tests/barY.test.ts
+++ b/src/tests/barY.test.ts
@@ -27,7 +27,13 @@ describe('BarY mark', () => {
         expect(barDims[2].h).toBe(barDims[0].h * 3);
         expect(barDims[3].h).toBe(barDims[0].h * 4);
         expect(barDims[4].h).toBe(barDims[0].h * 5);
-        expect(barDims.map(d => d.strokeWidth)).toStrictEqual(['1px', '2px', '3px', '4px', '5px']);
+        expect(barDims.map((d) => d.strokeWidth)).toStrictEqual([
+            '1px',
+            '2px',
+            '3px',
+            '4px',
+            '5px'
+        ]);
     });
 
     it('stacked bar chart', () => {
@@ -117,14 +123,14 @@ function getRectDims(rect: SVGRectElement) {
         h: Math.round(+rect.getAttribute('height')),
         fill: rect.style.fill,
         stroke: rect.style.stroke,
-        strokeWidth: rect.style.strokeWidth,
-    }
+        strokeWidth: rect.style.strokeWidth
+    };
 }
 
 function getPathDims(path: SVGPathElement) {
     const r = makeAbsolute(parseSVG(path.getAttribute('d')));
-    const x = r.flatMap(d => [d.x, d.x0, d.x1]).filter(x => x != null);
-    const y = r.flatMap(d => [d.y, d.y0, d.y1]).filter(y => y != null);
+    const x = r.flatMap((d) => [d.x, d.x0, d.x1]).filter((x) => x != null);
+    const y = r.flatMap((d) => [d.y, d.y0, d.y1]).filter((y) => y != null);
     const t = path
         ?.getAttribute('transform')
         ?.match(/translate\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?)\)/);
@@ -136,6 +142,6 @@ function getPathDims(path: SVGPathElement) {
         h: Math.round(Math.max(...y) - Math.min(...y)),
         fill: path.style.fill,
         stroke: path.style.stroke,
-        strokeWidth: path.style.strokeWidth,
+        strokeWidth: path.style.strokeWidth
     };
 }
diff --git a/src/tests/brush.svelte.test.ts b/src/tests/brush.svelte.test.ts
index 956c0998..f2eaaca4 100644
--- a/src/tests/brush.svelte.test.ts
+++ b/src/tests/brush.svelte.test.ts
@@ -4,14 +4,13 @@ import { userEvent } from '@testing-library/user-event';
 import BrushTest from './brush.test.svelte';
 import { tick, type ComponentProps } from 'svelte';
 
-
 describe('Brush mark', () => {
     it('single brush with basic properties', async () => {
         const props: ComponentProps<typeof BrushTest> = $state({
             plotArgs: { x: { domain: [0, 10] }, y: { domain: [0, 10] } },
             brushArgs: {},
             brush: { enabled: false }
-        })
+        });
 
         const { container } = render(BrushTest, props);
 
@@ -21,12 +20,11 @@ describe('Brush mark', () => {
     });
 
     it('brush reacts to state changes', async () => {
-
         const props: ComponentProps<typeof BrushTest> = $state({
             plotArgs: { x: { domain: [0, 10] }, y: { domain: [0, 10] } },
             brushArgs: {},
             brush: { enabled: false }
-        })
+        });
 
         const { container } = render(BrushTest, props);
 
@@ -48,7 +46,7 @@ describe('Brush mark', () => {
             plotArgs: { width: 400, x: { domain: [0, 10] }, y: { domain: [0, 10] } },
             brushArgs: {},
             brush: { enabled: false }
-        })
+        });
 
         const { container } = render(BrushTest, props);
 
@@ -81,6 +79,4 @@ describe('Brush mark', () => {
         const draggedRect = container.querySelectorAll('rect.brush-rect');
         expect(draggedRect.length).toBe(1);
     });
-
-
 });
diff --git a/src/tests/colors.test.ts b/src/tests/colors.test.ts
index 14204cbf..4229456b 100644
--- a/src/tests/colors.test.ts
+++ b/src/tests/colors.test.ts
@@ -10,11 +10,15 @@ describe('Colors', () => {
         const { container } = render(ColorsTest, {
             props: {
                 dotOptions: {
-                    data: [{
-                        x: 1, sex: 'male'
-                    }, {
-                        x: 2, sex: 'female'
-                    }
+                    data: [
+                        {
+                            x: 1,
+                            sex: 'male'
+                        },
+                        {
+                            x: 2,
+                            sex: 'female'
+                        }
                     ],
                     x: 'x',
                     y: 0,
@@ -34,13 +38,19 @@ describe('Colors', () => {
         const { container } = render(ColorsTest, {
             props: {
                 dotOptions: {
-                    data: [{
-                        x: 1, sex: 'male'
-                    }, {
-                        x: 2, sex: 'female'
-                    }, {
-                        x: 3, sex: 'in-between'
-                    }
+                    data: [
+                        {
+                            x: 1,
+                            sex: 'male'
+                        },
+                        {
+                            x: 2,
+                            sex: 'female'
+                        },
+                        {
+                            x: 3,
+                            sex: 'in-between'
+                        }
                     ],
                     x: 'x',
                     y: 0,
@@ -66,6 +76,6 @@ describe('Colors', () => {
 function getDotStyle(path: SVGPathElement) {
     return {
         fill: path.style.fill,
-        stroke: path.style.stroke,
-    }
+        stroke: path.style.stroke
+    };
 }
diff --git a/src/tests/gridX.test.svelte b/src/tests/gridX.test.svelte
index 575fb611..6df26db0 100644
--- a/src/tests/gridX.test.svelte
+++ b/src/tests/gridX.test.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { GridX, Plot } from 'svelteplot';
-  import type { ComponentProps } from 'svelte';
+    import { GridX, Plot } from 'svelteplot';
+    import type { ComponentProps } from 'svelte';
 
-  interface Props {
-    plotArgs: ComponentProps<typeof Plot>;
-    gridArgs: ComponentProps<typeof GridX>;
-  }
-  
-  let { plotArgs, gridArgs }: Props = $props();
+    interface Props {
+        plotArgs: ComponentProps<typeof Plot>;
+        gridArgs: ComponentProps<typeof GridX>;
+    }
+
+    let { plotArgs, gridArgs }: Props = $props();
 </script>
 
 <Plot width={100} height={100} axes={false} {...plotArgs}>
-  <GridX {...gridArgs} />
+    <GridX {...gridArgs} />
 </Plot>
diff --git a/src/tests/gridX.test.ts b/src/tests/gridX.test.ts
index 3d7645c8..42c34fea 100644
--- a/src/tests/gridX.test.ts
+++ b/src/tests/gridX.test.ts
@@ -2,27 +2,28 @@ import { describe, it, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import GridXTest from './gridX.test.svelte';
 
-
 describe('GridX mark', () => {
-  it('simple x grid with stroke styles', () => {
-    const { container } = render(GridXTest, {
-      props: {
-        plotArgs: {
-          x: { domain: [0, 10] },
-          y: { domain: [0, 10] },
-        },
-        gridArgs: {
-          stroke: '#008000',
-          strokeOpacity: 0.5,
-          strokeDasharray: '5, 5',
-          data: [0, 5, 10],
-        },
-      },
+    it('simple x grid with stroke styles', () => {
+        const { container } = render(GridXTest, {
+            props: {
+                plotArgs: {
+                    x: { domain: [0, 10] },
+                    y: { domain: [0, 10] }
+                },
+                gridArgs: {
+                    stroke: '#008000',
+                    strokeOpacity: 0.5,
+                    strokeDasharray: '5, 5',
+                    data: [0, 5, 10]
+                }
+            }
+        });
+        const gridLines = container.querySelectorAll(
+            'g.grid-x > line'
+        ) as NodeListOf<SVGLineElement>;
+        expect(gridLines.length).toBe(3);
+        expect(gridLines[0].style.strokeDasharray).toBe('5, 5');
+        expect(gridLines[0].style.stroke).toBe('#008000');
+        expect(gridLines[0].style.strokeOpacity).toBe('0.5');
     });
-    const gridLines = container.querySelectorAll('g.grid-x > line') as NodeListOf<SVGLineElement>;
-    expect(gridLines.length).toBe(3);
-    expect(gridLines[0].style.strokeDasharray).toBe('5, 5');
-    expect(gridLines[0].style.stroke).toBe('#008000');
-    expect(gridLines[0].style.strokeOpacity).toBe('0.5');
-  })
-})
\ No newline at end of file
+});
diff --git a/src/tests/gridY.test.svelte b/src/tests/gridY.test.svelte
index af06a78a..7f6cfeea 100644
--- a/src/tests/gridY.test.svelte
+++ b/src/tests/gridY.test.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { GridY, Plot } from 'svelteplot';
-  import type { ComponentProps } from 'svelte';
-  
-  interface Props {
-    plotArgs: ComponentProps<typeof Plot>;
-    gridArgs: ComponentProps<typeof GridY>;
-  }
+    import { GridY, Plot } from 'svelteplot';
+    import type { ComponentProps } from 'svelte';
 
-  let { plotArgs, gridArgs }: Props = $props();
+    interface Props {
+        plotArgs: ComponentProps<typeof Plot>;
+        gridArgs: ComponentProps<typeof GridY>;
+    }
+
+    let { plotArgs, gridArgs }: Props = $props();
 </script>
 
 <Plot width={100} height={100} axes={false} {...plotArgs}>
-  <GridY {...gridArgs} />
+    <GridY {...gridArgs} />
 </Plot>
diff --git a/src/tests/gridY.test.ts b/src/tests/gridY.test.ts
index c774c167..aece75c0 100644
--- a/src/tests/gridY.test.ts
+++ b/src/tests/gridY.test.ts
@@ -3,25 +3,27 @@ import { render } from '@testing-library/svelte';
 import GridYTest from './gridY.test.svelte';
 
 describe('GridY mark', () => {
-  it('simple y grid with stroke styles', () => {
-    const { container } = render(GridYTest, {
-      props: {
-        plotArgs: {
-          x: { domain: [0, 10] },
-          y: { domain: [0, 10] },
-        },
-        gridArgs: {
-          stroke: '#008000',
-          strokeOpacity: 0.5,
-          strokeDasharray: '5, 5',
-          data: [0, 5, 10],
-        },
-      },
+    it('simple y grid with stroke styles', () => {
+        const { container } = render(GridYTest, {
+            props: {
+                plotArgs: {
+                    x: { domain: [0, 10] },
+                    y: { domain: [0, 10] }
+                },
+                gridArgs: {
+                    stroke: '#008000',
+                    strokeOpacity: 0.5,
+                    strokeDasharray: '5, 5',
+                    data: [0, 5, 10]
+                }
+            }
+        });
+        const gridLines = container.querySelectorAll(
+            'g.grid-y > line'
+        ) as NodeListOf<SVGLineElement>;
+        expect(gridLines.length).toBe(3);
+        expect(gridLines[0].style.strokeDasharray).toBe('5, 5');
+        expect(gridLines[0].style.stroke).toBe('#008000');
+        expect(gridLines[0].style.strokeOpacity).toBe('0.5');
     });
-    const gridLines = container.querySelectorAll('g.grid-y > line') as NodeListOf<SVGLineElement>;
-    expect(gridLines.length).toBe(3);
-    expect(gridLines[0].style.strokeDasharray).toBe('5, 5');
-    expect(gridLines[0].style.stroke).toBe('#008000');
-    expect(gridLines[0].style.strokeOpacity).toBe('0.5');
-  })
-})
\ No newline at end of file
+});
diff --git a/src/tests/line.test.ts b/src/tests/line.test.ts
index 51fe1363..bf43e795 100644
--- a/src/tests/line.test.ts
+++ b/src/tests/line.test.ts
@@ -35,7 +35,9 @@ describe('Line mark', () => {
             }
         });
 
-        const lines = container.querySelectorAll('g.lines > g > path') as NodeListOf<SVGPathElement>;
+        const lines = container.querySelectorAll(
+            'g.lines > g > path'
+        ) as NodeListOf<SVGPathElement>;
         expect(lines).toHaveLength(1);
         expect(lines[0]?.getAttribute('d')).toBe(
             'M1,95L8.917,80C16.833,65,32.667,35,48.5,27.5C64.333,20,80.167,35,88.083,42.5L96,50'
@@ -78,7 +80,9 @@ describe('Line mark', () => {
             }
         });
 
-        const lines = container.querySelectorAll('g.lines > g > path') as NodeListOf<SVGPathElement>;
+        const lines = container.querySelectorAll(
+            'g.lines > g > path'
+        ) as NodeListOf<SVGPathElement>;
         expect(lines).toHaveLength(1);
         const line = lines[0];
         expect(line?.getAttribute('d')).toBe('M1,95L48.5,50L96,5');
@@ -102,7 +106,9 @@ describe('Line mark', () => {
         });
 
         // The implementation might differ from our expectation - look for any path elements
-        const paths = container.querySelectorAll('g.lines > g > path') as NodeListOf<SVGPathElement>;;
+        const paths = container.querySelectorAll(
+            'g.lines > g > path'
+        ) as NodeListOf<SVGPathElement>;
         expect(paths.length).toBeGreaterThan(0);
 
         // Check if at least one path has the expected styles
@@ -214,7 +220,9 @@ describe('Line mark', () => {
             }
         });
 
-        const lines = container.querySelectorAll('g.lines > g > path') as NodeListOf<SVGPathElement>;
+        const lines = container.querySelectorAll(
+            'g.lines > g > path'
+        ) as NodeListOf<SVGPathElement>;
         expect(lines).toHaveLength(2);
         // Verify we have two distinct lines with different stroke colors
         expect(lines[0]?.style.stroke).not.toBe(lines[1]?.style.stroke);
diff --git a/src/tests/plot.test.ts b/src/tests/plot.test.ts
index 47f59252..9beb0b10 100644
--- a/src/tests/plot.test.ts
+++ b/src/tests/plot.test.ts
@@ -133,7 +133,7 @@ describe('Plot component', () => {
         const { container } = render(PlotTest, {
             props: {
                 width: 100,
-                height: 150,
+                height: 150
             }
         });
 
diff --git a/src/tests/polyfill.d.ts b/src/tests/polyfill.d.ts
index 16470312..cd8347ff 100644
--- a/src/tests/polyfill.d.ts
+++ b/src/tests/polyfill.d.ts
@@ -1,7 +1,7 @@
 declare module 'resize-observer-polyfill' {
-  const ResizeObserver: {
-    new (callback: ResizeObserverCallback): ResizeObserver;
-    prototype: ResizeObserver;
-  };
-  export default ResizeObserver;
-}
\ No newline at end of file
+    const ResizeObserver: {
+        new (callback: ResizeObserverCallback): ResizeObserver;
+        prototype: ResizeObserver;
+    };
+    export default ResizeObserver;
+}
diff --git a/src/tests/setup.ts b/src/tests/setup.ts
index 321cb0d1..6d879976 100644
--- a/src/tests/setup.ts
+++ b/src/tests/setup.ts
@@ -2,14 +2,14 @@ import ResizeObserver from 'resize-observer-polyfill';
 import MatchMediaMock from 'vitest-matchmedia-mock';
 import type MatchMedia from 'vitest-matchmedia-mock';
 
-import { afterEach, beforeAll } from "vitest";
+import { afterEach, beforeAll } from 'vitest';
 
 let matchMedia: MatchMedia = new MatchMediaMock();
 
 beforeAll(() => {
     global.ResizeObserver = ResizeObserver;
-})
+});
 
 afterEach(() => {
     matchMedia.clear();
-});
\ No newline at end of file
+});
diff --git a/tsconfig.json b/tsconfig.json
index 6b7a1779..20f50d38 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,10 +10,10 @@
         "sourceMap": true,
         "strict": true,
         "moduleResolution": "bundler",
-		"module": "esnext"
+        "module": "esnext"
     }
     // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
     //
     // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
     // from the referenced tsconfig.json - TypeScript does not merge them in
-}
\ No newline at end of file
+}
diff --git a/vite.config.js b/vite.config.js
index af1879a0..1f4626b8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,8 +10,8 @@ export default defineConfig({
     resolve: {
         ...(process.env.VITEST
             ? {
-                conditions: ['browser']
-            }
+                  conditions: ['browser']
+              }
             : undefined),
         alias: {
             svelteplot: path.resolve(__dirname, './src/lib/index.js'),

From 6cee75237825ff77047b9f009237ef9639a6029a Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 22:18:32 +0200
Subject: [PATCH 30/66] chore: fix eslint errors

---
 src/lib/marks/BarX.svelte                    |  9 ++++--
 src/lib/marks/Text.svelte                    | 29 +++++++++-----------
 src/lib/marks/TickX.svelte                   |  2 +-
 src/lib/marks/TickY.svelte                   |  2 +-
 src/lib/marks/Vector.svelte                  |  2 +-
 src/lib/marks/helpers/BaseAxisX.svelte       |  2 +-
 src/lib/marks/helpers/LinearGradientX.svelte |  2 +-
 src/lib/marks/helpers/LinearGradientY.svelte |  2 +-
 src/lib/marks/helpers/MarkerPath.svelte      |  2 +-
 src/lib/marks/helpers/RectPath.svelte        |  4 +--
 src/lib/ui/RadioInput.svelte                 |  2 +-
 src/lib/ui/Select.svelte                     |  2 +-
 src/routes/features/marks/+page.md           |  4 ++-
 13 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/lib/marks/BarX.svelte b/src/lib/marks/BarX.svelte
index cf6b6b92..a6cfb01a 100644
--- a/src/lib/marks/BarX.svelte
+++ b/src/lib/marks/BarX.svelte
@@ -6,7 +6,12 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { stackX, recordizeX, intervalX, sort } from '$lib/index.js';
-    import type { PlotContext, BaseMarkProps, RectMarkProps, ChannelAccessor } from '../types.js';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        BaseRectMarkProps,
+        ChannelAccessor
+    } from '../types.js';
     import type { StackOptions } from '$lib/transforms/stack.js';
     import type { DataRow } from '$lib/types.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
@@ -19,7 +24,7 @@
         x2?: ChannelAccessor;
         y?: ChannelAccessor;
         stack?: StackOptions;
-    } & RectMarkProps;
+    } & BaseRectMarkProps;
 
     let { data = [{}], class: className = null, stack, ...options }: BarXProps = $props();
 
diff --git a/src/lib/marks/Text.svelte b/src/lib/marks/Text.svelte
index d1e51d8a..b01245b1 100644
--- a/src/lib/marks/Text.svelte
+++ b/src/lib/marks/Text.svelte
@@ -78,7 +78,7 @@
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
         <GroupMultiple class="text {className || null}" length={className ? 2 : args.data.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#if d.valid}
                     {@const title = resolveProp(args.title, d.datum, '')}
                     {@const frameAnchor = resolveProp(args.frameAnchor, d.datum)}
@@ -148,20 +148,17 @@
                         <text
                             class={[textClassName]}
                             dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                            transform="translate({[
-                                Math.round(x + dx),
-                                Math.round(
-                                    y +
-                                        dy -
-                                        (lineAnchor === 'bottom'
-                                            ? textLines.length - 1
-                                            : lineAnchor === 'middle'
-                                              ? (textLines.length - 1) * 0.5
-                                              : 0) *
-                                            fontSize
-                                )
-                            ]})"
-                            >{#each textLines as line, l}<tspan
+                            transform="translate({Math.round(x + dx)},{Math.round(
+                                y +
+                                    dy -
+                                    (lineAnchor === 'bottom'
+                                        ? textLines.length - 1
+                                        : lineAnchor === 'middle'
+                                          ? (textLines.length - 1) * 0.5
+                                          : 0) *
+                                        fontSize
+                            )})"
+                            >{#each textLines as line, l (l)}<tspan
                                     x="0"
                                     dy={l ? fontSize : 0}
                                     class={styleClass}
@@ -172,7 +169,7 @@
                         <text
                             class={[textClassName, styleClass]}
                             dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                            transform="translate({[Math.round(x + dx), Math.round(y + dy)]})"
+                            transform="translate({Math.round(x + dx)},{Math.round(y + dy)})"
                             {style}
                             >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
                     {/if}
diff --git a/src/lib/marks/TickX.svelte b/src/lib/marks/TickX.svelte
index dcf0ec19..dca5df17 100644
--- a/src/lib/marks/TickX.svelte
+++ b/src/lib/marks/TickX.svelte
@@ -47,7 +47,7 @@
 <Mark type="tickX" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
     {#snippet children({ mark, usedScales })}
         <g class="tick-x">
-            {#each args.data as datum}
+            {#each args.data as datum, i (i)}
                 {#if testFacet(datum, mark.options) && testFilter(datum, args)}
                     {@const x_ = resolveChannel('x', datum, args)}
                     {@const y_ = resolveChannel('y', datum, args)}
diff --git a/src/lib/marks/TickY.svelte b/src/lib/marks/TickY.svelte
index 84e4c4c8..49305b3f 100644
--- a/src/lib/marks/TickY.svelte
+++ b/src/lib/marks/TickY.svelte
@@ -48,7 +48,7 @@
 <Mark type="tickY" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
     {#snippet children({ mark, usedScales })}
         <g class="tick-y">
-            {#each args.data as datum}
+            {#each args.data as datum, i (i)}
                 {#if testFacet(datum, mark.options) && testFilter(datum, args)}
                     {@const y_ = resolveChannel('y', datum, args)}
                     {@const x_ = resolveChannel('x', datum, args)}
diff --git a/src/lib/marks/Vector.svelte b/src/lib/marks/Vector.svelte
index 55502a19..8e92d569 100644
--- a/src/lib/marks/Vector.svelte
+++ b/src/lib/marks/Vector.svelte
@@ -170,7 +170,7 @@
                 <text x="30" y="30" style="color:red"
                     >implement canvas rendering for vector mark</text>
             {:else}
-                {#each scaledData as d}
+                {#each scaledData as d, i (i)}
                     {@const r = resolveChannel('r', d.datum, { r: 3, ...args })}
                     {#if d.valid && isValid(r)}
                         {@const dx = +resolveProp(args.dx, d.datum, 0)}
diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte
index fe531fb2..daa2f33d 100644
--- a/src/lib/marks/helpers/BaseAxisX.svelte
+++ b/src/lib/marks/helpers/BaseAxisX.svelte
@@ -198,7 +198,7 @@
                         {#if textLines.length === 1}
                             {textLines[0]}
                         {:else}
-                            {#each textLines as line, i}
+                            {#each textLines as line, i (i)}
                                 <tspan x="0" dy={i ? 12 : 0}
                                     >{!prevTextLines || prevTextLines[i] !== line
                                         ? line
diff --git a/src/lib/marks/helpers/LinearGradientX.svelte b/src/lib/marks/helpers/LinearGradientX.svelte
index 2cc27bf6..4d64d50b 100644
--- a/src/lib/marks/helpers/LinearGradientX.svelte
+++ b/src/lib/marks/helpers/LinearGradientX.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <linearGradient {id} gradientUnits="userSpaceOnUse" x1={0} y2={0} y1={0} x2={plot.width}>
-    {#each projectedStops as { px, color }}
+    {#each projectedStops as { px, color }, i (i)}
         <stop stop-color={color} offset={px} />
     {/each}
 </linearGradient>
diff --git a/src/lib/marks/helpers/LinearGradientY.svelte b/src/lib/marks/helpers/LinearGradientY.svelte
index 5418e1ff..8ee1f6f0 100644
--- a/src/lib/marks/helpers/LinearGradientY.svelte
+++ b/src/lib/marks/helpers/LinearGradientY.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <linearGradient {id} gradientUnits="userSpaceOnUse" x1={0} x2={0} y1={0} y2={plot.height}>
-    {#each projectedStops as { py, color }}
+    {#each projectedStops as { py, color }, i (i)}
         <stop stop-color={color} offset={py} />
     {/each}
 </linearGradient>
diff --git a/src/lib/marks/helpers/MarkerPath.svelte b/src/lib/marks/helpers/MarkerPath.svelte
index d7d3ef2e..8ca944f6 100644
--- a/src/lib/marks/helpers/MarkerPath.svelte
+++ b/src/lib/marks/helpers/MarkerPath.svelte
@@ -96,7 +96,7 @@
     class={className}
     stroke-width={strokeWidth_}
     use:addEventHandlers={{ getPlotState, options: mark.options, datum }}>
-    {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker]}
+    {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker] (key)}
         {@const markerId = `marker-${key === 'all' ? '' : `${key}-`}${id}`}
         {#if isSnippet(marker)}
             {@render marker(markerId, color)}
diff --git a/src/lib/marks/helpers/RectPath.svelte b/src/lib/marks/helpers/RectPath.svelte
index 565c76bc..5142ffe2 100644
--- a/src/lib/marks/helpers/RectPath.svelte
+++ b/src/lib/marks/helpers/RectPath.svelte
@@ -99,7 +99,7 @@ Helper component for rendering rectangular marks in SVG
 
 {#if hasBorderRadius}
     <path
-        transform="translate({[x + dx + insetLeft, y + insetBottom + dy]})"
+        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
         d={roundedRect(
             0,
             0,
@@ -116,7 +116,7 @@ Helper component for rendering rectangular marks in SVG
         }} />
 {:else}
     <rect
-        transform="translate({[x + dx + insetLeft, y + insetBottom + dy]})"
+        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
         width={width - insetLeft - insetRight}
         height={height - insetTop - insetBottom}
         class={[styleClass, className]}
diff --git a/src/lib/ui/RadioInput.svelte b/src/lib/ui/RadioInput.svelte
index 703b93ba..3015b6c7 100644
--- a/src/lib/ui/RadioInput.svelte
+++ b/src/lib/ui/RadioInput.svelte
@@ -18,7 +18,7 @@
     {#if label}
         <label for={randomId}>{label}:</label>
     {/if}
-    {#each options as p}
+    {#each options as p (p)}
         <label>
             <input type="radio" id={randomId} bind:group={value} value={p} />
             {format(p)}
diff --git a/src/lib/ui/Select.svelte b/src/lib/ui/Select.svelte
index a062d10d..d9309766 100644
--- a/src/lib/ui/Select.svelte
+++ b/src/lib/ui/Select.svelte
@@ -15,7 +15,7 @@
 <label
     >{label || ''}
     <select bind:value>
-        {#each options as p}
+        {#each options as p (p)}
             <option value={p}>{format(p)}</option>
         {/each}
     </select></label>
diff --git a/src/routes/features/marks/+page.md b/src/routes/features/marks/+page.md
index 67c2cac5..7c7604e6 100644
--- a/src/routes/features/marks/+page.md
+++ b/src/routes/features/marks/+page.md
@@ -141,7 +141,9 @@ Compare the DOM of the example below:
 ```svelte
 <script>
     import { css } from '@emotion/css';
-    const data = [...];
+    const data = [
+        /*...*/
+    ];
 </script>
 
 <Plot height={250} grid {css}>

From a0877dc21df73b619e52c99cfcf61e39252893c2 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 22:57:09 +0200
Subject: [PATCH 31/66] chore: fix more lint errors

---
 src/lib/Mark.svelte                 |  2 +-
 src/lib/Plot.svelte                 |  2 +-
 src/lib/core/FacetGrid.svelte       |  4 ++--
 src/lib/core/Plot.svelte            |  1 +
 src/lib/marks/Area.svelte           |  2 +-
 src/lib/marks/Arrow.svelte          |  2 +-
 src/lib/marks/AxisX.svelte          | 20 +++++++++-----------
 src/lib/marks/AxisY.svelte          | 20 +++++++++-----------
 src/lib/marks/BarX.svelte           |  2 +-
 src/lib/marks/BarY.svelte           |  2 +-
 src/lib/marks/Cell.svelte           |  2 +-
 src/lib/marks/ColorLegend.svelte    |  6 +++---
 src/lib/marks/CustomMark.svelte     |  2 +-
 src/lib/marks/CustomMarkHTML.svelte |  2 +-
 src/lib/marks/Dot.svelte            |  2 +-
 src/lib/marks/Geo.svelte            |  2 +-
 src/lib/marks/GridX.svelte          |  2 +-
 src/lib/marks/GridY.svelte          |  2 +-
 src/lib/marks/Line.svelte           |  2 +-
 src/lib/marks/Link.svelte           |  2 +-
 src/lib/marks/Rect.svelte           |  2 +-
 src/lib/marks/RegressionX.svelte    |  2 +-
 src/lib/marks/RegressionY.svelte    |  2 +-
 src/lib/marks/RuleX.svelte          |  2 +-
 src/lib/marks/RuleY.svelte          |  2 +-
 src/lib/marks/SymbolLegend.svelte   |  2 +-
 26 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/src/lib/Mark.svelte b/src/lib/Mark.svelte
index aef216e6..35fd59bb 100644
--- a/src/lib/Mark.svelte
+++ b/src/lib/Mark.svelte
@@ -286,7 +286,7 @@
 
 {#if errors.length}
     <text transform="translate(10,10)">
-        {#each errors as error, i}
+        {#each errors as error, i (i)}
             <tspan x="0" dy={i ? 14 : 0}>{error}</tspan>
         {/each}
     </text>
diff --git a/src/lib/Plot.svelte b/src/lib/Plot.svelte
index e738abd2..665c5412 100644
--- a/src/lib/Plot.svelte
+++ b/src/lib/Plot.svelte
@@ -152,7 +152,7 @@
             })}
             {#snippet failed(error, reset)}
                 <text class="error" transform="translate(10,10)">
-                    {#each error.message.split('\n') as line, i}
+                    {#each error.message.split('\n') as line, i (i)}
                         <tspan x="0" dy={i ? 14 : 0}>{line}</tspan>
                     {/each}
                 </text>{/snippet}
diff --git a/src/lib/core/FacetGrid.svelte b/src/lib/core/FacetGrid.svelte
index 51d834ce..3bc3f1ea 100644
--- a/src/lib/core/FacetGrid.svelte
+++ b/src/lib/core/FacetGrid.svelte
@@ -55,8 +55,8 @@
     });
 </script>
 
-{#each fxValues as facetX, i}
-    {#each fyValues as facetY, j}
+{#each fxValues as facetX, i (i)}
+    {#each fyValues as facetY, j (j)}
         <g
             class="facet"
             fill="currentColor"
diff --git a/src/lib/core/Plot.svelte b/src/lib/core/Plot.svelte
index 2f98825a..b830decc 100644
--- a/src/lib/core/Plot.svelte
+++ b/src/lib/core/Plot.svelte
@@ -232,6 +232,7 @@
     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());
 
     $effect(() => {
diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
index 6f3d8e0d..25d46777 100644
--- a/src/lib/marks/Area.svelte
+++ b/src/lib/marks/Area.svelte
@@ -110,7 +110,7 @@
             <AreaCanvas groupedAreaData={grouped} {mark} {usedScales} {areaPath} />
         {:else}
             <GroupMultiple length={grouped.length}>
-                {#each grouped as areaData}
+                {#each grouped as areaData, i (i)}
                     {#snippet el(datum: ScaledDataRecord)}
                         {@const [style, styleClass] = resolveStyles(
                             plot,
diff --git a/src/lib/marks/Arrow.svelte b/src/lib/marks/Arrow.svelte
index c8197cb1..cc15a724 100644
--- a/src/lib/marks/Arrow.svelte
+++ b/src/lib/marks/Arrow.svelte
@@ -81,7 +81,7 @@
     {#snippet children({ mark, usedScales, scaledData })}
         {@const sweep = maybeSweep(args.sweep)}
         <GroupMultiple class="arrow" length={scaledData.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#if d.valid}
                     {@const inset = resolveProp(args.inset, d.datum, 0)}
                     {@const insetStart = resolveProp(args.insetStart, d.datum)}
diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte
index cced3c19..5e84f6df 100644
--- a/src/lib/marks/AxisX.svelte
+++ b/src/lib/marks/AxisX.svelte
@@ -139,17 +139,15 @@
     const useFacetAnchor = $derived(
         facetAnchor !== 'auto' ? facetAnchor : anchor === 'bottom' ? 'bottom-empty' : 'top-empty'
     );
-    let showAxis = $state(false);
-    $effect.pre(() => {
-        showAxis =
-            useFacetAnchor === 'top'
-                ? top
-                : useFacetAnchor === 'bottom'
-                  ? bottom
-                  : useFacetAnchor === 'top-empty'
-                    ? topEmpty
-                    : bottomEmpty;
-    });
+    const showAxis = $derived(
+        useFacetAnchor === 'top'
+            ? top
+            : useFacetAnchor === 'bottom'
+              ? bottom
+              : useFacetAnchor === 'top-empty'
+                ? topEmpty
+                : bottomEmpty
+    );
 </script>
 
 <Mark
diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte
index 88915d05..6920d531 100644
--- a/src/lib/marks/AxisY.svelte
+++ b/src/lib/marks/AxisY.svelte
@@ -120,17 +120,15 @@
         facetAnchor !== 'auto' ? facetAnchor : anchor === 'left' ? 'left-empty' : 'right-empty'
     );
 
-    let showAxis = $state(false);
-    $effect.pre(() => {
-        showAxis =
-            useFacetAnchor === 'left'
-                ? left
-                : useFacetAnchor === 'right'
-                  ? right
-                  : useFacetAnchor === 'left-empty'
-                    ? leftEmpty
-                    : rightEmpty;
-    });
+    const showAxis = $state(
+        useFacetAnchor === 'left'
+            ? left
+            : useFacetAnchor === 'right'
+              ? right
+              : useFacetAnchor === 'left-empty'
+                ? leftEmpty
+                : rightEmpty
+    );
 </script>
 
 <Mark
diff --git a/src/lib/marks/BarX.svelte b/src/lib/marks/BarX.svelte
index a6cfb01a..f058af98 100644
--- a/src/lib/marks/BarX.svelte
+++ b/src/lib/marks/BarX.svelte
@@ -50,7 +50,7 @@
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
         <GroupMultiple class="bar-x" length={scaledData.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {@const bw = plot.scales.y.fn.bandwidth()}
                 {@const minx = Math.min(d.x1, d.x2)}
                 {@const maxx = Math.max(d.x1, d.x2)}
diff --git a/src/lib/marks/BarY.svelte b/src/lib/marks/BarY.svelte
index 5491158e..4d355ab4 100644
--- a/src/lib/marks/BarY.svelte
+++ b/src/lib/marks/BarY.svelte
@@ -50,7 +50,7 @@
     {...args}>
     {#snippet children({ scaledData, usedScales })}
         <GroupMultiple class="bar-y" length={scaledData.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {@const bw = plot.scales.x.fn.bandwidth()}
                 {@const miny = Math.min(d.y1, d.y2)}
                 {@const maxy = Math.max(d.y1, d.y2)}
diff --git a/src/lib/marks/Cell.svelte b/src/lib/marks/Cell.svelte
index c2088f0a..c8210cd9 100644
--- a/src/lib/marks/Cell.svelte
+++ b/src/lib/marks/Cell.svelte
@@ -61,7 +61,7 @@
         {@const bwx = plot.scales.x.fn.bandwidth()}
         {@const bwy = plot.scales.y.fn.bandwidth()}
         <g class="cell {className || ''}" data-fill={usedScales.fillOpacity}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#if d.valid && (args.fill == null || isValid(resolveChannel('fill', d.datum, args)))}
                     <RectPath
                         datum={d}
diff --git a/src/lib/marks/ColorLegend.svelte b/src/lib/marks/ColorLegend.svelte
index 4e0f3065..11ca859f 100644
--- a/src/lib/marks/ColorLegend.svelte
+++ b/src/lib/marks/ColorLegend.svelte
@@ -45,7 +45,7 @@
             <div class="title">{@html legendTitle}</div>
         {/if}
         {#if scaleType === 'ordinal' || scaleType === 'categorical'}
-            {#each plot.scales.color.domain as value}
+            {#each plot.scales.color.domain as value (value)}
                 {@const symbolV = plot.scales.symbol.fn(value)}
                 {@const symbolType = maybeSymbol(symbolV)}
                 <div class="item">
@@ -98,7 +98,7 @@
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
                         <stop offset="0%" stop-color={range[0]} />
-                        {#each ticks as t, i}
+                        {#each ticks as t, i (i)}
                             {@const offset = (100 * (t - domain[0])) / (domain[1] - domain[0])}
                             <stop
                                 offset="{offset - 0.001}%"
@@ -130,7 +130,7 @@
                 x={{ domain, tickSpacing, tickFormat }}>
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
-                        {#each ticks as t}
+                        {#each ticks as t (t)}
                             <stop
                                 offset="{(100 * (t - domain[0])) / (domain[1] - domain[0])}%"
                                 stop-color={plot.scales.color.fn(t)} />
diff --git a/src/lib/marks/CustomMark.svelte b/src/lib/marks/CustomMark.svelte
index 14edd79e..65315eb0 100644
--- a/src/lib/marks/CustomMark.svelte
+++ b/src/lib/marks/CustomMark.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <GroupMultiple class="g-custom-mark {className || ''}" length={className ? 2 : data.length}>
-    {#each data as datum}
+    {#each data as datum, i (i)}
         {@const x_ = resolveChannel('x', datum, { x, y })}
         {@const y_ = resolveChannel('y', datum, { x, y })}
         {#if isValid(x_) && isValid(y_)}
diff --git a/src/lib/marks/CustomMarkHTML.svelte b/src/lib/marks/CustomMarkHTML.svelte
index 7f4f1294..77425267 100644
--- a/src/lib/marks/CustomMarkHTML.svelte
+++ b/src/lib/marks/CustomMarkHTML.svelte
@@ -75,7 +75,7 @@
 </script>
 
 {#snippet customMarks()}
-    {#each data as datum}
+    {#each data as datum, i (i)}
         {@const [px, py] = getXY(datum)}
         {#if isValid(px) && isValid(py)}
             <div
diff --git a/src/lib/marks/Dot.svelte b/src/lib/marks/Dot.svelte
index f7189ec7..f1ece03b 100644
--- a/src/lib/marks/Dot.svelte
+++ b/src/lib/marks/Dot.svelte
@@ -98,7 +98,7 @@
             {#if canvas}
                 <DotCanvas data={scaledData} {mark} />
             {:else}
-                {#each scaledData as d}
+                {#each scaledData as d, i (i)}
                     {#if d.valid && isValid(d.r)}
                         {@const [style, styleClass] = resolveStyles(
                             plot,
diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
index eaacc36e..d03d0c5b 100644
--- a/src/lib/marks/Geo.svelte
+++ b/src/lib/marks/Geo.svelte
@@ -85,7 +85,7 @@
             {#if canvas}
                 <GeoCanvas data={scaledData} {path} {mark} {usedScales} />
             {:else}
-                {#each scaledData as d}
+                {#each scaledData as d, i (i)}
                     {#if d.valid}
                         {#if options.href}
                             <a
diff --git a/src/lib/marks/GridX.svelte b/src/lib/marks/GridX.svelte
index 6ae6e5f9..c2e2e190 100644
--- a/src/lib/marks/GridX.svelte
+++ b/src/lib/marks/GridX.svelte
@@ -45,7 +45,7 @@
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-x">
-            {#each ticks as tick}
+            {#each ticks as tick, t (t)}
                 {#if testFilter(tick, options)}
                     {@const x =
                         plot.scales.x.fn(tick) +
diff --git a/src/lib/marks/GridY.svelte b/src/lib/marks/GridY.svelte
index 3aab94fe..78a8b8ac 100644
--- a/src/lib/marks/GridY.svelte
+++ b/src/lib/marks/GridY.svelte
@@ -42,7 +42,7 @@
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-y">
-            {#each ticks as tick}
+            {#each ticks as tick, t (t)}
                 {#if testFilter(tick, options)}
                     {@const y =
                         plot.scales.y.fn(tick) +
diff --git a/src/lib/marks/Line.svelte b/src/lib/marks/Line.svelte
index 9c54ffff..d62217c8 100644
--- a/src/lib/marks/Line.svelte
+++ b/src/lib/marks/Line.svelte
@@ -144,7 +144,7 @@
                 <LineCanvas {groupedLineData} {mark} {usedScales} {linePath} {groupByKey} />
             {:else}
                 <g class={['lines', className]}>
-                    {#each groupedLineData as lineData, i}
+                    {#each groupedLineData as lineData, i (i)}
                         {@const pathString = linePath(lineData)}
                         {#if pathString}
                             <GroupMultiple class={resolveProp(lineClass, lineData[0])}>
diff --git a/src/lib/marks/Link.svelte b/src/lib/marks/Link.svelte
index 0b360d3c..07f9f762 100644
--- a/src/lib/marks/Link.svelte
+++ b/src/lib/marks/Link.svelte
@@ -130,7 +130,7 @@
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
         <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#if d.valid || true}
                     {@const dx = resolveProp(args.dx, d.datum, 0)}
                     {@const dy = resolveProp(args.dx, d.datum, 0)}
diff --git a/src/lib/marks/Rect.svelte b/src/lib/marks/Rect.svelte
index dbdb5ecd..701629db 100644
--- a/src/lib/marks/Rect.svelte
+++ b/src/lib/marks/Rect.svelte
@@ -44,7 +44,7 @@
     {...args}>
     {#snippet children({ usedScales, scaledData })}
         <GroupMultiple class={scaledData.length > 1 ? className : null} length={scaledData.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#if d.valid}
                     {@const x1 = d.x1 == null ? plot.options.marginLeft : d.x1}
                     {@const x2 = d.x2 == null ? plot.options.marginLeft + plot.facetWidth : d.x2}
diff --git a/src/lib/marks/RegressionX.svelte b/src/lib/marks/RegressionX.svelte
index 2de602a8..28189d66 100644
--- a/src/lib/marks/RegressionX.svelte
+++ b/src/lib/marks/RegressionX.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Mark type="regression">
-    {#each groups as group}
+    {#each groups as group, g (g)}
         <Regression data={group} dependent="x" {...options} />
     {/each}
 </Mark>
diff --git a/src/lib/marks/RegressionY.svelte b/src/lib/marks/RegressionY.svelte
index 6191ea35..a01d1302 100644
--- a/src/lib/marks/RegressionY.svelte
+++ b/src/lib/marks/RegressionY.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Mark type="regression">
-    {#each groups as group}
+    {#each groups as group, i (i)}
         <Regression data={group} dependent="y" {...options} />
     {/each}
 </Mark>
diff --git a/src/lib/marks/RuleX.svelte b/src/lib/marks/RuleX.svelte
index ad0fbcce..6404d246 100644
--- a/src/lib/marks/RuleX.svelte
+++ b/src/lib/marks/RuleX.svelte
@@ -34,7 +34,7 @@
 <Mark type="ruleX" channels={['x', 'y1', 'y2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
         <GroupMultiple class="rule-x {className || ''}" length={className ? 2 : scaledData.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {@const inset = resolveProp(args.inset, d.datum, 0)}
                 {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
                 {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
diff --git a/src/lib/marks/RuleY.svelte b/src/lib/marks/RuleY.svelte
index 4312d1e6..30bbfd24 100644
--- a/src/lib/marks/RuleY.svelte
+++ b/src/lib/marks/RuleY.svelte
@@ -34,7 +34,7 @@
 <Mark type="ruleY" channels={['y', 'x1', 'x2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
     {#snippet children({ scaledData, usedScales })}
         <GroupMultiple class="rule-y {className || ''}" length={className ? 2 : args.data.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {@const inset = resolveProp(args.inset, d.datum, 0)}
                 {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
                 {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
diff --git a/src/lib/marks/SymbolLegend.svelte b/src/lib/marks/SymbolLegend.svelte
index ef162dc0..43480d4d 100644
--- a/src/lib/marks/SymbolLegend.svelte
+++ b/src/lib/marks/SymbolLegend.svelte
@@ -19,7 +19,7 @@
 
 {#if plot.scales.color.manualActiveMarks > 0}
     <div class="symbol-legend">
-        {#each plot.scales.color.domain as value}
+        {#each plot.scales.color.domain as value (value)}
             {@const symbolV = plot.scales.symbol.fn(value)}
             {@const symbolType = maybeSymbol(symbolV)}
             {@const color = plot.colorSymbolRedundant

From 9897afa1bc98ed1dd87ef7968be86774aae57eb6 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 22:58:42 +0200
Subject: [PATCH 32/66] add lint workflow

---
 .github/workflows/lint.yml | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 .github/workflows/lint.yml

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 00000000..6b12cf9e
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,32 @@
+name: Lint Check
+
+on:
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
+
+jobs:
+    lint:
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v3
+              with:
+                  version: 10
+                  run_install: false
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  cache: 'pnpm'
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Run linting
+              run: pnpm run lint

From adbe0366b3347ddf3217431ae19222e0aafa77ea Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:06:46 +0200
Subject: [PATCH 33/66] chore: refine & export axisY and bar mark prop types

---
 src/lib/marks/AxisY.svelte | 47 ++++++++++++++++++++++----------------
 src/lib/marks/BarX.svelte  | 33 ++++++++++++++------------
 src/lib/marks/BarY.svelte  | 30 ++++++++++++++++--------
 3 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte
index 6920d531..0e258ffd 100644
--- a/src/lib/marks/AxisY.svelte
+++ b/src/lib/marks/AxisY.svelte
@@ -1,3 +1,28 @@
+<script module lang="ts">
+    export type AxisYMarkProps = Omit<
+        BaseMarkProps,
+        'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+    > & {
+        data?: RawValue[];
+        automatic?: boolean;
+        title?: string;
+        anchor?: 'left' | 'right';
+        facetAnchor?: 'auto' | 'left' | 'right' | 'left-empty' | 'right-empty';
+        lineAnchor?: 'top' | 'center' | 'bottom';
+        interval?: string | number;
+        labelAnchor?: 'auto' | 'left' | 'center' | 'right';
+        tickSize?: number;
+        tickFontSize?: ConstantAccessor<number>;
+        tickPadding?: number;
+        tickFormat?:
+            | 'auto'
+            | Intl.DateTimeFormatOptions
+            | Intl.NumberFormatOptions
+            | ((d: RawValue) => string);
+        tickClass?: ConstantAccessor<string>;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import BaseAxisY from './helpers/BaseAxisY.svelte';
@@ -22,29 +47,11 @@
         ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
     };
 
-    type AxisYProps = BaseMarkProps & {
-        data?: RawValue[];
-        automatic?: boolean;
-        title?: string;
-        anchor?: 'left' | 'right';
-        facetAnchor?: 'auto' | 'left' | 'right' | 'left-empty' | 'right-empty';
-        lineAnchor?: 'top' | 'center' | 'bottom';
-        tickSize?: number;
-        tickFontSize?: ConstantAccessor<number>;
-        tickPadding?: number;
-        tickFormat?:
-            | 'auto'
-            | Intl.DateTimeFormatOptions
-            | Intl.NumberFormatOptions
-            | ((d: RawValue) => string);
-        tickClass?: ConstantAccessor<string>;
-    };
-
     let {
         data = [],
         automatic = false,
         title,
-        anchor = DEFAULTS.axisYAnchor,
+        anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
         facetAnchor = 'auto',
         lineAnchor = 'center',
         tickSize = DEFAULTS.tickSize,
@@ -53,7 +60,7 @@
         tickFormat,
         tickClass,
         ...options
-    }: AxisYProps = $props();
+    }: AxisYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/BarX.svelte b/src/lib/marks/BarX.svelte
index f058af98..65824632 100644
--- a/src/lib/marks/BarX.svelte
+++ b/src/lib/marks/BarX.svelte
@@ -2,31 +2,36 @@
     @component
     For horizontal bar charts using a band scale as y axis
 -->
-<script lang="ts">
-    import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import { stackX, recordizeX, intervalX, sort } from '$lib/index.js';
+<script module lang="ts">
     import type {
         PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor
     } from '../types.js';
+
+    export type BarXMarkProps = BaseMarkProps &
+        BaseRectMarkProps & {
+            data: DataRow[];
+            x?: ChannelAccessor;
+            x1?: ChannelAccessor;
+            x2?: ChannelAccessor;
+            y?: ChannelAccessor;
+            stack?: StackOptions;
+        };
+</script>
+
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { stackX, recordizeX, intervalX, sort } from '$lib/index.js';
+
     import type { StackOptions } from '$lib/transforms/stack.js';
     import type { DataRow } from '$lib/types.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    type BarXProps = BaseMarkProps & {
-        data: DataRow[];
-        x?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y?: ChannelAccessor;
-        stack?: StackOptions;
-    } & BaseRectMarkProps;
-
-    let { data = [{}], class: className = null, stack, ...options }: BarXProps = $props();
+    let { data = [{}], class: className = null, stack, ...options }: BarXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/BarY.svelte b/src/lib/marks/BarY.svelte
index 4d355ab4..b00c8e9a 100644
--- a/src/lib/marks/BarY.svelte
+++ b/src/lib/marks/BarY.svelte
@@ -2,16 +2,16 @@
     @component
     For vertical column charts using a band scale as x axis
 -->
-<script lang="ts">
-    import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import { intervalY, stackY, recordizeY, sort } from '$lib/index.js';
-    import type { PlotContext, BaseMarkProps, BaseRectMarkProps } from '../types.js';
-    import type { StackOptions } from '$lib/transforms/stack.js';
-    import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import RectPath from './helpers/RectPath.svelte';
+<script module lang="ts">
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        BaseRectMarkProps,
+        ChannelAccessor,
+        DataRow
+    } from '../types.js';
 
-    type BarYProps = BaseMarkProps &
+    export type BarYMarkProps = BaseMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;
@@ -25,8 +25,18 @@
              */
             interval?: number | string;
         };
+</script>
+
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { intervalY, stackY, recordizeY, sort } from '$lib/index.js';
+
+    import type { StackOptions } from '$lib/transforms/stack.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, stack, ...options }: BarYProps = $props();
+    let { data = [{}], class: className = null, stack, ...options }: BarYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

From dabc56738a658d32f4e5d1d278941dea10aee872 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:09:19 +0200
Subject: [PATCH 34/66] chore: refine & export bollinger mark prop types

---
 src/lib/marks/BollingerX.svelte | 22 +++++++++++++++-------
 src/lib/marks/BollingerY.svelte | 16 +++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/lib/marks/BollingerX.svelte b/src/lib/marks/BollingerX.svelte
index 02f5cebc..202cf48e 100644
--- a/src/lib/marks/BollingerX.svelte
+++ b/src/lib/marks/BollingerX.svelte
@@ -2,12 +2,8 @@
     @component
     line representing a moving average and an area representing volatility as a band
 -->
-<script lang="ts">
-    import { Area, Line, bollingerX, recordizeX } from '$lib/index.js';
-    import type { BaseMarkProps, ChannelAccessor, DataRow } from '$lib/types.js';
-    import { pick } from 'es-toolkit';
-
-    type BollingerXProps = BaseMarkProps & {
+<script module lang="ts">
+    export type BollingerXMarkProps = BaseMarkProps & {
         data: DataRow[];
         x?: ChannelAccessor;
         y?: ChannelAccessor;
@@ -20,8 +16,20 @@
          */
         k?: number;
     };
+</script>
+
+<script lang="ts">
+    import { Area, Line, bollingerX, recordizeX } from '$lib/index.js';
+    import type { BaseMarkProps, ChannelAccessor, DataRow } from '$lib/types.js';
+    import { pick } from 'es-toolkit';
 
-    let { data, class: className = null, n = 20, k = 2, ...options }: BollingerXProps = $props();
+    let {
+        data,
+        class: className = null,
+        n = 20,
+        k = 2,
+        ...options
+    }: BollingerXMarkProps = $props();
 
     let args = $derived(bollingerX(recordizeX({ data, ...options }), { n, k }));
 </script>
diff --git a/src/lib/marks/BollingerY.svelte b/src/lib/marks/BollingerY.svelte
index a3441f94..c5a5ca49 100644
--- a/src/lib/marks/BollingerY.svelte
+++ b/src/lib/marks/BollingerY.svelte
@@ -2,12 +2,8 @@
     @component
     line representing a moving average and an area representing volatility as a band
 -->
-<script lang="ts">
-    import { Area, Line, bollingerY, recordizeY } from '$lib/index.js';
-    import type { BaseMarkProps, ChannelAccessor, DataRow } from '$lib/types.js';
-    import { pick } from 'es-toolkit';
-
-    type BollingerYProps = BaseMarkProps & {
+<script module lang="ts">
+    export type BollingerYMarkProps = BaseMarkProps & {
         data: DataRow[];
         x?: ChannelAccessor;
         y?: ChannelAccessor;
@@ -20,8 +16,14 @@
          */
         k?: number;
     };
+</script>
+
+<script lang="ts">
+    import { Area, Line, bollingerY, recordizeY } from '$lib/index.js';
+    import type { BaseMarkProps, ChannelAccessor, DataRow } from '$lib/types.js';
+    import { pick } from 'es-toolkit';
 
-    let { data, n = 20, k = 2, class: className, ...options }: BollingerYProps = $props();
+    let { data, n = 20, k = 2, class: className, ...options }: BollingerYMarkProps = $props();
 
     const args = $derived(bollingerY(recordizeY({ data, ...options }), { n, k }));
 </script>

From bc7c07edc3cf6c062957a5fd3fb3e7489992da38 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:09:32 +0200
Subject: [PATCH 35/66] add interval to barX prop type

---
 src/lib/marks/BarX.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/marks/BarX.svelte b/src/lib/marks/BarX.svelte
index 65824632..bb65106f 100644
--- a/src/lib/marks/BarX.svelte
+++ b/src/lib/marks/BarX.svelte
@@ -18,6 +18,11 @@
             x2?: ChannelAccessor;
             y?: ChannelAccessor;
             stack?: StackOptions;
+            /**
+             * Converts x into x1/x2 ranges based on the provided interval. Disables the
+             * implicit stacking
+             */
+            interval?: number | string;
         };
 </script>
 

From 3883ccfeb90e2a60c3cb2b62ee3147b4e6463e8a Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:17:12 +0200
Subject: [PATCH 36/66] add @component comments

---
 src/lib/marks/Area.svelte  | 3 +++
 src/lib/marks/AreaX.svelte | 4 ++++
 src/lib/marks/AreaY.svelte | 5 +++--
 src/lib/marks/Arrow.svelte | 4 ++--
 src/lib/marks/AxisX.svelte | 3 +++
 src/lib/marks/AxisY.svelte | 3 +++
 src/lib/marks/BoxX.svelte  | 3 +++
 src/lib/marks/BoxY.svelte  | 3 +++
 src/lib/marks/Dot.svelte   | 3 +++
 src/lib/marks/DotX.svelte  | 3 +++
 src/lib/marks/DotY.svelte  | 3 +++
 src/lib/marks/GridX.svelte | 3 +++
 src/lib/marks/GridY.svelte | 3 +++
 src/lib/marks/Line.svelte  | 5 ++---
 src/lib/marks/LineX.svelte | 3 +++
 src/lib/marks/LineY.svelte | 3 +++
 16 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
index 25d46777..0ea60ee4 100644
--- a/src/lib/marks/Area.svelte
+++ b/src/lib/marks/Area.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates an area chart with filled regions between two x-y value pairs
+-->
 <script module lang="ts">
     export type AreaMarkProps = {
         data: DataRecord[];
diff --git a/src/lib/marks/AreaX.svelte b/src/lib/marks/AreaX.svelte
index 9851664e..0a10c6fb 100644
--- a/src/lib/marks/AreaX.svelte
+++ b/src/lib/marks/AreaX.svelte
@@ -1,3 +1,7 @@
+<!-- @component
+    Creates a horizontal area chart with x value and baseline.  Areas are implicitly 
+    stacked horizontally if just the x channel is defined.
+-->
 <script lang="ts">
     import Area, { type AreaMarkProps } from './Area.svelte';
     import { renameChannels } from '$lib/transforms/rename.js';
diff --git a/src/lib/marks/AreaY.svelte b/src/lib/marks/AreaY.svelte
index 7d422f08..7a52c2f7 100644
--- a/src/lib/marks/AreaY.svelte
+++ b/src/lib/marks/AreaY.svelte
@@ -1,5 +1,6 @@
-<!--
-@component
+<!-- @component
+    Creates a vertical area chart with y value and baseline. Areas are implicitly 
+    stacked vertically if just the y channel is defined.
 -->
 <script lang="ts">
     import Area, { type AreaMarkProps } from './Area.svelte';
diff --git a/src/lib/marks/Arrow.svelte b/src/lib/marks/Arrow.svelte
index cc15a724..644cdaae 100644
--- a/src/lib/marks/Arrow.svelte
+++ b/src/lib/marks/Arrow.svelte
@@ -1,5 +1,5 @@
-<!--
-    @component Arrow
+<!-- @component
+    Creates arrows with customizable heads, angles, and bending
 -->
 <script module lang="ts">
     export type ArrowMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte
index 5e84f6df..db799c94 100644
--- a/src/lib/marks/AxisX.svelte
+++ b/src/lib/marks/AxisX.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Renders a horizontal axis with labels and tick marks
+-->
 <script module lang="ts">
     export type AxisXMarkProps = Omit<
         BaseMarkProps,
diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte
index 0e258ffd..e493c274 100644
--- a/src/lib/marks/AxisY.svelte
+++ b/src/lib/marks/AxisY.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Renders a vertical axis with labels and tick marks
+-->
 <script module lang="ts">
     export type AxisYMarkProps = Omit<
         BaseMarkProps,
diff --git a/src/lib/marks/BoxX.svelte b/src/lib/marks/BoxX.svelte
index abb75779..35650961 100644
--- a/src/lib/marks/BoxX.svelte
+++ b/src/lib/marks/BoxX.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates a horizontal box plot for visualizing data distribution with quartiles and outliers
+-->
 <script lang="ts">
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import type { BoxProps } from './BoxY.svelte';
diff --git a/src/lib/marks/BoxY.svelte b/src/lib/marks/BoxY.svelte
index 04c82f65..da9748ce 100644
--- a/src/lib/marks/BoxY.svelte
+++ b/src/lib/marks/BoxY.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates a vertical box plot for visualizing data distribution with quartiles and outliers
+-->
 <script lang="ts" module>
     export type BoxProps = {
         data: DataRecord[];
diff --git a/src/lib/marks/Dot.svelte b/src/lib/marks/Dot.svelte
index f1ece03b..e90b5ccd 100644
--- a/src/lib/marks/Dot.svelte
+++ b/src/lib/marks/Dot.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates dots or symbols at specified positions with customizable size and appearance
+-->
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
     import type {
diff --git a/src/lib/marks/DotX.svelte b/src/lib/marks/DotX.svelte
index 4832de6e..08c7d7b1 100644
--- a/src/lib/marks/DotX.svelte
+++ b/src/lib/marks/DotX.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates a horizontal dot plot with x values along a single y position
+-->
 <script lang="ts">
     import Dot from './Dot.svelte';
     import { recordizeX } from '$lib/index.js';
diff --git a/src/lib/marks/DotY.svelte b/src/lib/marks/DotY.svelte
index 128dd7f1..a4aa1ce5 100644
--- a/src/lib/marks/DotY.svelte
+++ b/src/lib/marks/DotY.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates a vertical dot plot with y values along a single x position
+-->
 <script lang="ts">
     import Dot from './Dot.svelte';
     import { recordizeY } from '$lib/index.js';
diff --git a/src/lib/marks/GridX.svelte b/src/lib/marks/GridX.svelte
index c2e2e190..9d5b3b6b 100644
--- a/src/lib/marks/GridX.svelte
+++ b/src/lib/marks/GridX.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Renders vertical gridlines at x-axis tick positions
+-->
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
diff --git a/src/lib/marks/GridY.svelte b/src/lib/marks/GridY.svelte
index 78a8b8ac..4049b01f 100644
--- a/src/lib/marks/GridY.svelte
+++ b/src/lib/marks/GridY.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Renders horizontal gridlines at y-axis tick positions
+-->
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
diff --git a/src/lib/marks/Line.svelte b/src/lib/marks/Line.svelte
index d62217c8..8203b6a5 100644
--- a/src/lib/marks/Line.svelte
+++ b/src/lib/marks/Line.svelte
@@ -1,6 +1,5 @@
-<!--
-    @component
-    Line mark, useful for line charts
+<!-- @component
+    Creates line charts with connecting points in a dataset with customizable curves and markers
 -->
 <script module lang="ts">
     import type {
diff --git a/src/lib/marks/LineX.svelte b/src/lib/marks/LineX.svelte
index 61a5a3ff..c23101dc 100644
--- a/src/lib/marks/LineX.svelte
+++ b/src/lib/marks/LineX.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates a horizontal line chart with x values and index positions for y
+-->
 <script lang="ts">
     import Line, { type BaseLineMarkProps } from './Line.svelte';
     import { recordizeX } from '$lib/index.js';
diff --git a/src/lib/marks/LineY.svelte b/src/lib/marks/LineY.svelte
index f81b2a2b..2cfc7fd6 100644
--- a/src/lib/marks/LineY.svelte
+++ b/src/lib/marks/LineY.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates a vertical line chart with y values and index positions for x
+-->
 <script lang="ts">
     import Line, { type BaseLineMarkProps } from './Line.svelte';
     import { recordizeY } from '$lib/index.js';

From ff9a6073cfbda8a18adbb770bf7e27d21978217f Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:37:12 +0200
Subject: [PATCH 37/66] add more component comments

---
 src/lib/marks/Geo.svelte         | 3 +++
 src/lib/marks/Graticule.svelte   | 3 +++
 src/lib/marks/Link.svelte        | 3 +++
 src/lib/marks/RegressionX.svelte | 3 +++
 src/lib/marks/RegressionY.svelte | 3 +++
 src/lib/marks/RuleX.svelte       | 3 +++
 src/lib/marks/RuleY.svelte       | 3 +++
 7 files changed, 21 insertions(+)

diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
index d03d0c5b..646d51de 100644
--- a/src/lib/marks/Geo.svelte
+++ b/src/lib/marks/Geo.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Renders geographical data using projections and GeoJSON geometries
+-->
 <script lang="ts">
     import { getContext } from 'svelte';
     import type { DataRecord, PlotContext, BaseMarkProps, ConstantAccessor } from '../types.js';
diff --git a/src/lib/marks/Graticule.svelte b/src/lib/marks/Graticule.svelte
index 05d4c9c0..b568b61f 100644
--- a/src/lib/marks/Graticule.svelte
+++ b/src/lib/marks/Graticule.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Renders a geographic graticule grid with customizable step sizes
+-->
 <script module lang="ts">
     import type { DefaultOptions, BaseMarkProps } from '../types.js';
     export type GraticuleMarkProps = Omit<
diff --git a/src/lib/marks/Link.svelte b/src/lib/marks/Link.svelte
index 07f9f762..d7f10d43 100644
--- a/src/lib/marks/Link.svelte
+++ b/src/lib/marks/Link.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Creates connections between pairs of points with optional curve styling and markers
+-->
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
     import type {
diff --git a/src/lib/marks/RegressionX.svelte b/src/lib/marks/RegressionX.svelte
index 28189d66..5292c265 100644
--- a/src/lib/marks/RegressionX.svelte
+++ b/src/lib/marks/RegressionX.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Calculates and displays a regression line with x as the dependent variable
+-->
 <script lang="ts">
     import { resolveChannel } from '$lib/helpers/resolve.js';
     import type { ChannelName } from '$lib/types.js';
diff --git a/src/lib/marks/RegressionY.svelte b/src/lib/marks/RegressionY.svelte
index a01d1302..41b75daa 100644
--- a/src/lib/marks/RegressionY.svelte
+++ b/src/lib/marks/RegressionY.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Calculates and displays a regression line with y as the dependent variable
+-->
 <script lang="ts">
     import { resolveChannel } from '$lib/helpers/resolve.js';
     import type { ChannelName } from '$lib/types.js';
diff --git a/src/lib/marks/RuleX.svelte b/src/lib/marks/RuleX.svelte
index 6404d246..38a0b4ee 100644
--- a/src/lib/marks/RuleX.svelte
+++ b/src/lib/marks/RuleX.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Renders vertical rule lines at specified x positions with customizable vertical range
+-->
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import GroupMultiple from '$lib/marks/helpers/GroupMultiple.svelte';
diff --git a/src/lib/marks/RuleY.svelte b/src/lib/marks/RuleY.svelte
index 30bbfd24..88646277 100644
--- a/src/lib/marks/RuleY.svelte
+++ b/src/lib/marks/RuleY.svelte
@@ -1,3 +1,6 @@
+<!-- @component
+    Renders horizontal rule lines at specified y positions with customizable horizontal range
+-->
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import GroupMultiple from '$lib/marks/helpers/GroupMultiple.svelte';

From c0c025db443666a83c639f7c003a3c6a637ba355 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:49:53 +0200
Subject: [PATCH 38/66] chore: refine & export brush mark prop types

---
 src/lib/marks/BrushX.svelte | 6 +++++-
 src/lib/marks/BrushY.svelte | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/marks/BrushX.svelte b/src/lib/marks/BrushX.svelte
index 4cb3ae80..9ce89f27 100644
--- a/src/lib/marks/BrushX.svelte
+++ b/src/lib/marks/BrushX.svelte
@@ -1,7 +1,11 @@
+<script module type="ts">
+    export type BrushXMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
+</script>
+
 <script lang="ts">
     import Brush, { type BrushMarkProps } from './Brush.svelte';
 
-    let { brush, ...restProps }: Omit<BrushMarkProps, 'limitDimension'> = $props();
+    let { brush, ...restProps }: BrushXMarkProps = $props();
 </script>
 
 <Brush bind:brush limitDimension="x" {...restProps} />
diff --git a/src/lib/marks/BrushY.svelte b/src/lib/marks/BrushY.svelte
index b35ac76c..5fe054f6 100644
--- a/src/lib/marks/BrushY.svelte
+++ b/src/lib/marks/BrushY.svelte
@@ -1,7 +1,11 @@
+<script module type="ts">
+    export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
+</script>
+
 <script lang="ts">
     import Brush, { type BrushMarkProps } from './Brush.svelte';
 
-    let { brush, ...restProps }: Omit<BrushMarkProps, 'limitDimension'> = $props();
+    let { brush, ...restProps }: BrushYMarkProps = $props();
 </script>
 
 <Brush bind:brush limitDimension="y" {...restProps} />

From e13031570142f760648a6da88b8481e568fac4e9 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:49:59 +0200
Subject: [PATCH 39/66] chore: refine & export cell mark prop types

---
 src/lib/marks/Cell.svelte  | 37 +++++++++++++++++--------------------
 src/lib/marks/CellX.svelte | 19 +++++++------------
 src/lib/marks/CellY.svelte | 19 +++++++------------
 3 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/src/lib/marks/Cell.svelte b/src/lib/marks/Cell.svelte
index c8210cd9..60daa848 100644
--- a/src/lib/marks/Cell.svelte
+++ b/src/lib/marks/Cell.svelte
@@ -2,11 +2,7 @@
     @component
     For arbitrary rectangles, requires band x and y scales 
 -->
-<script lang="ts">
-    import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import { recordizeY, sort } from '$lib/index.js';
-    import { resolveChannel } from '../helpers/resolve.js';
+<script module lang="ts">
     import type {
         PlotContext,
         DataRecord,
@@ -14,24 +10,25 @@
         BaseRectMarkProps,
         ChannelAccessor
     } from '../types.js';
+
+    export type CellMarkProps = BaseMarkProps &
+        BaseRectMarkProps & {
+            data: DataRecord[];
+            x?: ChannelAccessor;
+            y?: ChannelAccessor;
+        };
+</script>
+
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { recordizeY, sort } from '$lib/index.js';
+    import { resolveChannel } from '../helpers/resolve.js';
+
     import { isValid } from '../helpers/isValid.js';
     import RectPath from './helpers/RectPath.svelte';
 
-    type CellProps = BaseMarkProps & {
-        data: DataRecord[];
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-        borderRadius?:
-            | number
-            | {
-                  topLeft?: number;
-                  topRight?: number;
-                  bottomRight?: number;
-                  bottomLeft?: number;
-              };
-    } & BaseRectMarkProps;
-
-    let { data = [{}], class: className = null, ...options }: CellProps = $props();
+    let { data = [{}], class: className = null, ...options }: CellMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/CellX.svelte b/src/lib/marks/CellX.svelte
index 7e55f567..0deb0b69 100644
--- a/src/lib/marks/CellX.svelte
+++ b/src/lib/marks/CellX.svelte
@@ -1,20 +1,15 @@
+<script module lang="ts">
+    export type CellXMarkProps = Omit<CellMarkProps, 'y'>;
+</script>
+
 <script lang="ts">
-    import Cell from './Cell.svelte';
+    import Cell, { type CellMarkProps } from './Cell.svelte';
     import { recordizeY } from '$lib/index.js';
-    import type { BaseMarkProps, DataRow, RectMarkProps } from '../types.js';
-    import type { ChannelAccessor } from '$lib/types.js';
-
-    type CellXProps = BaseMarkProps & {
-        data: DataRow[];
-        x?: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-    } & RectMarkProps;
 
-    let { data = [{}], ...options }: CellXProps = $props();
+    let { data = [{}], ...options }: CellXMarkProps = $props();
 
     const args = $derived(
-        recordizeY<CellXProps>({
+        recordizeY<CellXMarkProps>({
             data,
             ...options
         })
diff --git a/src/lib/marks/CellY.svelte b/src/lib/marks/CellY.svelte
index 316b76a0..d3c65a1e 100644
--- a/src/lib/marks/CellY.svelte
+++ b/src/lib/marks/CellY.svelte
@@ -1,20 +1,15 @@
+<script module lang="ts">
+    export type CellYMarkProps = Omit<CellMarkProps, 'x'>;
+</script>
+
 <script lang="ts">
-    import Cell from './Cell.svelte';
+    import Cell, { type CellMarkProps } from './Cell.svelte';
     import { recordizeX } from '$lib/index.js';
-    import type { BaseMarkProps, DataRow, RectMarkProps } from '../types.js';
-    import type { ChannelAccessor } from '$lib/types.js';
-
-    type CellYProps = BaseMarkProps & {
-        data: DataRow[];
-        y?: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-    } & RectMarkProps;
 
-    let { data = [{}], ...options }: CellYProps = $props();
+    let { data = [{}], ...options }: CellYMarkProps = $props();
 
     const args = $derived(
-        recordizeX<CellYProps>({
+        recordizeX<CellYMarkProps>({
             data,
             ...options
         })

From b855719bbd6cdb9ad9ce7145bca8e219ce5f7465 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:50:08 +0200
Subject: [PATCH 40/66] chore: refine & export differenceY mark prop types

---
 src/lib/marks/DifferenceY.svelte | 42 +++++++++++++++++---------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/lib/marks/DifferenceY.svelte b/src/lib/marks/DifferenceY.svelte
index 23a642a6..081f51f0 100644
--- a/src/lib/marks/DifferenceY.svelte
+++ b/src/lib/marks/DifferenceY.svelte
@@ -1,19 +1,5 @@
-<script lang="ts">
-    import type {
-        BaseMarkProps,
-        ChannelAccessor,
-        CurveName,
-        DataRecord,
-        PlotContext
-    } from '$lib/types.js';
-    import { Line, Area } from '$lib/index.js';
-    import { randomId, coalesce } from '$lib/helpers/index.js';
-    import { getContext } from 'svelte';
-    import { extent, max, min } from 'd3-array';
-    import { resolveChannel } from '$lib/helpers/resolve.js';
-    import type { CurveFactory } from 'd3-shape';
-
-    type DifferenceYMarkProps = {
+<script module lang="ts">
+    export type DifferenceYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
         data: DataRecord[];
         /*
          * the horizontal position of the comparison; bound to the x scale
@@ -33,14 +19,30 @@
          */
         y2: ChannelAccessor;
         y: ChannelAccessor;
+        fillOpacity?: number;
         positiveFill?: string;
         positiveFillOpacity?: number;
         negativeFill?: string;
         negativeFillOpacity?: number;
-        stroke: boolean | ChannelAccessor;
         curve?: CurveName | CurveFactory;
         tension?: number;
-    } & BaseMarkProps;
+    };
+</script>
+
+<script lang="ts">
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        CurveName,
+        DataRecord,
+        PlotContext
+    } from '$lib/types.js';
+    import { Line, Area } from '$lib/index.js';
+    import { randomId, coalesce } from '$lib/helpers/index.js';
+    import { getContext } from 'svelte';
+    import { extent, max, min } from 'd3-array';
+    import { resolveChannel } from '$lib/helpers/resolve.js';
+    import type { CurveFactory } from 'd3-shape';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
@@ -105,7 +107,7 @@
         data={croppedX1}
         {...options}
         fill={options.positiveFill || 'pink'}
-        fillOpacity={coalesce(options.positiveFillOpacity, 1)}
+        fillOpacity={coalesce(options.positiveFillOpacity, options.fillOpacity, 1)}
         x1={coalesce(x1, x2, x)}
         y1={{ scale: null, value: 0 }}
         y2={coalesce(y1, x1x2Differ ? coalesce(y2, y) : 0)} />
@@ -127,7 +129,7 @@
         data={croppedX2}
         {...options}
         fill={options.negativeFill || 'cyan'}
-        fillOpacity={coalesce(options.negativeFillOpacity, 1)}
+        fillOpacity={coalesce(options.negativeFillOpacity, options.fillOpacity, 1)}
         x1={coalesce(x2, x)}
         y1={{ scale: null, value: 0 }}
         y2={coalesce(y2, y)} />

From 612d15013e1e6661fb19f8ffbef61374e6fe0c7f Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:50:18 +0200
Subject: [PATCH 41/66] chore: refine & export color legend mark prop types

---
 src/lib/marks/ColorLegend.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/marks/ColorLegend.svelte b/src/lib/marks/ColorLegend.svelte
index 11ca859f..df69f520 100644
--- a/src/lib/marks/ColorLegend.svelte
+++ b/src/lib/marks/ColorLegend.svelte
@@ -1,3 +1,9 @@
+<script module lang="ts">
+    export type ColorLegendMarkProps = {
+        class: string | null;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import { Plot, AxisX, Frame } from '$lib/index.js';
@@ -7,11 +13,7 @@
 
     import type { DefaultOptions, PlotContext } from '../types.js';
 
-    let {
-        width = 250,
-        tickSpacing = 30,
-        class: className = null
-    }: { width?: number; tickSpacing?: number; class?: string } = $props();
+    let { class: className = null }: ColorLegendMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

From e1dbb183da8c73dc58fc963185423bcaf8fb4957 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Sun, 25 May 2025 23:53:16 +0200
Subject: [PATCH 42/66] chore: refine & export dot mark prop types

---
 src/lib/marks/Dot.svelte  | 39 +++++++++++++--------------------------
 src/lib/marks/DotX.svelte | 13 ++++++-------
 src/lib/marks/DotY.svelte |  8 ++++++--
 3 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/lib/marks/Dot.svelte b/src/lib/marks/Dot.svelte
index e90b5ccd..73674db3 100644
--- a/src/lib/marks/Dot.svelte
+++ b/src/lib/marks/Dot.svelte
@@ -1,6 +1,18 @@
 <!-- @component
     Creates dots or symbols at specified positions with customizable size and appearance
 -->
+<script module lang="ts">
+    export type DotMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        r?: ChannelAccessor;
+        symbol?: ChannelAccessor | Snippet<[number, string]>;
+        canvas?: boolean;
+        dotClass?: ConstantAccessor<string>;
+    };
+</script>
+
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
     import type {
@@ -22,38 +34,13 @@
     import { recordizeXY } from '$lib/transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
 
-    type DotProps = BaseMarkProps & {
-        data: DataRecord[];
-        x: ChannelAccessor;
-        y: ChannelAccessor;
-        r?: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        symbol?: ChannelAccessor | Snippet<[number, string]>;
-        children?: Snippet;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
-        canvas?: boolean;
-        dotClass?: ConstantAccessor<string>;
-        in?: any;
-        inParams?: any;
-        out?: any;
-        outParams?: any;
-        transition?: any;
-        wrap?: Snippet;
-    };
-
     let {
         data = [{}],
         canvas = false,
         class: className = '',
         dotClass = null,
-        in: tIn = undefined,
-        inParams = undefined,
-        out: tOut = undefined,
-        outParams = undefined,
         ...options
-    }: DotProps = $props();
+    }: DotMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/DotX.svelte b/src/lib/marks/DotX.svelte
index 08c7d7b1..3b779fe4 100644
--- a/src/lib/marks/DotX.svelte
+++ b/src/lib/marks/DotX.svelte
@@ -1,18 +1,17 @@
 <!-- @component
     Creates a horizontal dot plot with x values along a single y position
 -->
+<script module lang="ts">
+    export type DotXMarkProps = Omit<DotMarkProps, 'y'>;
+</script>
+
 <script lang="ts">
-    import Dot from './Dot.svelte';
+    import Dot, { type DotMarkProps } from './Dot.svelte';
     import { recordizeX } from '$lib/index.js';
     import type { BaseMarkProps, DataRow } from '../types.js';
     import type { ChannelAccessor } from '$lib/types.js';
 
-    type DotXProps = BaseMarkProps & {
-        data: DataRow[];
-        x?: ChannelAccessor;
-    };
-
-    let { data = [{}], ...options }: DotXProps = $props();
+    let { data = [{}], ...options }: DotXMarkProps = $props();
 
     const args = $derived(recordizeX({ data, ...options, y: 1 }, { withIndex: false }));
 </script>
diff --git a/src/lib/marks/DotY.svelte b/src/lib/marks/DotY.svelte
index a4aa1ce5..81099b5e 100644
--- a/src/lib/marks/DotY.svelte
+++ b/src/lib/marks/DotY.svelte
@@ -1,11 +1,15 @@
 <!-- @component
     Creates a vertical dot plot with y values along a single x position
 -->
+<script module lang="ts">
+    export type DotYMarkProps = Omit<DotMarkProps, 'y'>;
+</script>
+
 <script lang="ts">
-    import Dot from './Dot.svelte';
+    import Dot, { type DotMarkProps } from './Dot.svelte';
     import { recordizeY } from '$lib/index.js';
 
-    let { data = [{}], ...options } = $props();
+    let { data = [{}], ...options }: DotYMarkProps = $props();
 
     const args = $derived(recordizeY({ data, ...options, x: 0 }, { withIndex: false }));
 </script>

From f5a3cf14e3ff62c5b4a83148777f6eefc385bfe1 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 00:28:07 +0200
Subject: [PATCH 43/66] chore: refine & export frame mark prop types + use
 rectpath in frame

---
 src/lib/helpers/resolve.ts            | 39 +++++++++-----
 src/lib/marks/DotX.svelte             |  3 +-
 src/lib/marks/Frame.svelte            | 73 +++++++++++++++------------
 src/lib/marks/helpers/RectPath.svelte | 27 ++++++----
 4 files changed, 84 insertions(+), 58 deletions(-)

diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
index 94f66044..9371fa56 100644
--- a/src/lib/helpers/resolve.ts
+++ b/src/lib/helpers/resolve.ts
@@ -57,14 +57,14 @@ export function toChannelOption(
     return isDataRecord(channel)
         ? (channel as ChannelOptions)
         : {
-              value: channel,
-              scale:
-                  (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
-                  typeof channel === 'undefined'
-                      ? null
-                      : CHANNEL_SCALE[name],
-              channel: null
-          };
+            value: channel,
+            scale:
+                (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
+                    typeof channel === 'undefined'
+                    ? null
+                    : CHANNEL_SCALE[name],
+            channel: null
+        };
 }
 
 export function resolveChannel(
@@ -118,10 +118,10 @@ function resolve(
         return typeof accessor === 'function'
             ? accessor(datum)
             : accessor !== null && isRawValue(accessor)
-              ? accessor
-              : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
-                ? datum
-                : null;
+                ? accessor
+                : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
+                    ? datum
+                    : null;
     }
 }
 
@@ -204,7 +204,7 @@ export function resolveStyles(
     recomputeChannels = false
 ): [string | null, string | null] {
     const styleProps = {
-        ...getBaseStylesObject(datum.datum, channels),
+        ...getBaseStylesObject(datum?.datum, channels),
         fill: 'none',
         stroke: 'none',
         ...(defaultColorProp && channels[oppositeColor[defaultColorProp]] == null
@@ -216,7 +216,7 @@ export function resolveStyles(
                 .map(([key, cssAttr]) => [
                     key,
                     cssAttr,
-                    recomputeChannels ? resolveChannel(key, datum.datum, channels) : datum[key]
+                    recomputeChannels ? resolveChannel(key, datum?.datum, channels) : datum?.[key]
                 ])
                 .filter(
                     ([key, , value]) =>
@@ -236,6 +236,17 @@ export function resolveStyles(
                 })
         )
     };
+    if (channels.stroke === 'magenta') {
+        console.log({
+            styleProps, x: (Object.entries(scaledStyleProps) as [ScaledChannelName, string][])
+                .filter(([key]) => channels[key] != null)
+                .map(([key, cssAttr]) => [
+                    key,
+                    cssAttr,
+                    recomputeChannels ? resolveChannel(key, datum?.datum, channels) : datum?.[key]
+                ])
+        })
+    }
     if (plot.css) {
         return [null, plot.css(`${stylePropsToCSS(styleProps)};${channels.style ?? ''}`)];
     } else {
diff --git a/src/lib/marks/DotX.svelte b/src/lib/marks/DotX.svelte
index 3b779fe4..22a753d7 100644
--- a/src/lib/marks/DotX.svelte
+++ b/src/lib/marks/DotX.svelte
@@ -8,8 +8,7 @@
 <script lang="ts">
     import Dot, { type DotMarkProps } from './Dot.svelte';
     import { recordizeX } from '$lib/index.js';
-    import type { BaseMarkProps, DataRow } from '../types.js';
-    import type { ChannelAccessor } from '$lib/types.js';
+    import type { DataRow } from '../types.js';
 
     let { data = [{}], ...options }: DotXMarkProps = $props();
 
diff --git a/src/lib/marks/Frame.svelte b/src/lib/marks/Frame.svelte
index 4d5d2689..cfe1a317 100644
--- a/src/lib/marks/Frame.svelte
+++ b/src/lib/marks/Frame.svelte
@@ -1,16 +1,20 @@
-<script lang="ts">
-    import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
-    import type { BaseMarkProps } from '../types.js';
-    import { resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
-    import { addEventHandlers } from './helpers/events.js';
-
-    type FrameMarkProps = BaseMarkProps &
+<!-- 
+    @component 
+    Renders a simple frame around the entire plot domain 
+-->
+<script module lang="ts">
+    export type FrameMarkProps = Omit<
+        BaseMarkProps,
+        'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
+    > &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
         > & {
+            fill: string;
+            stroke: string;
+            fillOpacity: number;
+            strokeOpacity: number;
             automatic?: boolean;
             inset?: number;
             insetLeft?: number;
@@ -18,33 +22,40 @@
             insetTop?: number;
             insetBottom?: number;
         };
+</script>
 
-    let { automatic, class: className = '', ...options }: FrameMarkProps = $props();
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type { BaseMarkProps } from '../types.js';
+    import RectPath from './helpers/RectPath.svelte';
+
+    let {
+        automatic,
+        class: className = '',
+        fill,
+        stroke,
+        fillOpacity,
+        strokeOpacity,
+        ...options
+    }: FrameMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
-
-    const dx = $derived(resolveProp(options.dx, null, 0));
-    const dy = $derived(resolveProp(options.dy, null, 0));
-
-    const {
-        insetLeft = options.inset || 0,
-        insetTop = options.inset || 0,
-        insetRight = options.inset || 0,
-        insetBottom = options.inset || 0
-    } = $derived(options);
 </script>
 
 <Mark type="frame" {automatic}>
-    <rect
-        class={['frame', className]}
-        transform={dx || dy ? `translate(${dx},${dy})` : null}
-        style={resolveScaledStyles({}, options, {}, plot, 'stroke')}
-        x={plot.options.marginLeft + +insetLeft}
-        y={plot.options.marginTop + +insetTop}
-        rx={resolveProp(options.rx, null, null)}
-        ry={resolveProp(options.ry, null, null)}
-        width={plot.facetWidth - (insetLeft || 0) - (insetRight || 0)}
-        height={plot.facetHeight - (insetBottom || 0) - (insetTop || 0)}
-        use:addEventHandlers={{ getPlotState, options: options, datum: {} }} />
+    {#snippet children({ usedScales })}
+        <RectPath
+            class={className}
+            datum={{ fill, stroke, fillOpacity, strokeOpacity, datum: {}, valid: true }}
+            x={plot.options.marginLeft}
+            y={plot.options.marginTop}
+            width={plot.facetWidth}
+            height={plot.facetHeight}
+            {usedScales}
+            fallbackStyle="stroke"
+            options={{ ...options, fill, stroke, fillOpacity, strokeOpacity }} />
+    {/snippet}
 </Mark>
diff --git a/src/lib/marks/helpers/RectPath.svelte b/src/lib/marks/helpers/RectPath.svelte
index 5142ffe2..8c89ffe0 100644
--- a/src/lib/marks/helpers/RectPath.svelte
+++ b/src/lib/marks/helpers/RectPath.svelte
@@ -25,7 +25,8 @@ Helper component for rendering rectangular marks in SVG
         height,
         useInsetAsFallbackVertically = true,
         useInsetAsFallbackHorizontally = true,
-        usedScales
+        usedScales,
+        fallbackStyle = 'fill'
     }: {
         datum: ScaledDataRecord;
         class: string | null;
@@ -47,39 +48,40 @@ Helper component for rendering rectangular marks in SVG
          */
         useInsetAsFallbackHorizontally?: boolean;
         usedScales: UsedScales;
+        fallbackStyle?: 'fill' | 'stroke';
     } = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const dx = $derived(+(resolveProp(options.dx, datum.datum, 0) as number));
-    const dy = $derived(+(resolveProp(options.dy, datum.datum, 0) as number));
-    const inset = $derived(+(resolveProp(options.inset, datum.datum, 0) as number));
+    const dx = $derived(+(resolveProp(options.dx, datum?.datum, 0) as number));
+    const dy = $derived(+(resolveProp(options.dy, datum?.datum, 0) as number));
+    const inset = $derived(+(resolveProp(options.inset, datum?.datum, 0) as number));
     const insetLeft = $derived(
         +(resolveProp(
             options.insetLeft,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackHorizontally ? inset : 0
         ) as number)
     );
     const insetRight = $derived(
         +(resolveProp(
             options.insetRight,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackHorizontally ? inset : 0
         ) as number)
     );
     const insetTop = $derived(
         +(resolveProp(
             options.insetTop,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
     const insetBottom = $derived(
         +(resolveProp(
             options.insetBottom,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
@@ -94,7 +96,10 @@ Helper component for rendering rectangular marks in SVG
                     borderRadius.bottomLeft ?? 0
                 ) > 0)
     );
-    const [style, styleClass] = $derived(resolveStyles(plot, datum, options, 'fill', usedScales));
+    const [style, styleClass] = $derived(
+        resolveStyles(plot, datum, options, fallbackStyle, usedScales)
+    );
+    $inspect({ style, stroke: options.stroke, fill: options.fill, options });
 </script>
 
 {#if hasBorderRadius}
@@ -112,7 +117,7 @@ Helper component for rendering rectangular marks in SVG
         use:addEventHandlers={{
             getPlotState,
             options,
-            datum: datum.datum
+            datum: datum?.datum
         }} />
 {:else}
     <rect
@@ -124,6 +129,6 @@ Helper component for rendering rectangular marks in SVG
         use:addEventHandlers={{
             getPlotState,
             options,
-            datum: datum.datum
+            datum: datum?.datum
         }} />
 {/if}

From 5cd23c41d60b6e9737a2eb0e5cf343bb5a76fe18 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 00:29:32 +0200
Subject: [PATCH 44/66] docs: use borderRadius in frame example

---
 src/routes/marks/frame/+page.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/marks/frame/+page.md b/src/routes/marks/frame/+page.md
index 4925d02f..07c452ec 100644
--- a/src/routes/marks/frame/+page.md
+++ b/src/routes/marks/frame/+page.md
@@ -37,11 +37,12 @@ If you need more customization options, you can add the frame manually by explic
 <Plot grid testid="frame-demo" inset={20}>
     <Frame
         fill="yellow"
+       
         fillOpacity="0.2"
         stroke="magenta"
         strokeWidth="2"
         strokeDasharray="4,4" />
-    <Frame inset="4" />
+    <Frame inset="4" borderRadius={5} />
     <Line data={aapl} x="Date" y="Close" />
 </Plot>
 ```
@@ -54,7 +55,7 @@ If you need more customization options, you can add the frame manually by explic
         stroke="magenta"
         strokeWidth="2"
         strokeDasharray="4,4" />
-    <Frame inset="4" />
+    <Frame inset="4" borderRadius={5} />
     <Line data={aapl} x="Date" y="Close" />
 </Plot>
 ```

From 7aae9180a0d6643a47df97e56513bc3b24605597 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 00:31:12 +0200
Subject: [PATCH 45/66] chore: refine & export geo mark prop types

---
 src/lib/marks/Geo.svelte | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
index 646d51de..99ccc5cc 100644
--- a/src/lib/marks/Geo.svelte
+++ b/src/lib/marks/Geo.svelte
@@ -1,6 +1,17 @@
 <!-- @component
     Renders geographical data using projections and GeoJSON geometries
 -->
+<script module lang="ts">
+    export type GeoMarkProps = {
+        data: DataRecord[];
+        geoType?: 'sphere' | 'graticule';
+        dragRotate: boolean;
+        canvas: boolean;
+        href: ConstantAccessor<string>;
+        target: ConstantAccessor<string>;
+    } & BaseMarkProps;
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import type { DataRecord, PlotContext, BaseMarkProps, ConstantAccessor } from '../types.js';
@@ -17,15 +28,6 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    type GeoMarkProps = {
-        data: DataRecord[];
-        geoType?: 'sphere' | 'graticule';
-        dragRotate: boolean;
-        canvas: boolean;
-        href: ConstantAccessor<string>;
-        target: ConstantAccessor<string>;
-    } & BaseMarkProps;
-
     let {
         data = [{}],
         canvas = false,

From 1e1cb865f83fa9f84d5e7b8d2ab06c0c409a0a0e Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 00:33:04 +0200
Subject: [PATCH 46/66] formatting + lint

---
 src/lib/helpers/resolve.ts            | 29 ++++++++++++++-------------
 src/lib/marks/helpers/RectPath.svelte |  1 -
 src/routes/marks/frame/+page.md       |  1 -
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
index 9371fa56..7b53c810 100644
--- a/src/lib/helpers/resolve.ts
+++ b/src/lib/helpers/resolve.ts
@@ -57,14 +57,14 @@ export function toChannelOption(
     return isDataRecord(channel)
         ? (channel as ChannelOptions)
         : {
-            value: channel,
-            scale:
-                (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
-                    typeof channel === 'undefined'
-                    ? null
-                    : CHANNEL_SCALE[name],
-            channel: null
-        };
+              value: channel,
+              scale:
+                  (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
+                  typeof channel === 'undefined'
+                      ? null
+                      : CHANNEL_SCALE[name],
+              channel: null
+          };
 }
 
 export function resolveChannel(
@@ -118,10 +118,10 @@ function resolve(
         return typeof accessor === 'function'
             ? accessor(datum)
             : accessor !== null && isRawValue(accessor)
-                ? accessor
-                : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
-                    ? datum
-                    : null;
+              ? accessor
+              : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
+                ? datum
+                : null;
     }
 }
 
@@ -238,14 +238,15 @@ export function resolveStyles(
     };
     if (channels.stroke === 'magenta') {
         console.log({
-            styleProps, x: (Object.entries(scaledStyleProps) as [ScaledChannelName, string][])
+            styleProps,
+            x: (Object.entries(scaledStyleProps) as [ScaledChannelName, string][])
                 .filter(([key]) => channels[key] != null)
                 .map(([key, cssAttr]) => [
                     key,
                     cssAttr,
                     recomputeChannels ? resolveChannel(key, datum?.datum, channels) : datum?.[key]
                 ])
-        })
+        });
     }
     if (plot.css) {
         return [null, plot.css(`${stylePropsToCSS(styleProps)};${channels.style ?? ''}`)];
diff --git a/src/lib/marks/helpers/RectPath.svelte b/src/lib/marks/helpers/RectPath.svelte
index 8c89ffe0..0b35cc65 100644
--- a/src/lib/marks/helpers/RectPath.svelte
+++ b/src/lib/marks/helpers/RectPath.svelte
@@ -99,7 +99,6 @@ Helper component for rendering rectangular marks in SVG
     const [style, styleClass] = $derived(
         resolveStyles(plot, datum, options, fallbackStyle, usedScales)
     );
-    $inspect({ style, stroke: options.stroke, fill: options.fill, options });
 </script>
 
 {#if hasBorderRadius}
diff --git a/src/routes/marks/frame/+page.md b/src/routes/marks/frame/+page.md
index 07c452ec..e5f1046a 100644
--- a/src/routes/marks/frame/+page.md
+++ b/src/routes/marks/frame/+page.md
@@ -37,7 +37,6 @@ If you need more customization options, you can add the frame manually by explic
 <Plot grid testid="frame-demo" inset={20}>
     <Frame
         fill="yellow"
-       
         fillOpacity="0.2"
         stroke="magenta"
         strokeWidth="2"

From 619f1b09422ca092600cf95da65f96ce6d142fb2 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 00:38:04 +0200
Subject: [PATCH 47/66] add frame class

---
 src/lib/marks/Frame.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/marks/Frame.svelte b/src/lib/marks/Frame.svelte
index cfe1a317..c0153ee1 100644
--- a/src/lib/marks/Frame.svelte
+++ b/src/lib/marks/Frame.svelte
@@ -33,7 +33,7 @@
 
     let {
         automatic,
-        class: className = '',
+        class: className = 'frame',
         fill,
         stroke,
         fillOpacity,

From 00d31e9edf0fb4615a83908e7cc1e4739ce80e65 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 00:40:22 +0200
Subject: [PATCH 48/66] remove log

---
 src/lib/helpers/resolve.ts | 36 ++++++++++++------------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
index 7b53c810..63fbb398 100644
--- a/src/lib/helpers/resolve.ts
+++ b/src/lib/helpers/resolve.ts
@@ -57,14 +57,14 @@ export function toChannelOption(
     return isDataRecord(channel)
         ? (channel as ChannelOptions)
         : {
-              value: channel,
-              scale:
-                  (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
-                  typeof channel === 'undefined'
-                      ? null
-                      : CHANNEL_SCALE[name],
-              channel: null
-          };
+            value: channel,
+            scale:
+                (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
+                    typeof channel === 'undefined'
+                    ? null
+                    : CHANNEL_SCALE[name],
+            channel: null
+        };
 }
 
 export function resolveChannel(
@@ -118,10 +118,10 @@ function resolve(
         return typeof accessor === 'function'
             ? accessor(datum)
             : accessor !== null && isRawValue(accessor)
-              ? accessor
-              : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
-                ? datum
-                : null;
+                ? accessor
+                : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
+                    ? datum
+                    : null;
     }
 }
 
@@ -236,18 +236,6 @@ export function resolveStyles(
                 })
         )
     };
-    if (channels.stroke === 'magenta') {
-        console.log({
-            styleProps,
-            x: (Object.entries(scaledStyleProps) as [ScaledChannelName, string][])
-                .filter(([key]) => channels[key] != null)
-                .map(([key, cssAttr]) => [
-                    key,
-                    cssAttr,
-                    recomputeChannels ? resolveChannel(key, datum?.datum, channels) : datum?.[key]
-                ])
-        });
-    }
     if (plot.css) {
         return [null, plot.css(`${stylePropsToCSS(styleProps)};${channels.style ?? ''}`)];
     } else {

From ce240c8956b19fabfe0dcd0434c016397a6a8afa Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 00:42:14 +0200
Subject: [PATCH 49/66] ..

---
 src/lib/helpers/resolve.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
index 63fbb398..c2cc6a54 100644
--- a/src/lib/helpers/resolve.ts
+++ b/src/lib/helpers/resolve.ts
@@ -57,14 +57,14 @@ export function toChannelOption(
     return isDataRecord(channel)
         ? (channel as ChannelOptions)
         : {
-            value: channel,
-            scale:
-                (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
-                    typeof channel === 'undefined'
-                    ? null
-                    : CHANNEL_SCALE[name],
-            channel: null
-        };
+              value: channel,
+              scale:
+                  (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
+                  typeof channel === 'undefined'
+                      ? null
+                      : CHANNEL_SCALE[name],
+              channel: null
+          };
 }
 
 export function resolveChannel(
@@ -118,10 +118,10 @@ function resolve(
         return typeof accessor === 'function'
             ? accessor(datum)
             : accessor !== null && isRawValue(accessor)
-                ? accessor
-                : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
-                    ? datum
-                    : null;
+              ? accessor
+              : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
+                ? datum
+                : null;
     }
 }
 

From 4a43f22fc9098c3381df769e149f6ac1f71a0be8 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 07:45:26 +0200
Subject: [PATCH 50/66] chore: refine & export grid mark prop types

---
 src/lib/marks/GridX.svelte | 12 +++++++-----
 src/lib/marks/GridY.svelte |  9 +++++++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/lib/marks/GridX.svelte b/src/lib/marks/GridX.svelte
index 9d5b3b6b..30940f9c 100644
--- a/src/lib/marks/GridX.svelte
+++ b/src/lib/marks/GridX.svelte
@@ -1,6 +1,13 @@
 <!-- @component
     Renders vertical gridlines at x-axis tick positions
 -->
+<script module lang="ts">
+    export type GridXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data?: RawValue[];
+        automatic?: boolean;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
@@ -10,11 +17,6 @@
     import { testFilter } from '$lib/helpers/index.js';
     import { RAW_VALUE } from '$lib/transforms/recordize.js';
 
-    type GridXMarkProps = BaseMarkProps & {
-        data?: RawValue[];
-        automatic?: boolean;
-    };
-
     let { data = [], automatic = false, ...options }: GridXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
diff --git a/src/lib/marks/GridY.svelte b/src/lib/marks/GridY.svelte
index 4049b01f..6ed4af02 100644
--- a/src/lib/marks/GridY.svelte
+++ b/src/lib/marks/GridY.svelte
@@ -1,6 +1,13 @@
 <!-- @component
     Renders horizontal gridlines at y-axis tick positions
 -->
+<script module lang="ts">
+    export type GridYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data?: RawValue[];
+        automatic?: boolean;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
@@ -10,8 +17,6 @@
     import { testFilter } from '$lib/helpers/index.js';
     import { RAW_VALUE } from '$lib/transforms/recordize.js';
 
-    type GridYMarkProps = BaseMarkProps & { data?: RawValue[]; automatic?: boolean };
-
     let { data = [], automatic = false, ...options }: GridYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');

From e27d0942a262bb1535b14d41168deb6857ecc5ce Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 07:45:51 +0200
Subject: [PATCH 51/66] add type for linkable mark props

---
 src/lib/marks/Area.svelte | 13 ++++---
 src/lib/marks/Geo.svelte  | 11 +++++-
 src/lib/types.ts          | 80 ++++++++++++++++++++-------------------
 3 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
index 0ea60ee4..f9adda22 100644
--- a/src/lib/marks/Area.svelte
+++ b/src/lib/marks/Area.svelte
@@ -14,7 +14,8 @@
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
-    } & BaseMarkProps;
+    } & BaseMarkProps &
+        LinkableMarkProps;
 </script>
 
 <script lang="ts">
@@ -37,7 +38,8 @@
         ConstantAccessor,
         ChannelAccessor,
         FacetContext,
-        ScaledDataRecord
+        ScaledDataRecord,
+        LinkableMarkProps
     } from '../types.js';
     import type { RawValue } from '$lib/types.js';
     import type { StackOptions } from '$lib/transforms/stack.js';
@@ -96,9 +98,6 @@
         }
         return groups;
     }
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    let testFacet = $derived(getTestFacet());
 </script>
 
 <Mark
@@ -115,6 +114,7 @@
             <GroupMultiple length={grouped.length}>
                 {#each grouped as areaData, i (i)}
                     {#snippet el(datum: ScaledDataRecord)}
+                        {@const title = resolveProp(options.title, datum.datum, '')}
                         {@const [style, styleClass] = resolveStyles(
                             plot,
                             datum,
@@ -126,7 +126,8 @@
                             class={['svelteplot-area', className, styleClass]}
                             clip-path={options.clipPath}
                             d={areaPath(areaData)}
-                            {style} />
+                            {style}
+                            >{#if title}<title>{title}</title>{/if}</path>
                     {/snippet}
                     {#if areaData.length > 0}
                         {#if options.href}
diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
index 99ccc5cc..cd56da36 100644
--- a/src/lib/marks/Geo.svelte
+++ b/src/lib/marks/Geo.svelte
@@ -9,12 +9,19 @@
         canvas: boolean;
         href: ConstantAccessor<string>;
         target: ConstantAccessor<string>;
-    } & BaseMarkProps;
+    } & BaseMarkProps &
+        LinkableMarkProps;
 </script>
 
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { DataRecord, PlotContext, BaseMarkProps, ConstantAccessor } from '../types.js';
+    import type {
+        DataRecord,
+        PlotContext,
+        BaseMarkProps,
+        ConstantAccessor,
+        LinkableMarkProps
+    } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
     import { resolveChannel, resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
diff --git a/src/lib/types.ts b/src/lib/types.ts
index ec513a20..e7e0cf3a 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -151,12 +151,12 @@ export type ScaleOptions = {
     base?: number;
     // sorting for band and point scales
     sort?:
-        | ChannelAccessor
-        | ((a: RawValue, b: RawValue) => number)
-        | {
-              channel: string;
-              order: 'ascending' | 'descending';
-          };
+    | ChannelAccessor
+    | ((a: RawValue, b: RawValue) => number)
+    | {
+        channel: string;
+        order: 'ascending' | 'descending';
+    };
     // symlog scales
     constant?: number;
 };
@@ -164,18 +164,18 @@ export type ScaleOptions = {
 export type ColorScaleOptions = ScaleOptions & {
     legend: boolean;
     type:
-        | ScaleType
-        | 'categorical'
-        | 'sequential'
-        | 'cyclical'
-        | 'threshold'
-        | 'quantile'
-        | 'quantize'
-        | 'diverging'
-        | 'diverging-log'
-        | 'diverging-pow'
-        | 'diverging-sqrt'
-        | 'diverging-symlog';
+    | ScaleType
+    | 'categorical'
+    | 'sequential'
+    | 'cyclical'
+    | 'threshold'
+    | 'quantile'
+    | 'quantize'
+    | 'diverging'
+    | 'diverging-log'
+    | 'diverging-pow'
+    | 'diverging-sqrt'
+    | 'diverging-symlog';
     scheme: string;
     /**
      * fallback color used for null/undefined
@@ -479,9 +479,9 @@ export type PlotScale = {
     uniqueScaleProps: Set<ChannelAccessor>;
     skip: Map<ScaledChannelName, Set<symbol>>;
     fn: ScaleLinear<RawValue, number> &
-        ScaleBand<RawValue> &
-        ScaleOrdinal<string | Date, number> &
-        ScaleOrdinal<string | Date, string>;
+    ScaleBand<RawValue> &
+    ScaleOrdinal<string | Date, number> &
+    ScaleOrdinal<string | Date, string>;
 };
 
 export type CurveName =
@@ -632,6 +632,20 @@ export type FacetContext = {
     getFacetState: () => FacetState;
 };
 
+export type LinkableMarkProps = {
+    /**
+         * simple browser tooltip to be displayed on mouseover
+         */
+    title: ConstantAccessor<string>;
+    /**
+     * if set, the mark element will be wrapped in a <a> link
+     * element
+     */
+    href: ConstantAccessor<string>;
+    target: ConstantAccessor<'_self' | '_blank' | string>;
+
+}
+
 export type BaseMarkProps = Partial<{
     /**
      * Filter the data without modifying the inferred scales
@@ -689,18 +703,8 @@ export type BaseMarkProps = Partial<{
     oncontextmenu?: MouseEventHandler<SVGPathElement>;
     onwheel?: MouseEventHandler<SVGPathElement>;
     /**
-     * simple browser tooltip to be displayed on mouseover
-     */
-    title: ConstantAccessor<string>;
-    /**
-     * if set, the mark element will be wrapped in a <a> link
-     * element
-     */
-    href: ConstantAccessor<string>;
-    target: ConstantAccessor<'_self' | '_blank' | string>;
-    /**
-     * if you want to give your mark element an extra CSS class
-     */
+    * if you want to give your mark element an extra CSS class
+    */
     class: string | null;
     cursor: ConstantAccessor<CSS.Property.Cursor>;
 }>;
@@ -708,11 +712,11 @@ export type BaseMarkProps = Partial<{
 export type BorderRadius =
     | number
     | {
-          topLeft?: number;
-          topRight?: number;
-          bottomRight?: number;
-          bottomLeft?: number;
-      };
+        topLeft?: number;
+        topRight?: number;
+        bottomRight?: number;
+        bottomLeft?: number;
+    };
 
 export type BaseRectMarkProps = {
     inset?: ConstantAccessor<number>;

From 4e86084cbe23088078ee8cb77a1eb23a3ae085d0 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 07:46:14 +0200
Subject: [PATCH 52/66]  format

---
 src/lib/types.ts | 63 ++++++++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/lib/types.ts b/src/lib/types.ts
index e7e0cf3a..7b782c76 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -151,12 +151,12 @@ export type ScaleOptions = {
     base?: number;
     // sorting for band and point scales
     sort?:
-    | ChannelAccessor
-    | ((a: RawValue, b: RawValue) => number)
-    | {
-        channel: string;
-        order: 'ascending' | 'descending';
-    };
+        | ChannelAccessor
+        | ((a: RawValue, b: RawValue) => number)
+        | {
+              channel: string;
+              order: 'ascending' | 'descending';
+          };
     // symlog scales
     constant?: number;
 };
@@ -164,18 +164,18 @@ export type ScaleOptions = {
 export type ColorScaleOptions = ScaleOptions & {
     legend: boolean;
     type:
-    | ScaleType
-    | 'categorical'
-    | 'sequential'
-    | 'cyclical'
-    | 'threshold'
-    | 'quantile'
-    | 'quantize'
-    | 'diverging'
-    | 'diverging-log'
-    | 'diverging-pow'
-    | 'diverging-sqrt'
-    | 'diverging-symlog';
+        | ScaleType
+        | 'categorical'
+        | 'sequential'
+        | 'cyclical'
+        | 'threshold'
+        | 'quantile'
+        | 'quantize'
+        | 'diverging'
+        | 'diverging-log'
+        | 'diverging-pow'
+        | 'diverging-sqrt'
+        | 'diverging-symlog';
     scheme: string;
     /**
      * fallback color used for null/undefined
@@ -479,9 +479,9 @@ export type PlotScale = {
     uniqueScaleProps: Set<ChannelAccessor>;
     skip: Map<ScaledChannelName, Set<symbol>>;
     fn: ScaleLinear<RawValue, number> &
-    ScaleBand<RawValue> &
-    ScaleOrdinal<string | Date, number> &
-    ScaleOrdinal<string | Date, string>;
+        ScaleBand<RawValue> &
+        ScaleOrdinal<string | Date, number> &
+        ScaleOrdinal<string | Date, string>;
 };
 
 export type CurveName =
@@ -634,8 +634,8 @@ export type FacetContext = {
 
 export type LinkableMarkProps = {
     /**
-         * simple browser tooltip to be displayed on mouseover
-         */
+     * simple browser tooltip to be displayed on mouseover
+     */
     title: ConstantAccessor<string>;
     /**
      * if set, the mark element will be wrapped in a <a> link
@@ -643,8 +643,7 @@ export type LinkableMarkProps = {
      */
     href: ConstantAccessor<string>;
     target: ConstantAccessor<'_self' | '_blank' | string>;
-
-}
+};
 
 export type BaseMarkProps = Partial<{
     /**
@@ -703,8 +702,8 @@ export type BaseMarkProps = Partial<{
     oncontextmenu?: MouseEventHandler<SVGPathElement>;
     onwheel?: MouseEventHandler<SVGPathElement>;
     /**
-    * if you want to give your mark element an extra CSS class
-    */
+     * if you want to give your mark element an extra CSS class
+     */
     class: string | null;
     cursor: ConstantAccessor<CSS.Property.Cursor>;
 }>;
@@ -712,11 +711,11 @@ export type BaseMarkProps = Partial<{
 export type BorderRadius =
     | number
     | {
-        topLeft?: number;
-        topRight?: number;
-        bottomRight?: number;
-        bottomLeft?: number;
-    };
+          topLeft?: number;
+          topRight?: number;
+          bottomRight?: number;
+          bottomLeft?: number;
+      };
 
 export type BaseRectMarkProps = {
     inset?: ConstantAccessor<number>;

From e5264aaea3163da636a2335e82cf8c830af634b3 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 07:49:42 +0200
Subject: [PATCH 53/66] export line mark props type

---
 src/lib/marks/HTMLTooltip.svelte |  3 ++-
 src/lib/marks/Line.svelte        | 15 +++++----------
 src/lib/marks/LineX.svelte       |  4 ++--
 src/lib/marks/LineY.svelte       |  4 ++--
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/lib/marks/HTMLTooltip.svelte b/src/lib/marks/HTMLTooltip.svelte
index a13f11f9..5c4ee719 100644
--- a/src/lib/marks/HTMLTooltip.svelte
+++ b/src/lib/marks/HTMLTooltip.svelte
@@ -10,11 +10,12 @@
         x?: ChannelAccessor;
         y?: ChannelAccessor;
         r?: ChannelAccessor;
+        children: Snippet<[{ datum: DataRow }]>;
     };
 </script>
 
 <script lang="ts">
-    import { getContext } from 'svelte';
+    import { getContext, type Snippet } from 'svelte';
     import type { PlotContext } from '../types.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
diff --git a/src/lib/marks/Line.svelte b/src/lib/marks/Line.svelte
index 8203b6a5..8d524a93 100644
--- a/src/lib/marks/Line.svelte
+++ b/src/lib/marks/Line.svelte
@@ -13,15 +13,14 @@
         ScaledDataRecord
     } from '../types.js';
 
-    export type BaseLineMarkProps = {
+    export type LineMarkProps = {
         data: DataRecord[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
         z?: ChannelAccessor;
-        stroke?: ChannelAccessor;
         outlineStroke?: string;
         outlineStrokeWidth?: number;
         outlineStrokeOpacity?: number;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
         curve?: CurveName | CurveFactory;
         tension?: number;
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
@@ -32,7 +31,8 @@
         textStrokeWidth?: ConstantAccessor<number>;
         lineClass?: ConstantAccessor<string>;
         canvas?: boolean;
-    } & MarkerOptions;
+    } & MarkerOptions &
+        BaseMarkProps;
 </script>
 
 <script lang="ts">
@@ -47,11 +47,6 @@
     import { pick } from 'es-toolkit';
     import LineCanvas from './helpers/LineCanvas.svelte';
 
-    type LineMarkProps = BaseMarkProps & {
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-    } & BaseLineMarkProps;
-
     import type { RawValue } from '$lib/types.js';
     import { isValid } from '$lib/helpers/index.js';
     import { sort } from '$lib/transforms/sort.js';
diff --git a/src/lib/marks/LineX.svelte b/src/lib/marks/LineX.svelte
index c23101dc..8ae7c872 100644
--- a/src/lib/marks/LineX.svelte
+++ b/src/lib/marks/LineX.svelte
@@ -2,10 +2,10 @@
     Creates a horizontal line chart with x values and index positions for y
 -->
 <script lang="ts">
-    import Line, { type BaseLineMarkProps } from './Line.svelte';
+    import Line, { type LineMarkProps } from './Line.svelte';
     import { recordizeX } from '$lib/index.js';
 
-    let { data = [{}], ...rest }: BaseLineMarkProps = $props();
+    let { data = [{}], ...rest }: Omit<LineMarkProps, 'y'> = $props();
 
     let args = $derived(recordizeX({ data, ...rest }));
 </script>
diff --git a/src/lib/marks/LineY.svelte b/src/lib/marks/LineY.svelte
index 2cfc7fd6..14ba10da 100644
--- a/src/lib/marks/LineY.svelte
+++ b/src/lib/marks/LineY.svelte
@@ -2,10 +2,10 @@
     Creates a vertical line chart with y values and index positions for x
 -->
 <script lang="ts">
-    import Line, { type BaseLineMarkProps } from './Line.svelte';
+    import Line, { type LineMarkProps } from './Line.svelte';
     import { recordizeY } from '$lib/index.js';
 
-    let { data = [{}], ...rest }: BaseLineMarkProps = $props();
+    let { data = [{}], ...rest }: Omit<LineMarkProps, 'x'> = $props();
     let args = $derived(recordizeY({ data, ...rest }));
 </script>
 

From 304b8013eba6b852dfca243605b193da28848b0d Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 07:56:35 +0200
Subject: [PATCH 54/66] link mark props

---
 src/lib/marks/Link.svelte | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/lib/marks/Link.svelte b/src/lib/marks/Link.svelte
index d7f10d43..00d50f32 100644
--- a/src/lib/marks/Link.svelte
+++ b/src/lib/marks/Link.svelte
@@ -1,6 +1,22 @@
 <!-- @component
     Creates connections between pairs of points with optional curve styling and markers
 -->
+<script lang="ts" module>
+    export type LinkMarkProps = BaseMarkProps &
+        MarkerOptions & {
+            data: DataRecord[];
+            sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+            x1: ChannelAccessor;
+            y1: ChannelAccessor;
+            x2: ChannelAccessor;
+            y2: ChannelAccessor;
+            curve?: 'auto' | CurveName | CurveFactory;
+            tension?: number;
+            text: ConstantAccessor<string>;
+            children?: Snippet;
+        };
+</script>
+
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
     import type {
@@ -25,20 +41,6 @@
     import { geoPath } from 'd3-geo';
     import { pick } from 'es-toolkit';
 
-    type LinkMarkProps = BaseMarkProps & {
-        data: DataRecord[];
-        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
-        x1: ChannelAccessor;
-        y1: ChannelAccessor;
-        x2: ChannelAccessor;
-        y2: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        curve?: 'auto' | CurveName | CurveFactory;
-        tension?: number;
-        text: ConstantAccessor<string>;
-        children?: Snippet;
-    } & MarkerOptions;
-
     let {
         data = [{}],
         curve = 'auto',
@@ -51,10 +53,6 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    function isValid(value: RawValue): value is number | Date | string {
-        return value !== null && (typeof value === 'string' || !Number.isNaN(value));
-    }
-
     const sorted = $derived(
         options.sort
             ? maybeData(data).toSorted((a, b) =>

From 4608349b386419fd96362082f719c499e4d98029 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 07:56:42 +0200
Subject: [PATCH 55/66] rect mark props

---
 src/lib/marks/Rect.svelte  | 25 ++++++++++++++-----------
 src/lib/marks/RectX.svelte | 29 +++++++++--------------------
 src/lib/marks/RectY.svelte | 29 +++++++++--------------------
 3 files changed, 32 insertions(+), 51 deletions(-)

diff --git a/src/lib/marks/Rect.svelte b/src/lib/marks/Rect.svelte
index 701629db..8a40ac0c 100644
--- a/src/lib/marks/Rect.svelte
+++ b/src/lib/marks/Rect.svelte
@@ -2,6 +2,20 @@
     @component
     For arbitrary rectangles, requires quantitative x and y scales 
 -->
+<script module lang="ts">
+    export type RectMarkProps = {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        interval?: number | string;
+    } & BaseMarkProps &
+        BaseRectMarkProps;
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
@@ -16,17 +30,6 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    type RectMarkProps = BaseMarkProps & {
-        data: DataRecord[];
-        x?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        interval?: number | string;
-    } & BaseRectMarkProps;
-
     let { data = [{}], class: className = 'rect', ...options }: RectMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
diff --git a/src/lib/marks/RectX.svelte b/src/lib/marks/RectX.svelte
index ea48c017..9a1eb39e 100644
--- a/src/lib/marks/RectX.svelte
+++ b/src/lib/marks/RectX.svelte
@@ -1,27 +1,16 @@
+<!-- @component
+    Convenience wrapper for rectangles oriented along the x axis 
+-->
+<script module lang="ts">
+    export type RectXMarkProps = Omit<RectMarkProps, 'y'>;
+</script>
+
 <script lang="ts">
-    import Rect from './Rect.svelte';
+    import Rect, { type RectMarkProps } from './Rect.svelte';
     import { intervalY, stackX, recordizeX } from '$lib/index.js';
-    import type {
-        DataRecord,
-        BaseMarkProps,
-        ChannelAccessor,
-        BaseRectMarkProps,
-        PlotContext
-    } from '../types.js';
-    import type { StackOptions } from '$lib/transforms/stack.js';
+    import type { ChannelAccessor, PlotContext } from '../types.js';
     import { getContext } from 'svelte';
 
-    type RectXMarkProps = BaseMarkProps & {
-        data: DataRecord[];
-        x?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        stack?: StackOptions;
-        interval?: number | string;
-    } & BaseRectMarkProps;
-
     let { data = [{}], stack, ...options }: RectXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
diff --git a/src/lib/marks/RectY.svelte b/src/lib/marks/RectY.svelte
index fc8a6c13..36ef70bf 100644
--- a/src/lib/marks/RectY.svelte
+++ b/src/lib/marks/RectY.svelte
@@ -1,27 +1,16 @@
+<!-- @component
+    Convenience wrapper for rectangles oriented along the x axis 
+-->
+<script module lang="ts">
+    export type RectYMarkProps = Omit<RectMarkProps, 'x'>;
+</script>
+
 <script lang="ts">
-    import Rect from './Rect.svelte';
+    import Rect, { type RectMarkProps } from './Rect.svelte';
     import { intervalX, stackY, recordizeY } from '$lib/index.js';
-    import type { StackOptions } from '$lib/transforms/stack.js';
-    import type {
-        DataRecord,
-        BaseMarkProps,
-        ChannelAccessor,
-        BaseRectMarkProps,
-        PlotContext
-    } from '../types.js';
+    import type { PlotContext } from '../types.js';
     import { getContext } from 'svelte';
 
-    type RectYMarkProps = BaseMarkProps & {
-        data: DataRecord[];
-        y?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        stack?: StackOptions;
-        interval?: number | string;
-    } & BaseRectMarkProps;
-
     let { data = [{}], stack, ...options }: RectYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');

From 81e21851699f3d919c505939155750286dc196ea Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 08:00:05 +0200
Subject: [PATCH 56/66] stack

---
 src/lib/marks/AreaY.svelte | 2 +-
 src/lib/marks/RectX.svelte | 5 +++--
 src/lib/marks/RectY.svelte | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/marks/AreaY.svelte b/src/lib/marks/AreaY.svelte
index 7a52c2f7..05403a0c 100644
--- a/src/lib/marks/AreaY.svelte
+++ b/src/lib/marks/AreaY.svelte
@@ -7,7 +7,7 @@
     import { renameChannels } from '$lib/transforms/rename.js';
     import { stackY } from '$lib/transforms/stack.js';
     import { recordizeY } from '$lib/transforms/recordize.js';
-    import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+    import type { ChannelAccessor } from '../types.js';
 
     /**
      * AreaY mark foo
diff --git a/src/lib/marks/RectX.svelte b/src/lib/marks/RectX.svelte
index 9a1eb39e..596e9dfd 100644
--- a/src/lib/marks/RectX.svelte
+++ b/src/lib/marks/RectX.svelte
@@ -2,14 +2,15 @@
     Convenience wrapper for rectangles oriented along the x axis 
 -->
 <script module lang="ts">
-    export type RectXMarkProps = Omit<RectMarkProps, 'y'>;
+    export type RectXMarkProps = Omit<RectMarkProps, 'y'> & { stack?: Partial<StackOptions> };
 </script>
 
 <script lang="ts">
     import Rect, { type RectMarkProps } from './Rect.svelte';
     import { intervalY, stackX, recordizeX } from '$lib/index.js';
-    import type { ChannelAccessor, PlotContext } from '../types.js';
+    import type { PlotContext } from '../types.js';
     import { getContext } from 'svelte';
+    import type { StackOptions } from '$lib/transforms/stack';
 
     let { data = [{}], stack, ...options }: RectXMarkProps = $props();
 
diff --git a/src/lib/marks/RectY.svelte b/src/lib/marks/RectY.svelte
index 36ef70bf..48b59269 100644
--- a/src/lib/marks/RectY.svelte
+++ b/src/lib/marks/RectY.svelte
@@ -2,7 +2,7 @@
     Convenience wrapper for rectangles oriented along the x axis 
 -->
 <script module lang="ts">
-    export type RectYMarkProps = Omit<RectMarkProps, 'x'>;
+    export type RectYMarkProps = Omit<RectMarkProps, 'x'> & { stack?: Partial<StackOptions> };
 </script>
 
 <script lang="ts">
@@ -10,6 +10,7 @@
     import { intervalX, stackY, recordizeY } from '$lib/index.js';
     import type { PlotContext } from '../types.js';
     import { getContext } from 'svelte';
+    import type { StackOptions } from '$lib/transforms/stack';
 
     let { data = [{}], stack, ...options }: RectYMarkProps = $props();
 

From 7b45bb052afcc47464bdc2bc5b37a27aa53016be Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 08:18:39 +0200
Subject: [PATCH 57/66] document rect stacking

---
 src/routes/marks/rect/+page.md | 84 ++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/src/routes/marks/rect/+page.md b/src/routes/marks/rect/+page.md
index 454a9df2..85527d43 100644
--- a/src/routes/marks/rect/+page.md
+++ b/src/routes/marks/rect/+page.md
@@ -133,6 +133,90 @@ RectY can be used for range annotations:
 
 ## Stacking
 
+RectX marks can be stacked along the x dimension (over identical y1 values):
+
 ```svelte live
+<script>
+    import { Plot, RectX } from 'svelteplot';
+
+    const data = [
+        {
+            width: 2.5,
+            height: 1,
+            category: 'A'
+        },
+        {
+            width: 3,
+            height: 4,
+            category: 'B'
+        },
+        {
+            width: 4,
+            height: 3,
+            category: 'C'
+        }
+    ];
+</script>
 
+<Plot height={300} color={{ legend: true }}>
+    <RectX
+        {data}
+        x="width"
+        y1={0}
+        y2="height"
+        fill="category"
+        insetRight={1} />
+</Plot>
 ```
+
+```svelte
+<Plot>
+    <RectX
+        {data}
+        x="width"
+        y1={0}
+        y2="height"
+        fill="category"
+        insetRight={1} />
+</Plot>
+```
+
+[fork](https://svelte.dev/playground/9fe225752dbd43fdb00123dcf7bf9441?version=5)
+
+RectY marks can be stacked along y (over identical x1 values).
+
+```svelte live
+<script>
+    import { Plot, RectY } from 'svelteplot';
+
+    const data = [
+        { width: 2.5, height: 1, category: 'A' },
+        { width: 3, height: 4, category: 'B' },
+        { width: 4, height: 3, category: 'C' }
+    ];
+</script>
+
+<Plot height={300} color={{ legend: true }}>
+    <RectY
+        {data}
+        x1={0}
+        x2="width"
+        y="height"
+        fill="category"
+        insetBottom={1} />
+</Plot>
+```
+
+```svelte
+<Plot>
+    <RectY
+        {data}
+        x1={0}
+        x2="width"
+        y="height"
+        fill="category"
+        insetBottom={1} />
+</Plot>
+```
+
+[fork](https://svelte.dev/playground/4db4c6caea4f4329a30c1f18c46ea7d9?version=5.33.2)

From 10f187782ac79bacff2702d963704eb3f2a5c46b Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:08:01 +0200
Subject: [PATCH 58/66] fix link

---
 src/routes/marks/rect/+page.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/marks/rect/+page.md b/src/routes/marks/rect/+page.md
index 85527d43..cae4503e 100644
--- a/src/routes/marks/rect/+page.md
+++ b/src/routes/marks/rect/+page.md
@@ -219,4 +219,4 @@ RectY marks can be stacked along y (over identical x1 values).
 </Plot>
 ```
 
-[fork](https://svelte.dev/playground/4db4c6caea4f4329a30c1f18c46ea7d9?version=5.33.2)
+[fork](https://svelte.dev/playground/4db4c6caea4f4329a30c1f18c46ea7d9?version=5)

From e773a496cdfd0e8445194fe55da8a45a98f25bc0 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:26:34 +0200
Subject: [PATCH 59/66] docs: sort marks alphabetically in sidebar

---
 config/sidebar.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/sidebar.ts b/config/sidebar.ts
index 10f7c36f..b6f2f6a4 100644
--- a/config/sidebar.ts
+++ b/config/sidebar.ts
@@ -66,12 +66,12 @@ export default {
                 { title: 'Line', to: '/marks/line' },
                 { title: 'Link', to: '/marks/link' },
                 { title: 'Pointer', to: '/marks/pointer' },
-                { title: 'Vector', to: '/marks/vector' },
                 { title: 'Rect', to: '/marks/rect' },
                 { title: 'Regression', to: '/marks/regression' },
                 { title: 'Rule', to: '/marks/rule' },
                 { title: 'Text', to: '/marks/text' },
-                { title: 'Tick', to: '/marks/tick' }
+                { title: 'Tick', to: '/marks/tick' },
+                { title: 'Vector', to: '/marks/vector' }
             ]
         },
         {

From 31f5c3b17a4809fd05bc9476cfed61011ad2f585 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:26:46 +0200
Subject: [PATCH 60/66] ts: export regression mark types

---
 src/lib/marks/RegressionX.svelte | 7 ++++++-
 src/lib/marks/RegressionY.svelte | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/marks/RegressionX.svelte b/src/lib/marks/RegressionX.svelte
index 5292c265..a6da2336 100644
--- a/src/lib/marks/RegressionX.svelte
+++ b/src/lib/marks/RegressionX.svelte
@@ -1,6 +1,11 @@
 <!-- @component
     Calculates and displays a regression line with x as the dependent variable
 -->
+
+<script module lang="ts">
+    export type RegressionXMarkProps = RegressionMarkProps;
+</script>
+
 <script lang="ts">
     import { resolveChannel } from '$lib/helpers/resolve.js';
     import type { ChannelName } from '$lib/types.js';
@@ -8,7 +13,7 @@
     import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
     import { groups as d3Groups } from 'd3-array';
 
-    let { data = [{}], ...options }: RegressionMarkProps = $props();
+    let { data = [{}], ...options }: RegressionXMarkProps = $props();
 
     let groupBy: ChannelName | null =
         options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;
diff --git a/src/lib/marks/RegressionY.svelte b/src/lib/marks/RegressionY.svelte
index 41b75daa..c141e245 100644
--- a/src/lib/marks/RegressionY.svelte
+++ b/src/lib/marks/RegressionY.svelte
@@ -1,6 +1,10 @@
 <!-- @component
     Calculates and displays a regression line with y as the dependent variable
 -->
+<script module lang="ts">
+    export type RegressionYMarkProps = RegressionMarkProps;
+</script>
+
 <script lang="ts">
     import { resolveChannel } from '$lib/helpers/resolve.js';
     import type { ChannelName } from '$lib/types.js';
@@ -8,7 +12,7 @@
     import Regression, { type RegressionMarkProps } from './helpers/Regression.svelte';
     import { groups as d3Groups } from 'd3-array';
 
-    let { data = [{}], ...options }: RegressionMarkProps = $props();
+    let { data = [{}], ...options }: RegressionYMarkProps = $props();
 
     let groupBy: ChannelName | null =
         options.stroke != null ? 'stroke' : options.z != null ? 'z' : null;

From 1ca9cf433f4568e3a27bc4a7c9847419eddb25fc Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:26:58 +0200
Subject: [PATCH 61/66] ts: export rule mark props types

---
 src/lib/marks/RuleX.svelte | 24 ++++++++++++------------
 src/lib/marks/RuleY.svelte | 24 ++++++++++++------------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/lib/marks/RuleX.svelte b/src/lib/marks/RuleX.svelte
index 38a0b4ee..cd8d31af 100644
--- a/src/lib/marks/RuleX.svelte
+++ b/src/lib/marks/RuleX.svelte
@@ -1,6 +1,18 @@
 <!-- @component
     Renders vertical rule lines at specified x positions with customizable vertical range
 -->
+<script module lang="ts">
+    export type RuleXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        inset?: ConstantAccessor<number>;
+        insetTop?: ConstantAccessor<number>;
+        insetBottom?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import GroupMultiple from '$lib/marks/helpers/GroupMultiple.svelte';
@@ -15,18 +27,6 @@
         ChannelAccessor
     } from '../types.js';
 
-    type RuleXMarkProps = BaseMarkProps & {
-        data: DataRecord[];
-        x?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        inset?: ConstantAccessor<number>;
-        insetTop?: ConstantAccessor<number>;
-        insetBottom?: ConstantAccessor<number>;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
-    };
-
     let { data = [{}], class: className = null, ...options }: RuleXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
diff --git a/src/lib/marks/RuleY.svelte b/src/lib/marks/RuleY.svelte
index 88646277..432d7cd9 100644
--- a/src/lib/marks/RuleY.svelte
+++ b/src/lib/marks/RuleY.svelte
@@ -1,6 +1,18 @@
 <!-- @component
     Renders horizontal rule lines at specified y positions with customizable horizontal range
 -->
+<script module lang="ts">
+    export type RuleYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data: DataRecord[];
+        y?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        inset?: ConstantAccessor<number>;
+        insetLeft?: ConstantAccessor<number>;
+        insetRight?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import GroupMultiple from '$lib/marks/helpers/GroupMultiple.svelte';
@@ -15,18 +27,6 @@
         ChannelAccessor
     } from '../types.js';
 
-    type RuleYMarkProps = BaseMarkProps & {
-        data: DataRecord[];
-        y?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        inset?: ConstantAccessor<number>;
-        insetLeft?: ConstantAccessor<number>;
-        insetRight?: ConstantAccessor<number>;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
-    };
-
     let { data = [{}], class: className = null, ...options }: RuleYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');

From 4f81a9e3d531519cb2651efb6de2cfdbc94d2cb3 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:27:23 +0200
Subject: [PATCH 62/66] ts: export spike, vector and sphere mark props types

---
 src/lib/marks/Sphere.svelte |  9 ++++++++-
 src/lib/marks/Spike.svelte  | 10 +++++++++-
 src/lib/marks/Vector.svelte |  8 ++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/lib/marks/Sphere.svelte b/src/lib/marks/Sphere.svelte
index 89de7d59..92bf3e1a 100644
--- a/src/lib/marks/Sphere.svelte
+++ b/src/lib/marks/Sphere.svelte
@@ -1,8 +1,15 @@
+<!-- @component
+    Geo mark with Sphere geometry object  -->
+
+<script module lang="ts">
+    export let SphereMarkProps = BaseMarkProps;
+</script>
+
 <script lang="ts">
     import { type BaseMarkProps } from '$lib/types.js';
     import Geo from './Geo.svelte';
 
-    let { ...args }: BaseMarkProps = $props();
+    let { ...args }: SphereMarkProps = $props();
 </script>
 
 <Geo data={[{ type: 'Sphere' }]} {...args} geoType="sphere" />
diff --git a/src/lib/marks/Spike.svelte b/src/lib/marks/Spike.svelte
index 7e1f8a77..35218f9f 100644
--- a/src/lib/marks/Spike.svelte
+++ b/src/lib/marks/Spike.svelte
@@ -1,6 +1,14 @@
+<!-- 
+    @component
+    Wrapper around the vector mark with presets suitable for spike maps 
+-->
+<script module lang="ts">
+    export type SpikeMarkProps = VectorMarkProps;
+</script>
+
 <script lang="ts">
     import Vector, { type VectorMarkProps } from './Vector.svelte';
-    let { data = [{}], ...options }: VectorMarkProps = $props();
+    let { data = [{}], ...options }: SpikeMarkProps = $props();
 </script>
 
 <Vector
diff --git a/src/lib/marks/Vector.svelte b/src/lib/marks/Vector.svelte
index 8e92d569..fdeea203 100644
--- a/src/lib/marks/Vector.svelte
+++ b/src/lib/marks/Vector.svelte
@@ -1,3 +1,7 @@
+<!--
+    @component
+    The vector mark lets you place shapes (like arrows) on your plot.
+-->
 <script lang="ts" module>
     import type {
         PlotContext,
@@ -21,8 +25,6 @@
         r?: number;
         length?: ChannelAccessor;
         rotate?: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
         /**
          * Controls where the vector is anchored in relation to the x, y position.
          * If set to 'start', the arrow will start at the x, y position. If set to
@@ -32,8 +34,6 @@
         anchor: 'start' | 'middle' | 'end';
         shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
         children?: Snippet;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
         canvas?: boolean;
     };
 </script>

From 13265ac61578c8d85e1de9846cb6b9d59c0bdac4 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:27:33 +0200
Subject: [PATCH 63/66] ts: export text mark props type

---
 src/lib/marks/Text.svelte | 40 ++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/lib/marks/Text.svelte b/src/lib/marks/Text.svelte
index b01245b1..7f84e330 100644
--- a/src/lib/marks/Text.svelte
+++ b/src/lib/marks/Text.svelte
@@ -1,26 +1,13 @@
-<script lang="ts">
-    import { getContext, type Snippet } from 'svelte';
-    import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import type {
-        PlotContext,
-        DataRecord,
-        BaseMarkProps,
-        ConstantAccessor,
-        ChannelAccessor
-    } from '../types.js';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import Mark from '../Mark.svelte';
-    import { sort } from '$lib/index.js';
-
-    type TextMarkProps = BaseMarkProps & {
+<!--
+    @component
+    Useful for adding SVG text labels to your plot.
+-->
+<script module lang="ts">
+    export type TextMarkProps = BaseMarkProps & {
         data: DataRecord[];
         x: ChannelAccessor;
         y: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
         children?: Snippet;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
         text: ConstantAccessor<string>;
         title?: ConstantAccessor<string>;
         /**
@@ -42,6 +29,21 @@
             | 'bottom-right'
         >;
     };
+</script>
+
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor
+    } from '../types.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import Mark from '../Mark.svelte';
+    import { sort } from '$lib/index.js';
 
     let { data = [{}], class: className = null, ...options }: TextMarkProps = $props();
 

From 6022452f56878e5e2a1973d1469019b828ef8c7a Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:27:42 +0200
Subject: [PATCH 64/66] ts: export tick marks prop types

---
 src/lib/marks/TickX.svelte | 43 +++++++++++++++++++++-----------------
 src/lib/marks/TickY.svelte | 43 +++++++++++++++++++++-----------------
 2 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/lib/marks/TickX.svelte b/src/lib/marks/TickX.svelte
index dca5df17..0ffdf902 100644
--- a/src/lib/marks/TickX.svelte
+++ b/src/lib/marks/TickX.svelte
@@ -1,3 +1,27 @@
+<!-- 
+    @component 
+    The TickX mark is useful for showing one-dimensional distributions along the x axis. The y axis must be a band scale.
+-->
+<script module lang="ts">
+    export type TickXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data: DataRow[];
+        /**
+         * the horizontal position; bound to the x scale
+         */
+        x?: ChannelAccessor;
+        /**
+         * the vertical position; bound to the y scale, which must be band. If the y channel
+         * is not specified, the tick will span the full vertical extent of the frame.
+         */
+        y?: ChannelAccessor;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
@@ -17,25 +41,6 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    type TickXMarkProps = BaseMarkProps & {
-        data: DataRow[];
-        /**
-         * the horizontal position; bound to the x scale
-         */
-        x?: ChannelAccessor;
-        /**
-         * the vertical position; bound to the y scale, which must be band. If the y channel
-         * is not specified, the tick will span the full vertical extent of the frame.
-         */
-        y?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        /**
-         * if ticks are used on a non-bandwidth scale, this will determine the
-         * length of the tick. Defaults to 10 pixel
-         */
-        tickLength?: ConstantAccessor<number>;
-    };
-
     let { data = [{}], ...options }: TickXMarkProps = $props();
 
     let args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
diff --git a/src/lib/marks/TickY.svelte b/src/lib/marks/TickY.svelte
index 49305b3f..99d503ed 100644
--- a/src/lib/marks/TickY.svelte
+++ b/src/lib/marks/TickY.svelte
@@ -1,3 +1,27 @@
+<!-- 
+    @component 
+    The TickY mark is useful for showing one-dimensional distributions along the y axis. The x axis must be a band scale.
+-->
+<script module lang="ts">
+    export type TickYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data: DataRow[];
+        /**
+         * the vertical position; bound to the x scale
+         */
+        y?: ChannelAccessor;
+        /**
+         * the horizontal position; bound to the x scale, which must be band. If the x channel
+         * is not specified, the tick will span the full horizontal extent of the frame.
+         */
+        x?: ChannelAccessor;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
@@ -18,25 +42,6 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    type TickYMarkProps = BaseMarkProps & {
-        data: DataRow[];
-        /**
-         * the vertical position; bound to the x scale
-         */
-        y?: ChannelAccessor;
-        /**
-         * the horizontal position; bound to the x scale, which must be band. If the x channel
-         * is not specified, the tick will span the full horizontal extent of the frame.
-         */
-        x?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        /**
-         * if ticks are used on a non-bandwidth scale, this will determine the
-         * length of the tick. Defaults to 10 pixel
-         */
-        tickLength?: ConstantAccessor<number>;
-    };
-
     let { data = [{}], ...options }: TickYMarkProps = $props();
 
     let args = $derived(recordizeY({ data, ...options }, { withIndex: false }));

From a545e474c6c064d626b113bf3880a4c8d75a7d27 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:30:16 +0200
Subject: [PATCH 65/66] fix typo

---
 src/lib/marks/Sphere.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/marks/Sphere.svelte b/src/lib/marks/Sphere.svelte
index 92bf3e1a..594d06ff 100644
--- a/src/lib/marks/Sphere.svelte
+++ b/src/lib/marks/Sphere.svelte
@@ -2,11 +2,11 @@
     Geo mark with Sphere geometry object  -->
 
 <script module lang="ts">
-    export let SphereMarkProps = BaseMarkProps;
+    import { type BaseMarkProps } from '$lib/types.js';
+    export type SphereMarkProps = BaseMarkProps;
 </script>
 
 <script lang="ts">
-    import { type BaseMarkProps } from '$lib/types.js';
     import Geo from './Geo.svelte';
 
     let { ...args }: SphereMarkProps = $props();

From 8166086528038281aa2c0252b0e41ef62fc42231 Mon Sep 17 00:00:00 2001
From: gka <gka@users.noreply.github.com>
Date: Mon, 26 May 2025 18:32:58 +0200
Subject: [PATCH 66/66] 0.2.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1e5f235b..8db0e438 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.6-next.5",
+    "version": "0.2.6",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/svelteplot/svelteplot/compare/svelteplot:9ee6822...svelteplot:8166086.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/svelteplot/svelteplot/compare/svelteplot:9ee6822...svelteplot:8166086.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/svelteplot/svelteplot/compare/svelteplot:9ee6822...svelteplot:8166086.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/svelteplot/svelteplot/compare/svelteplot:9ee6822...svelteplot:8166086.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>