matterviz 0.3.7 → 0.4.1

package/dist/plot/{BarPlot.svelte → bar/BarPlot.svelte}

@@ -2,11 +2,11 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
 >
-  import type { D3ColorSchemeName, D3InterpolateName } from '../colors'
-  import { format_value } from '../labels'
-  import { sanitize_html } from '../sanitize'
-  import { FullscreenToggle, set_fullscreen_bg } from '../layout'
-  import type { Point2D, Vec2 } from '../math'
+  import type { D3InterpolateName } from '../../colors'
+  import { format_value } from '../../labels'
+  import { sanitize_html } from '../../sanitize'
+  import { FullscreenToggle, set_fullscreen_bg } from '../../layout'
+  import type { Point2D, Vec2 } from '../../math'
   import type {
     AxisLoadError,
     BarHandlerProps,
@@ -14,8 +14,8 @@
     BarSeries,
     BarStyle,
     BasePlotProps,
+    ColorScaleConfig,
     DataLoaderFn,
-    InitialRanges,
     InternalPoint,
     LegendConfig,
     LegendItem,
@@ -25,9 +25,9 @@
     PlotConfig,
     RefLine,
     RefLineEvent,
-    ScaleType,
+    SizeScaleConfig,
     UserContentProps,
-  } from './'
+  } from '..'
   import {
     BarPlotControls,
     compute_element_placement,
@@ -35,56 +35,61 @@
     PlotLegend,
     ReferenceLine,
     ScatterPoint,
-  } from './'
-  import type { AxisChangeState } from './axis-utils'
-  import { create_axis_change_handler } from './axis-utils'
-  import { process_prop } from './data-transform'
+  } from '..'
+  import type { AxisChangeState } from '../core/axis-utils'
+  import { create_axis_loader } from '../core/axis-utils'
+  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'
-  import type { IndexedRefLine } from './reference-line'
-  import { group_ref_lines_by_z, index_ref_lines } from './reference-line'
+    axis_ranges_equal,
+    invert_rect_range,
+    resolve_axis_ranges,
+  } from '../core/interactions'
+  import type { IndexedRefLine } from '../core/reference-line'
+  import { group_ref_lines_by_z, index_ref_lines } from '../core/reference-line'
   import {
     create_color_scale,
     create_scale,
     create_size_scale,
     generate_ticks,
-    get_nice_data_range,
     get_tick_label,
-  } from './scales'
-  import { DEFAULT_MARKERS, get_scale_type_name } from './types'
-  import { DEFAULTS } from '../settings'
+  } from '../core/scales'
+  import { DEFAULT_MARKERS } from '../core/types'
+  import { DEFAULTS } from '../../settings'
   import { extent } 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, type TweenOptions } from 'svelte/motion'
-  import { SvelteMap } from 'svelte/reactivity'
+  import type { TweenOptions } from 'svelte/motion'
   import {
     build_obstacles_norm,
     clip_bar,
     has_explicit_position,
     measured_footprint,
     place_decorations,
-  } from './auto-place'
+    placed_coords,
+  } from '../core/auto-place'
   import {
     calc_auto_padding,
-    constrain_tooltip_position,
     filter_padding,
     LABEL_GAP_DEFAULT,
+    y2_axis_label_x,
     measure_max_tick_width,
-  } from './layout'
-  import PlotTooltip from './PlotTooltip.svelte'
-  import { bar_path } from './svg'
-  import ZeroLines from './ZeroLines.svelte'
-  import ZoomRect from './ZoomRect.svelte'
+  } from '../core/layout'
+  import PlotTooltip from '../core/components/PlotTooltip.svelte'
+  import { bar_path } from '../core/svg'
+  import { unique_id } from '../core/utils'
+  import ZeroLines from '../core/components/ZeroLines.svelte'
+  import ZoomRect from '../core/components/ZoomRect.svelte'
+  import {
+    compute_bar_auto_ranges,
+    compute_group_info,
+    compute_stacked_offsets,
+    normalize_categorical,
+  } from './data'
+  import { compute_bar_rect, compute_line_points } from './geometry'
+  import type { LineSeriesPoint as BarLineSeriesPoint } from './geometry'
 
   // Handler props for line marker events (extends BarHandlerProps with point-specific data)
   interface LineMarkerHandlerProps extends BarHandlerProps<Metadata> {
@@ -92,27 +97,17 @@
   }
 
   // Extended point type with computed screen coordinates (used internally for rendering)
-  type LineSeriesPoint = InternalPoint<Metadata> & {
-    x: number // Screen x coordinate
-    y: number // Screen y coordinate
-    data_x: number // Original data x value
-    data_y: number // Original data y value
-    idx: number // Index in series
-  }
+  type LineSeriesPoint = BarLineSeriesPoint<Metadata>
 
   let {
     series = $bindable([]),
     orientation = $bindable(`vertical`),
     mode = $bindable(`overlay`),
     x_axis = $bindable({}),
-    x2_axis = $bindable({}),
+    x2_axis: x2_axis_prop = $bindable({}),
     y_axis = $bindable({}),
-    y2_axis = $bindable({}),
+    y2_axis: y2_axis_prop = $bindable({}),
     display = $bindable(DEFAULTS.bar.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 },
     legend = {},
@@ -174,26 +169,14 @@
       data: BarHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
     ) => void
     on_bar_hover?: (
-      data:
-        | (BarHandlerProps<Metadata> & {
-          event: MouseEvent | FocusEvent | KeyboardEvent
-        })
-        | null,
+      data: (BarHandlerProps<Metadata> & { event: MouseEvent | FocusEvent | KeyboardEvent }) | null,
     ) => void
     // Line marker props (matching ScatterPlot)
     // Note: For line series with markers, BOTH on_bar_* AND on_point_* events fire.
     // Use on_point_* for marker-specific data (includes `point` with InternalPoint details)
     // or on_bar_* for backward compatibility with bar-style event handling.
