svelteplot 0.5.3-pr-255.0 → 0.5.3-pr-255.1

package/dist/Mark.svelte

@@ -152,6 +152,12 @@
                     if (options?.[channel] !== undefined && out[channel] === undefined) {
                         // resolve value
                         out[channel] = resolveChannel(channel, row, options);
+                        if (options[channel] === INDEX) {
+                            const scale = plot.scales[CHANNEL_SCALE[channel]];
+                            if (scale.type === 'band' || scale.type === 'point') {
+                                out[channel] = scale.domain[out[channel] % scale.domain.length];
+                            }
+                        }
                     }
                 }
                 return [out];

package/dist/constants.d.ts

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

package/dist/core/FacetAxes.svelte

@@ -35,7 +35,7 @@
             scaleFn={facetXScale}
             scaleType="band"
             ticks={fxValues}
-            tickFormat={(d) => d}
+            tickFormat={plot.options.fx.tickFormat || ((d) => d)}
             tickFontSize={11}
             tickSize={0}
             tickPadding={5}
@@ -53,7 +53,7 @@
             scaleFn={facetYScale}
             scaleType="band"
             ticks={fyValues}
-            tickFormat={(d) => d}
+            tickFormat={plot.options.fy.tickFormat || ((d) => d)}
             tickFontSize={11}
             tickSize={0}
             tickPadding={5}

package/dist/core/Plot.svelte

@@ -614,10 +614,6 @@
         border: 0 !important;
     }
 
-    .plot-header :global(h3) {
-        font-weight: 500;
-    }
-
     .plot-footer {
         margin-bottom: 2rem;
     }

package/dist/helpers/colors.d.ts

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

package/dist/helpers/facets.d.ts

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

package/dist/helpers/getBaseStyles.d.ts

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

package/dist/helpers/index.d.ts

@@ -15,4 +15,4 @@ export declare const POSITION_CHANNELS: Set<ChannelName>;
 export declare function parseInset(inset: number | string, width: number): number;
 export declare function omit<T extends {}, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
 export declare function identity<T>(x: T): T;
-export declare const GEOJSON_PREFER_STROKE: Set<string>;
+export declare const GEOJSON_PREFER_STROKE: any;

package/dist/helpers/reduce.d.ts

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

package/dist/helpers/removeIdenticalLines.js

@@ -12,10 +12,11 @@ export default function removeIdenticalLines(input) {
             text: []
         });
     }
