svelteplot 0.3.3 → 0.3.5-pr-121.0

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/constants.d.ts

@@ -1,4 +1,4 @@
-import type { ScaleName, ScaleType, ScaledChannelName } from './types.js';
+import type { ScaleName, ScaleType, ScaledChannelName } from './types/index.js';
 export declare const SCALE_TYPES: Record<ScaleName, symbol>;
 export declare const SCALES: ScaleName[];
 export declare const VALID_SCALE_TYPES: Record<ScaleName, Set<ScaleType>>;

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';
@@ -36,6 +36,7 @@
             scaleType="band"
             ticks={fxValues}
             tickFormat={(d) => d}
+            tickFontSize={11}
             tickSize={0}
             tickPadding={5}
             anchor={plot.options.fx.axis}
@@ -53,6 +54,7 @@
             scaleType="band"
             ticks={fyValues}
             tickFormat={(d) => d}
+            tickFontSize={11}
             tickSize={0}
             tickPadding={5}
             anchor={plot.options.fy.axis}

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/autoScales.d.ts

@@ -1,4 +1,4 @@
-import type { ColorScaleOptions, PlotDefaults, PlotOptions, RawValue, ScaleName, ScaleOptions, ScaleType } from '../types.js';
+import type { ColorScaleOptions, PlotDefaults, PlotOptions, RawValue, ScaleName, ScaleOptions, ScaleType } from '../types/index.js';
 export declare function autoScale({ name, type, domain, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks, plotDefaults }: {
     name: ScaleName;
     type: ScaleType;

package/dist/helpers/autoTicks.d.ts

@@ -1,3 +1,3 @@
-import type { RawValue, ScaleType } from '../types.js';
+import type { RawValue, ScaleType } from '../types/index.js';
 export declare function maybeInterval(interval: null | number | string | (<T>(d: T) => T)): any;
 export declare function autoTicks(type: ScaleType, ticks: RawValue[], interval: string | number | null, domain: RawValue[], scaleFn: any, count: number): any;

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/callWithProps.d.ts

@@ -1,4 +1,4 @@
-import type { RawValue } from '../types.js';
+import type { RawValue } from '../types/index.js';
 type Setter = (v: any) => void;
 /**
  * Helper function to call a D3 "function class" while also calling

package/dist/helpers/colors.d.ts

@@ -1,12 +1,12 @@
 import { interpolateBrBG } from 'd3-scale-chromatic';
-import type { ColorScheme } from '../types.js';
+import type { ColorScheme } from '../types/index.js';
 export declare const categoricalSchemes: Map<string, readonly string[]>;
 export declare function isCategoricalScheme(scheme: string): boolean;
 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/curves.d.ts

@@ -1,3 +1,3 @@
-import type { Curve } from '../types.js';
+import type { Curve } from '../types/index.js';
 import { type CurveFactory } from 'd3-shape';
 export declare function maybeCurve(curve: Curve | CurveFactory, tension: number): any;

package/dist/helpers/facets.d.ts

@@ -1,4 +1,4 @@
-import type { GenericMarkOptions, Mark, RawValue } from '../types.js';
+import type { GenericMarkOptions, Mark, RawValue } from '../types/index.js';
 /**
  * This function tracks which facets are "empty", meaning that they don't contain
  * any "facetted" data points. This can happen when fx and fy are combined and

package/dist/helpers/getBaseStyles.d.ts

@@ -1,7 +1,9 @@
-import type { Channels } from '../types.js';
-import type { DataRow } from '../types.js';
+import type { Channels } from '../types/index.js';
+import type { DataRow } from '../types/index.js';
 export declare function getBaseStylesObject(datum: DataRow, props: Partial<Channels>): {
     [k: string]: string | number;
 };
 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/group.d.ts

@@ -1,4 +1,4 @@
-import type { Channels, DataRecord } from '../types.js';
+import type { Channels, DataRecord } from '../types/index.js';
 /**
  * Groups the data by the fx, fy and z channels and calls the reduce function
  * for each group. Returns the new channels to be added in the transform.

package/dist/helpers/index.d.ts

@@ -1,10 +1,10 @@
-import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '../types.js';
+import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '../types/index.js';
 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/isDataRecord.d.ts

@@ -1,2 +1,2 @@
-import type { DataRecord } from '../types.js';
+import type { DataRecord } from '../types/index.js';
 export default function (value: any): value is DataRecord;

package/dist/helpers/isRawValue.d.ts

@@ -1,2 +1,2 @@
-import type { RawValue } from '../types.js';
+import type { RawValue } from '../types/index.js';
 export default function (value: any): value is RawValue;

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/reduce.d.ts

@@ -1,4 +1,4 @@
-import type { ChannelName, Channels, DataRecord, DataRow, RawValue } from '../types.js';
+import type { ChannelName, Channels, DataRecord, DataRow, RawValue } from '../types/index.js';
 type ReducerFunc = (group: Iterable<DataRow>) => RawValue;
 type ReducerOption = ReducerName | ReducerFunc;
 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;

package/dist/helpers/regressionLoess.d.ts

@@ -1,4 +1,4 @@
-import type { DataRow } from '../types.js';
+import type { DataRow } from '../types/index.js';
 type AccessorFn = (d: any) => number;
 export default function (): {
     (data: DataRow[]): {

package/dist/helpers/resolve.d.ts

@@ -1,5 +1,5 @@
-import type { MarkStyleProps, PlotState, ScaledDataRecord } from '../types.js';
-import type { ScaleName, ChannelName, ScaledChannelName, ChannelAccessor, DataRow, RawValue, DataRecord, ConstantAccessor } from '../types.js';
+import type { MarkStyleProps, PlotState, ScaledDataRecord } from '../types/index.js';
+import type { ScaleName, ChannelName, ScaledChannelName, ChannelAccessor, DataRow, RawValue, DataRecord, ConstantAccessor } from '../types/index.js';
 type ChannelAlias = {
     channel: ScaledChannelName;
 };
@@ -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

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types.js';
+import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types/index.js';
 /**
  * compute the plot scales
  */
@@ -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;
+import type { RawValue } from '../types/index.js';
+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,