From fc51d161b0e41fef7399bcad02fd6de94f428b30 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 1 Jul 2026 12:03:58 -0400
Subject: [PATCH 1/2] feat(Brush): Add constraints to `BrushContext` /
 `BrushState`, similar to `TransformContext`'s
 `scaleExtent`/`translateExtent`/`constrain`.

---
 .changeset/brush-selection-constraints.md     |   5 +
 docs/src/content/guides/brush.md              |  43 ++++
 docs/src/examples/catalog/BrushContext.json   |  88 +++++++-
 .../components/BrushContext/max-window.svelte |  75 +++++++
 .../BrushContext/min-max-extent.svelte        |  49 ++++
 .../BrushContext/snap-to-month.svelte         |  56 +++++
 .../src/lib/components/BrushContext.svelte    |  57 ++++-
 .../src/lib/states/brush.svelte.test.ts       | 135 +++++++++++
 .../layerchart/src/lib/states/brush.svelte.ts | 210 +++++++++++++++++-
 9 files changed, 714 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/brush-selection-constraints.md
 create mode 100644 docs/src/examples/components/BrushContext/max-window.svelte
 create mode 100644 docs/src/examples/components/BrushContext/min-max-extent.svelte
 create mode 100644 docs/src/examples/components/BrushContext/snap-to-month.svelte

diff --git a/.changeset/brush-selection-constraints.md b/.changeset/brush-selection-constraints.md
new file mode 100644
index 000000000..c5e607eef
--- /dev/null
+++ b/.changeset/brush-selection-constraints.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Brush): Add constraints to `BrushContext` / `BrushState`, similar to `TransformContext`'s `scaleExtent`/`translateExtent`/`constrain`.
diff --git a/docs/src/content/guides/brush.md b/docs/src/content/guides/brush.md
index 97d0117d0..05ba6e0f8 100644
--- a/docs/src/content/guides/brush.md
+++ b/docs/src/content/guides/brush.md
@@ -169,6 +169,49 @@ Size in pixels of the invisible drag handles on the edges of the selection. Defa
 - **Double-click on the selection** — resets the brush (`reset()`)
 - **Double-click on a handle** — extends that edge to the domain boundary
 
+## Constraints
+
+Limit the selection size with `minExtent` / `maxExtent` (`{ x?, y? }`). For continuous scales the value is in domain units — e.g. milliseconds for a time scale — and for band/point scales it's the number of categories. The edge you aren't dragging is held fixed, so creating or resizing past the limit pulls the moving edge back rather than snapping the whole selection.
+
+A common use is a "focus + context" view where the detail chart should never show more than a fixed window, no matter how much data is loaded — here the brush is capped at 90 days:
+
+```svelte
+<!-- Never show more than 90 days at once -->
+<Chart {data} brush={{ maxExtent: { x: 90 * 24 * 60 * 60 * 1000 } }}>
+```
+
+:example{ component="BrushContext" name="max-window" }
+
+`minExtent` and `maxExtent` can be combined to keep the selection within a range:
+
+```svelte
+<Chart {data} brush={{ minExtent: { x: 30 * DAY }, maxExtent: { x: 180 * DAY } }}>
+```
+
+:example{ component="BrushContext" name="min-max-extent" }
+
+For anything the extents can't express, pass a `constrain` function. It receives the candidate `{ x, y }` selection and returns a corrected one, and runs after `min/maxExtent` on every update (create, resize, move, and programmatic changes) — for example, snapping edges to month boundaries:
+
+```svelte
+<Chart
+	{data}
+	brush={{
+		constrain: ({ x, y }) => ({
+			x: [timeMonth.floor(x[0]), timeMonth.ceil(x[1])],
+			y
+		})
+	}}
+/>
+```
+
+::note
+Snapping can round an edge _past_ the first/last data point, but by default the selection is kept within the domain (`constrainToDomain`, on by default), so `constrain` output is clamped back to the edge automatically. Set `constrainToDomain: false` to opt out and allow the selection to extend beyond the domain.
+::
+
+:example{ component="BrushContext" name="snap-to-month" }
+
+This mirrors the `scaleExtent` / `translateExtent` / `constrain` options on [transform](/docs/guides/transform). Because the limits are enforced inside the brush state, the selection never momentarily holds an out-of-range value.
+
 ## Styling
 
 Customize the brush appearance with the `classes` prop:
