svelteplot 0.3.3 → 0.3.5-pr-121.0

package/dist/marks/LineY.svelte

@@ -1,11 +1,17 @@
 <!-- @component
-    Creates a vertical line chart with y values and index positions for x
+    Creates a horizontal line chart with x values and index positions for y
 -->
-<script lang="ts">
-    import Line, { type LineMarkProps } from './Line.svelte';
-    import { recordizeY } from '../index.js';
+<script lang="ts" generics="Datum extends DataRow">
+    interface LineYMarkProps extends Omit<ComponentProps<typeof Line>, 'x' | 'data'> {
+        data: Datum[];
+    }
+    import Line from './Line.svelte';
+    import { recordizeY } from '..';
+    import type { ComponentProps } from 'svelte';
+    import type { DataRow } from '..';
+
+    let { data = [{} as Datum], ...rest }: LineYMarkProps = $props();
 
-    let { data = [{}], ...rest }: Omit<LineMarkProps, 'x'> = $props();
     let args = $derived(recordizeY({ data, ...rest }));
 </script>
 

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

@@ -1,5 +1,101 @@
-import { type LineMarkProps } from './Line.svelte';
-/** Creates a vertical line chart with y values and index positions for x */
-declare const LineY: import("svelte").Component<Omit<LineMarkProps, "x">, {}, "">;
-type LineY = ReturnType<typeof LineY>;
+import { recordizeY } from '..';
+import type { DataRow } from '..';
+declare class __sveltets_Render<Datum extends DataRow> {
+    props(): Omit<import("../types").MarkerOptions & Partial<{
+        filter?: import("../types").ConstantAccessor<boolean, import("../types").DataRecord>;
+        facet?: "auto" | "include" | "exclude";
+        fx: import("../types").ChannelAccessor<import("../types").DataRecord>;
+        fy: import("../types").ChannelAccessor<import("../types").DataRecord>;
+        dx: import("../types").ConstantAccessor<number, import("../types").DataRecord>;
+        dy: import("../types").ConstantAccessor<number, import("../types").DataRecord>;
+        fill: import("../types").ChannelAccessor<import("../types").DataRecord>;
+        fillOpacity: import("../types").ConstantAccessor<number, import("../types").DataRecord>;
+        sort: {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | ((a: import("../types").RawValue, b: import("../types").RawValue) => number) | import("../types").ConstantAccessor<import("../types").RawValue, import("../types").DataRecord>;
+        stroke: import("../types").ChannelAccessor<import("../types").DataRecord>;
+        strokeWidth: import("../types").ConstantAccessor<number, import("../types").DataRecord>;
+        strokeOpacity: import("../types").ConstantAccessor<number, import("../types").DataRecord>;
+        strokeLinejoin: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinejoin, import("../types").DataRecord>;
+        strokeLinecap: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinecap, import("../types").DataRecord>;
+        strokeMiterlimit: import("../types").ConstantAccessor<number, import("../types").DataRecord>;
+        opacity: import("../types").ChannelAccessor<import("../types").DataRecord>;
+        strokeDasharray: import("../types").ConstantAccessor<string, import("../types").DataRecord>;
+        strokeDashoffset: import("../types").ConstantAccessor<number, import("../types").DataRecord>;
+        mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, import("../types").DataRecord>;
+        clipPath: string;
+        imageFilter: import("../types").ConstantAccessor<string, import("../types").DataRecord>;
+        shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, import("../types").DataRecord>;
+        paintOrder: import("../types").ConstantAccessor<string, import("../types").DataRecord>;
+        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>;
+        class: string | null;
+        cursor: import("../types").ConstantAccessor<import("csstype").Property.Cursor, import("../types").DataRecord>;
+    }> & {
+        data?: import("../types").DataRecord[] | undefined;
+        x?: import("../types").ChannelAccessor<import("../types").DataRecord>;
+        y?: import("../types").ChannelAccessor<import("../types").DataRecord>;
+        z?: import("../types").ChannelAccessor<import("../types").DataRecord>;
+        outlineStroke?: string;
+        outlineStrokeWidth?: number;
+        outlineStrokeOpacity?: number;
+        curve?: import("../types").CurveName | import("d3-shape").CurveFactory | "auto";
+        tension?: number;
+        sort?: import("../types").ConstantAccessor<recordizeY, Datum_1> | {
+            channel: "stroke" | "fill";
+        };
+        text?: import("../types").ConstantAccessor<string, import("../types").DataRecord>;
+        textFill?: import("../types").ConstantAccessor<string, import("../types").DataRecord>;
+        textStroke?: import("../types").ConstantAccessor<string, import("../types").DataRecord>;
+        textStartOffset?: import("../types").ConstantAccessor<string, import("../types").DataRecord>;
+        textStrokeWidth?: import("../types").ConstantAccessor<number, import("../types").DataRecord>;
+        lineClass?: import("../types").ConstantAccessor<string, import("../types").DataRecord>;
+        canvas?: boolean;
+    }, "x" | "data"> & {
+        data: Datum[];
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRow>(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 DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Creates a horizontal line chart with x values and index positions for y */
+declare const LineY: $$IsomorphicComponent;
+type LineY<Datum extends DataRow> = InstanceType<typeof LineY<Datum>>;
 export default LineY;

package/dist/marks/Link.svelte

@@ -1,24 +1,40 @@
 <!-- @component
     Creates connections between pairs of points with optional curve styling and markers
 -->
-<script lang="ts" module>
-    export type LinkMarkProps = BaseMarkProps &
-        MarkerOptions & {
-            data: DataRecord[];
-            sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
-            x1: ChannelAccessor;
-            y1: ChannelAccessor;
-            x2: ChannelAccessor;
-            y2: ChannelAccessor;
-            curve?: 'auto' | CurveName | CurveFactory;
-            tension?: number;
-            text: ConstantAccessor<string>;
-            children?: Snippet;
-        };
-</script>
 
-<script lang="ts">
-    import { getContext, type Snippet } from 'svelte';
+<script lang="ts" generics="Datum extends DataRecord">
+    interface LinkMarkProps extends BaseMarkProps<Datum>, MarkerOptions {
+        data: Datum[];
+        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        /**
+         * the x1 channel accessor for the start of the link
+         */
+        x1: ChannelAccessor<Datum>;
+        /**
+         * the y1 channel accessor for the start of the link
+         */
+        y1: ChannelAccessor<Datum>;
+        /**
+         * the x2 channel accessor for the end of the link
+         */
+        x2: ChannelAccessor<Datum>;
+
+        y2: ChannelAccessor<Datum>;
+        /**
+         * the curve type, defaults to 'auto' which uses a linear curve for planar projections
+         * and a spherical line for geographic projections
+         */
+        curve?: 'auto' | CurveName | CurveFactory;
+        /**
+         * the tension of the curve, defaults to 0
+         */
+        tension?: number;
+        /**
+         * the text label for the link, can be a constant or a function
+         */
+        text?: ConstantAccessor<string, Datum>;
+    }
+    import { getContext } from 'svelte';
     import type {
         PlotContext,
         DataRecord,
@@ -30,7 +46,7 @@
         RawValue,
         ScaledDataRecord,
         PlotDefaults
-    } from '../types.js';
+    } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeData } from '../helpers/index.js';
     import Mark from '../Mark.svelte';
@@ -47,7 +63,7 @@
         ...getContext<PlotDefaults>('svelteplot/_defaults').link
     };
     const {
-        data = [{}],
+        data = [{} as Datum],
         curve = 'auto',
         tension = 0,
         text,

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

@@ -1,21 +1,110 @@
-export type LinkMarkProps = BaseMarkProps & MarkerOptions & {
-    data: DataRecord[];
-    sort?: ConstantAccessor<RawValue> | {
-        channel: 'stroke' | 'fill';
-    };
-    x1: ChannelAccessor;
-    y1: ChannelAccessor;
-    x2: ChannelAccessor;
-    y2: ChannelAccessor;
-    curve?: 'auto' | CurveName | CurveFactory;
-    tension?: number;
-    text: ConstantAccessor<string>;
-    children?: Snippet;
-};
-import { type Snippet } from 'svelte';
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, CurveName, MarkerOptions, RawValue } from '../types.js';
+import type { DataRecord, ConstantAccessor, ChannelAccessor, CurveName, MarkerOptions, RawValue } from '../types/index.js';
 import { type CurveFactory } from 'd3-shape';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): Partial<{
+        filter?: ConstantAccessor<boolean, Datum>;
+        facet?: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: ConstantAccessor<number, Datum>;
+        dy: ConstantAccessor<number, Datum>;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: ConstantAccessor<number, Datum>;
+        sort: {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: ConstantAccessor<number, Datum>;
+        strokeOpacity: ConstantAccessor<number, Datum>;
+        strokeLinejoin: ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: ConstantAccessor<string, Datum>;
+        strokeDashoffset: ConstantAccessor<number, Datum>;
+        mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        imageFilter: ConstantAccessor<string, Datum>;
+        shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: 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: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }> & MarkerOptions & {
+        data: Datum[];
+        sort?: ConstantAccessor<RawValue> | {
+            channel: "stroke" | "fill";
+        };
+        /**
+         * the x1 channel accessor for the start of the link
+         */
+        x1: ChannelAccessor<Datum>;
+        /**
+         * the y1 channel accessor for the start of the link
+         */
+        y1: ChannelAccessor<Datum>;
+        /**
+         * the x2 channel accessor for the end of the link
+         */
+        x2: ChannelAccessor<Datum>;
+        y2: ChannelAccessor<Datum>;
+        /**
+         * the curve type, defaults to 'auto' which uses a linear curve for planar projections
+         * and a spherical line for geographic projections
+         */
+        curve?: "auto" | CurveName | CurveFactory;
+        /**
+         * the tension of the curve, defaults to 0
+         */
+        tension?: number;
+        /**
+         * the text label for the link, can be a constant or a function
+         */
+        text?: ConstantAccessor<string, Datum>;
+    };
+    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']>;
+}
 /** Creates connections between pairs of points with optional curve styling and markers */
