svelteplot 0.3.1 → 0.3.2-pr-113.1

package/dist/Mark.svelte

@@ -1,6 +1,24 @@
-<script lang="ts">
-    import { getContext, untrack, type Snippet } from 'svelte';
+<script lang="ts" generics="Datum extends DataRecord">
+    interface MarkProps extends Partial<BaseMarkProps<Datum>> {
+        data?: Datum[];
+        automatic?: boolean;
+        type: MarkType;
+        channels?: ScaledChannelName[];
+        required?: ScaledChannelName[];
+        requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
+        children?: Snippet<
+            [
+                {
+                    mark: Mark<GenericMarkOptions>;
+                    usedScales: ReturnType<typeof getUsedScales>;
+                    scaledData: ScaledDataRecord[];
+                }
+            ]
+        >;
+        defaults?: Partial<Record<ScaledChannelName, RawValue>>;
+    }
 
+    import { getContext, untrack, type Snippet } from 'svelte';
     import { CHANNEL_SCALE, INDEX } from './constants.js';
     import type {
         ScaledChannelName,
@@ -17,32 +35,12 @@
         ResolvedDataRecord,
         ScaledDataRecord,
         ScaleType
-    } from './types.js';
+    } from './types/index.js';
     import { isEqual } from 'es-toolkit';
     import { getUsedScales, projectXY, projectX, projectY } from './helpers/scales.js';
     import { testFilter, isValid } from './helpers/index.js';
     import { resolveChannel, resolveProp } from './helpers/resolve.js';
 
