matterviz 0.3.7 → 0.4.1

package/dist/plot/{Histogram.svelte → histogram/Histogram.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { format_value } from '../labels'
-  import { FullscreenToggle, set_fullscreen_bg } from '../layout'
+  import { format_value } from '../../labels'
+  import { FullscreenToggle, set_fullscreen_bg } from '../../layout'
   import type {
     AxisLoadError,
     BarStyle,
@@ -9,70 +9,67 @@
     PanConfig,
     RefLine,
     RefLineEvent,
-  } from './'
+  } from '..'
   import {
     compute_element_placement,
     HistogramControls,
     PlotAxis,
     PlotLegend,
     ReferenceLine,
-  } from './'
-  import type { AxisChangeState } from './axis-utils'
-  import { create_axis_change_handler } from './axis-utils'
-  import { extract_series_color, prepare_legend_data } from './data-transform'
-  import { AXIS_DEFAULTS } from './defaults'
+  } from '..'
+  import type { AxisChangeState } from '../core/axis-utils'
+  import { AXIS_DEFAULTS, create_axis_loader } from '../core/axis-utils'
+  import { extract_series_color, prepare_legend_data } from '../core/data-transform'
+  import { create_placed_tween } from '../core/placed-tween.svelte'
+  import { create_pan_zoom } from '../core/pan-zoom.svelte'
+  import { create_legend_visibility } from '../core/utils/series-visibility'
   import {
-    create_dimension_tracker,
-    create_hover_lock,
-  } from './hover-lock.svelte'
-  import {
-    get_relative_coords,
-    pan_range,
-    PINCH_ZOOM_THRESHOLD,
-    pixels_to_data_delta,
-  } from './interactions'
+    invert_rect_range,
+    resolve_axis_ranges,
+    vec2_equal,
+  } from '../core/interactions'
   import {
     calc_auto_padding,
-    constrain_tooltip_position,
     filter_padding,
     LABEL_GAP_DEFAULT,
+    y2_axis_label_x,
     measure_max_tick_width,
-  } from './layout'
+  } from '../core/layout'
   import {
     build_obstacles_norm,
     clip_bar,
     has_explicit_position,
     measured_footprint,
     place_decorations,
-  } from './auto-place'
-  import type { IndexedRefLine } from './reference-line'
-  import { group_ref_lines_by_z, index_ref_lines } from './reference-line'
+    placed_coords,
+  } from '../core/auto-place'
+  import type { IndexedRefLine } from '../core/reference-line'
+  import { group_ref_lines_by_z, index_ref_lines } from '../core/reference-line'
   import {
     create_scale,
     generate_ticks,
     get_nice_data_range,
     get_tick_label,
-  } from './scales'
+  } from '../core/scales'
   import type {
     BasePlotProps,
     DataSeries,
-    InitialRanges,
     LegendConfig,
     PlotConfig,
     ScaleType,
-  } from './types'
-  import { get_scale_type_name } from './types'
-  import ZeroLines from './ZeroLines.svelte'
-  import ZoomRect from './ZoomRect.svelte'
-  import { DEFAULTS } from '../settings'
+  } from '../core/types'
+  import { get_scale_type_name } from '../core/types'
+  import ZeroLines from '../core/components/ZeroLines.svelte'
+  import ZoomRect from '../core/components/ZoomRect.svelte'
+  import { DEFAULTS } from '../../settings'
   import { bin, max } from 'd3-array'
   import type { Snippet } from 'svelte'
-  import { untrack } from 'svelte'
+  import { onDestroy, untrack } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { Tween } from 'svelte/motion'
-  import type { Vec2 } from '../math'
-  import PlotTooltip from './PlotTooltip.svelte'
-  import { bar_path } from './svg'
+  import type { Vec2 } from '../../math'
+  import PlotTooltip from '../core/components/PlotTooltip.svelte'
+  import { bar_path } from '../core/svg'
+  import { unique_id } from '../core/utils'
 
   let {
     series = $bindable([]),
@@ -81,10 +78,6 @@
     y_axis: y_axis_init = {},
     y2_axis: y2_axis_init = {},
     display: display_init = DEFAULTS.histogram.display,
-    x_range = [null, null],
-    x2_range = [null, null],
-    y_range = [null, null],
-    y2_range = [null, null],
     range_padding = 0.05,
     padding = { t: 20, b: 60, l: 60, r: 20 },
     bins = $bindable(100),
@@ -173,10 +166,10 @@
     ...x2_axis_init,
   })))
   let y_axis = $state(untrack(() => ({ ...axis_state_defaults, ...y_axis_init })))