diff --git a/docs/src/examples/catalog/BrushContext.json b/docs/src/examples/catalog/BrushContext.json
index cb8a6a2d1..39e0e5dc9 100644
--- a/docs/src/examples/catalog/BrushContext.json
+++ b/docs/src/examples/catalog/BrushContext.json
@@ -215,6 +215,65 @@
         }
       ]
     },
+    {
+      "name": "max-window",
+      "title": "max window",
+      "path": "/docs/components/BrushContext/max-window",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 38,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 47,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Axis",
+          "lineNumber": 48,
+          "line": "<Axis placement=\"left\" grid rule />"
+        },
+        {
+          "component": "ChartClipPath",
+          "lineNumber": 51,
+          "line": "<ChartClipPath>"
+        },
+        {
+          "component": "Area",
+          "lineNumber": 52,
+          "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
+        }
+      ]
+    },
+    {
+      "name": "min-max-extent",
+      "title": "min max extent",
+      "path": "/docs/components/BrushContext/min-max-extent",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 30,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 44,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Axis",
+          "lineNumber": 45,
+          "line": "<Axis placement=\"left\" grid rule />"
+        },
+        {
+          "component": "Area",
+          "lineNumber": 47,
+          "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
+        }
+      ]
+    },
     {
       "name": "minimap",
       "title": "minimap",
@@ -439,6 +498,33 @@
         }
       ]
     },
+    {
+      "name": "snap-to-month",
+      "title": "snap to month",
+      "path": "/docs/components/BrushContext/snap-to-month",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 30,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 51,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Axis",
+          "lineNumber": 52,
+          "line": "<Axis placement=\"left\" grid rule />"
+        },
+        {
+          "component": "Area",
+          "lineNumber": 54,
+          "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
+        }
+      ]
+    },
     {
       "name": "striped-background",
       "title": "striped background",
@@ -552,5 +638,5 @@
     }
   ],
   "usage": [],
