matterviz 0.4.0 → 0.4.2

package/dist/plot/box/BoxPlot.svelte

@@ -2,7 +2,7 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
 >
-  import { format_value } from '../../labels'
+  import { format_value_or_num } from '../../labels'
   import { FullscreenToggle, set_fullscreen_bg } from '../../layout'
   import type { Vec2 } from '../../math'
   import type {
@@ -28,32 +28,39 @@
     compute_element_placement,
     PlotAxis,
     PlotLegend,
+    PlotMarginals,
     ReferenceLine,
   } from '..'
+  import type { MarginalSeriesInput, MarginalsProp } from '../core/marginals'
+  import {
+    add_sides,
+    marginal_axis,
+    marginal_axis_presence,
+    normalize_marginals,
+    reserve_marginal_pad,
+  } from '../core/marginals'
   import {
     build_obstacles_norm,
     clip_bar,
     has_explicit_position,
     measured_footprint,
     place_decorations,
+    placed_coords,
   } from '../core/auto-place'
   import { compute_box_stats } from './box-plot'
   import { gaussian_kde, type KdeResult } from './kde'
-  import { create_dimension_tracker, create_hover_lock } from '../core/hover-lock.svelte'
+  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,
-    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,
@@ -63,19 +70,17 @@
   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,
   } from '../core/scales'
-  import type { InitialRanges } from '../core/types'
   import { DEFAULT_SERIES_COLORS } from '../core/types'
   import { unique_id } from '../core/utils'
   import { DEFAULTS } from '../../settings'
   import type { Snippet } from 'svelte'
   import { onDestroy, untrack } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { Tween, type TweenOptions } from 'svelte/motion'
   import { SvelteMap } from 'svelte/reactivity'
   import PlotTooltip from '../core/components/PlotTooltip.svelte'
   import { violin_path } from '../core/svg'
@@ -120,8 +125,8 @@
     y_axis = $bindable({}),
     y2_axis: y2_axis_prop = $bindable({}),
     display = $bindable(DEFAULTS.box.display),
-    range_padding = 0.05,
-    padding = { t: 20, b: 60, l: 60, r: 20 },
+    range_padding = 0,
+    padding = DEFAULT_PLOT_PADDING,
     legend = {},
     show_legend,
     box = {},
@@ -135,7 +140,7 @@
     show_mean = $bindable(DEFAULTS.box.show_mean),
     show_value_labels = false,
     value_label_stat = `median`,
-    value_label_format = `.3~s`,
+    value_label_format = ``,
     kind = $bindable(DEFAULTS.box.kind),
     side = $bindable(DEFAULTS.box.side),
     bandwidth = DEFAULTS.box.bandwidth,
@@ -164,51 +169,55 @@
     header_controls,
     controls_extra,
     pan = {},
+    marginals = false,
     ...rest
