layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/RectClipPath/RectClipPath.html.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { RectClipPathProps, RectClipPathPropsWithoutHTML } from './RectClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RectClipPathBase from './RectClipPath.base.svelte';
+  import ClipPath from '../ClipPath/ClipPath.html.svelte';
+
+  import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+
+  let props: RectClipPathProps = $props();
+</script>
+
+<RectClipPathBase {ClipPath} {...props} />

package/dist/components/RectClipPath/RectClipPath.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RectClipPathProps, RectClipPathPropsWithoutHTML } from './RectClipPath.shared.svelte.js';
+import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+declare const RectClipPath: import("svelte").Component<RectClipPathProps, {}, "">;
+type RectClipPath = ReturnType<typeof RectClipPath>;
+export default RectClipPath;

package/dist/components/RectClipPath/RectClipPath.shared.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { CommonEvents, Without } from '../../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { RectPropsWithoutHTML } from '../Rect/Rect.shared.svelte.js';
+import type { MotionProp } from '../../utils/motion.svelte.js';
+export type BaseRectClipPathPropsWithoutHTML = {
+    /** A unique id for the clipPath. */
+    id?: string;
+    /** The x position of the clipPath. @default 0 */
+    x?: number;
+    /** The initial x position (used as the animation start when `motion` is set). @default x */
+    initialX?: number;
+    /** The y position of the clipPath. @default 0 */
+    y?: number;
+    /** The initial y position (used as the animation start when `motion` is set). @default y */
+    initialY?: number;
+    /** The width of the clipPath. @required */
+    width: number;
+    /** The initial width (used as the animation start when `motion` is set). @default width */
+    initialWidth?: number;
+    /** The height of the clipPath. @required */
+    height: number;
+    /** The initial height (used as the animation start when `motion` is set). @default height */
+    initialHeight?: number;
+    /** Whether to disable clipping (show all). @default false */
+    disabled?: boolean;
+    /** Invert the clip — content renders *outside* the rect. @default false */
+    invert?: boolean;
+    /** The default children snippet which provides the id and url for the clipPath. */
+    children?: Snippet<[{
+        id: string;
+        url: string;
+    }]>;
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+};
+export type RectClipPathPropsWithoutHTML = BaseRectClipPathPropsWithoutHTML & Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
+export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> & CommonEvents;

package/dist/components/RectClipPath/RectClipPath.shared.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/components/RectClipPath/RectClipPath.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { RectClipPathProps, RectClipPathPropsWithoutHTML } from './RectClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import RectClipPathSvg from './RectClipPath.svg.svelte';
+  import RectClipPathCanvas from './RectClipPath.canvas.svelte';
+  import RectClipPathHtml from './RectClipPath.html.svelte';
+  import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: RectClipPathProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <RectClipPathSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <RectClipPathCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <RectClipPathHtml {...props} />
+{/if}

package/dist/components/RectClipPath/RectClipPath.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RectClipPathProps, RectClipPathPropsWithoutHTML } from './RectClipPath.shared.svelte.js';
+import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+declare const RectClipPath: import("svelte").Component<RectClipPathProps, {}, "">;
+type RectClipPath = ReturnType<typeof RectClipPath>;
+export default RectClipPath;

package/dist/components/RectClipPath/RectClipPath.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { RectClipPathProps, RectClipPathPropsWithoutHTML } from './RectClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RectClipPathBase from './RectClipPath.base.svelte';
+  import ClipPath from '../ClipPath/ClipPath.svg.svelte';
+
+  import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+
+  let props: RectClipPathProps = $props();
+</script>
+
+<RectClipPathBase {ClipPath} {...props} />

package/dist/components/RectClipPath/RectClipPath.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RectClipPathProps, RectClipPathPropsWithoutHTML } from './RectClipPath.shared.svelte.js';
+import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+declare const RectClipPath: import("svelte").Component<RectClipPathProps, {}, "">;
+type RectClipPath = ReturnType<typeof RectClipPath>;
+export default RectClipPath;

