svelteplot 0.6.0-pr-266.0 → 0.7.0-pr-269.0

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];
@@ -212,6 +218,7 @@
             resolvedData.flatMap((row) => {
                 const out: ScaledDataRecord<Datum> = {
                     datum: row.datum,
+                    resolved: row,
                     index: row[INDEX],
                     valid: true
                 };

package/dist/Plot.svelte

@@ -12,7 +12,7 @@
 <script lang="ts">
     import Plot from './core/Plot.svelte';
 
-    import type { PlotOptions } from './types/index.js';
+    import type { PlotOptions, RawValue, ScaleOptions } from './types/index.js';
 
     // implicit marks
     import AxisX from './marks/AxisX.svelte';
@@ -62,12 +62,20 @@
     const scales = $derived(
         Object.fromEntries(
             ['x', 'y', 'r', 'color', 'opacity', 'symbol', 'length', 'fx', 'fy'].map((scale) => {
-                const scaleOpts = restOptions[scale] || {};
+                const scaleOpts = maybeScaleOptions(restOptions[scale]);
                 const scaleFn = scaleOpts.scale || (scale === 'color' ? autoScaleColor : autoScale);
                 return [scale, { ...scaleOpts, scale: scaleFn }];
             })
         )
     );
+
+    function maybeScaleOptions(
+        scaleOptions: undefined | false | RawValue[] | object
+    ): Partial<ScaleOptions> | undefined {
+        if (scaleOptions === false) return { axis: false };
+        if (Array.isArray(scaleOptions)) return { domain: scaleOptions };
+        return scaleOptions || {};
+    }
 </script>
 
 {#snippet header()}

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

@@ -114,7 +114,7 @@
         class: className = '',
         css = DEFAULTS.css,
         width: fixedWidth,
-        ...initialOpts
+        ...initialOptions
     }: Partial<PlotOptions> = $props();
 
     let width = $state(DEFAULTS.initialWidth);
@@ -164,7 +164,7 @@
     );
 
     const explicitDomains = $derived(
-        new Set(SCALES.filter((scale) => !!initialOpts[scale]?.domain))
+        new Set(SCALES.filter((scale) => !!initialOptions[scale]?.domain))
     );
 
     // one-dimensional plots have different automatic margins and heights
@@ -173,12 +173,12 @@
     // construct the plot options from the user-defined options (top-level props) as well
     // as extending them from smart context-aware defaults
     const plotOptions = $derived(
-        extendPlotOptions(initialOpts, {
+        extendPlotOptions(initialOptions, {
             explicitScales,
             explicitDomains,
-            hasProjection: !!initialOpts.projection,
-            margin: initialOpts.margin,
-            inset: initialOpts.inset
+            hasProjection: !!initialOptions.projection,
+            margin: initialOptions.margin,
+            inset: initialOptions.inset
         })
     );
 
@@ -369,7 +369,7 @@
             {},
             { sortOrdinalDomains: DEFAULTS.sortOrdinalDomains },
             smartDefaultPlotOptions(opts),
-            initialOpts
+            initialOptions
         );
     }
 
@@ -614,10 +614,6 @@
         border: 0 !important;
     }
 
-    .plot-header :global(h3) {
-        font-weight: 500;
-    }
-
     .plot-footer {
         margin-bottom: 2rem;
     }

package/dist/helpers/getBaseStyles.d.ts

@@ -5,3 +5,5 @@ 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;
+export declare function getClipId(): string;
+export declare function getPatternId(): string;

package/dist/helpers/getBaseStyles.js

@@ -54,3 +54,11 @@ export function maybeFromRem(value, rootFontSize = 16) {
         ? +value.slice(0, -3) * rootFontSize
         : value;
 }
+let nextClipId = 0;
+let nextPatternId = 0;
+export function getClipId() {
+    return `svp-clip-${++nextClipId}`;
+}
+export function getPatternId() {
+    return `svp-pattern-${++nextPatternId}`;
+}

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.js

