layerchart 2.0.0-next.6 → 2.0.0-next.61

package/dist/components/Line/Line.svg.svelte

@@ -0,0 +1,122 @@
+<script lang="ts" module>
+  export type {
+    LineProps,
+    LinePropsWithoutHTML,
+  } from './Line.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import MarkerWrapper from '../MarkerWrapper.svelte';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { createId } from '../../utils/createId.js';
+  import { LineState, lineMarkInfo, type LineProps } from './Line.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    // Pull out props that collide with `<line>` SVG attribute names so
+    // `{...rest}` spread doesn't override our explicit values.
+    x1,
+    y1,
+    x2,
+    y2,
+    marker,
+    markerStart,
+    markerMid,
+    markerEnd,
+    ...rest
+  }: LineProps = $props();
+
+  const c = new LineState(
+    () =>
+      ({
+        x1,
+        y1,
+        x2,
+        y2,
+        marker,
+        markerStart,
+        markerMid,
+        markerEnd,
+        ...rest,
+      }) as LineProps
+  );
+
+  const markerStartId = $derived(markerStart || marker ? createId('marker-start', uid) : '');
+  const markerMidId = $derived(markerMid || marker ? createId('marker-mid', uid) : '');
+  const markerEndId = $derived(markerEnd || marker ? createId('marker-end', uid) : '');
+
+  c.chartCtx.registerComponent({
+    name: 'Line',
+    kind: 'mark',
+    markInfo: () =>
+      lineMarkInfo({ x1, y1, x2, y2, ...rest } as LineProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  <!-- Marker defs shared across all data-mode lines -->
+  <MarkerWrapper id={markerStartId} marker={markerStart ?? marker} />
+  <MarkerWrapper id={markerMidId} marker={markerMid ?? marker} />
+  <MarkerWrapper id={markerEndId} marker={markerEnd ?? marker} />
+  {#each c.resolvedItems as item (item.key)}
+    {@const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale)}
+    {@const resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, item.d)}
+    {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
+    <line
+      {...rest as any}
+      x1={item.x1}
+      y1={item.y1}
+      x2={item.x2}
+      y2={item.y2}
+      fill={resolvedFill}
+      stroke={resolvedStroke}
+      fill-opacity={resolvedFillOpacity}
+      stroke-width={resolvedStrokeWidth}
+      opacity={resolvedOpacity}
+      marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+      marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+      marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+      stroke-dasharray={c.dashArrayAttr}
+      class={cls('lc-line', resolvedClass)}
+    />
+  {/each}
+{:else}
+  <line
+    {...rest as any}
+    x1={c.motionX1}
+    y1={c.motionY1}
+    x2={c.motionX2}
+    y2={c.motionY2}
+    fill={c.staticFill}
+    stroke={c.staticStroke}
+    fill-opacity={c.staticFillOpacity}
+    stroke-width={c.staticStrokeWidth}
+    opacity={c.staticOpacity}
+    marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+    marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+    marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+    stroke-dasharray={c.dashArrayAttr}
+    class={cls('lc-line', c.staticClassName)}
+  />
+  <MarkerWrapper id={markerStartId} marker={markerStart ?? marker} />
+  <MarkerWrapper id={markerMidId} marker={markerMid ?? marker} />
+  <MarkerWrapper id={markerEndId} marker={markerEnd ?? marker} />
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-line)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-line, svg.lc-line):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+  }
+</style>

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

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

