svelteplot 0.2.5 → 0.2.6-next.1

package/dist/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.
@@ -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 

package/dist/Plot.svelte.d.ts

@@ -5,7 +5,7 @@ import type { PlotOptions } from './types.js';
  * 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.

package/dist/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
         };
     }
 
@@ -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>

package/dist/helpers/autoScales.js

@@ -193,7 +193,7 @@ function getScaleRange(name, scaleOptions, plotOptions, plotWidth, plotHeight, p
                     : 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

package/dist/helpers/callWithProps.d.ts

@@ -2,7 +2,7 @@ import type { RawValue } from '../types.js';
 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>, args: RawValue[], props?: Record<string, RawValue>): Record<string, Setter>;
 export {};

package/dist/helpers/callWithProps.js

@@ -1,6 +1,6 @@
 /**
  * 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, args, props = {}) {
     const res = d3func(...args);

package/dist/helpers/getBaseStyles.js

@@ -15,6 +15,7 @@ const styleProps = {
     fontWeight: 'font-weight',
     fontStyle: 'font-style',
     textAnchor: 'text-anchor',
+    fontVariant: 'font-variant',
     cursor: 'cursor',
     pointerEvents: 'pointer-events'
 };

package/dist/helpers/scales.d.ts

@@ -30,9 +30,9 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
  */
 export declare function inferScaleType(name: ScaleName, dataValues: RawValue[], markTypes: Set<MarkType>): ScaleType;
 /**
- * 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 declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): UsedScales;

package/dist/helpers/scales.js

@@ -247,9 +247,9 @@ const scaledChannelNames = [
     'length'
 ];
 /**
- * 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(plot, options, mark) {
@@ -277,7 +277,7 @@ function looksLikeOpacity(input) {
 export function projectXY(scales, x, y, useXScale = true, useYScale = true) {
     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({

package/dist/marks/GridX.svelte

@@ -7,12 +7,12 @@
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../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());

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

@@ -1,8 +1,8 @@
 import type { BaseMarkProps, RawValue } from '../types.js';
-type GrixXMarkProps = BaseMarkProps & {
+type GridXMarkProps = BaseMarkProps & {
     data?: RawValue[];
     automatic?: boolean;
 };
-declare const GridX: import("svelte").Component<GrixXMarkProps, {}, "">;
+declare const GridX: import("svelte").Component<GridXMarkProps, {}, "">;
 type GridX = ReturnType<typeof GridX>;
 export default GridX;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -11,7 +11,7 @@
         RawValue,
         ScaleType
     } from '../../types.js';
-    import { resolveScaledStyles, resolveProp } from '../../helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
     import { randomId, testFilter } from '../../helpers/index.js';
 
@@ -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);
@@ -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

package/dist/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 '../../helpers/index.js';
-    import { resolveProp, resolveScaledStyles } from '../../helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
     import type {
         AutoMarginStores,
@@ -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);
@@ -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>

package/dist/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;
         /**

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

@@ -8,7 +8,7 @@ type MarkerPathProps = BaseMarkProps & {
     datum: DataRecord;
     /**
      * the marker shape to use at the start of the path, defaults to
-     * cirlce
+     * circle
      */
     markerStart?: boolean | MarkerShape;
     /**

package/dist/transforms/bin.d.ts

@@ -45,7 +45,7 @@ export declare function binX<T>({ data, ...channels }: TransformArg<T, DataRecor
  */
 export declare function binY<T>({ data, ...channels }: TransformArg<T, DataRecord>, options?: BinYOptions): TransformArg<T, DataRecord>;
 /**
- * for binning in x and y dimension simulatenously
+ * for binning in x and y dimension simultaneously
  */
 export declare function bin<T>({ data, ...channels }: TransformArg<T, DataRecord>, options?: BinOptions): TransformArg<T, DataRecord>;
 export {};

package/dist/transforms/bin.js

