layerchart 2.0.0-next.64 → 2.0.0-next.66

package/dist/components/BrushContext.svelte

@@ -1,7 +1,12 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
 
-  import { BrushState, type BrushDomainType } from '../states/brush.svelte.js';
+  import {
+    BrushState,
+    type BrushDomainType,
+    type BrushExtent,
+    type BrushSelection,
+  } from '../states/brush.svelte.js';
 
   type BrushEventPayload = {
     brush: BrushState;
@@ -41,6 +46,34 @@
      */
     y?: BrushDomainType;
 
+    /**
+     * Minimum selection size per axis. In domain units for continuous scales (e.g. milliseconds
+     * for time scales), or number of categories for band/point scales.
+     */
+    minExtent?: BrushExtent;
+
+    /**
+     * Maximum selection size per axis, e.g. `{ x: 30 * 24 * 60 * 60 * 1000 }` to cap a time-scale
+     * brush at 30 days. In domain units for continuous scales, or number of categories for band scales.
+     */
+    maxExtent?: BrushExtent;
+
+    /**
+     * Custom constraint function, called after `min/maxExtent` on every selection update. Receives
+     * the candidate `{ x, y }` domain selection and returns a corrected one (e.g. snapping edges to
+     * boundaries). Mirrors `TransformContext`'s `constrain`.
+     */
+    constrain?: (selection: BrushSelection) => BrushSelection;
+
+    /**
+     * Keep the selection within the domain extent. Pointer gestures already clamp to the domain;
+     * this additionally clamps `constrain` output (e.g. a snap that rounds past the first/last
+     * value). Set `false` to allow `constrain` to place edges outside the domain.
+     *
+     * @default true
+     */
+    constrainToDomain?: boolean;
+
     /**
      * Disable brush
      *
@@ -108,6 +141,10 @@
     handleSize = 5,
     clickToReset = true,
     disabled = false,
+    minExtent,
+    maxExtent,
+    constrain,
+    constrainToDomain = true,
     range = {},
     handle = {},
     classes = {},
@@ -119,13 +156,29 @@
 
   let rootEl = $state<HTMLElement>();
 
-  const brushState = new BrushState(ctx, { x, y, axis });
+  const brushState = new BrushState(ctx, {
+    x,
+    y,
+    axis,
+    minExtent,
+    maxExtent,
+    constrain,
+    constrainToDomain,
+  });
   stateProp = brushState;
 
   $effect(() => {
     brushState.handleSize = handleSize;
   });
 
+  // Keep constraint config in sync when props change reactively
+  $effect(() => {
+    brushState.minExtent = minExtent;
+    brushState.maxExtent = maxExtent;
+    brushState.constrain = constrain;
+    brushState.constrainToDomain = constrainToDomain;
+  });
+
   const logger = new Logger('BrushContext');
   const RESET_THRESHOLD = 1; // size of pointer delta to ignore
 

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { BrushState, type BrushDomainType } from '../states/brush.svelte.js';
+import { BrushState, type BrushDomainType, type BrushExtent, type BrushSelection } from '../states/brush.svelte.js';
 type BrushEventPayload = {
     brush: BrushState;
 };
@@ -32,6 +32,30 @@ type BrushContextPropsWithoutHTML = {
      * When provided, the brush reactively updates to reflect this value.
      */
     y?: BrushDomainType;
+    /**
+     * Minimum selection size per axis. In domain units for continuous scales (e.g. milliseconds
+     * for time scales), or number of categories for band/point scales.
+     */
+    minExtent?: BrushExtent;
+    /**
+     * Maximum selection size per axis, e.g. `{ x: 30 * 24 * 60 * 60 * 1000 }` to cap a time-scale
+     * brush at 30 days. In domain units for continuous scales, or number of categories for band scales.
+     */
+    maxExtent?: BrushExtent;
+    /**
+     * Custom constraint function, called after `min/maxExtent` on every selection update. Receives
+     * the candidate `{ x, y }` domain selection and returns a corrected one (e.g. snapping edges to
+     * boundaries). Mirrors `TransformContext`'s `constrain`.
+     */
+    constrain?: (selection: BrushSelection) => BrushSelection;
+    /**
+     * Keep the selection within the domain extent. Pointer gestures already clamp to the domain;
+     * this additionally clamps `constrain` output (e.g. a snap that rounds past the first/last
+     * value). Set `false` to allow `constrain` to place edges outside the domain.
+     *
+     * @default true
+     */
+    constrainToDomain?: boolean;
     /**
      * Disable brush
      *

package/dist/components/BrushContext.svelte.test.js

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { tick } from 'svelte';
-import Chart from "./Chart/Chart.svelte";
+import Chart from './Chart/Chart.svelte';
 import BrushTestHarness from './tests/BrushTestHarness.svelte';
 const data = [
     { x: 0, y: 10 },

package/dist/components/Chart/Chart.base.svelte

@@ -535,4 +535,19 @@
   .lc-root-container :global(*) {
     box-sizing: border-box;
   }
+
+  /*
+   * Treat the chart as an interactive widget rather than selectable text: dragging to brush,
+   * pan, or zoom should never select axis labels or surrounding page content. Text selection
+   * anchors at the pointerdown target, so disabling it on the root (it inherits to descendants)
+   * stops any in-chart gesture from starting a selection.
+   *
+   * Overridable via the `--lc-user-select` custom property — set it to `text` (on the chart, an
+   * ancestor, or a subtree) to re-enable selection where needed. Individual selectable regions
+   * can also just set `user-select: text` on themselves (it overrides the inherited value).
+   */
+  .lc-root-container {
+    -webkit-user-select: var(--lc-user-select, none);
+    user-select: var(--lc-user-select, none);
+  }
 </style>

package/dist/components/Chart/ChartCore.svelte.test.js

@@ -47,4 +47,13 @@ describe('ChartCore', () => {
         await tick();
         expect(container.querySelector('.lc-root-container')).not.toBeNull();
     });
+    it('should disable text selection on the root container', async () => {
+        const { container } = render(ChartCoreTestHarness, {
+            chartProps: { data, x: 'x', y: 'y', height: 200 },
+        });
+        await tick();
+        // Charts are interactive widgets — dragging (brush/pan/zoom) must not select text.
+        const root = container.querySelector('.lc-root-container');
+        expect(getComputedStyle(root).userSelect).toBe('none');
+    });
 });

