svelteplot 0.2.9 → 0.2.10-pr-110.0

package/dist/marks/AxisY.svelte

@@ -26,16 +26,13 @@
         tickClass?: ConstantAccessor<string>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | RawValue[];
-    } & XOR<
-            {
-                /** approximate number of ticks to be generated */
-                tickCount?: number;
-            },
-            {
-                /** approximate number of pixels between generated ticks */
-                tickSpacing?: number;
-            }
-        >;
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
+        /** approximate number of ticks to be generated */
+        tickCount?: number;
+        /** approximate number of pixels between generated ticks */
+        tickSpacing?: number;
+    };
 </script>
 
 <script lang="ts">
@@ -47,39 +44,44 @@
         BaseMarkProps,
         RawValue,
         FacetContext,
-        DefaultOptions
+        PlotDefaults,
+        ChannelName
     } from '../types.js';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
     import type { ConstantAccessor } from '../types.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { resolveScaledStyles } from '../helpers/resolve.js';
 
-    const DEFAULTS = {
+    let markProps: AxisYMarkProps = $props();
+
+    const DEFAULTS: Omit<AxisYMarkProps, 'data' | ChannelName> = {
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
-        axisYAnchor: 'left',
-        ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
+        anchor: 'left',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').axis,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').axisY
     };
 
-    let {
+    const {
         ticks: magicTicks,
         data = Array.isArray(magicTicks) ? magicTicks : [],
         automatic = false,
         title,
-        anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
+        anchor,
         facetAnchor = 'auto',
         interval = typeof magicTicks === 'string' ? magicTicks : undefined,
         lineAnchor = 'center',
-        tickSize = DEFAULTS.tickSize,
-        tickFontSize = DEFAULTS.tickFontSize,
-        tickPadding = DEFAULTS.tickPadding,
+        tickSize,
+        tickFontSize,
+        tickPadding,
         tickFormat,
         tickClass,
         tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
         tickSpacing,
+        text = true,
         ...options
-    }: AxisYMarkProps = $props();
+    }: AxisYMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -200,6 +202,7 @@
             {tickFontSize}
             {tickClass}
             {options}
+            {text}
             title={useTitle}
             {plot} />
     {/if}

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

@@ -1,4 +1,3 @@
-import type { XOR } from 'ts-essentials';
 export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
     data?: RawValue[];
     automatic?: boolean;
@@ -15,13 +14,13 @@ export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickClass?: ConstantAccessor<string>;
     /** ticks is a shorthand for defining data, tickCount or interval */
     ticks?: number | string | RawValue[];
-} & XOR<{
+    /** set to false or null to disable tick labels */
+    text: boolean | null;
     /** 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/BarX.svelte

@@ -7,10 +7,13 @@
         PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
-        ChannelAccessor
+        ChannelAccessor,
+        LinkableMarkProps,
+        PlotDefaults
     } from '../types.js';
 
     export type BarXMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;
@@ -36,7 +39,20 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, stack, ...options }: BarXMarkProps = $props();
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').bar,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').barX
+    };
+
+    let markProps: BarXMarkProps = $props();
+
+    const {
+        data = [{}],
+        class: className = null,
+        stack,
+        ...options
+    }: BarXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -1,5 +1,5 @@
-import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type BarXMarkProps = BaseMarkProps & BaseRectMarkProps & {
+import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor, LinkableMarkProps } from '../types.js';
+export type BarXMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     x1?: ChannelAccessor;

package/dist/marks/BarY.svelte

@@ -8,10 +8,12 @@
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        DataRow
+        DataRow,
+        PlotDefaults
     } from '../types.js';
 
     export type BarYMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;
@@ -36,11 +38,24 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, stack, ...options }: BarYMarkProps = $props();
-
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').bar,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').barY
+    };
+
+    let markProps: BarYMarkProps = $props();
+
+    const {
+        data = [{}],
+        class: className = null,
+        stack,
+        ...options
+    }: BarYMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
     const args = $derived(
         stackY(
             intervalY(

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

@@ -1,5 +1,5 @@
 import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor, DataRow } from '../types.js';
-export type BarYMarkProps = BaseMarkProps & BaseRectMarkProps & {
+export type BarYMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
@@ -14,6 +14,6 @@ export type BarYMarkProps = BaseMarkProps & BaseRectMarkProps & {
 };
 import type { StackOptions } from '../transforms/stack.js';
 /** For vertical column charts using a band scale as x axis */
-declare const BarY: import("svelte").Component<BarYMarkProps, {}, "">;
+declare const BarY: import("svelte").Component<any, {}, "">;
 type BarY = ReturnType<typeof BarY>;
 export default BarY;

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

@@ -1,4 +1,4 @@
-<script module type="ts">
+<script module lang="ts">
     export type BrushXMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 </script>
 

package/dist/marks/BrushY.svelte

@@ -1,4 +1,4 @@
-<script module type="ts">
+<script module lang="ts">
     export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 </script>
 

package/dist/marks/Cell.svelte

@@ -12,6 +12,7 @@
     } from '../types.js';
 
     export type CellMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRecord[];
             x?: ChannelAccessor;

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