package/dist/components/LinearGradient/LinearGradient.canvas.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  export type {
+    LinearGradientProps,
+    LinearGradientPropsWithoutHTML,
+  } from './LinearGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { asAny } from '../../utils/types.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { createLinearGradient, getComputedStyles } from '../../utils/canvas.js';
+  import { parsePercent } from '../../utils/math.js';
+  import { createId } from '../../utils/createId.js';
+  import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('linearGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    vertical = false,
+    x1 = '0%',
+    y1 = '0%',
+    x2 = vertical ? '0%' : '100%',
+    y2 = vertical ? '100%' : '0%',
+    class: className,
+    children,
+    ...rest
+  }: LinearGradientProps = $props();
+
+  const ctx = getChartContext();
+
+  let canvasGradient = $state<CanvasGradient>();
+
+  function render(_ctx: CanvasRenderingContext2D) {
+    const _stops = stops.map((stop, i) => {
+      if (Array.isArray(stop)) {
+        const { fill } = getComputedStyles(_ctx.canvas, {
+          styles: { fill: stop[1] },
+          classes: className,
+        });
+        return { offset: parsePercent(stop[0]), color: fill };
+      } else {
+        const { fill } = getComputedStyles(_ctx.canvas, {
+          styles: { fill: stop },
+          classes: className,
+        });
+        return { offset: i / (stops.length - 1), color: fill };
+      }
+    });
+
+    // TODO: Use x1/y1/x2/y2 values (convert from percentage strings)
+    const gradient = createLinearGradient(
+      _ctx,
+      ctx.padding.left,
+      ctx.padding.top,
+      vertical ? ctx.padding.left : ctx.width - ctx.padding.right,
+      vertical ? ctx.height + ctx.padding.bottom : ctx.padding.top,
+      _stops
+    );
+
+    canvasGradient = gradient;
+  }
+
+  ctx.registerComponent({
+    name: 'Gradient',
+    kind: 'group',
+    canvasRender: {
+      render,
+      deps: () => [x1, y1, x2, y2, stops, className],
+    },
+  });
+</script>
+
+{@render children?.({ id, gradient: asAny(canvasGradient) })}

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

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

package/dist/components/LinearGradient/LinearGradient.html.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  export type {
+    LinearGradientProps,
+    LinearGradientPropsWithoutHTML,
+  } from './LinearGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('linearGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    vertical = false,
+    rotate,
+    children,
+  }: LinearGradientProps = $props();
+
+  function createCSSGradient(): string {
+    if (!stops?.length) return '';
+
+    let direction: string;
+    if (rotate !== undefined) {
+      // Convert SVG rotation to CSS linear-gradient angle
+      // SVG: rotate(0) on horizontal gradient = left-to-right = CSS 90deg
+      // SVG: rotate(0) on vertical gradient = top-to-bottom = CSS 180deg
+      const baseAngle = vertical ? 180 : 90;
+      const cssAngle = baseAngle + rotate;
+      direction = `${cssAngle}deg`;
+    } else {
+      direction = vertical ? 'to bottom' : 'to right';
+    }
+
+    const cssStops = stops
+      .map((stop, i) => {
+        if (Array.isArray(stop)) {
+          return `${stop[1]} ${stop[0]}`;
+        } else {
+          return `${stop} ${i * (100 / (stops.length - 1))}%`;
+        }
+      })
+      .join(', ');
+
+    return `linear-gradient(${direction}, ${cssStops})`;
+  }
+</script>
+
+{@render children?.({ id, gradient: createCSSGradient() })}

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

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

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

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+export type LinearGradientPropsWithoutHTML = {
+    /** Unique id for linearGradient */
+    id?: string;
+    /**
+     * Array of strings (colors) distributed equally from 0-100%, or
+     * `[offset, color]` tuples.
+     *
+     * @default `['var(--tw-gradient-from)', 'var(--tw-gradient-to)']`
+     */
+    stops?: string[] | [string | number, string][];
+    /** Apply color stops top-to-bottom (true) or left-to-right (false). @default false */
+    vertical?: boolean;
+    /** @default '0%' */
+    x1?: string;
+    /** @default '0%' */
+    y1?: string;
+    /** @default vertical ? '0%' : '100%' */
+    x2?: string;
+    /** @default vertical ? '100%' : '0%' */
+    y2?: string;
+    /** Rotate the gradient by a given angle in degrees */
+    rotate?: number;
+    /**
+     * Define the coordinate system for attributes (i.e. gradientUnits)
+     *
+     * @default 'objectBoundingBox'
+     */
+    units?: 'objectBoundingBox' | 'userSpaceOnUse';
+    /**
+     * A bindable reference to the underlying `<linearGradient>` element
+     *
+     * @bindable
+     */
+    ref?: SVGLinearGradientElement;
+    /** Render as a child of the gradient and will opt out of the default stops being rendered. */
+    stopsContent?: Snippet;
+    children?: Snippet<[{
+        id: string;
+        gradient: string;
+    }]>;
+};
+export type LinearGradientProps = LinearGradientPropsWithoutHTML & Without<SVGAttributes<SVGLinearGradientElement>, LinearGradientPropsWithoutHTML>;

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

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