package/dist/components/Rule/Rule.base.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { RuleProps } from './Rule.shared.svelte.js';
+
+  /**
+   * Per-layer primitive components a `<Rule.base>` consumer must inject.
+   */
+  export type RuleBaseLayerComponents = {
+    Group: Component<any>;
+    Line: Component<any>;
+    Circle: Component<any>;
+  };
+
+  export type RuleBaseProps = RuleProps & RuleBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { pointRadial } from 'd3-shape';
+  import { cls } from '@layerstack/tailwind';
+
+  import { RuleState } from './Rule.shared.svelte.js';
+
+  let {
+    Group,
+    Line,
+    Circle,
+    data: dataProp,
+    x = false,
+    xOffset = 0,
+    y = false,
+    yOffset = 0,
+    stroke: strokeProp,
+    class: className,
+    children,
+    ...restProps
+  }: RuleBaseProps = $props();
+
+  const c = new RuleState(
+    () =>
+      ({
+        data: dataProp,
+        x,
+        xOffset,
+        y,
+        yOffset,
+        stroke: strokeProp,
+      }) as any
+  );
+</script>
+
+<Group class="lc-rule-g">
+  {#each c.lines as line}
+    {@const stroke = line.stroke ?? strokeProp}
+
+    {#if c.ctx.radial}
+      {#if line.axis === 'x'}
+        {@const [x1, y1] = pointRadial(line.x1, line.y1)}
+        {@const [x2, y2] = pointRadial(line.x2, line.y2)}
+        <Line
+          {...restProps}
+          {x1}
+          {y1}
+          {x2}
+          {y2}
+          {stroke}
+          class={cls('lc-rule-x-radial-line', className)}
+        />
+      {:else if line.axis === 'y'}
+        <Circle r={line.y1} {stroke} class={cls('lc-rule-y-radial-circle', className)} />
+      {/if}
+    {:else}
+      <Line
+        {...restProps}
+        x1={line.x1}
+        y1={line.y1}
+        x2={line.x2}
+        y2={line.y2}
+        {stroke}
+        class={cls(line.axis === 'x' ? 'lc-rule-x-line' : 'lc-rule-y-line', className)}
+      />
+    {/if}
+  {/each}
+</Group>
+
+<style>
+  @layer components {
+    /* TODO: better way to handle this without affecting other components? */
+    /* Could add a layer between "components" and "base" but would require more setup (and not align with TW layers) */
+    :global(
+      :where(
+        .lc-rule-x-line,
+        .lc-rule-y-line,
+        .lc-rule-x-radial-line,
+        .lc-rule-y-radial-circle
+      ):not([class*='lc-axis'], [class*='lc-grid'])
+    ) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-rule-y-radial-circle)) {
+      --fill-color: none;
+    }
+  }
+</style>

package/dist/components/Rule/Rule.base.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+import type { RuleProps } from './Rule.shared.svelte.js';
+/**
+ * Per-layer primitive components a `<Rule.base>` consumer must inject.
+ */
+export type RuleBaseLayerComponents = {
+    Group: Component<any>;
+    Line: Component<any>;
+    Circle: Component<any>;
+};
+export type RuleBaseProps = RuleProps & RuleBaseLayerComponents;
+declare const Rule: Component<RuleBaseProps, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/components/Rule/Rule.canvas.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { RuleProps, RulePropsWithoutHTML } from './Rule.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RuleBase from './Rule.base.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Line from '../Line/Line.canvas.svelte';
+  import Circle from '../Circle/Circle.canvas.svelte';
+
+  import type { RuleProps } from './Rule.shared.svelte.js';
+
+  let props: RuleProps = $props();
+</script>
+
+<RuleBase {Group} {Line} {Circle} {...props} />

package/dist/components/Rule/Rule.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RuleProps, RulePropsWithoutHTML } from './Rule.shared.svelte.js';
+import type { RuleProps } from './Rule.shared.svelte.js';
+declare const Rule: import("svelte").Component<RuleProps, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/components/Rule/Rule.html.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { RuleProps, RulePropsWithoutHTML } from './Rule.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RuleBase from './Rule.base.svelte';
+  import Group from '../Group/Group.html.svelte';
+  import Line from '../Line/Line.html.svelte';
+  import Circle from '../Circle/Circle.html.svelte';
+
+  import type { RuleProps } from './Rule.shared.svelte.js';
+
+  let props: RuleProps = $props();
+</script>
+
+<RuleBase {Group} {Line} {Circle} {...props} />