@@ -1,10 +1,10 @@
 import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type CellMarkProps = BaseMarkProps & BaseRectMarkProps & {
+export type CellMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRecord[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
 };
 /** For arbitrary rectangles, requires band x and y scales */
-declare const Cell: import("svelte").Component<CellMarkProps, {}, "">;
+declare const Cell: import("svelte").Component<any, {}, "">;
 type Cell = ReturnType<typeof Cell>;
 export default Cell;

package/dist/marks/ColorLegend.svelte

@@ -11,14 +11,14 @@
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
-    import type { DefaultOptions, PlotContext } from '../types.js';
+    import type { PlotDefaults, PlotContext } from '../types.js';
 
     let { class: className = null }: ColorLegendMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const DEFAULTS = getContext<Partial<DefaultOptions>>('svelteplot/_defaults');
+    const DEFAULTS = getContext<Partial<PlotDefaults>>('svelteplot/_defaults');
 
     const legendTitle = $derived(plot.options.color.label);
     const scaleType = $derived(plot.scales.color.type);
@@ -167,6 +167,7 @@
     .swatch {
         display: inline-flex;
         align-items: center;
+        column-gap: 0.3rem;
     }
     .item-label {
         vertical-align: super;

package/dist/marks/Dot.svelte

@@ -10,7 +10,7 @@
         symbol?: ChannelAccessor | Snippet<[number, string]>;
         canvas?: boolean;
         dotClass?: ConstantAccessor<string>;
-    };
+    } & LinkableMarkProps;
 </script>
 
 <script lang="ts">
@@ -21,8 +21,8 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
-        PlotDefaults
+        PlotDefaults,
+        LinkableMarkProps
     } from '../types.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeSymbol } from '../helpers/symbols.js';
@@ -33,14 +33,21 @@
     import { maybeData, isValid } from '../helpers/index.js';
     import { recordizeXY } from '../transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
+    import Anchor from './helpers/Anchor.svelte';
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').dot
+    };
 
-    let {
+    let markProps: DotMarkProps = $props();
+
+    const {
         data = [{}],
         canvas = false,
         class: className = '',
         dotClass = null,
         ...options
-    }: DotMarkProps = $props();
+    }: DotMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -49,10 +56,6 @@
         return d3Symbol(maybeSymbol(symbolType), size)();
     }
 
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    const { dotRadius } = getContext<PlotDefaults>('svelteplot/_defaults');
-    let testFacet = $derived(getTestFacet());
-
     const args = $derived(
         // todo: move sorting to Mark
         sort(
@@ -81,10 +84,10 @@
         'fillOpacity',
         'strokeOpacity'
     ]}
