svelteplot 0.3.1 → 0.3.2-pr-113.1

package/dist/marks/BrushY.svelte

@@ -1,11 +1,13 @@
-<script module lang="ts">
-    export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
-</script>
-
+<!--
+    @component
+    For creating a brush that can be dragged vertically
+-->
 <script lang="ts">
-    import Brush, { type BrushMarkProps } from './Brush.svelte';
-    import type { PlotDefaults } from '../types.js';
-    import { getContext } from 'svelte';
+    import Brush from './Brush.svelte';
+    import type { PlotDefaults } from '../types/index.js';
+    import { getContext, type ComponentProps } from 'svelte';
+
+    interface BrushYMarkProps extends Omit<ComponentProps<typeof Brush>, 'limitDimension'> {}
 
     let { brush = $bindable({ enabled: false }), ...options }: BrushYMarkProps = $props();
     const DEFAULTS = {

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

@@ -1,5 +1,8 @@
-export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
-import { type BrushMarkProps } from './Brush.svelte';
+import Brush from './Brush.svelte';
+import { type ComponentProps } from 'svelte';
+interface BrushYMarkProps extends Omit<ComponentProps<typeof Brush>, 'limitDimension'> {
+}
+/** For creating a brush that can be dragged vertically */
 declare const BrushY: import("svelte").Component<BrushYMarkProps, {}, "brush">;
 type BrushY = ReturnType<typeof BrushY>;
 export default BrushY;

package/dist/marks/Cell.svelte

@@ -2,29 +2,28 @@
     @component
     For arbitrary rectangles, requires band x and y scales 
 -->
-<script module lang="ts">
+<script lang="ts" generics="Datum extends DataRecord">
+    interface CellMarkProps
+        extends BaseMarkProps<Datum>,
+            LinkableMarkProps<Datum>,
+            BaseRectMarkProps<Datum> {
+        data: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+    }
     import type {
         PlotContext,
         DataRecord,
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        PlotDefaults
-    } from '../types.js';
-
-    export type CellMarkProps = BaseMarkProps &
-        LinkableMarkProps &
-        BaseRectMarkProps & {
-            data: DataRecord[];
-            x?: ChannelAccessor;
-            y?: ChannelAccessor;
-        };
-</script>
-
-<script lang="ts">
+        PlotDefaults,
+        LinkableMarkProps,
+        MarkType
+    } from '../types/index.js';
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import { recordizeY, sort } from '../index.js';
+    import { recordizeY, sort } from '..';
     import { resolveChannel } from '../helpers/resolve.js';
 
     import { isValid } from '../helpers/isValid.js';
@@ -37,7 +36,7 @@
     };
 
     const {
-        data = [{}],
+        data = [{} as Datum],
         class: className = '',
         ...options
     }: CellMarkProps = $derived({
@@ -59,8 +58,8 @@
                       sort: { channel: 'x' }
                   }),
                   sort: { channel: 'y' }
-              }) as Props)
-    );
+              }) as CellMarkProps)
+    ) as CellMarkProps;
 </script>
 
 <Mark

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

@@ -1,10 +1,82 @@
-import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type CellMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
-    data: DataRecord[];
-    x?: ChannelAccessor;
-    y?: ChannelAccessor;
-};
+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.js").RawValue, b: import("../types/data.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
+        onclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondblclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmousedown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmousemove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointercancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerdown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointermove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondrag?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondrop?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchmove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchcancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        oncontextmenu?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onwheel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        class: string | null;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }> & LinkableMarkProps<Datum> & BaseRectMarkProps<Datum> & {
+        data: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<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']>;
+}
 /** For arbitrary rectangles, requires band x and y scales */
-declare const Cell: import("svelte").Component<any, {}, "">;
-type Cell = ReturnType<typeof Cell>;
+declare const Cell: $$IsomorphicComponent;
+type Cell<Datum extends DataRecord> = InstanceType<typeof Cell<Datum>>;
 export default Cell;

package/dist/marks/CellX.svelte

@@ -1,18 +1,22 @@
-<script module lang="ts">
-    export type CellXMarkProps = Omit<CellMarkProps, 'y'>;
-</script>
-
+<!--
+    @component
+    For arbitrary rectangles with fixed y position, requires band x scale
+-->
 <script lang="ts">