-declare const Link: import("svelte").Component<LinkMarkProps, {}, "">;
-type Link = ReturnType<typeof Link>;
+declare const Link: $$IsomorphicComponent;
+type Link<Datum extends DataRecord> = InstanceType<typeof Link<Datum>>;
 export default Link;

package/dist/marks/Pointer.svelte

@@ -1,12 +1,10 @@
-<script module lang="ts">
-    import type { ChannelAccessor, DataRow } from '../types.js';
-
-    export type PointerMarkProps = {
-        data: DataRow[];
-        children: Snippet<[{ data: DataRow[] }]>;
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-        z?: ChannelAccessor;
+<script lang="ts" generics="Datum extends DataRow">
+    interface PointerMarkProps {
+        data: Datum[];
+        children: Snippet<[{ data: Datum[] }]>;
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
         /**
          * maximum cursor distance to select data points
          */
@@ -15,24 +13,21 @@
          * called whenever the selection changes
          * @param data
          */
-        onupdate?: (data: DataRow[]) => void;
-    };
-</script>
+        onupdate?: (data: Datum[]) => void;
+    }
 
-<script lang="ts">
     import { getContext, type Snippet } from 'svelte';
-    import type { PlotContext, PlotDefaults } from '../types.js';
+    import type { ChannelAccessor, DataRow, PlotContext, PlotDefaults } from '../types/index.js';
     import { groups as d3Groups } from 'd3-array';