@@ -218,8 +218,8 @@ function domainFromInterval(domain, interval, name) {
     return name === 'y' ? out.toReversed() : out;
 }
 const markTypesWithBandDefault = {
-    x: new Set(['barY', 'cell', 'tickY']),
-    y: new Set(['barX', 'cell', 'tickX'])
+    x: new Set(['barY', 'cell', 'tickY', 'waffleY']),
+    y: new Set(['barX', 'cell', 'tickX', 'waffleX'])
 };
 /**
  * Infer a scale type based on the scale name, the data values mapped to it and

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/Line.svelte

@@ -139,7 +139,7 @@
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
         {#if scaledData.length > 0}
-            {@const groupedLineData = groupIndex(scaledData, groupByKey)};
+            {@const groupedLineData = groupIndex(scaledData, groupByKey)}
             {#if canvas}
                 <LineCanvas {groupedLineData} {mark} {usedScales} {linePath} {groupByKey} />
             {:else}

package/dist/marks/WaffleX.svelte

@@ -0,0 +1,115 @@
+<!--
+    @component
+    The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values.
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        LinkableMarkProps,
+        BorderRadius
+    } from '../types';
+    import { wafflePolygon, type WaffleOptions } from './helpers/waffle';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { intervalX, recordizeX, sort, stackX } from '../transforms';
+    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<Datum> {
+        data?: Datum[];
+        /**
+         * bound to a quantitative scale
+         */
+        x?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        x1?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        x2?: ChannelAccessor<Datum>;
+        /**
+         * bound to a band scale
+         */
+        y?: ChannelAccessor<Datum>;
+        stack?: StackOptions;
+    }
+
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getPlotDefaults().waffle,
+        ...getPlotDefaults().waffleX
+    };
+
+    let markProps: WaffleXMarkProps = $props();
+
+    const {
+        data = [{} as Datum],
+        class: className = null,
+        stack,
+        symbol = null,
+        unit,
+        ...options
+    }: WaffleXMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(
+        stackX(
+            intervalX(
+                // by default, sort by y channel (the ordinal labels)
+                sort(recordizeX({ data, ...options })),
+                { plot }
+            ),
+            stack
+        )
+    );
+</script>
+
+<Mark
+    type="waffleX"
+    requiredScales={{ y: ['band'] }}
+    channels={['x1', 'x2', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#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 class={['waffle-x', className]}>
+                <pattern {...pattern}>
+                    {#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>
+        {/each}
+    {/snippet}
+</Mark>

package/dist/marks/WaffleX.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']>;
+}
+/** The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values. */
+declare const WaffleX: $$IsomorphicComponent;
+type WaffleX<Datum extends DataRecord> = InstanceType<typeof WaffleX<Datum>>;
+export default WaffleX;

package/dist/marks/WaffleY.svelte

@@ -0,0 +1,119 @@
+<!--
+    @component
+    The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values.
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    import type {
+        DataRecord,
+        ChannelAccessor,
+        BaseMarkProps,
+        LinkableMarkProps,
+        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<Datum> {
+        data?: Datum[];
+        /**
+         * bound to a babd scale
+         */
+        x?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y1?: ChannelAccessor<Datum>;
+        /**
+         * bound to a quantitative scale
+         */
+        y2?: ChannelAccessor<Datum>;
+    }
+
+    const DEFAULTS = {
+        ...getPlotDefaults().waffle,
+        ...getPlotDefaults().waffleY
+    };
+
+    let markProps: WaffleYMarkProps = $props();
+
+    const {
+        data = [{} as Datum],
+        class: className = null,
+        stack,
+        symbol = null,
+        ...options
+    }: WaffleYMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(
+        stackY(
+            intervalY(
+                // by default, sort by y channel (the ordinal labels)
+                sort(recordizeY({ data, ...options })),
+                { plot }
+            ),
+            stack
+        )
+    );
+</script>
+
+<Mark
+    type="waffleY"
+    requiredScales={{ x: ['band'] }}
+    channels={['y1', 'y2', 'x', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#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 class={['waffle-y', className]}>
+                <pattern {...pattern}>
+                    {#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>
+        {/each}
+    {/snippet}
+</Mark>

package/dist/marks/WaffleY.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']>;
+}
+/** The waffleX mark lets you create waffle charts by filling a rectangular area with small squares representing data values. */
+declare const WaffleY: $$IsomorphicComponent;
+type WaffleY<Datum extends DataRecord> = InstanceType<typeof WaffleY<Datum>>;
+export default WaffleY;

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);
@@ -72,7 +88,7 @@
     // generate id used for registering margins
     const id = randomId();
 
-    const { autoMarginTop, autoMarginBottom } =
+    const { autoMarginTop, autoMarginBottom, autoMarginLeft, autoMarginRight } =
         getContext<AutoMarginStores>('svelteplot/autoMargins');
 
     let tickTextElements = $state([] as SVGTextElement[]);
@@ -109,6 +125,14 @@
         return tickObjects as ScaledDataRecord[];
     });
 
+    $effect(() => {
+        // just add some minimal horizontal margins for axis ticks
+        untrack(() => $autoMarginLeft);
+        untrack(() => $autoMarginRight);
+        $autoMarginLeft.set(id, 5);
+        $autoMarginRight.set(id, 10);
+    });
+
     $effect(() => {
         untrack(() => [$autoMarginTop, $autoMarginBottom]);
         if (!text) return;
@@ -147,6 +171,8 @@
         return () => {
             if ($autoMarginBottom.has(id)) $autoMarginBottom.delete(id);
             if ($autoMarginTop.has(id)) $autoMarginTop.delete(id);
+            if ($autoMarginLeft.has(id)) $autoMarginLeft.delete(id);
+            if ($autoMarginRight.has(id)) $autoMarginRight.delete(id);
         };
     });
 </script>
@@ -222,7 +248,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

@@ -0,0 +1,58 @@
+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<T> = {
+    /**
+     * the quantity represented by each square in the waffle chart, defaults to 1
+     */
+    unit?: number;
+    /**
+     * the number of cells per row (or column); defaults to undefined
+     */
+    multiple?: number;
+    /**
+     * the separation between adjacent cells, in pixels; defaults to 1
+     */
+    gap?: number;
+    /**
+     * 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: {
+        id: string;
+        patternUnits: 'userSpaceOnUse';
+        width: number;
+        height: number;
+    };
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    path: {
+        fill: string;
+        transform: string;
+        d: string;
+    };
+};
+export declare function wafflePolygon(y: 'x' | 'y', options: WaffleOptions, scales: PlotScales): (d: ScaledDataRecord) => WaffleProps;
+export declare function wafflePoints(i1: number, i2: number, columns: number): Point[];
+export declare function maybeRound(round: boolean | ((x: number) => number) | undefined): (x: number) => number;
+export {};

package/dist/marks/helpers/waffle.js

@@ -0,0 +1,194 @@
+// A waffle is approximately a rectangular shape, but may have one or two corner
+// cuts if the starting or ending value is not an even multiple of the number of
+// columns (the width of the waffle in cells). We can represent any waffle by
+// 8 points; below is a waffle of five columns representing the interval 2–11:
+//
+// 1-0
+// |•7-------6
+// |• • • • •|
+// 2---3• • •|
+//     4-----5
+//
+// Note that points 0 and 1 always have the same y-value, points 1 and 2 have
+// the same x-value, and so on, so we don’t need to materialize the x- and y-
+// values of all points. Also note that we can’t use the already-projected y-
+// values because these assume that y-values are distributed linearly along y
+// rather than wrapping around in columns.
+//
+// The corner points may be coincident. If the ending value is an even multiple
+// of the number of columns, say representing the interval 2–10, then points 6,
+// 7, and 0 are the same.
+//
+// 1-----0/7/6
+// |• • • • •|
+// 2---3• • •|
+//     4-----5
+//
+// Likewise if the starting value is an even multiple, say representing the
+// interval 0–10, points 2–4 are coincident.
+//
+// 1-----0/7/6
+// |• • • • •|
+// |• • • • •|
+// 4/3/2-----5
+//
+// Waffles can also represent fractional intervals (e.g., 2.4–10.1). These
+// require additional corner cuts, so the implementation below generates a few
+// more points.
+//
+import { getPatternId } from '../../helpers/getBaseStyles';
+export function wafflePolygon(y, options, scales) {
+    const x = y === 'y' ? 'x' : 'y';
+    const y1 = `${y}1`;
+    const y2 = `${y}2`;
+    const xScale = scales[x];
+    const yScale = scales[y];
+    const barwidth = xScale.fn.bandwidth();
+    const { unit = 1, gap = 1 } = options;
+    const round = maybeRound(options.round);
+    // The length of a unit along y in pixels.
+    const scale = Math.abs(yScale.fn(unit) - yScale.fn(0));
+    // The number of cells on each row (or column) of the waffle.
+    const multiple = options.multiple ?? Math.max(1, Math.floor(Math.sqrt(barwidth / scale)));
+    // The outer size of each square cell, in pixels, including the gap.
+    const cx = Math.min(barwidth / multiple, scale * multiple);
+    const cy = scale * multiple;
+    // The reference position.
+    const tx = (barwidth - multiple * cx) / 2;
+    const transform = y === 'y' ? ([x, y]) => [x * cx, -y * cy] : ([x, y]) => [y * cy, x * cx];
+    // const mx = typeof x0 === 'function' ? (i) => x0(i) - barwidth / 2 : () => x0;
+    const [ix, iy] = y === 'y' ? [0, 1] : [1, 0];
+    const y0 = yScale.fn(0);
+    const mx = -barwidth / 2;
+    return (d) => {
+        const y1val = d.resolved[y1];
+        const y2val = d.resolved[y2];
+        const P = wafflePoints(round(y1val / unit), round(y2val / unit), multiple).map(transform);
+        P.pop();
+        const id = getPatternId();
+        const pos = [d[x] + tx + mx, y0];
+        return {
+            pattern: {
+                id,
+                patternUnits: 'userSpaceOnUse',
+                width: cx,
+                height: cy
+            },
+            rect: {
+                x: gap / 2,
+                y: gap / 2,
+                width: cx - gap,
+                height: cy - gap
+            },
+            path: {
+                fill: `url(#${id})`,
+                transform: `translate(${pos[ix]},${pos[iy]})`,
+                d: `M${P.join('L')}Z`
+            }
+        };
+        // return `M${P.join('L')}Z`;
+    };
+    // const points = wafflePoints(i1, i2, columns);
+    // return dimension === 'x' ? points : points.map(([x, y]: Point): Point => [y, x]);
+}
+export function wafflePoints(i1, i2, columns) {
+    if (i2 < i1)
+        return wafflePoints(i2, i1, columns); // ensure i1 <= i2
+    if (i1 < 0)
+        return wafflePointsOffset(i1, i2, columns, Math.ceil(-Math.min(i1, i2) / columns)); // ensure i1 >= 0
+    const x1f = Math.floor(i1 % columns);
+    const x1c = Math.ceil(i1 % columns);
+    const x2f = Math.floor(i2 % columns);
+    const x2c = Math.ceil(i2 % columns);
+    const y1f = Math.floor(i1 / columns);
+    const y1c = Math.ceil(i1 / columns);
+    const y2f = Math.floor(i2 / columns);
+    const y2c = Math.ceil(i2 / columns);
+    const points = [];
+    if (y2c > y1c)
+        points.push([0, y1c]);
+    points.push([x1f, y1c], [x1f, y1f + (i1 % 1)], [x1c, y1f + (i1 % 1)]);
+    if (!(i1 % columns > columns - 1)) {
+        points.push([x1c, y1f]);
+        if (y2f > y1f)
+            points.push([columns, y1f]);
+    }
+    if (y2f > y1f)
+        points.push([columns, y2f]);
+    points.push([x2c, y2f], [x2c, y2f + (i2 % 1)], [x2f, y2f + (i2 % 1)]);
+    if (!(i2 % columns < 1)) {
+        points.push([x2f, y2c]);
+        if (y2c > y1c)
+            points.push([0, y2c]);
+    }
+    points.push(waffleCentroid(i1, i2, columns));
+    return points;
+}
+/**
+ * Compute waffle points when indices start in negative rows by applying a row offset.
+ * - Shifts both indices down by `k` rows (adding `k * columns`) so they are non-negative,
+ *   delegates to `wafflePoints`, then translates the resulting points back up by `k` on y.
+ * - `k` is the number of rows of vertical offset applied.
+ */
+function wafflePointsOffset(i1, i2, columns, k) {
+    return wafflePoints(i1 + k * columns, i2 + k * columns, columns).map(([x, y]) => [x, y - k]);
+}
+/**
+ * Centroid of the waffle region representing the interval [i1, i2).
+ * Chooses a strategy based on how many rows the interval spans:
+ * - Single row: delegate to `waffleRowCentroid`.
+ * - Two rows: if the projected columns overlap, return the midpoint of the overlap;
+ *   otherwise, return the centroid of the larger partial row.
+ * - >= 3 rows: return the center column and halfway between the middle rows.
+ */
+function waffleCentroid(i1, i2, columns) {
+    const r = Math.floor(i2 / columns) - Math.floor(i1 / columns);
+    return r === 0
+        ? // Single row
+            waffleRowCentroid(i1, i2, columns)
+        : r === 1
+            ? // Two incomplete rows; use the midpoint of their overlap if any, otherwise the larger row
+                Math.floor(i2 % columns) > Math.ceil(i1 % columns)
+                    ? [(Math.floor(i2 % columns) + Math.ceil(i1 % columns)) / 2, Math.floor(i2 / columns)]
+                    : i2 % columns > columns - (i1 % columns)
+                        ? waffleRowCentroid(i2 - (i2 % columns), i2, columns)
+                        : waffleRowCentroid(i1, columns * Math.ceil(i1 / columns), columns)
+            : // At least one full row; take the midpoint of all the rows that include the middle
+                [columns / 2, (Math.round(i1 / columns) + Math.round(i2 / columns)) / 2];
+}
+/**
+ * Centroid of a waffle segment constrained to a single row.
+ * Cases:
+ * - c === 0: both endpoints fall into the same cell; center on x, average fractional y.
+ * - c === 1: two adjacent partial cells; use the overlap center if > 0.5 cell,
+ *   otherwise the center of the larger partial cell.
+ * - c >= 2: at least one full cell between; x is the midpoint of full cells,
+ *   y is the row center (0.5) if there’s a full cell spanned, otherwise average fractional y.
+ */
+function waffleRowCentroid(i1, i2, columns) {
+    const c = Math.floor(i2) - Math.floor(i1);
+    return c === 0
+        ? // Single cell
+            [Math.floor(i1 % columns) + 0.5, Math.floor(i1 / columns) + (((i1 + i2) / 2) % 1)]
+        : c === 1
+            ? // Two incomplete cells; use the overlap if large enough, otherwise use the largest
+                (i2 % 1) - (i1 % 1) > 0.5
+                    ? [Math.ceil(i1 % columns), Math.floor(i2 / columns) + ((i1 % 1) + (i2 % 1)) / 2]
+                    : i2 % 1 > 1 - (i1 % 1)
+                        ? [Math.floor(i2 % columns) + 0.5, Math.floor(i2 / columns) + (i2 % 1) / 2]
+                        : [Math.floor(i1 % columns) + 0.5, Math.floor(i1 / columns) + (1 + (i1 % 1)) / 2]
+            : // At least one full cell; take the midpoint
+                [
+                    Math.ceil(i1 % columns) + Math.ceil(Math.floor(i2) - Math.ceil(i1)) / 2,
+                    Math.floor(i1 / columns) + (i2 >= 1 + i1 ? 0.5 : ((i1 + i2) / 2) % 1)
+                ];
+}
+export function maybeRound(round) {
+    if (round === undefined || round === false)
+        return Number;
+    if (round === true)
+        return Math.round;
+    if (typeof round !== 'function')
+        throw new Error(`invalid round: ${round}`);
+    return round;
+}

package/dist/marks/index.d.ts

@@ -33,7 +33,6 @@ 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';
@@ -46,6 +45,9 @@ 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';
 export { default as HTMLTooltip } from './HTMLTooltip.svelte';
 export { default as SymbolLegend } from './SymbolLegend.svelte';

package/dist/marks/index.js

@@ -33,7 +33,6 @@ 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';
@@ -46,6 +45,9 @@ 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
 export { default as ColorLegend } from './ColorLegend.svelte';
 export { default as HTMLTooltip } from './HTMLTooltip.svelte';

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/types/data.d.ts

@@ -11,6 +11,7 @@ export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<{
     dx: number;
     dy: number;
     datum: DataRecord<T>;
+    resolved: ResolvedDataRecord<T>;
     valid: Boolean;
     index: number;
 };

package/dist/types/mark.d.ts

@@ -6,7 +6,7 @@ export type Mark<T> = {
     data: DataRecord<T>[];
     options: T;
 };
-export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
+export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'waffleX' | 'waffleY';
 export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontFamily' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'letterSpacing' | 'wordSpacing' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'textTransform' | 'textDecoration' | 'width';
 import type { MouseEventHandler } from 'svelte/elements';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';

package/dist/types/plot.d.ts

@@ -1,9 +1,11 @@
 import type { ComponentProps } from 'svelte';
 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 { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, LegendScaleOptions, PlotScales, RawValue, 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, 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 = {
     width: number;
     height: number;
@@ -298,6 +300,18 @@ export type PlotDefaults = {
      * default props for vector marks
      */
     vector: Partial<Omit<ComponentProps<typeof Vector>, IgnoreDefaults>>;
+    /**
+     * default props for waffle marks, applied to both waffleX and waffleY marks
+     */
+    waffle: Partial<Omit<ComponentProps<typeof WaffleX>, IgnoreDefaults>>;
+    /**
+     * default props for waffleX marks
+     */
+    waffleX: Partial<Omit<ComponentProps<typeof WaffleX>, IgnoreDefaults>>;
+    /**
+     * default props for waffleY marks
+     */
+    waffleY: Partial<Omit<ComponentProps<typeof WaffleY>, IgnoreDefaults>>;
 };
 export type PlotOptions = {
     /**
@@ -409,11 +423,11 @@ export type PlotOptions = {
     /**
      * Options for the shared x scale.
      */
-    x: Partial<XScaleOptions>;
+    x: Partial<XScaleOptions> | false | RawValue[];
     /**
      * Options for the shared y scale
      */
-    y: Partial<YScaleOptions>;
+    y: Partial<YScaleOptions> | false | RawValue[];
     /**
      * Options for the shared radius scale
      */
@@ -422,8 +436,8 @@ export type PlotOptions = {
     opacity: Partial<ScaleOptions>;
     symbol: Partial<LegendScaleOptions>;
     length: Partial<ScaleOptions>;
-    fx: Partial<ScaleOptions>;
-    fy: Partial<ScaleOptions>;
+    fx: Partial<XScaleOptions> | false | RawValue[];
+    fy: Partial<YScaleOptions> | false | RawValue[];
     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.6.0-pr-266.0",
+    "version": "0.7.0-pr-269.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -54,7 +54,7 @@
     "devDependencies": {
         "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
         "@emotion/css": "^11.13.5",
-        "@sveltejs/adapter-auto": "^6.1.1",
+        "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/adapter-static": "^3.0.10",
         "@sveltejs/eslint-config": "^8.3.4",
         "@sveltejs/kit": "^2.48.5",
@@ -81,14 +81,14 @@
         "@types/topojson-client": "^3.1.5",
         "@typescript-eslint/eslint-plugin": "^8.46.4",
         "@typescript-eslint/parser": "^8.46.4",
-        "csstype": "^3.2.0",
+        "csstype": "^3.2.1",
         "d3-dsv": "^3.0.1",
         "d3-fetch": "^3.0.1",
         "d3-force": "^3.0.0",
         "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-svelte": "3.13.0",
-        "jsdom": "^26.1.0",
+        "jsdom": "^27.2.0",
         "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
         "puppeteer": "^24.30.0",