-  }: HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotConfig & {
-    series?: BoxPlotSeries<Metadata>[]
-    orientation?: Orientation
-    legend?: LegendConfig | null
-    show_legend?: boolean
-    box?: BoxStyle
-    whisker?: WhiskerStyle
-    median_style?: BoxLineStyle
-    outlier_style?: OutlierStyle
-    whisker_mode?: WhiskerMode
-    whisker_range?: number
-    whisker_percentiles?: [number, number]
-    show_outliers?: boolean
-    show_mean?: boolean
-    show_value_labels?: boolean
-    value_label_stat?: `median` | `mean`
-    value_label_format?: string
-    kind?: ViolinKind
-    side?: ViolinSide
-    bandwidth?: BandwidthOption
-    violin_width?: number
-    violin_style?: ViolinStyle
-    kde_points?: number
-    kde_cut?: number
-    kde_max_samples?: number
-    kde_clip?: [number | null, number | null]
-    tooltip?: Snippet<[BoxHandlerProps<Metadata>]>
-    user_content?: Snippet<[UserContentProps]>
-    header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
-    controls_extra?: Snippet<[{ orientation: Orientation } & Required<PlotConfig>]>
-    change?: (data: BoxHandlerProps<Metadata> | null) => void
-    on_box_click?: (
-      data: BoxHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
-    ) => void
-    on_box_hover?: (
-      data:
-        | (BoxHandlerProps<Metadata> & { event: MouseEvent | FocusEvent | KeyboardEvent })
-        | null,
-    ) => void
-    ref_lines?: RefLine[]
-    on_ref_line_click?: (event: RefLineEvent) => void
-    on_ref_line_hover?: (event: RefLineEvent | null) => void
-    pan?: PanConfig
-  } = $props()
+  }: HTMLAttributes<HTMLDivElement> &
+    BasePlotProps &
+    PlotConfig & {
+      series?: BoxPlotSeries<Metadata>[]
+      orientation?: Orientation
+      legend?: LegendConfig | null
+      show_legend?: boolean
+      box?: BoxStyle
+      whisker?: WhiskerStyle
+      median_style?: BoxLineStyle
+      outlier_style?: OutlierStyle
+      whisker_mode?: WhiskerMode
+      whisker_range?: number
+      whisker_percentiles?: Vec2
+      show_outliers?: boolean
+      show_mean?: boolean
+      show_value_labels?: boolean
+      value_label_stat?: `median` | `mean`
+      value_label_format?: string
+      kind?: ViolinKind
+      side?: ViolinSide
+      bandwidth?: BandwidthOption
+      violin_width?: number
+      violin_style?: ViolinStyle
+      kde_points?: number
+      kde_cut?: number
+      kde_max_samples?: number
+      kde_clip?: [number | null, number | null]
+      tooltip?: Snippet<[BoxHandlerProps<Metadata>]>
+      user_content?: Snippet<[UserContentProps]>
+      header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
+      controls_extra?: Snippet<[{ orientation: Orientation } & Required<PlotConfig>]>
+      change?: (data: BoxHandlerProps<Metadata> | null) => void
+      on_box_click?: (
+        data: BoxHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
+      ) => void
+      on_box_hover?: (
+        data:
+          | (BoxHandlerProps<Metadata> & { event: MouseEvent | FocusEvent | KeyboardEvent })
+          | null,
+      ) => void
+      ref_lines?: RefLine[]
+      on_ref_line_click?: (event: RefLineEvent) => void
+      on_ref_line_hover?: (event: RefLineEvent | null) => void
+      pan?: PanConfig
+      marginals?: MarginalsProp
+    } = $props()
 
   let box_state = $derived({ ...DEFAULTS.box.box, ...box })
   let whisker_state = $derived({ ...DEFAULTS.box.whisker, ...whisker })
@@ -218,24 +227,20 @@
 
   // Merge secondary-axis defaults as deriveds instead of assigning back into the
   // $bindable props (which would push library defaults into the parent's bound state)
-  let y2_axis = $derived(
-    {
-      format: ``,
-      scale_type: `linear`,
-      ticks: 5,
-      range: [null, null],
-      ...y2_axis_prop,
-    } as typeof y2_axis_prop,
-  )
-  let x2_axis = $derived(
-    {
-      format: ``,
-      scale_type: `linear`,
-      ticks: 5,
-      range: [null, null],
-      ...x2_axis_prop,
-    } as typeof x2_axis_prop,
-  )
+  let y2_axis = $derived({
+    format: ``,
+    scale_type: `linear`,
+    ticks: 5,
+    range: [null, null],
+    ...y2_axis_prop,
+  } as typeof y2_axis_prop)
+  let x2_axis = $derived({
+    format: ``,
+    scale_type: `linear`,
+    ticks: 5,
+    range: [null, null],
+    ...x2_axis_prop,
+  } as typeof x2_axis_prop)
 
   let [width, height] = $state([0, 0])
   let wrapper: HTMLDivElement | undefined = $state()
@@ -262,7 +267,7 @@
         whisker_range: srs.whisker_range ?? whisker_range,
         whisker_percentiles: srs.whisker_percentiles ?? whisker_percentiles,
         collect_outliers: show_outliers && draws_box(srs) && (srs.visible ?? true),
