svelteplot 0.10.3 → 0.11.0

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

@@ -1,71 +1,146 @@
-import type { ChannelAccessor, DataRecord, RawValue } from '../types';
+import type { ChannelAccessor, DataRecord, RawValue } from '../types/index.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Pick<Partial<{
-        filter: import("../types").ConstantAccessor<boolean, Datum>;
+        filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
         fx: ChannelAccessor<Datum>;
         fy: ChannelAccessor<Datum>;
-        dx: import("../types").ConstantAccessor<number, Datum>;
-        dy: import("../types").ConstantAccessor<number, Datum>;
+        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
         dodgeX: import("../transforms/dodge.js").DodgeXOptions;
         dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types").ConstantAccessor<number, Datum>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").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: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types").ConstantAccessor<RawValue, Datum>;
+        } | import("../types/index.js").ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types").ConstantAccessor<number, 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").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
-        imageFilter: import("../types").ConstantAccessor<string, Datum>;
-        shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
-        paintOrder: import("../types").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>;
+        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: (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: import("../types").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
     }>, "fx" | "fy" | "fill" | "stroke" | "class"> & {
+        /** the input data array */
         data: Datum[];
+        /** the horizontal position channel; bound to a band scale for grouping */
         x: ChannelAccessor;
+        /** the vertical position channel; the quantitative values to summarize */
         y: ChannelAccessor;
         /**
          * Custom sort order for grouped box plot data
@@ -74,23 +149,23 @@ declare function $$render<Datum extends DataRecord>(): {
         /**
          * Options for the rule marks that represent the min/max range
          */
-        rule: Record<string, ChannelAccessor<Datum>>;
+        rule?: Record<string, ChannelAccessor<Datum>>;
         /**
          * Options for the bar marks that represent the IQR range
          */
-        bar: Record<string, ChannelAccessor<Datum>>;
+        bar?: Record<string, ChannelAccessor<Datum>>;
         /**
          * Options for the tick marks that represent the median
          */
-        tickMedian: Record<string, ChannelAccessor<Datum>> | boolean;
+        tickMedian?: Record<string, ChannelAccessor<Datum>> | boolean;
         /**
          * Options for the tick marks that represent the min/max range
          */
-        tickMinMax: Record<string, ChannelAccessor<Datum>> | boolean;
+        tickMinMax?: Record<string, ChannelAccessor<Datum>> | boolean;
         /**
          * Options for the dot marks that represent the outliers
          */
-        dot: Record<string, ChannelAccessor<Datum>>;
+        dot?: Record<string, ChannelAccessor<Datum>>;
     };
     exports: {};
     bindings: "";

package/dist/marks/Brush.svelte

@@ -2,6 +2,16 @@
     @component
     For creating a two-dimensional brush selection
 -->
+<script module lang="ts">
+    export type Brush = {
+        x1?: number | Date;
+        x2?: number | Date;
+        y1?: number | Date;
+        y2?: number | Date;
+        enabled: boolean;
+    };
+</script>
+
 <script lang="ts" generics="Datum extends DataRecord">
     interface BrushMarkProps extends Pick<
         BaseMarkProps<Datum>,
@@ -15,6 +25,7 @@
         | 'strokeLinejoin'
         | 'strokeMiterlimit'
     > {
+        /** the brush state object (bindable); contains x1, x2, y1, y2, and enabled */
         brush: Brush;
         /**
          * limit brushing to x or y dimension
@@ -28,8 +39,11 @@
          * size of the (invisible) drag resize area around the edges of the brush selection
          */
         resizeHandleSize?: number;
+        /** called when the user starts dragging to create or move a brush */
         onbrushstart?: (evt: BrushEvent) => void;
+        /** called when the user finishes dragging the brush */
         onbrushend?: (evt: BrushEvent) => void;
+        /** called continuously while the user is dragging the brush */
         onbrush?: (evt: BrushEvent) => void;
     }
     import { getContext, untrack } from 'svelte';
@@ -54,18 +68,9 @@
         ...getPlotDefaults().brush
     };
 
