matterviz 0.4.0 → 0.4.2

package/dist/plot/histogram/Histogram.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { format_value } from '../../labels'
+  import { format_value_or_num } from '../../labels'
   import { FullscreenToggle, set_fullscreen_bg } from '../../layout'
   import type {
     AxisLoadError,
@@ -15,29 +15,35 @@
     HistogramControls,
     PlotAxis,
     PlotLegend,
+    PlotMarginals,
     ReferenceLine,
   } from '..'
-  import type { AxisChangeState } from '../core/axis-utils'
-  import { AXIS_DEFAULTS, create_axis_loader } from '../core/axis-utils'
-  import { extract_series_color, prepare_legend_data } from '../core/data-transform'
+  import type { MarginalSeriesInput, MarginalsProp } from '../core/marginals'
+  import {
+    add_sides,
+    marginal_axis,
+    marginal_axis_presence,
+    normalize_marginals,
+    reserve_marginal_pad,
+  } from '../core/marginals'
   import {
-    create_dimension_tracker,
-    create_hover_lock,
-  } from '../core/hover-lock.svelte'
+    AXIS_DEFAULTS,
+    type AxisChangeState,
+    create_axis_loader,
+  } from '../core/axis-utils'
+  import { extract_series_color, prepare_legend_data } from '../core/data-transform'
+  import { create_placed_tween } from '../core/placed-tween.svelte'
+  import { create_pan_zoom } from '../core/pan-zoom.svelte'
   import { create_legend_visibility } from '../core/utils/series-visibility'
   import {
-    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,
     vec2_equal,
-    zoom_range_by_factor,
   } from '../core/interactions'
   import {
+    AXIS_TITLE_OFFSET,
     calc_auto_padding,
+    DEFAULT_PLOT_PADDING,
     filter_padding,
     LABEL_GAP_DEFAULT,
     y2_axis_label_x,
@@ -49,11 +55,12 @@
     has_explicit_position,
     measured_footprint,
     place_decorations,
+    placed_coords,
   } from '../core/auto-place'
   import type { IndexedRefLine } from '../core/reference-line'
   import { group_ref_lines_by_z, index_ref_lines } from '../core/reference-line'
   import {
-    create_scale,
+    create_axis_scales,
     generate_ticks,
     get_nice_data_range,
     get_tick_label,
@@ -61,20 +68,20 @@
   import type {
     BasePlotProps,
     DataSeries,
-    InitialRanges,
     LegendConfig,
     PlotConfig,
-    ScaleType,
   } from '../core/types'
-  import { get_scale_type_name } from '../core/types'
+  import {
+    compute_count_range,
+    compute_histogram_bins,
+    log_safe_range,
+  } from './histogram'
   import ZeroLines from '../core/components/ZeroLines.svelte'
   import ZoomRect from '../core/components/ZoomRect.svelte'
   import { DEFAULTS } from '../../settings'
-  import { bin, max } from 'd3-array'
   import type { Snippet } from 'svelte'
   import { onDestroy, untrack } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { Tween } from 'svelte/motion'
   import type { Vec2 } from '../../math'
   import PlotTooltip from '../core/components/PlotTooltip.svelte'
   import { bar_path } from '../core/svg'
@@ -87,8 +94,8 @@
     y_axis: y_axis_init = {},
     y2_axis: y2_axis_init = {},
     display: display_init = DEFAULTS.histogram.display,
-    range_padding = 0.05,
-    padding = { t: 20, b: 60, l: 60, r: 20 },
+    range_padding = 0,
+    padding = DEFAULT_PLOT_PADDING,
     bins = $bindable(100),
     show_legend = $bindable(true),
     legend = {},
@@ -117,49 +124,47 @@
     on_axis_change,
     on_error,
     pan = {},
+    marginals = false,
     ...rest
-  }: HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotConfig & {
-    series: DataSeries[]
-    // Component-specific props
-    bins?: number
-    show_legend?: boolean
-    legend?: LegendConfig | null
-    bar?: BarStyle
-    selected_property?: string
-    mode?: `single` | `overlay`
-    tooltip?: Snippet<[HistogramHandlerProps]>
-    header_controls?: Snippet<
-      [{ height: number; width: number; fullscreen: boolean }]
-    >
-    controls_extra?: Snippet<[Required<PlotConfig>]>
-    change?: (data: { value: number; count: number; property: string } | null) => void
-    on_bar_click?: (
-      data: {
+  }: HTMLAttributes<HTMLDivElement> &
+    BasePlotProps &
+    PlotConfig & {
+      series: DataSeries[]
+      // Component-specific props
+      bins?: number
+      show_legend?: boolean
+      legend?: LegendConfig | null
+      bar?: BarStyle
+      selected_property?: string
+      mode?: `single` | `overlay`
+      tooltip?: Snippet<[HistogramHandlerProps]>
+      header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
+      controls_extra?: Snippet<[Required<PlotConfig>]>
+      change?: (data: { value: number; count: number; property: string } | null) => void
+      on_bar_click?: (data: {
         value: number
         count: number
         property: string
         event: MouseEvent | KeyboardEvent
-      },
-    ) => void
-    on_bar_hover?: (
-      data:
-        | { value: number; count: number; property: string; event: MouseEvent }
-        | null,
-    ) => void
-    ref_lines?: RefLine[]
-    on_ref_line_click?: (event: RefLineEvent) => void
-    on_ref_line_hover?: (event: RefLineEvent | null) => void
-    on_series_toggle?: (series_idx: number) => void
-    // Interactive axis props
-    data_loader?: DataLoaderFn
-    on_axis_change?: (
-      axis: `x` | `x2` | `y` | `y2`,
-      key: string,
-      new_series: DataSeries[],
-    ) => void
-    on_error?: (error: AxisLoadError) => void
-    pan?: PanConfig
-  } = $props()
+      }) => void
+      on_bar_hover?: (
+        data: { value: number; count: number; property: string; event: MouseEvent } | null,
+      ) => void
+      ref_lines?: RefLine[]
+      on_ref_line_click?: (event: RefLineEvent) => void
+      on_ref_line_hover?: (event: RefLineEvent | null) => void
+      on_series_toggle?: (series_idx: number) => void
+      // Interactive axis props
+      data_loader?: DataLoaderFn
+      on_axis_change?: (
+        axis: `x` | `x2` | `y` | `y2`,
+        key: string,
+        new_series: DataSeries[],
+      ) => void
+      on_error?: (error: AxisLoadError) => void
+      pan?: PanConfig
+      marginals?: MarginalsProp
+    } = $props()
 
   // Local state for controls (initialized from props, owned by this component)
   // Include key AXIS_DEFAULTS props (range, ticks, scale_type) that PlotControls needs