-      })
+      }),
     ),
   )
 
@@ -315,9 +320,8 @@
   // KDE per visible violin series, keyed by series index (bandwidth from the full sample)
   let violin_kdes = $derived.by(() => {
     const map = new SvelteMap<number, KdeResult>()
-    const [val_axis, val_axis2] = orientation === `vertical`
-      ? [y_axis, y2_axis]
-      : [x_axis, x2_axis]
+    const [val_axis, val_axis2] =
+      orientation === `vertical` ? [y_axis, y2_axis] : [x_axis, x2_axis]
     for (const box_item of visible_boxes) {
       if (!draws_violin(box_item.series)) continue
       const samples = box_item.series.y ?? []
@@ -325,7 +329,10 @@
       // On a log value axis the KDE grid tail (data_min - cut*bandwidth) is usually <= 0 →
       // NaN pixels + LOG_EPS range pollution. Clamp the grid to the smallest positive sample.
       if ((is_secondary(box_item.series) ? val_axis2 : val_axis).scale_type === `log`) {
-        const min_pos = samples.reduce((min, val) => (val > 0 && val < min ? val : min), Infinity)
+        const min_pos = samples.reduce(
+          (min, val) => (val > 0 && val < min ? val : min),
+          Infinity,
+        )
         // Guard: no positive samples → min_pos is Infinity; leave clip unchanged so the KDE
         // never receives a non-finite lower bound
         if (Number.isFinite(min_pos)) {
@@ -349,7 +356,11 @@
   // The horizontal category pixel axis is inverted, so flip the half-violin side to keep
   // `positive` meaning "above the center line" (vertical/`both` pass through unchanged)
   const to_screen_side = (eff_side: ViolinSide, vertical: boolean): ViolinSide =>
-    vertical || eff_side === `both` ? eff_side : eff_side === `positive` ? `negative` : `positive`
+    vertical || eff_side === `both`
+      ? eff_side
+      : eff_side === `positive`
+        ? `negative`
+        : `positive`
 
   // Peak density per violin, computed once on data change (avoids spreading kde.density into
   // Math.max — unsafe for large kde_points — and re-deriving it on every render/hover).
@@ -366,8 +377,15 @@
   // Which boxes live on the secondary value axis (y2 for vertical, x2 for horizontal)
   const is_secondary = (srs: BoxPlotSeries<Metadata>): boolean =>
     orientation === `vertical` ? srs.y_axis === `y2` : srs.x_axis === `x2`
-  let secondary_boxes = $derived(visible_boxes.filter((box_item) => is_secondary(box_item.series)))
+  let secondary_boxes = $derived(
+    visible_boxes.filter((box_item) => is_secondary(box_item.series)),
+  )
   let has_secondary = $derived(secondary_boxes.length > 0)
+  // The secondary value axis renders transposed by orientation: x2 (top) when horizontal, y2
+  // (right) when vertical. Derive once so axis rendering, ticks, range writes, point picking, and
+  // marginal placement all stay provably in sync.
+  let show_x2 = $derived(has_secondary && orientation === `horizontal`)
+  let show_y2 = $derived(has_secondary && orientation === `vertical`)
 
   // Collect value-axis points (whiskers, quartiles, outliers, KDE tails) for auto-range
   const value_points = (boxes: Box[]): { x: number; y: number }[] =>
@@ -413,8 +431,8 @@
     )
 
     return vertical
-      ? ({ x: cat_range, x2: [0, 1] as Vec2, y: value_primary, y2: value_secondary })
-      : ({ x: value_primary, x2: value_secondary, y: cat_range, y2: [0, 1] as Vec2 })
+      ? { x: cat_range, x2: [0, 1] as Vec2, y: value_primary, y2: value_secondary }
+      : { x: value_primary, x2: value_secondary, y: cat_range, y2: [0, 1] as Vec2 }
   })
 
   let ranges = $state<{
@@ -425,10 +443,14 @@
     current: { x: [0, 1], x2: [0, 1], y: [0, 1], y2: [0, 1] },
   })
 
-  $effect(() => { // sync ranges from axis.range overrides / auto ranges
+  $effect(() => {
+    // sync ranges from axis.range overrides / auto ranges
     // 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
     // untrack the read of `ranges` so the assignment can't re-trigger this effect
     // (reading + writing the same state otherwise causes effect_update_depth_exceeded).
@@ -438,34 +460,40 @@
     }
   })
 
-  const default_padding = { t: 20, b: 60, l: 60, r: 20 }
-  let base_pad = $derived(filter_padding(padding, default_padding))
-
-  $effect(() => { // dynamic padding from tick label widths
-    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)
-    if (
-      width && height && orientation === `vertical` && has_secondary && ticks.y2.length > 0
-    ) {
+  let base_pad = $derived(filter_padding(padding, DEFAULT_PLOT_PADDING))
+
+  $effect(() => {
+    // dynamic padding from tick label widths
+    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)
+    if (width && height && show_y2 && ticks.y2.length > 0) {
       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)
     }
-    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
+    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
   })
 
   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] coords: each box modeled as a whisker-spanning segment
@@ -482,8 +510,12 @@
       const secondary = is_secondary(box_item.series)
       const cat_rng = vertical ? ranges.current.x : ranges.current.y
       const val_rng = vertical
-        ? (secondary ? ranges.current.y2 : ranges.current.y)
-        : (secondary ? ranges.current.x2 : ranges.current.x)
+        ? secondary
+          ? ranges.current.y2
+          : ranges.current.y
+        : secondary
+          ? ranges.current.x2
+          : ranges.current.x
       const cat_span = cat_rng[1] - cat_rng[0]
       const val_span = val_rng[1] - val_rng[0]
       if (cat_span === 0 || val_span === 0) continue
@@ -505,37 +537,70 @@
       width,
       height,
       obstacles_norm,
-      legend: legend != null && should_show_legend && legend_element != null &&
-          !legend_has_explicit_pos
-        ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
-        : null,
-    })
+      legend:
+        legend != null &&
+        should_show_legend &&
+        legend_element != null &&
+        !legend_has_explicit_pos
+          ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
+          : null,
+    }),
+  )
+  // Marginals are opt-in (default prop `false`) and bind to the VALUE axis, pooling each box's
+  // raw samples. The default side follows orientation (value axis = y when vertical, x when
+  // horizontal) so the `marginals` boolean / type-string shorthand land on a meaningful side.
+  // Each box is tagged with its value axis so a primary-axis marginal ignores secondary boxes.
+  const marginal_vertical = $derived(orientation === `vertical`)
+  const resolved_marginals = $derived(
+    normalize_marginals(marginals, marginal_vertical ? { right: true } : { top: true }),
   )