package/dist/components/Rule/Rule.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RuleProps, RulePropsWithoutHTML } from './Rule.shared.svelte.js';
+import type { RuleProps } from './Rule.shared.svelte.js';
+declare const Rule: import("svelte").Component<RuleProps, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/components/{Rule.svelte.d.ts → Rule/Rule.shared.svelte.d.ts}

@@ -1,5 +1,8 @@
-import type { Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import { type Accessor } from '../../utils/common.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { LinePropsWithoutHTML } from '../Line/Line.shared.svelte.js';
 export type BaseRulePropsWithoutHTML = {
     /**
      * Override the data from the context.
@@ -39,8 +42,25 @@ export type BaseRulePropsWithoutHTML = {
 };
 export type RulePropsWithoutHTML = BaseRulePropsWithoutHTML & Without<Partial<LinePropsWithoutHTML>, BaseRulePropsWithoutHTML>;
 export type RuleProps = RulePropsWithoutHTML & Without<SVGAttributes<SVGElement>, RulePropsWithoutHTML>;
-import { type LinePropsWithoutHTML } from './Line.svelte';
-import { type Accessor } from '../utils/common.js';
-declare const Rule: import("svelte").Component<RuleProps, {}, "">;
-type Rule = ReturnType<typeof Rule>;
-export default Rule;
+export type RuleLineSegment = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    axis: 'x' | 'y';
+    stroke?: string | null;
+};
+/**
+ * Reactive state shared by every per-layer Rule variant.
+ */
+export declare class RuleState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => RuleProps);
+    data: any[];
+    singleX: any;
+    singleY: any;
+    xRangeMinMax: [number, number] | [undefined, undefined];
+    yRangeMinMax: [number, number] | [undefined, undefined];
+    lines: RuleLineSegment[];
+}

package/dist/components/Rule/Rule.shared.svelte.js