-
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
-
     import { resolveChannel } from '../helpers/resolve.js';
     import { quadtree } from 'd3-quadtree';
     import { projectXY } from '../helpers/scales.js';
     import isDataRecord from '../helpers/isDataRecord.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
 
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
     let markProps: PointerMarkProps = $props();
 
     const DEFAULTS = {

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

@@ -1,23 +1,36 @@
-import type { ChannelAccessor, DataRow } from '../types.js';
-export type PointerMarkProps = {
-    data: DataRow[];
-    children: Snippet<[{
-        data: DataRow[];
-    }]>;
-    x?: ChannelAccessor;
-    y?: ChannelAccessor;
-    z?: ChannelAccessor;
-    /**
-     * maximum cursor distance to select data points
-     */
-    maxDistance?: number;
-    /**
-     * called whenever the selection changes
-     * @param data
-     */
-    onupdate?: (data: DataRow[]) => void;
-};
 import { type Snippet } from 'svelte';
-declare const Pointer: import("svelte").Component<PointerMarkProps, {}, "">;
-type Pointer = ReturnType<typeof Pointer>;
+import type { ChannelAccessor, DataRow } from '../types/index.js';
+declare class __sveltets_Render<Datum extends DataRow> {
+    props(): {
+        data: Datum[];
+        children: Snippet<[{
+            data: Datum[];
+        }]>;
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
+        /**
+         * maximum cursor distance to select data points
+         */
+        maxDistance?: number;
+        /**
+         * called whenever the selection changes
+         * @param data
+         */
+        onupdate?: ((data: Datum[]) => void) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRow>(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 DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Pointer: $$IsomorphicComponent;
+type Pointer<Datum extends DataRow> = InstanceType<typeof Pointer<Datum>>;
 export default Pointer;

package/dist/marks/Rect.svelte

@@ -2,33 +2,33 @@
     @component
     For arbitrary rectangles, requires quantitative x and y scales 
 -->
-<script module lang="ts">
-    export type RectMarkProps = {
-        data: DataRecord[];
-        x?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
+<script lang="ts" generics="Datum extends DataRecord">
+    interface RectMarkProps
+        extends BaseMarkProps<Datum>,
+            LinkableMarkProps<Datum>,
+            BaseRectMarkProps<Datum> {
+        data: Datum[];
+        x?: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
         interval?: number | string;
-    } & BaseMarkProps &
-        LinkableMarkProps &
-        BaseRectMarkProps;
-</script>
-
-<script lang="ts">
+        className?: string;
+    }
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import { intervalX, intervalY } from '../index.js';
+    import { intervalX, intervalY } from '..';
     import type {
         PlotContext,
         DataRecord,
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        PlotDefaults
-    } from '../types.js';
+        PlotDefaults,
+        LinkableMarkProps
+    } from '../types/index.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
@@ -39,7 +39,7 @@
     };
 
     const {
-        data = [{}],
+        data = [{} as Datum],
         class: className = '',
         ...options
     }: RectMarkProps = $derived({

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

@@ -1,15 +1,88 @@
-export type RectMarkProps = {
-    data: DataRecord[];
-    x?: ChannelAccessor;
-    x1?: ChannelAccessor;
-    x2?: ChannelAccessor;
-    y?: ChannelAccessor;
-    y1?: ChannelAccessor;
-    y2?: ChannelAccessor;
-    interval?: number | string;
-} & BaseMarkProps & LinkableMarkProps & BaseRectMarkProps;
-import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
+import type { DataRecord, BaseRectMarkProps, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+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").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").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").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>;
+        class: string | null;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }> & LinkableMarkProps<Datum> & BaseRectMarkProps<Datum> & {
+        data: Datum[];
+        x?: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
+        interval?: number | string;
+        className?: string;
+    };
+    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 arbitrary rectangles, requires quantitative x and y scales */
-declare const Rect: import("svelte").Component<any, {}, "">;
-type Rect = ReturnType<typeof Rect>;
+declare const Rect: $$IsomorphicComponent;
+type Rect<Datum extends DataRecord> = InstanceType<typeof Rect<Datum>>;
 export default Rect;

package/dist/marks/RectX.svelte

@@ -1,15 +1,16 @@
 <!-- @component
     Convenience wrapper for rectangles oriented along the x axis 
 -->
-<script module lang="ts">
-    export type RectXMarkProps = Omit<RectMarkProps, 'y'> & { stack?: Partial<StackOptions> };
-</script>
 
-<script lang="ts">
-    import Rect, { type RectMarkProps } from './Rect.svelte';
-    import { intervalY, stackX, recordizeX } from '../index.js';
-    import type { PlotContext, PlotDefaults } from '../types.js';
-    import { getContext } from 'svelte';
+<script lang="ts" generics="Datum extends DataRecord">
+    interface RectXMarkProps extends Omit<ComponentProps<typeof Rect>, 'y'> {
+        stack?: Partial<StackOptions>;
+    }
+
+    import Rect from './Rect.svelte';
+    import { intervalY, stackX, recordizeX } from '..';
+    import type { DataRecord, PlotContext, PlotDefaults } from '../types/index.js';
+    import { getContext, type ComponentProps } from 'svelte';
     import type { StackOptions } from '../transforms/stack';
 
     let markProps: RectXMarkProps = $props();
@@ -20,7 +21,7 @@
     };
 
     const {
-        data = [{}],
+        data = [{} as Datum],
         stack,
         ...options
     }: RectXMarkProps = $derived({