-  const pad = $derived(decor.pad)
+  const pad = $derived(add_sides(decor.pad, reserve_marginal_pad(resolved_marginals)))
+  const marginal_series = $derived<MarginalSeriesInput[]>(
+    visible_boxes.map((box_item) => {
+      const secondary = is_secondary(box_item.series)
+      return {
+        x: marginal_vertical ? undefined : (box_item.series.y ?? []),
+        y: marginal_vertical ? (box_item.series.y ?? []) : undefined,
+        color: box_color(box_item.idx),
+        label: box_item.series.label,
+        visible: true,
+        x_axis: marginal_vertical ? `x1` : secondary ? `x2` : `x1`,
+        y_axis: marginal_vertical ? (secondary ? `y2` : `y1`) : `y1`,
+      }
+    }),
+  )
+  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))
 
-  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,
+    ),
+  )
 
   // Value scale for a box (vertical -> y/y2, horizontal -> x/x2), made log-safe: on a
   // log value axis, stats at values <= 0 (whisker_low is often exactly 0; negative
   // outliers) have no finite pixel. Clamp to LOG_EPS so whiskers/boxes/labels draw
   // toward the plot edge (the clip group crops the overshoot) instead of NaN coords.
-  const box_val_scale = (srs: BoxPlotSeries<Metadata>): (val: number) => number => {
+  const box_val_scale = (srs: BoxPlotSeries<Metadata>): ((val: number) => number) => {
     const vertical = orientation === `vertical`
     const secondary = is_secondary(srs)
     const scale = vertical
-      ? (secondary ? scales.y2 : scales.y)
-      : (secondary ? scales.x2 : scales.x)
-    const axis = vertical ? (secondary ? y2_axis : y_axis) : (secondary ? x2_axis : x_axis)
+      ? secondary
+        ? scales.y2
+        : scales.y
+      : secondary
+        ? scales.x2
+        : scales.x
+    const axis = vertical ? (secondary ? y2_axis : y_axis) : secondary ? x2_axis : x_axis
     return axis.scale_type === `log` ? (val) => scale(Math.max(val, LOG_EPS)) : scale
   }
 
@@ -549,35 +614,32 @@
     return Object.fromEntries(slot_list.map((cat, idx) => [idx, cat]))
   })
 
