svelteplot 0.10.3 → 0.11.0

package/dist/marks/helpers/LineCanvas.svelte

@@ -56,7 +56,7 @@
                         usedScales,
                         plot,
                         'stroke'
-                    );
+                    ) as { fill: string; stroke: string } & Record<string, unknown>;
 
                     const opacity = maybeOpacity(restStyles['opacity']);
                     const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
@@ -67,12 +67,12 @@
                         1.4
                     ) as number;
 
-                    if (mark.options.outlineStroke) {
+                    const lineOpts = mark.options as any;
+                    if (lineOpts.outlineStroke) {
                         // draw stroke outline first
-                        const outlineStroke = resolveColor(mark.options.outlineStroke, canvas);
-                        const outlineStrokeWidth =
-                            mark.options.outlineStrokeWidth ?? strokeWidth + 2;
-                        const outlineStrokeOpacity = mark.options.outlineStrokeOpacity ?? 1;
+                        const outlineStroke = resolveColor(lineOpts.outlineStroke, canvas);
+                        const outlineStrokeWidth = lineOpts.outlineStrokeWidth ?? strokeWidth + 2;
+                        const outlineStrokeOpacity = lineOpts.outlineStrokeOpacity ?? 1;
 
                         context.lineWidth = outlineStrokeWidth;
                         context.strokeStyle = outlineStroke;
@@ -82,7 +82,7 @@
                         context.stroke();
                     }
 
-                    stroke = resolveColor(stroke, canvas);
+                    stroke = resolveColor(stroke, canvas) as string;
 
                     if (stroke && stroke !== 'none') {
                         context.lineWidth = strokeWidth ?? 1.4;

package/dist/marks/helpers/LinearGradientX.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { RawValue } from '../../index.js';
+    import type { RawValue } from '../../types/index.js';
     import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
@@ -14,7 +14,7 @@
 
     const projectedStops = $derived(
         stops
-            .map((d) => ({ ...d, px: plot.scales.x.fn(d.x) / plot.width }))
+            .map((d) => ({ ...d, px: (plot.scales.x?.fn(d.x as any) ?? 0) / plot.width }))
             .sort((a, b) => a.px - b.px)
     );
 </script>

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

@@ -1,4 +1,4 @@
-import type { RawValue } from '../../index.js';
+import type { RawValue } from '../../types/index.js';
 type $$ComponentProps = {
     id: string;
     stops: {

package/dist/marks/helpers/LinearGradientY.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { RawValue } from '../../index.js';
+    import type { RawValue } from '../../types/index.js';
     import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
@@ -14,7 +14,7 @@
 
     const projectedStops = $derived(
         stops
-            .map((d) => ({ ...d, py: plot.scales.y.fn(d.y) / plot.height }))
+            .map((d) => ({ ...d, py: (plot.scales.y?.fn(d.y as any) ?? 0) / plot.height }))
             .sort((a, b) => a.py - b.py)
     );
 </script>

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

@@ -1,4 +1,4 @@
-import type { RawValue } from '../../index.js';
+import type { RawValue } from '../../types/index.js';
 type $$ComponentProps = {
     id: string;
     stops: {

package/dist/marks/helpers/Marker.svelte

@@ -16,7 +16,7 @@
 
 <script lang="ts">
     import { getContext } from 'svelte';
-    import { getPlotDefaults } from '../../hooks/plotDefaults';
+    import { getPlotDefaults } from '../../hooks/plotDefaults.js';
 
     type MarkerProps = {
         id: string;
@@ -33,7 +33,7 @@
         width: 6,
         height: 6,
         orient,
-        color: 'stroke'
+        color: 'stroke' as const
     });
 
     const MARKERS: Record<

package/dist/marks/helpers/MarkerPath.svelte

@@ -47,6 +47,7 @@
          * path string
          */
         d: string;
+        dInv?: string;
         style: string;
         startOffset: string;
         textStyle: string;
@@ -69,7 +70,7 @@
         d,
         dInv,
         style,
-        class: className = null,
+        class: className = '',
         textStyleClass = null,
         startOffset,
         textStyle,
@@ -86,14 +87,14 @@
 
     const points = $derived(text && d != null ? d.split(/[LMC]/).slice(1) : []);
     const hasPath = $derived(points.length > 0);
-    const firstPt = $derived(text && hasPath ? points.at(0).split(',').map(Number) : []);
-    const lastPt = $derived(text && hasPath ? points.at(-1).split(',').map(Number) : []);
-    const leftToRight = $derived(text && hasPath ? firstPt[0] < lastPt.at(-2) : true);
+    const firstPt = $derived(text && hasPath ? (points.at(0)?.split(',').map(Number) ?? []) : []);
+    const lastPt = $derived(text && hasPath ? (points.at(-1)?.split(',').map(Number) ?? []) : []);
+    const leftToRight = $derived(text && hasPath ? firstPt[0] < (lastPt.at(-2) ?? 0) : true);
 
     // use reversed path if the path is not left to right
     const textPath = $derived(!text || leftToRight ? d : dInv);
-    const strokeWidth_ = $derived(resolveProp(strokeWidth, datum, 1.4));
-    const markerScale_ = $derived(resolveProp(markerScale, datum, 1));
+    const strokeWidth_ = $derived(resolveProp(strokeWidth, datum, 1.4) ?? 1.4);
+    const markerScale_ = $derived(resolveProp(markerScale, datum, 1) ?? 1);
 </script>
 
 <g
@@ -105,14 +106,16 @@
         options: mark.options,
         datum: datum
     })}>
-    {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker] (key)}
+    {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, markerValue] (key)}
         {@const markerId = `marker-${key === 'all' ? '' : `${key}-`}${id}`}
