svelteplot 0.0.1-alpha.9 → 0.1.3-next.3

package/dist/index.d.ts

@@ -1,16 +1,64 @@
+export { default as Area } from './marks/Area.svelte';
+export { default as AreaX } from './marks/AreaX.svelte';
+export { default as AreaY } from './marks/AreaY.svelte';
+export { default as Arrow } from './marks/Arrow.svelte';
 export { default as AxisX } from './marks/AxisX.svelte';
 export { default as AxisY } from './marks/AxisY.svelte';
-export { default as ColorLegend } from './marks/ColorLegend.svelte';
+export { default as BarX } from './marks/BarX.svelte';
+export { default as BarY } from './marks/BarY.svelte';
+export { default as BollingerX } from './marks/BollingerX.svelte';
+export { default as BollingerY } from './marks/BollingerY.svelte';
+export { default as BoxX } from './marks/BoxX.svelte';
+export { default as BoxY } from './marks/BoxY.svelte';
+export { default as Cell } from './marks/Cell.svelte';
+export { default as CellX } from './marks/CellX.svelte';
+export { default as CellY } from './marks/CellY.svelte';
+export { default as CustomMark } from './marks/CustomMark.svelte';
+export { default as CustomMarkHTML } from './marks/CustomMarkHTML.svelte';
+export { default as DifferenceY } from './marks/DifferenceY.svelte';
 export { default as Dot } from './marks/Dot.svelte';
 export { default as DotX } from './marks/DotX.svelte';
 export { default as DotY } from './marks/DotY.svelte';
 export { default as Frame } from './marks/Frame.svelte';
+export { default as Geo } from './marks/Geo.svelte';
+export { default as Graticule } from './marks/Graticule.svelte';
 export { default as GridX } from './marks/GridX.svelte';
 export { default as GridY } from './marks/GridY.svelte';
 export { default as Line } from './marks/Line.svelte';
 export { default as LineX } from './marks/LineX.svelte';
 export { default as LineY } from './marks/LineY.svelte';
+export { default as Link } from './marks/Link.svelte';
 export { default as Plot } from './Plot.svelte';
+export { default as Pointer } from './marks/Pointer.svelte';
+export { default as Vector } from './marks/Vector.svelte';
+export { default as Rect } from './marks/Rect.svelte';
+export { default as RectX } from './marks/RectX.svelte';
+export { default as RectY } from './marks/RectY.svelte';
+export { default as RegressionX } from './marks/RegressionX.svelte';
+export { default as RegressionY } from './marks/RegressionY.svelte';
 export { default as RuleX } from './marks/RuleX.svelte';
 export { default as RuleY } from './marks/RuleY.svelte';
+export { default as Sphere } from './marks/Sphere.svelte';
+export { default as Spike } from './marks/Spike.svelte';
+export { default as Text } from './marks/Text.svelte';
+export { default as TickX } from './marks/TickX.svelte';
+export { default as TickY } from './marks/TickY.svelte';
+export { default as ColorLegend } from './marks/ColorLegend.svelte';
+export { default as HTMLTooltip } from './marks/HTMLTooltip.svelte';
 export { default as SymbolLegend } from './marks/SymbolLegend.svelte';
+export { bin, binX, binY } from './transforms/bin.js';
+export { bollingerX, bollingerY } from './transforms/bollinger.js';
+export { geoCentroid } from './transforms/centroid.js';
+export { filter } from './transforms/filter.js';
+export { map, mapX, mapY } from './transforms/map.js';
+export { normalizeX, normalizeY } from './transforms/normalize.js';
+export { group, groupX, groupY, groupZ } from './transforms/group.js';
+export { intervalX, intervalY } from './transforms/interval.js';
+export { recordizeX, recordizeY } from './transforms/recordize.js';
+export { renameChannels } from './transforms/rename.js';
+export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './transforms/select.js';
+export { shiftX, shiftY } from './transforms/shift.js';
+export { sort, shuffle, reverse } from './transforms/sort.js';
+export { stackX, stackY } from './transforms/stack.js';
+export { windowX, windowY } from './transforms/window.js';
+export { formatMonth } from './helpers/formats.js';

package/dist/index.js

