matterviz 0.4.0 → 0.4.2

package/dist/plot/bar/BarPlot.svelte

@@ -2,8 +2,8 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
 >
-  import type { D3ColorSchemeName, D3InterpolateName } from '../../colors'
-  import { format_value } from '../../labels'
+  import type { D3InterpolateName } from '../../colors'
+  import { format_value_or_num } from '../../labels'
   import { sanitize_html } from '../../sanitize'
   import { FullscreenToggle, set_fullscreen_bg } from '../../layout'
   import type { Point2D, Vec2 } from '../../math'
@@ -14,8 +14,8 @@
     BarSeries,
     BarStyle,
     BasePlotProps,
+    ColorScaleConfig,
     DataLoaderFn,
-    InitialRanges,
     InternalPoint,
     LegendConfig,
     LegendItem,
@@ -25,7 +25,7 @@
     PlotConfig,
     RefLine,
     RefLineEvent,
-    ScaleType,
+    SizeScaleConfig,
     UserContentProps,
   } from '..'
   import {
@@ -33,53 +33,55 @@
     compute_element_placement,
     PlotAxis,
     PlotLegend,
+    PlotMarginals,
     ReferenceLine,
     ScatterPoint,
   } from '..'
-  import type { AxisChangeState } from '../core/axis-utils'
-  import { create_axis_loader } from '../core/axis-utils'
+  import type { MarginalSeriesInput, MarginalsProp } from '../core/marginals'
   import {
-    create_dimension_tracker,
-    create_hover_lock,
-  } from '../core/hover-lock.svelte'
+    add_sides,
+    marginal_axis,
+    marginal_axis_presence,
+    normalize_marginals,
+    reserve_marginal_pad,
+  } from '../core/marginals'
+  import { type AxisChangeState, 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 {
     axis_ranges_equal,
-    get_relative_coords,
-    MIN_TOUCH_DISTANCE_PIXELS,
-    pan_range_by_pixels,
-    PINCH_ZOOM_THRESHOLD,
-    remove_drag_listeners,
+    invert_rect_range,
     resolve_axis_ranges,
-    sorted_range,
-    to_epoch_num,
-    zoom_range_by_factor,
   } 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_axis_scales,
     create_color_scale,
-    create_scale,
     create_size_scale,
     generate_ticks,
     get_tick_label,
   } from '../core/scales'
-  import { DEFAULT_MARKERS } from '../core/types'
+  import { DEFAULT_MARKERS, SCALE_DEFAULTS } from '../core/types'
   import { DEFAULTS } from '../../settings'
   import { extent } from 'd3-array'
   import type { Snippet } from 'svelte'
   import { onDestroy, untrack } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { Tween, type TweenOptions } from 'svelte/motion'
+  import type { TweenOptions } from 'svelte/motion'
   import {
     build_obstacles_norm,
     clip_bar,
     has_explicit_position,
     measured_footprint,
     place_decorations,
+    placed_coords,
   } from '../core/auto-place'
   import {
+    AXIS_TITLE_OFFSET,
     calc_auto_padding,
+    DEFAULT_PLOT_PADDING,
     filter_padding,
     LABEL_GAP_DEFAULT,
     y2_axis_label_x,
@@ -116,8 +118,8 @@
     y_axis = $bindable({}),
     y2_axis: y2_axis_prop = $bindable({}),
     display = $bindable(DEFAULTS.bar.display),
-    range_padding = 0.05,
-    padding = { t: 20, b: 60, l: 60, r: 20 },
+    range_padding = 0,
+    padding = DEFAULT_PLOT_PADDING,
     legend = {},
     show_legend,
     bar = {},
@@ -129,12 +131,8 @@
     on_bar_click,
     on_bar_hover,
     // Line marker props (matching ScatterPlot)
-    color_scale = {
-      type: `linear`,
-      scheme: `interpolateViridis`,
-      value_range: undefined,
-    },
-    size_scale = { type: `linear`, radius_range: [2, 10], value_range: undefined },
+    color_scale = SCALE_DEFAULTS.color,
+    size_scale = SCALE_DEFAULTS.size,
     point_tween,
     on_point_click,
     on_point_hover,
@@ -154,73 +152,65 @@
     on_axis_change,
     on_error,
     pan = {},
+    marginals = false,
     ...rest
-  }: HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotConfig & {
-    series?: BarSeries<Metadata>[]
-    // Component-specific props
-    orientation?: Orientation
-    mode?: BarMode
-    legend?: LegendConfig | null
-    show_legend?: boolean
-    bar?: BarStyle
-    line?: LineStyle
-    tooltip?: Snippet<[BarHandlerProps<Metadata>]>
-    user_content?: Snippet<[UserContentProps]>
-    header_controls?: Snippet<
-      [{ height: number; width: number; fullscreen: boolean }]
-    >
-    controls_extra?: Snippet<
-      [{ orientation: Orientation; mode: BarMode } & Required<PlotConfig>]
-    >
-    change?: (data: BarHandlerProps<Metadata> | null) => void
-    on_bar_click?: (
-      data: BarHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
-    ) => void
-    on_bar_hover?: (
-      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]
-    }
-    point_tween?: TweenOptions<Point2D>
-    on_point_click?: (
-      data: LineMarkerHandlerProps & { event: MouseEvent | KeyboardEvent },
-    ) => void
-    on_point_hover?: (
-      data:
-        | (LineMarkerHandlerProps & {
-          event: MouseEvent | FocusEvent | KeyboardEvent
-        })
-        | null,
-    ) => void
-    ref_lines?: RefLine[]
-    on_ref_line_click?: (event: RefLineEvent) => void
-    on_ref_line_hover?: (event: RefLineEvent | null) => void
-    // Interactive axis props
-    data_loader?: DataLoaderFn<Metadata, BarSeries<Metadata>>
-    on_axis_change?: (
-      axis: `x` | `x2` | `y` | `y2`,
-      key: string,
-      new_series: BarSeries<Metadata>[],
-    ) => void
-    on_error?: (error: AxisLoadError) => void
-    pan?: PanConfig
-  } = $props()
+  }: HTMLAttributes<HTMLDivElement> &
+    BasePlotProps &
+    PlotConfig & {
+      series?: BarSeries<Metadata>[]
+      // Component-specific props
+      orientation?: Orientation
+      mode?: BarMode
+      legend?: LegendConfig | null
+      show_legend?: boolean
+      bar?: BarStyle
+      line?: LineStyle
+      tooltip?: Snippet<[BarHandlerProps<Metadata>]>
+      user_content?: Snippet<[UserContentProps]>
+      header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
+      controls_extra?: Snippet<
+        [{ orientation: Orientation; mode: BarMode } & Required<PlotConfig>]
+      >
+      change?: (data: BarHandlerProps<Metadata> | null) => void
+      on_bar_click?: (
+        data: BarHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
+      ) => void
+      on_bar_hover?: (
+        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?: ColorScaleConfig | D3InterpolateName
+      size_scale?: SizeScaleConfig
+      point_tween?: TweenOptions<Point2D>
+      on_point_click?: (
+        data: LineMarkerHandlerProps & { event: MouseEvent | KeyboardEvent },
+      ) => void
+      on_point_hover?: (
+        data:
+          | (LineMarkerHandlerProps & {
+              event: MouseEvent | FocusEvent | KeyboardEvent
+            })
+          | null,
+      ) => void
+      ref_lines?: RefLine[]
+      on_ref_line_click?: (event: RefLineEvent) => void
+      on_ref_line_hover?: (event: RefLineEvent | null) => void
+      // Interactive axis props
+      data_loader?: DataLoaderFn<Metadata, BarSeries<Metadata>>
+      on_axis_change?: (
+        axis: `x` | `x2` | `y` | `y2`,
+        key: string,
+        new_series: BarSeries<Metadata>[],
+      ) => void
+      on_error?: (error: AxisLoadError) => void
+      pan?: PanConfig
+      marginals?: MarginalsProp
+    } = $props()
 
   // Initialize bar, line, y2_axis with defaults - using $derived for reactivity
   let bar_state = $derived({ ...DEFAULTS.bar.bar, ...bar })
@@ -240,7 +230,7 @@
     format: ``,
     scale_type: `linear`,
     ticks: 5,
-    label_shift: { x: 0, y: 40 },
+    label_shift: { x: 0, y: AXIS_TITLE_OFFSET },
     tick: { label: { shift: { x: 0, y: 0 } } },
     range: [null, null],
     ...x2_axis_prop,
@@ -258,8 +248,7 @@
   let axis_loading = $state<`x` | `x2` | `y` | `y2` | null>(null)
 
   // 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 ref_lines_by_z = $derived(group_ref_lines_by_z(index_ref_lines(ref_lines)))
 
   // === Categorical Normalization (string x values -> integer indices, see ./data) ===
   let cat_norm = $derived(normalize_categorical(series, x_axis.categories))
@@ -277,47 +266,44 @@
     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)