-    for (let l = 0; l < input[0].text.length; l++) {
+    const maxLines = Math.max(...input.map((t) => t.text.length));
+    for (let l = 0; l < maxLines; l++) {
         const isIdentical = input.length > 1 && input.every((tick) => input[0].text[l] === tick.text[l]);
         for (let c = 0; c < input.length; c++) {
-            if (!isIdentical && input[c].text[l])
+            if (!isIdentical && input[c].text[l] != null)
                 uniqueTicks[c].text.push(input[c].text[l]);
         }
     }

package/dist/helpers/scales.d.ts

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

package/dist/helpers/symbols.d.ts

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

package/dist/helpers/time.d.ts

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

package/dist/helpers/typeChecks.d.ts

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

package/dist/helpers/wordwrap.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Greedy word-wrapping that approximates visual width by character widths.
+ *
+ * - Splits input into words, additionally breaking on `-` to avoid very long segments.
+ * - Uses a rough character width table to approximate line widths.
+ * - Wraps once the maximum visual width is exceeded, but only after a minimum.
+ */
+export default function wordwrap(line: string, { maxCharactersPerLine, maxLineWidth }: {
+    maxCharactersPerLine?: number;
+    maxLineWidth?: number;
+}, { minCharactersPerLine, minLineWidth }: {
+    minCharactersPerLine?: number;
+    minLineWidth?: number;
+}, fontSize?: number, monospace?: boolean): string[];

package/dist/helpers/wordwrap.js

@@ -0,0 +1,129 @@
+import { sum } from 'd3-array';
+// Per-character width table for a typical proportional font.
+// This is not perfect for all fonts, but is better than treating
+// all characters as equal width. Set `monospace = true` to bypass.
+const CHAR_W = {
+    A: 7,
+    a: 7,
+    B: 8,
+    b: 7,
+    C: 8,
+    c: 6,
+    D: 9,
+    d: 7,
+    E: 7,
+    e: 7,
+    F: 7,
+    f: 4,
+    G: 9,
+    g: 7,
+    H: 9,
+    h: 7,
+    I: 3,
+    i: 3,
+    J: 5,
+    j: 3,
+    K: 8,
+    k: 6,
+    L: 7,
+    l: 3,
+    M: 11,
+    m: 11,
+    N: 9,
+    n: 7,
+    O: 9,
+    o: 7,
+    P: 8,
+    p: 7,
+    Q: 9,
+    q: 7,
+    R: 8,
+    r: 4,
+    S: 8,
+    s: 6,
+    T: 7,
+    t: 4,
+    U: 9,
+    u: 7,
+    V: 7,
+    v: 6,
+    W: 11,
+    w: 9,
+    X: 7,
+    x: 6,
+    Y: 7,
+    y: 6,
+    Z: 7,
+    z: 5,
+    '.': 2,
+    ',': 2,
+    ':': 2,
+    ';': 2
+};
+/**
+ * Greedy word-wrapping that approximates visual width by character widths.
+ *
+ * - Splits input into words, additionally breaking on `-` to avoid very long segments.
+ * - Uses a rough character width table to approximate line widths.
+ * - Wraps once the maximum visual width is exceeded, but only after a minimum.
+ */
+export default function wordwrap(line, { maxCharactersPerLine, maxLineWidth }, { minCharactersPerLine, minLineWidth }, fontSize = 12, monospace = false) {
+    // Tokenized words (with hyphen-splitting applied) including trailing spaces/hyphens.
+    const tokens = [];
+    // First split by spaces, then further split by hyphens so we can
+    // wrap inside hyphenated words if necessary.
+    const spaceSeparated = line.split(' ');
+    spaceSeparated.forEach((word, wordIndex) => {
+        const hyphenParts = word.split('-');
+        const trailingWhitespace = wordIndex < spaceSeparated.length - 1 ? ' ' : '';
+        if (hyphenParts.length > 1) {
+            hyphenParts.forEach((part, partIndex) => {
+                const suffix = partIndex < hyphenParts.length - 1 ? '-' : trailingWhitespace;
+                tokens.push(part + suffix);
+            });
+        }
+        else {
+            tokens.push(word + trailingWhitespace);
+        }
+    });
+    const maxChars = maxCharactersPerLine || 40;
+    if (!maxLineWidth) {
+        // Fallback for max characters per line if not provided / falsy.
+        // Convert character counts into approximate visual widths.
+        maxLineWidth = maxChars * CHAR_W.a;
+    }
+    if (!minLineWidth) {
+        // Estimate a good minimum line length:
+        //  - start from either a provided value or
+        //  - clamp a scaled median word length between 3 and half of maxChars.
+        const sortedWordLengths = tokens.map((t) => t.length).sort((a, b) => a - b);
+        const medianIndex = Math.round(tokens.length / 2);
+        const medianWordLength = sortedWordLengths[medianIndex] ?? maxChars;
+        const minChars = minCharactersPerLine || Math.max(3, Math.min(maxChars * 0.5, 0.75 * medianWordLength));
+        minLineWidth = minChars * CHAR_W.a;
+    }
+    const lines = [];
+    const currentWords = [];
+    let currentWidth = 0;
+    // Helper to look up a character width, falling back to "a" if unknown
+    // or when monospace mode is enabled.
+    const charWidth = (char) => (fontSize / 12) * (!monospace ? CHAR_W[char] : CHAR_W.a);
+    // Greedy line construction: append tokens until the next one would exceed
+    // max visual width, but only break if the line has passed the minimum width.
+    tokens.forEach((token) => {
+        const tokenWidth = sum(token.split('').map(charWidth));
+        if (currentWidth + tokenWidth > maxLineWidth && currentWidth > minLineWidth) {
+            lines.push(currentWords.join(''));
+            currentWords.length = 0;
+            currentWidth = 0;
+        }
+        currentWidth += tokenWidth;
+        currentWords.push(token);
+    });
+    // Flush trailing tokens into the last line.
+    if (currentWords.length > 0) {
+        lines.push(currentWords.join(''));
+    }
+    // Filter out any empty lines that may have been created.
+    return lines.filter((d) => d !== '');
+}

package/dist/marks/AxisX.svelte

@@ -51,6 +51,7 @@
         tickSpacing?: number;
         /** text anchor for axis labels */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor | 'auto', Datum>;
+        removeDuplicateTicks: boolean;
     }
 
     let markProps: AxisXMarkProps = $props();
@@ -223,7 +224,7 @@
             {anchor}
             {className}
             {labelAnchor}
-            {options}
+            options={{ ...options, ...plot.options.x }}
             {plot}
             {text}
             {tickClass}

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

@@ -88,6 +88,7 @@ declare class __sveltets_Render<Datum extends RawValue> {
         tickSpacing?: number;
         /** text anchor for axis labels */
         textAnchor?: ConstantAccessor<"auto" | CSS.Property.TextAnchor, Datum>;
+        removeDuplicateTicks: boolean;
     };
     events(): {};
     slots(): {};

package/dist/marks/Brush.svelte

@@ -33,14 +33,17 @@
         onbrushend?: (evt: BrushEvent) => void;
         onbrush?: (evt: BrushEvent) => void;
     }
-    import { getContext } from 'svelte';
+    import { getContext, untrack } from 'svelte';
     import Rect from './Rect.svelte';
     import type { BaseMarkProps, DataRecord, PlotContext } from '../types/index.js';
     import { clientToLayerCoordinates } from './helpers/events.js';
     import Frame from './Frame.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
 
