svelteplot 0.5.3-pr-255.0 → 0.5.3-pr-255.2

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/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,22 @@
     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 || {};
+    }
+
+    $inspect({ scales });
 </script>
 
 {#snippet header()}

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

@@ -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/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;