-    import Cell, { type CellMarkProps } from './Cell.svelte';
-    import { recordizeY } from '../index.js';
+    import Cell from './Cell.svelte';
+    import { recordizeY } from '..';
+    import type { ComponentProps } from 'svelte';
+    import type { TransformArgsRow } from '../types/index.js';
+
+    interface CellXMarkProps extends Omit<ComponentProps<typeof Cell>, 'y'> {}
 
     let { data = [{}], ...options }: CellXMarkProps = $props();
 
     const args = $derived(
-        recordizeY<CellXMarkProps>({
+        recordizeY({
             data,
             ...options
-        })
+        } as TransformArgsRow)
     );
 </script>
 

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

@@ -1,5 +1,8 @@
-export type CellXMarkProps = Omit<CellMarkProps, 'y'>;
-import { type CellMarkProps } from './Cell.svelte';
+import Cell from './Cell.svelte';
+import type { ComponentProps } from 'svelte';
+interface CellXMarkProps extends Omit<ComponentProps<typeof Cell>, 'y'> {
+}
+/** For arbitrary rectangles with fixed y position, requires band x scale */
 declare const CellX: import("svelte").Component<CellXMarkProps, {}, "">;
 type CellX = ReturnType<typeof CellX>;
 export default CellX;

package/dist/marks/CellY.svelte

@@ -1,18 +1,22 @@
-<script module lang="ts">
-    export type CellYMarkProps = Omit<CellMarkProps, 'x'>;
-</script>
-
+<!--
+    @component
+    For arbitrary rectangles with fixed x position, requires band y scale
+-->
 <script lang="ts">
-    import Cell, { type CellMarkProps } from './Cell.svelte';
-    import { recordizeX } from '../index.js';
+    import Cell from './Cell.svelte';
+    import { recordizeX } from '..';
+    import type { ComponentProps } from 'svelte';
+    import type { TransformArgsRow } from '../types/index.js';
+
+    interface CellYMarkProps extends Omit<ComponentProps<typeof Cell>, 'x'> {}
 
     let { data = [{}], ...options }: CellYMarkProps = $props();
 
     const args = $derived(
-        recordizeX<CellYMarkProps>({
+        recordizeX({
             data,
             ...options
-        })
+        } as TransformArgsRow)
     );
 </script>
 

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

@@ -1,5 +1,8 @@
-export type CellYMarkProps = Omit<CellMarkProps, 'x'>;
-import { type CellMarkProps } from './Cell.svelte';
+import Cell from './Cell.svelte';
+import type { ComponentProps } from 'svelte';
+interface CellYMarkProps extends Omit<ComponentProps<typeof Cell>, 'x'> {
+}
+/** For arbitrary rectangles with fixed x position, requires band y scale */
 declare const CellY: import("svelte").Component<CellYMarkProps, {}, "">;
 type CellY = ReturnType<typeof CellY>;
 export default CellY;

package/dist/marks/ColorLegend.svelte

@@ -1,17 +1,14 @@
-<script module lang="ts">
-    export type ColorLegendMarkProps = {
-        class: string | null;
-    };
-</script>
-
 <script lang="ts">
+    interface ColorLegendMarkProps {
+        class: string | null;
+    }
     import { getContext } from 'svelte';
-    import { Plot, AxisX, Frame } from '../index.js';
+    import { Plot, AxisX, Frame } from '..';
     import { symbol as d3Symbol } from 'd3-shape';
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
-    import type { PlotDefaults, PlotContext } from '../types.js';
+    import type { PlotDefaults, PlotContext } from '../types/index.js';
 
     let { class: className = null }: ColorLegendMarkProps = $props();
 

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