-    let { brush = $bindable({ enabled: false }), ...markProps }: BrushMarkProps = $props();
+    let { brush: brushExternal = $bindable({ enabled: false }), ...markProps }: BrushMarkProps =
+        $props();
+
+    let brush = $state<Brush>(brushExternal);
 
     const DEFAULTS = {
         stroke: 'currentColor',
@@ -179,6 +182,7 @@
     );
 
     $effect(() => {
+        // update brush prop when internal state changes
         brush.x1 =
             !brush.enabled || limitDimension === 'y'
                 ? undefined
@@ -197,6 +201,38 @@
                 : constrain(y1 > y2 ? y1 : y2, yDomain);
     });
 
+    // update internal state when external brush prop changes
+    $effect(() => {
+        const brushInt = untrack(() => brush);
+        if (!brushIdentical(brushInt, brushExternal)) {
+            brush = brushExternal;
+            // also keep internal x1,x2,y1,y2 in sync
+            x1 = brush.x1 as Date | number;
+            x2 = brush.x2 as Date | number;
+            y1 = brush.y1 as Date | number;
+            y2 = brush.y2 as Date | number;
+        }
+    });
+
+    // update external brush when internal state changes
+    $effect(() => {
+        const brushExt = untrack(() => brushExternal);
+        if (!brushIdentical(brush, brushExt)) {
+            // avoid cycles
+            brushExternal = brush;
+        }
+    });
+
+    function brushIdentical(b1: Brush, b2: Brush) {
+        return (
+            b1.enabled === b2.enabled &&
+            b1.x1 === b2.x1 &&
+            b1.x2 === b2.x2 &&
+            b1.y1 === b2.y1 &&
+            b1.y2 === b2.y2
+        );
+    }
+
     function constrain<T extends number | Date>(x: T, extent: [typeof x, typeof x]) {
         const minE = extent[0] < extent[1] ? extent[0] : extent[1];
         const maxE = extent[0] > extent[1] ? extent[0] : extent[1];
@@ -242,8 +278,12 @@
         } else {
             // draw new brush selection
             action = 'draw';
-            x1 = x2 = xScaleFn.invert(dragStart[0]);
-            y1 = y2 = yScaleFn.invert(dragStart[1]);
+            if (typeof xScaleFn.invert === 'function' && limitDimension !== 'y') {
+                x1 = x2 = xScaleFn.invert(dragStart[0]);
+            }
+            if (typeof yScaleFn.invert === 'function' && limitDimension !== 'x') {
+                y1 = y2 = yScaleFn.invert(dragStart[1]);
+            }
         }
         onbrushstart?.({ ...e, brush });
     }

package/dist/marks/CustomMark.svelte

@@ -5,6 +5,7 @@
 <script lang="ts" generics="Datum extends DataRecord">
     interface CustomMarkProps extends BaseMarkProps<Datum> {
         data?: Datum[];
+        type?: string;
         x?: ChannelAccessor<Datum>;
         x1?: ChannelAccessor<Datum>;
         x2?: ChannelAccessor<Datum>;
@@ -18,7 +19,6 @@
         marks?: Snippet<[{ records: ScaledDataRecord<Datum>[]; usedScales: UsedScales }]>;
     }
 
-    import { getContext } from 'svelte';
     import type {
         PlotContext,
         DataRecord,
@@ -33,7 +33,13 @@
 
     import Mark from '../Mark.svelte';
 
-    let { data = [{} as Datum], mark, marks, ...options }: CustomMarkProps = $props();
+    let {
+        data = [{} as Datum],
+        mark,
+        type = 'custom',
+        marks,
+        ...options
+    }: CustomMarkProps = $props();
 
     const args = $derived(sort({ data, ...options })) as CustomMarkProps;
 
@@ -53,7 +59,7 @@
     ];
 </script>
 