-    color_scale?: {
-      type?: ScaleType
-      scheme?: D3ColorSchemeName | D3InterpolateName
-      value_range?: [number, number]
-    } | D3InterpolateName
-    size_scale?: {
-      type?: ScaleType
-      radius_range?: [number, number]
-      value_range?: [number, number]
-    }
+    color_scale?: ColorScaleConfig | D3InterpolateName
+    size_scale?: SizeScaleConfig
     point_tween?: TweenOptions<Point2D>
     on_point_click?: (
       data: LineMarkerHandlerProps & { event: MouseEvent | KeyboardEvent },
@@ -222,29 +205,31 @@
   // Initialize bar, line, y2_axis with defaults - using $derived for reactivity
   let bar_state = $derived({ ...DEFAULTS.bar.bar, ...bar })
   let line_state = $derived({ ...DEFAULTS.bar.line, ...line })
-  y2_axis = {
+  // Merge secondary-axis defaults as deriveds instead of assigning back into the
+  // $bindable props (which would push library defaults into the parent's bound state)
+  let y2_axis = $derived({
     format: ``,
     scale_type: `linear`,
     ticks: 5,
-    label_shift: { y: 60 },
+    label_shift: { x: 0, y: 0 }, // y2 title stays vertically centered (x pos set by y2_axis_label_x)
     tick: { label: { shift: { x: 0, y: 0 } } }, // base offset handled in rendering
     range: [null, null],
-    ...y2_axis,
-  }
-  x2_axis = {
+    ...y2_axis_prop,
+  } as typeof y2_axis_prop)
+  let x2_axis = $derived({
     format: ``,
     scale_type: `linear`,
     ticks: 5,
     label_shift: { x: 0, y: 40 },
     tick: { label: { shift: { x: 0, y: 0 } } },
     range: [null, null],
-    ...x2_axis,
-  }
+    ...x2_axis_prop,
+  } as typeof x2_axis_prop)
 
   let [width, height] = $state([0, 0])
   let wrapper: HTMLDivElement | undefined = $state()
   let svg_element: SVGElement | null = $state(null)
-  let clip_path_id = `chart-clip-${crypto?.randomUUID?.()}`
+  const clip_path_id = unique_id(`chart-clip`) // stable, collision-resistant (see unique_id)
 
   // Reference line hover state
   let hovered_ref_line_idx = $state<number | null>(null)
@@ -256,55 +241,25 @@
   let indexed_ref_lines = $derived(index_ref_lines(ref_lines))
   let ref_lines_by_z = $derived(group_ref_lines_by_z(indexed_ref_lines))
 
-  // === Categorical Normalization ===
-  // Internal type with guaranteed numeric x (for downstream scale/rendering code)
-  type NumericBarSeries = Omit<BarSeries<Metadata>, `x`> & { x: readonly number[] }
-
-  let is_categorical = $derived(
-    series.some((srs) => srs.x.some((val) => typeof val === `string`)),
-  )
-
-  let category_list = $derived.by(() => {
-    if (!is_categorical) return [] as string[]
-    if (x_axis.categories?.length) return [...x_axis.categories]
-    return [...new Set(series.flatMap((srs) => srs.x.map(String)))]
-  })
+  // === Categorical Normalization (string x values -> integer indices, see ./data) ===
+  let cat_norm = $derived(normalize_categorical(series, x_axis.categories))
+  let category_list = $derived(cat_norm.category_list)
+  let internal_series = $derived(cat_norm.internal_series)
 
   let category_indices = $derived(
-    category_list.length ? category_list.map((_, idx) => idx) : null,
+    category_list.length > 0 ? category_list.map((_, idx) => idx) : null,
   )
 
-  let internal_series = $derived.by<NumericBarSeries[]>(() => {
-    // safe: when !category_indices, all x values are numeric (is_categorical is false)
-    if (!category_indices) return series as unknown as NumericBarSeries[]
-    return series.map((srs) => {
-      const orig_map = new Map(srs.x.map((val, idx) => [String(val), idx]))
-      if (orig_map.size < srs.x.length) {
-        console.warn(
-          `BarPlot: series "${
-            srs.label ?? `?`
-          }" has duplicate x values — last occurrence wins`,
-        )
-      }
-      // Resolve original index for each category (undefined if series lacks it)
-      const orig_indices = category_list.map((cat) => orig_map.get(cat))
-      const remap = <T>(arr: readonly T[] | null | undefined, fallback: T): T[] =>
-        orig_indices.map((oi) => oi != null ? (arr?.[oi] ?? fallback) : fallback)
-      const bw_arr = Array.isArray(srs.bar_width) ? srs.bar_width : null
-      const meta_arr = Array.isArray(srs.metadata) ? srs.metadata : null
-      return {
-        ...srs,
-        x: category_indices,
-        y: remap(srs.y, srs.render_mode === `line` ? NaN : 0),
-        labels: remap(srs.labels, null),
-        metadata: orig_indices.map((oi) =>
-          oi != null ? (meta_arr ? meta_arr[oi] : srs.metadata) : undefined
-        ) as Metadata[],
-        ...(bw_arr ? { bar_width: remap(bw_arr, 0.5) } : {}),
-        ...(srs.color_values ? { color_values: remap(srs.color_values, null) } : {}),
-        ...(srs.size_values ? { size_values: remap(srs.size_values, null) } : {}),
-      } as NumericBarSeries
-    })
+  // Thin categorical tick labels + grid lines when many categories would overlap.
+  // Bars still render for every category (this only reduces drawn ticks/labels/grid).
+  let cat_tick_indices = $derived.by<number[]>(() => {
+    if (!category_indices) return []
+    const axis_px = (orientation === `horizontal` ? height : width) || 0
+    const max_ticks = Math.max(1, Math.floor(axis_px / 28)) // ~28px per category label
+    const step = Math.ceil(category_indices.length / max_ticks)
+    return step <= 1
+      ? category_indices
+      : category_indices.filter((_, idx) => idx % step === 0)
   })
 
   // Compute auto ranges from visible series
@@ -323,124 +278,26 @@
     visible_series.filter((srs) => srs.x_axis === `x2`),
   )
 
-  let auto_ranges = $derived.by(() => {
-    // Calculate separate ranges for y1 and y2 axes
-    const calc_y_range = (
-      series_list: typeof visible_series,
-      y_limit: typeof y_range,
-      scale_type: ScaleType,
-    ) => {
-      let points = series_list.flatMap((srs) =>
-        srs.x.map((x_val, idx) => ({ x: x_val, y: srs.y[idx] }))
-      )
-
-      // In stacked mode, calculate stacked totals for accurate range (only for bars on the same axis)
-      if (mode === `stacked`) {
-        const stacked_totals = new SvelteMap<number, { pos: number; neg: number }>()
-
-        // Only include visible bar series (not lines) in stacking
-        series_list
-          .filter((srs) => srs.render_mode !== `line`)
-          .forEach((srs) =>
-            srs.x.forEach((x_val, idx) => {
-              const y_val = srs.y[idx] ?? 0
-              const totals = stacked_totals.get(x_val) ?? { pos: 0, neg: 0 }
-              if (y_val >= 0) totals.pos += y_val
-              else totals.neg += y_val
-              stacked_totals.set(x_val, totals)
-            })
-          )
-
-        // Replace points with stacked totals + line series (which don't stack)
-        points = [
-          ...Array.from(stacked_totals).flatMap(([x_val, { pos, neg }]) => [
-            ...(pos > 0 ? [{ x: x_val, y: pos }] : []),
-            ...(neg < 0 ? [{ x: x_val, y: neg }] : []),
-          ]),
-          ...series_list
-            .filter((srs) => srs.render_mode === `line`)
-            .flatMap((srs) =>
-              srs.x.map((x_val, idx) => ({ x: x_val, y: srs.y[idx] }))
-            ),
-        ]
-      }
-
-      if (!points.length) return [0, 1]
-
-      let computed_y_range = get_nice_data_range(
-        points,
-        (pt) => pt.y,
-        y_limit,
-        scale_type,
-        range_padding,
-        false,
-      )
-
-      // For bar plots, ensure the value axis starts at 0 unless there are negative values
-      // Only apply zero-clamping for linear and arcsinh scales (not log)
-      const type_name = get_scale_type_name(scale_type)
-      if (type_name === `linear` || type_name === `arcsinh`) {
-        const has_negative = points.some((pt) => pt.y < 0)
-        const has_positive = points.some((pt) => pt.y > 0)
-
-        // Only adjust if no explicit y_range is set
-        if (y_limit?.[0] == null && y_limit?.[1] == null) {
-          if (has_positive && !has_negative) computed_y_range = [0, computed_y_range[1]]
-          else if (has_negative && !has_positive) computed_y_range = [computed_y_range[0], 0]
-        }
-      }
-
-      return computed_y_range
-    }
-
-    // Get x values split by axis for range calculation
-    // For categorical data, use fixed range centered on integer indices
-    let x_auto_range: number[]
-    if (category_list.length) {
-      x_auto_range = [-0.5, category_list.length - 0.5]
-    } else {
-      const x1_x_points = visible_series
-        .filter((srs) => (srs.x_axis ?? `x1`) === `x1`)
-        .flatMap((srs) => srs.x.map((x_val) => ({ x: x_val, y: 0 })))
-      x_auto_range = x1_x_points.length
-        ? get_nice_data_range(
-          x1_x_points,
-          (pt) => pt.x,
-          x_range,
-          x_axis.scale_type ?? `linear`,
-          range_padding,
-          x_axis.format?.startsWith(`%`) || false,
-        )
-        : [0, 1]
-    }
-
-    const x2_x_points = x2_series.flatMap((srs) =>
-      srs.x.map((x_val) => ({ x: x_val, y: 0 }))
-    )
-    const x2_scale_type = x2_axis.scale_type ?? `linear`
-    const x2_auto_range = x2_x_points.length
-      ? get_nice_data_range(
-        x2_x_points,
-        (pt) => pt.x,
-        x2_range,
-        x2_scale_type,
-        range_padding,
-        x2_axis.format?.startsWith(`%`) || false,
-      )
-      : [0, 1]
-
-    const y1_range = calc_y_range(y1_series, y_range, y_axis.scale_type ?? `linear`)
-    const y2_auto_range = calc_y_range(
-      y2_series,
-      y2_range,
-      y2_axis.scale_type ?? `linear`,
-    )
-
-    // Map data ranges to axis ranges depending on orientation
-    return orientation === `horizontal`
-      ? ({ x: y1_range, x2: x2_auto_range, y: x_auto_range, y2: y2_auto_range })
-      : ({ x: x_auto_range, x2: x2_auto_range, y: y1_range, y2: y2_auto_range })
-  })
+  let auto_ranges = $derived(compute_bar_auto_ranges({
+    visible_series,
+    y1_series,
+    y2_series,
+    x2_series,
+    mode,
+    orientation,
+    range_padding,
+    category_count: category_list.length,
+    x_range: x_axis.range ?? [null, null],
+    x_scale_type: x_axis.scale_type ?? `linear`,
+    x_is_time: x_axis.format?.startsWith(`%`) || false,
+    x2_range: x2_axis.range ?? [null, null],
+    x2_scale_type: x2_axis.scale_type ?? `linear`,
+    x2_is_time: x2_axis.format?.startsWith(`%`) || false,
+    y_range: y_axis.range ?? [null, null],
+    y_scale_type: y_axis.scale_type ?? `linear`,
+    y2_range: y2_axis.range ?? [null, null],
+    y2_scale_type: y2_axis.scale_type ?? `linear`,
+  }))
 
   // Initialize and current ranges
   let ranges = $state<{
@@ -452,38 +309,16 @@
   })
 
   $effect(() => { // handle x_axis.range / x2_axis.range / y_axis.range / y2_axis.range changes
-    const new_x = [
-      x_axis.range?.[0] ?? auto_ranges.x[0],
-      x_axis.range?.[1] ?? auto_ranges.x[1],
-    ] as Vec2
-    const new_x2 = [
-      x2_axis.range?.[0] ?? auto_ranges.x2[0],
-      x2_axis.range?.[1] ?? auto_ranges.x2[1],
-    ] as Vec2
-    const new_y = [
-      y_axis.range?.[0] ?? auto_ranges.y[0],
-      y_axis.range?.[1] ?? auto_ranges.y[1],
-    ] as Vec2
-    const new_y2 = [
-      y2_axis.range?.[0] ?? auto_ranges.y2[0],
-      y2_axis.range?.[1] ?? auto_ranges.y2[1],
-    ] as Vec2
-    // Only update if the initial (data-driven) ranges changed, not when user pans
-    // Comparing against initial preserves user's pan/zoom state
-    if (
-      ranges.initial.x[0] !== new_x[0] ||
-      ranges.initial.x[1] !== new_x[1] ||
-      ranges.initial.x2[0] !== new_x2[0] ||
-      ranges.initial.x2[1] !== new_x2[1] ||
-      ranges.initial.y[0] !== new_y[0] ||
-      ranges.initial.y[1] !== new_y[1] ||
-      ranges.initial.y2[0] !== new_y2[0] ||
-      ranges.initial.y2[1] !== new_y2[1]
-    ) {
-      ranges = {
-        initial: { x: new_x, x2: new_x2, y: new_y, y2: new_y2 },
-        current: { x: new_x, x2: new_x2, y: new_y, y2: new_y2 },
-      }
+    // resolve_axis_ranges returns null for transient non-finite bounds (skip: writing
+    // NaN breaks scales and, since NaN !== NaN, loops the effect)
+    const next = resolve_axis_ranges({ x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis }, auto_ranges)
+    if (!next) return
+    // Only update if the initial (data-driven) ranges changed, not when user pans.
+    // untrack the read of `ranges` so the assignment below can't re-trigger this effect
+    // (reading + writing the same state otherwise causes effect_update_depth_exceeded).
+    const init = untrack(() => ranges.initial)
+    if (!axis_ranges_equal(init, next)) {
+      ranges = { initial: { ...next }, current: { ...next } }
     }
   })
 
@@ -494,7 +329,7 @@
 
   // Update padding when format or ticks change
   $effect(() => {
-    const new_pad = width && height && ticks.y.length
+    const new_pad = width && height && ticks.y.length > 0
       ? calc_auto_padding({
         padding,
         default_padding,
@@ -505,7 +340,7 @@
       : filter_padding(padding, default_padding)
     // Expand right padding if y2 ticks are shown (only for vertical orientation)
     if (
-      width && height && y2_series.length && ticks.y2.length &&
+      width && height && y2_series.length > 0 && ticks.y2.length > 0 &&
       orientation === `vertical`
     ) {
       // Need space for: tick shift + tick width + gap (30px) + label space (20px if present)
@@ -521,7 +356,7 @@
     }
     // Expand top padding if x2 ticks are shown (only for vertical orientation)
     if (
-      width && height && x2_series.length && ticks.x2.length &&
+      width && height && x2_series.length > 0 && ticks.x2.length > 0 &&
       orientation === `vertical`
     ) {
       const inside = x2_axis.tick?.label?.inside ?? false
@@ -546,7 +381,7 @@
   // from baseline to its tip so the legend can't hide inside a tall bar. Built from internal_series
   // (pad-independent) + ranges so the crowding decision can't see its own reservation.
   const obstacles_norm = $derived.by(() => {
-    if (!width || !height || !visible_series.length) return []
+    if (!width || !height || visible_series.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 []
@@ -634,7 +469,7 @@
   )
 
   // Create auto color range (safely handle empty arrays or undefined extent results)
-  let auto_color_range: [number, number] = $derived.by(() => {
+  let auto_color_range: Vec2 = $derived.by(() => {
     if (all_color_values.length === 0) return [0, 1]
     const [min_val, max_val] = extent(all_color_values)
     return [min_val ?? 0, max_val ?? 1]
@@ -661,7 +496,7 @@
   // In vertical mode categories are on x-axis; in horizontal mode on y-axis
   let cat_axis = $derived(orientation === `horizontal` ? `y` : `x`)
   let effective_cat_ticks = $derived.by(() => {
-    if (!category_list.length) return undefined
+    if (category_list.length === 0) return undefined
     // Only respect user ticks when they're a Record (custom label mapping),
     // not a number (tick count) or array (tick positions)
     const user_ticks = cat_axis === `x` ? x_axis.ticks : y_axis.ticks
@@ -677,7 +512,7 @@
   // Ticks
   let ticks = $derived({
     x: width && height
-      ? (category_indices && cat_axis === `x` ? category_indices : generate_ticks(
+      ? (category_indices && cat_axis === `x` ? cat_tick_indices : generate_ticks(
         ranges.current.x,
         x_axis.scale_type ?? `linear`,
         x_axis.ticks,
@@ -686,7 +521,7 @@
       ))
       : [],
     y: width && height
-      ? (category_indices && cat_axis === `y` ? category_indices : generate_ticks(
+      ? (category_indices && cat_axis === `y` ? cat_tick_indices : generate_ticks(
         ranges.current.y,
         y_axis.scale_type ?? `linear`,
         y_axis.ticks,
@@ -726,298 +561,44 @@
     x2_max: measure_max_tick_width(ticks.x2, x2_axis.format ?? ``),
   })
 
-  // Zoom drag state
-  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)
-  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 = () => {
-    if (drag_state.start && drag_state.current) {
-      const x1_raw = scales.x.invert(drag_state.start.x) as number | Date
-      const x2_raw = scales.x.invert(drag_state.current.x) as number | Date
-      const y1 = scales.y.invert(drag_state.start.y)
-      const y2 = scales.y.invert(drag_state.current.y)
-      const y2_1 = scales.y2.invert(drag_state.start.y)
-      const y2_2 = scales.y2.invert(drag_state.current.y)
-      const x2a_1_raw = scales.x2.invert(drag_state.start.x) as number | Date
-      const x2a_2_raw = scales.x2.invert(drag_state.current.x) as number | Date
-      const dx = Math.abs(drag_state.start.x - drag_state.current.x)
-      const dy = Math.abs(drag_state.start.y - drag_state.current.y)
-
-      let xr1: number, xr2: number
-      if (x1_raw instanceof Date && x2_raw instanceof Date) {
-        ;[xr1, xr2] = [x1_raw.getTime(), x2_raw.getTime()]
-      } else if (typeof x1_raw === `number` && typeof x2_raw === `number`) {
-        ;[xr1, xr2] = [x1_raw, x2_raw]
-      } else [xr1, xr2] = [NaN, NaN] // bail: mixed types
-
-      let x2r1: number, x2r2: number
-      if (x2a_1_raw instanceof Date && x2a_2_raw instanceof Date) {
-        ;[x2r1, x2r2] = [x2a_1_raw.getTime(), x2a_2_raw.getTime()]
-      } else if (typeof x2a_1_raw === `number` && typeof x2a_2_raw === `number`) {
-        ;[x2r1, x2r2] = [x2a_1_raw, x2a_2_raw]
-      } else [x2r1, x2r2] = [NaN, NaN]
-
-      if (dx > 5 && dy > 5 && Number.isFinite(xr1) && Number.isFinite(xr2)) {
-        // Update axis ranges to trigger reactivity and prevent effect from overriding
-        x_axis = { ...x_axis, range: [Math.min(xr1, xr2), Math.max(xr1, xr2)] }
-        if (x2_series.length > 0 && Number.isFinite(x2r1) && Number.isFinite(x2r2)) {
-          x2_axis = {
-            ...x2_axis,
-            range: [Math.min(x2r1, x2r2), Math.max(x2r1, x2r2)],
-          }
-        }
-        y_axis = { ...y_axis, range: [Math.min(y1, y2), Math.max(y1, y2)] }
-        y2_axis = { ...y2_axis, range: [Math.min(y2_1, y2_2), Math.max(y2_1, y2_2)] }
-      }
-    }
-    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 sensitivity = pan?.drag_sensitivity ?? 1
-
-    const x_delta = pixels_to_data_delta(
-      -dx * sensitivity,
-      pan_drag_state.initial_x_range,
-      chart_width,
-    )
-    const x2_delta = pixels_to_data_delta(
-      -dx * sensitivity,
-      pan_drag_state.initial_x2_range,
-      chart_width,
-    )
-    const y_delta = pixels_to_data_delta(
-      dy * sensitivity,
-      pan_drag_state.initial_y_range,
-      chart_height,
-    )
-    const y2_delta = pixels_to_data_delta(
-      dy * sensitivity,
-      pan_drag_state.initial_y2_range,
-      chart_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],
+  // Shared pan/zoom/touch/drag-rect interaction controller
+  const pan_zoom = create_pan_zoom({
+    ranges: () => ranges.current,
+    scale_type: (axis) => ({ x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis })[axis].scale_type,
+    plot_dims: () => ({ width: chart_width, height: chart_height }),
+    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_prop = { ...x2_axis_prop, 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_prop = { ...y2_axis_prop, 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,
       }
-      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()
-
-    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,
-      chart_width,
-    )
-    const x2_delta = pixels_to_data_delta(
-      evt.deltaX * sensitivity,
-      ranges.current.x2,
-      chart_width,
-    )
-    const y_delta = pixels_to_data_delta(
-      evt.deltaY * sensitivity,
-      ranges.current.y,
-      chart_height,
-    )
-    const y2_delta = pixels_to_data_delta(
-      evt.deltaY * sensitivity,
-      ranges.current.y2,
-      chart_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
-
-    // 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,
-        chart_width,
-      )
-      const x2_delta = pixels_to_data_delta(
-        -dx,
-        touch_state.initial_x2_range,
-        chart_width,
-      )
-      const y_delta = pixels_to_data_delta(
-        dy,
-        touch_state.initial_y_range,
-        chart_height,
-      )
-      const y2_delta = pixels_to_data_delta(
-        dy,
-        touch_state.initial_y2_range,
-        chart_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
-  }
+      // Also reset axis props so future data changes recalculate auto ranges
+      x_axis = { ...x_axis, range: [null, null] }
+      x2_axis_prop = { ...x2_axis_prop, range: [null, null] }
+      y_axis = { ...y_axis, range: [null, null] }
+      y2_axis_prop = { ...y2_axis_prop, range: [null, null] }
+    },
+  })
+  onDestroy(() => pan_zoom.destroy())
 
   // Legend data and handlers
   let legend_data = $derived.by<LegendItem[]>(() =>
@@ -1076,34 +657,11 @@
     })
   )
 
-  function toggle_series_visibility(series_idx: number) {
-    if (series_idx >= 0 && series_idx < series.length) {
-      series = series.map((srs, idx) =>
-        idx === series_idx ? { ...srs, visible: !(srs.visible ?? true) } : srs
-      )
-    }
-  }
-
-  function toggle_group_visibility(_group_name: string, series_indices: number[]) {
-    // Filter to valid indices upfront (consistent with shared toggle_group_visibility)
-    const valid_indices = series_indices.filter((idx) =>
-      idx >= 0 && idx < series.length
-    )
-    if (valid_indices.length === 0) return
-
-    const idx_set = new Set(valid_indices)
-    // Check if all series in the group are currently visible
-    const all_visible = valid_indices.every((idx) => series[idx].visible ?? true)
-    // Toggle: if all visible, hide all; otherwise show all
-    const new_visibility = !all_visible
-    series = series.map((srs, idx) =>
-      idx_set.has(idx) ? { ...srs, visible: new_visibility } : srs
-    )
-  }
+  const legend_vis = create_legend_visibility(() => series, (next) => (series = next))
 
   // Collect bar and line positions for legend placement
   let bar_points_for_placement = $derived.by(() => {
-    if (!width || !height || !visible_series.length) return []
+    if (!width || !height || visible_series.length === 0) return []
 
     return internal_series.flatMap((srs, series_idx) => {
       if (!(srs?.visible ?? true)) return []
@@ -1130,12 +688,6 @@
 
   // Legend placement stability state (legend_element declared above for the auto-place block)
   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())
 
   // Calculate best legend placement using continuous grid sampling
   let legend_placement = $derived.by(() => {
@@ -1154,42 +706,17 @@
     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)
-
-    const is_responsive = legend?.responsive ?? false
-    // Only update if: resize occurred, OR (not hover-locked AND (responsive OR not yet initially placed))
-    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,
   })
 
   // Tooltip state
   let hover_info = $state<BarHandlerProps<Metadata> | null>(null)
-  let tooltip_el = $state<HTMLDivElement | undefined>()
 
   function get_bar_data(
     series_idx: number,
@@ -1267,49 +794,10 @@
     }
 
   // Stack offsets (only for bar series in stacked mode, grouped by y-axis)
-  let stacked_offsets = $derived.by(() => {
-    if (mode !== `stacked`) return [] as number[][]
-    const max_len = Math.max(
-      0,
-      ...internal_series.map((srs) => srs.y.length),
-    )
-    const offsets = internal_series.map(() =>
-      Array.from({ length: max_len }, () => 0)
-    )
-
-    // Separate accumulators for y1 and y2 axes
-    const y1_pos_acc = Array.from({ length: max_len }, () => 0)
-    const y1_neg_acc = Array.from({ length: max_len }, () => 0)
-    const y2_pos_acc = Array.from({ length: max_len }, () => 0)
-    const y2_neg_acc = Array.from({ length: max_len }, () => 0)
-
-    internal_series.forEach((srs, series_idx) => {
-      if (!(srs?.visible ?? true) || srs.render_mode === `line`) return
-
-      const use_y2 = srs.y_axis === `y2`
-      const pos_acc = use_y2 ? y2_pos_acc : y1_pos_acc
-      const neg_acc = use_y2 ? y2_neg_acc : y1_neg_acc
-
-      for (let bar_idx = 0; bar_idx < max_len; bar_idx++) {
-        const y_val = srs.y[bar_idx] ?? 0
-        const acc = y_val >= 0 ? pos_acc : neg_acc
-        offsets[series_idx][bar_idx] = acc[bar_idx]
-        acc[bar_idx] += y_val
-      }
-    })
-    return offsets
-  })
+  let stacked_offsets = $derived(compute_stacked_offsets(internal_series, mode))
 
   // Calculate group positions for grouped mode (side-by-side bars)
-  let group_info = $derived.by(() => {
-    if (mode !== `grouped`) return { bar_series_count: 0, bar_series_indices: [] }
-    const bar_series_indices = internal_series
-      .map((srs, idx) =>
-        (srs?.visible ?? true) && srs.render_mode !== `line` ? idx : -1
-      )
-      .filter((idx) => idx >= 0)
-    return { bar_series_count: bar_series_indices.length, bar_series_indices }
-  })
+  let group_info = $derived(compute_group_info(internal_series, mode))
 
   // Set theme-aware background when entering fullscreen
   $effect(() => {
@@ -1327,9 +815,9 @@
     set_axis: (axis, config) => {
       // Spread into existing state to preserve merged type structure
       if (axis === `x`) x_axis = { ...x_axis, ...config }
-      else if (axis === `x2`) x2_axis = { ...x2_axis, ...config }
+      else if (axis === `x2`) x2_axis_prop = { ...x2_axis_prop, ...config }
       else if (axis === `y`) y_axis = { ...y_axis, ...config }
-      else y2_axis = { ...y2_axis, ...config }
+      else y2_axis_prop = { ...y2_axis_prop, ...config }
     },
     get_series: () => series,
     set_series: (new_series) => (series = new_series),
@@ -1337,32 +825,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[])}
@@ -1399,11 +867,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
@@ -1429,38 +895,25 @@
       aria-label={rest[`aria-label`] ??
       ([x_axis.label, y_axis.label].filter(Boolean).join(` vs `) || `Bar chart`)}
       tabindex="0"
-      onfocusin={() => (is_focused = true)}
-      onfocusout={() => (is_focused = false)}
-      onmousedown={handle_mouse_down}
-      ondblclick={() => {
-        // 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] }
-      }}
+      onfocusin={() => pan_zoom.set_focused(true)}
+      onfocusout={() => pan_zoom.set_focused(false)}
+      onmousedown={pan_zoom.on_mouse_down}
+      ondblclick={pan_zoom.reset_view}
+      onkeydown={pan_zoom.on_key_down}
       onmouseleave={() => {
         hovered = false
         hover_info = null
         change(null)
         on_bar_hover?.(null)
       }}
-      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`}
+      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}
     >
-      <ZoomRect start={drag_state.start} current={drag_state.current} />
+      <ZoomRect start={pan_zoom.drag_start} current={pan_zoom.drag_current} />
 
       <!-- User content (custom overlays, reference lines, etc.) -->
       {@render user_content?.({
@@ -1487,6 +940,7 @@
         ticks={ticks.x as number[]}
         place={scales.x}
         axis={x_axis}
+        domain={ranges.current.x as Vec2}
         {pad}
         {width}
         {height}
@@ -1507,6 +961,7 @@
           ticks={ticks.x2 as number[]}
           place={scales.x2}
           axis={x2_axis}
+          domain={ranges.current.x2 as Vec2}
           {pad}
           {width}
           {height}
@@ -1525,6 +980,7 @@
         ticks={ticks.y as number[]}
         place={scales.y}
         axis={y_axis}
+        domain={ranges.current.y as Vec2}
         {pad}
         {width}
         {height}
@@ -1544,21 +1000,18 @@
       <!-- Y2-axis (Right) -->
       <!-- Note: y2 axis is only supported for vertical orientation. Implementing x2 for horizontal mode requires additional complexity. -->
       {#if y2_series.length > 0 && orientation === `vertical`}
-        {@const y2_inside = y2_axis.tick?.label?.inside ?? false}
-        {@const y2_tick_shift = y2_inside ? 0 : (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={y2_axis}
+          domain={ranges.current.y2 as Vec2}
           {pad}
           {width}
           {height}
           show_grid={display.y2_grid}
           tick_label={(tick) => get_tick_label(tick, y2_axis.ticks)}
-          label_x={width - pad.r + y2_tick_shift + y2_tick_width + LABEL_GAP_DEFAULT +
-          (y2_axis.label_shift?.x ?? 0)}
+          label_x={y2_axis_label_x(y2_axis, width, pad.r, tick_label_widths.y2_max)}
           label_y={pad.t + chart_height / 2 + (y2_axis.label_shift?.y ?? 0)}
           axis_loading={axis_loading === `y2`}
           on_axis_change={(key) => handle_axis_change(`y2`, key)}
@@ -1572,7 +1025,10 @@
         </clipPath>
       </defs>
 
-      <!-- Clipped content: zero lines, bars, and lines -->
+      <!-- Chart content is clipped in two groups so reference lines can interleave
+           at their z positions while staying outside the chart clip: each line still
+           self-clips to the plot area inside ReferenceLine, only its annotation text
+           is allowed to overflow the plot edges. -->
       <g clip-path="url(#{clip_path_id})">
         <ZeroLines
           {display}
@@ -1596,11 +1052,12 @@
           {height}
           {pad}
         />
+      </g>
 
-        <!-- Reference lines: below lines -->
-        {@render ref_lines_layer(ref_lines_by_z.below_lines)}
+      {@render ref_lines_layer(ref_lines_by_z.below_lines)}
 
-        <!-- Bars and Lines -->
+      <!-- Bars and Lines -->
+      <g clip-path="url(#{clip_path_id})">
         {#each internal_series as srs, series_idx (srs?.id ?? series_idx)}
           {#if srs?.visible ?? true}
             {@const is_line = srs.render_mode === `line`}
@@ -1626,42 +1083,14 @@
             series_markers === `line+points`}
                 {@const show_points = series_markers === `points` ||
             series_markers === `line+points`}
-                {@const points = srs.x.map((x_val, idx) => {
-            const y_val = srs.y[idx]
-            // Lines don't stack - they show absolute values (useful for totals/trends)
-            const plot_x = orientation === `vertical`
-              ? x_scale(x_val)
-              : x_scale(y_val)
-            const plot_y = orientation === `vertical`
-              ? y_scale(y_val)
-              : scales.y(x_val)
-            // Create internal point with all needed data
-            const color_value = srs.color_values?.[idx] ?? null
-            const size_value = srs.size_values?.[idx] ?? null
-            const point_style = process_prop(srs.point_style, idx)
-            const point_hover = process_prop(srs.point_hover, idx)
-            const point_label = process_prop(srs.point_label, idx)
-            const point_offset = process_prop(srs.point_offset, idx)
-            const metadata = Array.isArray(srs.metadata)
-              ? srs.metadata[idx]
-              : srs.metadata
-            return {
-              x: plot_x,
-              y: plot_y,
-              data_x: x_val,
-              data_y: y_val,
-              idx,
-              color_value,
-              size_value,
-              point_style,
-              point_hover,
-              point_label,
-              point_offset,
-              metadata,
-              series_idx,
-              point_idx: idx,
-            } as LineSeriesPoint
-          }).filter((pt) => isFinite(pt.x) && isFinite(pt.y))}
+                {@const points = compute_line_points({
+            series: srs,
+            series_idx,
+            orientation,
+            x_scale,
+            y_scale,
+            cat_y_scale: scales.y,
+          })}
                 {@const polyline_str = show_line && points.length > 1
             ? points.map((pt) => `${pt.x},${pt.y}`).join(` `)
             : ``}
@@ -1826,37 +1255,24 @@
                   {@const bar_width_val = Array.isArray(srs.bar_width)
             ? (srs.bar_width[bar_idx] ?? 0.5)
             : (srs.bar_width ?? 0.5)}
-                  {@const half = mode === `grouped` && group_info.bar_series_count > 1
-            ? bar_width_val / (2 * group_info.bar_series_count)
-            : bar_width_val / 2}
-                  {@const calculate_group_offset = (idx: number) => {
-            const position = group_info.bar_series_indices.indexOf(idx)
-            const offset = position - (group_info.bar_series_count - 1) / 2
-            return offset * (bar_width_val / group_info.bar_series_count)
-          }}
-                  {@const group_offset = mode === `grouped` && group_info.bar_series_count > 1
-            ? calculate_group_offset(series_idx)
-            : 0}
                   {@const is_vertical = orientation === `vertical`}
-                  {@const cat_val = x_val}
-                  {@const val = y_val}
-                  {@const use_y2 = srs.y_axis === `y2`}
-                  {@const y_scale = use_y2 ? scales.y2 : scales.y}
-                  {@const use_x2_bar = srs.x_axis === `x2`}
-                  {@const x_scale_bar = use_x2_bar ? scales.x2 : scales.x}
+                  {@const x_scale_bar = srs.x_axis === `x2` ? scales.x2 : scales.x}
                   {@const [cat_scale, val_scale] = is_vertical
-            ? [x_scale_bar, y_scale]
+            ? [x_scale_bar, srs.y_axis === `y2` ? scales.y2 : scales.y]
             : [scales.y, x_scale_bar]}
-                  {@const c0 = cat_scale(cat_val + group_offset - half)}
-                  {@const c1 = cat_scale(cat_val + group_offset + half)}
-                  {@const v0 = val_scale(base)}
-                  {@const v1 = val_scale(base + val)}
-                  {@const [rect_x, rect_y] = is_vertical
-            ? [Math.min(c0, c1), Math.min(v0, v1)]
-            : [Math.min(v0, v1), Math.min(c0, c1)]}
-                  {@const [rect_w, rect_h] = is_vertical
-            ? [Math.max(1, Math.abs(c1 - c0)), Math.max(0, Math.abs(v1 - v0))]
-            : [Math.max(1, Math.abs(v1 - v0)), Math.max(0, Math.abs(c1 - c0))]}
+                  {@const { c0, c1, v0, v1, rect_x, rect_y, rect_w, rect_h } =
+            compute_bar_rect({
+              cat_val: x_val,
+              val: y_val,
+              base,
+              bar_width_val,
+              series_idx,
+              mode,
+              orientation,
+              group_info,
+              cat_scale,
+              val_scale,
+            })}
                   {#if (is_vertical ? rect_h : rect_w) > 0}
                     <path
                       d={bar_path(
@@ -1914,43 +1330,38 @@
             </g>
           {/if}
         {/each}
-
-        <!-- Reference lines: below points -->
-        {@render ref_lines_layer(ref_lines_by_z.below_points)}
-
-        <!-- Reference lines: above all -->
-        {@render ref_lines_layer(ref_lines_by_z.above_all)}
       </g>
+
+      {@render ref_lines_layer(ref_lines_by_z.below_points)}
+      {@render ref_lines_layer(ref_lines_by_z.above_all)}
     </svg>
 
     <!-- Legend -->
     {#if legend && (show_legend !== undefined ? show_legend : 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_group_toggle={legend?.on_group_toggle || toggle_group_visibility}
-        on_hover_change={legend_hover.set_locked}
-        on_item_hover={(series_idx) =>
-          (hovered_legend_series_idx = series_idx != null && series_idx >= 0
-            ? series_idx
+        on_toggle={legend?.on_toggle ?? legend_vis.on_toggle}
+        on_group_toggle={legend?.on_group_toggle ?? legend_vis.on_group_toggle}
+        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 || ``}
         `}
@@ -1963,22 +1374,14 @@
     )}
       {@const cy = (hover_info.active_y_axis === `y2` ? scales.y2 : scales.y)(
       hover_info.orient_y,
-    )}
-      {@const tooltip_pos = constrain_tooltip_position(
-      cx,
-      cy,
-      tooltip_el?.offsetWidth ?? 140,
-      tooltip_el?.offsetHeight ?? 50,
-      width,
-      height,
-      { offset_x: 10, offset_y: 5 },
     )}
       <PlotTooltip
-        x={tooltip_pos.x}
-        y={tooltip_pos.y}
-        offset={{ x: 0, y: 0 }}
+        x={cx}
+        y={cy}
+        offset={{ x: 10, y: 5 }}
+        constrain_to={{ width, height }}
+        fallback_size={{ width: 140, height: 50 }}
         bg_color={hover_info.color}
-        bind:wrapper={tooltip_el}
       >
         {#if tooltip}
           {@render tooltip({ ...hover_info, fullscreen })}
@@ -2017,9 +1420,9 @@
         bind:orientation
         bind:mode
         bind:x_axis
-        bind:x2_axis
+        bind:x2_axis={x2_axis_prop}
         bind:y_axis
-        bind:y2_axis
+        bind:y2_axis={y2_axis_prop}
         bind:display
         auto_x_range={auto_ranges.x as Vec2}
         auto_x2_range={auto_ranges.x2 as Vec2}
@@ -2063,8 +1466,10 @@
     background: var(--barplot-fullscreen-bg, var(--barplot-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(--barplot-fullscreen-bg, var(--barplot-bg, var(--plot-bg, transparent)));
     box-sizing: border-box;
   }
   .header-controls {