@@ -169,25 +174,29 @@
   let bar = $state(untrack(() => ({ ...DEFAULTS.histogram.bar, ...bar_init })))
   let x_axis = $state(untrack(() => ({ ...axis_state_defaults, ...x_axis_init })))
   // x2-axis needs different default label_shift for top-side positioning
-  let x2_axis = $state(untrack(() => ({
-    ...axis_state_defaults,
-    label_shift: { x: 0, y: 40 },
-    ...x2_axis_init,
-  })))
+  let x2_axis = $state(
+    untrack(() => ({
+      ...axis_state_defaults,
+      label_shift: { x: 0, y: AXIS_TITLE_OFFSET },
+      ...x2_axis_init,
+    })),
+  )
   let y_axis = $state(untrack(() => ({ ...axis_state_defaults, ...y_axis_init })))
   // y2 title stays vertically centered; its x position is computed by y2_axis_label_x
-  let y2_axis = $state(untrack(() => ({
-    ...axis_state_defaults,
-    label_shift: { x: 0, y: 0 },
-    ...y2_axis_init,
-  })))
-  let display = $state(
-    untrack(() => ({ ...DEFAULTS.histogram.display, ...display_init })),
+  let y2_axis = $state(
+    untrack(() => ({
+      ...axis_state_defaults,
+      label_shift: { x: 0, y: 0 },
+      ...y2_axis_init,
+    })),
   )
+  let display = $state(untrack(() => ({ ...DEFAULTS.histogram.display, ...display_init })))
 
   // Merge component-specific defaults with local state (format comes from here, not AXIS_DEFAULTS)
-  const final_x_axis = $derived({ label: `Value`, format: `.2~s`, ...x_axis })
-  const final_x2_axis = $derived({ label: `Value`, format: `.2~s`, ...x2_axis })
+  // No default tick format: PlotAxis falls back to format_num, which uses SI
+  // prefixes above 1 but plain decimals below (0.2 must not render as 200m)
+  const final_x_axis = $derived({ label: `Value`, ...x_axis })
+  const final_x2_axis = $derived({ label: `Value`, ...x2_axis })
   const final_y_axis = $derived({ label: `Count`, format: `d`, ...y_axis })
   const final_bar = $derived({ ...DEFAULTS.histogram.bar, ...bar })
   const final_y2_axis = $derived({ label: `Count`, format: `d`, ...y2_axis })
@@ -206,33 +215,11 @@
   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 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)
+  let ref_lines_by_z = $derived(group_ref_lines_by_z(index_ref_lines(ref_lines)))
 
   // Legend placement stability state
   let legend_element = $state<HTMLDivElement | undefined>()
   let hovered_legend_series_idx = $state<number | null>(null)
-  const legend_hover = create_hover_lock()
-  const dim_tracker = create_dimension_tracker()
-  let has_initial_legend_placement = $state(false)
-
-  // Clear pending hover lock timeout on unmount
-  $effect(() => () => legend_hover.cleanup())
 
   // Derived data
   type IndexedSeries = { series_data: DataSeries; series_idx: number }