+    return step <= 1 ? category_indices : category_indices.filter((_, idx) => idx % step === 0)
   })
 
   // Compute auto ranges from visible series
-  let visible_series = $derived(
-    internal_series.filter((srs) => srs?.visible ?? true),
-  )
+  let visible_series = $derived(internal_series.filter((srs) => srs?.visible ?? true))
 
   // Separate series by y-axis
-  let y1_series = $derived(
-    visible_series.filter((srs) => (srs.y_axis ?? `y1`) === `y1`),
-  )
-  let y2_series = $derived(
-    visible_series.filter((srs) => srs.y_axis === `y2`),
+  let y1_series = $derived(visible_series.filter((srs) => (srs.y_axis ?? `y1`) === `y1`))
+  let y2_series = $derived(visible_series.filter((srs) => srs.y_axis === `y2`))
+  let x2_series = $derived(visible_series.filter((srs) => srs.x_axis === `x2`))
+  // Whether the secondary x2 (top) / y2 (right) axis actually renders: BarPlot only supports
+  // them in vertical orientation. Derive once so ticks, padding, axis rendering, and marginal
+  // placement stay in sync. (Data-existence checks below use the bare `*_series.length` instead.)
+  let show_x2 = $derived(x2_series.length > 0 && orientation === `vertical`)
+  let show_y2 = $derived(y2_series.length > 0 && orientation === `vertical`)
+
+  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`,
+    }),
   )
-  let x2_series = $derived(
-    visible_series.filter((srs) => srs.x_axis === `x2`),
-  )
-
-  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<{
@@ -328,10 +314,14 @@
     current: { x: [0, 1], x2: [0, 1], y: [0, 1], y2: [0, 1] },
   })
 
-  $effect(() => { // handle x_axis.range / x2_axis.range / y_axis.range / y2_axis.range changes
+  $effect(() => {
+    // handle x_axis.range / x2_axis.range / y_axis.range / y2_axis.range changes
     // 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)
+    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
@@ -343,42 +333,33 @@
   })
 
   // Layout: dynamic padding based on tick label widths
-  const default_padding = { t: 20, b: 60, l: 60, r: 20 }
   // base_pad reserves space for tick labels/axis titles; pad (below) adds decoration reservations
-  let base_pad = $derived(filter_padding(padding, default_padding))
+  let base_pad = $derived(filter_padding(padding, DEFAULT_PLOT_PADDING))
 
   // Update padding when format or ticks change
   $effect(() => {
-    const new_pad = width && height && ticks.y.length > 0
-      ? calc_auto_padding({
-        padding,
-        default_padding,
-        x2_axis: { ...x2_axis, tick_values: ticks.x2 },
-        y_axis: { ...y_axis, tick_values: ticks.y },
-        y2_axis: { ...y2_axis, tick_values: ticks.y2 },
-      })
-      : filter_padding(padding, default_padding)
+    const new_pad =
+      width && height && ticks.y.length > 0
+        ? calc_auto_padding({
+            padding,
+            default_padding: DEFAULT_PLOT_PADDING,
+            x2_axis: { ...x2_axis, tick_values: ticks.x2 },
+            y_axis: { ...y_axis, tick_values: ticks.y },
+            y2_axis: { ...y2_axis, tick_values: ticks.y2 },
+          })
+        : filter_padding(padding, DEFAULT_PLOT_PADDING)
     // Expand right padding if y2 ticks are shown (only for vertical orientation)
-    if (
-      width && height && y2_series.length > 0 && ticks.y2.length > 0 &&
-      orientation === `vertical`
-    ) {
+    if (width && height && show_y2 && ticks.y2.length > 0) {
       // Need space for: tick shift + tick width + gap (30px) + label space (20px if present)
       // When ticks are inside, they don't contribute to padding
       const inside = y2_axis.tick?.label?.inside ?? false
       const tick_shift = inside ? 0 : (y2_axis.tick?.label?.shift?.x ?? 0) + 8
       const tick_width_contribution = inside ? 0 : tick_label_widths.y2_max
       const label_space = y2_axis.label ? 20 : 0
-      new_pad.r = Math.max(
-        new_pad.r,
-        tick_shift + tick_width_contribution + 30 + label_space,
-      )
+      new_pad.r = Math.max(new_pad.r, tick_shift + tick_width_contribution + 30 + label_space)
     }
     // Expand top padding if x2 ticks are shown (only for vertical orientation)
-    if (
-      width && height && x2_series.length > 0 && ticks.x2.length > 0 &&
-      orientation === `vertical`
-    ) {
+    if (width && height && show_x2 && ticks.x2.length > 0) {
       const inside = x2_axis.tick?.label?.inside ?? false
       const tick_shift = inside ? 0 : Math.abs(x2_axis.tick?.label?.shift?.y ?? 0) + 5
       const tick_height = inside ? 0 : 16
@@ -388,13 +369,18 @@
 
     // Only update if padding actually changed (prevents infinite loop)
     if (
-      base_pad.t !== new_pad.t || base_pad.b !== new_pad.b ||
-      base_pad.l !== new_pad.l || base_pad.r !== new_pad.r
-    ) base_pad = new_pad
+      base_pad.t !== new_pad.t ||
+      base_pad.b !== new_pad.b ||
+      base_pad.l !== new_pad.l ||
+      base_pad.r !== new_pad.r
+    )
+      base_pad = new_pad
   })
 
   let legend_element = $state<HTMLDivElement | undefined>()
-  const legend_footprint = $derived(measured_footprint(legend_element, { width: 120, height: 60 }))
+  const legend_footprint = $derived(
+    measured_footprint(legend_element, { width: 120, height: 60 }),
+  )
   const legend_has_explicit_pos = $derived(has_explicit_position(legend?.style))
 
   // Obstacle field in normalized [0,1] plot coords (y=0 at top). Each bar is modeled as a segment
@@ -423,8 +409,18 @@
         const value = base + srs.y[bar_idx]
         // vertical: category on x, value rises on y (inverted). horizontal: category on y, value on x
         const seg = vertical
-          ? clip_bar(true, (x_val - ax0) / x_span, 1 - (value - vy0) / y_span, 1 - (base - vy0) / y_span)
-          : clip_bar(false, 1 - (x_val - cy0) / cy_span, (value - ax0) / x_span, (base - ax0) / x_span)
+          ? clip_bar(
+              true,
+              (x_val - ax0) / x_span,
+              1 - (value - vy0) / y_span,
+              1 - (base - vy0) / y_span,
+            )
+          : clip_bar(
+              false,
+              1 - (x_val - cy0) / cy_span,
+              (value - ax0) / x_span,
+              (base - ax0) / x_span,
+            )
         if (seg) bars.push(seg)
       })
     })
@@ -439,39 +435,58 @@
       height,
       obstacles_norm,
       // gate on legend_element (the render signal) not legend_data, whose entries can read pad
-      legend: legend != null &&
-          (show_legend !== undefined ? show_legend : series.length > 1) &&
-          legend_element != null && !legend_has_explicit_pos
-        ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
-        : null,
-    })
+      legend:
+        legend != null &&
+        (show_legend !== undefined ? show_legend : series.length > 1) &&
+        legend_element != null &&
+        !legend_has_explicit_pos
+          ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
+          : null,
+    }),
   )
-  const pad = $derived(decor.pad)
+  // Resolve marginals: a cumulative/Pareto CDF over the CATEGORY axis weighted by bar height.
+  // Categories sit on x (vertical) or y (horizontal), so the default side and the value array
+  // flip with orientation. The value axis carries no marginal (a bar's height isn't a sample).
+  const marginal_is_vertical = $derived(orientation === `vertical`)
+  const resolved_marginals = $derived(
+    normalize_marginals(
+      marginals,
+      marginal_is_vertical ? { top: { type: `cdf` } } : { right: { type: `cdf` } },
+    ),
+  )
+  const pad = $derived(add_sides(decor.pad, reserve_marginal_pad(resolved_marginals)))
+  const marginal_series = $derived<MarginalSeriesInput[]>(
+    internal_series.map((srs) => ({
+      x: marginal_is_vertical ? (srs?.x ?? []) : undefined,
+      y: marginal_is_vertical ? undefined : (srs?.x ?? []),
+      // magnitude weights so negative bars still yield a monotonic cumulative (CDF) marginal
+      weight: srs?.y?.map((value) => Math.abs(value)) ?? [],
+      color:
+        srs?.color ??
+        (srs?.render_mode === `line` ? line_state.color : bar_state.color) ??
+        `steelblue`,
+      label: srs?.label,
+      visible: srs?.visible ?? true,
+      x_axis: srs?.x_axis,
+      y_axis: srs?.y_axis,
+    })),
+  )
+  const marginal_has_axis = $derived(marginal_axis_presence(show_x2, show_y2))
   const legend_auto_outside = $derived(decor.legend_outside)
   const legend_outside_x = $derived(decor.legend_pos.x)
   const legend_outside_y = $derived(decor.legend_pos.y)
   const chart_width = $derived(Math.max(1, width - pad.l - pad.r))
   const chart_height = $derived(Math.max(1, height - pad.t - pad.b))
 
-  // Scales
-  let scales = $derived({
-    x: create_scale(x_axis.scale_type ?? `linear`, ranges.current.x, [
-      pad.l,
-      width - pad.r,
-    ]),
-    x2: create_scale(x2_axis.scale_type ?? `linear`, ranges.current.x2, [
-      pad.l,
-      width - pad.r,
-    ]),
-    y: create_scale(y_axis.scale_type ?? `linear`, ranges.current.y, [
-      height - pad.b,
-      pad.t,
-    ]),
-    y2: create_scale(y2_axis.scale_type ?? `linear`, ranges.current.y2, [
-      height - pad.b,
-      pad.t,
-    ]),
-  })
+  let scales = $derived(
+    create_axis_scales(
+      { x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis },
+      ranges.current,
+      pad,
+      width,
+      height,
+    ),
+  )
 
   // Compute plot center for point tweening origin
   let plot_center_x = $derived(pad.l + (width - pad.r - pad.l) / 2)
@@ -482,14 +497,12 @@
     visible_series
       .filter((srs: BarSeries<Metadata>) => srs.render_mode === `line`)
       .flatMap((srs: BarSeries<Metadata>) =>
-        (srs.color_values ?? []).filter(
-          (val): val is number => typeof val === `number`,
-        )
+        (srs.color_values ?? []).filter((val): val is number => typeof val === `number`),
       ),
   )
 
   // 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]
@@ -500,9 +513,7 @@
     visible_series
       .filter((srs: BarSeries<Metadata>) => srs.render_mode === `line`)
       .flatMap((srs: BarSeries<Metadata>) =>
-        [...(srs.size_values ?? [])].filter(
-          (val): val is number => typeof val === `number`,
-        )
+        [...(srs.size_values ?? [])].filter((val): val is number => typeof val === `number`),
       ),
   )
 
@@ -520,57 +531,37 @@
     // 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
-    if (
-      user_ticks != null && typeof user_ticks === `object` &&
-      !Array.isArray(user_ticks)
-    ) return user_ticks
-    return Object.fromEntries(
-      category_list.map((cat, idx) => [idx, cat]),
-    ) as Record<number, string>
+    if (user_ticks != null && typeof user_ticks === `object` && !Array.isArray(user_ticks))
+      return user_ticks
+    return Object.fromEntries(category_list.map((cat, idx): [number, string] => [idx, cat]))
   })
 
-  // Ticks
-  let ticks = $derived({
-    x: width && height
-      ? (category_indices && cat_axis === `x` ? cat_tick_indices : generate_ticks(
-        ranges.current.x,
-        x_axis.scale_type ?? `linear`,
-        x_axis.ticks,
-        scales.x,
-        { default_count: 8 },
-      ))
-      : [],
-    y: width && height
-      ? (category_indices && cat_axis === `y` ? cat_tick_indices : generate_ticks(
-        ranges.current.y,
-        y_axis.scale_type ?? `linear`,
-        y_axis.ticks,
-        scales.y,
-        { default_count: 6 },
-      ))
-      : [],
-    y2: width && height && y2_series.length > 0 && orientation === `vertical`
-      ? generate_ticks(
-        ranges.current.y2,
-        y2_axis.scale_type ?? `linear`,
-        y2_axis.ticks,
-        scales.y2,
-        {
-          default_count: 6,
-        },
-      )
-      : [],
-    x2: width && height && x2_series.length > 0 && orientation === `vertical`
-      ? generate_ticks(
-        ranges.current.x2,
-        x2_axis.scale_type ?? `linear`,
-        x2_axis.ticks,
-        scales.x2,
-        {
-          default_count: 8,
-        },
-      )
-      : [],
+  let ticks = $derived.by(() => {
+    const axis_ticks = (
+      axis: typeof x_axis,
+      range: Vec2,
+      scale: typeof scales.x,
+      default_count: number,
+      show = true,
+    ) =>
+      width && height && show
+        ? generate_ticks(range, axis.scale_type ?? `linear`, axis.ticks, scale, {
+            default_count,
+          })
+        : []
+    // categorical axes show one tick per category instead of generated numeric ticks
+    return {
+      x:
+        category_indices && cat_axis === `x` && width && height
+          ? cat_tick_indices
+          : axis_ticks(x_axis, ranges.current.x, scales.x, 8),
+      y:
+        category_indices && cat_axis === `y` && width && height
+          ? cat_tick_indices
+          : axis_ticks(y_axis, ranges.current.y, scales.y, 6),
+      y2: axis_ticks(y2_axis, ranges.current.y2, scales.y2, 6, show_y2),
+      x2: axis_ticks(x2_axis, ranges.current.x2, scales.x2, 8, show_x2),
+    }
   })
 
   // Cache measured tick-label widths so expensive canvas text measurement
@@ -581,212 +572,45 @@
     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)
-
-      // Same scale inverts both coords, so each pair is all-number or all-Date
-      const [xr1, xr2] = [to_epoch_num(x1_raw), to_epoch_num(x2_raw)]
-      const [x2r1, x2r2] = [to_epoch_num(x2a_1_raw), to_epoch_num(x2a_2_raw)]
-
-      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: sorted_range(xr1, xr2) }
-        if (x2_series.length > 0 && Number.isFinite(x2r1) && Number.isFinite(x2r2)) {
-          x2_axis_prop = { ...x2_axis_prop, range: sorted_range(x2r1, x2r2) }
-        }
-        y_axis = { ...y_axis, range: sorted_range(y1, y2) }
-        // gate on y2 series presence (like x2): the y2 scale is a [0, 1] sentinel
-        // otherwise, so inverting would store a phantom range in the bindable prop
-        if (y2_series.length > 0) {
-          y2_axis_prop = { ...y2_axis_prop, range: sorted_range(y2_1, y2_2) }
-        }
+  // 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 whether they actually render (show_x2/show_y2 also require vertical);
+      // otherwise their [0, 1] sentinel scales would store a phantom range in the bindable prop
+      const next_x2 = show_x2 ? 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 = show_y2 ? 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,
       }
-    }
-    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/zoom all four axes from an interaction-start snapshot, each in its own
-  // scale's transform space (log axes pan by a constant factor, linear by a shift)
-  const pan_all_axes = (init: InitialRanges, dx_px: number, dy_px: number) => {
-    ranges.current.x = pan_range_by_pixels(init.initial_x_range, dx_px, chart_width, x_axis.scale_type)
-    ranges.current.x2 = pan_range_by_pixels(init.initial_x2_range, dx_px, chart_width, x2_axis.scale_type)
-    ranges.current.y = pan_range_by_pixels(init.initial_y_range, dy_px, chart_height, y_axis.scale_type)
-    ranges.current.y2 = pan_range_by_pixels(init.initial_y2_range, dy_px, chart_height, y2_axis.scale_type)
-  }
-  const zoom_all_axes = (init: InitialRanges, factor: number) => {
-    ranges.current.x = zoom_range_by_factor(init.initial_x_range, factor, x_axis.scale_type)
-    ranges.current.x2 = zoom_range_by_factor(init.initial_x2_range, factor, x2_axis.scale_type)
-    ranges.current.y = zoom_range_by_factor(init.initial_y_range, factor, y_axis.scale_type)
-    ranges.current.y2 = zoom_range_by_factor(init.initial_y2_range, factor, y2_axis.scale_type)
-  }
-
-  // Pan drag handler (drag direction inverted on x for natural pan feel)
-  const on_pan_move = (evt: MouseEvent) => {
-    if (!pan_drag_state) return
-    const sensitivity = pan?.drag_sensitivity ?? 1
-    pan_all_axes(
-      pan_drag_state,
-      -(evt.clientX - pan_drag_state.start.x) * sensitivity,
-      (evt.clientY - pan_drag_state.start.y) * sensitivity,
-    )
-  }
-
-  const on_pan_end = () => {
-    pan_drag_state = null
-    document.body.style.cursor = ``
-    window.removeEventListener(`mousemove`, on_pan_move)
-    window.removeEventListener(`mouseup`, on_pan_end)
-  }
-
-  // Tear down any window listeners + cursor override if the component unmounts mid-drag
-  // (mouseup/panend would otherwise never fire, leaking listeners and a stuck cursor).
-  // onDestroy also runs during SSR teardown, where window/document don't exist.
-  onDestroy(() => {
-    remove_drag_listeners([on_window_mouse_move, on_pan_move], [on_window_mouse_up, on_pan_end])
-    drag_state = { start: null, current: null, bounds: null }
-    pan_drag_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] }
+    },
   })
-
-  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()
-
-    const sensitivity = pan?.wheel_sensitivity ?? 1
-
-    // Pan along the dominant wheel direction
-    if (Math.abs(evt.deltaX) > Math.abs(evt.deltaY)) {
-      const dx = evt.deltaX * sensitivity
-      ranges.current.x = pan_range_by_pixels(ranges.current.x, dx, chart_width, x_axis.scale_type)
-      ranges.current.x2 = pan_range_by_pixels(ranges.current.x2, dx, chart_width, x2_axis.scale_type)
-    } else {
-      const dy = evt.deltaY * sensitivity
-      ranges.current.y = pan_range_by_pixels(ranges.current.y, dy, chart_height, y_axis.scale_type)
-      ranges.current.y2 = pan_range_by_pixels(ranges.current.y2, dy, chart_height, y2_axis.scale_type)
-    }
-  }
-
-  // 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)
-    // ignore near-coincident touches so curr_dist / start_dist can't blow up the scale
-    if (start_dist < MIN_TOUCH_DISTANCE_PIXELS) 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
-    // Pinch zoom about the view center (spread = zoom in, pinch = zoom out)
-    if (Math.abs(scale - 1) > PINCH_ZOOM_THRESHOLD && scale > Number.EPSILON) {
-      zoom_all_axes(touch_state, scale)
-    } else pan_all_axes(touch_state, -dx, dy)
-  }
-
-  function handle_touch_end() {
-    touch_state = null
-  }
+  onDestroy(() => pan_zoom.destroy())
 
   // Legend data and handlers
   let legend_data = $derived.by<LegendItem[]>(() =>
@@ -794,8 +618,7 @@
       const is_line = srs.render_mode === `line`
       const series_markers = srs.markers ?? DEFAULT_MARKERS
       const has_line = series_markers === `line` || series_markers === `line+points`
-      const has_points = series_markers === `points` ||
-        series_markers === `line+points`
+      const has_points = series_markers === `points` || series_markers === `line+points`
       const series_color = srs.color ?? (is_line ? line_state.color : bar_state.color)
 
       // Get point style for symbol color (handle array or single object)
@@ -803,9 +626,10 @@
         ? srs.point_style[0]
         : srs.point_style
       const first_color_value = srs.color_values?.[0]
-      const point_color = first_color_value != null
-        ? color_scale_fn(first_color_value)
-        : first_point_style?.fill ?? series_color
+      const point_color =
+        first_color_value != null
+          ? color_scale_fn(first_color_value)
+          : (first_point_style?.fill ?? series_color)
 
       if (is_line) {
         // Line series: show line and/or symbol based on markers
@@ -817,16 +641,15 @@
           display_style: {
             ...(has_line
               ? {
-                line_color: series_color,
-                line_dash: srs.line_style?.line_dash,
-              }
+                  line_color: series_color,
+                  line_dash: srs.line_style?.line_dash,
+                }
               : {}),
             ...(has_points
               ? {
-                symbol_type: first_point_style?.symbol_type ??
-                  DEFAULTS.scatter.symbol_type,
-                symbol_color: point_color,
-              }
+                  symbol_type: first_point_style?.symbol_type ?? DEFAULTS.scatter.symbol_type,
+                  symbol_color: point_color,
+                }
               : {}),
           },
         }
@@ -842,10 +665,13 @@
           symbol_color: series_color,
         },
       }
-    })
+    }),
   )
 
-  const legend_vis = create_legend_visibility(() => series, (next) => (series = next))
+  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(() => {
@@ -862,12 +688,11 @@
       return srs.x
         .map((x_val, bar_idx) => {
           const y_val = srs.y[bar_idx]
-          const base = !is_line && mode === `stacked`
-            ? (series_offsets[bar_idx] ?? 0)
-            : 0
-          const [bar_x, bar_y] = orientation === `vertical`
-            ? [x_scale_pl(x_val), y_scale(base + y_val)]
-            : [x_scale_pl(base + y_val), scales.y(x_val)]
+          const base = !is_line && mode === `stacked` ? (series_offsets[bar_idx] ?? 0) : 0
+          const [bar_x, bar_y] =
+            orientation === `vertical`
+              ? [x_scale_pl(x_val), y_scale(base + y_val)]
+              : [x_scale_pl(base + y_val), scales.y(x_val)]
           return { x: bar_x, y: bar_y }
         })
         .filter(({ x, y }) => isFinite(x) && isFinite(y))
@@ -876,12 +701,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(() => {
@@ -900,37 +719,13 @@
     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
@@ -944,9 +739,7 @@
     const srs = internal_series[series_idx]
     const [x, y] = [srs.x[bar_idx], srs.y[bar_idx]]
     const [orient_x, orient_y] = orientation === `horizontal` ? [y, x] : [x, y]
-    const metadata = Array.isArray(srs.metadata)
-      ? srs.metadata[bar_idx]
-      : srs.metadata
+    const metadata = Array.isArray(srs.metadata) ? srs.metadata[bar_idx] : srs.metadata
     const label = srs.labels?.[bar_idx] ?? null
     const active_y_axis = srs.y_axis ?? `y1`
     const active_x_axis = srs.x_axis ?? `x1`
@@ -1001,7 +794,7 @@
   const line_point_fill = (pt: LineSeriesPoint, series_color: string): string =>
     pt.color_value != null
       ? color_scale_fn(pt.color_value)
-      : pt.point_style?.fill ?? series_color
+      : (pt.point_style?.fill ?? series_color)
 
   const handle_bar_hover =
     (series_idx: number, bar_idx: number, color: string) => (event: MouseEvent) => {
@@ -1023,31 +816,31 @@
   })
 
   // State accessors for shared axis change handler
+  // Secondary axes read the merged $derived (x2_axis/y2_axis) but write the raw $bindable props
+  // (x2_axis_prop/y2_axis_prop) so library defaults aren't pushed into the parent's bound state
   const axis_state: AxisChangeState<BarSeries<Metadata>> = {
-    get_axis: (axis) => {
-      if (axis === `x`) return x_axis
-      if (axis === `x2`) return x2_axis
-      if (axis === `y`) return y_axis
-      return y2_axis
+    axes: {
+      x: { get: () => x_axis, set: (config) => (x_axis = { ...x_axis, ...config }) },
+      x2: {
+        get: () => x2_axis,
+        set: (config) => (x2_axis_prop = { ...x2_axis_prop, ...config }),
+      },
+      y: { get: () => y_axis, set: (config) => (y_axis = { ...y_axis, ...config }) },
+      y2: {
+        get: () => y2_axis,
+        set: (config) => (y2_axis_prop = { ...y2_axis_prop, ...config }),
+      },
     },
-    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_prop = { ...x2_axis_prop, ...config }
-      else if (axis === `y`) y_axis = { ...y_axis, ...config }
-      else y2_axis_prop = { ...y2_axis_prop, ...config }
-    },
-    get_series: () => series,
-    set_series: (new_series) => (series = new_series),
-    get_loading: () => axis_loading,
-    set_loading: (axis) => (axis_loading = axis),
+    series: { get: () => series, set: (next) => (series = next) },
+    loading: { get: () => axis_loading, set: (axis) => (axis_loading = axis) },
   }
 
   // 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 }),
-  )
+  const { handle_axis_change, try_auto_load } = create_axis_loader(axis_state, () => ({
+    data_loader,
+    on_axis_change,
+    on_error,
+  }))
   $effect(try_auto_load)
 </script>
 
@@ -1085,11 +878,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
@@ -1097,7 +888,7 @@
   bind:clientWidth={width}
   bind:clientHeight={height}
   {...rest}
-  class="bar-plot {rest.class ?? ``}"
+  class={[`bar-plot`, rest.class]}
   class:fullscreen
 >
   {#if width && height}
@@ -1113,41 +904,27 @@
       bind:this={svg_element}
       role="application"
       aria-label={rest[`aria-label`] ??
-      ([x_axis.label, y_axis.label].filter(Boolean).join(` vs `) || `Bar chart`)}
+        ([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_prop = { ...x2_axis_prop, range: [null, null] }
-        y_axis = { ...y_axis, range: [null, null] }
-        y2_axis_prop = { ...y2_axis_prop, 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}
-      ontouchcancel={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?.({
@@ -1171,38 +948,38 @@
       <!-- X-axis -->
       <PlotAxis
         side="x"
-        ticks={ticks.x as number[]}
+        ticks={ticks.x}
         place={scales.x}
         axis={x_axis}
-        domain={ranges.current.x as Vec2}
+        domain={ranges.current.x}
         {pad}
         {width}
         {height}
         show_grid={display.x_grid}
         tick_label={(tick) =>
-        get_tick_label(tick, cat_axis === `x` ? effective_cat_ticks : x_axis.ticks)}
+          get_tick_label(tick, cat_axis === `x` ? effective_cat_ticks : x_axis.ticks)}
         label_x={pad.l + chart_width / 2 + (x_axis.label_shift?.x ?? 0)}
-        label_y={height - pad.b / 3 + (x_axis.label_shift?.y ?? 0)}
+        label_y={height - pad.b + AXIS_TITLE_OFFSET + (x_axis.label_shift?.y ?? 0)}
         axis_loading={axis_loading === `x`}
         on_axis_change={(key) => handle_axis_change(`x`, key)}
       />
 
       <!-- X2-axis (Top) -->
       <!-- Note: x2 axis is only supported for vertical orientation -->
-      {#if x2_series.length > 0 && orientation === `vertical`}
+      {#if show_x2}
         <PlotAxis
           side="x2"
-          ticks={ticks.x2 as number[]}
+          ticks={ticks.x2}
           place={scales.x2}
           axis={x2_axis}
-          domain={ranges.current.x2 as Vec2}
+          domain={ranges.current.x2}
           {pad}
           {width}
           {height}
           show_grid={display.x2_grid}
           tick_label={(tick) => get_tick_label(tick, x2_axis.ticks)}
           label_x={pad.l + chart_width / 2 + (x2_axis.label_shift?.x ?? 0)}
-          label_y={Math.max(12, pad.t - (x2_axis.label_shift?.y ?? 40))}
+          label_y={Math.max(12, pad.t - (x2_axis.label_shift?.y ?? AXIS_TITLE_OFFSET))}
           axis_loading={axis_loading === `x2`}
           on_axis_change={(key) => handle_axis_change(`x2`, key)}
         />
@@ -1211,19 +988,20 @@
       <!-- Y-axis -->
       <PlotAxis
         side="y"
-        ticks={ticks.y as number[]}
+        ticks={ticks.y}
         place={scales.y}
         axis={y_axis}
-        domain={ranges.current.y as Vec2}
+        domain={ranges.current.y}
         {pad}
         {width}
         {height}
         show_grid={display.y_grid}
         tick_label={(tick) =>
-        get_tick_label(tick, cat_axis === `y` ? effective_cat_ticks : y_axis.ticks)}
+          get_tick_label(tick, cat_axis === `y` ? effective_cat_ticks : y_axis.ticks)}
         label_x={Math.max(
           12,
-          pad.l - (y_axis.tick?.label?.inside ? 0 : tick_label_widths.y_max) -
+          pad.l -
+            (y_axis.tick?.label?.inside ? 0 : tick_label_widths.y_max) -
             LABEL_GAP_DEFAULT,
         ) + (y_axis.label_shift?.x ?? 0)}
         label_y={pad.t + chart_height / 2 + (y_axis.label_shift?.y ?? 0)}
@@ -1233,13 +1011,13 @@
 
       <!-- 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`}