-<Mark type="custom" required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
+<Mark {type} required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
     {#snippet children({ scaledData, usedScales })}
         {#if marks}
             {@render marks({ records: scaledData.filter((d) => d.valid), usedScales })}

package/dist/marks/Image.svelte

@@ -0,0 +1,76 @@
+<!--
+    @component 
+    For showing images positioned at x/y coordinates
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ImageMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        data: Datum[];
+        x: ChannelAccessor<Datum>;
+        y: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        width?: ConstantAccessor<number, Datum>;
+        height?: ConstantAccessor<number, Datum>;
+        src?: ConstantAccessor<string, Datum>;
+        title?: ConstantAccessor<string, Datum>;
+        preserveAspectRatio?: string;
+        // canvas?: boolean;
+        imageClass?: ConstantAccessor<string, Datum>;
+    }
+
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        ConstantAccessor,
+        DataRecord,
+        LinkableMarkProps
+    } from '../types';
+    import { resolveProp } from '../helpers/resolve';
+    import CustomMark from './CustomMark.svelte';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { sort } from '../transforms';
+    import Anchor from './helpers/Anchor.svelte';
+
+    let markProps: ImageMarkProps = $props();
+
+    const DEFAULTS: Partial<ImageMarkProps> = {
+        width: 20,
+        preserveAspectRatio: 'xMidYMin slice',
+        ...getPlotDefaults().image
+    };
+
+    const {
+        data = [{} as Datum],
+        width,
+        height,
+        src,
+        title,
+        imageClass,
+        preserveAspectRatio,
+        ...options
+    }: ImageMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
+
+    const args = $derived(sort({ data, ...options }));
+</script>
+
+<CustomMark type="image" {...args}>
+    {#snippet mark({ record, index, usedScales })}
+        {@const w = record.r !== undefined ? record.r * 2 : resolveProp(width, record.datum, 20)}
+        {@const h =
+            record.r !== undefined ? record.r * 2 : resolveProp(height || width, record.datum, 20)}
+        <Anchor {options} datum={record.datum}>
+            <image
+                class={resolveProp(imageClass, record.datum, null)}
+                href={resolveProp(src, record.datum, '')}
+                x={record.x - w * 0.5}
+                y={record.y - h * 0.5}
+                {preserveAspectRatio}
+                clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
+                width={w}
+                height={h}
+                >{#if title}<title>{resolveProp(title, record.datum, '')}</title>{/if}</image>
+        </Anchor>
+    {/snippet}
+</CustomMark>

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

@@ -0,0 +1,19 @@
+import type { DataRecord } from '../types';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): any;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** For showing images positioned at x/y coordinates */
+declare const Image: $$IsomorphicComponent;
+type Image<Datum extends DataRecord> = InstanceType<typeof Image<Datum>>;
+export default Image;

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

@@ -76,7 +76,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
          * the font size of the text
          */
         fontFamily?: ConstantAccessor<CSS.Property.FontFamily, Datum>;
-        fontSize?: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "small" | "medium" | "large" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize?: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "small" | "math" | "large" | "medium" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
         fontWeight?: ConstantAccessor<CSS.Property.FontWeight, Datum>;
         fontStyle?: ConstantAccessor<CSS.Property.FontStyle, Datum>;
         fontVariant?: ConstantAccessor<CSS.Property.FontVariant, Datum>;

package/dist/marks/WaffleX.svelte

@@ -7,7 +7,8 @@
         DataRecord,
         BaseMarkProps,
         ChannelAccessor,
-        LinkableMarkProps
+        LinkableMarkProps,
+        BorderRadius
     } from '../types';
     import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
     import { getPlotDefaults } from '../hooks/plotDefaults';
@@ -15,11 +16,13 @@
     import type { StackOptions } from '../transforms/stack';
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
+    import { resolveProp, resolveStyles } from '../helpers/resolve';
+    import { roundedRect } from '../helpers/roundedRect';
 
     interface WaffleXMarkProps
         extends BaseMarkProps<Datum>,
             LinkableMarkProps<Datum>,
-            WaffleOptions {
+            WaffleOptions<Datum> {
         data?: Datum[];
         /**
          * bound to a quantitative scale
@@ -52,6 +55,7 @@
         data = [{} as Datum],
         class: className = null,
         stack,
+        symbol = null,
         unit,
         ...options
     }: WaffleXMarkProps = $derived({ ...DEFAULTS, ...markProps });
@@ -79,10 +83,30 @@
     {#snippet children({ mark, usedScales, scaledData })}
         {@const wafflePoly = wafflePolygon('x', args, plot.scales)}
         {#each scaledData as d, i (i)}
+            {@const borderRadius = resolveProp(args.borderRadius, d?.datum, 0) as BorderRadius}
+            {@const hasBorderRadius =
+                (typeof borderRadius === 'number' && borderRadius > 0) ||
+                (typeof borderRadius === 'object' &&
+                    Math.max(
+                        borderRadius.topRight ?? 0,
+                        borderRadius.bottomRight ?? 0,
+                        borderRadius.topLeft ?? 0,
+                        borderRadius.bottomLeft ?? 0
+                    ) > 0)}
+            {@const [style, styleClass] = resolveStyles(plot, d, options, 'fill', usedScales)}
             {@const { pattern, rect, path } = wafflePoly(d)}
-            <g>
+            <g class={['waffle-x', className]}>
                 <pattern {...pattern}>
-                    <rect {...rect} fill="currentColor" />
+                    {#if symbol}
+                        {@render symbol(rect)}
+                    {:else if hasBorderRadius}
+                        <path
+                            d={roundedRect(rect.x, rect.y, rect.width, rect.height, borderRadius)}
+                            {style}
+                            class={styleClass} />
+                    {:else}
+                        <rect {style} class={styleClass} {...rect} />
+                    {/if}
                 </pattern>
                 <path {...path} />
             </g>

package/dist/marks/WaffleY.svelte

@@ -8,18 +8,22 @@
         ChannelAccessor,
         BaseMarkProps,
         LinkableMarkProps,
-        PlotContext
+        PlotContext,
+        BorderRadius
     } from '../types';
     import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
     import { getPlotDefaults } from '../hooks/plotDefaults';
     import { getContext } from 'svelte';
     import { intervalY, recordizeY, sort, stackY } from '../transforms';
     import Mark from '../Mark.svelte';
+    import { resolveProp, resolveStyles } from '../helpers/resolve';
+    import { roundedRect } from '../helpers/roundedRect';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
 
     interface WaffleYMarkProps
         extends BaseMarkProps<Datum>,
             LinkableMarkProps<Datum>,
-            WaffleOptions {
+            WaffleOptions<Datum> {
         data?: Datum[];
         /**
          * bound to a babd scale
@@ -37,11 +41,9 @@
          * bound to a quantitative scale
          */
         y2?: ChannelAccessor<Datum>;
-        stack?: StackOptions;
     }
 
     const DEFAULTS = {
-        fill: 'currentColor',
         ...getPlotDefaults().waffle,
         ...getPlotDefaults().waffleY
     };
@@ -52,6 +54,7 @@
         data = [{} as Datum],
         class: className = null,
         stack,
+        symbol = null,
         ...options
     }: WaffleYMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
