diff --git a/.changeset/five-phones-tease.md b/.changeset/five-phones-tease.md
new file mode 100644
index 000000000..d09476a1e
--- /dev/null
+++ b/.changeset/five-phones-tease.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+[Frame] Expose `rectEl` and forward `mousedown`, `touchstart`, and `dblclick` events
diff --git a/.changeset/itchy-cameras-guess.md b/.changeset/itchy-cameras-guess.md
new file mode 100644
index 000000000..1859769ec
--- /dev/null
+++ b/.changeset/itchy-cameras-guess.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+[Brush] Forward `mousedown` and `touchstart` events
diff --git a/.changeset/pretty-vans-exist.md b/.changeset/pretty-vans-exist.md
new file mode 100644
index 000000000..0a69ef836
--- /dev/null
+++ b/.changeset/pretty-vans-exist.md
@@ -0,0 +1,5 @@
+---
+"layerchart": patch
+---
+
+[Group] Forward `dblclick` event
diff --git a/.changeset/purple-tools-eat.md b/.changeset/purple-tools-eat.md
new file mode 100644
index 000000000..197227d9b
--- /dev/null
+++ b/.changeset/purple-tools-eat.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+[ChartClipPath] Remove padding by default (opt-in with `full`)
diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
new file mode 100644
index 000000000..7793d0cae
--- /dev/null
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { createEventDispatcher, getContext } from 'svelte';
+  import { extent } from 'd3-array';
+
+  import { clamp, cls } from 'svelte-ux';
+  import Frame from './Frame.svelte';
+  import Group from './Group.svelte';
+  import { localPoint } from '$lib/utils/event.js';
+
+  const { xScale, xDomain: xDomainContext, width, height, padding } = getContext('LayerCake');
+
+  const dispatch = createEventDispatcher<{
+    change: { xDomain?: [any, any]; yDomain?: [any, any] };
+  }>();
+
+  // export let axis: 'x' | 'y' | 'both' = 'x';
+  export let handleWidth = 5;
+
+  export let xDomain: [number | null, number | null] = [null, null];
+
+  export let classes: {
+    root?: string;
+    range?: string;
+    handle?: string;
+  } = {};
+
+  let frameEl: SVGRectElement;
+
+  $: [xDomainMin, xDomainMax] = extent($xDomainContext);
+
+  function handler(
+    fn: (start: { xDomain: [number, number]; value: number }, value: number) => void
+  ) {
+    return (e: PointerEvent) => {
+      // let startTouch: Touch | null = null;
+      let clientX: number;
+
+      // if (e instanceof TouchEvent) {
+      //   if (e.touches.length !== 1) return;
+      //   startTouch = e.touches[0];
+      //   clientX = startTouch.clientX;
+      // } else {
+      clientX = e.clientX;
+      // }
+
+      const start = {
+        xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
+        value: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
+      };
+
+      const onMove = (e: PointerEvent) => {
+        // if (e instanceof TouchEvent) {
+        //   if (e instanceof TouchEvent && e.changedTouches.length !== 1) return;
+        //   const touch = e.changedTouches[0];
+        //   if (touch.identifier !== startTouch?.identifier) return;
+        //   fn(start, $xScale.invert(localPoint(frameEl, touch)?.x - $padding.left));
+        // } else {
+        fn(start, $xScale.invert(localPoint(frameEl, e)?.x - $padding.left));
+        // }
+      };
+
+      const onEnd = (e: PointerEvent) => {
+        // if (e instanceof TouchEvent) {
+        //   if (e.changedTouches.length !== 1) return;
+        //   if (e.changedTouches[0].identifier !== startTouch?.identifier) return;
+        // } else if (e.target === frameEl) {
+        if (e.target === frameEl) {
+          clear();
+        }
+
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onEnd);
+      };
+
+      window.addEventListener('pointermove', onMove);
+      window.addEventListener('pointerup', onEnd);
+    };
+  }
+
+  const reset = handler((start, value) => {
+    xDomain = [
+      clamp(Math.min(start.value, value), xDomainMin, xDomainMax),
+      clamp(Math.max(start.value, value), xDomainMin, xDomainMax),
+    ];
+  });
+
+  const adjustRange = handler((start, value) => {
+    const d = clamp(
+      value - start.value,
+      xDomainMin - start.xDomain[0],
+      xDomainMax - start.xDomain[1]
+    );
+    xDomain = [Number(start.xDomain[0]) + d, Number(start.xDomain[1]) + d];
+  });
+
+  const adjustMin = handler((start, value) => {
+    xDomain = [
+      clamp(value > start.xDomain[1] ? start.xDomain[1] : value, xDomainMin, xDomainMax),
+      clamp(value > start.xDomain[1] ? value : start.xDomain[1], xDomainMin, xDomainMax),
+    ];
+  });
+
+  const adjustMax = handler((start, value) => {
+    xDomain = [
+      clamp(value < start.xDomain[0] ? value : start.xDomain[0], xDomainMin, xDomainMax),
+      clamp(value < start.xDomain[0] ? start.xDomain[0] : value, xDomainMin, xDomainMax),
+    ];
+  });
+
+  function clear() {
+    xDomain = [null, null];
+  }
+
+  function selectAll() {
+    xDomain = [xDomainMin, xDomainMax];
+  }
+
+  let lastDomain: typeof xDomain = [null, null];
+  $: if (
+    ((xDomain[0] == null && xDomain[1] == null) || xDomain[0] !== xDomain[1]) &&
+    (lastDomain[0] !== xDomain[0] || lastDomain[1] !== xDomain[1])
+  ) {
+    lastDomain = xDomain;
+    dispatch('change', { xDomain });
+  }
+
+  $: left = $xScale(xDomain[0]);
+  $: right = $xScale(xDomain[1]);
+</script>
+
+<g class="Brush">
+  <Frame
+    class={cls('frame', 'fill-transparent')}
+    on:pointerdown={reset}
+    on:dblclick={() => selectAll()}
+    bind:rectEl={frameEl}
+  />
+
+  <Group class="range" x={left} on:pointerdown={adjustRange} on:dblclick={() => clear()}>
+    <rect
+      width={right - left}
+      height={$height}
+      class={cls('fill-surface-content/10 cursor-move select-none')}
+    />
+  </Group>
+
+  <Group class="handle min" x={left} on:pointerdown={adjustMin}>
+    <rect
+      width={handleWidth}
+      height={$height}
+      class={cls('fill-transparent cursor-ew-resize select-none')}
+      on:dblclick={() => (xDomain[0] = xDomainMin)}
+    />
+  </Group>
+
+  <Group class="handle max" x={right - handleWidth + 1} on:pointerdown={adjustMax}>
+    <rect
+      width={handleWidth}
+      height={$height}
+      class={cls('fill-transparent cursor-ew-resize select-none')}
+      on:dblclick={() => (xDomain[1] = xDomainMax)}
+    />
+  </Group>
+</g>
diff --git a/packages/layerchart/src/lib/components/ChartClipPath.svelte b/packages/layerchart/src/lib/components/ChartClipPath.svelte
index 319f3c0a6..670908fb8 100644
--- a/packages/layerchart/src/lib/components/ChartClipPath.svelte
+++ b/packages/layerchart/src/lib/components/ChartClipPath.svelte
@@ -5,15 +5,15 @@
 
   const { width, height, padding } = getContext('LayerCake');
 