-  "updatedAt": "2026-04-30T15:36:23.111Z"
+  "updatedAt": "2026-07-01T14:36:52.362Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/components/BrushContext/max-window.svelte b/docs/src/examples/components/BrushContext/max-window.svelte
new file mode 100644
index 000000000..e5cd0a530
--- /dev/null
+++ b/docs/src/examples/components/BrushContext/max-window.svelte
@@ -0,0 +1,75 @@
+<script module lang="ts">
+	import { getAppleStock } from '$lib/data.remote';
+	const data = await getAppleStock();
+</script>
+
+<script lang="ts">
+	import {
+		Area,
+		Axis,
+		Chart,
+		ChartClipPath,
+		Layer,
+		defaultChartPadding,
+		type DomainType
+	} from 'layerchart';
+
+	export { data };
+
+	const DAY = 24 * 60 * 60 * 1000;
+	const maxDays = 90;
+
+	// Live brush selection — also drives the detail chart's visible range
+	let brushX = $state<DomainType>([null, null]);
+
+	const selectedDays = $derived(
+		brushX?.[0] != null && brushX?.[1] != null ? Math.round((+brushX[1] - +brushX[0]) / DAY) : null
+	);
+</script>
+
+<div class="mb-2 text-sm">
+	Window:
+	<span class="font-semibold">{selectedDays != null ? `${selectedDays} days` : 'full range'}</span>
+	<span class="text-surface-content/50">— drag the overview to brush; capped at {maxDays} days</span
+	>
+</div>
+
+<!-- Detail — zooms to the (capped) brush selection -->
+<Chart
+	{data}
+	x="date"
+	y="value"
+	xDomain={brushX}
+	yDomain={[0, null]}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
+	height={220}
+>
+	<Layer>
+		<Axis placement="left" grid rule />
+		<Axis placement="bottom" rule />
+		<!-- Clip the area/line to the plot so the zoomed range doesn't overflow the axes -->
+		<ChartClipPath>
+			<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+		</ChartClipPath>
+	</Layer>
+</Chart>
+
+<!-- Overview + brush (never wider than `maxDays`) -->
+<Chart
+	{data}
+	x="date"
+	y="value"
+	brush={{
+		maxExtent: { x: maxDays * DAY },
+		x: brushX as any,
+		onChange: (e) => (brushX = e.brush.x)
+	}}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
+	height={60}
+	class="mt-2"
+>
+	<Layer>
+		<Axis placement="bottom" rule />
+		<Area class="fill-surface-content/10" />
+	</Layer>
+</Chart>
diff --git a/docs/src/examples/components/BrushContext/min-max-extent.svelte b/docs/src/examples/components/BrushContext/min-max-extent.svelte
new file mode 100644
index 000000000..b69941b0a
--- /dev/null
+++ b/docs/src/examples/components/BrushContext/min-max-extent.svelte
@@ -0,0 +1,49 @@
+<script module lang="ts">
+	import { getAppleStock } from '$lib/data.remote';
+	const data = await getAppleStock();
+</script>
+
+<script lang="ts">
+	import { Area, Axis, Chart, Layer, defaultChartPadding, type DomainType } from 'layerchart';
+
+	export { data };
+
+	const DAY = 24 * 60 * 60 * 1000;
+	const minDays = 30;
+	const maxDays = 180;
+
+	let brushX = $state<DomainType>([null, null]);
+
+	const selectedDays = $derived(
+		brushX?.[0] != null && brushX?.[1] != null ? Math.round((+brushX[1] - +brushX[0]) / DAY) : null
+	);
+</script>
+
+<div class="mb-2 text-sm">
+	Selection:
+	<span class="font-semibold">{selectedDays != null ? `${selectedDays} days` : '—'}</span>
+	<span class="text-surface-content/50">
+		— try to drag smaller than {minDays} or larger than {maxDays} days
+	</span>
+</div>
+
+<Chart
+	{data}
+	x="date"
+	y="value"
+	yDomain={[0, null]}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
+	brush={{
+		minExtent: { x: minDays * DAY },
+		maxExtent: { x: maxDays * DAY },
+		x: brushX as any,
+		onChange: (e) => (brushX = e.brush.x)
+	}}
+	height={260}
+>
+	<Layer>
+		<Axis placement="left" grid rule />
+		<Axis placement="bottom" rule />
+		<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+	</Layer>
+</Chart>
diff --git a/docs/src/examples/components/BrushContext/snap-to-month.svelte b/docs/src/examples/components/BrushContext/snap-to-month.svelte
new file mode 100644
index 000000000..b275c1864
--- /dev/null
+++ b/docs/src/examples/components/BrushContext/snap-to-month.svelte
@@ -0,0 +1,56 @@
+<script module lang="ts">
+	import { getAppleStock } from '$lib/data.remote';
+	const data = await getAppleStock();
+</script>
+
+<script lang="ts">
+	import { Area, Axis, Chart, Layer, defaultChartPadding, type DomainType } from 'layerchart';
+	import { timeMonth } from 'd3-time';
+
+	export { data };
+
+	let brushX = $state<DomainType>([null, null]);
+
+	function monthLabel(value: number | string | Date | null | undefined) {
+		return value instanceof Date
+			? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short' })
+			: '';
+	}
+</script>
+
+<div class="mb-2 text-sm">
+	{#if brushX?.[0] != null && brushX?.[1] != null}
+		Snapped:
+		<span class="font-semibold">{monthLabel(brushX[0])} – {monthLabel(brushX[1])}</span>
+	{:else}
+		<span class="text-surface-content/50">Drag to brush — edges snap to whole months</span>
+	{/if}
+</div>
+
+<Chart
+	{data}
+	x="date"
+	y="value"
+	yDomain={[0, null]}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
+	brush={{
+		// Snap edges to whole months. `timeMonth.ceil` can round past the last data point, but
+		// `constrainToDomain` (on by default) clamps the result back inside the chart.
+		constrain: ({ x, y }) => ({
+			x:
+				x[0] != null && x[1] != null
+					? [timeMonth.floor(x[0] as Date), timeMonth.ceil(x[1] as Date)]
+					: x,
+			y
+		}),
+		x: brushX as any,
+		onChange: (e) => (brushX = e.brush.x)
+	}}
+	height={260}
+>
+	<Layer>
+		<Axis placement="left" grid rule />
+		<Axis placement="bottom" rule />
+		<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+	</Layer>
+</Chart>
diff --git a/packages/layerchart/src/lib/components/BrushContext.svelte b/packages/layerchart/src/lib/components/BrushContext.svelte
index 580a459fb..023fb638f 100644
--- a/packages/layerchart/src/lib/components/BrushContext.svelte
+++ b/packages/layerchart/src/lib/components/BrushContext.svelte
@@ -1,7 +1,12 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
 
-  import { BrushState, type BrushDomainType } from '$lib/states/brush.svelte.js';
+  import {
+    BrushState,
+    type BrushDomainType,
+    type BrushExtent,
+    type BrushSelection,
+  } from '$lib/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
 
diff --git a/packages/layerchart/src/lib/states/brush.svelte.test.ts b/packages/layerchart/src/lib/states/brush.svelte.test.ts
index 0fb67a0a7..8bbcc2c25 100644
--- a/packages/layerchart/src/lib/states/brush.svelte.test.ts
+++ b/packages/layerchart/src/lib/states/brush.svelte.test.ts
@@ -531,6 +531,141 @@ describe('BrushState', () => {
       expect(brush.x).toEqual(['D', 'E']);
     });
   });