@@ -250,29 +237,24 @@
   let selected_series_entries = $derived<IndexedSeries[]>(
     series
       .map((series_data: DataSeries, series_idx: number) => ({ series_data, series_idx }))
-      .filter(({ series_data }) =>
-        (series_data.visible ?? true) &&
-        (mode !== `single` || !selected_property || series_data.label === selected_property)
+      .filter(
+        ({ series_data }) =>
+          (series_data.visible ?? true) &&
+          (mode !== `single` || !selected_property || series_data.label === selected_property),
       ),
   )
-  let selected_series = $derived(
-    selected_series_entries.map(({ series_data }) => series_data),
-  )
+  let selected_series = $derived(selected_series_entries.map(({ series_data }) => series_data))
 
   // Separate series by y-axis
   let y1_series = $derived(
     selected_series.filter((srs: DataSeries) => (srs.y_axis ?? `y1`) === `y1`),
   )
-  let y2_series = $derived(
-    selected_series.filter((srs: DataSeries) => srs.y_axis === `y2`),
-  )
-  let x2_series = $derived(
-    selected_series.filter((srs: DataSeries) => srs.x_axis === `x2`),
-  )
+  let y2_series = $derived(selected_series.filter((srs: DataSeries) => srs.y_axis === `y2`))
+  let x2_series = $derived(selected_series.filter((srs: DataSeries) => srs.x_axis === `x2`))
 
   let auto_ranges = $derived.by(() => {
     // Only x1 series contribute to the x1 auto-range (x2 series get their own domain below)
-    const x1_values = selected_series.flatMap((srs) => srs.x_axis === `x2` ? [] : srs.y)
+    const x1_values = selected_series.flatMap((srs) => (srs.x_axis === `x2` ? [] : srs.y))
     const auto_x = get_nice_data_range(
       x1_values.map((val) => ({ x: val, y: 0 })),
       ({ x }) => x,
@@ -283,68 +265,29 @@
     )
 
     const x2_values = x2_series.flatMap((srs: DataSeries) => srs.y)
-    const auto_x2 = x2_values.length > 0
-      ? get_nice_data_range(
-        x2_values.map((val) => ({ x: val, y: 0 })),
-        ({ x }) => x,
-        final_x2_axis.range ?? [null, null],
-        final_x2_axis.scale_type ?? `linear`,
-        range_padding,
-        false,
-      )
-      : [0, 1] as Vec2
-
-    // Calculate y-range for a specific set of series
-    const calc_y_range = (
-      series_list: typeof selected_series,
-      y_limit: [number | null, number | null],
-      scale_type: ScaleType,
-    ): Vec2 => {
-      const type_name = get_scale_type_name(scale_type)
-      if (series_list.length === 0) {
-        const fallback = type_name === `log` ? 1 : 0
-        return [fallback, 1]
-      }
-      // Bin each series over the domain of the x-axis it renders on (d3 bin() drops
-      // out-of-domain values, so binning x2 series over the x1 domain skews max_count)
-      const max_count = Math.max(
-        0,
-        ...series_list.map((srs: DataSeries) => {
-          const hist = bin().domain(srs.x_axis === `x2` ? auto_x2 : auto_x).thresholds(bins)
-          return max(hist(srs.y), (data) => data.length) || 0
-        }),
-      )
-
-      // If there's effectively no data, avoid log-range issues (counts can't be <= 0 on log)
-      if (max_count <= 0) {
-        const fallback = type_name === `log` ? 1 : 0
-        return [fallback, 1]
-      }
-
-      const [y0, y1] = get_nice_data_range(
-        [{ x: 0, y: 0 }, { x: max_count, y: 0 }],
-        ({ x }) => x,
-        y_limit,
-        scale_type,
-        range_padding,
-        false,
-      )
-      // For log scale, minimum must be >= 1 (count can't be 0 on log)
-      // For linear/arcsinh, start from 0
-      const y_min = type_name === `log` ? Math.max(1, y0) : Math.max(0, y0)
-      return [y_min, y1]
-    }
-
-    const y1_range = calc_y_range(
-      y1_series,
-      final_y_axis.range ?? [null, null],
-      final_y_axis.scale_type ?? `linear`,
-    )
-    const y2_auto_range = calc_y_range(
-      y2_series,
-      final_y2_axis.range ?? [null, null],
-      final_y2_axis.scale_type ?? `linear`,
-    )
+    const auto_x2 =
+      x2_values.length > 0
+        ? get_nice_data_range(
+            x2_values.map((val) => ({ x: val, y: 0 })),
+            ({ x }) => x,
+            final_x2_axis.range ?? [null, null],
+            final_x2_axis.scale_type ?? `linear`,
+            range_padding,
+            false,
+          )
+        : ([0, 1] as Vec2)
+
+    const count_cfg = { x_domain: auto_x, x2_domain: auto_x2, bin_count: bins, range_padding }
+    const y1_range = compute_count_range(y1_series, {
+      ...count_cfg,
+      scale_type: final_y_axis.scale_type ?? `linear`,
+      y_limit: log_safe_range(final_y_axis),
+    })
+    const y2_auto_range = compute_count_range(y2_series, {
+      ...count_cfg,
+      scale_type: final_y2_axis.scale_type ?? `linear`,
+      y_limit: log_safe_range(final_y2_axis),
+    })
 
     return { x: auto_x, x2: auto_x2, y: y1_range, y2: y2_auto_range }
   })
@@ -366,10 +309,16 @@
   })
 
   $effect(() => {
-    // Supports one-sided range pinning (null bounds fall back to auto); returns null
-    // for transient non-finite bounds (skip: writing NaN breaks scales and loops here)
+    // Supports one-sided range pinning (null bounds fall back to auto); returns null for transient
+    // non-finite bounds (skip: writing NaN breaks scales and loops here). y/y2 ranges are
+    // log-sanitized so an invalid (<= 0) log lower falls back to the auto count minimum.
     const next = resolve_axis_ranges(
-      { x: final_x_axis, x2: final_x2_axis, y: final_y_axis, y2: final_y2_axis },
+      {
+        x: final_x_axis,
+        x2: final_x2_axis,
+        y: { range: log_safe_range(final_y_axis) },
+        y2: { range: log_safe_range(final_y2_axis) },
+      },
       auto_ranges,
     )
     if (!next) return
@@ -378,15 +327,16 @@
     // (reading + writing the same state otherwise causes effect_update_depth_exceeded).
     const init = untrack(() => ranges.initial)
     if (!vec2_equal(init.x, next.x)) [ranges.initial.x, ranges.current.x] = [next.x, next.x]
-    if (!vec2_equal(init.x2, next.x2)) [ranges.initial.x2, ranges.current.x2] = [next.x2, next.x2]
+    if (!vec2_equal(init.x2, next.x2))
+      [ranges.initial.x2, ranges.current.x2] = [next.x2, next.x2]
     if (!vec2_equal(init.y, next.y)) [ranges.initial.y, ranges.current.y] = [next.y, next.y]
-    if (!vec2_equal(init.y2, next.y2)) [ranges.initial.y2, ranges.current.y2] = [next.y2, next.y2]
+    if (!vec2_equal(init.y2, next.y2))
+      [ranges.initial.y2, ranges.current.y2] = [next.y2, next.y2]
   })
 
   // Layout: dynamic padding based on tick label widths