-    defaults={{ r: dotRadius, symbol: 'circle' }}
+    defaults={{ r: 3, symbol: 'circle' }}
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
-        <g class="dots {className || ''}">
+        <g class="dot {className || ''}">
             {#if canvas}
                 <DotCanvas data={scaledData} {mark} />
             {:else}
@@ -97,19 +100,21 @@
                             'stroke',
                             usedScales
                         )}
-                        <path
-                            transform="translate({d.x}, {d.y})"
-                            d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
-                            class={[
-                                dotClass ? resolveProp(dotClass, d.datum, null) : null,
-                                styleClass
-                            ]}
-                            {style}
-                            use:addEventHandlers={{
-                                getPlotState,
-                                options: args,
-                                datum: d.datum
-                            }} />
+                        <Anchor {options} datum={d.datum}>
+                            <path
+                                transform="translate({d.x}, {d.y})"
+                                d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
+                                class={[
+                                    dotClass ? resolveProp(dotClass, d.datum, null) : null,
+                                    styleClass
+                                ]}
+                                {style}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }} />
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

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

@@ -6,9 +6,9 @@ export type DotMarkProps = BaseMarkProps & {
     symbol?: ChannelAccessor | Snippet<[number, string]>;
     canvas?: boolean;
     dotClass?: ConstantAccessor<string>;
-};
+} & LinkableMarkProps;
 import { type Snippet } from 'svelte';
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types.js';
 /** Creates dots or symbols at specified positions with customizable size and appearance */
 declare const Dot: import("svelte").Component<DotMarkProps, {}, "">;
 type Dot = ReturnType<typeof Dot>;

package/dist/marks/Frame.svelte

@@ -7,6 +7,7 @@
         BaseMarkProps,
         'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
     > &
+        LinkableMarkProps &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
@@ -27,19 +28,38 @@
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type {
+        PlotContext,
+        BaseRectMarkProps,
+        LinkableMarkProps,
+        PlotDefaults
+    } from '../types.js';
     import type { BaseMarkProps } from '../types.js';
     import RectPath from './helpers/RectPath.svelte';
 
-    let {
+    let markProps: FrameMarkProps = $props();
+
+    const DEFAULTS: FrameMarkProps = {
+        fill: 'none',
+        class: 'frame',
+        stroke: 'currentColor',
+        fillOpacity: 1,
+        strokeOpacity: 1,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').frame
+    };
+
+    const {
         automatic,
-        class: className = 'frame',
+        class: className,
         fill,
         stroke,
         fillOpacity,
         strokeOpacity,
         ...options
-    }: FrameMarkProps = $props();
+    }: FrameMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -1,4 +1,4 @@
-export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
+export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & LinkableMarkProps & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
     fill: string;
     stroke: string;
     fillOpacity: number;
@@ -10,7 +10,7 @@ export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacit
     insetTop?: number;
     insetBottom?: number;
 };
-import type { BaseRectMarkProps } from '../types.js';
+import type { BaseRectMarkProps, LinkableMarkProps } from '../types.js';
 import type { BaseMarkProps } from '../types.js';
 /** Renders a simple frame around the entire plot domain */
 declare const Frame: import("svelte").Component<FrameMarkProps, {}, "">;

package/dist/marks/Geo.svelte

@@ -7,8 +7,10 @@
         geoType?: 'sphere' | 'graticule';
         dragRotate: boolean;
         canvas: boolean;
-        href: ConstantAccessor<string>;
-        target: ConstantAccessor<string>;
+        /**
+         * simple browser tooltip to be displayed on mouseover
+         */
+        title: ConstantAccessor<string>;
     } & BaseMarkProps &
         LinkableMarkProps;
 </script>
@@ -31,6 +33,7 @@
     import GeoCanvas from './helpers/GeoCanvas.svelte';
     import { recordize } from '../transforms/recordize.js';
     import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
