svelteplot 0.3.1 → 0.3.2-pr-113.0

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

@@ -1,28 +1,100 @@
-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;
 };
-export type VectorMarkProps = BaseMarkProps & {
-    data: DataRecord[];
-    x: ChannelAccessor;
-    y: ChannelAccessor;
-    r?: number;
-    length?: ChannelAccessor;
-    rotate?: 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
-     * 'middle', the arrow will be centered at the x, y position. If set to
-     * 'end', the arrow will end at the x, y position.
-     */
-    anchor: 'start' | 'middle' | 'end';
-    shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
-    children?: Snippet;
-    canvas?: boolean;
-};
+import type { DataRecord, ChannelAccessor } from '../types/index.js';
 import { type Snippet } from 'svelte';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): Partial<{
+        filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
+        facet?: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        sort: {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
+        onclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondblclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmousedown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmousemove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointercancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerdown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointermove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondrag?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondrop?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchmove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchcancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        oncontextmenu?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onwheel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        class: string | null;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }> & {
+        data: Datum[];
+        x: ChannelAccessor<Datum>;
+        y: ChannelAccessor<Datum>;
+        r?: number;
+        length?: ChannelAccessor<Datum>;
+        rotate?: ChannelAccessor<Datum>;
+        /**
+         * 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
+         * 'middle', the arrow will be centered at the x, y position. If set to
+         * 'end', the arrow will end at the x, y position.
+         */
+        anchor?: "start" | "middle" | "end";
+        shape?: "arrow" | "spike" | "arrow-filled" | ShapeRenderer;
+        children?: Snippet;
+        canvas?: boolean;
+    };
+    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 vector mark lets you place shapes (like arrows) on your plot. */
-declare const Vector: import("svelte").Component<VectorMarkProps, {}, "">;
-type Vector = ReturnType<typeof Vector>;
+declare const Vector: $$IsomorphicComponent;
+type Vector<Datum extends DataRecord> = InstanceType<typeof Vector<Datum>>;
 export default Vector;

package/dist/marks/helpers/AreaCanvas.svelte

@@ -5,7 +5,7 @@
         PlotContext,
         ScaledDataRecord,
         UsedScales
-    } from '../../types.js';
+    } from '../../types/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
     import { getContext } from 'svelte';
     import { type Area } from 'd3-shape';

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

@@ -1,4 +1,4 @@
-import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types.js';
+import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types/index.js';
 import { type Area } from 'd3-shape';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -10,7 +10,7 @@
         PlotState,
         RawValue,
         ScaleType
-    } from '../../types.js';
+    } from '../../types/index.js';
     import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
     import { randomId, testFilter } from '../../helpers/index.js';
@@ -223,7 +223,6 @@
         stroke: currentColor;
     }
     text {
-        font-size: 11px;
         opacity: 0.8;
         fill: currentColor;
     }

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

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, ConstantAccessor, PlotState, RawValue, ScaleType } from '../../types.js';
+import type { ChannelAccessor, ConstantAccessor, PlotState, RawValue, ScaleType } from '../../types/index.js';
 type BaseAxisXProps = {
     scaleFn: (d: RawValue) => number;
     scaleType: ScaleType;

package/dist/marks/helpers/BaseAxisY.svelte

@@ -9,7 +9,7 @@
         PlotState,
         RawValue,
         ScaleType
-    } from '../../types.js';
+    } from '../../types/index.js';
 
     type BaseAxisYProps = {
         scaleFn: (d: RawValue) => number;
@@ -129,7 +129,7 @@
         untrack(() => [$autoMarginTop]);
         if (title) {
             // add margin top to make some space for title
-            $autoMarginTop.set(id, 20);
+            $autoMarginTop.set(id, 27);
         } else {
             // no need for extra margin top
             $autoMarginTop.delete(id);
@@ -199,7 +199,6 @@
         stroke: currentColor;
     }
     text {
-        font-size: 11px;
         opacity: 0.8;
         fill: currentColor;
     }

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

@@ -1,4 +1,4 @@
-import type { ConstantAccessor, PlotState, RawValue, ScaleType } from '../../types.js';
+import type { ConstantAccessor, PlotState, RawValue, ScaleType } from '../../types/index.js';
 type BaseAxisYProps = {
     scaleFn: (d: RawValue) => number;
     scaleType: ScaleType;

package/dist/marks/helpers/CanvasLayer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext } from '../../types';
+    import type { PlotContext } from '../..';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { MediaQuery } from 'svelte/reactivity';
     import type { Attachment } from 'svelte/attachments';

package/dist/marks/helpers/DotCanvas.svelte

@@ -5,7 +5,7 @@
         BaseMarkProps,
         ScaledDataRecord,
         PlotContext
-    } from '../../types.js';
+    } from '../../types/index.js';
     import { resolveProp } from '../../helpers/resolve.js';
     import { maybeSymbol } from '../../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';

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