-  let ticks = $derived({
-    x: width && height
-      ? (cat_axis === `x` ? slot_indices : generate_ticks(
-        ranges.current.x,
-        x_axis.scale_type ?? `linear`,
-        x_axis.ticks,
-        scales.x,
-        { default_count: 8 },
-      ))
-      : [],
-    y: width && height
-      ? (cat_axis === `y` ? slot_indices : generate_ticks(
-        ranges.current.y,
-        y_axis.scale_type ?? `linear`,
-        y_axis.ticks,
-        scales.y,
-        { default_count: 6 },
-      ))
-      : [],
-    y2: width && height && has_secondary && orientation === `vertical`
-      ? generate_ticks(ranges.current.y2, y2_axis.scale_type ?? `linear`, y2_axis.ticks, scales.y2, {
-        default_count: 6,
-      })
-      : [],
-    x2: width && height && has_secondary && orientation === `horizontal`
-      ? 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 slot instead of generated numeric ticks
+    return {
+      x:
+        cat_axis === `x` && width && height
+          ? slot_indices
+          : axis_ticks(x_axis, ranges.current.x, scales.x, 8),
+      y:
+        cat_axis === `y` && width && height
+          ? slot_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),
+    }
   })
 
   let tick_label_widths = $derived({
@@ -586,178 +648,43 @@
     x2_max: measure_max_tick_width(ticks.x2, x2_axis.format ?? ``),
   })
 