package/dist/components/LinearGradient/LinearGradient.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  export type {
+    LinearGradientProps,
+    LinearGradientPropsWithoutHTML,
+  } from './LinearGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import LinearGradientSvg from './LinearGradient.svg.svelte';
+  import LinearGradientCanvas from './LinearGradient.canvas.svelte';
+  import LinearGradientHtml from './LinearGradient.html.svelte';
+  import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { ref = $bindable(), ...rest }: LinearGradientProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <LinearGradientSvg bind:ref {...rest} />
+{:else if layerCtx === 'canvas'}
+  <LinearGradientCanvas {...rest} />
+{:else if layerCtx === 'html'}
+  <LinearGradientHtml {...rest} />
+{/if}

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

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

package/dist/components/LinearGradient/LinearGradient.svg.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+  export type {
+    LinearGradientProps,
+    LinearGradientPropsWithoutHTML,
+  } from './LinearGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { createId } from '../../utils/createId.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import type { LinearGradientProps } from './LinearGradient.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('linearGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    vertical = false,
+    x1 = '0%',
+    y1 = '0%',
+    x2 = vertical ? '0%' : '100%',
+    y2 = vertical ? '100%' : '0%',
+    rotate,
+    units = 'objectBoundingBox',
+    ref: refProp = $bindable(),
+    class: className,
+    stopsContent,
+    children,
+    ...rest
+  }: LinearGradientProps = $props();
+
+  let ref = $state<SVGLinearGradientElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
+</script>
+
+<defs>
+  <linearGradient
+    bind:this={ref}
+    {id}
+    {x1}
+    {y1}
+    {x2}
+    {y2}
+    gradientTransform={rotate ? `rotate(${rotate})` : ''}
+    gradientUnits={units}
+    {...extractLayerProps(rest, 'lc-linear-gradient')}
+  >
+    {#if stopsContent}
+      {@render stopsContent?.()}
+    {:else if stops}
+      {#each stops as stop, i}
+        {#if Array.isArray(stop)}
+          <stop
+            offset={stop[0]}
+            stop-color={stop[1]}
+            class={cls('lc-linear-gradient-stop', className)}
+          />
+        {:else}
+          <stop
+            offset="{i * (100 / (stops.length - 1))}%"
+            stop-color={stop}
+            class={cls('lc-linear-gradient-stop', className)}
+          />
+        {/if}
+      {/each}
+    {/if}
+  </linearGradient>
+</defs>
+
+{@render children?.({ id, gradient: `url(#${id})` })}

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

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

package/dist/components/Link/Link.base.svelte

@@ -0,0 +1,260 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { LinkProps } from './Link.shared.svelte.js';
+
+  export type LinkBaseLayerComponents = {
+    Path: Component<any>;
+  };
+
+  export type LinkBaseProps = LinkProps & LinkBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { curveBumpX, curveBumpY } from 'd3-shape';
+  import {
+    getLinkD3Path,
+    getLinkPresetPath,
+    getLinkRadialD3Path,
+    getLinkRadialPresetPath,
+  } from '../../utils/linkUtils.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { accessor, type Accessor } from '../../utils/common.js';
+  import { cls } from '@layerstack/tailwind';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type ResolvedMotion,
+  } from '../../utils/motion.svelte.js';
+  import { interpolatePath } from 'd3-interpolate-path';
+  import { LINK_FALLBACK_COORDS, isAccessorAccessor } from './Link.shared.svelte.js';
+
+  const ctx = getChartContext();
+
+  let {
+    Path,
+    x1,
+    y1,
+    x2,
+    y2,
+    data,
+    sankey = false,
+    source: sourceProp,
+    target: targetProp,
+    x: xProp,
+    y: yProp,
+    orientation: orientationProp,
+    curve: curveProp,
+    type = 'd3',
+    sweep: sweepProp,
+    radius = 20,
+    bend = 22.5,
+    radial: radialProp,
+    marker,
+    markerStart,
+    markerMid,
+    markerEnd,
+    motion,
+    pathRef = $bindable(),
+    pathData: pathDataProp,
+    class: classProp,
+    ...restProps
+  }: LinkBaseProps = $props();
+
+  const radial = $derived(radialProp ?? ctx.radial ?? false);
+
+  const orientation = $derived.by(() => {
+    if (orientationProp) return orientationProp;
+    if (sankey) return 'horizontal';
+    return 'vertical';
+  });
+
+  const curve = $derived.by(() => {
+    if (curveProp) return curveProp;
+    if (orientation === 'horizontal') return curveBumpX;
+    return curveBumpY;
+  });
+
+  const sweep = $derived.by(() => {
+    if (type === 'd3') return sweepProp ?? 'none';
+    if (sweepProp && sweepProp !== 'none') return sweepProp;
+    return orientation === 'vertical' ? 'horizontal-vertical' : 'vertical-horizontal';
+  });
+
+  const isArrayMode = $derived(
+    isAccessorAccessor(x1) ||
+      isAccessorAccessor(y1) ||
+      isAccessorAccessor(x2) ||
+      isAccessorAccessor(y2)
+  );
+
+  const isPixelMode = $derived(
+    !isArrayMode &&
+      (typeof x1 === 'number' ||
+        typeof y1 === 'number' ||
+        typeof x2 === 'number' ||
+        typeof y2 === 'number')
+  );
+
+  const sourceAccessor = $derived.by(() => {
+    if (sourceProp) return sourceProp;
+    if (sankey) return (d: any) => ({ node: d.source, y: d.y0, isSource: true });
+    return (d: any) => d.source;
+  });
+
+  const targetAccessor = $derived.by(() => {
+    if (targetProp) return targetProp;
+    if (sankey) return (d: any) => ({ node: d.target, y: d.y1, isSource: false });
+    return (d: any) => d.target;
+  });
+
+  const xAccessor = $derived.by(() => {
+    if (xProp) return xProp;
+    if (sankey) return (d: any) => (d.isSource ? d.node.x1 : d.node.x0);
+    if (radial) return (d: any) => d.x;
+    return (d: any) => (orientation === 'horizontal' ? d.y : d.x);
+  });
+
+  const yAccessor = $derived.by(() => {
+    if (yProp) return yProp;
+    if (sankey) return (d: any) => d.y;
+    if (radial) return (d: any) => d.y;
+    return (d: any) => (orientation === 'horizontal' ? d.x : d.y);
+  });
+
+  const x1Accessor = $derived(accessor(x1 as Accessor));
+  const y1Accessor = $derived(accessor(y1 as Accessor));
+  const x2Accessor = $derived(accessor(x2 as Accessor));
+  const y2Accessor = $derived(accessor(y2 as Accessor));
+
+  const resolveArrayCoords = (d: any) => {
+    const sxRaw = x1Accessor(d);
+    const syRaw = y1Accessor(d);
+    const txRaw = x2Accessor(d);
+    const tyRaw = y2Accessor(d);
+    const scaleX = typeof x1 === 'string' || typeof x1 === 'function' ? ctx.xScale : null;
+    const scaleY = typeof y1 === 'string' || typeof y1 === 'function' ? ctx.yScale : null;
+    const sx = scaleX && sxRaw != null ? scaleX(sxRaw) : typeof sxRaw === 'number' ? sxRaw : 0;
+    const sy = scaleY && syRaw != null ? scaleY(syRaw) : typeof syRaw === 'number' ? syRaw : 0;
+    const tx = scaleX && txRaw != null ? scaleX(txRaw) : typeof txRaw === 'number' ? txRaw : 0;
+    const ty = scaleY && tyRaw != null ? scaleY(tyRaw) : typeof tyRaw === 'number' ? tyRaw : 0;
+    return {
+      source: { x: Number.isFinite(sx) ? sx : 0, y: Number.isFinite(sy) ? sy : 0 },
+      target: { x: Number.isFinite(tx) ? tx : 0, y: Number.isFinite(ty) ? ty : 0 },
+    };
+  };
+
+  const singleSourceCoords = $derived.by(() => {
+    if (isPixelMode) {
+      return { x: typeof x1 === 'number' ? x1 : 0, y: typeof y1 === 'number' ? y1 : 0 };
+    }
+    if (!data) return LINK_FALLBACK_COORDS;
+    try {
+      const sourceData = sourceAccessor(data);
+      if (sourceData == null) return LINK_FALLBACK_COORDS;
+      const xVal = xAccessor(sourceData);
+      const yVal = yAccessor(sourceData);
+      return { x: Number.isFinite(xVal) ? xVal : 0, y: Number.isFinite(yVal) ? yVal : 0 };
+    } catch (e) {
+      console.error('Error accessing source coordinates:', e, 'Data:', data);
+      return LINK_FALLBACK_COORDS;
+    }
+  });
+
+  const singleTargetCoords = $derived.by(() => {
+    if (isPixelMode) {
+      return { x: typeof x2 === 'number' ? x2 : 100, y: typeof y2 === 'number' ? y2 : 100 };
+    }
+    if (!data) return LINK_FALLBACK_COORDS;
+    try {
+      const targetData = targetAccessor(data);
+      if (targetData == null) return LINK_FALLBACK_COORDS;
+      const xVal = xAccessor(targetData);
+      const yVal = yAccessor(targetData);
+      return { x: Number.isFinite(xVal) ? xVal : 0, y: Number.isFinite(yVal) ? yVal : 0 };
+    } catch (e) {
+      console.error('Error accessing target coordinates:', e, 'Data:', data);
+      return LINK_FALLBACK_COORDS;
+    }
+  });
+
+  function buildPath(source: { x: number; y: number }, target: { x: number; y: number }) {
+    if (pathDataProp) return pathDataProp;
+    if (radial) {
+      return type === 'd3'
+        ? getLinkRadialD3Path({ source, target, curve })
+        : getLinkRadialPresetPath({ source, target, type, radius, bend });
+    }
+    if (type === 'd3') {
+      return getLinkD3Path({ source, target, sweep, curve, orientation });
+    }
+    return getLinkPresetPath({ source, target, sweep, type, radius, bend });
+  }
+
+  const singlePathData = $derived(
+    isArrayMode ? '' : buildPath(singleSourceCoords, singleTargetCoords)
+  );
+
+  const extractedTween = extractTweenConfig(motion);
+  const tweenOptions: ResolvedMotion | undefined = extractedTween
+    ? {
+        type: extractedTween.type,
+        options: { interpolate: interpolatePath, ...extractedTween.options },
+      }
+    : undefined;
+
+  const motionPath = createMotion(
+    '',
+    () => singlePathData,
+    tweenOptions ? tweenOptions : { type: 'none' }
+  );
+
+  const arrayRows = $derived(isArrayMode ? data ?? ctx.data ?? [] : []);
+
+  function resolvePerDatum<T>(value: T | ((d: any) => T) | undefined, d: any): T | undefined {
+    return typeof value === 'function' ? (value as (d: any) => T)(d) : (value as T | undefined);
+  }
+
+  function resolveClass(d: any): string | undefined {
+    return resolvePerDatum<string>(classProp as any, d);
+  }
+
+  const strokeProp = $derived((restProps as any).stroke);
+  const fillProp = $derived((restProps as any).fill);
+  const strokeWidthProp = $derived(
+    (restProps as any)['stroke-width'] ?? (restProps as any).strokeWidth
+  );
+</script>
+
+{#if isArrayMode}
+  {#each arrayRows as d, i (i)}
+    {@const { source, target } = resolveArrayCoords(d)}
+    {@const resolvedStroke =
+      resolvePerDatum(strokeProp, d) ?? (ctx.config.c ? ctx.cGet(d) : undefined)}
+    <Path
+      pathData={buildPath(source, target)}
+      {marker}
+      {markerStart}
+      {markerMid}
+      {markerEnd}
+      {...extractLayerProps(restProps, 'lc-link')}
+      {...restProps}
+      stroke={resolvedStroke}
+      fill={resolvePerDatum(fillProp, d)}
+      stroke-width={resolvePerDatum(strokeWidthProp, d)}
+      class={cls('lc-link', resolveClass(d))}
+    />
+  {/each}
+{:else}
+  <Path
+    pathData={motionPath.current}
+    bind:pathRef
+    {marker}
+    {markerStart}
+    {markerMid}
+    {markerEnd}
+    {...extractLayerProps(restProps, 'lc-link')}
+    {...restProps}
+    class={cls('lc-link', typeof classProp === 'string' ? classProp : undefined)}
+  />
+{/if}