+    import Anchor from './helpers/Anchor.svelte';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -68,28 +71,6 @@
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        {#snippet el(d)}
-            {@const title = resolveProp(args.title, d.datum, '')}
-            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
-            {@const [style, styleClass] = resolveStyles(
-                plot,
-                d,
-                args,
-                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
-                usedScales
-            )}
-            <path
-                d={path(geometry)}
-                {style}
-                class={[styleClass]}
-                use:addEventHandlers={{
-                    getPlotState,
-                    options: args,
-                    datum: d.datum
-                }}>
-                {#if title}<title>{title}</title>{/if}
-            </path>
-        {/snippet}
         <g
             aria-label="geo"
             class={['geo', geoType && `geo-${geoType}`, className]}
@@ -99,15 +80,28 @@
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(args.href, d.datum, '')}
-                                target={resolveProp(args.target, d.datum, '_self')}>
-                                {@render el(d)}
-                            </a>
-                        {:else}
-                            {@render el(d)}
-                        {/if}
+                        <Anchor {options} datum={d.datum}>
+                            {@const title = resolveProp(args.title, d.datum, '')}
+                            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                d,
+                                args,
+                                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                                usedScales
+                            )}
+                            <path
+                                d={path(geometry)}
+                                {style}
+                                class={[styleClass]}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }}>
+                                {#if title}<title>{title}</title>{/if}
+                            </path>
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

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

@@ -3,8 +3,10 @@ export type GeoMarkProps = {
     geoType?: 'sphere' | 'graticule';
     dragRotate: boolean;
     canvas: boolean;
-    href: ConstantAccessor<string>;
-    target: ConstantAccessor<string>;
+    /**
+     * simple browser tooltip to be displayed on mouseover
+     */
+    title: ConstantAccessor<string>;
 } & BaseMarkProps & LinkableMarkProps;
 import type { DataRecord, BaseMarkProps, ConstantAccessor, LinkableMarkProps } from '../types.js';
 /** Renders geographical data using projections and GeoJSON geometries */

package/dist/marks/Graticule.svelte

@@ -2,7 +2,7 @@
     Renders a geographic graticule grid with customizable step sizes
 -->
 <script module lang="ts">
-    import type { DefaultOptions, BaseMarkProps } from '../types.js';
+    import type { PlotDefaults, BaseMarkProps } from '../types.js';
     export type GraticuleMarkProps = Omit<
         BaseMarkProps,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'cursor'
@@ -20,7 +20,7 @@
 
     const DEFAULTS = {
         graticuleStep: 10,
-        ...getContext<Partial<DefaultOptions>>('svelteplot/defaults')
+        ...getContext<Partial<PlotDefaults>>('svelteplot/defaults')
     };
 
     let { step = DEFAULTS.graticuleStep, stepX, stepY, ...options }: GraticuleMarkProps = $props();

package/dist/marks/Rect.svelte

@@ -13,6 +13,7 @@
         y2?: ChannelAccessor;
         interval?: number | string;
     } & BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps;
 </script>
 

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

@@ -7,9 +7,9 @@ export type RectMarkProps = {
     y1?: ChannelAccessor;
     y2?: ChannelAccessor;
     interval?: number | string;
-} & BaseMarkProps & BaseRectMarkProps;
+} & BaseMarkProps & LinkableMarkProps & BaseRectMarkProps;
 import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
 /** For arbitrary rectangles, requires quantitative x and y scales */
-declare const Rect: import("svelte").Component<RectMarkProps, {}, "">;
+declare const Rect: import("svelte").Component<any, {}, "">;
 type Rect = ReturnType<typeof Rect>;
 export default Rect;

package/dist/marks/Sphere.svelte

@@ -2,8 +2,8 @@
     Geo mark with Sphere geometry object  -->
 
 <script module lang="ts">
-    import { type BaseMarkProps } from '../types.js';
-    export type SphereMarkProps = BaseMarkProps;
+    import { type BaseMarkProps, type LinkableMarkProps } from '../types.js';
+    export type SphereMarkProps = BaseMarkProps & LinkableMarkProps;
 </script>
 
 <script lang="ts">