@@ -1,6 +1,6 @@
-export type ColorLegendMarkProps = {
+interface ColorLegendMarkProps {
     class: string | null;
-};
+}
 /**
  * The ColorLegend is an HTML mark that can be placed in the header, footer and overlay
  * snippets. You can activate an implicit ColorLegend above the chart using the global

package/dist/marks/CustomMark.svelte

@@ -2,21 +2,22 @@
     @component
     For showing custom SVG marks positioned at x/y coordinates
 -->
-<script module lang="ts">
-    import type { ChannelAccessor, DataRow } from '../types.js';
-    import type { Snippet } from 'svelte';
-
-    export type HTMLMarkProps = {
-        data: DataRow[];
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-        children: Snippet<{ datum: DataRow; x: number; y: number }>;
-    };
-</script>
+<script lang="ts" generics="Datum extends DataRecord">
+    interface CustomMarkProps extends BaseMarkProps<Datum> {
+        data: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        children: Snippet<[{ datum: Datum; x: number; y: number }]>;
+    }
 
-<script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext } from '../types.js';
+    import type {
+        PlotContext,
+        DataRecord,
+        ChannelAccessor,
+        BaseMarkProps
+    } from '../types/index.js';
+    import type { Snippet } from 'svelte';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
@@ -26,13 +27,19 @@
     import { isValid } from '../helpers/index.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
 
-    let { data = [{}], x, y, children, class: className = null }: HTMLMarkProps = $props();
+    let {
+        data = [{} as Datum],
+        x,
+        y,
+        children,
+        class: className = null
+    }: CustomMarkProps = $props();
 </script>
 
 <GroupMultiple class="g-custom-mark {className || ''}" length={className ? 2 : data.length}>
     {#each data as datum, i (i)}
-        {@const x_ = resolveChannel('x', datum, { x, y })}
-        {@const y_ = resolveChannel('y', datum, { x, y })}
+        {@const x_ = resolveChannel<Datum>('x', datum, { x, y })}
+        {@const y_ = resolveChannel<Datum>('y', datum, { x, y })}
         {#if isValid(x_) && isValid(y_)}
             {@const [px, py] = projectXY(plot.scales, x_, y_)}
             <g transform="translate({px}, {py})">

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

@@ -1,16 +1,19 @@
-import type { ChannelAccessor, DataRow } from '../types.js';
-import type { Snippet } from 'svelte';
-export type HTMLMarkProps = {
-    data: DataRow[];
-    x?: ChannelAccessor;
-    y?: ChannelAccessor;
-    children: Snippet<{
-        datum: DataRow;
-        x: number;
-        y: number;
-    }>;
-};
+import type { DataRecord } from '../types/index.js';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): any;
+    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 showing custom SVG marks positioned at x/y coordinates */
-declare const CustomMark: import("svelte").Component<HTMLMarkProps, {}, "">;
-type CustomMark = ReturnType<typeof CustomMark>;
+declare const CustomMark: $$IsomorphicComponent;
+type CustomMark<Datum extends DataRecord> = InstanceType<typeof CustomMark<Datum>>;
 export default CustomMark;

package/dist/marks/CustomMarkHTML.svelte

@@ -2,14 +2,12 @@
     @component
     For showing custom HTML tooltips positioned at x/y coordinates
 -->
-<script module lang="ts">
-    import type { ChannelAccessor, ConstantAccessor, DataRow } from '../types.js';
-    import type { Snippet } from 'svelte';
 
-    export type HTMLMarkProps = {
-        data: DataRow[];
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
+<script lang="ts" generics="Datum extends DataRecord">
+    interface CustomMarkHTMLProps {
+        data: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
         frameAnchor?: ConstantAccessor<
             | 'bottom'
             | 'top'
@@ -19,15 +17,19 @@
             | 'bottom-left'
             | 'top-right'
             | 'bottom-right'
-            | 'center'
+            | 'center',
+            Datum
         >;
-        children: Snippet<{ datum: DataRow; x: number; y: number }>;
-    };
-</script>
-
-<script lang="ts">
-    import { getContext } from 'svelte';
-    import type { PlotContext } from '../types.js';
+        class: string | null;
+        children: Snippet<{ datum: Datum; x: number; y: number }>;
+    }
+    import { getContext, type Snippet } from 'svelte';
+    import type {
+        ChannelAccessor,
+        ConstantAccessor,
+        DataRecord,
+        PlotContext
+    } from '../types/index.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -37,15 +39,15 @@
     import { isValid } from '../helpers/index.js';
 
     let {
-        data = [{}],
+        data = [{} as Datum],
         x,
         y,
         frameAnchor,
         children,
         class: className = null
-    }: HTMLMarkProps = $props();
+    }: CustomMarkHTMLProps = $props();
 