@@ -1,17 +1,68 @@
-// Reexport your entry components here
+// SVG marks
+export { default as Area } from './marks/Area.svelte';
+export { default as AreaX } from './marks/AreaX.svelte';
+export { default as AreaY } from './marks/AreaY.svelte';
+export { default as Arrow } from './marks/Arrow.svelte';
 export { default as AxisX } from './marks/AxisX.svelte';
 export { default as AxisY } from './marks/AxisY.svelte';
-export { default as ColorLegend } from './marks/ColorLegend.svelte';
+export { default as BarX } from './marks/BarX.svelte';
+export { default as BarY } from './marks/BarY.svelte';
+export { default as BollingerX } from './marks/BollingerX.svelte';
+export { default as BollingerY } from './marks/BollingerY.svelte';
+export { default as BoxX } from './marks/BoxX.svelte';
+export { default as BoxY } from './marks/BoxY.svelte';
+export { default as Cell } from './marks/Cell.svelte';
+export { default as CellX } from './marks/CellX.svelte';
+export { default as CellY } from './marks/CellY.svelte';
+export { default as CustomMark } from './marks/CustomMark.svelte';
+export { default as CustomMarkHTML } from './marks/CustomMarkHTML.svelte';
+export { default as DifferenceY } from './marks/DifferenceY.svelte';
 export { default as Dot } from './marks/Dot.svelte';
 export { default as DotX } from './marks/DotX.svelte';
 export { default as DotY } from './marks/DotY.svelte';
 export { default as Frame } from './marks/Frame.svelte';
+export { default as Geo } from './marks/Geo.svelte';
+export { default as Graticule } from './marks/Graticule.svelte';
 export { default as GridX } from './marks/GridX.svelte';
 export { default as GridY } from './marks/GridY.svelte';
 export { default as Line } from './marks/Line.svelte';
 export { default as LineX } from './marks/LineX.svelte';
 export { default as LineY } from './marks/LineY.svelte';
+export { default as Link } from './marks/Link.svelte';
 export { default as Plot } from './Plot.svelte';
+export { default as Pointer } from './marks/Pointer.svelte';
+export { default as Vector } from './marks/Vector.svelte';
+export { default as Rect } from './marks/Rect.svelte';
+export { default as RectX } from './marks/RectX.svelte';
+export { default as RectY } from './marks/RectY.svelte';
+export { default as RegressionX } from './marks/RegressionX.svelte';
+export { default as RegressionY } from './marks/RegressionY.svelte';
 export { default as RuleX } from './marks/RuleX.svelte';
 export { default as RuleY } from './marks/RuleY.svelte';
+export { default as Sphere } from './marks/Sphere.svelte';
+export { default as Spike } from './marks/Spike.svelte';
+export { default as Text } from './marks/Text.svelte';
+export { default as TickX } from './marks/TickX.svelte';
+export { default as TickY } from './marks/TickY.svelte';
+// HTML marks
+export { default as ColorLegend } from './marks/ColorLegend.svelte';
+export { default as HTMLTooltip } from './marks/HTMLTooltip.svelte';
 export { default as SymbolLegend } from './marks/SymbolLegend.svelte';
+// transforms
+export { bin, binX, binY } from './transforms/bin.js';
+export { bollingerX, bollingerY } from './transforms/bollinger.js';
+export { geoCentroid } from './transforms/centroid.js';
+export { filter } from './transforms/filter.js';
+export { map, mapX, mapY } from './transforms/map.js';
+export { normalizeX, normalizeY } from './transforms/normalize.js';
+export { group, groupX, groupY, groupZ } from './transforms/group.js';
+export { intervalX, intervalY } from './transforms/interval.js';
+export { recordizeX, recordizeY } from './transforms/recordize.js';
+export { renameChannels } from './transforms/rename.js';
+export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './transforms/select.js';
+export { shiftX, shiftY } from './transforms/shift.js';
+export { sort, shuffle, reverse } from './transforms/sort.js';
+export { stackX, stackY } from './transforms/stack.js';
+export { windowX, windowY } from './transforms/window.js';
+// format helpers
+export { formatMonth } from './helpers/formats.js';

package/dist/marks/Area.svelte