-  // === Interaction state (pan / zoom / touch) ===
-  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 })
-  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 = scales.x.invert(drag_state.start.x) as number
-      const x2 = scales.x.invert(drag_state.current.x) as number
-      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 x2_1 = scales.x2.invert(drag_state.start.x) as number
-      const x2_2 = scales.x2.invert(drag_state.current.x) as 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 && Number.isFinite(x1) && Number.isFinite(x2)) {
-        x_axis = { ...x_axis, range: sorted_range(x1, x2) }
-        // the secondary value axis is x2 only in horizontal mode, y2 only in vertical
-        // (is_secondary keys off orientation); writing the off-orientation axis would
-        // store a phantom range from its [0, 1] sentinel scale into the bound prop
-        if (
-          has_secondary && orientation === `horizontal` &&
-          Number.isFinite(x2_1) && Number.isFinite(x2_2)
-        ) {
-          x2_axis_prop = { ...x2_axis_prop, range: sorted_range(x2_1, x2_2) }
-        }
-        y_axis = { ...y_axis, range: sorted_range(y1, y2) }
-        if (
-          has_secondary && orientation === `vertical` &&
-          Number.isFinite(y2_1) && Number.isFinite(y2_2)
-        ) {
-          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) => {
+      const next_x = invert_rect_range(scales.x, start.x, current.x)
+      if (!next_x) return
+      x_axis = { ...x_axis, range: next_x }
+      // the secondary value axis is x2 only in horizontal mode, y2 only in vertical
+      // (is_secondary keys off orientation); writing the off-orientation axis would
+      // store a phantom range from its [0, 1] sentinel scale into the bound 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: () => {
+      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
+      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
-    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 Vec2,
-        initial_x2_range: [...ranges.current.x2] as Vec2,
-        initial_y_range: [...ranges.current.y] as Vec2,
-        initial_y2_range: [...ranges.current.y2] as Vec2,
-      }
-      document.body.style.cursor = `grabbing`
-      window.addEventListener(`mousemove`, on_pan_move)
-      window.addEventListener(`mouseup`, on_pan_end)
-      return
-    }
-    drag_state = { start: coords, current: coords, bounds: svg_element.getBoundingClientRect() }
-    window.addEventListener(`mousemove`, on_window_mouse_move)
-    window.addEventListener(`mouseup`, on_window_mouse_up)
-    evt.preventDefault()
-  }
-
-  function handle_wheel(evt: WheelEvent) {
-    const pan_enabled = pan?.enabled !== false
-    if (!pan_enabled || !is_focused || !shift_held) return
-    evt.preventDefault()
-    const sensitivity = pan?.wheel_sensitivity ?? 1
-    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)
-    }
-  }
-
-  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 Vec2,
-      initial_x2_range: [...ranges.current.x2] as Vec2,
-      initial_y_range: [...ranges.current.y] as Vec2,
-      initial_y2_range: [...ranges.current.y2] as Vec2,
-    }
-  }
-  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
-    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
-    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)
-  }
-  const handle_touch_end = () => (touch_state = null)
+  onDestroy(() => pan_zoom.destroy())
 
   // === Legend ===
   let legend_data = $derived<LegendItem[]>(
@@ -770,7 +697,10 @@
     })),
   )
 
-  const legend_vis = create_legend_visibility(() => series, (next) => (series = next))
+  const legend_vis = create_legend_visibility(
+    () => series,
+    (next) => (series = next),
+  )
 
   let box_points_for_placement = $derived.by(() => {
     if (!width || !height || visible_boxes.length === 0) return []
@@ -787,10 +717,6 @@
   })
 
   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)
-  $effect(() => () => legend_hover.cleanup())
 
   let legend_placement = $derived.by(() => {
     if (!should_show_legend || !width || !height) return null
@@ -804,24 +730,13 @@
     })
   })
 
-  const tweened_legend_coords = new Tween(
-    { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...legend?.tween })),
-  )
-  $effect(() => {
-    if (!width || !height || !legend_placement) return
-    const dims_changed = dim_tracker.has_changed(width, height)
-    if (dims_changed) dim_tracker.update(width, height)
-    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 },
-        has_initial_legend_placement ? undefined : { duration: 0 },
-      )
-      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 / hover ===
@@ -878,16 +793,13 @@
 
   // Value label helper
   const value_label_for = (stats: Box[`stats`]): string =>
-    format_value(value_label_stat === `mean` ? stats.mean : stats.median, value_label_format)
+    format_value_or_num(
+      value_label_stat === `mean` ? stats.mean : stats.median,
+      value_label_format,
+    )
 </script>
 