-  // y2-axis needs different default label_shift for right-side positioning
+  // y2 title stays vertically centered; its x position is computed by y2_axis_label_x
   let y2_axis = $state(untrack(() => ({
     ...axis_state_defaults,
-    label_shift: { x: 0, y: 60 },
+    label_shift: { x: 0, y: 0 },
     ...y2_axis_init,
   })))
   let display = $state(
@@ -194,7 +187,7 @@
   let [width, height] = $state([0, 0])
   let wrapper: HTMLDivElement | undefined = $state()
   let svg_element: SVGElement | null = $state(null)
-  let clip_path_id = `histogram-clip-${crypto?.randomUUID?.()}`
+  const clip_path_id = unique_id(`histogram-clip`) // stable, collision-resistant (see unique_id)
   let hover_info = $state<HistogramHandlerProps | null>(null)
 
   // Reference line hover state
@@ -206,32 +199,10 @@
   // Compute ref_lines with index and group by z-index (using shared utilities)
   let indexed_ref_lines = $derived(index_ref_lines(ref_lines))
   let ref_lines_by_z = $derived(group_ref_lines_by_z(indexed_ref_lines))
-  let tooltip_el = $state<HTMLDivElement | undefined>()
-  let drag_state = $state<{
-    start: { x: number; y: number } | null
-    current: { x: number; y: number } | null
-    bounds: DOMRect | null
-  }>({ start: null, current: null, bounds: null })
-
-  // Pan state
-  let is_focused = $state(false)
-  let shift_held = $state(false)
-  let pan_drag_state = $state<
-    InitialRanges & { start: { x: number; y: number } } | null
-  >(null)
-  let touch_state = $state<
-    InitialRanges & { start_touches: { x: number; y: number }[] } | null
-  >(null)
 
   // Legend placement stability state
   let legend_element = $state<HTMLDivElement | undefined>()
   let hovered_legend_series_idx = $state<number | null>(null)
-  const legend_hover = create_hover_lock()
-  const dim_tracker = create_dimension_tracker()
-  let has_initial_legend_placement = $state(false)
-
-  // Clear pending hover lock timeout on unmount
-  $effect(() => () => legend_hover.cleanup())
 
   // Derived data
   type IndexedSeries = { series_data: DataSeries; series_idx: number }
@@ -270,11 +241,12 @@
   )
 
   let auto_ranges = $derived.by(() => {
-    const all_values = selected_series.flatMap((srs: DataSeries) => srs.y)
+    // Only x1 series contribute to the x1 auto-range (x2 series get their own domain below)
+    const x1_values = selected_series.flatMap((srs) => srs.x_axis === `x2` ? [] : srs.y)
     const auto_x = get_nice_data_range(
-      all_values.map((val) => ({ x: val, y: 0 })),
+      x1_values.map((val) => ({ x: val, y: 0 })),
       ({ x }) => x,
-      x_range,
+      final_x_axis.range ?? [null, null],
       final_x_axis.scale_type ?? `linear`,
       range_padding,
       false,
@@ -285,7 +257,7 @@
       ? get_nice_data_range(
         x2_values.map((val) => ({ x: val, y: 0 })),
         ({ x }) => x,
-        x2_range,
+        final_x2_axis.range ?? [null, null],
         final_x2_axis.scale_type ?? `linear`,
         range_padding,
         false,
@@ -295,20 +267,22 @@
     // Calculate y-range for a specific set of series
     const calc_y_range = (
       series_list: typeof selected_series,
-      y_limit: typeof y_range,
+      y_limit: [number | null, number | null],
       scale_type: ScaleType,
     ): Vec2 => {
       const type_name = get_scale_type_name(scale_type)
-      if (!series_list.length) {
+      if (series_list.length === 0) {
         const fallback = type_name === `log` ? 1 : 0
         return [fallback, 1]
       }
-      const hist = bin().domain([auto_x[0], auto_x[1]]).thresholds(bins)
+      // Bin each series over the domain of the x-axis it renders on (d3 bin() drops
+      // out-of-domain values, so binning x2 series over the x1 domain skews max_count)
       const max_count = Math.max(
         0,
-        ...series_list.map((srs: DataSeries) =>
-          max(hist(srs.y), (data) => data.length) || 0
-        ),
+        ...series_list.map((srs: DataSeries) => {
+          const hist = bin().domain(srs.x_axis === `x2` ? auto_x2 : auto_x).thresholds(bins)
+          return max(hist(srs.y), (data) => data.length) || 0
+        }),
       )
 
       // If there's effectively no data, avoid log-range issues (counts can't be <= 0 on log)
@@ -333,12 +307,12 @@
 
     const y1_range = calc_y_range(
       y1_series,
-      y_range,
+      final_y_axis.range ?? [null, null],
       final_y_axis.scale_type ?? `linear`,
     )
     const y2_auto_range = calc_y_range(
       y2_series,
-      y2_range,
+      final_y2_axis.range ?? [null, null],
       final_y2_axis.scale_type ?? `linear`,
     )
 
@@ -362,47 +336,21 @@
   })
 
   $effect(() => {
-    // Support one-sided range pinning: merge user range with auto range for null values
-    const new_x: [number, number] = final_x_axis.range
-      ? [
-        final_x_axis.range[0] ?? auto_ranges.x[0],
-        final_x_axis.range[1] ?? auto_ranges.x[1],
-      ]
-      : auto_ranges.x
-    const new_x2: [number, number] = final_x2_axis.range
-      ? [
-        final_x2_axis.range[0] ?? auto_ranges.x2[0],
-        final_x2_axis.range[1] ?? auto_ranges.x2[1],
-      ]
-      : auto_ranges.x2
-    const new_y: [number, number] = final_y_axis.range
-      ? [
-        final_y_axis.range[0] ?? auto_ranges.y[0],
-        final_y_axis.range[1] ?? auto_ranges.y[1],
-      ]
-      : auto_ranges.y
-    const new_y2: [number, number] = final_y2_axis.range
-      ? [
-        final_y2_axis.range[0] ?? auto_ranges.y2[0],
-        final_y2_axis.range[1] ?? auto_ranges.y2[1],
-      ]
-      : auto_ranges.y2
-
-    // Only update if the initial (data-driven) ranges changed, not when user pans
-    // Comparing against initial preserves user's pan/zoom state
-    const x_changed = new_x[0] !== ranges.initial.x[0] ||
-      new_x[1] !== ranges.initial.x[1]
-    const x2_changed = new_x2[0] !== ranges.initial.x2[0] ||
-      new_x2[1] !== ranges.initial.x2[1]
-    const y_changed = new_y[0] !== ranges.initial.y[0] ||
-      new_y[1] !== ranges.initial.y[1]
-    const y2_changed = new_y2[0] !== ranges.initial.y2[0] ||
-      new_y2[1] !== ranges.initial.y2[1]
-
-    if (x_changed) [ranges.initial.x, ranges.current.x] = [new_x, new_x]
-    if (x2_changed) [ranges.initial.x2, ranges.current.x2] = [new_x2, new_x2]
-    if (y_changed) [ranges.initial.y, ranges.current.y] = [new_y, new_y]
-    if (y2_changed) [ranges.initial.y2, ranges.current.y2] = [new_y2, new_y2]
+    // Supports one-sided range pinning (null bounds fall back to auto); returns null
+    // for transient non-finite bounds (skip: writing NaN breaks scales and loops here)
+    const next = resolve_axis_ranges(
+      { x: final_x_axis, x2: final_x2_axis, y: final_y_axis, y2: final_y2_axis },
+      auto_ranges,
+    )
+    if (!next) return
+    // Update only changed axes (preserving each unchanged axis's panned current view).
+    // untrack the reads of `ranges` so the writes below can't re-trigger this effect
+    // (reading + writing the same state otherwise causes effect_update_depth_exceeded).
+    const init = untrack(() => ranges.initial)
+    if (!vec2_equal(init.x, next.x)) [ranges.initial.x, ranges.current.x] = [next.x, next.x]
+    if (!vec2_equal(init.x2, next.x2)) [ranges.initial.x2, ranges.current.x2] = [next.x2, next.x2]
+    if (!vec2_equal(init.y, next.y)) [ranges.initial.y, ranges.current.y] = [next.y, next.y]
+    if (!vec2_equal(init.y2, next.y2)) [ranges.initial.y2, ranges.current.y2] = [next.y2, next.y2]
   })
 
   // Layout: dynamic padding based on tick label widths
@@ -416,7 +364,7 @@
     const current_ticks_y = untrack(() => ticks.y)
     const current_ticks_y2 = untrack(() => ticks.y2)
 
-    const new_pad = width && height && current_ticks_y.length
+    const new_pad = width && height && current_ticks_y.length > 0
       ? calc_auto_padding({
         padding,
         default_padding,
@@ -428,7 +376,7 @@
 
     // Add y2 axis label space (calc_auto_padding only accounts for tick labels)
     if (
-      width && height && y2_series.length && current_ticks_y2.length &&
+      width && height && y2_series.length > 0 && current_ticks_y2.length > 0 &&
       final_y2_axis.label
     ) {
       const inside = final_y2_axis.tick?.label?.inside ?? false
@@ -444,7 +392,7 @@
 
     // Add x2 axis label space (mirroring y2 logic for top padding)
     if (
-      width && height && x2_series.length && current_ticks_x2.length &&
+      width && height && x2_series.length > 0 && current_ticks_x2.length > 0 &&
       final_x2_axis.label
     ) {
       const inside = final_x2_axis.tick?.label?.inside ?? false
@@ -472,7 +420,7 @@
   // vertical segment (top -> baseline) so the legend can't hide inside a tall bar. Built from
   // histogram_bins (pad-independent) + ranges so the crowding decision can't see its own reservation.
   const obstacles_norm = $derived.by(() => {
-    if (!width || !height || !histogram_bins.length) return []
+    if (!width || !height || histogram_bins.length === 0) return []
     const base_w = width - base_pad.l - base_pad.r
     const base_h = height - base_pad.t - base_pad.b
     if (base_w <= 0 || base_h <= 0) return []
@@ -540,7 +488,7 @@
 
   // Pad-independent binning (no pixel scales) so the auto-place obstacle field can reuse it
   let histogram_bins = $derived.by(() => {
-    if (!selected_series.length || !width || !height) return []
+    if (selected_series.length === 0 || !width || !height) return []
     const hist_generator = bin()
       .domain([ranges.current.x[0], ranges.current.x[1]])
       .thresholds(bins)
@@ -625,7 +573,7 @@
 
   // Collect histogram bar positions for legend placement
   let hist_points_for_placement = $derived.by(() => {
-    if (!width || !height || !histogram_data.length) return []
+    if (!width || !height || histogram_data.length === 0) return []
 
     const points: { x: number; y: number }[] = []
 
@@ -666,339 +614,59 @@
     return result
   })
 
-  // Tweened legend coordinates for smooth animation - create once, update target via effect
-  // untrack() explicitly captures initial tween config (intentional - config set once at mount)
-  const tweened_legend_coords = new Tween(
-    { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...legend?.tween })),
-  )
-
-  // Update legend position with stability checks
-  $effect(() => {
-    if (!width || !height || !legend_placement) return
-
-    // Track dimensions for resize detection
-    const dims_changed = dim_tracker.has_changed(width, height)
-    if (dims_changed) dim_tracker.update(width, height)
-
-    // Only update if: resize occurred, OR (not hover-locked AND (responsive OR not yet initially placed))
-    const is_responsive = legend?.responsive ?? false
-    const should_update = dims_changed || (!legend_hover.is_locked.current &&
-      (is_responsive || !has_initial_legend_placement))
-
-    if (should_update) {
-      tweened_legend_coords.set(
-        { x: legend_placement.x, y: legend_placement.y },
-        // Skip animation on initial placement to avoid jump from (0, 0)
-        has_initial_legend_placement ? undefined : { duration: 0 },
-      )
-      // Only lock position after we have actual measured size
-      if (legend_element) {
-        has_initial_legend_placement = true
-      }
-    }
+  // Tweened legend coordinates with shared placement stability gating
+  const legend_tween = create_placed_tween({
+    placement: () => legend_placement,
+    dims: () => ({ width, height }),
+    responsive: () => legend?.responsive ?? false,
+    element: () => legend_element,
+    tween: () => legend?.tween,
   })
 
-  // Event handlers
-  const handle_zoom = () => {
-    if (!drag_state.start || !drag_state.current) return
-    const start_x = scales.x.invert(drag_state.start.x)
-    const end_x = scales.x.invert(drag_state.current.x)
-    const start_x2 = scales.x2.invert(drag_state.start.x)
-    const end_x2 = scales.x2.invert(drag_state.current.x)
-    const start_y = scales.y.invert(drag_state.start.y)
-    const end_y = scales.y.invert(drag_state.current.y)
-    const start_y2 = scales.y2.invert(drag_state.start.y)
-    const end_y2 = scales.y2.invert(drag_state.current.y)
-
-    if (typeof start_x === `number` && typeof end_x === `number`) {
-      const dx = Math.abs(drag_state.start.x - drag_state.current.x)
-      const dy = Math.abs(drag_state.start.y - drag_state.current.y)
-      if (dx > 5 && dy > 5) {
-        // Update axis ranges to trigger reactivity and prevent effect from overriding
-        x_axis = {
-          ...x_axis,
-          range: [Math.min(start_x, end_x), Math.max(start_x, end_x)],
-        }
-        if (x2_series.length > 0) {
-          x2_axis = {
-            ...x2_axis,
-            range: [Math.min(start_x2, end_x2), Math.max(start_x2, end_x2)],
-          }
-        }
-        y_axis = {
-          ...y_axis,
-          range: [Math.min(start_y, end_y), Math.max(start_y, end_y)],
-        }
-        y2_axis = {
-          ...y2_axis,
-          range: [Math.min(start_y2, end_y2), Math.max(start_y2, end_y2)],
-        }
-      }
-    }
-  }
-
-  const on_window_mouse_move = (evt: MouseEvent) => {
-    if (!drag_state.start || !drag_state.bounds) return
-    drag_state.current = {
-      x: evt.clientX - drag_state.bounds.left,
-      y: evt.clientY - drag_state.bounds.top,
-    }
-  }
-
-  const on_window_mouse_up = () => {
-    handle_zoom()
-    drag_state = { start: null, current: null, bounds: null }
-    window.removeEventListener(`mousemove`, on_window_mouse_move)
-    window.removeEventListener(`mouseup`, on_window_mouse_up)
-    document.body.style.cursor = `default`
-  }
-
-  // Pan drag handlers
-  const on_pan_move = (evt: MouseEvent) => {
-    if (!pan_drag_state) return
-    const dx = evt.clientX - pan_drag_state.start.x
-    const dy = evt.clientY - pan_drag_state.start.y
-
-    // Convert pixel delta to data delta (note: drag direction is inverted for natural pan feel)
-    const plot_width = width - pad.l - pad.r
-    const plot_height = height - pad.t - pad.b
-    const sensitivity = pan?.drag_sensitivity ?? 1
-
-    const x_delta = pixels_to_data_delta(
-      -dx * sensitivity,
-      pan_drag_state.initial_x_range,
-      plot_width,
-    )
-    const x2_delta = pixels_to_data_delta(
-      -dx * sensitivity,
-      pan_drag_state.initial_x2_range,
-      plot_width,
-    )
-    const y_delta = pixels_to_data_delta(
-      dy * sensitivity,
-      pan_drag_state.initial_y_range,
-      plot_height,
-    )
-    const y2_delta = pixels_to_data_delta(
-      dy * sensitivity,
-      pan_drag_state.initial_y2_range,
-      plot_height,
-    )
-
-    ranges.current.x = pan_range(pan_drag_state.initial_x_range, x_delta)
-    ranges.current.x2 = pan_range(pan_drag_state.initial_x2_range, x2_delta)
-    ranges.current.y = pan_range(pan_drag_state.initial_y_range, y_delta)
-    ranges.current.y2 = pan_range(pan_drag_state.initial_y2_range, y2_delta)
-  }
-
-  const on_pan_end = () => {
-    pan_drag_state = null
-    document.body.style.cursor = ``
-    window.removeEventListener(`mousemove`, on_pan_move)
-    window.removeEventListener(`mouseup`, on_pan_end)
-  }
-
-  function handle_mouse_down(evt: MouseEvent) {
-    const coords = get_relative_coords(evt)
-    if (!coords || !svg_element) return
-
-    // Check if pan is enabled and shift is held for pan mode
-    const pan_enabled = pan?.enabled !== false
-    if (pan_enabled && evt.shiftKey) {
-      evt.preventDefault()
-      pan_drag_state = {
-        start: { x: evt.clientX, y: evt.clientY },
-        initial_x_range: [...ranges.current.x] as [number, number],
-        initial_x2_range: [...ranges.current.x2] as [number, number],
-        initial_y_range: [...ranges.current.y] as [number, number],
-        initial_y2_range: [...ranges.current.y2] as [number, number],
-      }
-      document.body.style.cursor = `grabbing`
-      window.addEventListener(`mousemove`, on_pan_move)
-      window.addEventListener(`mouseup`, on_pan_end)
-      return
-    }
-
-    drag_state = {
-      start: coords,
-      current: coords,
-      bounds: svg_element.getBoundingClientRect(),
-    }
-    window.addEventListener(`mousemove`, on_window_mouse_move)
-    window.addEventListener(`mouseup`, on_window_mouse_up)
-    evt.preventDefault()
-  }
-
-  // Wheel handler for pan (requires focus and shift)
-  function handle_wheel(evt: WheelEvent) {
-    const pan_enabled = pan?.enabled !== false
-    // Only capture wheel when focused AND Shift is held
-    // Use shift_held state (tracked via keydown/keyup) for compatibility with synthetic events
-    if (!pan_enabled || !is_focused || !shift_held) return
-
-    evt.preventDefault()
-
+  // Shared pan/zoom/touch/drag-rect interaction controller
+  const pan_zoom = create_pan_zoom({
+    ranges: () => ranges.current,
+    scale_type: (axis) =>
+      ({ x: final_x_axis, x2: final_x2_axis, y: final_y_axis, y2: final_y2_axis })[axis]
+        .scale_type,
     // Clamp to at least 1 to avoid Infinity deltas when padding equals container size
-    const plot_width = Math.max(1, width - pad.l - pad.r)
-    const plot_height = Math.max(1, height - pad.t - pad.b)
-    const sensitivity = pan?.wheel_sensitivity ?? 1
-
-    // Determine pan direction based on wheel delta
-    const x_delta = pixels_to_data_delta(
-      evt.deltaX * sensitivity,
-      ranges.current.x,
-      plot_width,
-    )
-    const x2_delta = pixels_to_data_delta(
-      evt.deltaX * sensitivity,
-      ranges.current.x2,
-      plot_width,
-    )
-    const y_delta = pixels_to_data_delta(
-      evt.deltaY * sensitivity,
-      ranges.current.y,
-      plot_height,
-    )
-    const y2_delta = pixels_to_data_delta(
-      evt.deltaY * sensitivity,
-      ranges.current.y2,
-      plot_height,
-    )
-
-    if (Math.abs(evt.deltaX) > Math.abs(evt.deltaY)) {
-      ranges.current.x = pan_range(ranges.current.x, x_delta)
-      ranges.current.x2 = pan_range(ranges.current.x2, x2_delta)
-    } else {
-      ranges.current.y = pan_range(ranges.current.y, y_delta)
-      ranges.current.y2 = pan_range(ranges.current.y2, y2_delta)
-    }
-  }
-
-  // Touch handlers for pinch-zoom and two-finger pan
-  function handle_touch_start(evt: TouchEvent) {
-    const touch_enabled = pan?.enabled !== false && pan?.touch_enabled !== false
-    if (!touch_enabled || evt.touches.length !== 2) return
-
-    evt.preventDefault()
-    const touches = Array.from(evt.touches)
-    touch_state = {
-      start_touches: touches.map((touch) => ({ x: touch.clientX, y: touch.clientY })),
-      initial_x_range: [...ranges.current.x] as [number, number],
-      initial_x2_range: [...ranges.current.x2] as [number, number],
-      initial_y_range: [...ranges.current.y] as [number, number],
-      initial_y2_range: [...ranges.current.y2] as [number, number],
-    }
-  }
-
-  function handle_touch_move(evt: TouchEvent) {
-    if (!touch_state || evt.touches.length !== 2) return
-    evt.preventDefault()
-
-    const [t1, t2] = Array.from(evt.touches)
-    const [s1, s2] = touch_state.start_touches
-
-    // Calculate center movement for pan
-    const start_center = { x: (s1.x + s2.x) / 2, y: (s1.y + s2.y) / 2 }
-    const curr_center = {
-      x: (t1.clientX + t2.clientX) / 2,
-      y: (t1.clientY + t2.clientY) / 2,
-    }
-    const dx = curr_center.x - start_center.x
-    const dy = curr_center.y - start_center.y
-
-    // Calculate pinch scale (curr/start so spread = zoom out, pinch = zoom in)
-    const start_dist = Math.hypot(s2.x - s1.x, s2.y - s1.y)
-    // Guard against zero-distance pinch to avoid Infinity scale
-    if (start_dist < Number.EPSILON) return
-    const curr_dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
-    const scale = curr_dist / start_dist
-
-    // Clamp to at least 1 to avoid Infinity deltas when padding equals container size
-    const plot_width = Math.max(1, width - pad.l - pad.r)
-    const plot_height = Math.max(1, height - pad.t - pad.b)
-
-    // If scale changed significantly, treat as pinch-zoom
-    // Also guard against scale being too small to avoid division by zero
-    if (Math.abs(scale - 1) > PINCH_ZOOM_THRESHOLD && scale > Number.EPSILON) {
-      // Pinch zoom centered on gesture center
-      // Divide by scale so spread (scale > 1) = smaller span (zoom in)
-      const x_span = touch_state.initial_x_range[1] - touch_state.initial_x_range[0]
-      const x2_span = touch_state.initial_x2_range[1] -
-        touch_state.initial_x2_range[0]
-      const y_span = touch_state.initial_y_range[1] - touch_state.initial_y_range[0]
-      const y2_span = touch_state.initial_y2_range[1] -
-        touch_state.initial_y2_range[0]
-      const x_center =
-        (touch_state.initial_x_range[0] + touch_state.initial_x_range[1]) / 2
-      const x2_center =
-        (touch_state.initial_x2_range[0] + touch_state.initial_x2_range[1]) / 2
-      const y_center =
-        (touch_state.initial_y_range[0] + touch_state.initial_y_range[1]) / 2
-      const y2_center =
-        (touch_state.initial_y2_range[0] + touch_state.initial_y2_range[1]) / 2
-
-      ranges.current.x = [
-        x_center - x_span / scale / 2,
-        x_center + x_span / scale / 2,
-      ]
-      ranges.current.x2 = [
-        x2_center - x2_span / scale / 2,
-        x2_center + x2_span / scale / 2,
-      ]
-      ranges.current.y = [
-        y_center - y_span / scale / 2,
-        y_center + y_span / scale / 2,
-      ]
-      ranges.current.y2 = [
-        y2_center - y2_span / scale / 2,
-        y2_center + y2_span / scale / 2,
-      ]
-    } else {
-      // Pan
-      const x_delta = pixels_to_data_delta(
-        -dx,
-        touch_state.initial_x_range,
-        plot_width,
-      )
-      const x2_delta = pixels_to_data_delta(
-        -dx,
-        touch_state.initial_x2_range,
-        plot_width,
-      )
-      const y_delta = pixels_to_data_delta(
-        dy,
-        touch_state.initial_y_range,
-        plot_height,
-      )
-      const y2_delta = pixels_to_data_delta(
-        dy,
-        touch_state.initial_y2_range,
-        plot_height,
-      )
-      ranges.current.x = pan_range(touch_state.initial_x_range, x_delta)
-      ranges.current.x2 = pan_range(touch_state.initial_x2_range, x2_delta)
-      ranges.current.y = pan_range(touch_state.initial_y_range, y_delta)
-      ranges.current.y2 = pan_range(touch_state.initial_y2_range, y2_delta)
-    }
-  }
-
-  function handle_touch_end() {
-    touch_state = null
-  }
-
-  function handle_double_click() {
-    // Reset zoom to initial ranges (undo any pan/zoom)
-    ranges.current.x = [...ranges.initial.x] as [number, number]
-    ranges.current.x2 = [...ranges.initial.x2] as [number, number]
-    ranges.current.y = [...ranges.initial.y] as [number, number]
-    ranges.current.y2 = [...ranges.initial.y2] as [number, number]
-    // Also reset axis props so future data changes recalculate auto ranges
-    x_axis = { ...x_axis, range: [null, null] }
-    x2_axis = { ...x2_axis, range: [null, null] }
-    y_axis = { ...y_axis, range: [null, null] }
-    y2_axis = { ...y2_axis, range: [null, null] }
-  }
+    plot_dims: () => ({
+      width: Math.max(1, width - pad.l - pad.r),
+      height: Math.max(1, height - pad.t - pad.b),
+    }),
+    pan: () => pan,
+    set_range: (axis, range) => (ranges.current[axis] = range),
+    svg: () => svg_element,
+    on_rect_zoom: (start, current) => {
+      // Update axis ranges to trigger reactivity and prevent effect from overriding
+      const next_x = invert_rect_range(scales.x, start.x, current.x)
+      if (!next_x) return
+      x_axis = { ...x_axis, range: next_x }
+      // gate x2/y2 on series presence: their scales are [0, 1] sentinels otherwise,
+      // so inverting would store a phantom range in the bindable prop
+      const next_x2 = x2_series.length > 0 ? invert_rect_range(scales.x2, start.x, current.x) : null
+      if (next_x2) x2_axis = { ...x2_axis, range: next_x2 }
+      const next_y = invert_rect_range(scales.y, start.y, current.y)
+      if (next_y) y_axis = { ...y_axis, range: next_y }
+      const next_y2 = y2_series.length > 0 ? invert_rect_range(scales.y2, start.y, current.y) : null
+      if (next_y2) y2_axis = { ...y2_axis, range: next_y2 }
+    },
+    on_reset: () => {
+      // Reset zoom to initial ranges (undo any pan/zoom)
+      ranges.current = {
+        x: [...ranges.initial.x] as Vec2,
+        x2: [...ranges.initial.x2] as Vec2,
+        y: [...ranges.initial.y] as Vec2,
+        y2: [...ranges.initial.y2] as Vec2,
+      }
+      // Also reset axis props so future data changes recalculate auto ranges
+      x_axis = { ...x_axis, range: [null, null] }
+      x2_axis = { ...x2_axis, range: [null, null] }
+      y_axis = { ...y_axis, range: [null, null] }
+      y2_axis = { ...y2_axis, range: [null, null] }
+    },
+  })
+  onDestroy(() => pan_zoom.destroy())
 
   function handle_mouse_move(
     evt: MouseEvent,
@@ -1030,16 +698,7 @@
     on_bar_hover?.({ value, count, property, event: evt })
   }
 
-  function toggle_series_visibility(series_idx: number) {
-    if (series_idx >= 0 && series_idx < series.length) {
-      // Toggle series visibility
-      series = series.map((srs: DataSeries, idx: number) => {
-        if (idx === series_idx) return { ...srs, visible: !(srs.visible ?? true) }
-        return srs
-      })
-      ;(legend?.on_toggle || on_series_toggle)(series_idx)
-    }
-  }
+  const legend_vis = create_legend_visibility(() => series, (next) => (series = next))
 
   // Set theme-aware background when entering fullscreen
   $effect(() => {
@@ -1067,32 +726,12 @@
     set_loading: (axis) => (axis_loading = axis),
   }
 
-  // Create shared handler bound to this component's state
-  // Using $derived so handler updates when callback props change
-  const handle_axis_change = $derived(create_axis_change_handler(
+  // Shared handler + one-shot auto-load bound to this component's state
+  const { handle_axis_change, try_auto_load } = create_axis_loader(
     axis_state,
-    data_loader,
-    on_axis_change,
-    on_error,
-  ))
-
-  let auto_load_attempted = false // prevent infinite retries on failure
-
-  // Auto-load data if series is empty but options exist (runs once)
-  $effect(() => {
-    if (series.length === 0 && data_loader && !auto_load_attempted) {
-      // Check x-axis first, then y-axis
-      if (x_axis.options?.length) {
-        auto_load_attempted = true
-        const first_key = x_axis.selected_key ?? x_axis.options[0].key
-        handle_axis_change(`x`, first_key).catch(() => {})
-      } else if (y_axis.options?.length) {
-        auto_load_attempted = true
-        const first_key = y_axis.selected_key ?? y_axis.options[0].key
-        handle_axis_change(`y`, first_key).catch(() => {})
-      }
-    }
-  })
+    () => ({ data_loader, on_axis_change, on_error }),
+  )
+  $effect(try_auto_load)
 </script>
 
 {#snippet ref_lines_layer(lines: IndexedRefLine[])}
@@ -1129,11 +768,9 @@
       evt.preventDefault()
       fullscreen = false
     }
-    if (evt.key === `Shift`) shift_held = true
-  }}
-  onkeyup={(evt) => {
-    if (evt.key === `Shift`) shift_held = false
+    pan_zoom.on_window_key_down(evt)
   }}
+  onkeyup={pan_zoom.on_window_key_up}
 />
 
 <div
@@ -1161,34 +798,23 @@
     ([final_x_axis.label, final_y_axis.label].filter(Boolean).join(` vs `) ||
       `Histogram`)}
     tabindex="0"
-    onfocusin={() => (is_focused = true)}
-    onfocusout={() => (is_focused = false)}
+    onfocusin={() => pan_zoom.set_focused(true)}
+    onfocusout={() => pan_zoom.set_focused(false)}
     onmouseenter={() => (hovered = true)}
-    onmousedown={handle_mouse_down}
+    onmousedown={pan_zoom.on_mouse_down}
     onmouseleave={() => {
       hovered = false
       hover_info = null
       on_bar_hover?.(null)
     }}
-    ondblclick={handle_double_click}
-    onwheel={handle_wheel}
-    ontouchstart={handle_touch_start}
-    ontouchmove={handle_touch_move}
-    ontouchend={handle_touch_end}
-    style:cursor={pan_drag_state
-    ? `grabbing`
-    : shift_held && pan?.enabled !== false
-    ? `grab`
-    : `crosshair`}
-    onkeydown={(event) => {
-      if (event.key === `Escape` && drag_state.start) {
-        drag_state = { start: null, current: null, bounds: null }
-      }
-      if ([`Enter`, ` `].includes(event.key)) {
-        event.preventDefault()
-        handle_double_click()
-      }
-    }}
+    ondblclick={pan_zoom.reset_view}
+    onwheel={pan_zoom.on_wheel}
+    ontouchstart={pan_zoom.on_touch_start}
+    ontouchmove={pan_zoom.on_touch_move}
+    ontouchend={pan_zoom.on_touch_end}
+    ontouchcancel={pan_zoom.on_touch_end}
+    style:cursor={pan_zoom.cursor}
+    onkeydown={pan_zoom.on_key_down}
   >
     <!-- Define clip path for chart area -->
     <defs>
@@ -1205,7 +831,7 @@
     <!-- Reference lines: below grid (must render first to appear behind grid) -->
     {@render ref_lines_layer(ref_lines_by_z.below_grid)}
 
-    <ZoomRect start={drag_state.start} current={drag_state.current} />
+    <ZoomRect start={pan_zoom.drag_start} current={pan_zoom.drag_current} />
 
     <ZeroLines
       {display}
@@ -1240,6 +866,7 @@
       ticks={ticks.x as number[]}
       place={scales.x}
       axis={final_x_axis}
+      domain={ranges.current.x as Vec2}
       {pad}
       {width}
       {height}
@@ -1258,6 +885,7 @@
         ticks={ticks.x2 as number[]}
         place={scales.x2}
         axis={final_x2_axis}
+        domain={ranges.current.x2 as Vec2}
         {pad}
         {width}
         {height}
@@ -1276,6 +904,7 @@
       ticks={ticks.y as number[]}
       place={scales.y}
       axis={final_y_axis}
+      domain={ranges.current.y as Vec2}
       {pad}
       {width}
       {height}
@@ -1293,21 +922,18 @@
 
     <!-- Y2-axis (Right) -->
     {#if y2_series.length > 0}
-      {@const y2_inside = final_y2_axis.tick?.label?.inside ?? false}
-      {@const y2_tick_shift = y2_inside ? 0 : (final_y2_axis.tick?.label?.shift?.x ?? 0) + 8}
-      {@const y2_tick_width = y2_inside ? 0 : tick_label_widths.y2_max}
       <PlotAxis
         side="y2"
         ticks={ticks.y2 as number[]}
         place={scales.y2}
         axis={final_y2_axis}
+        domain={ranges.current.y2 as Vec2}
         {pad}
         {width}
         {height}
         show_grid={display.y2_grid}
         tick_label={(tick) => get_tick_label(tick, final_y2_axis.ticks)}
-        label_x={width - pad.r + y2_tick_shift + y2_tick_width + LABEL_GAP_DEFAULT +
-        (final_y2_axis.label_shift?.x ?? 0)}
+        label_x={y2_axis_label_x(final_y2_axis, width, pad.r, tick_label_widths.y2_max)}
         label_y={pad.t + (height - pad.t - pad.b) / 2 + (final_y2_axis.label_shift?.y ?? 0)}
         axis_loading={axis_loading === `y2`}
         on_axis_change={(key) => handle_axis_change(`y2`, key)}
@@ -1323,6 +949,7 @@
       <g
         class="histogram-series"
         data-series-idx={series_idx}
+        clip-path="url(#{clip_path_id})"
         opacity={hovered_legend_series_idx !== null &&
             hovered_legend_series_idx !== series_idx
           ? 0.25
@@ -1389,20 +1016,12 @@
     {@const { value, count, property, active_y_axis, active_x_axis } = hover_info}
     {@const tooltip_x = (active_x_axis === `x2` ? scales.x2 : scales.x)(value)}
     {@const tooltip_y = (active_y_axis === `y2` ? scales.y2 : scales.y)(count)}
-    {@const tooltip_pos = constrain_tooltip_position(
-      tooltip_x,
-      tooltip_y,
-      tooltip_el?.offsetWidth ?? 120,
-      tooltip_el?.offsetHeight ?? (mode === `overlay` ? 60 : 40),
-      width,
-      height,
-      { offset_x: 5, offset_y: -10 },
-    )}
     <PlotTooltip
-      x={tooltip_pos.x}
-      y={tooltip_pos.y}
-      offset={{ x: 0, y: 0 }}
-      bind:wrapper={tooltip_el}
+      x={tooltip_x}
+      y={tooltip_y}
+      offset={{ x: 5, y: -10 }}
+      constrain_to={{ width, height }}
+      fallback_size={{ width: 120, height: mode === `overlay` ? 60 : 40 }}
     >
       {#if tooltip}
         {@render tooltip({ ...hover_info, fullscreen })}
@@ -1447,31 +1066,33 @@
   {/if}
 
   {#if show_legend && legend != null && series.length > 1}
-    {@const legend_left = legend_auto_outside
-    ? legend_outside_x
-    : legend_placement
-    ? tweened_legend_coords.current.x
-    : pad.l + 10}
-    {@const legend_top = legend_auto_outside
-    ? legend_outside_y
-    : legend_placement
-    ? tweened_legend_coords.current.y
-    : pad.t + 10}
+    {@const legend_pos = placed_coords(
+    legend_auto_outside,
+    { x: legend_outside_x, y: legend_outside_y },
+    legend_placement,
+    legend_tween.coords.current,
+    { x: pad.l + 10, y: pad.t + 10 },
+  )}
     <PlotLegend
       bind:root_element={legend_element}
       {...legend}
       series_data={legend_data}
-      on_toggle={legend?.on_toggle || toggle_series_visibility}
-      on_hover_change={legend_hover.set_locked}
-      on_item_hover={(series_idx: number | null) =>
-        (hovered_legend_series_idx = series_idx != null && series_idx >= 0
-          ? series_idx
+      on_toggle={legend?.on_toggle ?? ((series_idx: number) => {
+        if (series_idx < 0 || series_idx >= series.length) return
+        legend_vis.on_toggle(series_idx)
+        on_series_toggle(series_idx)
+      })}
+      on_double_click={legend?.on_double_click ?? legend_vis.on_double_click}
+      on_hover_change={legend_tween.set_locked}
+      on_item_hover={(item) =>
+        (hovered_legend_series_idx = item != null && item.series_idx >= 0
+          ? item.series_idx
           : null)}
       active_series_idx={hover_info?.series_idx ?? hovered_legend_series_idx}
       style={`
         position: absolute;
-        left: ${legend_left}px;
-        top: ${legend_top}px;
+        left: ${legend_pos.x}px;
+        top: ${legend_pos.y}px;
         pointer-events: auto;
         ${legend?.style || ``}
       `}
@@ -1509,8 +1130,10 @@
     background: var(--histogram-fullscreen-bg, var(--histogram-bg, var(--plot-bg)));
     max-height: none !important;
     overflow: hidden;
-    /* Add padding to prevent titles from being cropped at top */
-    padding-top: var(--plot-fullscreen-padding-top, 2em);
+    /* border-top (not padding-top): bind:clientHeight includes padding but excludes
+    borders - padding made the chart overflow + clip its bottom 2em (x-axis title) */
+    border-top: var(--plot-fullscreen-padding-top, 2em) solid
+      var(--histogram-fullscreen-bg, var(--histogram-bg, var(--plot-bg, transparent)));
     box-sizing: border-box;
   }
   .header-controls {