+      {#if show_y2}
         <PlotAxis
           side="y2"
-          ticks={ticks.y2 as number[]}
+          ticks={ticks.y2}
           place={scales.y2}
           axis={y2_axis}
-          domain={ranges.current.y2 as Vec2}
+          domain={ranges.current.y2}
           {pad}
           {width}
           {height}
@@ -1280,8 +1058,8 @@
           y2_scale_type={y2_axis.scale_type}
           x_is_time={x_axis.format?.startsWith(`%`) ?? false}
           x2_is_time={x2_axis.format?.startsWith(`%`) ?? false}
-          has_x2={x2_series.length > 0}
-          has_y2={y2_series.length > 0}
+          has_x2={show_x2}
+          has_y2={show_y2}
           {width}
           {height}
           {pad}
@@ -1299,7 +1077,7 @@
               class={is_line ? `line-series` : `bar-series`}
               data-series-idx={series_idx}
               opacity={hovered_legend_series_idx !== null &&
-                  hovered_legend_series_idx !== series_idx
+              hovered_legend_series_idx !== series_idx
                 ? 0.25
                 : 1}
             >
@@ -1313,21 +1091,22 @@
                 {@const use_x2 = srs.x_axis === `x2`}
                 {@const x_scale = use_x2 ? scales.x2 : scales.x}
                 {@const series_markers = srs.markers ?? DEFAULT_MARKERS}
-                {@const show_line = series_markers === `line` ||
-            series_markers === `line+points`}
-                {@const show_points = series_markers === `points` ||
-            series_markers === `line+points`}
+                {@const show_line =
+                  series_markers === `line` || series_markers === `line+points`}
+                {@const show_points =
+                  series_markers === `points` || series_markers === `line+points`}
                 {@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(` `)
-            : ``}
+                  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(` `)
+                    : ``}
                 {#if polyline_str}
                   <polyline
                     points={polyline_str}
@@ -1376,44 +1155,41 @@
                 {#if show_points}
                   {@const clickable = on_bar_click || on_point_click}
                   {@const get_pt = (evt: Event) => {
-            const attr = evt.target instanceof Element
-              ? evt.target.closest(`[data-bar-idx]`)?.getAttribute(
-                `data-bar-idx`,
-              )
-              : null
-            return points.find((pt) => pt.idx === parseInt(attr ?? ``, 10))
-          }}
+                    const attr =
+                      evt.target instanceof Element
+                        ? evt.target.closest(`[data-bar-idx]`)?.getAttribute(`data-bar-idx`)
+                        : null
+                    return points.find((pt) => pt.idx === parseInt(attr ?? ``, 10))
+                  }}
                   {@const set_hover = (
-            pt: LineSeriesPoint | null,
-            evt: MouseEvent | FocusEvent,
-          ) => {
-            if (pt) {
-              hovered = true
-              const fill = line_point_fill(pt, color)
-              hover_info = get_bar_data(series_idx, pt.idx, fill)
-              change(hover_info)
-            } else {
-              change(null)
-              hover_info = null
-            }
-            on_bar_hover?.(pt ? { ...hover_info!, event: evt } : null)
-            on_point_hover?.(
-              pt ? { ...hover_info!, event: evt, point: pt } : null,
-            )
-          }}
+                    pt: LineSeriesPoint | null,
+                    evt: MouseEvent | FocusEvent,
+                  ) => {
+                    if (pt) {
+                      hovered = true
+                      const fill = line_point_fill(pt, color)
+                      hover_info = get_bar_data(series_idx, pt.idx, fill)
+                      change(hover_info)
+                    } else {
+                      change(null)
+                      hover_info = null
+                    }
+                    on_bar_hover?.(pt ? { ...hover_info!, event: evt } : null)
+                    on_point_hover?.(pt ? { ...hover_info!, event: evt, point: pt } : null)
+                  }}
                   {@const do_click = (
-            pt: LineSeriesPoint,
-            evt: MouseEvent | KeyboardEvent,
-          ) => {
-            const fill = line_point_fill(pt, color)
-            const bar_data = get_bar_data(series_idx, pt.idx, fill)
-            on_bar_click?.({ ...bar_data, event: evt })
-            on_point_click?.({ ...bar_data, event: evt, point: pt })
-          }}
+                    pt: LineSeriesPoint,
+                    evt: MouseEvent | KeyboardEvent,
+                  ) => {
+                    const fill = line_point_fill(pt, color)
+                    const bar_data = get_bar_data(series_idx, pt.idx, fill)
+                    on_bar_click?.({ ...bar_data, event: evt })
+                    on_point_click?.({ ...bar_data, event: evt, point: pt })
+                  }}
                   {@const leaving = (evt: MouseEvent | FocusEvent) =>
-            (evt.relatedTarget instanceof Element
-              ? evt.relatedTarget.closest(`.line-points`)
-              : null) !== evt.currentTarget}
+                    (evt.relatedTarget instanceof Element
+                      ? evt.relatedTarget.closest(`.line-points`)
+                      : null) !== evt.currentTarget}
                   <!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_mouse_events_have_key_events -->
                   <g
                     class="line-points"
