layerchart 2.0.0-next.5 → 2.0.0-next.50

package/dist/states/brush.svelte.js

@@ -0,0 +1,246 @@
+import { clamp } from '@layerstack/utils';
+import { min, max } from 'd3-array';
+import { add } from '../utils/math.js';
+/**
+ * For band scales, expand a [first, last] brush selection into the full category subarray.
+ * For continuous scales, returns the domain unchanged.
+ */
+export function expandBandBrushDomain(brushDomain, baseDomain) {
+    if (brushDomain[0] == null ||
+        brushDomain[1] == null ||
+        typeof brushDomain[0] !== 'string') {
+        return brushDomain;
+    }
+    const startIdx = baseDomain.indexOf(brushDomain[0]);
+    const endIdx = baseDomain.indexOf(brushDomain[1]);
+    if (startIdx === -1 || endIdx === -1)
+        return brushDomain;
+    return baseDomain.slice(startIdx, endIdx + 1);
+}
+/** Check if a domain array is categorical (string-based) */
+function isCategoricalDomain(domain) {
+    return domain.length > 0 && typeof domain[0] === 'string';
+}
+/** Get the min (by domain index) of two values */
+function minByIndex(a, b, domain) {
+    return domain.indexOf(a) <= domain.indexOf(b) ? a : b;
+}
+/** Get the max (by domain index) of two values */
+function maxByIndex(a, b, domain) {
+    return domain.indexOf(a) >= domain.indexOf(b) ? a : b;
+}
+/** Clamp a value to domain bounds by index */
+function clampByIndex(value, minVal, maxVal, domain) {
+    const idx = domain.indexOf(value);
+    const minIdx = domain.indexOf(minVal);
+    const maxIdx = domain.indexOf(maxVal);
+    if (idx === -1)
+        return minVal;
+    if (idx < minIdx)
+        return minVal;
+    if (idx > maxIdx)
+        return maxVal;
+    return value;
+}
+export class BrushState {
+    ctx;
+    x = $state([null, null]);
+    y = $state([null, null]);
+    active = $state();
+    axis = $state('x');
+    handleSize = $state(0);
+    constructor(ctx, options) {
+        this.ctx = ctx;
+        this.x = options?.x ?? [null, null];
+        this.y = options?.y ?? [null, null];
+        this.active = options?.active;
+        this.axis = options?.axis ?? 'x';
+    }
+    /** The domain extent bounds from the base (unzoomed) scales */
+    get xDomainMin() {
+        return this.ctx?.baseXScale.domain()[0];
+    }
+    get xDomainMax() {
+        return this.ctx?.baseXScale.domain().at(-1);
+    }
+    get yDomainMin() {
+        return this.ctx?.baseYScale.domain()[0];
+    }
+    get yDomainMax() {
+        return this.ctx?.baseYScale.domain().at(-1);
+    }
+    get range() {
+        if (!this.ctx) {
+            return { x: 0, y: 0, width: 0, height: 0 };
+        }
+        const xBw = this.ctx.xScale.bandwidth?.() ?? 0;
+        const yBw = this.ctx.yScale.bandwidth?.() ?? 0;
+        const left = this.ctx.xScale(this.x?.[0]);
+        const right = this.ctx.xScale(this.x?.[1]) + xBw;
+        const top = this.ctx.yScale(this.y?.[1]);
+        const bottom = this.ctx.yScale(this.y?.[0]) + yBw;
+        return {
+            x: this.axis === 'both' || this.axis === 'x' ? left : 0,
+            y: this.axis === 'both' || this.axis === 'y' ? top : 0,
+            width: this.axis === 'both' || this.axis === 'x' ? right - left : this.ctx.width,
+            height: this.axis === 'both' || this.axis === 'y' ? bottom - top : this.ctx.height,
+        };
+    }
+    /** Reset brush to cleared state */
+    reset() {
+        this.active = false;
+        this.x = [null, null];
+        this.y = [null, null];
+    }
+    /** Select the full domain extent */
+    selectAll() {
+        this.active = true;
+        this.x = [this.xDomainMin, this.xDomainMax];
+        this.y = [this.yDomainMin, this.yDomainMax];
+    }
+    /** Programmatically set the brush selection. Like d3's `brush.move()`. */
+    move(selection) {
+        if ('x' in selection) {
+            this.x = selection.x ?? [null, null];
+        }
+        if ('y' in selection) {
+            this.y = selection.y ?? [null, null];
+        }
+        // Determine active state from current values
+        const hasX = this.x[0] != null && this.x[1] != null;
+        const hasY = this.y[0] != null && this.y[1] != null;
+        this.active =
+            this.axis === 'x' ? hasX : this.axis === 'y' ? hasY : hasX || hasY;
+    }
+    /** Set brush to a new range, clamped to domain bounds */
+    setRange(startValue, currentValue) {
+        this.active = true;
+        const xDomain = this.ctx?.baseXScale.domain() ?? [];
+        const yDomain = this.ctx?.baseYScale.domain() ?? [];
+        if (isCategoricalDomain(xDomain)) {
+            this.x = [
+                clampByIndex(minByIndex(startValue.x, currentValue.x, xDomain), this.xDomainMin, this.xDomainMax, xDomain),
+                clampByIndex(maxByIndex(startValue.x, currentValue.x, xDomain), this.xDomainMin, this.xDomainMax, xDomain),
+            ];
+        }
+        else {
+            this.x = [
+                clamp(min([startValue.x, currentValue.x]), this.xDomainMin, this.xDomainMax),
+                clamp(max([startValue.x, currentValue.x]), this.xDomainMin, this.xDomainMax),
+            ];
+        }
+        if (isCategoricalDomain(yDomain)) {
+            this.y = [
+                clampByIndex(minByIndex(startValue.y, currentValue.y, yDomain), this.yDomainMin, this.yDomainMax, yDomain),
+                clampByIndex(maxByIndex(startValue.y, currentValue.y, yDomain), this.yDomainMin, this.yDomainMax, yDomain),
+            ];
+        }
+        else {
+            this.y = [
+                clamp(min([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
+                clamp(max([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
+            ];
+        }
+    }
+    /** Move the entire brush range by a delta, clamped to domain bounds */
+    moveRange(start, currentValue) {
+        const xDomain = this.ctx?.baseXScale.domain() ?? [];
+        const yDomain = this.ctx?.baseYScale.domain() ?? [];
+        if (isCategoricalDomain(xDomain)) {
+            const startIdx = xDomain.indexOf(start.value.x);
+            const currentIdx = xDomain.indexOf(currentValue.x);
+            const origStartIdx = xDomain.indexOf(start.x[0]);
+            const origEndIdx = xDomain.indexOf(start.x[1]);
+            const delta = Math.max(-origStartIdx, Math.min(xDomain.length - 1 - origEndIdx, currentIdx - startIdx));
+            this.x = [xDomain[origStartIdx + delta], xDomain[origEndIdx + delta]];
+        }
+        else {
+            const dx = clamp(currentValue.x - start.value.x, this.xDomainMin - +start.x[0], this.xDomainMax - +start.x[1]);
+            this.x = [add(start.x[0], dx), add(start.x[1], dx)];
+        }
+        if (isCategoricalDomain(yDomain)) {
+            const startIdx = yDomain.indexOf(start.value.y);
+            const currentIdx = yDomain.indexOf(currentValue.y);
+            const origStartIdx = yDomain.indexOf(start.y[0]);
+            const origEndIdx = yDomain.indexOf(start.y[1]);
+            const delta = Math.max(-origStartIdx, Math.min(yDomain.length - 1 - origEndIdx, currentIdx - startIdx));
+            this.y = [yDomain[origStartIdx + delta], yDomain[origEndIdx + delta]];
+        }
+        else {
+            const dy = clamp(currentValue.y - start.value.y, this.yDomainMin - +start.y[0], this.yDomainMax - +start.y[1]);
+            this.y = [add(start.y[0], dy), add(start.y[1], dy)];
+        }
+    }
+    /** Adjust a single edge of the brush, clamped to domain bounds. Handles inversion if dragged past opposite edge. */
+    adjustEdge(edge, start, currentValue) {
+        const xDomain = this.ctx?.baseXScale.domain() ?? [];
+        const yDomain = this.ctx?.baseYScale.domain() ?? [];
+        const xCat = isCategoricalDomain(xDomain);
+        const yCat = isCategoricalDomain(yDomain);
+        const clampX = (v) => xCat ? clampByIndex(v, this.xDomainMin, this.xDomainMax, xDomain) : clamp(v, this.xDomainMin, this.xDomainMax);
+        const clampY = (v) => yCat ? clampByIndex(v, this.yDomainMin, this.yDomainMax, yDomain) : clamp(v, this.yDomainMin, this.yDomainMax);
+        const ltX = (a, b) => xCat ? xDomain.indexOf(a) < xDomain.indexOf(b) : a < +b;
+        const gtX = (a, b) => xCat ? xDomain.indexOf(a) > xDomain.indexOf(b) : a > +b;
+        const ltY = (a, b) => yCat ? yDomain.indexOf(a) < yDomain.indexOf(b) : a < +b;
+        const gtY = (a, b) => yCat ? yDomain.indexOf(a) > yDomain.indexOf(b) : a > +b;
+        switch (edge) {
+            case 'top':
+                this.y = [
+                    clampY(ltY(currentValue.y, start.y[0]) ? currentValue.y : start.y[0]),
+                    clampY(ltY(currentValue.y, start.y[0]) ? start.y[0] : currentValue.y),
+                ];
+                break;
+            case 'bottom':
+                this.y = [
+                    clampY(gtY(currentValue.y, start.y[1]) ? start.y[1] : currentValue.y),
+                    clampY(gtY(currentValue.y, start.y[1]) ? currentValue.y : start.y[1]),
+                ];
+                break;
+            case 'left':
+                this.x = [
+                    clampX(gtX(currentValue.x, start.x[1]) ? start.x[1] : currentValue.x),
+                    clampX(gtX(currentValue.x, start.x[1]) ? currentValue.x : start.x[1]),
+                ];
+                break;
+            case 'right':
+                this.x = [
+                    clampX(ltX(currentValue.x, start.x[0]) ? currentValue.x : start.x[0]),
+                    clampX(ltX(currentValue.x, start.x[0]) ? start.x[0] : currentValue.x),
+                ];
+                break;
+        }
+    }
+    /**
+     * Sync external domain values into brush state.
+     * Only writes when values actually differ to avoid reactive loops.
+     */
+    syncFromExternal(externalX, externalY) {
+        const newX = externalX ?? [null, null];
+        const newY = externalY ?? [null, null];
+        // Only write when values actually differ to avoid reactive loops
+        if (this.x[0]?.valueOf() !== newX[0]?.valueOf() || this.x[1]?.valueOf() !== newX[1]?.valueOf()) {
+            this.x = newX;
+        }
+        if (this.y[0]?.valueOf() !== newY[0]?.valueOf() || this.y[1]?.valueOf() !== newY[1]?.valueOf()) {
+            this.y = newY;
+        }
+        const isXAxisActive = externalX != null &&
+            externalX[0] != null &&
+            externalX[1] != null &&
+            (externalX[0].valueOf() !== this.xDomainMin?.valueOf() ||
+                externalX[1].valueOf() !== this.xDomainMax?.valueOf());
+        const isYAxisActive = externalY != null &&
+            externalY[0] != null &&
+            externalY[1] != null &&
+            (externalY[0].valueOf() !== this.yDomainMin?.valueOf() ||
+                externalY[1].valueOf() !== this.yDomainMax?.valueOf());
+        const newActive = this.axis === 'x'
+            ? isXAxisActive
+            : this.axis === 'y'
+                ? isYAxisActive
+                : isXAxisActive || isYAxisActive;
+        if (this.active !== newActive) {
+            this.active = newActive;
+        }
+    }
+}

package/dist/states/brush.svelte.test.d.ts

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

package/dist/states/brush.svelte.test.js

@@ -0,0 +1,417 @@
+import { describe, it, expect } from 'vitest';
+import { BrushState, expandBandBrushDomain } from './brush.svelte.js';
+/** Create a mock chart context with a simple linear scale over [0, 100] */
+function createMockCtx(options) {
+    const xDomain = options?.xDomain ?? [0, 100];
+    const yDomain = options?.yDomain ?? [0, 100];
+    const width = options?.width ?? 500;
+    const height = options?.height ?? 300;
+    const xScale = (v) => ((v - xDomain[0]) / (xDomain[1] - xDomain[0])) * width;
+    const yScale = (v) => height - ((v - yDomain[0]) / (yDomain[1] - yDomain[0])) * height;
+    return {
+        xScale,
+        yScale,
+        baseXScale: { domain: () => xDomain },
+        baseYScale: { domain: () => yDomain },
+        width,
+        height,
+    };
+}
+describe('BrushState', () => {
+    describe('constructor', () => {
+        it('should initialize with default values', () => {
+            const brush = new BrushState(null);
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.y).toEqual([null, null]);
+            expect(brush.active).toBeUndefined();
+            expect(brush.axis).toBe('x');
+        });
+        it('should initialize with provided options', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, {
+                x: [10, 50],
+                y: [20, 80],
+                axis: 'both',
+                active: true,
+            });
+            expect(brush.x).toEqual([10, 50]);
+            expect(brush.y).toEqual([20, 80]);
+            expect(brush.axis).toBe('both');
+            expect(brush.active).toBe(true);
+        });
+    });
+    describe('domain bounds', () => {
+        it('should return domain min/max from base scales', () => {
+            const ctx = createMockCtx({ xDomain: [0, 200], yDomain: [10, 90] });
+            const brush = new BrushState(ctx);
+            expect(brush.xDomainMin).toBe(0);
+            expect(brush.xDomainMax).toBe(200);
+            expect(brush.yDomainMin).toBe(10);
+            expect(brush.yDomainMax).toBe(90);
+        });
+        it('should return undefined when no ctx', () => {
+            const brush = new BrushState(null);
+            expect(brush.xDomainMin).toBeUndefined();
+            expect(brush.xDomainMax).toBeUndefined();
+        });
+    });
+    describe('range', () => {
+        it('should return zero range when no ctx', () => {
+            const brush = new BrushState(null);
+            expect(brush.range).toEqual({ x: 0, y: 0, width: 0, height: 0 });
+        });
+        it('should compute pixel range from domain values (x-axis)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], width: 500, height: 300 });
+            const brush = new BrushState(ctx, { x: [20, 80], axis: 'x' });
+            expect(brush.range.x).toBe(100); // 20/100 * 500
+            expect(brush.range.width).toBe(300); // (80-20)/100 * 500
+            // y-axis not active, should span full height
+            expect(brush.range.y).toBe(0);
+            expect(brush.range.height).toBe(300);
+        });
+        it('should compute pixel range for both axes', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100], width: 500, height: 300 });
+            const brush = new BrushState(ctx, { x: [20, 80], y: [25, 75], axis: 'both' });
+            expect(brush.range.x).toBe(100); // 20/100 * 500
+            expect(brush.range.width).toBe(300); // (80-20)/100 * 500
+        });
+    });
+    describe('reset', () => {
+        it('should clear x, y, and active state', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, { x: [10, 50], y: [20, 80], active: true });
+            brush.reset();
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.y).toEqual([null, null]);
+            expect(brush.active).toBe(false);
+        });
+    });
+    describe('selectAll', () => {
+        it('should set x and y to full domain extent', () => {
+            const ctx = createMockCtx({ xDomain: [0, 200], yDomain: [10, 90] });
+            const brush = new BrushState(ctx);
+            brush.selectAll();
+            expect(brush.x).toEqual([0, 200]);
+            expect(brush.y).toEqual([10, 90]);
+        });
+    });
+    describe('move', () => {
+        it('should set x domain and activate', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.move({ x: [20, 80] });
+            expect(brush.x).toEqual([20, 80]);
+            expect(brush.active).toBe(true);
+        });
+        it('should set y domain only', () => {
+            const ctx = createMockCtx({ yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'y', x: [10, 50] });
+            brush.move({ y: [30, 70] });
+            expect(brush.x).toEqual([10, 50]); // unchanged
+            expect(brush.y).toEqual([30, 70]);
+            expect(brush.active).toBe(true);
+        });
+        it('should set both axes', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, { axis: 'both' });
+            brush.move({ x: [10, 90], y: [20, 80] });
+            expect(brush.x).toEqual([10, 90]);
+            expect(brush.y).toEqual([20, 80]);
+            expect(brush.active).toBe(true);
+        });
+        it('should clear with null', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, { axis: 'x', x: [20, 80], active: true });
+            brush.move({ x: null });
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.active).toBe(false);
+        });
+        it('should be inactive when only non-active axis has values', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.move({ y: [20, 80] }); // axis is 'x', so y doesn't count
+            expect(brush.active).toBe(false);
+        });
+    });
+    describe('setRange', () => {
+        it('should set brush to new range with clamping', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: 20, y: 30 }, { x: 60, y: 70 });
+            expect(brush.active).toBe(true);
+            expect(brush.x).toEqual([20, 60]);
+            expect(brush.y).toEqual([30, 70]);
+        });
+        it('should handle reversed values (drag right-to-left)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: 60, y: 70 }, { x: 20, y: 30 });
+            expect(brush.x).toEqual([20, 60]);
+            expect(brush.y).toEqual([30, 70]);
+        });
+        it('should clamp to domain bounds', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: -10, y: -10 }, { x: 150, y: 150 });
+            expect(brush.x).toEqual([0, 100]);
+            expect(brush.y).toEqual([0, 100]);
+        });
+    });
+    describe('moveRange', () => {
+        it('should move the range by delta', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 40], y: [20, 40] });
+            brush.moveRange({ x: [20, 40], y: [20, 40], value: { x: 30, y: 30 } }, { x: 40, y: 50 });
+            // Delta: x=+10, y=+20
+            expect(brush.x).toEqual([30, 50]);
+            expect(brush.y).toEqual([40, 60]);
+        });
+        it('should clamp movement to domain bounds', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx);
+            brush.moveRange({ x: [80, 100], y: [80, 100], value: { x: 90, y: 90 } }, { x: 110, y: 110 });
+            // Should not exceed domain max
+            expect(brush.x).toEqual([80, 100]);
+            expect(brush.y).toEqual([80, 100]);
+        });
+    });
+    describe('adjustEdge', () => {
+        it('should adjust the right edge', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 60] });
+            brush.adjustEdge('right', { x: [20, 60], y: [0, 100] }, { x: 80, y: 50 });
+            expect(brush.x).toEqual([20, 80]);
+        });
+        it('should adjust the left edge', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 60] });
+            brush.adjustEdge('left', { x: [20, 60], y: [0, 100] }, { x: 10, y: 50 });
+            expect(brush.x).toEqual([10, 60]);
+        });
+        it('should invert edges when dragged past the opposite edge', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 60] });
+            // Drag left handle past right edge
+            brush.adjustEdge('left', { x: [20, 60], y: [0, 100] }, { x: 80, y: 50 });
+            expect(brush.x).toEqual([60, 80]);
+        });
+        it('should adjust the top edge', () => {
+            const ctx = createMockCtx({ yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { y: [20, 60] });
+            // Top edge pivots around start.y[0] (bottom of range)
+            brush.adjustEdge('top', { x: [0, 100], y: [20, 60] }, { x: 50, y: 10 });
+            expect(brush.y).toEqual([10, 20]);
+        });
+        it('should adjust the bottom edge', () => {
+            const ctx = createMockCtx({ yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { y: [20, 60] });
+            // Bottom edge pivots around start.y[1] (top of range)
+            brush.adjustEdge('bottom', { x: [0, 100], y: [20, 60] }, { x: 50, y: 80 });
+            expect(brush.y).toEqual([60, 80]);
+        });
+        it('should clamp to domain bounds', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 60] });
+            brush.adjustEdge('right', { x: [20, 60], y: [0, 100] }, { x: 150, y: 50 });
+            expect(brush.x).toEqual([20, 100]);
+        });
+    });
+    describe('syncFromExternal', () => {
+        it('should sync x/y values and set active when different from domain', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.syncFromExternal([20, 80], null);
+            expect(brush.x).toEqual([20, 80]);
+            expect(brush.y).toEqual([null, null]);
+            expect(brush.active).toBe(true);
+        });
+        it('should set inactive when x matches full domain', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.syncFromExternal([0, 100], null);
+            expect(brush.active).toBe(false);
+        });
+        it('should set inactive when x is null (reset)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', active: true, x: [20, 80] });
+            brush.syncFromExternal(null, null);
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.active).toBe(false);
+        });
+        it('should set inactive when x is [null, null] (reset via onChange)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', active: true, x: [20, 80] });
+            brush.syncFromExternal([null, null], null);
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.active).toBe(false);
+        });
+        it('should handle both axis mode', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'both' });
+            brush.syncFromExternal([20, 80], [30, 70]);
+            expect(brush.active).toBe(true);
+        });
+        it('should be inactive in both mode when only y differs but axis is x', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.syncFromExternal([0, 100], [20, 80]);
+            expect(brush.active).toBe(false);
+        });
+        it('should handle Date domains', () => {
+            const d1 = new Date('2024-01-01');
+            const d2 = new Date('2024-12-31');
+            const d3 = new Date('2024-03-01');
+            const d4 = new Date('2024-09-01');
+            const ctx = createMockCtx();
+            // Override baseXScale to use dates
+            ctx.baseXScale = { domain: () => [d1, d2] };
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.syncFromExternal([d3, d4], null);
+            expect(brush.x).toEqual([d3, d4]);
+            expect(brush.active).toBe(true);
+        });
+        it('should be inactive when Date domain matches full extent', () => {
+            const d1 = new Date('2024-01-01');
+            const d2 = new Date('2024-12-31');
+            const ctx = createMockCtx();
+            ctx.baseXScale = { domain: () => [d1, d2] };
+            const brush = new BrushState(ctx, { axis: 'x' });
+            // Same date values but different object references — should compare by valueOf
+            brush.syncFromExternal([new Date('2024-01-01'), new Date('2024-12-31')], null);
+            expect(brush.active).toBe(false);
+        });
+        it('should not write when values have not changed', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', x: [20, 80] });
+            const originalX = brush.x;
+            brush.syncFromExternal([20, 80], null);
+            // Should be the same reference (no write)
+            expect(brush.x).toBe(originalX);
+        });
+    });
+    describe('band scale support', () => {
+        const categories = ['A', 'B', 'C', 'D', 'E'];
+        const bandwidth = 80; // 500 / 5 = 100 step, with padding ~80 band
+        function createBandMockCtx() {
+            const width = 500;
+            const height = 300;
+            const step = width / categories.length;
+            const bw = bandwidth;
+            const xScale = Object.assign((v) => {
+                const idx = categories.indexOf(v);
+                return idx * step + (step - bw) / 2;
+            }, { bandwidth: () => bw });
+            const yScale = (v) => height - (v / 100) * height;
+            return {
+                xScale,
+                yScale,
+                baseXScale: { domain: () => categories },
+                baseYScale: { domain: () => [0, 100] },
+                width,
+                height,
+            };
+        }
+        it('should return correct domain min/max for band scales', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            expect(brush.xDomainMin).toBe('A');
+            expect(brush.xDomainMax).toBe('E');
+        });
+        it('should selectAll with first and last categories', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            brush.selectAll();
+            expect(brush.x).toEqual(['A', 'E']);
+        });
+        it('should setRange with categorical values', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: 'B', y: 30 }, { x: 'D', y: 70 });
+            expect(brush.active).toBe(true);
+            expect(brush.x).toEqual(['B', 'D']);
+        });
+        it('should setRange with reversed categorical values', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: 'D', y: 30 }, { x: 'B', y: 70 });
+            expect(brush.x).toEqual(['B', 'D']);
+        });
+        it('should clamp setRange to domain bounds', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx);
+            // 'A' is the min, 'E' is the max
+            brush.setRange({ x: 'A', y: 0 }, { x: 'E', y: 100 });
+            expect(brush.x).toEqual(['A', 'E']);
+        });
+        it('should compute range with bandwidth for band scales', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'D'], axis: 'x' });
+            const range = brush.range;
+            // Right edge should include bandwidth of last category
+            const leftPx = ctx.xScale('B');
+            const rightPx = ctx.xScale('D') + bandwidth;
+            expect(range.x).toBe(leftPx);
+            expect(range.width).toBe(rightPx - leftPx);
+        });
+        it('should moveRange by category offset', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'C'], y: [20, 40] });
+            brush.moveRange({ x: ['B', 'C'], y: [20, 40], value: { x: 'B', y: 30 } }, { x: 'C', y: 40 });
+            // Delta of 1 category to the right
+            expect(brush.x).toEqual(['C', 'D']);
+        });
+        it('should clamp moveRange to domain bounds', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['D', 'E'] });
+            brush.moveRange({ x: ['D', 'E'], y: [0, 100], value: { x: 'D', y: 50 } }, { x: 'E', y: 50 } // try to move right by 1
+            );
+            // Should stay at domain boundary
+            expect(brush.x).toEqual(['D', 'E']);
+        });
+        it('should adjustEdge right for categorical', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'D'] });
+            brush.adjustEdge('right', { x: ['B', 'D'], y: [0, 100] }, { x: 'E', y: 50 });
+            expect(brush.x).toEqual(['B', 'E']);
+        });
+        it('should adjustEdge left for categorical', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'D'] });
+            brush.adjustEdge('left', { x: ['B', 'D'], y: [0, 100] }, { x: 'A', y: 50 });
+            expect(brush.x).toEqual(['A', 'D']);
+        });
+        it('should invert edges when dragged past opposite edge (categorical)', () => {
+            const ctx = createBandMockCtx();
+            const brush = new BrushState(ctx, { x: ['B', 'D'] });
+            // Drag left handle past right edge
+            brush.adjustEdge('left', { x: ['B', 'D'], y: [0, 100] }, { x: 'E', y: 50 });
+            expect(brush.x).toEqual(['D', 'E']);
+        });
+    });
+});
+describe('expandBandBrushDomain', () => {
+    const baseDomain = ['A', 'B', 'C', 'D', 'E'];
+    it('should expand [first, last] to full category subarray', () => {
+        expect(expandBandBrushDomain(['B', 'D'], baseDomain)).toEqual(['B', 'C', 'D']);
+    });
+    it('should return full domain for [first, last] matching full extent', () => {
+        expect(expandBandBrushDomain(['A', 'E'], baseDomain)).toEqual(['A', 'B', 'C', 'D', 'E']);
+    });
+    it('should return single category when first equals last', () => {
+        expect(expandBandBrushDomain(['C', 'C'], baseDomain)).toEqual(['C']);
+    });
+    it('should pass through numeric domains unchanged', () => {
+        expect(expandBandBrushDomain([10, 50], [0, 100])).toEqual([10, 50]);
+    });
+    it('should pass through null domains unchanged', () => {
+        expect(expandBandBrushDomain([null, null], baseDomain)).toEqual([null, null]);
+    });
+    it('should pass through Date domains unchanged', () => {
+        const d1 = new Date('2024-01-01');
+        const d2 = new Date('2024-06-01');
+        expect(expandBandBrushDomain([d1, d2], [d1, d2])).toEqual([d1, d2]);
+    });
+    it('should return unchanged if category not found in domain', () => {
+        expect(expandBandBrushDomain(['X', 'Y'], baseDomain)).toEqual(['X', 'Y']);
+    });
+});

package/dist/states/chart.component-node.svelte.test.d.ts

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