@@ -0,0 +1,146 @@
+<script module lang="ts">
+    export type AreaMarkProps = {
+        z?: ChannelAccessor;
+        fill?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        stack?: Partial<StackOptions>;
+    };
+</script>
+
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import { getContext } from 'svelte';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { groups as d3Groups } from 'd3-array';
+    import { area, type CurveFactory } from 'd3-shape';
+    import callWithProps from '../helpers/callWithProps.js';
+    import { maybeCurve } from '../helpers/curves.js';
+    import { isValid } from '../helpers/index.js';
+
+    import type {
+        CurveName,
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        FacetContext,
+        ScaledDataRecord
+    } from '../types.js';
+    import type { RawValue } from '../types.js';
+    import type { StackOptions } from '../transforms/stack.js';
+
+    type AreaProps = BaseMarkProps & {
+        data: DataRecord[];
+        /**
+         * Lorem ipsum
+         */
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+    } & AreaMarkProps;
+
+    let {
+        data,
+        /** the curve */
+        curve = 'linear',
+        tension = 0,
+        class: className = null,
+        ...options
+    }: AreaProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const groupByKey = $derived(options.z || options.fill || options.stroke);
+
+    const areaPath: (d: ScaledDataRecord[]) => string = $derived(
+        callWithProps(area, [], {
+            curve: maybeCurve(curve, tension),
+            defined: (d: ScaledDataRecord) =>
+                options.x1 != null && options.x2 != null
+                    ? // vertical
+                      isValid(d.y1) && isValid(d.x1) && isValid(d.x2)
+                    : // horizontal
+                      isValid(d.x1) && isValid(d.y1) && isValid(d.y2),
+            ...(options.x1 != null && options.x2 != null
+                ? {
+                      // "vertical" area
+                      x0: (d: ScaledDataRecord) => d.x1,
+                      x1: (d: ScaledDataRecord) => d.x2,
+                      y: (d: ScaledDataRecord) => d.y1
+                  }
+                : {
+                      // "horizontal" area
+                      x: (d: ScaledDataRecord) => d.x1,
+                      y0: (d: ScaledDataRecord) => d.y1,
+                      y1: (d: ScaledDataRecord) => d.y2
+                  })
+        })
+    );
+
+    function groupAndSort(data: ScaledDataRecord[]) {
+        const groups = groupByKey
+            ? d3Groups(data, (d) => resolveProp(groupByKey, d.datum)).map((d) => d[1])
+            : [data];
+        if (options.sort) {
+            return groups.toSorted((a, b) =>
+                resolveChannel('sort', a[0].datum, options) >
+                resolveChannel('sort', b[0].datum, options)
+                    ? 1
+                    : -1
+            );
+        }
+        return groups;
+    }
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    let testFacet = $derived(getTestFacet());
+</script>
+
+<Mark
+    type="area"
+    {data}
+    channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    required={['x1', 'y1']}
+    {...options}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {@const grouped = groupAndSort(scaledData)}
+        <GroupMultiple length={grouped.length}>
+            {#each grouped as areaData}
+                {#snippet el(datum: ScaledDataRecord)}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        datum,
+                        options,
+                        'fill',
+                        usedScales
+                    )}
+                    <path
+                        class={['svelteplot-area', className, styleClass]}
+                        clip-path={options.clipPath}
+                        d={areaPath(areaData)}
+                        {style} />
+                {/snippet}
+                {#if areaData.length > 0}
+                    {#if options.href}
+                        <a
+                            href={resolveProp(options.href, areaData[0].datum, '')}
+                            target={resolveProp(options.target, areaData[0].datum, '_self')}>
+                            {@render el(areaData[0])}
+                        </a>
+                    {:else}
+                        {@render el(areaData[0])}
+                    {/if}
+                {/if}
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,30 @@
+export type AreaMarkProps = {
+    z?: ChannelAccessor;
+    fill?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
+    curve?: CurveName | CurveFactory;
+    tension?: number;
+    sort?: ConstantAccessor<RawValue> | {
+        channel: 'stroke' | 'fill';
+    };
+    stack?: Partial<StackOptions>;
+};
+import { type CurveFactory } from 'd3-shape';
+import type { CurveName, DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+import type { RawValue } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+type AreaProps = BaseMarkProps & {
+    data: DataRecord[];
+    /**
+     * Lorem ipsum
+     */
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+} & AreaMarkProps;
+declare const Area: import("svelte").Component<AreaProps, {}, "">;
+type Area = ReturnType<typeof Area>;
+export default Area;

package/dist/marks/AreaX.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import Area, { type AreaMarkProps } from './Area.svelte';
+    import { renameChannels } from '../transforms/rename.js';
+    import { stackX } from '../transforms/stack.js';
+    import { recordizeX } from '../transforms/recordize.js';
+    import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+
+    type AreaXProps = BaseMarkProps & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y?: ChannelAccessor;
+    } & AreaMarkProps;
+
+    // we're discarding y1 and y2 props since they are not
+    let { data, stack, ...options }: AreaXProps = $props();
+
+    const args = $derived(
+        renameChannels<AreaXProps>(
+            stackX(recordizeX({ data, ...options, y1: null, y2: null }), stack),
+            { y: 'y1' }
+        )
+    );
+</script>
+
+<Area {...args}></Area>

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

@@ -0,0 +1,12 @@
+import { type AreaMarkProps } from './Area.svelte';
+import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+type AreaXProps = BaseMarkProps & {
+    data: DataRecord[];
+    x?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y?: ChannelAccessor;
+} & AreaMarkProps;
+declare const AreaX: import("svelte").Component<AreaXProps, {}, "">;
+type AreaX = ReturnType<typeof AreaX>;
+export default AreaX;

package/dist/marks/AreaY.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import Area, { type AreaMarkProps } from './Area.svelte';
+    import { renameChannels } from '../transforms/rename.js';
+    import { stackY } from '../transforms/stack.js';
+    import { recordizeY } from '../transforms/recordize.js';
+    import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+
+    /**
+     * AreaY mark foo
+     */
+    type AreaYProps = BaseMarkProps & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
+        /**
+         * this some extensive help for the y channel
+         */
+        y?: ChannelAccessor;
+    } & AreaMarkProps;
+
+    let { data, stack, ...options }: AreaYProps = $props();
+
+    const args = $derived(
+        renameChannels<AreaYProps>(
+            stackY(recordizeY({ data, ...options, x1: null, x2: null }), stack),
+            { x: 'x1' }
+        )
+    );
+</script>
+
+<!--
+@component
+The AreaY component can be used for foobar
+
+-->
+
+<Area {...args}></Area>

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

@@ -0,0 +1,19 @@
+import { type AreaMarkProps } from './Area.svelte';
+import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+/**
+ * AreaY mark foo
+ */
+type AreaYProps = BaseMarkProps & {
+    data: DataRecord[];
+    x?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    /**
+     * this some extensive help for the y channel
+     */
+    y?: ChannelAccessor;
+} & AreaMarkProps;
+/** The AreaY component can be used for foobar */
+declare const AreaY: import("svelte").Component<AreaYProps, {}, "">;
+type AreaY = ReturnType<typeof AreaY>;
+export default AreaY;

package/dist/marks/Arrow.svelte

@@ -0,0 +1,139 @@
+<!--
+    @component Arrow2
+-->
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        FacetContext,
+        RawValue
+    } from '../types.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { coalesce, maybeData, maybeNumber } from '../helpers/index.js';
+    import Mark from '../Mark.svelte';
+    import { arrowPath, maybeSweep, type SweepOption } from '../helpers/arrowPath.js';
+    import { replaceChannels } from '../transforms/rename.js';
+    import { addEventHandlers } from './helpers/events.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+
+    type ArrowProps = BaseMarkProps & {
+        data: DataRecord[];
+        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        x1: ChannelAccessor;
+        y1: ChannelAccessor;
+        x2: ChannelAccessor;
+        y2: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        /**
+         * the bend angle, in degrees; defaults to 0°; true for 22.5°
+         */
+        bend?: ConstantAccessor<number> | true;
+        /**
+         * the arrowhead angle, in degrees; defaults to 60°
+         */
+        headAngle?: ConstantAccessor<number>;
+        /**
+         * the arrowhead scale; defaults to 8
+         */
+        headLength?: ConstantAccessor<number>;
+        /**
+         * inset at the end of the arrow (useful if the arrow points to a dot)
+         */
+        insetEnd?: ConstantAccessor<number>;
+        /**
+         * inset at the start of the arrow
+         */
+        insetStart?: ConstantAccessor<number>;
+        /**
+         * shorthand for the two insets
+         */
+        inset?: ConstantAccessor<number>;
+        sweep?: SweepOption;
+        children?: Snippet;
+    };
+
+    let { data = [{}], class: className = null, ...options }: ArrowProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const sorted = $derived(
+        options.sort
+            ? maybeData(data).toSorted((a, b) =>
+                  resolveChannel('sort', a, options) > resolveChannel('sort', b, options) ? 1 : -1
+              )
+            : maybeData(data)
+    );
+
+    const args: ArrowProps = $derived(
+        replaceChannels({ data: sorted, ...options }, { y: ['y1', 'y2'], x: ['x1', 'x2'] })
+    );
+</script>
+
+<Mark
+    type="arrow"
+    required={['x1', 'x2', 'y1', 'y2']}
+    channels={['x1', 'y1', 'x2', 'y2', 'opacity', 'stroke', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {@const sweep = maybeSweep(args.sweep)}
+        <GroupMultiple class="arrow" length={scaledData.length}>
+            {#each scaledData as d}
+                {#if d.valid}
+                    {@const inset = resolveProp(args.inset, d.datum, 0)}
+                    {@const insetStart = resolveProp(args.insetStart, d.datum)}
+                    {@const insetEnd = resolveProp(args.insetEnd, d.datum)}
+                    {@const headAngle = resolveProp(args.headAngle, d.datum, 60)}
+                    {@const headLength = resolveProp(args.headLength, d.datum, 8)}
+                    {@const bend = resolveProp(args.bend, d.datum, 0)}
+                    {@const strokeWidth = resolveProp(args.strokeWidth, d.datum, 1)}
+                    {@const arrPath = arrowPath(
+                        d.x1,
+                        d.y1,
+                        d.x2,
+                        d.y2,
+                        maybeNumber(coalesce(insetStart, inset)),
+                        maybeNumber(coalesce(insetEnd, inset)),
+                        headAngle,
+                        headLength,
+                        bend === true ? 22.5 : bend === false ? 0 : bend,
+                        strokeWidth,
+                        sweep
+                    )}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        d,
+                        {
+                            strokeLinecap: 'round',
+                            strokeLinejoin: 'round',
+                            ...args,
+                            strokeWidth: strokeWidth ?? 1.6
+                        },
+                        'stroke',
+                        usedScales
+                    )}
+                    <g
+                        class={[className]}
+                        use:addEventHandlers={{
+                            getPlotState,
+                            options: mark.options,
+                            datum: d.datum
+                        }}>
+                        {#if options.onmouseenter || options.onclick}
+                            <!-- add invisible path in bg for easier mouse access -->
+                            <path
+                                d={arrPath}
+                                style="fill:none;stroke-width: {(strokeWidth || 1) +
+                                    10}; stroke: red; stroke-opacity:0" />
+                        {/if}
+                        <path class={[styleClass]} d={arrPath} {style} />
+                    </g>
+                {/if}
+            {/each}
+        </GroupMultiple>
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,44 @@
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, RawValue } from '../types.js';
+import { type SweepOption } from '../helpers/arrowPath.js';
+type ArrowProps = BaseMarkProps & {
+    data: DataRecord[];
+    sort?: ConstantAccessor<RawValue> | {
+        channel: 'stroke' | 'fill';
+    };
+    x1: ChannelAccessor;
+    y1: ChannelAccessor;
+    x2: ChannelAccessor;
+    y2: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    /**
+     * the bend angle, in degrees; defaults to 0°; true for 22.5°
+     */
+    bend?: ConstantAccessor<number> | true;
+    /**
+     * the arrowhead angle, in degrees; defaults to 60°
+     */
+    headAngle?: ConstantAccessor<number>;
+    /**
+     * the arrowhead scale; defaults to 8
+     */
+    headLength?: ConstantAccessor<number>;
+    /**
+     * inset at the end of the arrow (useful if the arrow points to a dot)
+     */
+    insetEnd?: ConstantAccessor<number>;
+    /**
+     * inset at the start of the arrow
+     */
+    insetStart?: ConstantAccessor<number>;
+    /**
+     * shorthand for the two insets
+     */
+    inset?: ConstantAccessor<number>;
+    sweep?: SweepOption;
+    children?: Snippet;
+};
+/** Arrow2 */
+declare const Arrow: import("svelte").Component<ArrowProps, {}, "">;
+type Arrow = ReturnType<typeof Arrow>;
+export default Arrow;