-{#snippet seg(
-  p1: [number, number],
-  p2: [number, number],
-  stroke: string,
-  sw: number,
-  dash?: string,
-)}
+{#snippet seg(p1: Vec2, p2: Vec2, stroke: string, sw: number, dash?: string)}
   <line
     x1={p1[0]}
     y1={p1[1]}
@@ -933,11 +845,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
@@ -945,7 +855,7 @@
   bind:clientWidth={width}
   bind:clientHeight={height}
   {...rest}
-  class="box-plot {rest.class ?? ``}"
+  class={[`box-plot`, rest.class]}
   class:fullscreen
 >
   {#if width && height}
@@ -961,39 +871,27 @@
       bind:this={svg_element}
       role="application"
       aria-label={rest[`aria-label`] ??
-      ([x_axis.label, y_axis.label].filter(Boolean).join(` vs `) || `Box plot`)}
+        ([x_axis.label, y_axis.label].filter(Boolean).join(` vs `) || `Box plot`)}
       tabindex="0"
-      onfocusin={() => (is_focused = true)}
-      onfocusout={() => (is_focused = false)}
-      onmousedown={handle_mouse_down}
-      ondblclick={() => {
-        ranges.current.x = [...ranges.initial.x] as Vec2
-        ranges.current.x2 = [...ranges.initial.x2] as Vec2
-        ranges.current.y = [...ranges.initial.y] as Vec2
-        ranges.current.y2 = [...ranges.initial.y2] as Vec2
-        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_box_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} />
 
       {@render user_content?.({
         height,
@@ -1014,65 +912,67 @@
 
       <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)}
         tick_color={cat_axis === `x` ? (tick) => slot_colors.get(tick) : undefined}
         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)}
       />
 
-      {#if has_secondary && orientation === `horizontal`}
+      {#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))}
         />
       {/if}
 
       <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)}
         tick_color={cat_axis === `y` ? (tick) => slot_colors.get(tick) : undefined}
         label_x={Math.max(
           12,
-          pad.l - (y_axis.tick?.label?.inside ? 0 : tick_label_widths.y_max) - LABEL_GAP_DEFAULT,
+          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)}
       />
 
-      {#if has_secondary && 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}
@@ -1108,8 +1008,8 @@
           x2_scale_type={x2_axis.scale_type}
           y_scale_type={y_axis.scale_type}
           y2_scale_type={y2_axis.scale_type}
-          has_x2={has_secondary && orientation === `horizontal`}
-          has_y2={has_secondary && orientation === `vertical`}
+          has_x2={show_x2}
+          has_y2={show_y2}
           {width}
           {height}
           {pad}
@@ -1130,12 +1030,13 @@
             {@const draw_box = draws_box(box_item.series)}
             {@const kde = violin_kdes.get(box_item.idx)}
             {@const eff_side = box_item.series.side ?? side}
-            {@const bw = box_item.series.box_width ??
-            (kde ? DEFAULTS.box.violin_box_width : DEFAULTS.box.box_width)}
+            {@const bw =
+              box_item.series.box_width ??
+              (kde ? DEFAULTS.box.violin_box_width : DEFAULTS.box.box_width)}
             {@const c_lo = cat_scale(box_item.slot - bw / 2)}
             {@const c_hi = cat_scale(box_item.slot + bw / 2)}
             {@const c_center = cat_scale(box_item.slot)}
-            {@const cap = Math.abs(c_hi - c_lo) * (whisker_state.cap_fraction ?? 0.5) / 2}
+            {@const cap = (Math.abs(c_hi - c_lo) * (whisker_state.cap_fraction ?? 0.5)) / 2}
             {@const cap_lo = c_center - cap}
             {@const cap_hi = c_center + cap}
             {@const v_q1 = val_scale(stats.q1)}
@@ -1144,8 +1045,8 @@
             {@const v_wl = val_scale(stats.whisker_low)}
             {@const v_wh = val_scale(stats.whisker_high)}
             {@const v_mean = val_scale(stats.mean)}
-            {@const pt = (cross: number, val: number): [number, number] =>
-            vertical ? [cross, val] : [val, cross]}
+            {@const pt = (cross: number, val: number): Vec2 =>
+              vertical ? [cross, val] : [val, cross]}
             {@const [q1x, q1y] = pt(c_lo, v_q1)}
             {@const [q3x, q3y] = pt(c_hi, v_q3)}
             {@const [wlx, wly] = pt(c_lo, v_wl)}
@@ -1159,12 +1060,12 @@
             {@const hit_w = Math.abs(whx - wlx)}
             {@const hit_h = Math.abs(why - wly)}
             {@const [label_x, label_y] = vertical
-            ? [c_center, Math.min(v_wh, v_wl) - 6]
-            : [Math.max(v_wh, v_wl) + 6, c_center]}
+              ? [c_center, Math.min(v_wh, v_wl) - 6]
+              : [Math.max(v_wh, v_wl) + 6, c_center]}
             {@const violin_half = Math.abs(
-            cat_scale(box_item.slot + (box_item.series.violin_width ?? violin_width) / 2) -
-              c_center,
-          )}
+              cat_scale(box_item.slot + (box_item.series.violin_width ?? violin_width) / 2) -
+                c_center,
+            )}
             {@const max_density = kde ? (violin_max_density.get(box_item.idx) ?? 0) : 0}
             <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
             <g