-  /** Whether clipping should include chart padding (ex. axis) */
-  export let includePadding = false;
+  /** Include padding area (ex. axis) */
+  export let full = false;
 </script>
 
 <RectClipPath
-  x={includePadding ? -$padding.left : 0}
-  y={includePadding ? -$padding.top : 0}
-  width={$width + (includePadding ? $padding.left + $padding.right : 0)}
-  height={$height + (includePadding ? $padding.top + $padding.bottom : 0)}
+  x={full ? -$padding.left : 0}
+  y={full ? -$padding.top : 0}
+  width={$width + (full ? $padding.left + $padding.right : 0)}
+  height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
   {...$$restProps}
 >
diff --git a/packages/layerchart/src/lib/components/Frame.svelte b/packages/layerchart/src/lib/components/Frame.svelte
index 1be6c57ff..f1146fa9e 100644
--- a/packages/layerchart/src/lib/components/Frame.svelte
+++ b/packages/layerchart/src/lib/components/Frame.svelte
@@ -5,6 +5,9 @@
 
   /** Include padding area */
   export let full = false;
+
+  /** Access underlying `<rect>` element */
+  export let rectEl: SVGRectElement;
 </script>
 
 <rect
@@ -13,5 +16,8 @@
   width={$width + (full ? $padding.left + $padding.right : 0)}
   height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
+  on:pointerdown
+  on:dblclick
+  bind:this={rectEl}
   {...$$restProps}
 />
diff --git a/packages/layerchart/src/lib/components/index.ts b/packages/layerchart/src/lib/components/index.ts
index 8c930a3c3..5042f5034 100644
--- a/packages/layerchart/src/lib/components/index.ts
+++ b/packages/layerchart/src/lib/components/index.ts
@@ -8,6 +8,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
+export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';
diff --git a/packages/layerchart/src/lib/utils/genData.ts b/packages/layerchart/src/lib/utils/genData.ts
index 90705e7de..857a3cacb 100644
--- a/packages/layerchart/src/lib/utils/genData.ts
+++ b/packages/layerchart/src/lib/utils/genData.ts
@@ -1,4 +1,7 @@
 import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