@@ -87,7 +87,7 @@ export function binY({ data, ...channels }, options = { thresholds: 'auto', cumu
     return binBy('y', { data, ...channels }, options);
 }
 /**
- * for binning in x and y dimension simulatenously
+ * for binning in x and y dimension simultaneously
  */
 export function bin({ data, ...channels }, options = { thresholds: 'auto', cumulative: false }) {
     const { domain, thresholds = 'auto', interval, cumulative = false } = options;

package/dist/types.d.ts

@@ -296,9 +296,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 = {
     axisXAnchor: AxisXAnchor;
@@ -339,6 +339,7 @@ export type PlotDefaults = {
      */
     numberFormat: Intl.NumberFormatOptions;
     markerDotRadius: number;
+    css: (d: string) => string | undefined;
 };
 export type GenericMarkOptions = Record<string, any>;
 export type DataRecord = Record<string | symbol, RawValue> & {
@@ -583,7 +584,7 @@ export type TransformArgsRecord = Partial<Channels> & {
     data: DataRecord[];
 };
 export type ColorScheme = 'brbg' | 'prgn' | 'piyg' | 'puor' | 'rdbu' | 'rdgy' | 'rdylbu' | 'rdylgn' | 'spectral' | 'burd' | 'buylrd' | 'blues' | 'greens' | 'grays' | 'greys' | 'oranges' | 'purples' | 'reds' | 'turbo' | 'viridis' | 'magma' | 'inferno' | 'plasma' | 'cividis' | 'cubehelix' | 'warm' | 'cool' | 'bugn' | 'bupu' | 'gnbu' | 'orrd' | 'pubu' | 'pubugn' | 'purd' | 'rdpu' | 'ylgn' | 'ylgnbu' | 'ylorbr' | 'ylorrd' | 'rainbow' | 'sinebow' | 'accent' | 'category10' | 'dark2' | 'paired' | 'pastel1' | 'pastel2' | 'set1' | 'set2' | 'set3' | 'tableau10' | 'observable10';
-export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
+export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
 export type AutoMarginStores = {
     autoMarginTop: Writable<Map<string, number>>;
     autoMarginLeft: Writable<Map<string, number>>;

package/package.json

@@ -1,123 +1,124 @@
 {
-  "name": "svelteplot",
-  "version": "0.2.5",
-  "license": "ISC",
-  "author": {
-    "name": "Gregor Aisch",
-    "email": "gka@users.noreply.github.com"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+    "name": "svelteplot",
+    "version": "0.2.6-next.1",
+    "license": "ISC",
+    "author": {
+        "name": "Gregor Aisch",
+        "email": "gka@users.noreply.github.com"
     },
-    "./*.js": {
-      "import": "./dist/*.js"
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test": "npm run test:unit",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "lint": "prettier --check src && eslint src",
+        "format": "prettier --write .",
+        "test:unit": "vitest",
+        "prepack": "npx svelte-package",
+        "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
+        "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/"
     },
-    "./*.svelte": {
-      "import": "./dist/*.svelte"
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "svelte": "./dist/index.js"
+        },
+        "./*.js": {
+            "import": "./dist/*.js"
+        },
+        "./*.svelte": {
+            "import": "./dist/*.svelte"
+        },
+        "./core/*.svelte": {
+            "import": "./dist/core/*.svelte"
+        },
+        "./marks/*.svelte": {
+            "import": "./dist/marks/*.svelte"
+        },
+        "./transforms": {
+            "import": "./dist/transforms/index.js"
+        }
     },
-    "./core/*.svelte": {
-      "import": "./dist/core/*.svelte"
+    "main": "./dist/index.js",
+    "files": [
+        "dist",
+        "!dist/**/*.test.*",
+        "!dist/**/*.spec.*"
+    ],
+    "devDependencies": {
+        "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
+        "@emotion/css": "^11.13.5",
+        "@sveltejs/adapter-auto": "^6.0.1",
+        "@sveltejs/adapter-static": "^3.0.8",
+        "@sveltejs/eslint-config": "^8.2.0",
+        "@sveltejs/kit": "^2.21.0",
+        "@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/user-event": "^14.6.1",
+        "@types/d3-array": "^3.2.1",
+        "@types/d3-color": "^3.1.3",
+        "@types/d3-dsv": "^3.0.7",
+        "@types/d3-geo": "^3.1.0",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-path": "^3.1.1",
+        "@types/d3-random": "^3.0.3",
+        "@types/d3-scale": "^4.0.9",
+        "@types/d3-scale-chromatic": "^3.1.0",
+        "@types/d3-shape": "^3.1.7",
+        "@typescript-eslint/eslint-plugin": "^8.32.1",
+        "@typescript-eslint/parser": "^8.32.1",
+        "csstype": "^3.1.3",
+        "d3-dsv": "^3.0.1",
+        "d3-fetch": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "eslint": "^9.26.0",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-svelte": "3.7.0",
+        "jsdom": "^26.1.0",
+        "prettier": "^3.5.3",
+        "prettier-plugin-svelte": "^3.4.0",
+        "remark-code-extra": "^1.0.1",
+        "remark-code-frontmatter": "^1.0.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "sass": "^1.89.0",
+        "svelte-check": "^4.2.1",
+        "svelte-eslint-parser": "1.2.0",
+        "svelte-highlight": "^7.8.3",
+        "svg-path-parser": "^1.1.0",
+        "topojson-client": "^3.1.0",
+        "tslib": "^2.8.1",
+        "typedoc": "^0.28.4",
+        "typedoc-plugin-markdown": "^4.6.3",
+        "typescript": "^5.8.3",
+        "vite": "^6.3.5",
+        "vitest": "^3.1.3",
+        "vitest-matchmedia-mock": "^2.0.3"
     },
-    "./marks/*.svelte": {
-      "import": "./dist/marks/*.svelte"
-    },
-    "./transforms": {
-      "import": "./dist/transforms/index.js"
+    "types": "./dist/index.d.ts",
+    "type": "module",
+    "dependencies": {
+        "d3-array": "^3.2.4",
+        "d3-color": "^3.1.0",
+        "d3-format": "^3.1.0",
+        "d3-geo": "^3.1.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-path": "^3.1.0",
+        "d3-quadtree": "^3.0.1",
+        "d3-random": "^3.0.1",
+        "d3-regression": "^1.3.10",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.1.0",
+        "d3-shape": "^3.2.0",
+        "d3-time": "^3.1.0",
+        "es-toolkit": "^1.37.2",
+        "fast-equals": "^5.2.2",
+        "merge-deep": "^3.0.3",
+        "svelte": "5.30.1"
     }
-  },
-  "main": "./dist/index.js",
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "devDependencies": {
-    "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
-    "@emotion/css": "^11.13.5",
-    "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/eslint-config": "^8.2.0",
-    "@sveltejs/kit": "^2.21.0",
-    "@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/user-event": "^14.6.1",
-    "@types/d3-array": "^3.2.1",
-    "@types/d3-color": "^3.1.3",
-    "@types/d3-dsv": "^3.0.7",
-    "@types/d3-geo": "^3.1.0",
-    "@types/d3-interpolate": "^3.0.4",
-    "@types/d3-path": "^3.1.1",
-    "@types/d3-random": "^3.0.3",
-    "@types/d3-scale": "^4.0.9",
-    "@types/d3-scale-chromatic": "^3.1.0",
-    "@types/d3-shape": "^3.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
-    "csstype": "^3.1.3",
-    "d3-dsv": "^3.0.1",
-    "d3-fetch": "^3.0.1",
-    "d3-force": "^3.0.0",
-    "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "3.7.0",
-    "jsdom": "^26.1.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.4.0",
-    "remark-code-extra": "^1.0.1",
-    "remark-code-frontmatter": "^1.0.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.89.0",
-    "svelte-check": "^4.2.1",
-    "svelte-eslint-parser": "1.2.0",
-    "svelte-highlight": "^7.8.3",
-    "svg-path-parser": "^1.1.0",
-    "topojson-client": "^3.1.0",
-    "tslib": "^2.8.1",
-    "typedoc": "^0.28.4",
-    "typedoc-plugin-markdown": "^4.6.3",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vitest": "^3.1.3",
-    "vitest-matchmedia-mock": "^2.0.3"
-  },
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "dependencies": {
-    "d3-array": "^3.2.4",
-    "d3-color": "^3.1.0",
-    "d3-format": "^3.1.0",
-    "d3-geo": "^3.1.1",
-    "d3-interpolate": "^3.0.1",
-    "d3-path": "^3.1.0",
-    "d3-quadtree": "^3.0.1",
-    "d3-random": "^3.0.1",
-    "d3-regression": "^1.3.10",
-    "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.1.0",
-    "d3-shape": "^3.2.0",
-    "d3-time": "^3.1.0",
-    "es-toolkit": "^1.37.2",
-    "fast-equals": "^5.2.2",
-    "merge-deep": "^3.0.3",
-    "svelte": "5.30.1"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "npm run test:unit",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check src && eslint src",
-    "format": "prettier --write .",
-    "test:unit": "vitest",
-    "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
-    "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/"
-  }
-}
+}