-  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 based on tick label widths (untrack breaks circular dependency)
   $effect(() => {
@@ -394,19 +344,23 @@
     const current_ticks_y = untrack(() => ticks.y)
     const current_ticks_y2 = untrack(() => ticks.y2)
 
-    const new_pad = width && height && current_ticks_y.length > 0
-      ? calc_auto_padding({
-        padding,
-        default_padding,
-        x2_axis: { ...final_x2_axis, tick_values: current_ticks_x2 },
-        y_axis: { ...final_y_axis, tick_values: current_ticks_y },
-        y2_axis: { ...final_y2_axis, tick_values: current_ticks_y2 },
-      })
-      : filter_padding(padding, default_padding)
+    const new_pad =
+      width && height && current_ticks_y.length > 0
+        ? calc_auto_padding({
+            padding,
+            default_padding: DEFAULT_PLOT_PADDING,
+            x2_axis: { ...final_x2_axis, tick_values: current_ticks_x2 },
+            y_axis: { ...final_y_axis, tick_values: current_ticks_y },
+            y2_axis: { ...final_y2_axis, tick_values: current_ticks_y2 },
+          })
+        : filter_padding(padding, DEFAULT_PLOT_PADDING)
 
     // Add y2 axis label space (calc_auto_padding only accounts for tick labels)
     if (
-      width && height && y2_series.length > 0 && current_ticks_y2.length > 0 &&
+      width &&
+      height &&
+      y2_series.length > 0 &&
+      current_ticks_y2.length > 0 &&
       final_y2_axis.label
     ) {
       const inside = final_y2_axis.tick?.label?.inside ?? false
@@ -422,28 +376,31 @@
 
     // Add x2 axis label space (mirroring y2 logic for top padding)
     if (
-      width && height && x2_series.length > 0 && current_ticks_x2.length > 0 &&
+      width &&
+      height &&
+      x2_series.length > 0 &&
+      current_ticks_x2.length > 0 &&
       final_x2_axis.label
     ) {
       const inside = final_x2_axis.tick?.label?.inside ?? false
-      const tick_shift = inside
-        ? 0
-        : Math.abs(final_x2_axis.tick?.label?.shift?.y ?? 0) + 8
+      const tick_shift = inside ? 0 : Math.abs(final_x2_axis.tick?.label?.shift?.y ?? 0) + 8
       const label_thickness = Math.round(12 * 1.2)
-      new_pad.t = Math.max(
-        new_pad.t,
-        tick_shift + LABEL_GAP_DEFAULT + label_thickness,
-      )
+      new_pad.t = Math.max(new_pad.t, tick_shift + LABEL_GAP_DEFAULT + label_thickness)
     }
 
     // Only update if padding actually changed
     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
   })
 
-  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 filled bar is modeled as a
@@ -481,66 +438,64 @@
       height,
       obstacles_norm,
       // gate on legend_element (the render signal) not legend_data, whose entries can read pad
-      legend: show_legend && legend != null && series.length > 1 &&
-          legend_element != null && !legend_has_explicit_pos
-        ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
-        : null,
-    })
+      legend:
+        show_legend &&
+        legend != null &&
+        series.length > 1 &&
+        legend_element != null &&
+        !legend_has_explicit_pos
+          ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
+          : null,
+    }),
+  )
+  // Resolve marginals (default: CDF strip on top) and reserve outer-band padding. Pass the
+  // histogram's `bins` as the marginal's histogram bin count (NOT `size`/thickness) so a
+  // `histogram` marginal inherits the main binning via normalize_marginals' merge; `cdf`
+  // ignores `bins`. Samples lie along x and equal series.y, so the adapter maps y -> x.
+  const resolved_marginals = $derived(
+    normalize_marginals(marginals, { top: { type: `cdf`, bins } }),
+  )
+  const pad = $derived(add_sides(decor.pad, reserve_marginal_pad(resolved_marginals)))
+  // a lone series uses the configured bar color; with multiple, each gets its own
+  const series_color = (series_data: DataSeries) =>
+    selected_series.length === 1 ? final_bar.color : extract_series_color(series_data)
+  const marginal_series = $derived<MarginalSeriesInput[]>(
+    selected_series_entries.map(({ series_data }) => ({
+      x: series_data.y ?? [],
+      color: series_color(series_data),
+      label: series_data.label,
+      visible: true,
+      x_axis: series_data.x_axis,
+      y_axis: series_data.y_axis,
+    })),
+  )
+  const marginal_has_axis = $derived(
+    marginal_axis_presence(x2_series.length > 0, y2_series.length > 0),
   )
-  const pad = $derived(decor.pad)
   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)
 
-  // Scales and data
-  let scales = $derived({
-    x: create_scale(
-      final_x_axis.scale_type ?? `linear`,
-      ranges.current.x,
-      [pad.l, width - pad.r],
-    ),
-    x2: create_scale(
-      final_x2_axis.scale_type ?? `linear`,
-      ranges.current.x2,
-      [pad.l, width - pad.r],
-    ),
-    y: create_scale(
-      final_y_axis.scale_type ?? `linear`,
-      ranges.current.y,
-      [height - pad.b, pad.t],
-    ),
-    y2: create_scale(
-      final_y2_axis.scale_type ?? `linear`,
-      ranges.current.y2,
-      [height - pad.b, pad.t],
+  // Scales and data (x/x2 share the horizontal pixel span, y/y2 the inverted vertical one)
+  let scales = $derived(
+    create_axis_scales(
+      { x: final_x_axis, x2: final_x2_axis, y: final_y_axis, y2: final_y2_axis },
+      ranges.current,
+      pad,
+      width,
+      height,
     ),
-  })
+  )
 
   // Pad-independent binning (no pixel scales) so the auto-place obstacle field can reuse it
   let histogram_bins = $derived.by(() => {
     if (selected_series.length === 0 || !width || !height) return []
-    const hist_generator = bin()
-      .domain([ranges.current.x[0], ranges.current.x[1]])
-      .thresholds(bins)
-    const x2_hist_generator = x2_series.length > 0
-      ? bin().domain([ranges.current.x2[0], ranges.current.x2[1]]).thresholds(bins)
-      : null
-    return selected_series_entries.map(({ series_data, series_idx }) => {
-      const use_x2 = series_data.x_axis === `x2`
-      const active_hist = use_x2 && x2_hist_generator ? x2_hist_generator : hist_generator
-      const bins_arr = active_hist(series_data.y)
-      return {
-        id: series_data.id ?? series_idx,
-        series_idx,
-        label: series_data.label || `Series ${series_idx + 1}`,
-        color: selected_series.length === 1
-          ? final_bar.color
-          : extract_series_color(series_data),
-        bins: bins_arr,
-        max_count: max(bins_arr, (data) => data.length) || 0,
-        x_axis: series_data.x_axis,
-        y_axis: series_data.y_axis,
-      }
+    return compute_histogram_bins(selected_series_entries, {
+      x_domain: ranges.current.x,
+      x2_domain: ranges.current.x2,
+      has_x2: x2_series.length > 0,
+      bin_count: bins,
+      series_color,
     })
   })
   // Render-time data adds the pixel scales (pad-dependent)
@@ -552,43 +507,25 @@
     })),
   )
 