+import { cumsum } from 'd3-array';
+import { randomNormal } from 'd3-random';
+
 import { degreesToRadians, radiansToDegrees } from './math.js';
 
 /**
@@ -19,6 +22,14 @@ export function getRandomInteger(min: number, max: number, includeMax = true) {
   return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
 }
 
+/**
+ * @see: https://observablehq.com/@d3/d3-cumsum
+ */
+export function randomWalk(options?: { count?: number }) {
+  const random = randomNormal();
+  return Array.from(cumsum({ length: options?.count ?? 100 }, random));
+}
+
 export function createSeries(options: {
   count?: number;
   min: number;
diff --git a/packages/layerchart/src/routes/_NavMenu.svelte b/packages/layerchart/src/routes/_NavMenu.svelte
index c95ea60c1..5ec180562 100644
--- a/packages/layerchart/src/routes/_NavMenu.svelte
+++ b/packages/layerchart/src/routes/_NavMenu.svelte
@@ -66,6 +66,7 @@
       'Threshold',
     ],
     Interactions: [
+      'Brush',
       'Highlight',
       'HitCanvas',
       'Tooltip',
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
new file mode 100644
index 000000000..984cb2415
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+  import { scaleOrdinal, scaleTime } from 'd3-scale';
+  import { PeriodType, State, cls, format } from 'svelte-ux';
+  import { subDays } from 'date-fns';
+
+  import Chart, { Svg } from '$lib/components/Chart.svelte';
+  import Preview from '$lib/docs/Preview.svelte';
+
+  import Area from '$lib/components/Area.svelte';
+  import Axis from '$lib/components/Axis.svelte';
+  import Brush from '$lib/components/Brush.svelte';
+  import ChartClipPath from '$lib/components/ChartClipPath.svelte';
+  import LinearGradient from '$lib/components/LinearGradient.svelte';
+  import Rule from '$lib/components/Rule.svelte';
+
+  import { randomWalk } from '$lib/utils/genData.js';
+
+  export let data;
+
+  const now = new Date();
+  let xDomain = [subDays(now, 100), subDays(now, 80)];
+
+  const seriesData = [
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+  ];
+
+  /*
+    TODO:
+    - Brush with Tooltip
+  */
+</script>
+
+<h1>Examples</h1>
+
+<h2>Clip data</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          {xDomain}
+          y="value"
+          yDomain={[0, null]}
+          yNice
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis placement="bottom" rule />
+            <ChartClipPath>
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              </LinearGradient>
+            </ChartClipPath>
+          </Svg>
+        </Chart>
+      </div>
+
+      <div class="h-[40px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          padding={{ left: 16 }}
+        >
+          <Svg>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+            <Brush
+              on:change={(e) => {
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
+<h2>Filter data</h2>
+
+<Preview {data}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock.filter(
+            (d) =>
+              (xDomain[0] == null || d.date >= xDomain[0]) &&
+              (xDomain[1] == null || d.date <= xDomain[1])
+          )}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          yDomain={[0, null]}
+          yNice
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule tweened={{ duration: 200 }} />
+            <Axis placement="bottom" rule />
+            <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+              <Area
+                line={{ class: 'stroke-2 stroke-primary' }}
+                fill={url}
+                tweened={{ duration: 200 }}
+              />
+            </LinearGradient>
+          </Svg>
+        </Chart>
+      </div>
+
+      <div class="h-[40px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          padding={{ left: 16 }}
+        >
+          <Svg>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+            <Brush
+              on:change={(e) => {
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+<h2>Sync brushes and bind to xDomain</h2>
+
+<Preview data={data.appleStock}>
+  {@const colorScale = scaleOrdinal([
+    'var(--color-success-500)',
+    'var(--color-info-500)',
+    'var(--color-warning-500)',
+    'var(--color-danger-500)',
+  ])}
+  <div class="grid grid-cols-2 gap-4">
+    {#each seriesData as data, i}
+      <div class="border rounded p-4 grid gap-1" style:--chart-color={colorScale(i)}>
+        <div class="h-[100px]">
+          <Chart
+            {data}
+            x="date"
+            xScale={scaleTime()}
+            {xDomain}
+            y="value"
+            yBaseline={0}
+            yNice
+            padding={{ left: 16, bottom: 24 }}
+          >
+            <Svg>
+              <Axis placement="left" grid rule />
+              <Axis
+                placement="bottom"
+                format={(v) => format(v, PeriodType.Day, { variant: 'short' })}
+              />
+              <Rule y={0} />
+              <ChartClipPath>
+                <LinearGradient
+                  class="from-[hsl(var(--chart-color)/50%)] to-transparent"
+                  vertical
+                  let:url
+                >
+                  <Area line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }} fill={url} />
+                </LinearGradient>
+              </ChartClipPath>
+            </Svg>
+          </Chart>
+        </div>
+
+        <div class="h-[20px]">
+          <Chart {data} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
+            <Svg>
+              <Area
+                line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }}
+                class="fill-[hsl(var(--chart-color)/20%)]"
+              />
+              <Brush bind:xDomain />
+            </Svg>
+          </Chart>
+        </div>
+      </div>
+    {/each}
+  </div>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.ts b/packages/layerchart/src/routes/docs/components/Brush/+page.ts
new file mode 100644
index 000000000..e5984947e
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.ts
@@ -0,0 +1,18 @@
+import { parse } from 'svelte-ux';
+
+import api from '$lib/components/Brush.svelte?raw&sveld';
+import source from '$lib/components/Brush.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    appleStock: await fetch('/data/examples/date/apple-stock.json').then(async (r) =>
+      parse(await r.text())
+    ),
+    meta: {
+      api,
+      source,
+      pageSource,
+    },
+  };
+}