@@ -0,0 +1,113 @@
+import { extent } from 'd3-array';
+import { accessor, chartDataArray } from '../../utils/common.js';
+import { isScaleBand, isScaleNumeric } from '../../utils/scales.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer Rule variant.
+ */
+export class RuleState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    constructor(getProps) {
+        this.#getProps = getProps;
+        this.ctx.registerComponent({ name: 'Rule', kind: 'composite-mark' });
+    }
+    data = $derived(chartDataArray(this.#getProps().data ?? this.ctx.data));
+    singleX = $derived.by(() => {
+        const x = this.#getProps().x;
+        return (typeof x === 'number' ||
+            x instanceof Date ||
+            x === true ||
+            x === '$left' ||
+            x === '$right' ||
+            (isScaleBand(this.ctx.xScale) && this.ctx.xDomain.includes(x)));
+    });
+    singleY = $derived.by(() => {
+        const y = this.#getProps().y;
+        return (typeof y === 'number' ||
+            y instanceof Date ||
+            y === true ||
+            y === '$bottom' ||
+            y === '$top' ||
+            (isScaleBand(this.ctx.yScale) && this.ctx.yDomain.includes(y)));
+    });
+    xRangeMinMax = $derived(extent(this.ctx.xRange));
+    yRangeMinMax = $derived(extent(this.ctx.yRange));
+    lines = $derived.by(() => {
+        const props = this.#getProps();
+        const x = props.x ?? false;
+        const y = props.y ?? false;
+        const xOffset = props.xOffset ?? 0;
+        const yOffset = props.yOffset ?? 0;
+        const strokeProp = props.stroke;
+        const result = [];
+        // Single x line
+        if (this.singleX) {
+            const _x = x === true || x === '$left'
+                ? this.xRangeMinMax[0]
+                : x === '$right'
+                    ? this.xRangeMinMax[1]
+                    : this.ctx.xScale(x) + xOffset;
+            result.push({
+                x1: _x,
+                y1: this.ctx.yRange[0] || 0,
+                x2: _x,
+                y2: this.ctx.yRange[1] || 0,
+                axis: 'x',
+            });
+        }
+        // Single y line
+        if (this.singleY) {
+            const _y = y === true || y === '$bottom'
+                ? this.yRangeMinMax[1]
+                : y === '$top'
+                    ? this.yRangeMinMax[0]
+                    : this.ctx.yScale(y) + yOffset;
+            result.push({
+                x1: this.ctx.xRange[0] || 0,
+                y1: _y,
+                x2: this.ctx.xRange[1] || 0,
+                y2: _y,
+                axis: 'y',
+            });
+        }
+        // Data driven lines
+        if (!this.singleX && !this.singleY) {
+            const xAccessor = x !== false ? accessor(x) : this.ctx.x;
+            const yAccessor = y !== false ? accessor(y) : this.ctx.y;
+            const xBandOffset = isScaleBand(this.ctx.xScale) ? this.ctx.xScale.bandwidth() / 2 : 0;
+            const yBandOffset = isScaleBand(this.ctx.yScale) ? this.ctx.yScale.bandwidth() / 2 : 0;
+            for (const d of this.data) {
+                const xValue = xAccessor(d);
+                const yValue = yAccessor(d);
+                const x1Value = Array.isArray(xValue)
+                    ? xValue[0]
+                    : isScaleNumeric(this.ctx.xScale)
+                        ? 0
+                        : xValue;
+                const x2Value = Array.isArray(xValue) ? xValue[1] : xValue;
+                const y1Value = Array.isArray(yValue)
+                    ? yValue[0]
+                    : isScaleNumeric(this.ctx.yScale)
+                        ? 0
+                        : yValue;
+                const y2Value = Array.isArray(yValue) ? yValue[1] : yValue;
+                result.push({
+                    x1: this.ctx.xScale(x1Value) + xBandOffset + xOffset,
+                    y1: this.ctx.yScale(y1Value) + yBandOffset + yOffset,
+                    x2: this.ctx.xScale(x2Value) + xBandOffset + xOffset,
+                    y2: this.ctx.yScale(y2Value) + yBandOffset + yOffset,
+                    axis: Array.isArray(yValue) || isScaleBand(this.ctx.xScale) ? 'x' : 'y',
+                    stroke: (strokeProp ?? this.ctx.config.c) ? this.ctx.cGet(d) : null,
+                });
+            }
+        }
+        // Remove lines if out of range of chart (non-0 baseline, brushing, etc)
+        return result.filter((line) => {
+            return (line.x1 >= this.xRangeMinMax[0] &&
+                line.x2 <= this.xRangeMinMax[1] &&
+                line.y1 >= this.yRangeMinMax[0] &&
+                line.y2 <= this.yRangeMinMax[1]);
+        });
+    });
+}

package/dist/components/Rule/Rule.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { RuleProps, RulePropsWithoutHTML } from './Rule.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import RuleSvg from './Rule.svg.svelte';
+  import RuleCanvas from './Rule.canvas.svelte';
+  import RuleHtml from './Rule.html.svelte';
+  import type { RuleProps } from './Rule.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: RuleProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <RuleSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <RuleCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <RuleHtml {...props} />
+{/if}

package/dist/components/Rule/Rule.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RuleProps, RulePropsWithoutHTML } from './Rule.shared.svelte.js';
+import type { RuleProps } from './Rule.shared.svelte.js';
+declare const Rule: import("svelte").Component<RuleProps, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/components/Rule/Rule.svg.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { RuleProps, RulePropsWithoutHTML } from './Rule.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RuleBase from './Rule.base.svelte';
+  import Group from '../Group/Group.svg.svelte';
+  import Line from '../Line/Line.svg.svelte';
+  import Circle from '../Circle/Circle.svg.svelte';
+
+  import type { RuleProps } from './Rule.shared.svelte.js';
+
+  let props: RuleProps = $props();
+</script>
+
+<RuleBase {Group} {Line} {Circle} {...props} />