-    type MarkProps = {
-        data?: DataRecord[];
-        automatic?: boolean;
-        type: MarkType;
-        channels?: ScaledChannelName[];
-        required?: ScaledChannelName[];
-        requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
-        children?: Snippet<
-            [
-                {
-                    mark: Mark<GenericMarkOptions>;
-                    usedScales: ReturnType<typeof getUsedScales>;
-                    scaledData: ScaledDataRecord[];
-                }
-            ]
-        >;
-        defaults?: Partial<Record<ScaledChannelName, RawValue>>;
-    } & Partial<Record<ChannelName, ChannelAccessor>> &
-        Partial<BaseMarkProps>;
-
     let {
         data = [],
         children,
@@ -134,13 +132,13 @@
     const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
     const testFacet = $derived(getTestFacet());
 
-    const resolvedData: ResolvedDataRecord[] = $derived(
+    const resolvedData: ResolvedDataRecord<Datum>[] = $derived(
         data
             .map((d, i) => ({ ...d, [INDEX]: i }))
             .flatMap((row) => {
-                const channels = options as Record<ChannelName, ChannelAccessor>;
+                const channels = options as Record<ChannelName, ChannelAccessor<Datum>>;
                 if (!testFacet(row, channels) || !testFilter(row, channels)) return [];
-                const out: ResolvedDataRecord = {
+                const out: ResolvedDataRecord<Datum> = {
                     datum: row
                 };
                 for (const [channel] of Object.entries(CHANNEL_SCALE) as [
@@ -208,7 +206,7 @@
      */
     const scaledData = $derived(
         resolvedData.flatMap((row) => {
-            const out: ScaledDataRecord = {
+            const out: ScaledDataRecord<Datum> = {
                 datum: row.datum,
                 valid: true
             };

package/dist/Mark.svelte.d.ts

@@ -1,22 +1,92 @@
 import { type Snippet } from 'svelte';
-import type { ScaledChannelName, MarkType, DataRecord, ChannelName, GenericMarkOptions, ChannelAccessor, BaseMarkProps, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types.js';
+import type { ScaledChannelName, MarkType, DataRecord, ChannelAccessor, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types/index.js';
 import { getUsedScales } from './helpers/scales.js';
-type MarkProps = {
-    data?: DataRecord[];
-    automatic?: boolean;
-    type: MarkType;
-    channels?: ScaledChannelName[];
-    required?: ScaledChannelName[];
-    requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
-    children?: Snippet<[
-        {
-            mark: Mark<GenericMarkOptions>;
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): Partial<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: RawValue, b: RawValue) => number) | import("./types/index.js").ConstantAccessor<RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: import("./types/index.js").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("./types/index.js").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("./types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("./types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("./types/index.js").ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: import("./types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("./types/index.js").ConstantAccessor<number, Datum>;
+        mixBlendMode: import("./types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        imageFilter: import("./types/index.js").ConstantAccessor<string, Datum>;
+        shapeRendering: import("./types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("./types/index.js").ConstantAccessor<string, Datum>;
+        onclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondblclick?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmousedown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmousemove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onmouseover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointercancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerdown?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerup?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointermove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onpointerout?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondrag?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondrop?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragenter?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragleave?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragover?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ondragend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchstart?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchmove?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchend?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        ontouchcancel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        oncontextmenu?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        onwheel?: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
+        class: string | null;
+        cursor: import("./types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }>> & {
+        data?: Datum[] | undefined;
+        automatic?: boolean;
+        type: MarkType;
+        channels?: ScaledChannelName[];
+        required?: ScaledChannelName[];
+        requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
+        children?: Snippet<[{
+            mark: any;
             usedScales: ReturnType<typeof getUsedScales>;
             scaledData: ScaledDataRecord[];
-        }
-    ]>;
-    defaults?: Partial<Record<ScaledChannelName, RawValue>>;
-} & Partial<Record<ChannelName, ChannelAccessor>> & Partial<BaseMarkProps>;
-declare const Mark: import("svelte").Component<MarkProps, {}, "">;
-type Mark = ReturnType<typeof Mark>;
+        }]> | undefined;
+        defaults?: Partial<Record<ScaledChannelName, RawValue>>;
+    };
+    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']>;
+}
+declare const Mark: $$IsomorphicComponent;
+type Mark<Datum extends DataRecord> = InstanceType<typeof Mark<Datum>>;
 export default Mark;

package/dist/Plot.svelte

@@ -12,7 +12,7 @@
 <script lang="ts">
     import Plot from './core/Plot.svelte';
 
-    import type { PlotDefaults, PlotOptions } from './types.js';
+    import type { PlotDefaults, PlotOptions } from './types/index.js';
 
     // implicit marks
     import AxisX from './marks/AxisX.svelte';
@@ -28,7 +28,6 @@
     import { autoScale, autoScaleColor } from './helpers/autoScales.js';
     import { namedProjection } from './helpers/autoProjection.js';
     import { isObject } from './helpers/index.js';
-    import { getContext } from 'svelte';
 
     let {
         header: userHeader,

package/dist/Plot.svelte.d.ts

@@ -1,5 +1,5 @@
 import Plot from './core/Plot.svelte';
-import type { PlotOptions } from './types.js';
+import type { PlotOptions } from './types/index.js';
 /**
  * The Plot component is the container for plots. It collects the marks with
  * their data and channels and computes the shared scales.

package/dist/core/Facet.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { setContext, type Snippet } from 'svelte';
     import { resolveChannel } from '../helpers/resolve.js';
-    import type { BaseMarkProps, DataRecord, RawValue } from '../types.js';
+    import type { BaseMarkProps, DataRecord, RawValue } from '../types/index.js';
 
     let {
         fx,

package/dist/core/Facet.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import type { RawValue } from '../types.js';
+import type { RawValue } from '../types/index.js';
 type $$ComponentProps = {
     fx: RawValue;
     fy: RawValue;

package/dist/core/FacetAxes.svelte

@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext } from '../types.js';
+    import type { PlotContext } from '../types/index.js';
     import { scaleBand } from 'd3-scale';
     import BaseAxisX from '../marks/helpers/BaseAxisX.svelte';
     import BaseAxisY from '../marks/helpers/BaseAxisY.svelte';

package/dist/core/FacetGrid.svelte

@@ -5,7 +5,7 @@
 -->
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
-    import type { PlotContext, GenericMarkOptions, Mark } from '../types.js';
+    import type { PlotContext, GenericMarkOptions, Mark } from '../types/index.js';
     import { scaleBand } from 'd3-scale';
     import Facet from './Facet.svelte';
     import { getEmptyFacets } from '../helpers/facets.js';

package/dist/core/FacetGrid.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import type { GenericMarkOptions, Mark } from '../types.js';
+import type { GenericMarkOptions, Mark } from '../types/index.js';
 type $$ComponentProps = {
     children: Snippet;
     marks: Mark<GenericMarkOptions>[];

package/dist/core/Plot.svelte

@@ -22,7 +22,7 @@
         PlotDefaults,
         PlotState,
         RawValue
-    } from '../types.js';
+    } from '../types/index.js';
     import FacetGrid from './FacetGrid.svelte';
 
     import mergeDeep from '../helpers/mergeDeep.js';

package/dist/core/Plot.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { PlotOptions } from '../types.js';
+import type { PlotOptions } from '../types/index.js';
 /**
  * The core Plot component handles the main layout of the plot but it does not
  * include smart automatic scales and marks. It is to be used in cases where

package/dist/helpers/autoTicks.js

@@ -35,7 +35,7 @@ export function autoTicks(type, ticks, interval, domain, scaleFn, count) {
     if (interval) {
         const [lo, hi] = extent(domain);
         const I = maybeInterval(interval, type);
-        return I.range(lo, I.offset(hi));
+        return I.range(lo, I.offset(hi)).filter((d) => d >= lo && d <= hi);
     }
     return typeof scaleFn.ticks === 'function' ? scaleFn.ticks(count) : [];
 }

package/dist/helpers/colors.d.ts

@@ -6,7 +6,7 @@ type SchemeGetter = (n: number) => readonly string[];
 export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
 export declare function ordinalScheme(scheme: string): SchemeGetter | undefined;
 export declare function ordinalRange(scheme: string, length: number): readonly string[] | undefined;
-export declare function maybeBooleanRange(domain: boolean[], scheme?: string): unknown[] | undefined;
+export declare function maybeBooleanRange(domain: boolean[], scheme?: string): any[] | undefined;
 export declare function isQuantitativeScheme(scheme: string): boolean;
 export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
 export declare function isDivergingScheme(scheme: string): boolean;

package/dist/helpers/getBaseStyles.d.ts

@@ -5,3 +5,5 @@ export declare function getBaseStylesObject(datum: DataRow, props: Partial<Chann
 };
 export default function (datum: DataRow, props: Partial<Channels>): string;
 export declare function maybeToPixel(cssKey: string, value: string | number): string | number;
+export declare function maybeFromPixel(value: string | number): string | number;
+export declare function maybeFromRem(value: string | number, rootFontSize?: number): string | number;

package/dist/helpers/getBaseStyles.js

@@ -41,3 +41,11 @@ export function maybeToPixel(cssKey, value) {
     }
     return value;
 }
+export function maybeFromPixel(value) {
+    return typeof value === 'string' && value.endsWith('px') ? +value.slice(0, -2) : value;
+}
+export function maybeFromRem(value, rootFontSize = 16) {
+    return typeof value === 'string' && value.endsWith('rem')
+        ? +value.slice(0, -3) * rootFontSize
+        : value;
+}

package/dist/helpers/index.d.ts

@@ -3,8 +3,8 @@ import type { Snippet } from 'svelte';
 /**
  * Returns first argument that is not null or undefined
  */
-export declare function coalesce(...args: (RawValue | undefined | null)[]): RawValue | null;
-export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): string | number | boolean | symbol | Date | null;
+export declare function coalesce(...args: (RawValue | undefined | null)[]): any;
+export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): any;
 export declare function randomId(): string;
 export declare function isSnippet(value: unknown): value is Snippet;
 export declare function isValid(value: RawValue | undefined): value is number | Date | string;

package/dist/helpers/projection.d.ts

@@ -1,4 +1,4 @@
-type Clip = boolean | null | number | 'frame';
+export type Clip = boolean | null | number | 'frame';
 type ProjectionOptions = {
     type: string;
     domain: number[];

package/dist/helpers/resolve.d.ts

@@ -10,7 +10,7 @@ type ChannelOptions = {
     channel?: ScaledChannelName | null;
 };
 export declare function toChannelOption(name: ScaledChannelName, channel: ChannelAccessor | ChannelAlias): ChannelOptions;
-export declare function resolveChannel(channel: ChannelName, datum: DataRow, channels: Partial<Record<ChannelName, ChannelAccessor | ChannelAlias>>): RawValue;
+export declare function resolveChannel<T>(channel: ChannelName, datum: DataRow<T>, channels: Partial<Record<ChannelName, ChannelAccessor<T> | ChannelAlias>>): RawValue;
 export declare function resolveScaledStyleProps(datum: DataRecord, channels: Partial<Record<ScaledChannelName, ChannelAccessor>>, useScale: Record<ScaledChannelName, boolean>, plot: PlotState, defaultColorProp?: 'fill' | 'stroke' | null): any;
 export declare function resolveScaledStyles(datum: DataRecord, channels: Partial<Record<ScaledChannelName, ChannelAccessor> & {
     style: string;

package/dist/helpers/scales.d.ts

@@ -15,7 +15,7 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
     autoTitle?: undefined;
 } | {
     type: ScaleType;
-    domain: RawValue[] | [undefined, undefined];
+    domain: any;
     range: any;
     fn: any;
     skip: Map<ScaledChannelName, Set<symbol>>;

package/dist/helpers/typeChecks.d.ts

@@ -1,10 +1,10 @@
 import type { RawValue } from '../types.js';
-export declare function isBooleanOrNull(v: RawValue): v is boolean;
+export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDate(v: RawValue): v is Date;
-export declare function isDateOrNull(v: RawValue | null | undefined): v is Date | null | undefined;
+export declare function isDateOrNull(v: RawValue | null | undefined): boolean;
 export declare function isNumberOrNull(v: RawValue | null | undefined): boolean;
 export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): boolean;
-export declare function isStringOrNull(v: RawValue | null | undefined): v is string | null | undefined;
+export declare function isStringOrNull(v: RawValue | null | undefined): boolean;
 export declare function isSymbolOrNull(v: RawValue | null | undefined): boolean;
-export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
+export declare function isColorOrNull(v: RawValue | null | undefined): any;
 export declare function isOpacityOrNull(v: RawValue): boolean;

package/dist/marks/Area.svelte

@@ -1,24 +1,21 @@
 <!-- @component
     Creates an area chart with filled regions between two x-y value pairs
 -->
-<script module lang="ts">
-    export type AreaMarkProps = {
-        data: DataRecord[];
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        z?: ChannelAccessor;
+<script lang="ts" generics="Datum extends DataRecord">
+    interface AreaMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        data: Datum[];
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
         curve?: CurveName | CurveFactory;
         tension?: number;
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
-    } & BaseMarkProps &
-        LinkableMarkProps;
-</script>
+    }
 
-<script lang="ts">
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import { getContext } from 'svelte';
@@ -41,23 +38,23 @@
         ScaledDataRecord,
         LinkableMarkProps,
         PlotDefaults
-    } from '../types.js';
-    import type { RawValue } from '../types.js';
+    } from '../types/index.js';
+    import type { RawValue } from '../types/index.js';
     import type { StackOptions } from '../transforms/stack.js';
 
     let markProps: AreaMarkProps = $props();
 
     const DEFAULTS = {
         fill: 'currentColor',
-        curve: 'linear',
+        curve: 'linear' as CurveName,
         tension: 0,
         ...getContext<PlotDefaults>('svelteplot/_defaults').area
     };
 
     const {
-        data,
+        data = [{} as Datum],
         /** the curve */
-        curve = 'linear',
+        curve = 'linear' as CurveName,
         tension = 0,
         class: className = '',
         canvas = false,

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

@@ -1,23 +1,95 @@
-export type AreaMarkProps = {
-    data: DataRecord[];
-    x1?: ChannelAccessor;
-    x2?: ChannelAccessor;
-    y1?: ChannelAccessor;
-    y2?: ChannelAccessor;
-    z?: ChannelAccessor;
-    curve?: CurveName | CurveFactory;
-    tension?: number;
-    sort?: ConstantAccessor<RawValue> | {
-        channel: 'stroke' | 'fill';
-    };
-    stack?: Partial<StackOptions>;
-    canvas?: boolean;
-} & BaseMarkProps & LinkableMarkProps;
 import { type CurveFactory } from 'd3-shape';
-import type { CurveName, DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types.js';
-import type { RawValue } from '../types.js';
+import type { CurveName, DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+import type { RawValue } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
+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: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | ConstantAccessor<import("../types/data").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").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: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }> & LinkableMarkProps<Datum> & {
+        data: Datum[];
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+        sort?: ConstantAccessor<RawValue> | {
+            channel: "stroke" | "fill";
+        };
+        stack?: Partial<StackOptions>;
+        canvas?: boolean;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
 /** Creates an area chart with filled regions between two x-y value pairs */
-declare const Area: import("svelte").Component<AreaMarkProps, {}, "">;
-type Area = ReturnType<typeof Area>;
+declare const Area: $$IsomorphicComponent;
+type Area<Datum extends DataRecord> = InstanceType<typeof Area<Datum>>;
 export default Area;

package/dist/marks/AreaX.svelte

@@ -2,27 +2,30 @@
     Creates a horizontal area chart with x value and baseline.  Areas are implicitly 
     stacked horizontally if just the x channel is defined.
 -->
-<script lang="ts">
-    import Area, { type AreaMarkProps } from './Area.svelte';
+<script lang="ts" generics="Datum extends DataRow">
+    interface AreaXMarkProps extends Omit<ComponentProps<typeof Area>, 'y1' | 'y2'> {
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+    }
+    import Area from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackX } from '../transforms/stack.js';
     import { recordizeX } 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 ComponentProps } from 'svelte';
 
-    type AreaXProps = Omit<AreaMarkProps, 'y1' | 'y2'> & {
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-    };
-
-    let markProps: AreaMarkProps = $props();
+    let markProps: AreaXMarkProps = $props();
 
     const DEFAULTS = getContext<PlotDefaults>('svelteplot/_defaults').areaX;
 
-    const { data, stack, ...options }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
+    const { data, stack, ...options }: AreaXMarkProps = $derived({
+        ...(markProps.x == undefined ? { x1: 0, x2: 0 } : {}),
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const args = $derived(
-        renameChannels<AreaXProps>(
+        renameChannels<AreaXMarkProps>(
             stackX(recordizeX({ data, ...options, y1: null, y2: null }), stack),
             { y: 'y1' }
         )