-    type Brush = {
-        x1?: number | Date;
-        x2?: number | Date;
-        y1?: number | Date;
-        y2?: number | Date;
-        enabled: boolean;
-    };
-
     type BrushEvent = MouseEvent & { brush: Brush };
 
     const {
-        data = [{} as Datum],
         stroke,
         strokeWidth,
         strokeDasharray,
@@ -81,7 +86,7 @@
         onbrushstart,
         onbrushend,
         onbrush
-    }: BrushMarkProps = $derived({
+    }: Omit<BrushMarkProps, 'brush'> = $derived({
         ...DEFAULTS,
         ...markProps
     });
@@ -278,10 +283,10 @@
             // draw new brush selection
             action = 'draw';
             if (typeof xScaleFn.invert === 'function' && limitDimension !== 'y') {
-                x1 = x2 = xScaleFn.invert(dragStart[0]);
+                x1 = x2 = xScaleFn.invert(dragStart[0]) as number | Date;
             }
             if (typeof yScaleFn.invert === 'function' && limitDimension !== 'x') {
-                y1 = y2 = yScaleFn.invert(dragStart[1]);
+                y1 = y2 = yScaleFn.invert(dragStart[1]) as number | Date;
             }
         }
         onbrushstart?.({ ...e, brush });
@@ -323,10 +328,10 @@
             const hasX = limitDimension !== 'y';
             const hasY = limitDimension !== 'x';
 
