svelteplot 0.2.6-next.4 → 0.2.6

package/dist/marks/RuleY.svelte

@@ -1,3 +1,18 @@
+<!-- @component
+    Renders horizontal rule lines at specified y positions with customizable horizontal range
+-->
+<script module lang="ts">
+    export type RuleYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data: DataRecord[];
+        y?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        inset?: ConstantAccessor<number>;
+        insetLeft?: ConstantAccessor<number>;
+        insetRight?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
@@ -12,18 +27,6 @@
         ChannelAccessor
     } from '../types.js';
 
-    type RuleYMarkProps = BaseMarkProps & {
-        data: DataRecord[];
-        y?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        inset?: ConstantAccessor<number>;
-        insetLeft?: ConstantAccessor<number>;
-        insetRight?: ConstantAccessor<number>;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
-    };
-
     let { data = [{}], class: className = null, ...options }: RuleYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
@@ -34,7 +37,7 @@
 <Mark type="ruleY" channels={['y', 'x1', 'x2', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
     {#snippet children({ scaledData, usedScales })}
         <GroupMultiple class="rule-y {className || ''}" length={className ? 2 : args.data.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {@const inset = resolveProp(args.inset, d.datum, 0)}
                 {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
                 {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}

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

@@ -1,5 +1,4 @@
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
-type RuleYMarkProps = BaseMarkProps & {
+export type RuleYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
     data: DataRecord[];
     y?: ChannelAccessor;
     x1?: ChannelAccessor;
@@ -7,9 +6,9 @@ type RuleYMarkProps = BaseMarkProps & {
     inset?: ConstantAccessor<number>;
     insetLeft?: ConstantAccessor<number>;
     insetRight?: ConstantAccessor<number>;
-    dx?: ConstantAccessor<number>;
-    dy?: ConstantAccessor<number>;
 };
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+/** Renders horizontal rule lines at specified y positions with customizable horizontal range */
 declare const RuleY: import("svelte").Component<RuleYMarkProps, {}, "">;
 type RuleY = ReturnType<typeof RuleY>;
 export default RuleY;

package/dist/marks/Sphere.svelte

@@ -1,8 +1,15 @@
-<script lang="ts">
+<!-- @component
+    Geo mark with Sphere geometry object  -->
+
+<script module lang="ts">
     import { type BaseMarkProps } from '../types.js';
+    export type SphereMarkProps = BaseMarkProps;
+</script>
+
+<script lang="ts">
     import Geo from './Geo.svelte';
 
-    let { ...args }: BaseMarkProps = $props();
+    let { ...args }: SphereMarkProps = $props();
 </script>
 
 <Geo data={[{ type: 'Sphere' }]} {...args} geoType="sphere" />

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

@@ -1,3 +1,6 @@
+import { type BaseMarkProps } from '../types.js';
+export type SphereMarkProps = BaseMarkProps;
+/** Geo mark with Sphere geometry object */
 declare const Sphere: import("svelte").Component<Partial<{
     filter?: import("../types.js").ConstantAccessor<boolean>;
     facet?: "auto" | "include" | "exclude";
@@ -51,10 +54,7 @@ declare const Sphere: import("svelte").Component<Partial<{
     ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
     oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
     onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    title: import("../types.js").ConstantAccessor<string>;
-    href: import("../types.js").ConstantAccessor<string>;
-    target: import("../types.js").ConstantAccessor<"_self" | "_blank" | string>;
-    class: string;
+    class: string | null;
     cursor: import("../types.js").ConstantAccessor<import("csstype").Property.Cursor>;
 }>, {}, "">;
 type Sphere = ReturnType<typeof Sphere>;

package/dist/marks/Spike.svelte

@@ -1,6 +1,14 @@
+<!-- 
+    @component
+    Wrapper around the vector mark with presets suitable for spike maps 
+-->
+<script module lang="ts">
+    export type SpikeMarkProps = VectorMarkProps;
+</script>
+
 <script lang="ts">
     import Vector, { type VectorMarkProps } from './Vector.svelte';
-    let { data = [{}], ...options }: VectorMarkProps = $props();
+    let { data = [{}], ...options }: SpikeMarkProps = $props();
 </script>
 
 <Vector

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

@@ -1,4 +1,6 @@
+export type SpikeMarkProps = VectorMarkProps;
 import { type VectorMarkProps } from './Vector.svelte';
+/** Wrapper around the vector mark with presets suitable for spike maps */
 declare const Spike: import("svelte").Component<VectorMarkProps, {}, "">;
 type Spike = ReturnType<typeof Spike>;
 export default Spike;

package/dist/marks/SymbolLegend.svelte

@@ -19,7 +19,7 @@
 
 {#if plot.scales.color.manualActiveMarks > 0}
     <div class="symbol-legend">
-        {#each plot.scales.color.domain as value}
+        {#each plot.scales.color.domain as value (value)}
             {@const symbolV = plot.scales.symbol.fn(value)}
             {@const symbolType = maybeSymbol(symbolV)}
             {@const color = plot.colorSymbolRedundant

package/dist/marks/Text.svelte

@@ -1,26 +1,13 @@
-<script lang="ts">
-    import { getContext, type Snippet } from 'svelte';
-    import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import type {
-        PlotContext,
-        DataRecord,
-        BaseMarkProps,
-        ConstantAccessor,
-        ChannelAccessor
-    } from '../types.js';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import Mark from '../Mark.svelte';
-    import { sort } from '../index.js';
-
-    type TextMarkProps = BaseMarkProps & {
+<!--
+    @component
+    Useful for adding SVG text labels to your plot.
+-->
+<script module lang="ts">
+    export type TextMarkProps = BaseMarkProps & {
         data: DataRecord[];
         x: ChannelAccessor;
         y: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
         children?: Snippet;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
         text: ConstantAccessor<string>;
         title?: ConstantAccessor<string>;
         /**
@@ -42,6 +29,21 @@
             | 'bottom-right'
         >;
     };
+</script>
+
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor
+    } from '../types.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import Mark from '../Mark.svelte';
+    import { sort } from '../index.js';
 
     let { data = [{}], class: className = null, ...options }: TextMarkProps = $props();
 
@@ -78,7 +80,7 @@
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
         <GroupMultiple class="text {className || null}" length={className ? 2 : args.data.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#if d.valid}
                     {@const title = resolveProp(args.title, d.datum, '')}
                     {@const frameAnchor = resolveProp(args.frameAnchor, d.datum)}
@@ -148,20 +150,17 @@
                         <text
                             class={[textClassName]}
                             dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                            transform="translate({[
-                                Math.round(x + dx),
-                                Math.round(
-                                    y +
-                                        dy -
-                                        (lineAnchor === 'bottom'
-                                            ? textLines.length - 1
-                                            : lineAnchor === 'middle'
-                                              ? (textLines.length - 1) * 0.5
-                                              : 0) *
-                                            fontSize
-                                )
-                            ]})"
-                            >{#each textLines as line, l}<tspan
+                            transform="translate({Math.round(x + dx)},{Math.round(
+                                y +
+                                    dy -
+                                    (lineAnchor === 'bottom'
+                                        ? textLines.length - 1
+                                        : lineAnchor === 'middle'
+                                          ? (textLines.length - 1) * 0.5
+                                          : 0) *
+                                        fontSize
+                            )})"
+                            >{#each textLines as line, l (l)}<tspan
                                     x="0"
                                     dy={l ? fontSize : 0}
                                     class={styleClass}
@@ -172,7 +171,7 @@
                         <text
                             class={[textClassName, styleClass]}
                             dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                            transform="translate({[Math.round(x + dx), Math.round(y + dy)]})"
+                            transform="translate({Math.round(x + dx)},{Math.round(y + dy)})"
                             {style}
                             >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
                     {/if}

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

@@ -1,14 +1,8 @@
-import { type Snippet } from 'svelte';
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
-type TextMarkProps = BaseMarkProps & {
+export type TextMarkProps = BaseMarkProps & {
     data: DataRecord[];
     x: ChannelAccessor;
     y: ChannelAccessor;
-    fill?: ChannelAccessor;
-    stroke?: ChannelAccessor;
     children?: Snippet;
-    dx?: ConstantAccessor<number>;
-    dy?: ConstantAccessor<number>;
     text: ConstantAccessor<string>;
     title?: ConstantAccessor<string>;
     /**
@@ -21,6 +15,9 @@ type TextMarkProps = BaseMarkProps & {
     lineAnchor?: ConstantAccessor<'bottom' | 'top' | 'middle'>;
     frameAnchor?: ConstantAccessor<'bottom' | 'top' | 'left' | 'right' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right'>;
 };
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+/** Useful for adding SVG text labels to your plot. */
 declare const Text: import("svelte").Component<TextMarkProps, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/marks/TickX.svelte

@@ -1,3 +1,27 @@
+<!-- 
+    @component 
+    The TickX mark is useful for showing one-dimensional distributions along the x axis. The y axis must be a band scale.
+-->
+<script module lang="ts">
+    export type TickXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data: DataRow[];
+        /**
+         * the horizontal position; bound to the x scale
+         */
+        x?: ChannelAccessor;
+        /**
+         * the vertical position; bound to the y scale, which must be band. If the y channel
+         * is not specified, the tick will span the full vertical extent of the frame.
+         */
+        y?: ChannelAccessor;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
@@ -17,25 +41,6 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    type TickXMarkProps = BaseMarkProps & {
-        data: DataRow[];
-        /**
-         * the horizontal position; bound to the x scale
-         */
-        x?: ChannelAccessor;
-        /**
-         * the vertical position; bound to the y scale, which must be band. If the y channel
-         * is not specified, the tick will span the full vertical extent of the frame.
-         */
-        y?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        /**
-         * if ticks are used on a non-bandwidth scale, this will determine the
-         * length of the tick. Defaults to 10 pixel
-         */
-        tickLength?: ConstantAccessor<number>;
-    };
-
     let { data = [{}], ...options }: TickXMarkProps = $props();
 
     let args = $derived(recordizeX({ data, ...options }, { withIndex: false }));
@@ -47,7 +52,7 @@
 <Mark type="tickX" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
     {#snippet children({ mark, usedScales })}
         <g class="tick-x">
-            {#each args.data as datum}
+            {#each args.data as datum, i (i)}
                 {#if testFacet(datum, mark.options) && testFilter(datum, args)}
                     {@const x_ = resolveChannel('x', datum, args)}
                     {@const y_ = resolveChannel('y', datum, args)}

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

@@ -1,5 +1,4 @@
-import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
-type TickXMarkProps = BaseMarkProps & {
+export type TickXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
     data: DataRow[];
     /**
      * the horizontal position; bound to the x scale
@@ -10,13 +9,14 @@ type TickXMarkProps = BaseMarkProps & {
      * is not specified, the tick will span the full vertical extent of the frame.
      */
     y?: ChannelAccessor;
-    stroke?: ChannelAccessor;
     /**
      * if ticks are used on a non-bandwidth scale, this will determine the
      * length of the tick. Defaults to 10 pixel
      */
     tickLength?: ConstantAccessor<number>;
 };
+import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
+/** The TickX mark is useful for showing one-dimensional distributions along the x axis. The y axis must be a band scale. */
 declare const TickX: import("svelte").Component<TickXMarkProps, {}, "">;
 type TickX = ReturnType<typeof TickX>;
 export default TickX;

package/dist/marks/TickY.svelte

@@ -1,3 +1,27 @@
+<!-- 
+    @component 
+    The TickY mark is useful for showing one-dimensional distributions along the y axis. The x axis must be a band scale.
+-->
+<script module lang="ts">
+    export type TickYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
+        data: DataRow[];
+        /**
+         * the vertical position; bound to the x scale
+         */
+        y?: ChannelAccessor;
+        /**
+         * the horizontal position; bound to the x scale, which must be band. If the x channel
+         * is not specified, the tick will span the full horizontal extent of the frame.
+         */
+        x?: ChannelAccessor;
+        /**
+         * if ticks are used on a non-bandwidth scale, this will determine the
+         * length of the tick. Defaults to 10 pixel
+         */
+        tickLength?: ConstantAccessor<number>;
+    };
+</script>
+
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
@@ -18,25 +42,6 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    type TickYMarkProps = BaseMarkProps & {
-        data: DataRow[];
-        /**
-         * the vertical position; bound to the x scale
-         */
-        y?: ChannelAccessor;
-        /**
-         * the horizontal position; bound to the x scale, which must be band. If the x channel
-         * is not specified, the tick will span the full horizontal extent of the frame.
-         */
-        x?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        /**
-         * if ticks are used on a non-bandwidth scale, this will determine the
-         * length of the tick. Defaults to 10 pixel
-         */
-        tickLength?: ConstantAccessor<number>;
-    };
-
     let { data = [{}], ...options }: TickYMarkProps = $props();
 
     let args = $derived(recordizeY({ data, ...options }, { withIndex: false }));
@@ -48,7 +53,7 @@
 <Mark type="tickY" channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']} {...args}>
     {#snippet children({ mark, usedScales })}
         <g class="tick-y">
-            {#each args.data as datum}
+            {#each args.data as datum, i (i)}
                 {#if testFacet(datum, mark.options) && testFilter(datum, args)}
                     {@const y_ = resolveChannel('y', datum, args)}
                     {@const x_ = resolveChannel('x', datum, args)}

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

@@ -1,5 +1,4 @@
-import type { BaseMarkProps, ChannelAccessor, DataRow, ConstantAccessor } from '../types.js';
-type TickYMarkProps = BaseMarkProps & {
+export type TickYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
     data: DataRow[];
     /**
      * the vertical position; bound to the x scale
@@ -10,13 +9,14 @@ type TickYMarkProps = BaseMarkProps & {
      * is not specified, the tick will span the full horizontal extent of the frame.
      */
     x?: ChannelAccessor;
-    stroke?: ChannelAccessor;
     /**
      * if ticks are used on a non-bandwidth scale, this will determine the
      * length of the tick. Defaults to 10 pixel
      */
     tickLength?: ConstantAccessor<number>;
 };
+import type { BaseMarkProps, ChannelAccessor, DataRow, ConstantAccessor } from '../types.js';
+/** The TickY mark is useful for showing one-dimensional distributions along the y axis. The x axis must be a band scale. */
 declare const TickY: import("svelte").Component<TickYMarkProps, {}, "">;
 type TickY = ReturnType<typeof TickY>;
 export default TickY;

package/dist/marks/Vector.svelte

@@ -1,3 +1,7 @@
+<!--
+    @component
+    The vector mark lets you place shapes (like arrows) on your plot.
+-->
 <script lang="ts" module>
     import type {
         PlotContext,
@@ -21,8 +25,6 @@
         r?: number;
         length?: ChannelAccessor;
         rotate?: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
         /**
          * Controls where the vector is anchored in relation to the x, y position.
          * If set to 'start', the arrow will start at the x, y position. If set to
@@ -32,8 +34,6 @@
         anchor: 'start' | 'middle' | 'end';
         shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
         children?: Snippet;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
         canvas?: boolean;
     };
 </script>
@@ -170,7 +170,7 @@
                 <text x="30" y="30" style="color:red"
                     >implement canvas rendering for vector mark</text>
             {:else}
-                {#each scaledData as d}
+                {#each scaledData as d, i (i)}
                     {@const r = resolveChannel('r', d.datum, { r: 3, ...args })}
                     {#if d.valid && isValid(r)}
                         {@const dx = +resolveProp(args.dx, d.datum, 0)}

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

@@ -1,4 +1,4 @@
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
 type D3Path = ReturnType<typeof import('d3-path').path>;
 export type ShapeRenderer = {
     draw(context: D3Path, l: number, r: number): void;
@@ -10,8 +10,6 @@ export type VectorMarkProps = BaseMarkProps & {
     r?: number;
     length?: ChannelAccessor;
     rotate?: ChannelAccessor;
-    fill?: ChannelAccessor;
-    stroke?: ChannelAccessor;
     /**
      * Controls where the vector is anchored in relation to the x, y position.
      * If set to 'start', the arrow will start at the x, y position. If set to
@@ -21,11 +19,10 @@ export type VectorMarkProps = BaseMarkProps & {
     anchor: 'start' | 'middle' | 'end';
     shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
     children?: Snippet;
-    dx?: ConstantAccessor<number>;
-    dy?: ConstantAccessor<number>;
     canvas?: boolean;
 };
 import { type Snippet } from 'svelte';
+/** The vector mark lets you place shapes (like arrows) on your plot. */
 declare const Vector: import("svelte").Component<VectorMarkProps, {}, "">;
 type Vector = ReturnType<typeof Vector>;
 export default Vector;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -198,7 +198,7 @@
                         {#if textLines.length === 1}
                             {textLines[0]}
                         {:else}
-                            {#each textLines as line, i}
+                            {#each textLines as line, i (i)}
                                 <tspan x="0" dy={i ? 12 : 0}
                                     >{!prevTextLines || prevTextLines[i] !== line
                                         ? line

package/dist/marks/helpers/LinearGradientX.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <linearGradient {id} gradientUnits="userSpaceOnUse" x1={0} y2={0} y1={0} x2={plot.width}>
-    {#each projectedStops as { px, color }}
+    {#each projectedStops as { px, color }, i (i)}
         <stop stop-color={color} offset={px} />
     {/each}
 </linearGradient>

package/dist/marks/helpers/LinearGradientY.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <linearGradient {id} gradientUnits="userSpaceOnUse" x1={0} x2={0} y1={0} y2={plot.height}>
-    {#each projectedStops as { py, color }}
+    {#each projectedStops as { py, color }, i (i)}
         <stop stop-color={color} offset={py} />
     {/each}
 </linearGradient>

package/dist/marks/helpers/MarkerPath.svelte

@@ -96,7 +96,7 @@
     class={className}
     stroke-width={strokeWidth_}
     use:addEventHandlers={{ getPlotState, options: mark.options, datum }}>
-    {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker]}
+    {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker] (key)}
         {@const markerId = `marker-${key === 'all' ? '' : `${key}-`}${id}`}
         {#if isSnippet(marker)}
             {@render marker(markerId, color)}

package/dist/marks/helpers/RectPath.svelte

@@ -25,7 +25,8 @@ Helper component for rendering rectangular marks in SVG
         height,
         useInsetAsFallbackVertically = true,
         useInsetAsFallbackHorizontally = true,
-        usedScales
+        usedScales,
+        fallbackStyle = 'fill'
     }: {
         datum: ScaledDataRecord;
         class: string | null;
@@ -47,39 +48,40 @@ Helper component for rendering rectangular marks in SVG
          */
         useInsetAsFallbackHorizontally?: boolean;
         usedScales: UsedScales;
+        fallbackStyle?: 'fill' | 'stroke';
     } = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const dx = $derived(+(resolveProp(options.dx, datum.datum, 0) as number));
-    const dy = $derived(+(resolveProp(options.dy, datum.datum, 0) as number));
-    const inset = $derived(+(resolveProp(options.inset, datum.datum, 0) as number));
+    const dx = $derived(+(resolveProp(options.dx, datum?.datum, 0) as number));
+    const dy = $derived(+(resolveProp(options.dy, datum?.datum, 0) as number));
+    const inset = $derived(+(resolveProp(options.inset, datum?.datum, 0) as number));
     const insetLeft = $derived(
         +(resolveProp(
             options.insetLeft,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackHorizontally ? inset : 0
         ) as number)
     );
     const insetRight = $derived(
         +(resolveProp(
             options.insetRight,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackHorizontally ? inset : 0
         ) as number)
     );
     const insetTop = $derived(
         +(resolveProp(
             options.insetTop,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
     const insetBottom = $derived(
         +(resolveProp(
             options.insetBottom,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
@@ -94,12 +96,14 @@ Helper component for rendering rectangular marks in SVG
                     borderRadius.bottomLeft ?? 0
                 ) > 0)
     );
-    const [style, styleClass] = $derived(resolveStyles(plot, datum, options, 'fill', usedScales));
+    const [style, styleClass] = $derived(
+        resolveStyles(plot, datum, options, fallbackStyle, usedScales)
+    );
 </script>
 
 {#if hasBorderRadius}
     <path
-        transform="translate({[x + dx + insetLeft, y + insetBottom + dy]})"
+        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
         d={roundedRect(
             0,
             0,
@@ -112,11 +116,11 @@ Helper component for rendering rectangular marks in SVG
         use:addEventHandlers={{
             getPlotState,
             options,
-            datum: datum.datum
+            datum: datum?.datum
         }} />
 {:else}
     <rect
-        transform="translate({[x + dx + insetLeft, y + insetBottom + dy]})"
+        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
         width={width - insetLeft - insetRight}
         height={height - insetTop - insetBottom}
         class={[styleClass, className]}
@@ -124,6 +128,6 @@ Helper component for rendering rectangular marks in SVG
         use:addEventHandlers={{
             getPlotState,
             options,
-            datum: datum.datum
+            datum: datum?.datum
         }} />
 {/if}

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

@@ -20,6 +20,7 @@ type $$ComponentProps = {
      */
     useInsetAsFallbackHorizontally?: boolean;
     usedScales: UsedScales;
+    fallbackStyle?: 'fill' | 'stroke';
 };
 /** Helper component for rendering rectangular marks in SVG */
 declare const RectPath: import("svelte").Component<$$ComponentProps, {}, "">;