svelteplot 0.2.8 → 0.2.9-pr-95.1

package/dist/Plot.svelte

@@ -91,89 +91,101 @@
 <!-- There's a bug triggering RangeError: Maximum call stack size exceeded 
      when using SveltePlot in ssr, so for now, we're disabling it -->
 
-<Plot
-    {overlay}
-    {underlay}
-    {...restOptions}
-    header={userHeader ||
-    restOptions.title ||
-    restOptions.subtitle ||
-    restOptions.color?.legend ||
-    restOptions.symbol?.legend
-        ? header
-        : null}
-    footer={userFooter || restOptions?.caption ? footer : null}
-    projection={projectionOpts}
-    implicitScales
-    {...scales}>
-    {#snippet children({
-        hasProjection,
-        hasExplicitAxisX,
-        hasExplicitAxisY,
-        hasExplicitGridX,
-        hasExplicitGridY,
-        options,
-        scales,
-        ...restProps
-    })}
-        <svelte:boundary onerror={(err) => console.warn(err)}>
-            <!-- implicit axes -->
-            {#if !hasProjection && !hasExplicitAxisX}
-                {#if options.axes && (options.x.axis === 'top' || options.x.axis === 'both')}
-                    <AxisX anchor="top" automatic />
+<svelte:boundary>
+    <Plot
+        {overlay}
+        {underlay}
+        {...restOptions}
+        header={userHeader ||
+        restOptions.title ||
+        restOptions.subtitle ||
+        restOptions.color?.legend ||
+        restOptions.symbol?.legend
+            ? header
+            : null}
+        footer={userFooter || restOptions?.caption ? footer : null}
+        projection={projectionOpts}
+        implicitScales
+        {...scales}>
+        {#snippet children({
+            hasProjection,
+            hasExplicitAxisX,
+            hasExplicitAxisY,
+            hasExplicitGridX,
+            hasExplicitGridY,
+            options,
+            scales,
+            ...restProps
+        })}
+            <svelte:boundary onerror={(err) => console.warn(err)}>
+                <!-- implicit axes -->
+                {#if !hasProjection && !hasExplicitAxisX}
+                    {#if options.axes && (options.x.axis === 'top' || options.x.axis === 'both')}
+                        <AxisX anchor="top" automatic />
+                    {/if}
+                    {#if options.axes && (options.x.axis === 'bottom' || options.x.axis === 'both')}
+                        <AxisX anchor="bottom" automatic />
+                    {/if}
                 {/if}
-                {#if options.axes && (options.x.axis === 'bottom' || options.x.axis === 'both')}
-                    <AxisX anchor="bottom" automatic />
+                {#if !hasProjection && !hasExplicitAxisY}
+                    {#if options.axes && (options.y.axis === 'left' || options.y.axis === 'both')}
+                        <AxisY anchor="left" automatic />
+                    {/if}
+                    {#if options.axes && (options.y.axis === 'right' || options.y.axis === 'both')}
+                        <AxisY anchor="right" automatic />
+                    {/if}
                 {/if}
-            {/if}
-            {#if !hasProjection && !hasExplicitAxisY}
-                {#if options.axes && (options.y.axis === 'left' || options.y.axis === 'both')}
-                    <AxisY anchor="left" automatic />
+                <!-- implicit grids -->
+                {#if !hasExplicitGridX && (options.grid || options.x.grid)}
+                    <GridX automatic />
                 {/if}
-                {#if options.axes && (options.y.axis === 'right' || options.y.axis === 'both')}
-                    <AxisY anchor="right" automatic />
+                {#if !hasExplicitGridY && (options.grid || options.y.grid)}
+                    <GridY automatic />
                 {/if}
-            {/if}
-            <!-- implicit grids -->
-            {#if !hasExplicitGridX && (options.grid || options.x.grid)}
-                <GridX automatic />
-            {/if}
-            {#if !hasExplicitGridY && (options.grid || options.y.grid)}
-                <GridY automatic />
-            {/if}
-            <!-- implicit frame -->
-            {#if options.frame}
-                <Frame automatic />
-            {/if}
-            {@render parentChildren?.({
-                options,
-                scales,
-                ...restProps
-            })}
-            {#snippet failed(error, reset)}
-                <text class="error" transform="translate(10,10)">
-                    {#each error.message.split('\n') as line, i (i)}
-                        <tspan x="0" dy={i ? 14 : 0}>{line}</tspan>
-                    {/each}
-                </text>{/snippet}
-        </svelte:boundary>
-    {/snippet}
-    {#snippet facetAxes()}
-        <FacetAxes />
+                <!-- implicit frame -->
+                {#if options.frame}
+                    <Frame automatic />
+                {/if}
+                {@render parentChildren?.({
+                    options,
+                    scales,
+                    ...restProps
+                })}
+                {#snippet failed(error, reset)}
+                    <text class="error" transform="translate(10,10)">
+                        {#each error.message.split('\n') as line, i (i)}
+                            <tspan x="0" dy={i ? 14 : 0}>{line}</tspan>
+                        {/each}
+                    </text>{/snippet}
+            </svelte:boundary>
+        {/snippet}
+        {#snippet facetAxes()}
+            <FacetAxes />
+        {/snippet}
+    </Plot>
+    {#snippet failed(error)}
+        <div class="error">Error: {error.message}</div>
     {/snippet}
-</Plot>
+</svelte:boundary>
 
 <style>
     :root {
         --plot-bg: white;
         --plot-fg: currentColor;
     }
-    text.error {
-        stroke: var(--plot-bg);
-        fill: crimson;
+    .error {
         font-size: 11px;
         stroke-width: 3px;
         font-weight: bold;
+    }
+    text.error {
+        stroke: var(--plot-bg);
+        fill: crimson;
         paint-order: stroke fill;
     }
+    div.error {
+        color: crimson;
+        white-space: pre-wrap;
+        line-height: 1.1;
+    }
 </style>

package/dist/core/Plot.svelte

@@ -73,7 +73,7 @@
         locale: 'en-US',
         numberFormat: {
             style: 'decimal',
-            notation: 'compact',
+            // notation: 'compact',
             compactDisplay: 'short'
         },
         markerDotRadius: 3,

package/dist/helpers/autoTicks.js

@@ -1,5 +1,5 @@
 import { maybeTimeInterval } from './time.js';
-import { range as rangei } from 'd3-array';
+import { extent, range as rangei } from 'd3-array';
 export function maybeInterval(interval) {
     if (interval == null)
         return;
@@ -30,11 +30,12 @@ export function maybeInterval(interval) {
     return interval;
 }
 export function autoTicks(type, ticks, interval, domain, scaleFn, count) {
-    return ticks
-        ? ticks
-        : interval
-            ? maybeInterval(interval, type).range(domain[0], domain[1])
-            : typeof scaleFn.ticks === 'function'
-                ? scaleFn.ticks(count)
-                : [];
+    if (ticks)
+        return ticks;
+    if (interval) {
+        const [lo, hi] = extent(domain);
+        const I = maybeInterval(interval, type);
+        return I.range(lo, I.offset(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/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/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/scales.js

@@ -5,6 +5,7 @@ import { isSymbolOrNull } from './typeChecks.js';
 import { resolveProp, toChannelOption } from './resolve.js';
 import isDataRecord from './isDataRecord.js';
 import { createProjection } from './projection.js';
+import { maybeInterval } from './autoTicks.js';
 /**
  * compute the plot scales
  */
@@ -148,7 +149,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         valueArr.sort(ascending);
     }
     const valueArray = type === 'quantile' || type === 'quantile-cont' ? allDataValues.toSorted() : valueArr;
-    const domain = scaleOptions.domain
+    let domain = scaleOptions.domain
         ? isOrdinal
             ? scaleOptions.domain
             : extent(scaleOptions.zero ? [0, ...scaleOptions.domain] : scaleOptions.domain)
@@ -162,6 +163,16 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                 ? valueArray.toReversed()
                 : valueArray
             : extent(scaleOptions.zero ? [0, ...valueArray] : valueArray);
+    if (scaleOptions.interval) {
+        if (isOrdinal) {
+            domain = domainFromInterval(domain, scaleOptions.interval, name);
+        }
+        else {
+            if (markTypes.size > 0) {
+                console.warn('Setting interval via axis options is only supported for ordinal scales');
+            }
+        }
+    }
     if (!scaleOptions.scale) {
         throw new Error(`No scale function defined for ${name}`);
     }
@@ -192,6 +203,12 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                 : null
     };
 }
+function domainFromInterval(domain, interval, name) {
+    const interval_ = maybeInterval(interval);
+    const [lo, hi] = extent(domain);
+    const out = interval_.range(lo, interval_.offset(hi));
+    return name === 'y' ? out.toReversed() : out;
+}
 /**
  * Infer a scale type based on the scale name, the data values mapped to it and
  * the mark types that are bound to the scale

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/AxisX.svelte

@@ -2,6 +2,7 @@
     Renders a horizontal axis with labels and tick marks
 -->
 <script module lang="ts">
+    import type { XOR } from 'ts-essentials';
     export type AxisXMarkProps = Omit<
         BaseMarkProps,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
@@ -22,7 +23,20 @@
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
         tickClass?: ConstantAccessor<string>;
-    };
+        /** ticks is a shorthand for defining data, tickCount or interval */
+        ticks?: number | string | RawValue[];
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
+    } & XOR<
+            {
+                /** approximate number of ticks to be generated */
+                tickCount?: number;
+            },
+            {
+                /** approximate number of pixels between generated ticks */
+                tickSpacing?: number;
+            }
+        >;
 </script>
 
 <script lang="ts">
@@ -51,12 +65,13 @@
     };
 
     let {
-        data = [],
+        ticks: magicTicks,
+        data = Array.isArray(magicTicks) ? magicTicks : [],
         automatic = false,
         title,
         anchor = DEFAULTS.axisXAnchor as 'top' | 'bottom',
         facetAnchor = 'auto',
-        interval,
+        interval = typeof magicTicks === 'string' ? magicTicks : undefined,
         tickSize = DEFAULTS.tickSize,
         tickFontSize = DEFAULTS.tickFontSize,
         tickPadding = DEFAULTS.tickPadding,
@@ -64,6 +79,9 @@
         tickFormat,
         tickClass,
         class: className,
+        tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
+        tickSpacing,
+        text = true,
         ...options
     }: AxisXMarkProps = $props();
 
@@ -71,7 +89,11 @@
     const plot = $derived(getPlotState());
 
     const autoTickCount = $derived(
-        Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
+        tickCount != null
+            ? tickCount
+            : tickSpacing != null
+              ? Math.max(3, Math.round(plot.facetWidth / tickSpacing))
+              : Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
     const ticks: RawValue[] = $derived(
@@ -89,9 +111,9 @@
               )
     );
 
-    let tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
+    const tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
 
-    let useTickFormat = $derived(
+    const useTickFormat = $derived(
         typeof tickFmt === 'function'
             ? tickFmt
             : plot.scales.x.type === 'band' || plot.scales.x.type === 'point'
@@ -107,6 +129,10 @@
                   : // auto
                     (d: RawValue) =>
                         Intl.NumberFormat(plot.options.locale, {
+                            // use compact notation if range covers multipe magnitudes
+                            ...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
+                                ? { notation: 'compact' }
+                                : {}),
                             ...DEFAULTS.numberFormat,
                             style: plot.options.x.percent ? 'percent' : 'decimal'
                         }).format(d)
@@ -197,6 +223,7 @@
             {tickPadding}
             {tickFontSize}
             {tickClass}
+            {text}
             {options}
             title={useTitle}
             {plot} />

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

@@ -1,3 +1,4 @@
+import type { XOR } from 'ts-essentials';
 export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
     data?: RawValue[];
     automatic?: boolean;
@@ -11,7 +12,17 @@ export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickPadding?: number;
     tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
     tickClass?: ConstantAccessor<string>;
-};
+    /** ticks is a shorthand for defining data, tickCount or interval */
+    ticks?: number | string | RawValue[];
+    /** set to false or null to disable tick labels */
+    text: boolean | null;
+} & XOR<{
+    /** approximate number of ticks to be generated */
+    tickCount?: number;
+}, {
+    /** approximate number of pixels between generated ticks */
+    tickSpacing?: number;
+}>;
 import type { BaseMarkProps, RawValue, ConstantAccessor } from '../types.js';
 /** Renders a horizontal axis with labels and tick marks */
 declare const AxisX: import("svelte").Component<AxisXMarkProps, {}, "">;

package/dist/marks/AxisY.svelte

@@ -2,6 +2,7 @@
     Renders a vertical axis with labels and tick marks
 -->
 <script module lang="ts">
+    import type { XOR } from 'ts-essentials';
     export type AxisYMarkProps = Omit<
         BaseMarkProps,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
@@ -23,7 +24,20 @@
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
         tickClass?: ConstantAccessor<string>;
-    };
+        /** ticks is a shorthand for defining data, tickCount or interval */
+        ticks?: number | string | RawValue[];
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
+    } & XOR<
+            {
+                /** approximate number of ticks to be generated */
+                tickCount?: number;
+            },
+            {
+                /** approximate number of pixels between generated ticks */
+                tickSpacing?: number;
+            }
+        >;
 </script>
 
 <script lang="ts">
@@ -51,17 +65,22 @@
     };
 
     let {
-        data = [],
+        ticks: magicTicks,
+        data = Array.isArray(magicTicks) ? magicTicks : [],
         automatic = false,
         title,
         anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
         facetAnchor = 'auto',
+        interval = typeof magicTicks === 'string' ? magicTicks : undefined,
         lineAnchor = 'center',
         tickSize = DEFAULTS.tickSize,
         tickFontSize = DEFAULTS.tickFontSize,
         tickPadding = DEFAULTS.tickPadding,
         tickFormat,
         tickClass,
+        tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
+        tickSpacing,
+        text = true,
         ...options
     }: AxisYMarkProps = $props();
 
@@ -69,7 +88,11 @@
     const plot = $derived(getPlotState());
 
     const autoTickCount = $derived(
-        Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
+        tickCount != null
+            ? tickCount
+            : tickSpacing != null
+              ? Math.max(3, Math.round(plot.facetHeight / tickSpacing))
+              : Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
     );
 
     const ticks: RawValue[] = $derived(
@@ -80,7 +103,7 @@
               autoTicks(
                   plot.scales.y.type,
                   plot.options.y.ticks,
-                  plot.options.y.interval,
+                  interval || plot.options.y.interval,
                   plot.scales.y.domain,
                   plot.scales.y.fn,
                   autoTickCount
@@ -105,6 +128,10 @@
                   : // auto
                     (d: RawValue) =>
                         Intl.NumberFormat(plot.options.locale, {
+                            // use compact notation if range covers multipe magnitudes
+                            ...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
+                                ? { notation: 'compact' }
+                                : {}),
                             ...DEFAULTS.numberFormat,
                             style: plot.options.y.percent ? 'percent' : 'decimal'
                         }).format(d)
@@ -176,6 +203,7 @@
             {tickFontSize}
             {tickClass}
             {options}
+            {text}
             title={useTitle}
             {plot} />
     {/if}

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

@@ -1,3 +1,4 @@
+import type { XOR } from 'ts-essentials';
 export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
     data?: RawValue[];
     automatic?: boolean;
@@ -12,7 +13,17 @@ export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickPadding?: number;
     tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
     tickClass?: ConstantAccessor<string>;
-};
+    /** ticks is a shorthand for defining data, tickCount or interval */
+    ticks?: number | string | RawValue[];
+    /** set to false or null to disable tick labels */
+    text: boolean | null;
+} & XOR<{
+    /** approximate number of ticks to be generated */
+    tickCount?: number;
+}, {
+    /** approximate number of pixels between generated ticks */
+    tickSpacing?: number;
+}>;
 import type { BaseMarkProps, RawValue } from '../types.js';
 import type { ConstantAccessor } from '../types.js';
 /** Renders a vertical axis with labels and tick marks */

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

@@ -13,6 +13,6 @@ export type BollingerXMarkProps = BaseMarkProps & {
 };
 import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
 /** line representing a moving average and an area representing volatility as a band */
-declare const BollingerX: import("svelte").Component<BollingerXMarkProps, {}, "">;
+declare const BollingerX: import("svelte").Component<any, {}, "">;
 type BollingerX = ReturnType<typeof BollingerX>;
 export default BollingerX;

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

@@ -13,6 +13,6 @@ export type BollingerYMarkProps = BaseMarkProps & {
 };
 import type { BaseMarkProps, ChannelAccessor, DataRow } from '../types.js';
 /** line representing a moving average and an area representing volatility as a band */
-declare const BollingerY: import("svelte").Component<BollingerYMarkProps, {}, "">;
+declare const BollingerY: import("svelte").Component<any, {}, "">;
 type BollingerY = ReturnType<typeof BollingerY>;
 export default BollingerY;

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

@@ -1,61 +1,6 @@
 import { type BaseMarkProps } from '../types.js';
 export type SphereMarkProps = BaseMarkProps;
 /** Geo mark with Sphere geometry object */
-declare const Sphere: import("svelte").Component<Partial<{
-    filter?: import("../types.js").ConstantAccessor<boolean>;
-    facet?: "auto" | "include" | "exclude";
-    fx: import("../types.js").ChannelAccessor;
-    fy: import("../types.js").ChannelAccessor;
-    dx: import("../types.js").ConstantAccessor<number>;
-    dy: import("../types.js").ConstantAccessor<number>;
-    fill: import("../types.js").ConstantAccessor<string>;
-    fillOpacity: import("../types.js").ConstantAccessor<number>;
-    stroke: import("../types.js").ConstantAccessor<string>;
-    strokeWidth: import("../types.js").ConstantAccessor<number>;
-    strokeOpacity: import("../types.js").ConstantAccessor<number>;
-    strokeLinejoin: import("../types.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin>;
-    strokeLinecap: import("../types.js").ConstantAccessor<import("csstype").Property.StrokeLinecap>;
-    strokeMiterlimit: import("../types.js").ConstantAccessor<number>;
-    opacity: import("../types.js").ConstantAccessor<number>;
-    strokeDasharray: import("../types.js").ConstantAccessor<string>;
-    strokeDashoffset: import("../types.js").ConstantAccessor<number>;
-    mixBlendMode: import("../types.js").ConstantAccessor<import("csstype").Property.MixBlendMode>;
-    clipPath: string;
-    imageFilter: import("../types.js").ConstantAccessor<string>;
-    shapeRendering: import("../types.js").ConstantAccessor<import("csstype").Property.ShapeRendering>;
-    paintOrder: import("../types.js").ConstantAccessor<string>;
-    onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-    class: string | null;
-    cursor: import("../types.js").ConstantAccessor<import("csstype").Property.Cursor>;
-}>, {}, "">;
+declare const Sphere: import("svelte").Component<BaseMarkProps, {}, "">;
 type Sphere = ReturnType<typeof Sphere>;
 export default Sphere;