@@ -1175,7 +1076,7 @@
               aria-label={`box ${box_item.idx + 1}: ${box_item.series.label ?? ``}`}
               style:cursor={on_box_click ? `pointer` : undefined}
               opacity={hovered_legend_series_idx !== null &&
-                  hovered_legend_series_idx !== box_item.idx
+              hovered_legend_series_idx !== box_item.idx
                 ? 0.25
                 : 1}
               onmousemove={handle_box_hover(box_item, color)}
@@ -1184,7 +1085,8 @@
                 change(null)
                 on_box_hover?.(null)
               }}
-              onclick={(evt) => on_box_click?.({ ...get_box_data(box_item, color), event: evt })}
+              onclick={(evt) =>
+                on_box_click?.({ ...get_box_data(box_item, color), event: evt })}
               onkeydown={(evt) => {
                 if (evt.key === `Enter` || evt.key === ` `) {
                   evt.preventDefault()
@@ -1231,7 +1133,12 @@
                   stroke-width={box_state.stroke_width}
                 />
                 <!-- median (solid) and mean (dashed) -->
-                {@render seg(pt(c_lo, v_med), pt(c_hi, v_med), median_state.color, median_state.width)}
+                {@render seg(
+                  pt(c_lo, v_med),
+                  pt(c_hi, v_med),
+                  median_state.color,
+                  median_state.width,
+                )}
                 {#if show_mean}
                   {@render seg(
                     pt(c_lo, v_mean),
@@ -1287,19 +1194,33 @@
 
       {@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),
+          x2: marginal_axis(scales.x2, ranges.current.x2, x2_axis),
+          y1: marginal_axis(scales.y, ranges.current.y, y_axis),
+          y2: marginal_axis(scales.y2, ranges.current.y2, y2_axis),
+        }}
+        id={clip_path_id}
+      />
     </svg>
 
     {#if legend && should_show_legend}
-      {@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}
@@ -1307,13 +1228,12 @@
         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; pointer-events: auto; ${
+        style={`position: absolute; left: ${legend_pos.x}px; top: ${legend_pos.y}px; pointer-events: auto; ${
           legend?.style || ``
         }`}
       />
@@ -1331,7 +1251,7 @@
         {#if tooltip}
           {@render tooltip({ ...hover_info, fullscreen })}
         {:else}
-          {@const fmt = (orientation === `vertical` ? y_axis.format : x_axis.format) || `.3~s`}
+          {@const fmt = orientation === `vertical` ? y_axis.format : x_axis.format}
           {@const stat = hover_info.stats}
           {@const rows = [
             [`max`, stat.whisker_high],
@@ -1345,7 +1265,7 @@
             <div><strong>{hover_info.category_label}</strong></div>
           {/if}
           {#each rows as [label, value] (label)}
-            <div>{label}: {format_value(value, fmt)}</div>
+            <div>{label}: {format_value_or_num(value, fmt)}</div>
           {/each}
           {#if show_outliers && stat.outliers.length > 0}
             <div>outliers: {stat.outliers.length}</div>
@@ -1376,12 +1296,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={has_secondary && orientation === `horizontal`}
-        has_y2_points={has_secondary && orientation === `vertical`}
+        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}
@@ -1438,7 +1358,9 @@
   .box-plot :global(.pane-toggle),
   .box-plot .header-controls {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   .box-plot:hover :global(.pane-toggle),
   .box-plot:hover .header-controls,