-  let ticks = $derived({
-    x: width && height
-      ? generate_ticks(
-        ranges.current.x,
-        final_x_axis.scale_type ?? `linear`,
-        final_x_axis.ticks,
-        scales.x,
-        { default_count: 8 },
-      )
-      : [],
-    x2: width && height && x2_series.length > 0
-      ? generate_ticks(
-        ranges.current.x2,
-        final_x2_axis.scale_type ?? `linear`,
-        final_x2_axis.ticks,
-        scales.x2,
-        { default_count: 8 },
-      )
-      : [],
-    y: width && height
-      ? generate_ticks(
-        ranges.current.y,
-        final_y_axis.scale_type ?? `linear`,
-        final_y_axis.ticks,
-        scales.y,
-        { default_count: 6 },
-      )
-      : [],
-    y2: width && height && y2_series.length > 0
-      ? generate_ticks(
-        ranges.current.y2,
-        final_y2_axis.scale_type ?? `linear`,
-        final_y2_axis.ticks,
-        scales.y2,
-        { default_count: 6 },
-      )
-      : [],
+  let ticks = $derived.by(() => {
+    // x/y always render; x2/y2 only when their series exist (else their scale is a [0,1] sentinel)
+    const axis_ticks = (
+      axis: typeof final_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,
+          })
+        : []
+    const x = axis_ticks(final_x_axis, ranges.current.x, scales.x, 8)
+    const x2 = axis_ticks(final_x2_axis, ranges.current.x2, scales.x2, 8, x2_series.length > 0)
+    const y = axis_ticks(final_y_axis, ranges.current.y, scales.y, 6)
+    const y2 = axis_ticks(final_y2_axis, ranges.current.y2, scales.y2, 6, y2_series.length > 0)
+    return { x, x2, y, y2 }
   })
 
   // Cache measured tick-label widths so expensive text measurement only runs
@@ -644,249 +581,61 @@
     return result
   })
 