-            const dx1 = !hasX ? 0 : xScaleFn.invert(xScaleFn(x1) + px);
-            const dx2 = !hasX ? 0 : xScaleFn.invert(xScaleFn(x2) + px);
-            const dy1 = !hasY ? 0 : yScaleFn.invert(yScaleFn(y1) + py);
-            const dy2 = !hasY ? 0 : yScaleFn.invert(yScaleFn(y2) + py);
+            const dx1 = (!hasX ? 0 : xScaleFn.invert(xScaleFn(x1) + px)) as number | Date;
+            const dx2 = (!hasX ? 0 : xScaleFn.invert(xScaleFn(x2) + px)) as number | Date;
+            const dy1 = (!hasY ? 0 : yScaleFn.invert(yScaleFn(y1) + py)) as number | Date;
+            const dy2 = (!hasY ? 0 : yScaleFn.invert(yScaleFn(y2) + py)) as number | Date;
 
             if (action === 'move') {
                 // move edges
@@ -335,8 +340,8 @@
                 y1 = dy1;
                 y2 = dy2;
             } else if (action === 'draw') {
-                x2 = !hasX ? 0 : xScaleFn.invert(newPos[0]);
-                y2 = !hasY ? 0 : yScaleFn.invert(newPos[1]);
+                x2 = (!hasX ? 0 : xScaleFn.invert(newPos[0])) as number | Date;
+                y2 = (!hasY ? 0 : yScaleFn.invert(newPos[1])) as number | Date;
 
                 if (constrainToDomain) {
                     x2 = constrain(x2, xDomain as [typeof x2, typeof x2]);
@@ -379,7 +384,7 @@
         action: ActionType,
         swapDir1: string,
         swapDir2: string
-    ) {
+    ): [number | Date, number | Date, ActionType] {
         if (action && v2 < v1) {
             return [
                 v2,
@@ -422,5 +427,5 @@
     stroke="transparent"
     inset={-20}
     {cursor}
-    {onpointerdown}
-    {onpointermove} />
+    onpointerdown={onpointerdown as any}
+    onpointermove={onpointermove as any} />

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

@@ -1,3 +1,10 @@
+export type Brush = {
+    x1?: number | Date;
+    x2?: number | Date;
+    y1?: number | Date;
+    y2?: number | Date;
+    enabled: boolean;
+};
 import type { DataRecord } from '../types/index.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Pick<Partial<{
@@ -7,10 +14,20 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: import("../types/index.js").ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").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: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").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: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").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";
@@ -24,53 +41,110 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: import("../types/index.js").ChannelAccessor<Datum>;
         strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: 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>;
+        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: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
     }>, "stroke" | "strokeWidth" | "strokeOpacity" | "strokeLinejoin" | "strokeLinecap" | "strokeMiterlimit" | "strokeDasharray" | "strokeDashoffset" | "cursor"> & {
-        brush: {
-            x1?: number | Date;
-            x2?: number | Date;
-            y1?: number | Date;
-            y2?: number | Date;
-            enabled: boolean;
-        };
+        /** the brush state object (bindable); contains x1, x2, y1, y2, and enabled */
+        brush: Brush;
         /**
          * limit brushing to x or y dimension
          */
@@ -83,32 +157,17 @@ declare function $$render<Datum extends DataRecord>(): {
          * size of the (invisible) drag resize area around the edges of the brush selection
          */
         resizeHandleSize?: number;
+        /** called when the user starts dragging to create or move a brush */
         onbrushstart?: (evt: MouseEvent & {
-            brush: {
-                x1?: number | Date;
-                x2?: number | Date;
-                y1?: number | Date;
-                y2?: number | Date;
-                enabled: boolean;
-            };
+            brush: Brush;
         }) => void;
+        /** called when the user finishes dragging the brush */
         onbrushend?: (evt: MouseEvent & {
-            brush: {
-                x1?: number | Date;
-                x2?: number | Date;
-                y1?: number | Date;
-                y2?: number | Date;
-                enabled: boolean;
-            };
+            brush: Brush;
         }) => void;
+        /** called continuously while the user is dragging the brush */
         onbrush?: (evt: MouseEvent & {
-            brush: {
-                x1?: number | Date;
-                x2?: number | Date;
-                y1?: number | Date;
-                y2?: number | Date;
-                enabled: boolean;
-            };
+            brush: Brush;
         }) => void;
     };
     exports: {};

package/dist/marks/Cell.svelte

@@ -5,8 +5,11 @@
 <script lang="ts" generics="Datum extends DataRecord">
     interface CellMarkProps
         extends BaseMarkProps<Datum>, LinkableMarkProps<Datum>, BaseRectMarkProps<Datum> {
+        /** the input data array; each element becomes one cell */
         data: Datum[];
+        /** the horizontal position channel; typically an ordinal value */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel; typically an ordinal value */
         y?: ChannelAccessor<Datum>;
         /**
          * Renders using Canvas instead of SVG.
@@ -18,7 +21,8 @@
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        LinkableMarkProps
+        LinkableMarkProps,
+        MarkType
     } from '../types/index.js';
     import Mark from '../Mark.svelte';
     import { recordizeY, sort } from '../index.js';
@@ -64,11 +68,11 @@
 </script>
 
 <Mark
-    type="cell"
     required={['x', 'y']}
     requiredScales={{ x: ['band'], y: ['band'] }}
     channels={['x', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
-    {...args}>
+    {...args}
+    type={'cell' as MarkType}>
     {#snippet children({ scaledData, usedScales })}
         {@const bwx = plot.scales.x.fn.bandwidth()}
         {@const bwy = plot.scales.y.fn.bandwidth()}
@@ -82,10 +86,10 @@
                     )
                     .map((d) => ({
                         ...d,
-                        x1: d.x - bwx * 0.5,
-                        x2: d.x + bwx * 0.5,
-                        y1: d.y - bwy * 0.5,
-                        y2: d.y + bwy * 0.5
+                        x1: (d.x as number) - bwx * 0.5,
+                        x2: (d.x as number) + bwx * 0.5,
+                        y1: (d.y as number) - bwy * 0.5,
+                        y2: (d.y as number) + bwy * 0.5
                     }))}
                 <RectCanvas options={args} data={rectCanvasData} {usedScales} />
             {:else}
@@ -96,8 +100,8 @@
                             class={className}
                             {usedScales}
                             options={args}
-                            x={d.x - bwx * 0.5}
-                            y={d.y - bwy * 0.5}
+                            x={(d.x as number) - bwx * 0.5}
+                            y={(d.y as number) - bwy * 0.5}
                             width={bwx}
                             height={bwy} />
                     {/if}