svelteplot 0.2.9 → 0.2.10

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

@@ -1,61 +1,6 @@
-import { type BaseMarkProps } from '../types.js';
-export type SphereMarkProps = BaseMarkProps;
+import { type BaseMarkProps, type LinkableMarkProps } from '../types.js';
+export type SphereMarkProps = BaseMarkProps & LinkableMarkProps;
 /** 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<SphereMarkProps, {}, "">;
 type Sphere = ReturnType<typeof Sphere>;
 export default Sphere;

package/dist/marks/helpers/Anchor.svelte

@@ -0,0 +1,37 @@
+<script>
+    import { resolveProp } from '../../helpers/resolve';
+
+    let { datum = {}, options = {}, children } = $props();
+
+    const href = $derived(resolveProp(options.href, datum, null));
+    const target = $derived(resolveProp(options.target, datum, null));
+    const rel = $derived(resolveProp(options.rel, datum, null));
+    const type = $derived(resolveProp(options.type, datum, null));
+    const download = $derived(resolveProp(options.download, datum, null));
+
+    // filter data attributes from options
+    const dataAttributes = $derived(
+        Object.fromEntries(
+            Object.entries(options).filter(([key]) => key.startsWith('data-sveltekit-'))
+        )
+    );
+</script>
+
+{#if href}
+    <!-- we can't use <a> directly here because Svelte confuses it with the 
+ HTMLAElement which breaks the rendering -->
+    <svelte:element
+        this={'a'}
+        {href}
+        {target}
+        {rel}
+        {type}
+        {download}
+        {...dataAttributes}
+        aria-label="link"
+        xmlns="http://www.w3.org/2000/svg">
+        {@render children?.()}
+    </svelte:element>
+{:else}
+    {@render children?.()}
+{/if}

package/dist/marks/helpers/Anchor.svelte.d.ts

@@ -0,0 +1,15 @@
+export default Anchor;
+type Anchor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Anchor: import("svelte").Component<{
+    datum?: Record<string, any>;
+    options?: Record<string, any>;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    datum?: Record<string, any>;
+    options?: Record<string, any>;
+    children: any;
+};

package/dist/marks/helpers/BaseAxisX.svelte

@@ -33,6 +33,7 @@
             dy: ConstantAccessor<number>;
             filter: ChannelAccessor;
         };
+        text: boolean;
         plot: PlotState;
     };
 
@@ -50,7 +51,8 @@
         height,
         options,
         plot,
-        title
+        title,
+        text = true
     }: BaseAxisXProps = $props();
 
     function splitTick(tick: string | string[]) {
@@ -86,15 +88,17 @@
             })
         );
         const T = tickObjects.length;
-        for (let i = 0; i < T; i++) {
-            let j = i;
-            // find the preceding tick that was not hidden
-            do {
-                j--;
-            } while (j >= 0 && tickObjects[j].hidden);
-            if (j >= 0) {
-                const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x);
-                tickObjects[i].hidden = tickLabelSpace < 15;
+        if (text) {
+            for (let i = 0; i < T; i++) {
+                let j = i;
+                // find the preceding tick that was not hidden
+                do {
+                    j--;
+                } while (j >= 0 && tickObjects[j].hidden);
+                if (j >= 0) {
+                    const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x);
+                    tickObjects[i].hidden = tickLabelSpace < 15;
+                }
             }
         }
         return tickObjects;
@@ -102,6 +106,7 @@
 
     $effect(() => {
         untrack(() => [$autoMarginTop, $autoMarginBottom]);
+        if (!text) return;
         const outsideTextAnchor = anchor === 'top' ? 'end' : 'start';
         // measure tick label heights
         const maxLabelHeight =
@@ -144,26 +149,7 @@
 <g class="axis-x">
     {#each positionedTicks as tick, t (t)}
         {#if testFilter(tick.value, options) && !tick.hidden}
-            {@const textLines = tick.text}
-            {@const prevTextLines = t && positionedTicks[t - 1].text}
-            {@const fontSize = resolveProp(tickFontSize, tick)}
             {@const tickClass_ = resolveProp(tickClass, tick.value)}
-            {@const estLabelWidth = max(textLines.map((t) => t.length)) * fontSize * 0.2}
-            {@const moveDown =
-                (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
-                (anchor === 'bottom' ? 1 : -1)}
-            {@const [textStyle, textClass] = resolveStyles(
-                plot,
-                tick,
-                {
-                    fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
-                    ...options,
-                    fontSize: tickFontSize,
-                    stroke: null
-                },
-                'fill',
-                { x: true }
-            )}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
@@ -182,31 +168,51 @@
                         y2={anchor === 'bottom' ? tickSize : -tickSize} />
                 {/if}
 
-                <text
-                    bind:this={tickTextElements[t]}
-                    transform="translate(0, {moveDown})  rotate({tickRotate})"
-                    style={textStyle}
-                    class={textClass}
-                    x={0}
-                    y={0}
-                    dominant-baseline={tickRotate !== 0
-                        ? 'central'
-                        : anchor === 'bottom'
-                          ? 'hanging'
-                          : 'auto'}>
-                    {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
-                        {#if textLines.length === 1}
-                            {textLines[0]}
-                        {:else}
-                            {#each textLines as line, i (i)}
-                                <tspan x="0" dy={i ? 12 : 0}
-                                    >{!prevTextLines || prevTextLines[i] !== line
-                                        ? line
-                                        : ''}</tspan>
-                            {/each}
+                {#if text}
+                    {@const textLines = tick.text}
+                    {@const prevTextLines = t && positionedTicks[t - 1].text}
+
+                    {@const moveDown =
+                        (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
+                        (anchor === 'bottom' ? 1 : -1)}
+                    {@const [textStyle, textClass] = resolveStyles(
+                        plot,
+                        tick,
+                        {
+                            fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+                            ...options,
+                            fontSize: tickFontSize,
+                            stroke: null
+                        },
+                        'fill',
+                        { x: true }
+                    )}
+                    <text
+                        bind:this={tickTextElements[t]}
+                        transform="translate(0, {moveDown})  rotate({tickRotate})"
+                        style={textStyle}
+                        class={textClass}
+                        x={0}
+                        y={0}
+                        dominant-baseline={tickRotate !== 0
+                            ? 'central'
+                            : anchor === 'bottom'
+                              ? 'hanging'
+                              : 'auto'}>
+                        {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
+                            {#if textLines.length === 1}
+                                {textLines[0]}
+                            {:else}
+                                {#each textLines as line, i (i)}
+                                    <tspan x="0" dy={i ? 12 : 0}
+                                        >{!prevTextLines || prevTextLines[i] !== line
+                                            ? line
+                                            : ''}</tspan>
+                                {/each}
+                            {/if}
                         {/if}
-                    {/if}
-                </text>
+                    </text>
+                {/if}
             </g>
         {/if}
     {/each}

package/dist/marks/helpers/BaseAxisX.svelte.d.ts

@@ -17,6 +17,7 @@ type BaseAxisXProps = {
         dy: ConstantAccessor<number>;
         filter: ChannelAccessor;
     };
+    text: boolean;
     plot: PlotState;
 };
 declare const BaseAxisX: import("svelte").Component<BaseAxisXProps, {}, "">;

package/dist/marks/helpers/BaseAxisY.svelte

@@ -29,6 +29,7 @@
             dy: ConstantAccessor<number>;
         };
         plot: PlotState;
+        text: boolean | null;
     };
 
     let {
@@ -46,7 +47,8 @@
         width,
         title,
         plot,
-        options
+        options,
+        text = true
     }: BaseAxisYProps = $props();
 
     const LINE_ANCHOR = {
@@ -67,16 +69,18 @@
                 element: null as SVGTextElement | null
             };
         });
-        const T = tickObjects.length;
-        for (let i = 0; i < T; i++) {
-            let j = i;
-            // find the preceding tick that was not hidden
-            do {
-                j--;
-            } while (j >= 0 && tickObjects[j].hidden);
-            if (j >= 0) {
-                const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y);
-                tickObjects[i].hidden = tickLabelSpace < 15;
+        if (text) {
+            const T = tickObjects.length;
+            for (let i = 0; i < T; i++) {
+                let j = i;
+                // find the preceding tick that was not hidden
+                do {
+                    j--;
+                } while (j >= 0 && tickObjects[j].hidden);
+                if (j >= 0) {
+                    const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y);
+                    tickObjects[i].hidden = tickLabelSpace < 15;
+                }
             }
         }
         return tickObjects;
@@ -176,13 +180,15 @@
                         class={tickLineClass}
                         x2={anchor === 'left' ? -tickSize : tickSize} />
                 {/if}
-                <text
-                    bind:this={tickTexts[t]}
-                    class={[textClass, { 'is-left': anchor === 'left' }]}
-                    style={textStyle}
-                    x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
-                    dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                    >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
+                {#if text}
+                    <text
+                        bind:this={tickTexts[t]}
+                        class={[textClass, { 'is-left': anchor === 'left' }]}
+                        style={textStyle}
+                        x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
+                        dominant-baseline={LINE_ANCHOR[lineAnchor]}
+                        >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
+                {/if}
             </g>
         {/if}
     {/each}

package/dist/marks/helpers/BaseAxisY.svelte.d.ts

@@ -17,6 +17,7 @@ type BaseAxisYProps = {
         dy: ConstantAccessor<number>;
     };
     plot: PlotState;
+    text: boolean | null;
 };
 declare const BaseAxisY: import("svelte").Component<BaseAxisYProps, {}, "">;
 type BaseAxisY = ReturnType<typeof BaseAxisY>;

package/dist/marks/helpers/RectPath.svelte

@@ -14,6 +14,7 @@ Helper component for rendering rectangular marks in SVG
     } from '../../types';
     import { addEventHandlers } from './events';
     import { getContext } from 'svelte';
+    import Anchor from './Anchor.svelte';
 
     let {
         datum,
@@ -101,33 +102,35 @@ Helper component for rendering rectangular marks in SVG
     );
 </script>
 
-{#if hasBorderRadius}
-    <path
-        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
-        d={roundedRect(
-            0,
-            0,
-            width - insetLeft - insetRight,
-            height - insetTop - insetBottom,
-            borderRadius
-        )}
-        class={[styleClass, className]}
-        {style}
-        use:addEventHandlers={{
-            getPlotState,
-            options,
-            datum: datum?.datum
-        }} />
-{:else}
-    <rect
-        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
-        width={width - insetLeft - insetRight}
-        height={height - insetTop - insetBottom}
-        class={[styleClass, className]}
-        {style}
-        use:addEventHandlers={{
-            getPlotState,
-            options,
-            datum: datum?.datum
-        }} />
-{/if}
+<Anchor {options} datum={datum?.datum}>
+    {#if hasBorderRadius}
+        <path
+            transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
+            d={roundedRect(
+                0,
+                0,
+                width - insetLeft - insetRight,
+                height - insetTop - insetBottom,
+                borderRadius
+            )}
+            class={[styleClass, className]}
+            {style}
+            use:addEventHandlers={{
+                getPlotState,
+                options,
+                datum: datum?.datum
+            }} />
+    {:else}
+        <rect
+            transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
+            width={width - insetLeft - insetRight}
+            height={height - insetTop - insetBottom}
+            class={[styleClass, className]}
+            {style}
+            use:addEventHandlers={{
+                getPlotState,
+                options,
+                datum: datum?.datum
+            }} />
+    {/if}
+</Anchor>

package/dist/marks/helpers/Regression.svelte

@@ -123,7 +123,7 @@
     );
 
     let confBandGen = $derived(
-        confidence !== false
+        confidence !== false && regression.predict
             ? confidenceInterval(
                   data
                       .map((d) => ({

package/dist/transforms/bollinger.d.ts

@@ -12,6 +12,64 @@ export type BollingerOptions = {
 export declare function bollingerX(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
 export declare function bollingerY(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
 export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): {
+    filter?: import("../types.js").ConstantAccessor<boolean>;
+    facet?: "auto" | "include" | "exclude" | undefined;
+    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>;
+    sort?: string | import("../types.js").ConstantAccessor<import("../types.js").RawValue> | ((a: import("../types.js").RawValue, b: import("../types.js").RawValue) => number) | {
+        channel: string;
+        order?: "ascending" | "descending";
+    };
+    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 | undefined;
+    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> | undefined;
+    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    class?: string | null | undefined;
+    cursor?: import("../types.js").ConstantAccessor<import("csstype").Property.Cursor>;
     data: {
         __x: import("../types.js").RawValue;
         __lo: number;

package/dist/transforms/centroid.d.ts

@@ -2,6 +2,64 @@ import type { DataRecord, TransformArg } from '../types.js';
 export declare function geoCentroid({ data, ...options }: TransformArg<DataRecord>): {
     x: (d: any) => any;
     y: (d: any) => any;
+    filter?: import("../types.js").ConstantAccessor<boolean>;
+    facet?: "auto" | "include" | "exclude" | undefined;
+    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>;
+    sort?: string | import("../types.js").ConstantAccessor<import("../types.js").RawValue> | ((a: import("../types.js").RawValue, b: import("../types.js").RawValue) => number) | {
+        channel: string;
+        order?: "ascending" | "descending";
+    };
+    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 | undefined;
+    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> | undefined;
+    ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmousedown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragenter?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragleave?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragover?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ondragend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchstart?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchmove?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchend?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    ontouchcancel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement> | undefined;
+    class?: string | null | undefined;
+    cursor?: import("../types.js").ConstantAccessor<import("csstype").Property.Cursor>;
     data: {
         __centroid__: [number, number];
         ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];