package/dist/components/Rule/Rule.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RuleProps, RulePropsWithoutHTML } from './Rule.shared.svelte.js';
+import type { RuleProps } from './Rule.shared.svelte.js';
+declare const Rule: import("svelte").Component<RuleProps, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/components/Spline/Spline.base.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { SplineProps } from './Spline.shared.svelte.js';
+
+  export type SplineBaseLayerComponents = {
+    Path: Component<any>;
+  };
+
+  export type SplineBaseProps = SplineProps & SplineBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { SplineState } from './Spline.shared.svelte.js';
+
+  let {
+    Path,
+    data,
+    x,
+    y,
+    seriesKey,
+    defined,
+    curve,
+    stroke,
+    fill,
+    opacity,
+    motion,
+    ...restProps
+  }: SplineBaseProps = $props();
+
+  const c = new SplineState(
+    () =>
+      ({ data, x, y, seriesKey, defined, curve, stroke, fill, opacity, motion }) as SplineProps
+  );
+</script>
+
+{#if c.segments}
+  {#each c.segments as seg, i (i)}
+    <Path
+      pathData={seg.d}
+      stroke={seg.stroke}
+      fill={seg.fill}
+      opacity={seg.opacity ?? c.seriesOpacity}
+      {...c.series?.props}
+      {...restProps}
+    />
+  {/each}
+{:else}
+  <Path
+    pathData={c.isTweened ? c.tweenedPath : c.d}
+    stroke={(typeof stroke === 'string' ? stroke : undefined) ?? c.series?.color}
+    fill={typeof fill === 'string' ? fill : undefined}
+    opacity={(typeof opacity === 'number' ? opacity : undefined) ?? c.seriesOpacity}
+    {...c.series?.props}
+    {...restProps}
+  />
+{/if}

package/dist/components/Spline/Spline.base.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { SplineProps } from './Spline.shared.svelte.js';
+export type SplineBaseLayerComponents = {
+    Path: Component<any>;
+};
+export type SplineBaseProps = SplineProps & SplineBaseLayerComponents;
+declare const Spline: Component<SplineBaseProps, {}, "">;
+type Spline = ReturnType<typeof Spline>;
+export default Spline;

package/dist/components/Spline/Spline.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { SplineProps, SplinePropsWithoutHTML } from './Spline.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import SplineBase from './Spline.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+
+  import type { SplineProps } from './Spline.shared.svelte.js';
+
+  let props: SplineProps = $props();
+</script>
+
+<SplineBase {Path} {...props} />

package/dist/components/Spline/Spline.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { SplineProps, SplinePropsWithoutHTML } from './Spline.shared.svelte.js';
+import type { SplineProps } from './Spline.shared.svelte.js';
+declare const Spline: import("svelte").Component<SplineProps, {}, "">;
+type Spline = ReturnType<typeof Spline>;
+export default Spline;

package/dist/components/Spline/Spline.shared.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+import { type Accessor } from '../../utils/common.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ColorProp, StyleProp } from '../../utils/dataProp.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
+import type { Without } from '../../utils/types.js';
+import type { PathProps } from '../Path/Path.shared.svelte.js';
+export type SplinePropsWithoutHTML = {
+    /** Override data instead of using context */
+    data?: any;
+    /** Override `x` accessor from Chart context */
+    x?: Accessor;
+    /** Override `y` accessor from Chart context */
+    y?: Accessor;
+    /** Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `x`/`y` are not set. */
+    seriesKey?: string;
+    /** Function to determine if a point is defined */
+    defined?: Parameters<Line<any>['defined']>[0];
+    /** Curve of path drawn. Imported via d3-shape. */
+    curve?: CurveFactory | CurveFactoryLineOnly;
+    /** Stroke color or function returning stroke per data point. */
+    stroke?: ColorProp;
+    /** Fill color or function returning fill per data point. */
+    fill?: ColorProp;
+    /** Opacity or function returning opacity per data point. */
+    opacity?: StyleProp<number | undefined>;
+    /** Whether to animate the path using tweened interpolation. */
+    motion?: MotionProp;
+} & Omit<PathProps, 'x' | 'y' | 'motion' | 'stroke' | 'fill' | 'opacity'>;
+export type SplineProps = SplinePropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
+export type SplineSegment = {
+    stroke?: string;
+    fill?: string;
+    opacity?: number;
+    d: string;
+};
+/**
+ * Reactive state shared by every per-layer Spline variant. Holds the
+ * computed `d` (path data), `segments` (per-style-grouped paths when
+ * stroke/fill/opacity are functions), and tween state.
+ */
+export declare class SplineState {
+    #private;
+    ctx: ChartState;
+    geo: GeoState;
+    constructor(getProps: () => SplineProps);
+    series: import("../index.js").SeriesData<any, any> | undefined;
+    seriesAccessor: string | number | ((d: any) => any) | Accessor<any>[] | undefined;
+    xAccessor: (d: any) => any;
+    yAccessor: (d: any) => any;
+    xOffset: number;
+    yOffset: number;
+    hasAnyStyleFn: boolean;
+    d: string;
+    segments: SplineSegment[] | null;
+    isTweened: boolean;
+    get tweenedPath(): any;
+    seriesOpacity: number;
+}