@@ -1,4 +1,4 @@
-import type { PlotState, Mark, BaseMarkProps, ScaledDataRecord } from '../../types.js';
+import type { PlotState, Mark, BaseMarkProps, ScaledDataRecord } from '../../types/index.js';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;
     plot: PlotState;

package/dist/marks/helpers/GeoCanvas.svelte

@@ -5,7 +5,7 @@
         PlotContext,
         ScaledDataRecord,
         UsedScales
-    } from '../../types.js';
+    } from '../../types/index.js';
     import { CSS_VAR } from '../../constants.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
     import { getContext } from 'svelte';

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

@@ -1,4 +1,4 @@
-import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types.js';
+import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types/index.js';
 import { type GeoPath } from 'd3-geo';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;

package/dist/marks/helpers/LineCanvas.svelte

@@ -5,7 +5,7 @@
         PlotContext,
         ScaledDataRecord,
         UsedScales
-    } from '../../types.js';
+    } from '../../types/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
     import { getContext } from 'svelte';
     import { type Line } from 'd3-shape';

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

@@ -1,4 +1,4 @@
-import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types.js';
+import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types/index.js';
 import { type Line } from 'd3-shape';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;

package/dist/marks/helpers/LinearGradientX.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from '../../types';
+    import type { PlotContext, RawValue } from '../..';
 
     let {
         id,

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

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

package/dist/marks/helpers/LinearGradientY.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from '../../types';
+    import type { PlotContext, RawValue } from '../..';
 
     let {
         id,

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

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

package/dist/marks/helpers/MarkerPath.svelte

@@ -13,7 +13,7 @@
         Mark,
         PlotContext,
         PlotScales
-    } from '../../types.js';
+    } from '../../types/index.js';
     import { addEventHandlers } from './events.js';
     import { getContext } from 'svelte';
 

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

@@ -1,44 +1,4 @@
-import { type MarkerShape } from './Marker.svelte';
-import type { BaseMarkProps, ConstantAccessor, DataRecord, Mark, PlotScales } from '../../types.js';
-type MarkerPathProps = BaseMarkProps & {
-    /**
-     * the datum associated with this path, usually the first
-     * element of the data array group
-     */
-    datum: DataRecord;
-    /**
-     * the marker shape to use at the start of the path, defaults to
-     * circle
-     */
-    markerStart?: boolean | MarkerShape;
-    /**
-     * the marker shape to use at the middle of the path, defaults to circle
-     */
-    markerMid?: boolean | MarkerShape;
-    /**
-     * the marker shape to use at the end of the path, defaults to circle
-     */
-    markerEnd?: boolean | MarkerShape;
-    /**
-     * shorthand for setting all markers
-     */
-    marker?: boolean | MarkerShape;
-    /**
-     * path string
-     */
-    d: string;
-    style: string;
-    startOffset: string;
-    textStyle: string;
-    textStyleClass?: string | null;
-    text: string;
-    transform: string;
-    color: string;
-    strokeWidth: ConstantAccessor<number>;
-    mark: Mark<BaseMarkProps>;
-    scales: PlotScales;
-};
 /** Helper component for paths with markers and optional text along the path. */
-declare const MarkerPath: import("svelte").Component<MarkerPathProps, {}, "">;
+declare const MarkerPath: import("svelte").Component<any, {}, "">;
 type MarkerPath = ReturnType<typeof MarkerPath>;
 export default MarkerPath;

