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

package/dist/utils/linkUtils.js

@@ -0,0 +1,280 @@
+import { curveLinear, curveStep, curveStepAfter, curveStepBefore, line as d3Line, lineRadial, linkRadial, } from 'd3-shape';
+function isSamePoint(p1, p2) {
+    return Math.abs(p1.x - p2.x) < 1e-6 && Math.abs(p1.y - p2.y) < 1e-6;
+}
+function createDirectPath(source, target) {
+    if (isSamePoint(source, target))
+        return '';
+    return `M ${source.x} ${source.y} L ${target.x} ${target.y}`;
+}
+function isNearZero(value) {
+    return Math.abs(value) < 1e-6;
+}
+function createSquarePath({ source, target, sweep }) {
+    if (sweep === 'horizontal-vertical') {
+        return `M ${source.x} ${source.y} L ${target.x} ${source.y} L ${target.x} ${target.y}`;
+    }
+    else {
+        return `M ${source.x} ${source.y} L ${source.x} ${target.y} L ${target.x} ${target.y}`;
+    }
+}
+function createBeveledPath(opts) {
+    const { radius, dx, dy, source, target, sweep } = opts;
+    const effectiveRadius = Math.max(0, Math.min(radius, Math.abs(dx), Math.abs(dy)));
+    if (isNearZero(effectiveRadius)) {
+        return createSquarePath(opts);
+    }
+    const signX = Math.sign(dx);
+    const signY = Math.sign(dy);
+    if (sweep === 'horizontal-vertical') {
+        const pBeforeCorner = { x: target.x - effectiveRadius * signX, y: source.y };
+        const pAfterCorner = { x: target.x, y: source.y + effectiveRadius * signY };
+        return `M ${source.x} ${source.y} L ${pBeforeCorner.x} ${pBeforeCorner.y} L ${pAfterCorner.x} ${pAfterCorner.y} L ${target.x} ${target.y}`;
+    }
+    else {
+        const pBeforeCorner = { x: source.x, y: target.y - effectiveRadius * signY };
+        const pAfterCorner = { x: source.x + effectiveRadius * signX, y: target.y };
+        return `M ${source.x} ${source.y} L ${pBeforeCorner.x} ${pBeforeCorner.y} L ${pAfterCorner.x} ${pAfterCorner.y} L ${target.x} ${target.y}`;
+    }
+}
+function createRoundedPath(opts) {
+    const { radius, dx, dy, source, target, sweep } = opts;
+    const effectiveRadius = Math.max(0, Math.min(radius, Math.abs(dx), Math.abs(dy)));
+    if (isNearZero(effectiveRadius)) {
+        return createSquarePath(opts);
+    }
+    const signX = Math.sign(dx);
+    const signY = Math.sign(dy);
+    if (sweep === 'horizontal-vertical') {
+        const pBeforeCorner = { x: target.x - effectiveRadius * signX, y: source.y };
+        const pAfterCorner = { x: target.x, y: source.y + effectiveRadius * signY };
+        const sweepFlag = signX * signY > 0 ? 1 : 0;
+        return `M ${source.x} ${source.y} L ${pBeforeCorner.x} ${pBeforeCorner.y} A ${effectiveRadius} ${effectiveRadius} 0 0 ${sweepFlag} ${pAfterCorner.x} ${pAfterCorner.y} L ${target.x} ${target.y}`;
+    }
+    else {
+        const pBeforeCorner = { x: source.x, y: target.y - effectiveRadius * signY };
+        const pAfterCorner = { x: source.x + effectiveRadius * signX, y: target.y };
+        const sweepFlag = signX * signY > 0 ? 0 : 1;
+        return `M ${source.x} ${source.y} L ${pBeforeCorner.x} ${pBeforeCorner.y} A ${effectiveRadius} ${effectiveRadius} 0 0 ${sweepFlag} ${pAfterCorner.x} ${pAfterCorner.y} L ${target.x} ${target.y}`;
+    }
+}
+/**
+ * Swoop: circular arc between source and target. Equivalent to ObservablePlot's
+ * Arrow `bend` option — positive angle bends right (clockwise from source to
+ * target), negative bends left, 0 is a straight line.
+ */
+function createSwoopPath({ source, target, dx, dy, bend = 22.5 }) {
+    const chordLen = Math.hypot(dx, dy);
+    const bendRad = (bend * Math.PI) / 180;
+    if (Math.abs(bendRad) < 1e-6 || chordLen < 1e-6) {
+        return createDirectPath(source, target);
+    }
+    // Half-chord subtends `bend` at the arc center, so radius = chord / (2 * sin(bend))
+    const arcRadius = chordLen / (2 * Math.sin(Math.abs(bendRad)));
+    const largeArc = Math.abs(bend) > 90 ? 1 : 0;
+    const sweepFlag = bend > 0 ? 1 : 0;
+    return `M${source.x},${source.y}A${arcRadius},${arcRadius} 0 ${largeArc} ${sweepFlag} ${target.x},${target.y}`;
+}
+const pathStrategies = {
+    square: createSquarePath,
+    beveled: createBeveledPath,
+    rounded: createRoundedPath,
+    swoop: createSwoopPath,
+};
+export function getLinkPresetPath(opts) {
+    const { source, target, type } = opts;
+    if (isSamePoint(source, target))
+        return '';
+    const dx = target.x - source.x;
+    const dy = target.y - source.y;
+    // straight line cases (swoop still bends even when axis-aligned)
+    if (type === 'straight' || (type !== 'swoop' && (isNearZero(dx) || isNearZero(dy)))) {
+        return createDirectPath(source, target);
+    }
+    return (pathStrategies[type] || pathStrategies.square)({ ...opts, dx, dy });
+}
+const FALLBACK_PATH = 'M0,0L0,0';
+export function getLinkD3Path({ source, target, sweep, curve, orientation = 'horizontal', }) {
+    const dx = target.x - source.x;
+    const dy = target.y - source.y;
+    // d3 step curves always step along x. For vertical orientation, emit a
+    // y-axis step manually so the step sits between parent/child along depth.
+    if (orientation === 'vertical' && sweep === 'none') {
+        const { x: sx, y: sy } = source;
+        const { x: tx, y: ty } = target;
+        if (curve === curveStep) {
+            const my = (sy + ty) / 2;
+            return `M${sx},${sy}L${sx},${my}L${tx},${my}L${tx},${ty}`;
+        }
+        if (curve === curveStepBefore) {
+            // Bump near source: sibling (x) changes first, then depth (y)
+            return `M${sx},${sy}L${tx},${sy}L${tx},${ty}`;
+        }
+        if (curve === curveStepAfter) {
+            // Bump near target: depth (y) changes first, then sibling (x)
+            return `M${sx},${sy}L${sx},${ty}L${tx},${ty}`;
+        }
+    }
+    const line = d3Line().curve(curve);
+    let points = [];
+    const isAligned = isNearZero(dx) || isNearZero(dy);
+    if (sweep === 'none' || isAligned) {
+        points = [
+            [source.x, source.y],
+            [target.x, target.y],
+        ];
+    }
+    else if (sweep === 'horizontal-vertical') {
+        points = [
+            [source.x, source.y],
+            [target.x, source.y],
+            [target.x, target.y],
+        ];
+    }
+    else if (sweep === 'vertical-horizontal') {
+        points = [
+            [source.x, source.y],
+            [source.x, target.y],
+            [target.x, target.y],
+        ];
+    }
+    if (points.length === 2 && isNearZero(dx) && isNearZero(dx))
+        return FALLBACK_PATH;
+    const d = line(points);
+    if (!d || d.includes('NaN'))
+        return FALLBACK_PATH;
+    return d;
+}
+function radialGeometry(source, target) {
+    const sa = source.x - Math.PI / 2;
+    const sr = source.y;
+    const ta = target.x - Math.PI / 2;
+    const tr = target.y;
+    const sc = Math.cos(sa);
+    const ss = Math.sin(sa);
+    const tc = Math.cos(ta);
+    const ts = Math.sin(ta);
+    const sweepFlag = Math.abs(ta - sa) > Math.PI ? (ta <= sa ? 1 : 0) : ta > sa ? 1 : 0;
+    return {
+        sa,
+        sr,
+        ta,
+        tr,
+        sc,
+        ss,
+        tc,
+        ts,
+        sx: sr * sc,
+        sy: sr * ss,
+        tx: tr * tc,
+        ty: tr * ts,
+        sweepFlag,
+    };
+}
+export function getLinkRadialPresetPath({ source, target, type, radius, bend = 22.5, }) {
+    const g = radialGeometry(source, target);
+    const { sr, ta, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
+    if (type === 'straight') {
+        return `M${sx},${sy}L${tx},${ty}`;
+    }
+    if (type === 'swoop') {
+        // Circular arc in cartesian space between the polar-converted endpoints.
+        const dx = tx - sx;
+        const dy = ty - sy;
+        const chordLen = Math.hypot(dx, dy);
+        const bendRad = (bend * Math.PI) / 180;
+        if (Math.abs(bendRad) < 1e-6 || chordLen < 1e-6) {
+            return `M${sx},${sy}L${tx},${ty}`;
+        }
+        const arcRadius = chordLen / (2 * Math.sin(Math.abs(bendRad)));
+        const largeArc = Math.abs(bend) > 90 ? 1 : 0;
+        const arcSweep = bend > 0 ? 1 : 0;
+        return `M${sx},${sy}A${arcRadius},${arcRadius} 0 ${largeArc} ${arcSweep} ${tx},${ty}`;
+    }
+    if (type === 'rounded') {
+        // visx LinkRadialCurve: cubic Bezier with rotated offset (percent controls tension)
+        const percent = 0.2;
+        const dx = tx - sx;
+        const dy = ty - sy;
+        const ix = percent * (dx + dy);
+        const iy = percent * (dy - dx);
+        return `M${sx},${sy}C${sx + ix},${sy + iy} ${tx + iy},${ty - ix} ${tx},${ty}`;
+    }
+    if (type === 'square') {
+        // Source at origin — degenerate arc, just radial to target
+        if (sr < 1e-6)
+            return `M${sx},${sy}L${tx},${ty}`;
+        // Step at midpoint radius: radial + arc + radial
+        const mr = (sr + tr) / 2;
+        const p1x = mr * sc;
+        const p1y = mr * ss;
+        const p2x = mr * tc;
+        const p2y = mr * ts;
+        return `M${sx},${sy}L${p1x},${p1y}A${mr},${mr},0,0,${sweepFlag},${p2x},${p2y}L${tx},${ty}`;
+    }
+    // 'beveled': visx-style step with chord at source radius and chamfered corner
+    const cornerX = sr * tc;
+    const cornerY = sr * ts;
+    const chordDx = cornerX - sx;
+    const chordDy = cornerY - sy;
+    const chordLen = Math.hypot(chordDx, chordDy);
+    if (chordLen < 1e-6) {
+        // Source at origin — chord degenerates, just radial to target
+        return `M${sx},${sy}L${tx},${ty}`;
+    }
+    const radialLen = Math.abs(tr - sr) || 1;
+    const r = Math.max(0, Math.min(radius, chordLen, radialLen));
+    const cux = chordDx / chordLen;
+    const cuy = chordDy / chordLen;
+    const radialDir = Math.sign(tr - sr) || 1;
+    const p1x = cornerX - r * cux;
+    const p1y = cornerY - r * cuy;
+    const p2x = cornerX + radialDir * r * tc;
+    const p2y = cornerY + radialDir * r * ts;
+    return `M${sx},${sy}L${p1x},${p1y}L${p2x},${p2y}L${tx},${ty}`;
+}
+export function getLinkRadialD3Path({ source, target, curve }) {
+    const g = radialGeometry(source, target);
+    const { sr, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
+    // Step curves render as polar arcs/radials rather than cartesian stairs.
+    // When source is at origin (root), degenerate to straight radial line.
+    if (curve === curveStepBefore || curve === curveStepAfter || curve === curveStep) {
+        if (sr < 1e-6)
+            return `M${sx},${sy}L${tx},${ty}`;
+    }
+    if (curve === curveStepBefore) {
+        // arc at source radius, then radial to target
+        const ax = sr * tc;
+        const ay = sr * ts;
+        return `M${sx},${sy}A${sr},${sr},0,0,${sweepFlag},${ax},${ay}L${tx},${ty}`;
+    }
+    if (curve === curveStepAfter) {
+        // radial at source angle to target radius, then arc at target radius
+        const ax = tr * sc;
+        const ay = tr * ss;
+        return `M${sx},${sy}L${ax},${ay}A${tr},${tr},0,0,${sweepFlag},${tx},${ty}`;
+    }
+    if (curve === curveStep) {
+        // radial to mid-radius, arc at mid-radius, radial to target
+        const mr = (sr + tr) / 2;
+        const p1x = mr * sc;
+        const p1y = mr * ss;
+        const p2x = mr * tc;
+        const p2y = mr * ts;
+        return `M${sx},${sy}L${p1x},${p1y}A${mr},${mr},0,0,${sweepFlag},${p2x},${p2y}L${tx},${ty}`;
+    }
+    if (curve) {
+        // Other curves: apply in polar space via d3.lineRadial between the two nodes
+        const gen = lineRadial().curve(curve);
+        const d = gen([
+            [source.x, source.y],
+            [target.x, target.y],
+        ]);
+        return d ?? FALLBACK_PATH;
+    }
+    // Default: smooth radial curve via d3.linkRadial (visx LinkRadial)
+    const linkGen = linkRadial()
+        .angle((d) => d.x)
+        .radius((d) => d.y);
+    return linkGen({ source, target }) ?? FALLBACK_PATH;
+}

package/dist/utils/math.d.ts

@@ -23,6 +23,23 @@ export declare function cartesianToPolar(x: number, y: number): {
     radius: number;
     radians: number;
 };
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export declare function pointsToAngleAndLength(point1: {
+    x: number;
+    y: number;
+}, point2: {
+    x: number;
+    y: number;
+}): {
+    radians: number;
+    angle: number;
+    length: number;
+};
 /** Convert celsius temperature to fahrenheit */
 export declare function celsiusToFahrenheit(temperature: number): number;
 /** Convert fahrenheit temperature to celsius */

package/dist/utils/math.js

@@ -37,6 +37,23 @@ export function cartesianToPolar(x, y) {
         radians,
     };
 }
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export function pointsToAngleAndLength(point1, point2) {
+    const dx = point2.x - point1.x;
+    const dy = point2.y - point1.y;
+    const radians = Math.atan2(dy, dx);
+    const length = Math.sqrt(dx * dx + dy * dy);
+    return {
+        radians,
+        angle: radiansToDegrees(radians),
+        length,
+    };
+}
 /** Convert celsius temperature to fahrenheit */
 export function celsiusToFahrenheit(temperature) {
     return temperature * (9 / 5) + 32;

package/dist/utils/motion.svelte.d.ts

@@ -108,12 +108,22 @@ type InternalMotionOptions = {
      */
     controlled?: boolean;
 };
-export declare function createMotion<T = any>(initialValue: T, getValue: () => T, motionProp: MotionOptions | undefined, options?: InternalMotionOptions): MotionSpring<T> | MotionTween<any> | MotionNone<T>;
+export declare function createMotion<T = any>(initialValue: T, getValue: () => T, motionProp: MotionOptions | undefined, options?: InternalMotionOptions): MotionSpring<T> | MotionTween<any> | MotionNone<T> | {
+    type: "none";
+    readonly current: T;
+    target: T;
+    set(_value: T, _options?: any): Promise<void>;
+};
 /**
  * Creates a controlled motion state that only updates when explicitly set
  * rather than automatically tracking changes to the source value
  */
-export declare function createControlledMotion<T = any>(initialValue: T, motionProp: MotionOptions | undefined): MotionTween<any> | MotionSpring<T> | MotionNone<T>;
+export declare function createControlledMotion<T = any>(initialValue: T, motionProp: MotionOptions | undefined): MotionTween<any> | MotionSpring<T> | MotionNone<T> | {
+    type: "none";
+    readonly current: T;
+    target: T;
+    set(_value: T, _options?: any): Promise<void>;
+};
 /**
  * Creates a state tracker for animation completion
  * This helps track whether any motion transitions are currently in progress
@@ -124,6 +134,20 @@ export declare function createMotionTracker(): {
     handle: (promise: Promise<void> | void) => void;
     readonly current: boolean;
 };
+/**
+ * Creates a motion state map for data mode rendering.
+ * Tracks per-item animated values keyed by the item key.
+ * Returns null if no motion is configured (type: 'none').
+ */
+export declare function createDataMotionMap(motionProp: MotionOptions | undefined): {
+    /** Update motion targets for an item. Creates states on first call per key/prop. */
+    update(key: any, values: Record<string, number>): void;
+    /** Get current animated values for an item, or null if not tracked yet. */
+    get(key: any): Record<string, number> | null;
+    /** Remove items no longer in the active set. */
+    cleanup(activeKeys: Set<any>): void;
+} | null;
+export type DataMotionMap = NonNullable<ReturnType<typeof createDataMotionMap>>;
 /**
  * Extracts tween configuration from a motion prop
  * @returns Resolved tween configuration or undefined if not a tween

package/dist/utils/motion.svelte.js

@@ -1,5 +1,5 @@
+import { untrack } from 'svelte';
 import { Spring, Tween } from 'svelte/motion';
-import { afterTick } from './afterTick.js';
 /**
  * Extended Spring class that adds a type discriminator to help with
  * type narrowing in our motion system
@@ -62,11 +62,51 @@ class MotionNone {
 function setupTracking(motion, getValue, options) {
     if (options.controlled)
         return;
+    // On the server (SSR), $effect won't run, so eagerly set the target value
+    // to ensure render closures capture the actual computed state (not the initial/baseline value).
+    if (typeof window === 'undefined') {
+        try {
+            const value = getValue();
+            if (value != null) {
+                motion.set(value, { instant: true });
+            }
+        }
+        catch {
+            // getValue() may fail if reactive dependencies aren't ready yet; ignore
+        }
+        return;
+    }
     $effect(() => {
-        motion.set(getValue());
+        const value = getValue();
+        if (value == null)
+            return;
+        // Use untrack to prevent reactive reads inside motion.set() and motion.target
+        // from being tracked as dependencies of this effect (which would cause infinite loops)
+        untrack(() => {
+            motion.set(value, { instant: motion.target == null });
+        });
     });
 }
 export function createMotion(initialValue, getValue, motionProp, options = {}) {
+    // Fast path: when no motion is configured, skip all state/effect overhead
+    // and return a lightweight passthrough that reads directly from the getter.
+    if (motionProp === undefined) {
+        return {
+            type: 'none',
+            get current() {
+                return getValue();
+            },
+            get target() {
+                return getValue();
+            },
+            set target(v) {
+                // no-op for passthrough
+            },
+            set(_value, _options) {
+                return Promise.resolve();
+            },
+        };
+    }
     const motion = parseMotionProp(motionProp);
     const motionState = motion.type === 'spring'
         ? new MotionSpring(initialValue, motion.options)
@@ -115,6 +155,63 @@ export function createMotionTracker() {
         },
     };
 }
+/**
+ * Creates a motion state map for data mode rendering.
+ * Tracks per-item animated values keyed by the item key.
+ * Returns null if no motion is configured (type: 'none').
+ */
+export function createDataMotionMap(motionProp) {
+    // Fast path: skip parseMotionProp overhead when no motion is configured
+    if (motionProp === undefined)
+        return null;
+    const config = parseMotionProp(motionProp);
+    if (config.type === 'none')
+        return null;
+    const map = new Map();
+    function create(value) {
+        return config.type === 'spring'
+            ? new MotionSpring(value, config.options)
+            : new MotionTween(value, config.options);
+    }
+    return {
+        /** Update motion targets for an item. Creates states on first call per key/prop. */
+        update(key, values) {
+            let itemMap = map.get(key);
+            if (!itemMap) {
+                itemMap = new Map();
+                map.set(key, itemMap);
+            }
+            for (const [prop, value] of Object.entries(values)) {
+                let state = itemMap.get(prop);
+                if (!state) {
+                    state = create(value);
+                    itemMap.set(prop, state);
+                }
+                else {
+                    state.set(value);
+                }
+            }
+        },
+        /** Get current animated values for an item, or null if not tracked yet. */
+        get(key) {
+            const itemMap = map.get(key);
+            if (!itemMap)
+                return null;
+            const result = {};
+            for (const [prop, state] of itemMap) {
+                result[prop] = state.current;
+            }
+            return result;
+        },
+        /** Remove items no longer in the active set. */
+        cleanup(activeKeys) {
+            for (const key of map.keys()) {
+                if (!activeKeys.has(key))
+                    map.delete(key);
+            }
+        },
+    };
+}
 /**
  * Extracts tween configuration from a motion prop
  * @returns Resolved tween configuration or undefined if not a tween

package/dist/utils/motion.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { parseMotionProp, extractTweenConfig } from './motion.svelte.js';
+import { createMotion, parseMotionProp, extractTweenConfig } from './motion.svelte.js';
 describe('parseMotionProp', () => {
     it('should return "none" type when config is undefined', () => {
         const result = parseMotionProp(undefined);
@@ -117,6 +117,54 @@ describe('parseMotionProp', () => {
         });
     });
 });
+describe('createMotion', () => {
+    describe('fast path (motionProp === undefined)', () => {
+        it('should return a passthrough that reads from the getter', () => {
+            let value = 42;
+            const motion = createMotion(0, () => value, undefined);
+            expect(motion.current).toBe(42);
+            value = 99;
+            expect(motion.current).toBe(99);
+        });
+        it('should have type "none"', () => {
+            const motion = createMotion(0, () => 0, undefined);
+            expect(motion.type).toBe('none');
+        });
+        it('should return resolved promise from set()', async () => {
+            const motion = createMotion(0, () => 0, undefined);
+            const result = motion.set(10);
+            expect(result).toBeInstanceOf(Promise);
+            await expect(result).resolves.toBeUndefined();
+        });
+        it('target getter should read from getValue', () => {
+            let value = 5;
+            const motion = createMotion(0, () => value, undefined);
+            expect(motion.target).toBe(5);
+            value = 20;
+            expect(motion.target).toBe(20);
+        });
+    });
+    describe('with explicit "none" motion', () => {
+        it('should create a MotionNone state (not a passthrough)', () => {
+            const motion = createMotion(0, () => 42, 'none');
+            // MotionNone stores its own state, so current reflects the initial value
+            // until the tracking effect runs (which requires Svelte runtime)
+            expect(motion.type).toBe('none');
+        });
+    });
+    describe('with spring motion', () => {
+        it('should create a spring motion state', () => {
+            const motion = createMotion(0, () => 42, 'spring');
+            expect(motion.type).toBe('spring');
+        });
+    });
+    describe('with tween motion', () => {
+        it('should create a tween motion state', () => {
+            const motion = createMotion(0, () => 42, 'tween');
+            expect(motion.type).toBe('tween');
+        });
+    });
+});
 describe('extractTweenConfig', () => {
     // Test case 1: Undefined input
     it('should return undefined when config is undefined', () => {

package/dist/utils/path.d.ts

@@ -10,12 +10,84 @@ export declare function circlePath(dimensions: {
     r: number;
     sweep?: 'inside' | 'outside';
 }): string;
-/** Create spike (triangle) using path data  */
+/**
+ * @deprecated Use `vectorSpikePath` or the `Vector` component with `shape="spike"` instead.
+ * Create spike (triangle) using path data
+ */
 export declare function spikePath({ x, y, width, height, }: {
     x: number;
     y: number;
     width: number;
     height: number;
 }): string;
+/** Create rounded polygon path
+ *
+ * @param coords - Array of points (x, y)
+ * @param radius - Radius of the curve
+ * @returns String of path data
+ */
+export declare function roundedPolygonPath(coords: {
+    x: number;
+    y: number;
+}[], radius: number): string;
+/**
+ * SVG path `d` attribute for a rectangle with per-corner rounding.
+ * Corners are ordered `[top-left, top-right, bottom-right, bottom-left]`
+ * (matching CSS `border-radius` shorthand). Path is drawn clockwise from
+ * the top-left corner.
+ */
+export declare function roundedRectPath(x: number, y: number, width: number, height: number, [tl, tr, br, bl]: [number, number, number, number]): string;
+/**
+ * Normalize a dash-array value (CSS `stroke-dasharray`) to a numeric array.
+ * Accepts `"4 2"`, `"4,2"`, `[4, 2]`, or a single number (e.g. `4` → `[4, 4]`).
+ * Returns `null` when the input is empty or all zeros (i.e. solid stroke).
+ */
+export declare function parseDashArray(value: string | number | number[] | undefined): number[] | null;
+/**
+ * Build a CSS `repeating-linear-gradient` string approximating a `stroke-dasharray`
+ * pattern along a horizontal line (use with `background` on a rotated `<div>`).
+ * Alternates stops between `color` (dash) and `transparent` (gap) to match SVG.
+ */
+export declare function dashArrayToGradient(dashArray: number[], color: string, direction?: string): string;
+/** Vector anchor position */
+export type VectorAnchor = 'start' | 'middle' | 'end';
+/**
+ * Create arrow vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ *
+ * The arrow consists of a stem line with a V-shaped arrowhead at the tip.
+ */
+export declare function vectorArrowPath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    /** Total width of the arrowhead (wing tip to wing tip). */
+    width?: number;
+}): string;
+/**
+ * Create spike (filled triangle) vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ */
+export declare function vectorSpikePath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    width?: number;
+}): string;
+/**
+ * Create filled arrow vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ *
+ * The shape has a tapered tail that widens into a triangular arrowhead at the tip.
+ */
+export declare function vectorArrowFilledPath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    /** Total width of the arrowhead. Defaults to 30% of length. */
+    width?: number;
+}): string;
+/**
+ * Apply rotation (degrees) and translation to a path string containing only M and L commands
+ * with absolute coordinates. Converts local vector path data to absolute positioned coordinates.
+ */
+export declare function transformVectorPath(pathData: string, cx: number, cy: number, rotateDeg: number): string;
 /** Flatten all `y` coordinates to `0` */
 export declare function flattenPathData(pathData: string, yOverride?: number): string;