@@ -68,8 +71,6 @@
             stack
         )
     );
-
-    $inspect({ args, options });
 </script>
 
 <Mark
@@ -80,10 +81,36 @@
     {#snippet children({ mark, usedScales, scaledData })}
         {@const wafflePoly = wafflePolygon('y', args, plot.scales)}
         {#each scaledData as d, i (i)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                d,
+                args,
+                args.stroke && !args.fill ? 'stroke' : 'fill',
+                usedScales
+            )}
+            {@const borderRadius = resolveProp(args.borderRadius, d?.datum, 0) as BorderRadius}
+            {@const hasBorderRadius =
+                (typeof borderRadius === 'number' && borderRadius > 0) ||
+                (typeof borderRadius === 'object' &&
+                    Math.max(
+                        borderRadius.topRight ?? 0,
+                        borderRadius.bottomRight ?? 0,
+                        borderRadius.topLeft ?? 0,
+                        borderRadius.bottomLeft ?? 0
+                    ) > 0)}
             {@const { pattern, rect, path } = wafflePoly(d)}
-            <g>
+            <g class={['waffle-y', className]}>
                 <pattern {...pattern}>
-                    <rect {...rect} fill="currentColor" />
+                    {#if symbol}
+                        {@render symbol({ ...rect, style, styleClass, datum: d.datum })}
+                    {:else if hasBorderRadius}
+                        <path
+                            d={roundedRect(rect.x, rect.y, rect.width, rect.height, borderRadius)}
+                            {style}
+                            class={styleClass} />
+                    {:else}
+                        <rect {style} class={styleClass} {...rect} />
+                    {/if}
                 </pattern>
                 <path {...path} />
             </g>

package/dist/marks/helpers/Anchor.svelte

@@ -1,7 +1,21 @@
-<script>
+<script lang="ts" generics="Datum extends Record<string, any>">
     import { resolveProp } from '../../helpers/resolve.js';
+    import type { ConstantAccessor } from '../../types';
 
-    let { datum = {}, options = {}, children } = $props();
+    interface AnchorProps {
+        datum?: Datum;
+        options?: {
+            href?: ConstantAccessor<string, Datum>;
+            target?: ConstantAccessor<string, Datum>;
+            rel?: ConstantAccessor<string, Datum>;
+            type?: ConstantAccessor<string, Datum>;
+            download?: ConstantAccessor<string, Datum>;
+            [key: string]: any;
+        };
+        children?: () => any;
+    }
+
+    let { datum = {}, options = {}, children }: AnchorProps = $props();
 
     const href = $derived(resolveProp(options.href, datum, null));
     const target = $derived(resolveProp(options.target, datum, null));

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

@@ -1,15 +1,29 @@
+import type { ConstantAccessor } from '../../types';
+declare class __sveltets_Render<Datum extends Record<string, any>> {
+    props(): {
+        datum?: Datum | undefined;
+        options?: {
+            [key: string]: any;
+            href?: ConstantAccessor<string, Datum_1>;
+            target?: ConstantAccessor<string, Datum_1>;
+            rel?: ConstantAccessor<string, Datum_1>;
+            type?: ConstantAccessor<string, Datum_1>;
+            download?: ConstantAccessor<string, Datum_1>;
+        } | undefined;
+        children?: (() => any) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Anchor: $$IsomorphicComponent;
+type Anchor<Datum extends Record<string, any>> = InstanceType<typeof Anchor<Datum>>;
 export default Anchor;
-type Anchor = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const Anchor: import("svelte").Component<{
-    datum?: Record<string, any>;
-    options?: Record<string, any>;
-    children: any;
-}, {}, "">;
-type $$ComponentProps = {
-    datum?: Record<string, any>;
-    options?: Record<string, any>;
-    children: any;
-};

package/dist/marks/helpers/BaseAxisX.svelte

@@ -17,6 +17,7 @@
     import { randomId, testFilter } from '../../helpers/index.js';
     import { INDEX } from '../../constants';
     import { RAW_VALUE } from '../../transforms/recordize';
+    import wordwrap from '../../helpers/wordwrap';
 
     type BaseAxisXProps = {
         scaleFn: (d: RawValue) => number;
@@ -35,7 +36,9 @@
             dx: ConstantAccessor<number>;
             dy: ConstantAccessor<number>;
             filter: ChannelAccessor;
+            wordwrap: boolean;
             textAnchor: ConstantAccessor<'start' | 'middle' | 'end'> | 'auto';
+            removeDuplicateTicks: boolean;
         };
         text: boolean;
         plot: PlotState;
@@ -59,8 +62,21 @@
         text = true
     }: BaseAxisXProps = $props();
 
+    const isBandScale = $derived(scaleType === 'band');
+    const bandWidth = $derived(isBandScale ? scaleFn.bandwidth() : 0);
+
     function splitTick(tick: string | string[]) {
-        return Array.isArray(tick) ? tick : [tick];
+        return Array.isArray(tick)
+            ? tick
+            : typeof tick === 'string' && isBandScale && options.wordwrap !== false
+              ? wordwrap(
+                    tick,
+                    { maxLineWidth: bandWidth * 0.9 },
+                    { minCharactersPerLine: 4 },
+                    +resolveProp(tickFontSize, {}, 11),
+                    false
+                )
+              : [tick];
     }
 
     let tickRotate = $derived(plot.options.x.tickRotate || 0);
@@ -222,7 +238,9 @@
                             {:else}
                                 {#each textLines as line, i (i)}
                                     <tspan x="0" dy={i ? 12 : 0}
-                                        >{!prevTextLines || prevTextLines[i] !== line
+                                        >{!prevTextLines ||
+                                        prevTextLines[i] !== line ||
+                                        options.removeDuplicateTicks === false
                                             ? line
                                             : ''}</tspan>
                                 {/each}

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

@@ -16,7 +16,9 @@ type BaseAxisXProps = {
         dx: ConstantAccessor<number>;
         dy: ConstantAccessor<number>;
         filter: ChannelAccessor;
+        wordwrap: boolean;
         textAnchor: ConstantAccessor<'start' | 'middle' | 'end'> | 'auto';
+        removeDuplicateTicks: boolean;
     };
     text: boolean;
     plot: PlotState;

package/dist/marks/helpers/waffle.d.ts

@@ -1,6 +1,8 @@
-import type { PlotScales, ScaledDataRecord } from '../../types';
+import type { Snippet } from 'svelte';
+import type { StackOptions } from '../../transforms/stack';
+import type { BorderRadius, ConstantAccessor, PlotScales, ScaledDataRecord } from '../../types';
 type Point = [number, number];
-export type WaffleOptions = {
+export type WaffleOptions<T> = {
     /**
      * the quantity represented by each square in the waffle chart, defaults to 1
      */
@@ -17,6 +19,19 @@ export type WaffleOptions = {
      * whether to round values to avoid partial cells; defaults to false
      */
     round?: boolean;
+    stack?: StackOptions;
+    borderRadius?: ConstantAccessor<BorderRadius, T>;
+    symbol?: Snippet<[
+        {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            style: string | null;
+            styleClass: string | null;
+            datum: T;
+        }
+    ]>;
 };
 type WaffleProps = {
     pattern: {

package/dist/marks/helpers/waffle.js

@@ -66,7 +66,6 @@ export function wafflePolygon(y, options, scales) {
         const y2val = d.resolved[y2];
         const P = wafflePoints(round(y1val / unit), round(y2val / unit), multiple).map(transform);
         const c = P.pop();
-        console.log({ c, P, xv, y1val, y2val });
         const id = getPatternId();
         const pos = [d[x] + tx + mx, y0];
         return {

package/dist/marks/index.d.ts

@@ -27,12 +27,12 @@ export { default as Geo } from './Geo.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as GridX } from './GridX.svelte';
 export { default as GridY } from './GridY.svelte';
+export { default as Image } from './Image.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LineX } from './LineX.svelte';
 export { default as LineY } from './LineY.svelte';
 export { default as Link } from './Link.svelte';
 export { default as Pointer } from './Pointer.svelte';
-export { default as Vector } from './Vector.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectX } from './RectX.svelte';
 export { default as RectY } from './RectY.svelte';
@@ -45,6 +45,7 @@ export { default as Spike } from './Spike.svelte';
 export { default as Text } from './Text.svelte';
 export { default as TickX } from './TickX.svelte';
 export { default as TickY } from './TickY.svelte';
+export { default as Vector } from './Vector.svelte';
 export { default as WaffleX } from './WaffleX.svelte';
 export { default as WaffleY } from './WaffleY.svelte';
 export { default as ColorLegend } from './ColorLegend.svelte';

package/dist/marks/index.js

@@ -27,12 +27,12 @@ export { default as Geo } from './Geo.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as GridX } from './GridX.svelte';
 export { default as GridY } from './GridY.svelte';
+export { default as Image } from './Image.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LineX } from './LineX.svelte';
 export { default as LineY } from './LineY.svelte';
 export { default as Link } from './Link.svelte';
 export { default as Pointer } from './Pointer.svelte';
-export { default as Vector } from './Vector.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectX } from './RectX.svelte';
 export { default as RectY } from './RectY.svelte';
@@ -45,6 +45,7 @@ export { default as Spike } from './Spike.svelte';
 export { default as Text } from './Text.svelte';
 export { default as TickX } from './TickX.svelte';
 export { default as TickY } from './TickY.svelte';
+export { default as Vector } from './Vector.svelte';
 export { default as WaffleX } from './WaffleX.svelte';
 export { default as WaffleY } from './WaffleY.svelte';
 // HTML marks

package/dist/transforms/centroid.d.ts

@@ -1,8 +1,5 @@
 import type { DataRecord, TransformArg } from '../types/index.js';
-declare const CENTROID: unique symbol;
-type WithCentroid<T> = T & {
-    [CENTROID]: [number, number];
-};
+type WithCentroid<T> = T & {};
 export declare function geoCentroid<Datum extends DataRecord>({ data, ...options }: {
     data: Datum[];
 } & TransformArg<Datum>): TransformArg<WithCentroid<Datum>>;

package/dist/transforms/group.js

@@ -1,5 +1,5 @@
 import { groupFacetsAndZ } from '../helpers/group.js';
-import { testFilter } from '../helpers/index.js';
+import { isValid, testFilter } from '../helpers/index.js';
 import { reduceOutputs } from '../helpers/reduce.js';
 import { resolveChannel } from '../helpers/resolve.js';
 import { groups as d3Groups } from 'd3-array';
@@ -58,8 +58,12 @@ export function groupY(input, options = {}) {
 export function groupZ(input, options = {}) {
     return groupXYZ('z', input, options);
 }
+const groupDimRaw = Symbol('groupDimRaw');
 function groupXYZ(dim, { data, ...channels }, options = {}) {
-    if ((dim === 'z' ? channels.z || channels.fill || channels.stroke : channels[dim]) == null)
+    // console.log({ dim, data, channels, options });
+    if ((dim === 'z'
+        ? channels.z || channels.fill || channels.stroke || channels.fx || channels.fy
+        : channels[dim]) == null)
         throw new Error('you must provide a channel to group on ' + dim);
     const propName = options[`${dim}PropName`] != null
         ? options[`${dim}PropName`]
@@ -70,9 +74,11 @@ function groupXYZ(dim, { data, ...channels }, options = {}) {
     // group by x or y
     const groups = dim === 'z'
         ? [[null, data]]
-        : d3Groups(data.filter((d) => testFilter(d, channels)), (d) => {
-            const v = resolveChannel(dim, d, channels);
-            return interval ? interval.round(v) : v;
+        : d3Groups(data
+            .filter((d) => testFilter(d, channels))
+            .map((d) => ({ ...d, [groupDimRaw]: resolveChannel(dim, d, channels) }))
+            .filter((d) => isValid(d[groupDimRaw])), (d) => {
+            return interval ? interval.floor(d[groupDimRaw]) : d[groupDimRaw];
         });
     const newData = [];
     let newChannels = omit({ ...channels }, 'filter');

package/dist/transforms/recordize.d.ts

@@ -1,7 +1,7 @@
 import type { TransformArgsRow, TransformArgsRecord } from '../types/index.js';
-export declare const X: unique symbol;
-export declare const Y: unique symbol;
-export declare const RAW_VALUE: unique symbol;
+export declare const X: any;
+export declare const Y: any;
+export declare const RAW_VALUE: any;
 export declare function indexData<T extends object>(data: T[]): (T & {})[];
 export declare function recordizeX<T>({ data, ...channels }: TransformArgsRow<T>, { withIndex }?: {
     withIndex: boolean;

package/dist/transforms/sort.d.ts

@@ -1,6 +1,6 @@
 import type { DataRow, TransformArg } from '../types/index.js';
-export declare const SORT_KEY: unique symbol;
-export declare const IS_SORTED: unique symbol;
+export declare const SORT_KEY: any;
+export declare const IS_SORTED: any;
 export declare function sort<T>({ data, ...channels }: TransformArg<T>, options?: {
     reverse?: boolean;
 }): any;

package/dist/types/plot.d.ts

@@ -3,7 +3,7 @@ import type { ColorScheme } from './colorScheme.js';
 import type { GeoProjection } from 'd3-geo';
 import type { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, LegendScaleOptions, PlotScales, ScaleOptions, XScaleOptions, YScaleOptions } from './index.js';
 import type { Snippet } from 'svelte';
-import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Line, Link, Pointer, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Vector } from '../marks/index.js';
+import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Image, Line, Link, Pointer, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Vector } from '../marks/index.js';
 import type WaffleX from '../marks/WaffleX.svelte';
 import type WaffleY from '../marks/WaffleY.svelte';
 export type PlotState = {
@@ -232,6 +232,10 @@ export type PlotDefaults = {
     gridY: Partial<Omit<ComponentProps<typeof GridY>, IgnoreDefaults> & {
         implicit: boolean;
     }>;
+    /**
+     * default props for image marks
+     */
+    image: Partial<Omit<ComponentProps<typeof Image>, IgnoreDefaults>>;
     /**
      * default props for line marks
      */
@@ -432,8 +436,8 @@ export type PlotOptions = {
     opacity: Partial<ScaleOptions>;
     symbol: Partial<LegendScaleOptions>;
     length: Partial<ScaleOptions>;
-    fx: Partial<ScaleOptions>;
-    fy: Partial<ScaleOptions>;
+    fx: Partial<XScaleOptions>;
+    fy: Partial<YScaleOptions>;
     children: Snippet<[
         {
             width: number;

package/dist/types/scale.d.ts

@@ -106,6 +106,14 @@ export type XScaleOptions = ScaleOptions & {
     tickRotate: number;
     labelAnchor: 'auto' | 'left' | 'center' | 'right';
     tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
+    /**
+     * Enable word wrapping for axis tick labels, default true
+     */
+    wordWrap: boolean;
+    /**
+     * Remove duplicate ticks from axis, default true
+     */
+    removeDuplicateTicks: boolean;
 };
 export type YScaleOptions = ScaleOptions & {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.5.3-pr-255.0",
+    "version": "0.5.3-pr-255.1",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -57,13 +57,13 @@
         "@sveltejs/adapter-auto": "^6.1.1",
         "@sveltejs/adapter-static": "^3.0.10",
         "@sveltejs/eslint-config": "^8.3.4",
-        "@sveltejs/kit": "^2.47.3",
+        "@sveltejs/kit": "^2.48.5",
         "@sveltejs/package": "^2.5.4",
         "@sveltejs/vite-plugin-svelte": "5.1.1",
         "@sveltepress/theme-default": "^6.0.4",
         "@sveltepress/twoslash": "^1.2.2",
         "@sveltepress/vite": "^1.2.2",
-        "@testing-library/svelte": "^5.2.8",
+        "@testing-library/svelte": "^5.2.9",
         "@testing-library/user-event": "^14.6.1",
         "@types/d3-array": "^3.2.2",
         "@types/d3-color": "^3.1.3",
@@ -79,24 +79,24 @@
         "@types/geojson": "^7946.0.16",
         "@types/topojson": "^3.2.6",
         "@types/topojson-client": "^3.1.5",
-        "@typescript-eslint/eslint-plugin": "^8.46.2",
-        "@typescript-eslint/parser": "^8.46.2",
-        "csstype": "^3.1.3",
+        "@typescript-eslint/eslint-plugin": "^8.46.4",
+        "@typescript-eslint/parser": "^8.46.4",
+        "csstype": "^3.2.0",
         "d3-dsv": "^3.0.1",
         "d3-fetch": "^3.0.1",
         "d3-force": "^3.0.0",
-        "eslint": "^9.38.0",
+        "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-svelte": "3.12.5",
+        "eslint-plugin-svelte": "3.13.0",
         "jsdom": "^26.1.0",
         "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
-        "puppeteer": "^24.26.1",
+        "puppeteer": "^24.30.0",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "resize-observer-polyfill": "^1.5.1",
-        "sass": "^1.93.2",
-        "svelte-check": "^4.3.3",
+        "sass": "^1.94.0",
+        "svelte-check": "^4.3.4",
         "svelte-eslint-parser": "1.4.0",
         "svelte-highlight": "^7.9.0",
         "svg-path-parser": "^1.1.0",
@@ -107,7 +107,7 @@
         "typedoc-plugin-markdown": "^4.9.0",
         "typescript": "^5.9.3",
         "vite": "^6.4.1",
-        "vitest": "^3.2.4",
+        "vitest": "^4.0.9",
         "vitest-matchmedia-mock": "^2.0.3",
         "yoctocolors": "^2.1.2"
     },
@@ -127,9 +127,9 @@
         "d3-shape": "^3.2.0",
         "d3-time": "^3.1.0",
         "es-toolkit": "^1.41.0",
-        "fast-equals": "^5.3.2",
+        "fast-equals": "^5.3.3",
         "interval-tree-1d": "^1.0.4",
         "merge-deep": "^3.0.3",
-        "svelte": "5.43.0"
+        "svelte": "5"
     }
 }