package/dist/marks/helpers/MultilineText.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import { resolveProp, resolveStyles } from '../../helpers/resolve';
+    import { getContext, type ComponentProps } from 'svelte';
+    import type { PlotContext, ScaledDataRecord, UsedScales } from '../..';
+    import type Text from '../Text.svelte';
+    import { CSS_VAR } from '../../constants';
+    import { maybeFromPixel, maybeFromRem } from '../../helpers/getBaseStyles';
+
+    const LINE_ANCHOR = {
+        bottom: 'auto',
+        middle: 'central',
+        top: 'hanging'
+    } as const;
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    let {
+        textLines,
+        d,
+        args,
+        usedScales
+    }: {
+        textLines: string[];
+        d: ScaledDataRecord;
+        args: ComponentProps<typeof Text>;
+        usedScales: UsedScales;
+    } = $props();
+
+    const title = $derived(resolveProp(args.title, d.datum, ''));
+    const frameAnchor = $derived(resolveProp(args.frameAnchor, d.datum));
+    const isLeft = $derived(
+        frameAnchor === 'left' || frameAnchor === 'top-left' || frameAnchor === 'bottom-left'
+    );
+    const isRight = $derived(
+        frameAnchor === 'right' || frameAnchor === 'top-right' || frameAnchor === 'bottom-right'
+    );
+    const isTop = $derived(
+        frameAnchor === 'top' || frameAnchor === 'top-left' || frameAnchor === 'top-right'
+    );
+    const isBottom = $derived(
+        frameAnchor === 'bottom' || frameAnchor === 'bottom-left' || frameAnchor === 'bottom-right'
+    );
+    const lineAnchor = $derived(
+        resolveProp(
+            args.lineAnchor,
+            d.datum,
+            args.y != null ? 'middle' : isTop ? 'top' : isBottom ? 'bottom' : 'middle'
+        )
+    );
+    const textClassName = $derived(resolveProp(args.textClass, d.datum, null));
+    const [x, y] = $derived(
+        args.x != null && args.y != null
+            ? [d.x, d.y]
+            : [
+                  args.x != null
+                      ? d.x
+                      : isLeft
+                        ? plot.options.marginLeft
+                        : isRight
+                          ? plot.options.marginLeft + plot.facetWidth
+                          : plot.options.marginLeft + plot.facetWidth * 0.5,
+                  args.y != null
+                      ? d.y
+                      : isTop
+                        ? plot.options.marginTop
+                        : isBottom
+                          ? plot.options.marginTop + plot.facetHeight
+                          : plot.options.marginTop + plot.facetHeight * 0.5
+              ]
+    );
+
+    const dx = $derived(+resolveProp(args.dx, d.datum, 0));
+    const dy = $derived(+resolveProp(args.dy, d.datum, 0));
+
+    const [style, styleClass] = $derived(
+        resolveStyles(
+            plot,
+            { ...d, __tspanIndex: 0 },
+            {
+                fontSize: 12,
+                fontWeight: 500,
+                strokeWidth: 1.6,
+                textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle',
+                ...args
+            },
+            'fill',
+            usedScales
+        )
+    );
+
+    const fontSize = $derived(
+        textLines.length > 1 ? (resolveProp(args.fontSize, d.datum) ?? 12) : 0
+    );
+    let textElement: SVGTextElement | null = $state(null);
+
+    const rootFontSize = $derived(
+        textElement?.ownerDocument?.documentElement && textLines.length > 1
+            ? maybeFromPixel(getComputedStyle(textElement.ownerDocument.documentElement).fontSize)
+            : 14
+    );
+
+    const computedFontSize = $derived(
+        textElement && textLines.length > 1 && CSS_VAR.test(fontSize)
+            ? maybeFromRem(
+                  maybeFromPixel(
+                      getComputedStyle(textElement).getPropertyValue(
+                          `--${fontSize.match(CSS_VAR)[1]}`
+                      )
+                  ),
+                  rootFontSize
+              )
+            : fontSize
+    );
+
+    const lineHeight = $derived(
+        textLines.length > 1 ? (resolveProp(args.lineHeight, d.datum) ?? 1.2) : 0
+    );
+</script>
+
+{#if textLines.length > 1}
+    <!-- multiline text-->
+    <text
+        bind:this={textElement}
+        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) *
+                    computedFontSize *
+                    lineHeight
+        )})"
+        >{#each textLines as line, l (l)}<tspan
+                x="0"
+                dy={l ? computedFontSize * lineHeight : 0}
+                class={styleClass}
+                {style}>{line}</tspan
+            >{/each}{#if title}<title>{title}</title>{/if}</text>
+{:else}
+    <!-- singleline text-->
+    <text
+        class={[textClassName, styleClass]}
+        dominant-baseline={LINE_ANCHOR[lineAnchor]}
+        transform="translate({Math.round(x + dx)},{Math.round(y + dy)})"
+        {style}
+        >{textLines[0]}{#if title}<title>{title}</title>{/if}</text>
+{/if}
+
+<style>
+    text {
+        paint-order: stroke fill;
+    }
+</style>

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

@@ -0,0 +1,12 @@
+import { type ComponentProps } from 'svelte';
+import type { ScaledDataRecord, UsedScales } from '../..';
+import type Text from '../Text.svelte';
+type $$ComponentProps = {
+    textLines: string[];
+    d: ScaledDataRecord;
+    args: ComponentProps<typeof Text>;
+    usedScales: UsedScales;
+};
+declare const MultilineText: import("svelte").Component<$$ComponentProps, {}, "">;
+type MultilineText = ReturnType<typeof MultilineText>;
+export default MultilineText;

package/dist/marks/helpers/RectPath.svelte

@@ -1,7 +1,31 @@
 <!-- @component
 Helper component for rendering rectangular marks in SVG
 -->
-<script lang="ts">
+<script lang="ts" generics="Datum extends DataRecord">
+    interface RectPathProps {
+        datum: ScaledDataRecord<Datum>;
+        class: string | null;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        options: BaseRectMarkProps<Datum> & BaseMarkProps<Datum>;
+        /**
+         * By default, the `inset` property is applied to all four insets. Mark components
+         * can tweak this behavior for insetTop and insetBottom by setting the
+         * useInsetAsFallbackVertically prop to false.
+         */
+        useInsetAsFallbackVertically?: boolean;
+        /**
+         * By default, the `inset` property is applied to all four insets. Mark components
+         * can tweak this behavior for insetLeft and insetRight by setting the
+         * useInsetAsFallbackHorizontally prop to false.
+         */
+        useInsetAsFallbackHorizontally?: boolean;
+        usedScales: UsedScales;
+        fallbackStyle?: 'fill' | 'stroke';
+    }
+
     import { resolveProp, resolveStyles } from '../../helpers/resolve';
     import { roundedRect } from '../../helpers/roundedRect';
     import type {
@@ -10,8 +34,9 @@ Helper component for rendering rectangular marks in SVG
         BorderRadius,
         ScaledDataRecord,
         UsedScales,
-        PlotContext
-    } from '../../types';
+        PlotContext,
+        DataRecord
+    } from '../..';
     import { addEventHandlers } from './events';
     import { getContext } from 'svelte';
     import Anchor from './Anchor.svelte';
@@ -28,29 +53,7 @@ Helper component for rendering rectangular marks in SVG
         useInsetAsFallbackHorizontally = true,
         usedScales,
         fallbackStyle = 'fill'
-    }: {
-        datum: ScaledDataRecord;
-        class: string | null;
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        options: BaseRectMarkProps & BaseMarkProps;
-        /**
-         * By default, the `inset` property is applied to all four insets. Mark components
-         * can tweak this behavior for insetTop and insetBottom by setting the
-         * useInsetAsFallbackVertically prop to false.
-         */
-        useInsetAsFallbackVertically?: boolean;
-        /**
-         * By default, the `inset` property is applied to all four insets. Mark components
-         * can tweak this behavior for insetLeft and insetRight by setting the
-         * useInsetAsFallbackHorizontally prop to false.
-         */
-        useInsetAsFallbackHorizontally?: boolean;
-        usedScales: UsedScales;
-        fallbackStyle?: 'fill' | 'stroke';
-    } = $props();
+    }: RectPathProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());