-  // Tweened legend coordinates for smooth animation - create once, update target via effect
-  // untrack() explicitly captures initial tween config (intentional - config set once at mount)
-  const tweened_legend_coords = new Tween(
-    { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...legend?.tween })),
-  )
-
-  // Update legend position with stability checks
-  $effect(() => {
-    if (!width || !height || !legend_placement) return
-
-    // Track dimensions for resize detection
-    const dims_changed = dim_tracker.has_changed(width, height)
-    if (dims_changed) dim_tracker.update(width, height)
-
-    // Only update if: resize occurred, OR (not hover-locked AND (responsive OR not yet initially placed))
-    const is_responsive = legend?.responsive ?? false
-    const should_update = dims_changed || (!legend_hover.is_locked.current &&
-      (is_responsive || !has_initial_legend_placement))
-
-    if (should_update) {
-      tweened_legend_coords.set(
-        { x: legend_placement.x, y: legend_placement.y },
-        // Skip animation on initial placement to avoid jump from (0, 0)
-        has_initial_legend_placement ? undefined : { duration: 0 },
-      )
-      // Only lock position after we have actual measured size
-      if (legend_element) {
-        has_initial_legend_placement = true
-      }
-    }
+  // Tweened legend coordinates with shared placement stability gating
+  const legend_tween = create_placed_tween({
+    placement: () => legend_placement,
+    dims: () => ({ width, height }),
+    responsive: () => legend?.responsive ?? false,
+    element: () => legend_element,
+    tween: () => legend?.tween,
   })
 
-  // Event handlers
-  const handle_zoom = () => {
-    if (!drag_state.start || !drag_state.current) return
-    const start_x = scales.x.invert(drag_state.start.x)
-    const end_x = scales.x.invert(drag_state.current.x)
-    const start_x2 = scales.x2.invert(drag_state.start.x)
-    const end_x2 = scales.x2.invert(drag_state.current.x)
-    const start_y = scales.y.invert(drag_state.start.y)
-    const end_y = scales.y.invert(drag_state.current.y)
-    const start_y2 = scales.y2.invert(drag_state.start.y)
-    const end_y2 = scales.y2.invert(drag_state.current.y)
-
-    if (typeof start_x === `number` && typeof end_x === `number`) {
-      const dx = Math.abs(drag_state.start.x - drag_state.current.x)
-      const dy = Math.abs(drag_state.start.y - drag_state.current.y)
-      if (dx > 5 && dy > 5) {
-        // Update axis ranges to trigger reactivity and prevent effect from overriding
-        x_axis = { ...x_axis, range: sorted_range(start_x, end_x) }
-        if (x2_series.length > 0) {
-          x2_axis = { ...x2_axis, range: sorted_range(start_x2, end_x2) }
-        }
-        y_axis = { ...y_axis, range: sorted_range(start_y, end_y) }
-        // 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 = { ...y2_axis, range: sorted_range(start_y2, end_y2) }
-        }
+  // Shared pan/zoom/touch/drag-rect interaction controller
+  const pan_zoom = create_pan_zoom({
+    ranges: () => ranges.current,
+    scale_type: (axis) =>
+      ({ x: final_x_axis, x2: final_x2_axis, y: final_y_axis, y2: final_y2_axis })[axis]
+        .scale_type,
+    // Clamp to at least 1 to avoid Infinity deltas when padding equals container size
+    plot_dims: () => ({
+      width: Math.max(1, width - pad.l - pad.r),
+      height: Math.max(1, height - pad.t - pad.b),
+    }),
+    pan: () => pan,
+    set_range: (axis, range) => (ranges.current[axis] = range),
+    svg: () => svg_element,
+    on_rect_zoom: (start, current) => {
+      // Update axis ranges to trigger reactivity and prevent effect from overriding
+      const next_x = invert_rect_range(scales.x, start.x, current.x)
+      if (!next_x) return
+      x_axis = { ...x_axis, range: next_x }
+      // gate x2/y2 on series presence: their scales are [0, 1] sentinels otherwise,
+      // so inverting would store a phantom range in the bindable prop
+      const next_x2 =
+        x2_series.length > 0 ? invert_rect_range(scales.x2, start.x, current.x) : null
+      if (next_x2) x2_axis = { ...x2_axis, range: next_x2 }
+      const next_y = invert_rect_range(scales.y, start.y, current.y)
+      if (next_y) y_axis = { ...y_axis, range: next_y }
+      const next_y2 =
+        y2_series.length > 0 ? invert_rect_range(scales.y2, start.y, current.y) : null
+      if (next_y2) y2_axis = { ...y2_axis, range: next_y2 }
+    },
+    on_reset: () => {
+      // Reset zoom to initial ranges (undo any pan/zoom)
+      ranges.current = {
+        x: [...ranges.initial.x] as Vec2,
+        x2: [...ranges.initial.x2] as Vec2,
+        y: [...ranges.initial.y] as Vec2,
+        y2: [...ranges.initial.y2] as Vec2,
       }
-    }
-  }
-
-  const on_window_mouse_move = (evt: MouseEvent) => {
-    if (!drag_state.start || !drag_state.bounds) return
-    drag_state.current = {
-      x: evt.clientX - drag_state.bounds.left,
-      y: evt.clientY - drag_state.bounds.top,
-    }
-  }
-
-  const on_window_mouse_up = () => {
-    handle_zoom()
-    drag_state = { start: null, current: null, bounds: null }
-    window.removeEventListener(`mousemove`, on_window_mouse_move)
-    window.removeEventListener(`mouseup`, on_window_mouse_up)
-    document.body.style.cursor = `default`
-  }
-
-  // Pan/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).
-  // Plot dims clamped to 1px so degenerate containers can't produce Infinity deltas.
-  const pan_all_axes = (init: InitialRanges, dx_px: number, dy_px: number) => {
-    const plot_width = Math.max(1, width - pad.l - pad.r)
-    const plot_height = Math.max(1, height - pad.t - pad.b)
-    ranges.current.x = pan_range_by_pixels(init.initial_x_range, dx_px, plot_width, final_x_axis.scale_type)
-    ranges.current.x2 = pan_range_by_pixels(init.initial_x2_range, dx_px, plot_width, final_x2_axis.scale_type)
-    ranges.current.y = pan_range_by_pixels(init.initial_y_range, dy_px, plot_height, final_y_axis.scale_type)
-    ranges.current.y2 = pan_range_by_pixels(init.initial_y2_range, dy_px, plot_height, final_y2_axis.scale_type)
-  }
-  const zoom_all_axes = (init: InitialRanges, factor: number) => {
-    ranges.current.x = zoom_range_by_factor(init.initial_x_range, factor, final_x_axis.scale_type)
-    ranges.current.x2 = zoom_range_by_factor(init.initial_x2_range, factor, final_x2_axis.scale_type)
-    ranges.current.y = zoom_range_by_factor(init.initial_y_range, factor, final_y_axis.scale_type)
-    ranges.current.y2 = zoom_range_by_factor(init.initial_y2_range, factor, final_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 = { ...x2_axis, range: [null, null] }
+      y_axis = { ...y_axis, range: [null, null] }
+      y2_axis = { ...y2_axis, 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()
-
-    // Clamp to at least 1 to avoid Infinity deltas when padding equals container size
-    const plot_width = Math.max(1, width - pad.l - pad.r)
-    const plot_height = Math.max(1, height - pad.t - pad.b)
-    const sensitivity = pan?.wheel_sensitivity ?? 1
-
-    // 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, plot_width, final_x_axis.scale_type)
-      ranges.current.x2 = pan_range_by_pixels(ranges.current.x2, dx, plot_width, final_x2_axis.scale_type)
-    } else {
-      const dy = evt.deltaY * sensitivity
-      ranges.current.y = pan_range_by_pixels(ranges.current.y, dy, plot_height, final_y_axis.scale_type)
-      ranges.current.y2 = pan_range_by_pixels(ranges.current.y2, dy, plot_height, final_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
-
-    // 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
-  }
-
-  function handle_double_click() {
-    // Reset zoom to initial ranges (undo any pan/zoom)
-    ranges.current.x = [...ranges.initial.x] as [number, number]
-    ranges.current.x2 = [...ranges.initial.x2] as [number, number]
-    ranges.current.y = [...ranges.initial.y] as [number, number]
-    ranges.current.y2 = [...ranges.initial.y2] as [number, number]
-    // Also reset axis props so future data changes recalculate auto ranges
-    x_axis = { ...x_axis, range: [null, null] }
-    x2_axis = { ...x2_axis, range: [null, null] }
-    y_axis = { ...y_axis, range: [null, null] }
-    y2_axis = { ...y2_axis, range: [null, null] }
-  }
+  onDestroy(() => pan_zoom.destroy())
 
   function handle_mouse_move(
     evt: MouseEvent,
@@ -918,7 +667,10 @@
     on_bar_hover?.({ value, count, property, event: evt })
   }
 
-  const legend_vis = create_legend_visibility(() => series, (next) => (series = next))
+  const legend_vis = create_legend_visibility(
+    () => series,
+    (next) => (series = next),
+  )
 
   // Set theme-aware background when entering fullscreen
   $effect(() => {
@@ -926,31 +678,24 @@
   })
 
   // State accessors for shared axis change handler
+  // Spread into existing state in each setter to preserve merged type structure
   const axis_state: AxisChangeState<DataSeries> = {
-    get_axis: (axis) => {
-      if (axis === `x`) return x_axis
-      if (axis === `x2`) return x2_axis
-      if (axis === `y`) return y_axis
-      return y2_axis
-    },
-    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 === `y`) y_axis = { ...y_axis, ...config }
-      else y2_axis = { ...y2_axis, ...config }
+    axes: {
+      x: { get: () => x_axis, set: (config) => (x_axis = { ...x_axis, ...config }) },
+      x2: { get: () => x2_axis, set: (config) => (x2_axis = { ...x2_axis, ...config }) },
+      y: { get: () => y_axis, set: (config) => (y_axis = { ...y_axis, ...config }) },
+      y2: { get: () => y2_axis, set: (config) => (y2_axis = { ...y2_axis, ...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>
 
@@ -988,11 +733,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
@@ -1017,38 +760,25 @@
     bind:this={svg_element}
     role="application"
     aria-label={rest[`aria-label`] ??
-    ([final_x_axis.label, final_y_axis.label].filter(Boolean).join(` vs `) ||
-      `Histogram`)}
+      ([final_x_axis.label, final_y_axis.label].filter(Boolean).join(` vs `) || `Histogram`)}
     tabindex="0"
-    onfocusin={() => (is_focused = true)}
-    onfocusout={() => (is_focused = false)}
+    onfocusin={() => pan_zoom.set_focused(true)}
+    onfocusout={() => pan_zoom.set_focused(false)}
     onmouseenter={() => (hovered = true)}
-    onmousedown={handle_mouse_down}
+    onmousedown={pan_zoom.on_mouse_down}
     onmouseleave={() => {
       hovered = false
       hover_info = null
       on_bar_hover?.(null)
     }}
-    ondblclick={handle_double_click}
-    onwheel={handle_wheel}
-    ontouchstart={handle_touch_start}
-    ontouchmove={handle_touch_move}
-    ontouchend={handle_touch_end}
-    ontouchcancel={handle_touch_end}
-    style:cursor={pan_drag_state
-    ? `grabbing`
-    : shift_held && pan?.enabled !== false
-    ? `grab`
-    : `crosshair`}
-    onkeydown={(event) => {
-      if (event.key === `Escape` && drag_state.start) {
-        drag_state = { start: null, current: null, bounds: null }
-      }
-      if ([`Enter`, ` `].includes(event.key)) {
-        event.preventDefault()
-        handle_double_click()
-      }
-    }}
+    ondblclick={pan_zoom.reset_view}
+    onwheel={pan_zoom.on_wheel}
+    ontouchstart={pan_zoom.on_touch_start}
+    ontouchmove={pan_zoom.on_touch_move}
+    ontouchend={pan_zoom.on_touch_end}
+    ontouchcancel={pan_zoom.on_touch_end}
+    style:cursor={pan_zoom.cursor}
+    onkeydown={pan_zoom.on_key_down}
   >
     <!-- Define clip path for chart area -->
     <defs>
@@ -1065,7 +795,7 @@
     <!-- Reference lines: below grid (must render first to appear behind grid) -->
     {@render ref_lines_layer(ref_lines_by_z.below_grid)}
 
-    <ZoomRect start={drag_state.start} current={drag_state.current} />
+    <ZoomRect start={pan_zoom.drag_start} current={pan_zoom.drag_current} />
 
     <ZeroLines
       {display}
@@ -1097,17 +827,17 @@
     <!-- X-axis -->
     <PlotAxis
       side="x"
-      ticks={ticks.x as number[]}
+      ticks={ticks.x}
       place={scales.x}
       axis={final_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, final_x_axis.ticks)}
       label_x={(pad.l + width - pad.r) / 2 + (final_x_axis.label_shift?.x ?? 0)}
-      label_y={height - 10 + (final_x_axis.label_shift?.y ?? 0)}
+      label_y={height - pad.b + AXIS_TITLE_OFFSET + (final_x_axis.label_shift?.y ?? 0)}
       axis_loading={axis_loading === `x`}
       on_axis_change={(key) => handle_axis_change(`x`, key)}
     />
@@ -1116,17 +846,17 @@
     {#if x2_series.length > 0}
       <PlotAxis
         side="x2"
-        ticks={ticks.x2 as number[]}
+        ticks={ticks.x2}
         place={scales.x2}
         axis={final_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, final_x2_axis.ticks)}
         label_x={(pad.l + width - pad.r) / 2 + (final_x2_axis.label_shift?.x ?? 0)}
-        label_y={Math.max(12, pad.t - (final_x2_axis.label_shift?.y ?? 40))}
+        label_y={Math.max(12, pad.t - (final_x2_axis.label_shift?.y ?? AXIS_TITLE_OFFSET))}
         axis_loading={axis_loading === `x2`}
         on_axis_change={(key) => handle_axis_change(`x2`, key)}
       />
@@ -1135,10 +865,10 @@
     <!-- Y-axis -->
     <PlotAxis
       side="y"
-      ticks={ticks.y as number[]}
+      ticks={ticks.y}
       place={scales.y}
       axis={final_y_axis}
-      domain={ranges.current.y as Vec2}
+      domain={ranges.current.y}
       {pad}
       {width}
       {height}
@@ -1146,7 +876,8 @@
       tick_label={(tick) => get_tick_label(tick, final_y_axis.ticks)}
       label_x={Math.max(
         12,
-        pad.l - (final_y_axis.tick?.label?.inside ? 0 : tick_label_widths.y_max) -
+        pad.l -
+          (final_y_axis.tick?.label?.inside ? 0 : tick_label_widths.y_max) -
           LABEL_GAP_DEFAULT,
       ) + (final_y_axis.label_shift?.x ?? 0)}
       label_y={pad.t + (height - pad.t - pad.b) / 2 + (final_y_axis.label_shift?.y ?? 0)}
@@ -1158,10 +889,10 @@
     {#if y2_series.length > 0}
       <PlotAxis
         side="y2"
-        ticks={ticks.y2 as number[]}
+        ticks={ticks.y2}
         place={scales.y2}
         axis={final_y2_axis}
-        domain={ranges.current.y2 as Vec2}
+        domain={ranges.current.y2}
         {pad}
         {width}
         {height}
@@ -1175,24 +906,19 @@
     {/if}
 
     <!-- Histogram bars (rendered after axes so bars appear above grid lines) -->
-    {#each histogram_data as
-      { id, bins, color, label, x_scale, y_scale, x_axis: srs_x_axis, y_axis, series_idx },
-      idx
-      (id ?? idx)
-    }
+    {#each histogram_data as { id, bins, color, label, x_scale, y_scale, x_axis: srs_x_axis, y_axis, series_idx }, idx (id ?? idx)}
       <g
         class="histogram-series"
         data-series-idx={series_idx}
         clip-path="url(#{clip_path_id})"
-        opacity={hovered_legend_series_idx !== null &&
-            hovered_legend_series_idx !== series_idx
+        opacity={hovered_legend_series_idx !== null && hovered_legend_series_idx !== series_idx
           ? 0.25
           : 1}
       >
         {#each bins as bin, bin_idx (bin_idx)}
           {@const bar_x = x_scale(bin.x0!)}
           {@const bar_width = Math.max(1, Math.abs(x_scale(bin.x1!) - bar_x))}
-          {@const bar_height = Math.max(0, (height - pad.b) - y_scale(bin.length))}
+          {@const bar_height = Math.max(0, height - pad.b - y_scale(bin.length))}
           {@const bar_y = y_scale(bin.length)}
           {@const value = (bin.x0! + bin.x1!) / 2}
           {#if bar_height > 0}
@@ -1212,22 +938,22 @@
               role="button"
               tabindex="0"
               onmousemove={(evt) =>
-              handle_mouse_move(
-                evt,
-                value,
-                bin.length,
-                label,
-                (y_axis ?? `y1`) as `y1` | `y2`,
-                series_idx,
-                (srs_x_axis ?? `x1`) as `x1` | `x2`,
-              )}
+                handle_mouse_move(
+                  evt,
+                  value,
+                  bin.length,
+                  label,
+                  (y_axis ?? `y1`) as `y1` | `y2`,
+                  series_idx,
+                  (srs_x_axis ?? `x1`) as `x1` | `x2`,
+                )}
               onmouseleave={() => {
                 hover_info = null
                 change(null)
                 on_bar_hover?.(null)
               }}
               onclick={(event) =>
-              on_bar_click?.({ value, count: bin.length, property: label, event })}
+                on_bar_click?.({ value, count: bin.length, property: label, event })}
               onkeydown={(event: KeyboardEvent) => {
                 if ([`Enter`, ` `].includes(event.key)) {
                   event.preventDefault()
@@ -1243,6 +969,23 @@
 
     <!-- Reference lines: above all -->
     {@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, final_x_axis),
+        x2: marginal_axis(scales.x2, ranges.current.x2, final_x2_axis),
+        y1: marginal_axis(scales.y, ranges.current.y, final_y_axis),
+        y2: marginal_axis(scales.y2, ranges.current.y2, final_y2_axis),
+      }}
+      id={clip_path_id}
+    />
   </svg>
 
   <!-- Tooltip (outside SVG for proper HTML rendering) -->
@@ -1260,8 +1003,8 @@
       {#if tooltip}
         {@render tooltip({ ...hover_info, fullscreen })}
       {:else}
-        <div>Value: {format_value(value, hover_info.x_axis.format || `.3~s`)}</div>
-        <div>Count: {format_value(count, hover_info.y_axis.format || `.3~s`)}</div>
+        <div>Value: {format_value_or_num(value, hover_info.x_axis.format)}</div>
+        <div>Count: {format_value_or_num(count, hover_info.y_axis.format)}</div>
         {#if mode === `overlay`}<div>{property}</div>{/if}
       {/if}
     </PlotTooltip>
@@ -1300,36 +1043,33 @@
   {/if}
 
   {#if show_legend && legend != null && series.length > 1}
-    {@const legend_left = legend_auto_outside
-    ? legend_outside_x
-    : legend_placement
-    ? tweened_legend_coords.current.x
-    : pad.l + 10}
-    {@const legend_top = legend_auto_outside
-    ? legend_outside_y
-    : legend_placement
-    ? tweened_legend_coords.current.y
-    : pad.t + 10}
+    {@const legend_pos = placed_coords(
+      legend_auto_outside,
+      { x: legend_outside_x, y: legend_outside_y },
+      legend_placement,
+      legend_tween.coords.current,
+      { x: pad.l + 10, y: pad.t + 10 },
+    )}
     <PlotLegend
       bind:root_element={legend_element}
       {...legend}
       series_data={legend_data}
-      on_toggle={legend?.on_toggle ?? ((series_idx: number) => {
-        if (series_idx < 0 || series_idx >= series.length) return
-        legend_vis.on_toggle(series_idx)
-        on_series_toggle(series_idx)
-      })}
+      on_toggle={legend?.on_toggle ??
+        ((series_idx: number) => {
+          if (series_idx < 0 || series_idx >= series.length) return
+          legend_vis.on_toggle(series_idx)
+          on_series_toggle(series_idx)
+        })}
       on_double_click={legend?.on_double_click ?? legend_vis.on_double_click}
-      on_hover_change={legend_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 || ``}
       `}
@@ -1390,7 +1130,9 @@
   .histogram :global(.pane-toggle),
   .histogram .header-controls {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   .histogram:hover :global(.pane-toggle),
   .histogram:hover .header-controls,