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

package/dist/utils/rect.svelte.js

@@ -1,7 +1,7 @@
+import { max, min } from 'd3-array';
 import { accessor } from './common.js';
 import { isScaleBand } from './scales.svelte.js';
-import { max, min } from 'd3-array';
-function resolveInsets(insets) {
+export function resolveInsets(insets) {
     const all = insets?.all ?? 0;
     const x = insets?.x ?? all;
     const y = insets?.y ?? all;
@@ -22,13 +22,15 @@ export function createDimensionGetter(ctx, getOptions) {
         const _y = accessor(options?.y ?? ctx.y);
         const _x1 = accessor(options?.x1 ?? ctx.x1);
         const _y1 = accessor(options?.y1 ?? ctx.y1);
+        const hasX1 = (options?.x1 ?? ctx.config.x1) != null;
+        const hasY1 = (options?.y1 ?? ctx.config.y1) != null;
         if (isScaleBand(ctx.yScale)) {
             // Horizontal band
             const y = firstValue(ctx.yScale(_y(item)) ?? 0) +
-                (ctx.y1Scale ? ctx.y1Scale(_y1(item)) : 0) +
+                (hasY1 && ctx.y1Scale ? ctx.y1Scale(_y1(item)) : 0) +
                 insets.top;
             const height = Math.max(0, ctx.yScale.bandwidth
-                ? (ctx.y1Scale ? (ctx.y1Scale.bandwidth?.() ?? 0) : ctx.yScale.bandwidth()) -
+                ? (hasY1 && ctx.y1Scale ? (ctx.y1Scale.bandwidth?.() ?? 0) : ctx.yScale.bandwidth()) -
                     insets.bottom -
                     insets.top
                 : 0);
@@ -59,11 +61,13 @@ export function createDimensionGetter(ctx, getOptions) {
             const width = Math.max(0, ctx.xScale(right) - ctx.xScale(left) - insets.left - insets.right);
             return { x, y, width, height };
         }
-        else {
+        else if (isScaleBand(ctx.xScale)) {
             // Vertical band or linear
-            const x = firstValue(ctx.xScale(_x(item))) + (ctx.x1Scale ? ctx.x1Scale(_x1(item)) : 0) + insets.left;
+            const x = firstValue(ctx.xScale(_x(item))) +
+                (hasX1 && ctx.x1Scale ? ctx.x1Scale(_x1(item)) : 0) +
+                insets.left;
             const width = Math.max(0, ctx.xScale.bandwidth
-                ? (ctx.x1Scale ? (ctx.x1Scale.bandwidth?.() ?? 0) : ctx.xScale.bandwidth()) -
+                ? (hasX1 && ctx.x1Scale ? (ctx.x1Scale.bandwidth?.() ?? 0) : ctx.xScale.bandwidth()) -
                     insets.left -
                     insets.right
                 : 0);
@@ -90,10 +94,86 @@ export function createDimensionGetter(ctx, getOptions) {
                 top = min([0, yDomainMinMax[1]]);
                 bottom = yValue;
             }
+            // If yRange is inverted (drawing from top), swap top and bottom
+            if (ctx.yRange[0] < ctx.yRange[1]) {
+                [top, bottom] = [bottom, top];
+            }
+            const y = ctx.yScale(top) + insets.top;
+            const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
+            return { x, y, width, height };
+        }
+        else if (ctx.xInterval) {
+            // x-axis time scale with interval
+            const xValue = _x(item);
+            const start = ctx.xInterval.floor(xValue);
+            const end = ctx.xInterval.offset(start);
+            const xStart = ctx.xScale(start);
+            const xEnd = ctx.xScale(end);
+            const x = Math.min(xStart, xEnd) + insets.left;
+            const width = Math.abs(xEnd - xStart) - insets.left - insets.right;
+            const yValue = _y(item);
+            let top = 0;
+            let bottom = 0;
+            if (Array.isArray(yValue)) {
+                // Array contains both top and bottom values (stack, etc);
+                top = max(yValue);
+                bottom = min(yValue);
+            }
+            else if (yValue == null) {
+                // null/undefined value
+                top = 0;
+                bottom = 0;
+            }
+            else if (yValue > 0) {
+                // Positive value
+                top = yValue;
+                bottom = max([0, yDomainMinMax[0]]);
+            }
+            else {
+                // Negative value
+                top = min([0, yDomainMinMax[1]]);
+                bottom = yValue;
+            }
             const y = ctx.yScale(top) + insets.top;
             const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
             return { x, y, width, height };
         }
+        else if (ctx.yInterval) {
+            // y-axis time scale with interval
+            const yValue = _y(item);
+            const start = ctx.yInterval.floor(yValue);
+            const end = ctx.yInterval.offset(start);
+            const yStart = ctx.yScale(start);
+            const yEnd = ctx.yScale(end);
+            const y = Math.min(yStart, yEnd) + insets.top;
+            const height = Math.abs(yEnd - yStart) - insets.top - insets.bottom;
+            const xValue = _x(item);
+            let left = 0;
+            let right = 0;
+            if (Array.isArray(xValue)) {
+                // Array contains both top and bottom values (stack, etc);
+                left = min(xValue);
+                right = max(xValue);
+            }
+            else if (xValue == null) {
+                // null/undefined value
+                left = 0;
+                right = 0;
+            }
+            else if (xValue > 0) {
+                // Positive value
+                left = max([0, xDomainMinMax[0]]);
+                right = xValue;
+            }
+            else {
+                // Negative value
+                left = xValue;
+                right = min([0, xDomainMinMax[1]]);
+            }
+            const x = ctx.xScale(left) + insets.left;
+            const width = ctx.xScale(right) - x - insets.right;
+            return { x, y, width, height };
+        }
     };
 }
 /**
@@ -103,3 +183,36 @@ export function createDimensionGetter(ctx, getOptions) {
 export function firstValue(value) {
     return Array.isArray(value) ? value[0] : value;
 }
+/**
+ * Normalize a `Corners` value to `[tl, tr, br, bl]`, clamping each corner to
+ * half the shorter side so opposite corners cannot overlap.
+ */
+export function resolveCorners(corners, width, height) {
+    let tl = 0;
+    let tr = 0;
+    let br = 0;
+    let bl = 0;
+    if (typeof corners === 'number') {
+        tl = tr = br = bl = corners;
+    }
+    else if (Array.isArray(corners)) {
+        [tl, tr, br, bl] = corners;
+    }
+    else if (corners) {
+        tl = corners.topLeft ?? 0;
+        tr = corners.topRight ?? 0;
+        br = corners.bottomRight ?? 0;
+        bl = corners.bottomLeft ?? 0;
+    }
+    const max = Math.min(width, height) / 2;
+    return [
+        Math.min(Math.max(0, tl), max),
+        Math.min(Math.max(0, tr), max),
+        Math.min(Math.max(0, br), max),
+        Math.min(Math.max(0, bl), max),
+    ];
+}
+/** True when all four corner radii are equal (lets callers use simpler `rx`/`ry` rendering). */
+export function cornersUniform([tl, tr, br, bl]) {
+    return tl === tr && tr === br && br === bl;
+}

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

@@ -1,6 +1,6 @@
-import { type ScaleBand } from 'd3-scale';
+import { type ScaleBand, type ScaleTime } from 'd3-scale';
 import { type MotionProp, type MotionOptions, type SpringOptions, type TweenOptions } from './motion.svelte.js';
-import type { Accessor } from './common.js';
+import { type Accessor } from './common.js';
 import type { OnlyObjects } from './types.js';
 export type AnyScale<TInput extends SingleDomainType = any, TOutput extends SingleDomainType = any, TScaleArgs extends any[] | readonly any[] = any[]> = {
     (value: TInput): TOutput;
@@ -23,6 +23,9 @@ export type AnyScale<TInput extends SingleDomainType = any, TOutput extends Sing
     thresholds?: () => TInput[];
     quantiles?: () => TInput[];
 };
+export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
+export declare function isScaleTime(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
+export declare function isScaleNumeric(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
 export declare function getRange(scale: any): any[];
 export type SingleDomainType = number | string | Date | null | undefined;
 export type DomainType = (number | string | Date | null | undefined)[] | null | undefined;
@@ -45,14 +48,17 @@ export declare function createMotionScale<Domain, Range>(scale: AnyScale, motion
  * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
  */
 export declare function scaleBandInvert(scale: ScaleBand<any>): (value: number) => any;
-export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value
  */
 export declare function scaleInvert(scale: AnyScale<any, any>, value: number): any;
 /** Create new copy of scale with domain and range */
-export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, any[]>;
+export declare function createScale(scale: AnyScale, domain: DomainType, range?: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, any[]>;
+/**
+ * Auto-detect scale type based on domain values or data values
+ */
+export declare function autoScale(domain?: DomainType, data?: any[], propAccessor?: Accessor<any>): AnyScale;
 /**
  * Create a `scaleBand()` within another scaleBand()'s bandwidth
  * (typically a x1 of an x0 scale, used for grouping)

package/dist/utils/scales.svelte.js

@@ -1,10 +1,22 @@
 import { unique } from '@layerstack/utils';
-import { scaleBand } from 'd3-scale';
+import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
 import { createControlledMotion, } from './motion.svelte.js';
 import { Spring, Tween } from 'svelte/motion';
+import { accessor } from './common.js';
 function isAnyScale(scale) {
     return typeof scale === 'function' && typeof scale.range === 'function';
 }
+export function isScaleBand(scale) {
+    return typeof scale.bandwidth === 'function';
+}
+export function isScaleTime(scale) {
+    const domain = scale.domain();
+    return domain[0] instanceof Date || domain[1] instanceof Date;
+}
+export function isScaleNumeric(scale) {
+    const domain = scale.domain();
+    return typeof domain[0] === 'number' || typeof domain[1] === 'number';
+}
 export function getRange(scale) {
     if (isAnyScale(scale)) {
         return scale.range();
@@ -48,15 +60,14 @@ export function createMotionScale(scale, motion, options) {
 export function scaleBandInvert(scale) {
     const domain = scale.domain();
     const eachBand = scale.step();
-    const paddingOuter = eachBand * (scale.paddingOuter?.() ?? scale.padding()); // `scaleBand` uses paddingOuter(), while `scalePoint` uses padding() for outer paddding - https://github.com/d3/d3-scale#point_padding
+    const rangeStart = scale.range()[0];
+    const paddingOuter = scale.paddingOuter?.() ?? scale.padding(); // `scaleBand` uses paddingOuter(), while `scalePoint` uses padding() for outer paddding - https://github.com/d3/d3-scale#point_padding
     return function (value) {
-        const index = Math.floor((value - paddingOuter / 2) / eachBand);
+        // band[i] = rangeStart + step * (paddingOuter + i), so: i = (value - rangeStart) / step - paddingOuter
+        const index = Math.floor((value - rangeStart) / eachBand - paddingOuter);
         return domain[Math.max(0, Math.min(index, domain.length - 1))];
     };
 }
-export function isScaleBand(scale) {
-    return typeof scale.bandwidth === 'function';
-}
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value
@@ -75,14 +86,50 @@ export function createScale(scale, domain, range, context) {
     if (domain) {
         scaleCopy.domain(domain);
     }
-    if (typeof range === 'function') {
-        scaleCopy.range(range(context));
-    }
-    else {
-        scaleCopy.range(range);
+    if (range != null) {
+        if (typeof range === 'function') {
+            scaleCopy.range(range(context));
+        }
+        else {
+            scaleCopy.range(range);
+        }
     }
     return scaleCopy;
 }
+/**
+ * Auto-detect scale type based on domain values or data values
+ */
+export function autoScale(domain, data, propAccessor) {
+    let values = null;
+    if (domain && domain.length > 0 && domain.some((d) => d != null)) {
+        // Determine based on non-null domain values
+        values = domain.filter((d) => d != null);
+    }
+    else if (data && data.length > 0 && propAccessor) {
+        // Determine based on data values
+        const value = accessor(propAccessor)(data[0]);
+        // If accessor defined with an array (ex. `x={['start', 'end']}`) use both values
+        if (Array.isArray(value)) {
+            values = value;
+        }
+        else {
+            values = [value];
+        }
+    }
+    if (values) {
+        if (values.some((v) => v instanceof Date)) {
+            return scaleTime();
+        }
+        else if (values.some((v) => typeof v === 'number')) {
+            return scaleLinear();
+        }
+        else if (values.some((v) => typeof v === 'string')) {
+            return scaleBand();
+        }
+    }
+    // fallback to linear scale
+    return scaleLinear();
+}
 /**
  * Create a `scaleBand()` within another scaleBand()'s bandwidth
  * (typically a x1 of an x0 scale, used for grouping)
@@ -107,7 +154,7 @@ export function groupScaleBand(scale, flatData, groupBy, padding) {
 export function tweenedScale(scale, tweenedOptions = {}) {
     const tweenedDomain = new Tween(undefined, tweenedOptions);
     const tweenedRange = new Tween(undefined, tweenedOptions);
-    const tweenedScale = $derived.by(() => {
+    const _tweenedScale = $derived.by(() => {
         const scaledInstance = scale.domain ? scale : scale();
         if (tweenedDomain.current) {
             scaledInstance.domain(tweenedDomain.current);
@@ -119,7 +166,7 @@ export function tweenedScale(scale, tweenedOptions = {}) {
     });
     return {
         get current() {
-            return tweenedScale;
+            return _tweenedScale;
         },
         domain: (values) => tweenedDomain.set(values),
         range: (values) => tweenedRange.set(values),

package/dist/utils/scales.svelte.test.d.ts

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

package/dist/utils/scales.svelte.test.js

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { scaleBand } from 'd3-scale';
+import { scaleBandInvert, scaleInvert } from './scales.svelte.js';
+describe('scaleBandInvert', () => {
+    const domain = ['A', 'B', 'C', 'D', 'E'];
+    it('should return correct category for standard range [0, width]', () => {
+        const scale = scaleBand().domain(domain).range([0, 500]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        // Each category should map back from its center
+        for (const category of domain) {
+            const x = scale(category) + scale.bandwidth() / 2;
+            expect(invert(x)).toBe(category);
+        }
+    });
+    it('should clamp to first category for values before range', () => {
+        const scale = scaleBand().domain(domain).range([0, 500]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        expect(invert(-50)).toBe('A');
+    });
+    it('should clamp to last category for values after range', () => {
+        const scale = scaleBand().domain(domain).range([0, 500]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        expect(invert(600)).toBe('E');
+    });
+    it('should handle offset range (non-zero start)', () => {
+        // Simulates a zoomed band scale where the range is shifted
+        const scale = scaleBand().domain(domain).range([-200, 800]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        // Each category should still map correctly
+        for (const category of domain) {
+            const x = scale(category) + scale.bandwidth() / 2;
+            expect(invert(x)).toBe(category);
+        }
+    });
+    it('should return correct category at viewport edges with offset range', () => {
+        // Range [-400, 600] means categories span 1000px but viewport is [0, ~500]
+        const scale = scaleBand().domain(domain).range([-400, 600]).padding(0.4);
+        const invert = scaleBandInvert(scale);
+        // At x=0, we should get whichever category is nearest that pixel position
+        const categoryAtZero = invert(0);
+        expect(domain).toContain(categoryAtZero);
+        // The returned category should be close to x=0 (within one step)
+        const pos = scale(categoryAtZero);
+        expect(Math.abs(pos)).toBeLessThan(scale.step());
+    });
+    it('should work with no padding', () => {
+        const scale = scaleBand().domain(domain).range([0, 500]);
+        const invert = scaleBandInvert(scale);
+        // bandwidth = 100, each category is 100px wide
+        expect(invert(50)).toBe('A');
+        expect(invert(150)).toBe('B');
+        expect(invert(450)).toBe('E');
+    });
+    it('should work with single-element domain', () => {
+        const scale = scaleBand().domain(['X']).range([0, 500]).padding(0.1);
+        const invert = scaleBandInvert(scale);
+        expect(invert(250)).toBe('X');
+        expect(invert(0)).toBe('X');
+    });
+});
+describe('scaleInvert', () => {
+    it('should use scaleBandInvert for band scales', () => {
+        const scale = scaleBand().domain(['A', 'B', 'C']).range([0, 300]).padding(0.1);
+        const center = scale('B') + scale.bandwidth() / 2;
+        expect(scaleInvert(scale, center)).toBe('B');
+    });
+});

package/dist/utils/shape.d.ts

@@ -0,0 +1,43 @@
+/** Get points to create a polygon with given number of points and radius
+ *
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @returns Array of points (angle, radius)
+ */
+export declare function polygonPoints(count: number, radius: number, rotate?: number): {
+    angle: number;
+    radius: number;
+}[];
+/** Create polygon
+ *
+ * @param cx - Center x coordinate
+ * @param cy - Center y coordinate
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @param rotate - Rotation of the polygon (degrees)
+ * @param inset - Percent to inset odd points (<1 inset, >1 outset)
+ * @param scaleX - Horizontal stretch factor
+ * @param scaleY - Vertical stretch factor
+ * @param skewX - Skew angle in degrees along the X axis
+ * @param skewY - Skew angle in degrees along the Y axis
+ * @param tiltX - Tilt factor for x-coordinates (0 = no tilt, positive moves points top => down, negative moves points bottom => up)
+ * @param tiltY - Tilt factor for y-coordinates (0 = no tilt, positive moves points left => right, negative moves points right => left)
+ * @returns Array of points (x, y)
+ */
+export declare function polygon(options: {
+    cx: number;
+    cy: number;
+    count: number;
+    radius: number;
+    rotate?: number;
+    inset?: number;
+    scaleX?: number;
+    scaleY?: number;
+    skewX?: number;
+    skewY?: number;
+    tiltX?: number;
+    tiltY?: number;
+}): {
+    x: number;
+    y: number;
+}[];

package/dist/utils/shape.js

@@ -0,0 +1,59 @@
+import { range } from 'd3-array';
+import { degreesToRadians } from './math.js';
+/** Get points to create a polygon with given number of points and radius
+ *
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @returns Array of points (angle, radius)
+ */
+export function polygonPoints(count, radius, rotate = 0) {
+    const angle = 360 / count;
+    return range(count).map((index) => {
+        return {
+            angle: degreesToRadians(angle * index) + degreesToRadians(rotate),
+            radius,
+        };
+    });
+}
+/** Create polygon
+ *
+ * @param cx - Center x coordinate
+ * @param cy - Center y coordinate
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @param rotate - Rotation of the polygon (degrees)
+ * @param inset - Percent to inset odd points (<1 inset, >1 outset)
+ * @param scaleX - Horizontal stretch factor
+ * @param scaleY - Vertical stretch factor
+ * @param skewX - Skew angle in degrees along the X axis
+ * @param skewY - Skew angle in degrees along the Y axis
+ * @param tiltX - Tilt factor for x-coordinates (0 = no tilt, positive moves points top => down, negative moves points bottom => up)
+ * @param tiltY - Tilt factor for y-coordinates (0 = no tilt, positive moves points left => right, negative moves points right => left)
+ * @returns Array of points (x, y)
+ */
+export function polygon(options) {
+    const { cx, cy, count, radius, rotate = 0, inset = 1, scaleX = 1, scaleY = 1, skewX = 0, skewY = 0, tiltX = 0, tiltY = 0, } = options;
+    const skewXRad = degreesToRadians(skewX);
+    const skewYRad = degreesToRadians(skewY);
+    return polygonPoints(count, radius, rotate).map(({ angle, radius }, i) => {
+        // inset
+        const insetScale = i % 2 == 0 ? 1 : 1 - inset;
+        // scale
+        let x = radius * insetScale * Math.cos(angle) * scaleX;
+        let y = radius * insetScale * Math.sin(angle) * scaleY;
+        // tilt
+        const normalizedY = (y + radius) / (2 * radius);
+        const normalizedX = (x + radius) / (2 * radius);
+        const tiltScaleX = tiltX > 0 ? 1 + tiltX * (1 - normalizedY) : 1 - tiltX * normalizedY;
+        const tiltScaleY = tiltY > 0 ? 1 + tiltY * (1 - normalizedX) : 1 - tiltY * normalizedX;
+        x *= tiltScaleX;
+        y *= tiltScaleY;
+        // skew
+        const xSkewed = x + Math.tan(skewXRad) * y;
+        const ySkewed = y + Math.tan(skewYRad) * x;
+        return {
+            x: cx + xSkewed,
+            y: cy + ySkewed,
+        };
+    });
+}

package/dist/utils/stack.js

@@ -91,7 +91,7 @@ export function stackOffsetSeparated(series, order) {
         return;
     // Standard series
     for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
-        (s0 = s1), (s1 = series[order[i]]);
+        ((s0 = s1), (s1 = series[order[i]]));
         // @ts-expect-error
         let base = max(s0, (d) => d[1]) + gap; // here is where you calculate the maximum of the previous layer
         for (var j = 0; j < m; ++j) {

package/dist/utils/stats.d.ts

@@ -0,0 +1,33 @@
+export interface BoxStats {
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+    outliers: number[];
+}
+/**
+ * Compute box plot statistics (five-number summary + outliers) from raw numeric values.
+ * Uses the standard Tukey method: outliers are values beyond `k * IQR` from Q1/Q3.
+ *
+ * @param values - Array of numeric values
+ * @param k - IQR multiplier for outlier detection (default: 1.5)
+ */
+export declare function computeBoxStats(values: number[], k?: number): BoxStats;
+/**
+ * Compute kernel density estimation (KDE) for a set of numeric values.
+ * Returns an array of [value, density] pairs suitable for rendering violin plots.
+ *
+ * @param values - Array of numeric values
+ * @param options - KDE configuration
+ */
+export declare function kde(values: number[], options?: {
+    /** KDE bandwidth. Defaults to Silverman's rule of thumb. */
+    bandwidth?: number;
+    /** Number of evaluation points, or explicit array of thresholds. Default: 50 */
+    thresholds?: number | number[];
+    /** Kernel function factory. Default: Epanechnikov */
+    kernel?: (bandwidth: number) => (x: number) => number;
+    /** Domain extent [min, max]. Defaults to data extent. */
+    extent?: [number, number];
+}): [number, number][];

package/dist/utils/stats.js

@@ -0,0 +1,79 @@
+import { quantile, ascending, deviation } from 'd3-array';
+/**
+ * Compute box plot statistics (five-number summary + outliers) from raw numeric values.
+ * Uses the standard Tukey method: outliers are values beyond `k * IQR` from Q1/Q3.
+ *
+ * @param values - Array of numeric values
+ * @param k - IQR multiplier for outlier detection (default: 1.5)
+ */
+export function computeBoxStats(values, k = 1.5) {
+    const sorted = Float64Array.from(values).sort();
+    const q1 = quantile(sorted, 0.25);
+    const q3 = quantile(sorted, 0.75);
+    const median = quantile(sorted, 0.5);
+    const iqr = q3 - q1;
+    const lowerFence = q1 - k * iqr;
+    const upperFence = q3 + k * iqr;
+    const outliers = [];
+    let min = Infinity;
+    let max = -Infinity;
+    for (const v of sorted) {
+        if (v < lowerFence || v > upperFence) {
+            outliers.push(v);
+        }
+        else {
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+    }
+    // If no non-outlier values, use q1/q3 as min/max
+    if (min === Infinity)
+        min = q1;
+    if (max === -Infinity)
+        max = q3;
+    return { min, q1, median, q3, max, outliers };
+}
+/**
+ * Epanechnikov kernel function.
+ * Optimal kernel for minimizing mean integrated squared error.
+ */
+function epanechnikov(bandwidth) {
+    return (x) => {
+        const u = x / bandwidth;
+        return Math.abs(u) <= 1 ? (0.75 * (1 - u * u)) / bandwidth : 0;
+    };
+}
+/**
+ * Compute kernel density estimation (KDE) for a set of numeric values.
+ * Returns an array of [value, density] pairs suitable for rendering violin plots.
+ *
+ * @param values - Array of numeric values
+ * @param options - KDE configuration
+ */
+export function kde(values, options = {}) {
+    const { kernel = epanechnikov, thresholds: thresholdsProp = 50 } = options;
+    const sorted = [...values].sort(ascending);
+    if (sorted.length === 0)
+        return [];
+    const ext = options.extent ?? [sorted[0], sorted[sorted.length - 1]];
+    // Silverman's rule of thumb for bandwidth
+    const bw = options.bandwidth ?? 1.06 * (deviation(sorted) ?? 1) * Math.pow(sorted.length, -1 / 5);
+    const kernelFn = kernel(bw);
+    // Generate evaluation thresholds
+    let ticks;
+    if (Array.isArray(thresholdsProp)) {
+        ticks = thresholdsProp;
+    }
+    else {
+        const n = Math.max(2, thresholdsProp);
+        const step = (ext[1] - ext[0]) / (n - 1);
+        ticks = Array.from({ length: n }, (_, i) => ext[0] + i * step);
+    }
+    // Compute density at each threshold
+    return ticks.map((t) => {
+        const density = values.reduce((sum, v) => sum + kernelFn(t - v), 0) / values.length;
+        return [t, density];
+    });
+}

package/dist/utils/string.d.ts

@@ -0,0 +1,51 @@
+declare function _getStringWidth(str: string, style?: CSSStyleDeclaration): number | null;
+export declare const getStringWidth: typeof _getStringWidth;
+export type RasterizeTextOptions = {
+    fontSize?: string;
+    fontWeight?: number;
+    fontFamily?: string;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+    spacing?: number;
+    width?: number;
+    height?: number;
+    x?: number;
+    y?: number;
+};
+export declare function rasterizeText(text: string, options?: RasterizeTextOptions): number[][];
+export declare function toTitleCase(str: string): string;
+export type TruncateTextOptions = {
+    /**
+     * The maximum pixel width (optional if maxChars is provided).
+     */
+    maxWidth?: number;
+    /**
+     * CSS style for width calculation
+     */
+    style?: CSSStyleDeclaration;
+    /**
+     * The maximum character count
+     */
+    maxChars?: number;
+    /**
+     * Where to place the ellipsis: 'start', 'middle', or 'end'
+     *
+     * @default 'end'
+     */
+    position?: 'start' | 'middle' | 'end';
+    /**
+     * The character(s) to use as the ellipsis
+     *
+     * @default '…'
+     */
+    ellipsis?: string;
+};
+/**
+ * Truncates a string to fit within a specified pixel width or character count.
+ * If the string's width exceeds the maxWidth, it will be truncated. If the character
+ * count exceeds maxChars, it will also be truncated.
+ *
+ * The ellipsis can be placed at the start, middle, or end of the string.
+ */
+export declare function truncateText(text: string, { position, ellipsis, maxWidth, style, maxChars }: TruncateTextOptions): string;
+export {};