+
+  describe('constraints (min/maxExtent + constrain)', () => {
+    const categories = ['A', 'B', 'C', 'D', 'E'];
+    function createBandCtx(): BrushChartContext {
+      return {
+        xScale: Object.assign((v: any) => categories.indexOf(v) * 100, { bandwidth: () => 80 }),
+        yScale: (v: any) => 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: any[]; y: any[] }) => ({
+        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: any[]; y: any[] }) => ({
+        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: any[]; y: any[] }) => ({ 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: any[]; y: any[] }) => ({ 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] as Date).getTime() - origin.getTime()).toBe(30 * day);
+    });
+  });
 });
 
 describe('expandBandBrushDomain', () => {
diff --git a/packages/layerchart/src/lib/states/brush.svelte.ts b/packages/layerchart/src/lib/states/brush.svelte.ts
index 90c08a137..a22aa85d8 100644
--- a/packages/layerchart/src/lib/states/brush.svelte.ts
+++ b/packages/layerchart/src/lib/states/brush.svelte.ts
@@ -29,6 +29,12 @@ export type BrushRange = {
   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.
@@ -77,6 +83,32 @@ export class BrushState {
   axis = $state<'x' | 'y' | 'both'>('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<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 = $state<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 = $state<((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 = $state<boolean>(true);
+
   constructor(
     ctx: typeof this.ctx,
     options?: {
@@ -84,6 +116,10 @@ export class BrushState {
       y?: BrushDomainType;
       active?: boolean;
       axis?: 'x' | 'y' | 'both';
+      minExtent?: BrushExtent;
+      maxExtent?: BrushExtent;
+      constrain?: (selection: BrushSelection) => BrushSelection;
+      constrainToDomain?: boolean;
     }
   ) {
     this.ctx = ctx;
@@ -92,6 +128,10 @@ export class BrushState {
     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 */
@@ -136,11 +176,12 @@ export class BrushState {
     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()`. */
@@ -152,6 +193,9 @@ export class BrushState {
       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;
@@ -207,6 +251,9 @@ 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 */
@@ -254,6 +301,9 @@ export class BrushState {
       );
       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. */
@@ -306,6 +356,164 @@ 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. */
+  private _anchorIndex(values: [any, any], anchorValue: any): 0 | 1 | null {
+    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).
+   */
+  private _clampExtent(axis: 'x' | 'y', values: [any, any], anchorValue: any): [any, any] {
+    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. */
+  private _clampToDomain(axis: 'x' | 'y', values: BrushDomainType): BrushDomainType {
+    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`.
+   */
+  private _applyConstraints(anchor: { x?: any; y?: any }) {
+    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);
+    }
   }
 
   /**

From ae0f88daa7b809b1bba1da331ed45cfe5c1f322d Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 1 Jul 2026 12:04:32 -0400
Subject: [PATCH 2/2] fix(Chart): Disable text selection to prevent selection
 while dragging

---
 .changeset/chart-disable-text-selection.md        |  5 +++++
 docs/src/content/components/Chart.md              | 15 +++++++++++++++
 .../lib/components/BrushContext.svelte.test.ts    |  2 +-
 .../src/lib/components/Chart/Chart.base.svelte    | 15 +++++++++++++++
 .../lib/components/Chart/ChartCore.svelte.test.ts | 12 ++++++++++++
 5 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/chart-disable-text-selection.md

diff --git a/.changeset/chart-disable-text-selection.md b/.changeset/chart-disable-text-selection.md
new file mode 100644
index 000000000..600cec6c0
--- /dev/null
+++ b/.changeset/chart-disable-text-selection.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Chart): Disable text selection to prevent selection while dragging
diff --git a/docs/src/content/components/Chart.md b/docs/src/content/components/Chart.md
index 931313c61..dae7faedd 100644
--- a/docs/src/content/components/Chart.md
+++ b/docs/src/content/components/Chart.md
@@ -14,3 +14,18 @@ order: 1
 ::note
 Features: Adds support for x and y baselines (always show 0, etc)
 ::
+
+## Text selection
+
+Charts are treated as interactive widgets: `user-select: none` is applied to the root container (`.lc-root-container`) so dragging to brush, pan, or zoom never selects axis labels or surrounding page text. Since `user-select` inherits, this covers the whole chart.
+
+To re-enable selection where you need it, set the `--lc-user-select` custom property to `text` — on the chart, a wrapping element, or a specific subtree:
+
+```svelte
+<!-- Re-enable for a chart (or any descendants under a wrapper) -->
+<div style="--lc-user-select: text">
+	<Chart {data} ... />
+</div>
+```
+
+An individual selectable region can also just set `user-select: text` on itself (e.g. Tailwind's `select-text`), which overrides the inherited value.
diff --git a/packages/layerchart/src/lib/components/BrushContext.svelte.test.ts b/packages/layerchart/src/lib/components/BrushContext.svelte.test.ts
index fa95861e8..78bb432e0 100644
--- a/packages/layerchart/src/lib/components/BrushContext.svelte.test.ts
+++ b/packages/layerchart/src/lib/components/BrushContext.svelte.test.ts
@@ -2,7 +2,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 = [
diff --git a/packages/layerchart/src/lib/components/Chart/Chart.base.svelte b/packages/layerchart/src/lib/components/Chart/Chart.base.svelte
index f10fe8da1..a9c11090c 100644
--- a/packages/layerchart/src/lib/components/Chart/Chart.base.svelte
+++ b/packages/layerchart/src/lib/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>
diff --git a/packages/layerchart/src/lib/components/Chart/ChartCore.svelte.test.ts b/packages/layerchart/src/lib/components/Chart/ChartCore.svelte.test.ts
index 42b2dba1a..f103bff25 100644
--- a/packages/layerchart/src/lib/components/Chart/ChartCore.svelte.test.ts
+++ b/packages/layerchart/src/lib/components/Chart/ChartCore.svelte.test.ts
@@ -62,4 +62,16 @@ describe('ChartCore', () => {
 
     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') as HTMLElement;
+    expect(getComputedStyle(root).userSelect).toBe('none');
+  });
 });