package/dist/components/Path/Path.svg.svelte

@@ -64,6 +64,12 @@
   const drawTransition = $derived(draw ? _drawTransition : () => ({}));
   let startPoint = $state<DOMPoint | undefined>();
 
+  // Compute the class string here rather than inline in the `class={...}`
+  // attribute: a TS cast in markup survives into `dist` and breaks tooling that
+  // parses class expressions independently of Svelte (e.g. @unocss/svelte-scoped,
+  // whose acorn pass chokes on the `as` keyword).
+  const pathClass = $derived(cls('lc-path', classProp as string | undefined));
+
   const endPointDuration = $derived.by(() => {
     if (
       typeof draw === 'object' &&
@@ -123,7 +129,7 @@
     stroke-opacity={strokeOpacityProp}
     stroke-width={strokeWidthProp}
     opacity={opacityProp}
-    class={cls('lc-path', classProp as string | undefined)}
+    class={pathClass}
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}

package/dist/components/geo/GeoPoint/GeoPoint.base.svelte

@@ -48,8 +48,8 @@
     <Group
       {x}
       {y}
-      opacity={opacity as number}
-      class={className as string}
+      {opacity}
+      class={className}
       {...extractLayerProps(restProps, 'lc-geo-point-group')}
     >
       {@render children({ x, y })}

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

@@ -10,6 +10,16 @@ export type BrushRange = {
     width: number;
     height: number;
 };
+/** Minimum/maximum selection size, per axis. */
+export type BrushExtent = {
+    x?: number;
+    y?: number;
+};
+/** Candidate brush selection passed to a custom `constrain` function. */
+export type BrushSelection = {
+    x: BrushDomainType;
+    y: BrushDomainType;
+};
 /**
  * Minimal interface for the chart context that BrushState depends on.
  * Narrowed from ChartState to only what brush needs, enabling easier testing.
@@ -37,11 +47,37 @@ export declare class BrushState {
     active: boolean | undefined;
     axis: "x" | "y" | "both";
     handleSize: number;
+    /**
+     * Minimum selection size per axis. In domain units for continuous scales (e.g. milliseconds
+     * for time scales), or number of categories for band/point scales.
+     */
+    minExtent: BrushExtent | undefined;
+    /**
+     * Maximum selection size per axis. In domain units for continuous scales (e.g. milliseconds
+     * for time scales), or number of categories for band/point scales.
+     */
+    maxExtent: BrushExtent | undefined;
+    /**
+     * Custom constraint function, called after `min/maxExtent` on every selection update
+     * (create/resize/move/programmatic). Return corrected `{ x, y }` domain values — e.g. to snap
+     * edges to boundaries. Mirrors `TransformState.constrain`.
+     */
+    constrain: ((selection: BrushSelection) => BrushSelection) | undefined;
+    /**
+     * Keep the selection within the domain extent. Enabled by default — pointer gestures already
+     * clamp to the domain, so this additionally clamps `constrain` output (e.g. a snap that rounds
+     * past the first/last value). Set `false` to allow `constrain` to place edges outside the domain.
+     */
+    constrainToDomain: boolean;
     constructor(ctx: typeof this.ctx, options?: {
         x?: BrushDomainType;
         y?: BrushDomainType;
         active?: boolean;
         axis?: 'x' | 'y' | 'both';
+        minExtent?: BrushExtent;
+        maxExtent?: BrushExtent;
+        constrain?: (selection: BrushSelection) => BrushSelection;
+        constrainToDomain?: boolean;
     });
     /** The domain extent bounds from the base (unzoomed) scales */
     get xDomainMin(): any;
@@ -56,7 +92,7 @@ export declare class BrushState {
     };
     /** Reset brush to cleared state */
     reset(): void;
-    /** Select the full domain extent */
+    /** Select the full domain extent (capped by `maxExtent` from the domain start, if set) */
     selectAll(): void;
     /** Programmatically set the brush selection. Like d3's `brush.move()`. */
     move(selection: {
@@ -91,6 +127,22 @@ export declare class BrushState {
         x: any;
         y: any;
     }): void;
+    /** Which endpoint (if any) equals `anchorValue` and should be held fixed while clamping extent. */
+    private _anchorIndex;
+    /**
+     * Clamp one axis' selection to `min/maxExtent`, holding the endpoint at `anchorValue` fixed
+     * (the edge the user isn't dragging). A `null` anchor shrinks/grows symmetrically about the
+     * center. Extent is measured in domain units (continuous) or category count (band/point).
+     */
+    private _clampExtent;
+    /** Clamp both endpoints of one axis to the domain extent. */
+    private _clampToDomain;
+    /**
+     * Apply extent limits (for each axis whose anchor is provided), then the custom `constrain`,
+     * then re-clamp to the domain (unless `constrainToDomain` is disabled). `anchor.x`/`anchor.y`
+     * is the domain value to hold fixed; `null` = symmetric. Mirrors `TransformState._applyConstraints`.
+     */
+    private _applyConstraints;
     /**
      * Sync external domain values into brush state.
      * Only writes when values actually differ to avoid reactive loops.

package/dist/states/brush.svelte.js

@@ -47,12 +47,38 @@ export class BrushState {
     active = $state();
     axis = $state('x');
     handleSize = $state(0);
+    /**
+     * Minimum selection size per axis. In domain units for continuous scales (e.g. milliseconds
+     * for time scales), or number of categories for band/point scales.
+     */
+    minExtent = $state();
+    /**
+     * Maximum selection size per axis. In domain units for continuous scales (e.g. milliseconds
+     * for time scales), or number of categories for band/point scales.
+     */
+    maxExtent = $state();
+    /**
+     * Custom constraint function, called after `min/maxExtent` on every selection update
+     * (create/resize/move/programmatic). Return corrected `{ x, y }` domain values — e.g. to snap
+     * edges to boundaries. Mirrors `TransformState.constrain`.
+     */
+    constrain = $state();
+    /**
+     * Keep the selection within the domain extent. Enabled by default — pointer gestures already
+     * clamp to the domain, so this additionally clamps `constrain` output (e.g. a snap that rounds
+     * past the first/last value). Set `false` to allow `constrain` to place edges outside the domain.
+     */
+    constrainToDomain = $state(true);
     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';
+        this.minExtent = options?.minExtent;
+        this.maxExtent = options?.maxExtent;
+        this.constrain = options?.constrain;
+        this.constrainToDomain = options?.constrainToDomain ?? true;
     }
     /** The domain extent bounds from the base (unzoomed) scales */
     get xDomainMin() {
@@ -90,11 +116,12 @@ export class BrushState {
         this.x = [null, null];
         this.y = [null, null];
     }
-    /** Select the full domain extent */
+    /** Select the full domain extent (capped by `maxExtent` from the domain start, if set) */
     selectAll() {
         this.active = true;
         this.x = [this.xDomainMin, this.xDomainMax];
         this.y = [this.yDomainMin, this.yDomainMax];
+        this._applyConstraints({ x: this.xDomainMin, y: this.yDomainMin });
     }
     /** Programmatically set the brush selection. Like d3's `brush.move()`. */
     move(selection) {
@@ -104,6 +131,8 @@ export class BrushState {
         if ('y' in selection) {
             this.y = selection.y ?? [null, null];
         }
+        // Hold each selection's start edge fixed while enforcing extent limits / `constrain`.
+        this._applyConstraints({ x: this.x[0], y: this.y[0] });
         // 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;
@@ -138,6 +167,8 @@ export class BrushState {
                 clamp(max([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
             ];
         }
+        // Hold the drag origin fixed and pull the moving edge back to satisfy the extent limits.
+        this._applyConstraints({ x: startValue.x, y: startValue.y });
     }
     /** Move the entire brush range by a delta, clamped to domain bounds */
     moveRange(start, currentValue) {
@@ -167,6 +198,8 @@ export class BrushState {
             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)];
         }
+        // Panning preserves width (extent limits are a no-op), but still run `constrain` (e.g. snapping).
+        this._applyConstraints({ x: null, y: null });
     }
     /** Adjust a single edge of the brush, clamped to domain bounds. Handles inversion if dragged past opposite edge. */
     adjustEdge(edge, start, currentValue) {
@@ -210,6 +243,168 @@ export class BrushState {
                 ];
                 break;
         }
+        // Hold the opposite (undragged) edge fixed while enforcing the extent limits.
+        switch (edge) {
+            case 'left':
+                this._applyConstraints({ x: start.x[1] });
+                break;
+            case 'right':
+                this._applyConstraints({ x: start.x[0] });
+                break;
+            case 'top':
+                this._applyConstraints({ y: start.y[0] });
+                break;
+            case 'bottom':
+                this._applyConstraints({ y: start.y[1] });
+                break;
+        }
+    }
+    /** Which endpoint (if any) equals `anchorValue` and should be held fixed while clamping extent. */
+    _anchorIndex(values, anchorValue) {
+        if (anchorValue == null)
+            return null;
+        const a = anchorValue?.valueOf?.() ?? anchorValue;
+        if ((values[0]?.valueOf?.() ?? values[0]) === a)
+            return 0;
+        if ((values[1]?.valueOf?.() ?? values[1]) === a)
+            return 1;
+        return null;
+    }
+    /**
+     * Clamp one axis' selection to `min/maxExtent`, holding the endpoint at `anchorValue` fixed
+     * (the edge the user isn't dragging). A `null` anchor shrinks/grows symmetrically about the
+     * center. Extent is measured in domain units (continuous) or category count (band/point).
+     */
+    _clampExtent(axis, values, anchorValue) {
+        const minExt = this.minExtent?.[axis];
+        const maxExt = this.maxExtent?.[axis];
+        if ((minExt == null && maxExt == null) || values[0] == null || values[1] == null) {
+            return values;
+        }
+        const domain = (axis === 'x' ? this.ctx?.baseXScale : this.ctx?.baseYScale)?.domain() ?? [];
+        const domainMin = axis === 'x' ? this.xDomainMin : this.yDomainMin;
+        const domainMax = axis === 'x' ? this.xDomainMax : this.yDomainMax;
+        const anchor = this._anchorIndex(values, anchorValue);
+        if (isCategoricalDomain(domain)) {
+            let startIdx = domain.indexOf(values[0]);
+            let endIdx = domain.indexOf(values[1]);
+            if (startIdx === -1 || endIdx === -1)
+                return values;
+            if (startIdx > endIdx)
+                [startIdx, endIdx] = [endIdx, startIdx];
+            const count = endIdx - startIdx + 1;
+            if (maxExt != null && count > maxExt) {
+                if (anchor === 1)
+                    startIdx = endIdx - (maxExt - 1);
+                else if (anchor === 0)
+                    endIdx = startIdx + (maxExt - 1);
+                else {
+                    const trim = count - maxExt;
+                    startIdx += Math.ceil(trim / 2);
+                    endIdx -= Math.floor(trim / 2);
+                }
+            }
+            else if (minExt != null && count < minExt) {
+                if (anchor === 1)
+                    startIdx = endIdx - (minExt - 1);
+                else if (anchor === 0)
+                    endIdx = startIdx + (minExt - 1);
+                else {
+                    const grow = minExt - count;
+                    startIdx -= Math.floor(grow / 2);
+                    endIdx += Math.ceil(grow / 2);
+                }
+            }
+            // Shift back inside [0, lastIdx] if growth pushed past an edge.
+            const lastIdx = domain.length - 1;
+            if (startIdx < 0) {
+                endIdx += -startIdx;
+                startIdx = 0;
+            }
+            if (endIdx > lastIdx) {
+                startIdx -= endIdx - lastIdx;
+                endIdx = lastIdx;
+            }
+            startIdx = Math.max(0, startIdx);
+            endIdx = Math.min(lastIdx, endIdx);
+            return [domain[startIdx], domain[endIdx]];
+        }
+        // Continuous scale — measure width as a numeric/Date difference.
+        let lo = values[0];
+        let hi = values[1];
+        let width = +hi - +lo;
+        if (maxExt != null && width > maxExt) {
+            if (anchor === 1)
+                lo = add(hi, -maxExt);
+            else if (anchor === 0)
+                hi = add(lo, maxExt);
+            else {
+                const trim = (width - maxExt) / 2;
+                lo = add(lo, trim);
+                hi = add(hi, -trim);
+            }
+        }
+        else if (minExt != null && width < minExt) {
+            if (anchor === 1)
+                lo = add(hi, -minExt);
+            else if (anchor === 0)
+                hi = add(lo, minExt);
+            else {
+                const grow = (minExt - width) / 2;
+                lo = add(lo, -grow);
+                hi = add(hi, grow);
+            }
+            // Growth can overrun the domain — shift the window back inside, then hard-clamp.
+            if (domainMin != null && +lo < +domainMin) {
+                hi = add(hi, +domainMin - +lo);
+                lo = domainMin;
+            }
+            if (domainMax != null && +hi > +domainMax) {
+                lo = add(lo, +domainMax - +hi);
+                hi = domainMax;
+            }
+            lo = clamp(lo, domainMin, domainMax);
+            hi = clamp(hi, domainMin, domainMax);
+        }
+        return [lo, hi];
+    }
+    /** Clamp both endpoints of one axis to the domain extent. */
+    _clampToDomain(axis, values) {
+        if (values[0] == null || values[1] == null)
+            return values;
+        const domain = (axis === 'x' ? this.ctx?.baseXScale : this.ctx?.baseYScale)?.domain() ?? [];
+        const domainMin = axis === 'x' ? this.xDomainMin : this.yDomainMin;
+        const domainMax = axis === 'x' ? this.xDomainMax : this.yDomainMax;
+        if (isCategoricalDomain(domain)) {
+            return [
+                clampByIndex(values[0], domainMin, domainMax, domain),
+                clampByIndex(values[1], domainMin, domainMax, domain),
+            ];
+        }
+        return [clamp(values[0], domainMin, domainMax), clamp(values[1], domainMin, domainMax)];
+    }
+    /**
+     * Apply extent limits (for each axis whose anchor is provided), then the custom `constrain`,
+     * then re-clamp to the domain (unless `constrainToDomain` is disabled). `anchor.x`/`anchor.y`
+     * is the domain value to hold fixed; `null` = symmetric. Mirrors `TransformState._applyConstraints`.
+     */
+    _applyConstraints(anchor) {
+        if ('x' in anchor && this.x[0] != null && this.x[1] != null) {
+            this.x = this._clampExtent('x', [this.x[0], this.x[1]], anchor.x);
+        }
+        if ('y' in anchor && this.y[0] != null && this.y[1] != null) {
+            this.y = this._clampExtent('y', [this.y[0], this.y[1]], anchor.y);
+        }
+        if (this.constrain) {
+            const constrained = this.constrain({ x: this.x, y: this.y });
+            this.x = constrained.x;
+            this.y = constrained.y;
+        }
+        // `constrain` output isn't bounded — keep the selection within the domain by default.
+        if (this.constrainToDomain) {
+            this.x = this._clampToDomain('x', this.x);
+            this.y = this._clampToDomain('y', this.y);
+        }
     }
     /**
      * Sync external domain values into brush state.

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

@@ -388,6 +388,124 @@ describe('BrushState', () => {
             expect(brush.x).toEqual(['D', 'E']);
         });
     });
+    describe('constraints (min/maxExtent + constrain)', () => {
+        const categories = ['A', 'B', 'C', 'D', 'E'];
+        function createBandCtx() {
+            return {
+                xScale: Object.assign((v) => categories.indexOf(v) * 100, { bandwidth: () => 80 }),
+                yScale: (v) => v,
+                baseXScale: { domain: () => categories },
+                baseYScale: { domain: () => [0, 100] },
+                width: 500,
+                height: 300,
+            };
+        }
+        it('leaves the selection untouched when no constraints are set', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.setRange({ x: 10, y: 0 }, { x: 90, y: 0 });
+            expect(brush.x).toEqual([10, 90]);
+        });
+        it('caps a fresh draw to maxExtent, anchored to the drag origin', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', maxExtent: { x: 30 } });
+            brush.setRange({ x: 10, y: 0 }, { x: 90, y: 0 });
+            expect(brush.x).toEqual([10, 40]);
+        });
+        it('caps a right-edge resize to maxExtent, holding the left edge fixed', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', maxExtent: { x: 30 }, x: [20, 40] });
+            brush.adjustEdge('right', { x: [20, 40], y: [0, 100] }, { x: 90, y: 50 });
+            expect(brush.x).toEqual([20, 50]);
+        });
+        it('caps a left-edge resize to maxExtent, holding the right edge fixed', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', maxExtent: { x: 30 }, x: [50, 80] });
+            brush.adjustEdge('left', { x: [50, 80], y: [0, 100] }, { x: 10, y: 50 });
+            expect(brush.x).toEqual([50, 80]);
+        });
+        it('grows a too-small resize to minExtent, holding the dragged-from edge fixed', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', minExtent: { x: 20 }, x: [20, 60] });
+            brush.adjustEdge('right', { x: [20, 60], y: [0, 100] }, { x: 25, y: 50 });
+            expect(brush.x).toEqual([20, 40]);
+        });
+        it('shifts a minExtent selection back inside the domain when growth overruns the edge', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', minExtent: { x: 30 }, x: [90, 95] });
+            brush.adjustEdge('right', { x: [90, 95], y: [0, 100] }, { x: 96, y: 50 });
+            expect(brush.x).toEqual([70, 100]);
+        });
+        it('does not shrink the window while panning (extent is a no-op for moveRange)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', maxExtent: { x: 30 }, x: [20, 40] });
+            brush.moveRange({ x: [20, 40], y: [0, 100], value: { x: 30, y: 50 } }, { x: 50, y: 50 });
+            expect(brush.x).toEqual([40, 60]);
+        });
+        it('caps selectAll to maxExtent from the domain start', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', maxExtent: { x: 30 } });
+            brush.selectAll();
+            expect(brush.x).toEqual([0, 30]);
+        });
+        it('applies a custom constrain function (e.g. snapping)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const snap10 = (sel) => ({
+                x: [Math.round(sel.x[0] / 10) * 10, Math.round(sel.x[1] / 10) * 10],
+                y: sel.y,
+            });
+            const brush = new BrushState(ctx, { axis: 'x', constrain: snap10 });
+            brush.setRange({ x: 12, y: 0 }, { x: 47, y: 0 });
+            expect(brush.x).toEqual([10, 50]);
+        });
+        it('runs constrain after maxExtent', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const snap10 = (sel) => ({
+                x: [Math.round(sel.x[0] / 10) * 10, Math.round(sel.x[1] / 10) * 10],
+                y: sel.y,
+            });
+            const brush = new BrushState(ctx, { axis: 'x', maxExtent: { x: 30 }, constrain: snap10 });
+            brush.setRange({ x: 11, y: 0 }, { x: 88, y: 0 });
+            // capped to [11, 41] by maxExtent, then snapped to [10, 40]
+            expect(brush.x).toEqual([10, 40]);
+        });
+        it('clamps constrain output back into the domain by default (constrainToDomain)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            // constrain pushes the end past the domain max
+            const overshoot = (sel) => ({ x: [sel.x[0], 130], y: sel.y });
+            const brush = new BrushState(ctx, { axis: 'x', constrain: overshoot });
+            brush.setRange({ x: 20, y: 0 }, { x: 60, y: 0 });
+            expect(brush.x).toEqual([20, 100]);
+        });
+        it('allows out-of-domain constrain output when constrainToDomain is false', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const overshoot = (sel) => ({ x: [sel.x[0], 130], y: sel.y });
+            const brush = new BrushState(ctx, {
+                axis: 'x',
+                constrain: overshoot,
+                constrainToDomain: false,
+            });
+            brush.setRange({ x: 20, y: 0 }, { x: 60, y: 0 });
+            expect(brush.x).toEqual([20, 130]);
+        });
+        it('measures maxExtent as a category count for band scales', () => {
+            const brush = new BrushState(createBandCtx(), { axis: 'x', maxExtent: { x: 2 } });
+            brush.setRange({ x: 'A', y: 0 }, { x: 'E', y: 0 });
+            expect(brush.x).toEqual(['A', 'B']);
+        });
+        it('constrains a Date-domain time brush to a max window', () => {
+            const start = new Date('2024-01-01');
+            const end = new Date('2025-01-01');
+            const ctx = createMockCtx();
+            ctx.baseXScale = { domain: () => [start, end] };
+            const day = 24 * 60 * 60 * 1000;
+            const brush = new BrushState(ctx, { axis: 'x', maxExtent: { x: 30 * day } });
+            const origin = new Date('2024-06-01');
+            brush.setRange({ x: origin, y: 0 }, { x: new Date('2024-10-01'), y: 0 });
+            expect(brush.x[0]).toEqual(origin);
+            expect(brush.x[1].getTime() - origin.getTime()).toBe(30 * day);
+        });
+    });
 });
 describe('expandBandBrushDomain', () => {
     const baseDomain = ['A', 'B', 'C', 'D', 'E'];

package/dist/utils/debug.js

@@ -52,7 +52,8 @@ function colorizeArray(arr) {
 function printScale(s, scale, acc) {
     const scaleName = findScaleName(scale);
     console.log(`${indent}${s}:`);
-    console.log(`${indent}${indent}Accessor: "${acc.toString()}"`);
+    if (acc != null)
+        console.log(`${indent}${indent}Accessor: "${acc.toString()}"`);
     console.log(`${indent}${indent}Type: ${scaleName}`);
     printValues(scale, 'domain');
     printValues(scale, 'range', ' ');

package/dist/utils/stack.js

@@ -1,5 +1,5 @@
 import { flatGroup, group, max, rollup, sum } from 'd3-array';
-import { stack } from 'd3-shape';
+import { stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
 import { pivotWider } from './pivot.js';
 export function groupStackData(data, options) {
     const dataByKey = group(data, (d) => d[options.xKey]);
@@ -13,12 +13,11 @@ export function groupStackData(data, options) {
             const stackKeys = [
                 ...new Set(groupData.map((d) => d[options.stackBy ?? ''])),
             ];
-            // @ts-expect-error
             const stackData = stack()
                 .keys(stackKeys)
                 .value((d, key) => d[key] ?? 0)
-                .order(options.order)
-                .offset(options.offset)(pivotData);
+                .order(options.order ?? stackOrderNone)
+                .offset(options.offset ?? stackOffsetNone)(pivotData);
             return stackData.flatMap((series) => {
                 return series.flatMap((s) => {
                     const keys = {
@@ -46,12 +45,11 @@ export function groupStackData(data, options) {
         const pivotData = pivotWider(data, options.xKey, options.stackBy, 'value');
         // @ts-expect-error
         const stackKeys = [...new Set(data.map((d) => d[options.stackBy ?? '']))];
-        // @ts-expect-error
         const stackData = stack()
             .keys(stackKeys)
             .value((d, key) => d[key] ?? 0)
-            .order(options.order)
-            .offset(options.offset)(pivotData);
+            .order(options.order ?? stackOrderNone)
+            .offset(options.offset ?? stackOffsetNone)(pivotData);
         const result = stackData.flatMap((series) => {
             return series.flatMap((s) => {
                 const keys = {

package/package.json

@@ -5,14 +5,14 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.64",
+  "version": "2.0.0-next.66",
   "devDependencies": {
-    "@changesets/cli": "^2.30.0",
+    "@changesets/cli": "^2.31.0",
     "@napi-rs/canvas": "^0.1.97",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.57.1",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/kit": "^2.62.0",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/d3": "^7.4.3",
     "@types/d3-array": "^3.2.2",
@@ -33,20 +33,20 @@
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/d3-shape": "^3.1.8",
     "@types/d3-time": "^3.0.4",
-    "@vitest/browser": "^4.1.4",
-    "@vitest/browser-playwright": "^4.1.4",
-    "@vitest/ui": "^4.1.4",
-    "playwright": "^1.59.1",
-    "prettier": "^3.8.2",
-    "prettier-plugin-svelte": "^3.5.1",
-    "svelte": "5.55.3",
-    "svelte-check": "^4.4.6",
-    "svelte2tsx": "^0.7.53",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/ui": "^4.1.8",
+    "playwright": "^1.60.0",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^4.1.0",
+    "svelte": "5.56.1",
+    "svelte-check": "^4.5.0",
+    "svelte2tsx": "^0.7.56",
     "tslib": "^2.8.1",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.4",
-    "vitest-browser-svelte": "^2.1.0"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8",
+    "vitest-browser-svelte": "^2.1.1"
   },
   "type": "module",
   "sideEffects": [