-    function getXY(datum) {
+    function getXY(datum: Datum) {
         const fa = frameAnchor || 'center';
         const isLeft = fa.endsWith('left');
         const isRight = fa.endsWith('right');

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

@@ -1,17 +1,31 @@
-import type { ChannelAccessor, ConstantAccessor, DataRow } from '../types.js';
-import type { Snippet } from 'svelte';
-export type HTMLMarkProps = {
-    data: DataRow[];
-    x?: ChannelAccessor;
-    y?: ChannelAccessor;
-    frameAnchor?: ConstantAccessor<'bottom' | 'top' | 'left' | 'right' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right' | 'center'>;
-    children: Snippet<{
-        datum: DataRow;
-        x: number;
-        y: number;
-    }>;
-};
+import { type Snippet } from 'svelte';
+import type { ChannelAccessor, ConstantAccessor, DataRecord } from '../types/index.js';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): {
+        data: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        frameAnchor?: ConstantAccessor<"bottom" | "top" | "left" | "right" | "center" | "top-left" | "bottom-left" | "top-right" | "bottom-right", Datum>;
+        class: string | null;
+        children: Snippet<{
+            datum: Datum;
+            x: number;
+            y: number;
+        }>;
+    };
+    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 showing custom HTML tooltips positioned at x/y coordinates */
-declare const CustomMarkHtml: import("svelte").Component<HTMLMarkProps, {}, "">;
-type CustomMarkHtml = ReturnType<typeof CustomMarkHtml>;
+declare const CustomMarkHtml: $$IsomorphicComponent;
+type CustomMarkHtml<Datum extends DataRecord> = InstanceType<typeof CustomMarkHtml<Datum>>;
 export default CustomMarkHtml;

package/dist/marks/DifferenceY.svelte

@@ -1,43 +1,59 @@
-<script module lang="ts">
-    export type DifferenceYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
-        data: DataRecord[];
+<script lang="ts" generics="Datum extends DataRecord">
+    interface DifferenceYMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        data: Datum[];
         /*
          * the horizontal position of the comparison; bound to the x scale
          */
-        x1: ChannelAccessor;
+        x1: ChannelAccessor<Datum>;
         /**
          * the horizontal position of the metric; bound to the x scale
          */
-        x2: ChannelAccessor;
-        x: ChannelAccessor;
+        x2: ChannelAccessor<Datum>;
+        x: ChannelAccessor<Datum>;
         /**
          * the vertical position of the comparison; bound to the y scale
          */
-        y1: ChannelAccessor;
+        y1: ChannelAccessor<Datum>;
         /**
          * the vertical position of the metric; bound to the y scale
          */
-        y2: ChannelAccessor;
-        y: ChannelAccessor;
+        y2: ChannelAccessor<Datum>;
+        y: ChannelAccessor<Datum>;
         fillOpacity?: number;
+        /**
+         * the stroke color of the "positive" area; defaults to 'blue'
+         */
         positiveFill?: string;
+        /**
+         * the fill opacity of the "positive" area; defaults to 1
+         */
         positiveFillOpacity?: number;
+        /**
+         * the stroke color of the "negative" area; defaults to 'red'
+         */
         negativeFill?: string;
+        /**
+         * the fill opacity of the "negative" area; defaults to 1
+         */
         negativeFillOpacity?: number;
+        /**
+         * curve type for the area; defaults to 'linear'
+         */
         curve?: CurveName | CurveFactory;
+        /**
+         * the tension of the area curve; defaults to 0
+         */
         tension?: number;
-    };
-</script>
-
-<script lang="ts">
+    }
     import type {
         BaseMarkProps,
         ChannelAccessor,
         CurveName,
         DataRecord,
-        PlotContext
-    } from '../types.js';
-    import { Line, Area } from '../index.js';
+        PlotContext,
+        PlotDefaults
+    } from '../types/index.js';
+    import { Line, Area } from './';
     import { randomId, coalesce } from '../helpers/index.js';
     import { getContext } from 'svelte';
     import { extent, max, min } from 'd3-array';
@@ -47,8 +63,28 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
 
-    let { data, stroke, class: className = null, ...options }: DifferenceYMarkProps = $props();
-    let { x, x1, x2, y, y1, y2 } = $derived(options);
+    let markProps: DifferenceYMarkProps = $props();
+
+    const DEFAULTS = {
+        positiveFill: 'red',
+        positiveFillOpacity: 1,
+        negativeFill: 'blue',
+        negativeFillOpacity: 1,
+        curve: 'linear' as CurveName,
+        tension: 0,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').differenceY
+    };
+
+    const {
+        data,
+        stroke,
+        class: className = null,
+        ...options
+    }: DifferenceYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
+    const { x, x1, x2, y, y1, y2 } = $derived(options);
 
     const x1x2Differ = $derived((x1 == null || x2 == null) && x1 !== x2);