svelteplot 0.3.1 → 0.3.2-pr-113.0

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

@@ -1,8 +1,99 @@
-import { type AreaMarkProps } from './Area.svelte';
+import { renameChannels } from '../transforms/rename.js';
+import type { ChannelAccessor, DataRow } from '../types/index.js';
+declare class __sveltets_Render<Datum extends DataRow> {
+    props(): Omit<Partial<{
+        filter?: import("../types/index.js").ConstantAccessor<boolean, import("../types/data").DataRecord>;
+        facet?: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<import("../types/data").DataRecord>;
+        fy: ChannelAccessor<import("../types/data").DataRecord>;
+        dx: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        dy: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        fill: ChannelAccessor<import("../types/data").DataRecord>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        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, import("../types/data").DataRecord>;
+        stroke: ChannelAccessor<import("../types/data").DataRecord>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, import("../types/data").DataRecord>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, import("../types/data").DataRecord>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        opacity: ChannelAccessor<import("../types/data").DataRecord>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, import("../types/data").DataRecord>;
+        clipPath: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, import("../types/data").DataRecord>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, import("../types/data").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/index.js").ConstantAccessor<import("csstype").Property.Cursor, import("../types/data").DataRecord>;
+    }> & import("../types/mark").LinkableMarkProps<import("../types/data").DataRecord> & {
+        data: import("../types/data").DataRecord[];
+        x1?: ChannelAccessor<import("../types/data").DataRecord>;
+        x2?: ChannelAccessor<import("../types/data").DataRecord>;
+        y1?: ChannelAccessor<import("../types/data").DataRecord>;
+        y2?: ChannelAccessor<import("../types/data").DataRecord>;
+        z?: ChannelAccessor<import("../types/data").DataRecord>;
+        curve?: import("../types/index.js").CurveName | import("d3-shape").CurveFactory;
+        tension?: number;
+        sort?: import("../types/index.js").ConstantAccessor<renameChannels> | {
+            channel: "stroke" | "fill";
+        };
+        stack?: Partial<renameChannels>;
+        canvas?: boolean;
+    }, "y1" | "y2"> & {
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<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 area chart with x value and baseline.  Areas are implicitly
  * stacked horizontally if just the x channel is defined.
  */
-declare const AreaX: import("svelte").Component<AreaMarkProps, {}, "">;
-type AreaX = ReturnType<typeof AreaX>;
+declare const AreaX: $$IsomorphicComponent;
+type AreaX<Datum extends DataRow> = InstanceType<typeof AreaX<Datum>>;
 export default AreaX;

package/dist/marks/AreaY.svelte

@@ -2,30 +2,30 @@
     Creates a vertical area chart with y value and baseline. Areas are implicitly 
     stacked vertically if just the y channel is defined.
 -->
-<script lang="ts">
-    import Area, { type AreaMarkProps } from './Area.svelte';
+<script lang="ts" generics="Datum extends DataRow">
+    interface AreaYMarkProps extends Omit<ComponentProps<typeof Area>, 'x1' | 'x2'> {
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+    }
+    import Area from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackY } from '../transforms/stack.js';
     import { recordizeY } from '../transforms/recordize.js';
-    import type { ChannelAccessor, PlotDefaults } from '../types.js';
-    import { getContext } from 'svelte';
+    import type { ChannelAccessor, DataRow, PlotDefaults } from '../types/index.js';
+    import { getContext, type Component, type ComponentProps } from 'svelte';
 
-    /**
-     * AreaY mark foo
-     */
-    type AreaYProps = Omit<AreaMarkProps, 'x1' | 'x2'> & {
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-    };
-
-    let markProps: AreaMarkProps = $props();
+    let markProps: AreaYMarkProps = $props();
 
     const DEFAULTS = getContext<PlotDefaults>('svelteplot/_defaults').areaY;
 
-    const { data, stack, ...options }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
+    const { data, stack, ...options }: AreaYMarkProps = $derived({
+        ...(markProps.y == undefined ? { y1: 0, y2: 0 } : {}),
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const args = $derived(
-        renameChannels<AreaYProps>(
+        renameChannels<AreaYMarkProps>(
             stackY(recordizeY({ data, ...options, x1: null, x2: null }), stack),
             { x: 'x1' }
         )

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

@@ -1,8 +1,99 @@
-import { type AreaMarkProps } from './Area.svelte';
+import { renameChannels } from '../transforms/rename.js';
+import type { ChannelAccessor, DataRow } from '../types/index.js';
+declare class __sveltets_Render<Datum extends DataRow> {
+    props(): Omit<Partial<{
+        filter?: import("../types/index.js").ConstantAccessor<boolean, import("../types/data").DataRecord>;
+        facet?: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<import("../types/data").DataRecord>;
+        fy: ChannelAccessor<import("../types/data").DataRecord>;
+        dx: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        dy: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        fill: ChannelAccessor<import("../types/data").DataRecord>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        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, import("../types/data").DataRecord>;
+        stroke: ChannelAccessor<import("../types/data").DataRecord>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, import("../types/data").DataRecord>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, import("../types/data").DataRecord>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        opacity: ChannelAccessor<import("../types/data").DataRecord>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, import("../types/data").DataRecord>;
+        clipPath: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, import("../types/data").DataRecord>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, import("../types/data").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/index.js").ConstantAccessor<import("csstype").Property.Cursor, import("../types/data").DataRecord>;
+    }> & import("../types/mark").LinkableMarkProps<import("../types/data").DataRecord> & {
+        data: import("../types/data").DataRecord[];
+        x1?: ChannelAccessor<import("../types/data").DataRecord>;
+        x2?: ChannelAccessor<import("../types/data").DataRecord>;
+        y1?: ChannelAccessor<import("../types/data").DataRecord>;
+        y2?: ChannelAccessor<import("../types/data").DataRecord>;
+        z?: ChannelAccessor<import("../types/data").DataRecord>;
+        curve?: import("../types/index.js").CurveName | import("d3-shape").CurveFactory;
+        tension?: number;
+        sort?: import("../types/index.js").ConstantAccessor<renameChannels> | {
+            channel: "stroke" | "fill";
+        };
+        stack?: Partial<renameChannels>;
+        canvas?: boolean;
+    }, "x1" | "x2"> & {
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<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 vertical area chart with y value and baseline. Areas are implicitly
  * stacked vertically if just the y channel is defined.
  */
-declare const AreaY: import("svelte").Component<AreaMarkProps, {}, "">;
-type AreaY = ReturnType<typeof AreaY>;
+declare const AreaY: $$IsomorphicComponent;
+type AreaY<Datum extends DataRow> = InstanceType<typeof AreaY<Datum>>;
 export default AreaY;

package/dist/marks/Arrow.svelte

@@ -1,43 +1,40 @@
 <!-- @component
     Creates arrows with customizable heads, angles, and bending
 -->
-<script module lang="ts">
-    export type ArrowMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
-        data: DataRecord[];
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ArrowMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        data: Datum[];
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
-        x1: ChannelAccessor;
-        y1: ChannelAccessor;
-        x2: ChannelAccessor;
-        y2: ChannelAccessor;
+        x1: ChannelAccessor<Datum>;
+        y1: ChannelAccessor<Datum>;
+        x2: ChannelAccessor<Datum>;
+        y2: ChannelAccessor<Datum>;
         /**
          * the bend angle, in degrees; defaults to 0°; true for 22.5°
          */
-        bend?: ConstantAccessor<number> | true;
+        bend?: ConstantAccessor<number, Datum> | true;
         /**
          * the arrowhead angle, in degrees; defaults to 60°
          */
-        headAngle?: ConstantAccessor<number>;
+        headAngle?: ConstantAccessor<number, Datum>;
         /**
          * the arrowhead scale; defaults to 8
          */
-        headLength?: ConstantAccessor<number>;
+        headLength?: ConstantAccessor<number, Datum>;
         /**
          * inset at the end of the arrow (useful if the arrow points to a dot)
          */
-        insetEnd?: ConstantAccessor<number>;
+        insetEnd?: ConstantAccessor<number, Datum>;
         /**
          * inset at the start of the arrow
          */
-        insetStart?: ConstantAccessor<number>;
+        insetStart?: ConstantAccessor<number, Datum>;
         /**
          * shorthand for the two insets
          */
-        inset?: ConstantAccessor<number>;
+        inset?: ConstantAccessor<number, Datum>;
         sweep?: SweepOption;
-    };
-</script>
-
-<script lang="ts">
+    }
     import { getContext } from 'svelte';
     import type {
         PlotContext,
@@ -47,7 +44,7 @@
         ChannelAccessor,
         RawValue,
         PlotDefaults
-    } from '../types.js';
+    } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { coalesce, maybeData, maybeNumber } from '../helpers/index.js';
     import Mark from '../Mark.svelte';
@@ -66,7 +63,7 @@
     };
 
     const {
-        data = [{}],
+        data = [{} as Datum],
         class: className = '',
         ...options
     }: ArrowMarkProps = $derived({

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

@@ -1,41 +1,113 @@
-export type ArrowMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
-    data: DataRecord[];
-    sort?: ConstantAccessor<RawValue> | {
-        channel: 'stroke' | 'fill';
-    };
-    x1: ChannelAccessor;
-    y1: ChannelAccessor;
-    x2: ChannelAccessor;
-    y2: ChannelAccessor;
-    /**
-     * the bend angle, in degrees; defaults to 0°; true for 22.5°
-     */
-    bend?: ConstantAccessor<number> | true;
-    /**
-     * the arrowhead angle, in degrees; defaults to 60°
-     */
-    headAngle?: ConstantAccessor<number>;
-    /**
-     * the arrowhead scale; defaults to 8
-     */
-    headLength?: ConstantAccessor<number>;
-    /**
-     * inset at the end of the arrow (useful if the arrow points to a dot)
-     */
-    insetEnd?: ConstantAccessor<number>;
-    /**
-     * inset at the start of the arrow
-     */
-    insetStart?: ConstantAccessor<number>;
-    /**
-     * shorthand for the two insets
-     */
-    inset?: ConstantAccessor<number>;
-    sweep?: SweepOption;
-};
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, RawValue } from '../types.js';
+import type { DataRecord, ConstantAccessor, ChannelAccessor, RawValue } from '../types/index.js';
 import { type SweepOption } from '../helpers/arrowPath.js';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): Omit<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>;
+    }>, "fill" | "fillOpacity"> & {
+        data: Datum[];
+        sort?: ConstantAccessor<RawValue> | {
+            channel: "stroke" | "fill";
+        };
+        x1: ChannelAccessor<Datum>;
+        y1: ChannelAccessor<Datum>;
+        x2: ChannelAccessor<Datum>;
+        y2: ChannelAccessor<Datum>;
+        /**
+         * the bend angle, in degrees; defaults to 0°; true for 22.5°
+         */
+        bend?: true | ConstantAccessor<number, Datum>;
+        /**
+         * the arrowhead angle, in degrees; defaults to 60°
+         */
+        headAngle?: ConstantAccessor<number, Datum>;
+        /**
+         * the arrowhead scale; defaults to 8
+         */
+        headLength?: ConstantAccessor<number, Datum>;
+        /**
+         * inset at the end of the arrow (useful if the arrow points to a dot)
+         */
+        insetEnd?: ConstantAccessor<number, Datum>;
+        /**
+         * inset at the start of the arrow
+         */
+        insetStart?: ConstantAccessor<number, Datum>;
+        /**
+         * shorthand for the two insets
+         */
+        inset?: ConstantAccessor<number, Datum>;
+        sweep?: SweepOption;
+    };
+    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 arrows with customizable heads, angles, and bending */
-declare const Arrow: import("svelte").Component<ArrowMarkProps, {}, "">;
-type Arrow = ReturnType<typeof Arrow>;
+declare const Arrow: $$IsomorphicComponent;
+type Arrow<Datum extends DataRecord> = InstanceType<typeof Arrow<Datum>>;
 export default Arrow;

package/dist/marks/AxisX.svelte

@@ -1,13 +1,30 @@
 <!-- @component
     Renders a horizontal axis with labels and tick marks
 -->
-<script module lang="ts">
-    import type { XOR } from 'ts-essentials';
-    export type AxisXMarkProps = Omit<
+<script lang="ts" generics="Datum extends RawValue">
+    import { getContext } from 'svelte';
+    import Mark from '../Mark.svelte';
+    import BaseAxisX from './helpers/BaseAxisX.svelte';
+    import type {
+        PlotContext,
         BaseMarkProps,
-        'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
-    > & {
-        data?: RawValue[];
+        RawValue,
+        ConstantAccessor,
+        FacetContext,
+        PlotDefaults,
+        ChannelName
+    } from '../types/index.js';
+    import autoTimeFormat from '../helpers/autoTimeFormat.js';
+    import { derived } from 'svelte/store';
+    import { autoTicks } from '../helpers/autoTicks.js';
+    import { resolveScaledStyles } from '../helpers/resolve.js';
+
+    interface AxisXMarkProps
+        extends Omit<
+            BaseMarkProps<Datum>,
+            'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+        > {
+        data?: Datum[];
         automatic?: boolean;
         title?: string;
         anchor?: 'top' | 'bottom';
@@ -15,42 +32,23 @@
         facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
         labelAnchor?: 'auto' | 'left' | 'center' | 'right';
         tickSize?: number;
-        tickFontSize?: ConstantAccessor<number>;
+        tickFontSize?: ConstantAccessor<number, Datum>;
         tickPadding?: number;
         tickFormat?:
             | 'auto'
             | Intl.DateTimeFormatOptions
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
-        tickClass?: ConstantAccessor<string>;
+        tickClass?: ConstantAccessor<string, Datum>;
         /** ticks is a shorthand for defining data, tickCount or interval */
-        ticks?: number | string | RawValue[];
+        ticks?: number | string | Datum[];
         /** set to false or null to disable tick labels */
         text: boolean | null;
         /** approximate number of ticks to be generated */
         tickCount?: number;
         /** approximate number of pixels between generated ticks */
         tickSpacing?: number;
-    };
-</script>
-
-<script lang="ts">
-    import { getContext } from 'svelte';
-    import Mark from '../Mark.svelte';
-    import BaseAxisX from './helpers/BaseAxisX.svelte';
-    import type {
-        PlotContext,
-        BaseMarkProps,
-        RawValue,
-        ConstantAccessor,
-        FacetContext,
-        PlotDefaults,
-        ChannelName
-    } from '../types.js';
-    import autoTimeFormat from '../helpers/autoTimeFormat.js';
-    import { derived } from 'svelte/store';
-    import { autoTicks } from '../helpers/autoTicks.js';
-    import { resolveScaledStyles } from '../helpers/resolve.js';
+    }
 
     let markProps: AxisXMarkProps = $props();
 
@@ -211,21 +209,23 @@
     {/if}
     {#if showAxis}
         <BaseAxisX
+            {anchor}
+            {className}
+            {labelAnchor}
+            {options}
+            {plot}
+            {text}
+            {tickClass}
+            {tickFontSize}
+            {tickPadding}
+            {ticks}
+            {tickSize}
+            height={plot.facetHeight}
+            marginTop={plot.options.marginTop}
             scaleFn={plot.scales.x.fn}
             scaleType={plot.scales.x.type}
             tickFormat={useTickFormat}
-            {ticks}
-            marginTop={plot.options.marginTop}
-            height={plot.facetHeight}
-            {anchor}
-            {tickSize}
-            {tickPadding}
-            {tickFontSize}
-            {tickClass}
-            {text}
-            {options}
-            title={useTitle}
-            {plot} />
+            title={useTitle} />
     {/if}
 </Mark>