-        {#if isSnippet(marker)}
-            {@render marker(markerId, color)}
-        {:else if marker}
+        {#if isSnippet(markerValue)}
+            {@render (markerValue as any)(markerId, color)}
+        {:else if markerValue}
             <Marker
                 id={markerId}
-                shape={marker === true ? 'circle' : resolveProp(marker, datum)}
+                shape={markerValue === true
+                    ? 'circle'
+                    : ((resolveProp(markerValue, datum) ?? 'circle') as MarkerShape)}
                 {color}
                 markerScale={markerScale_} />
         {/if}
@@ -121,7 +124,7 @@
         <!-- add invisible path in bg for easier mouse access -->
         <path
             {d}
-            style="fill:none;stroke-width: {(strokeWidth || 1) +
+            style="fill:none;stroke-width: {(strokeWidth_ || 1) +
                 10}; stroke: transparent; stroke-opacity:0" />
     {/if}
     <path

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

@@ -8,10 +8,20 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: import("../../types/index.js").ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../../transforms/dodge").DodgeYOptions;
+        dodgeX: import("../../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../../transforms/dodge.js").DodgeYOptions;
         fill: import("../../types/index.js").ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: import("../../types/index.js").RawValue, b: import("../../types/index.js").RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -25,45 +35,107 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: import("../../types/index.js").ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
     }> & {
         /**
          * the datum associated with this path, usually the first
@@ -95,6 +167,7 @@ declare function $$render<Datum extends DataRecord>(): {
          * path string
          */
         d: string;
+        dInv?: string;
         style: string;
         startOffset: string;
         textStyle: string;

package/dist/marks/helpers/MultilineText.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { resolveProp, resolveStyles } from '../../helpers/resolve';
+    import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { type ComponentProps } from 'svelte';
-    import type { ScaledDataRecord, UsedScales } from '../../index.js';
+    import type { ScaledDataRecord, UsedScales } from '../../types/index.js';
     import type Text from '../Text.svelte';
-    import { CSS_VAR } from '../../constants';
-    import { maybeFromPixel, maybeFromRem } from '../../helpers/getBaseStyles';
+    import { CSS_VAR } from '../../constants.js';
+    import { maybeFromPixel, maybeFromRem } from '../../helpers/getBaseStyles.js';
     import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     const LINE_ANCHOR = {
@@ -46,7 +46,7 @@
             args.lineAnchor,
             d.datum,
             args.y != null ? 'middle' : isTop ? 'top' : isBottom ? 'bottom' : 'middle'
-        )
+        ) ?? 'middle'
     );
     const textClassName = $derived(resolveProp(args.textClass, d.datum, null));
     const [x, y] = $derived(
@@ -73,7 +73,7 @@
     const [style, styleClass] = $derived(
         resolveStyles(
             plot,
-            { ...d, __tspanIndex: 0 },
+            { ...d, __tspanIndex: 0 } as any,
             {
                 fontSize: 12,
                 fontWeight: 500,
@@ -92,20 +92,27 @@
     let textElement: SVGTextElement | null = $state(null);
 
     const rootFontSize = $derived(
-        textElement?.ownerDocument?.documentElement && textLines.length > 1
-            ? maybeFromPixel(getComputedStyle(textElement.ownerDocument.documentElement).fontSize)
+        textElement != null && textLines.length > 1
+            ? maybeFromPixel(
+                  getComputedStyle(
+                      (textElement as unknown as SVGTextElement).ownerDocument.documentElement
+                  ).fontSize
+              )
             : 14
     );
 
     const computedFontSize = $derived(
-        textElement && textLines.length > 1 && CSS_VAR.test(fontSize)
+        textElement &&
+            textLines.length > 1 &&
+            typeof fontSize === 'string' &&
+            CSS_VAR.test(fontSize)
             ? maybeFromRem(
                   maybeFromPixel(
                       getComputedStyle(textElement).getPropertyValue(
-                          `--${fontSize.match(CSS_VAR)[1]}`
+                          `--${String(fontSize).match(CSS_VAR)![1]}`
                       )
                   ),
-                  rootFontSize
+                  rootFontSize as number
               )
             : fontSize
     );
@@ -114,7 +121,7 @@
         textLines.length > 1 ? (resolveProp(args.lineHeight, d.datum) ?? 1.2) : 0
     );
 
-    const rotate = $derived(+resolveProp(args.rotate, d.datum, 0));
+    const rotate = $derived(Number(resolveProp(args.rotate, d.datum, 0) ?? 0));
 </script>
 
 {#if textLines.length > 1}
@@ -123,19 +130,19 @@
         bind:this={textElement}
         class={[textClassName]}
         dominant-baseline={LINE_ANCHOR[lineAnchor]}
-        transform="translate({Math.round(x)},{Math.round(
-            y -
+        transform="translate({Math.round(x ?? 0)},{Math.round(
+            (y ?? 0) -
                 (lineAnchor === 'bottom'
                     ? textLines.length - 1
                     : lineAnchor === 'middle'
                       ? (textLines.length - 1) * 0.5
                       : 0) *
-                    computedFontSize *
+                    (computedFontSize as number) *
                     lineHeight
         )}) rotate({rotate})"
         >{#each textLines as line, l (l)}<tspan
                 x="0"
-                dy={l ? computedFontSize * lineHeight : 0}
+                dy={l ? (computedFontSize as number) * lineHeight : 0}
                 class={styleClass}
                 {style}>{line}</tspan
             >{/each}{#if title}<title>{title}</title>{/if}</text>
@@ -144,7 +151,7 @@
     <text
         class={[textClassName, styleClass]}
         dominant-baseline={LINE_ANCHOR[lineAnchor]}
-        transform="translate({Math.round(x)},{Math.round(y)}) rotate({rotate})"
+        transform="translate({Math.round(x ?? 0)},{Math.round(y ?? 0)}) rotate({rotate})"
         {style}
         >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
 {/if}

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

@@ -1,5 +1,5 @@
 import { type ComponentProps } from 'svelte';
-import type { ScaledDataRecord, UsedScales } from '../../index.js';
+import type { ScaledDataRecord, UsedScales } from '../../types/index.js';
 import type Text from '../Text.svelte';
 type $$ComponentProps = {
     textLines: string[];

package/dist/marks/helpers/RectCanvas.svelte

@@ -31,7 +31,7 @@ Helper class for rendering Cell, Bar and Rect marks in canvas
     } from '../../types/index.js';
     import type { BorderRadius } from '../../types/mark.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { roundedRect } from '../../helpers/roundedRect';
+    import { roundedRect } from '../../helpers/roundedRect.js';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import CanvasLayer from './CanvasLayer.svelte';
@@ -70,7 +70,8 @@ Helper class for rendering Cell, Bar and Rect marks in canvas
         return value == null ? 1 : +value;
     }
 
-    const render: Attachment = (canvas: HTMLCanvasElement) => {
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
         const context = canvas.getContext('2d');
 
         $effect(() => {
@@ -93,27 +94,31 @@ Helper class for rendering Cell, Bar and Rect marks in canvas
                     const miny = Math.min(y1, y2);
                     const maxy = Math.max(y1, y2);
 
-                    const inset = +resolveProp(options.inset, datum.datum, 0);
-                    const insetLeft = +resolveProp(
-                        options.insetLeft,
-                        datum.datum,
-                        useInsetAsFallbackHorizontally ? inset : 0
-                    );
-                    const insetRight = +resolveProp(
-                        options.insetRight,
-                        datum.datum,
-                        useInsetAsFallbackHorizontally ? inset : 0
-                    );
-                    const insetTop = +resolveProp(
-                        options.insetTop,
-                        datum.datum,
-                        useInsetAsFallbackVertically ? inset : 0
-                    );
-                    const insetBottom = +resolveProp(
-                        options.insetBottom,
-                        datum.datum,
-                        useInsetAsFallbackVertically ? inset : 0
-                    );
+                    const inset = resolveProp(options.inset, datum.datum, 0) ?? 0;
+                    const insetLeft =
+                        resolveProp(
+                            options.insetLeft,
+                            datum.datum,
+                            useInsetAsFallbackHorizontally ? inset : 0
+                        ) ?? 0;
+                    const insetRight =
+                        resolveProp(
+                            options.insetRight,
+                            datum.datum,
+                            useInsetAsFallbackHorizontally ? inset : 0
+                        ) ?? 0;
+                    const insetTop =
+                        resolveProp(
+                            options.insetTop,
+                            datum.datum,
+                            useInsetAsFallbackVertically ? inset : 0
+                        ) ?? 0;
+                    const insetBottom =
+                        resolveProp(
+                            options.insetBottom,
+                            datum.datum,
+                            useInsetAsFallbackVertically ? inset : 0
+                        ) ?? 0;
 
                     const rectX = minx + insetLeft;
                     const rectY = miny + insetBottom;
@@ -135,17 +140,17 @@ Helper class for rendering Cell, Bar and Rect marks in canvas
                         usedScales,
                         plot,
                         defaultColorProp
-                    );
+                    ) as { fill: string; stroke: string } & Record<string, unknown>;
 
                     const opacity = maybeOpacity(restStyles['opacity']);
                     const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
                     const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
 
                     if (typeof fill === 'string') {
-                        fill = resolveColor(fill, canvas);
+                        fill = resolveColor(fill, canvas) as string;
                     }
                     if (typeof stroke === 'string') {
-                        stroke = resolveColor(stroke, canvas);
+                        stroke = resolveColor(stroke, canvas) as string;
                     }
 
                     if (stroke && stroke !== 'none') {

package/dist/marks/helpers/RectPath.svelte

@@ -26,8 +26,8 @@ Helper component for rendering rectangular marks in SVG
         fallbackStyle?: 'fill' | 'stroke';
     }
 
-    import { resolveProp, resolveStyles } from '../../helpers/resolve';
-    import { roundedRect } from '../../helpers/roundedRect';
+    import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
+    import { roundedRect } from '../../helpers/roundedRect.js';
     import { addEventHandlers } from './events.js';
     import Anchor from './Anchor.svelte';
     import type { BaseMarkProps, BaseRectMarkProps, BorderRadius } from '../../types/mark.js';