@@ -1447,11 +1223,13 @@
                     {#each points as pt (pt.idx)}
                       {@const sty = pt.point_style}
                       {@const fl = line_point_fill(pt, color)}
-                      {@const rad = pt.size_value != null
-              ? size_scale_fn(pt.size_value)
-              : sty?.radius ?? 4}
-                      {@const hov = hover_info?.series_idx === series_idx &&
-              hover_info?.bar_idx === pt.idx}
+                      {@const rad =
+                        pt.size_value != null
+                          ? size_scale_fn(pt.size_value)
+                          : (sty?.radius ?? 4)}
+                      {@const hov =
+                        hover_info?.series_idx === series_idx &&
+                        hover_info?.bar_idx === pt.idx}
                       <ScatterPoint
                         x={pt.x}
                         y={pt.y}
@@ -1482,31 +1260,30 @@
                 <!-- Render as bars -->
                 {#each srs.x as x_val, bar_idx (bar_idx)}
                   {@const y_val = srs.y[bar_idx]}
-                  {@const base = mode === `stacked`
-            ? (stacked_offsets[series_idx]?.[bar_idx] ?? 0)
-            : 0}
+                  {@const base =
+                    mode === `stacked` ? (stacked_offsets[series_idx]?.[bar_idx] ?? 0) : 0}
                   {@const color = srs.color ?? bar_state.color ?? `steelblue`}
                   {@const bar_width_val = Array.isArray(srs.bar_width)
-            ? (srs.bar_width[bar_idx] ?? 0.5)
-            : (srs.bar_width ?? 0.5)}
+                    ? (srs.bar_width[bar_idx] ?? 0.5)
+                    : (srs.bar_width ?? 0.5)}
                   {@const is_vertical = orientation === `vertical`}
                   {@const x_scale_bar = srs.x_axis === `x2` ? scales.x2 : scales.x}
                   {@const [cat_scale, val_scale] = is_vertical
-            ? [x_scale_bar, srs.y_axis === `y2` ? scales.y2 : scales.y]
-            : [scales.y, x_scale_bar]}
+                    ? [x_scale_bar, srs.y_axis === `y2` ? scales.y2 : scales.y]
+                    : [scales.y, x_scale_bar]}
                   {@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,
-            })}
+                    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(
@@ -1533,10 +1310,10 @@
                         on_bar_hover?.(null)
                       }}
                       onclick={(evt) =>
-                      on_bar_click?.({
-                        ...get_bar_data(series_idx, bar_idx, color),
-                        event: evt,
-                      })}
+                        on_bar_click?.({
+                          ...get_bar_data(series_idx, bar_idx, color),
+                          event: evt,
+                        })}
                       onkeydown={(evt) => {
                         if (evt.key === `Enter` || evt.key === ` `) {
                           evt.preventDefault()
@@ -1568,20 +1345,44 @@
 
       {@render ref_lines_layer(ref_lines_by_z.below_points)}
       {@render ref_lines_layer(ref_lines_by_z.above_all)}
+
+      <!-- Marginal distribution strips -->
+      <PlotMarginals
+        marginals={resolved_marginals}
+        series={marginal_series}
+        {width}
+        {height}
+        {pad}
+        has_axis={marginal_has_axis}
+        axes={{
+          x1: marginal_axis(
+            scales.x,
+            ranges.current.x,
+            x_axis,
+            cat_axis === `x` ? (pos) => category_list[Math.round(pos)] : undefined,
+          ),
+          x2: marginal_axis(scales.x2, ranges.current.x2, x2_axis),
+          y1: marginal_axis(
+            scales.y,
+            ranges.current.y,
+            y_axis,
+            cat_axis === `y` ? (pos) => category_list[Math.round(pos)] : undefined,
+          ),
+          y2: marginal_axis(scales.y2, ranges.current.y2, y2_axis),
+        }}
+        id={clip_path_id}
+      />
     </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}
@@ -1589,16 +1390,15 @@
         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_hover.set_locked}
+        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)}
+          (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 || ``}
         `}
@@ -1607,11 +1407,11 @@
 
     {#if hover_info && hovered}
       {@const cx = (hover_info.active_x_axis === `x2` ? scales.x2 : scales.x)(
-      hover_info.orient_x,
-    )}
+        hover_info.orient_x,
+      )}
       {@const cy = (hover_info.active_y_axis === `y2` ? scales.y2 : scales.y)(
-      hover_info.orient_y,
-    )}
+        hover_info.orient_y,
+      )}
       <PlotTooltip
         x={cx}
         y={cy}
@@ -1628,16 +1428,16 @@
             <div><strong>{series_label}</strong></div>
           {/if}
           <div>
-            {@html sanitize_html(hover_info.x_axis.label || `x`)}: {
-              (cat_axis === `x` ? hover_info.category_label : undefined) ??
-              format_value(hover_info.orient_x, hover_info.x_axis.format || `.3~s`)
-            }
+            {@html sanitize_html(hover_info.x_axis.label || `x`)}: {(cat_axis === `x`
+              ? hover_info.category_label
+              : undefined) ??
+              format_value_or_num(hover_info.orient_x, hover_info.x_axis.format)}
           </div>
           <div>
-            {@html sanitize_html(hover_info.y_axis.label || `y`)}: {
-              (cat_axis === `y` ? hover_info.category_label : undefined) ??
-              format_value(hover_info.orient_y, hover_info.y_axis.format || `.3~s`)
-            }
+            {@html sanitize_html(hover_info.y_axis.label || `y`)}: {(cat_axis === `y`
+              ? hover_info.category_label
+              : undefined) ??
+              format_value_or_num(hover_info.orient_y, hover_info.y_axis.format)}
           </div>
         {/if}
       </PlotTooltip>
@@ -1661,12 +1461,12 @@
         bind:y_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}
-        auto_y_range={auto_ranges.y as Vec2}
-        auto_y2_range={auto_ranges.y2 as Vec2}
-        has_x2_points={x2_series.length > 0}
-        has_y2_points={y2_series.length > 0}
+        auto_x_range={auto_ranges.x}
+        auto_x2_range={auto_ranges.x2}
+        auto_y_range={auto_ranges.y}
+        auto_y2_range={auto_ranges.y2}
+        has_x2_points={show_x2}
+        has_y2_points={show_y2}
         children={controls_extra}
       />
     {/if}
@@ -1726,7 +1526,9 @@
   .bar-plot :global(.pane-toggle),
   .bar-plot .header-controls {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   .bar-plot:hover :global(.pane-toggle),
   .bar-plot:hover .header-controls,