matterviz 0.4.0 → 0.4.2

package/dist/plot/scatter/ScatterPlot.svelte

@@ -2,14 +2,15 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
 >
-  import type { D3ColorSchemeName, D3InterpolateName } from '../../colors'
-  import { format_value } from '../../labels'
+  import type { D3InterpolateName } from '../../colors'
+  import { format_value, format_value_or_num } from '../../labels'
   import { sanitize_html } from '../../sanitize'
   import { FullscreenToggle, set_fullscreen_bg } from '../../layout'
   import type { Point2D, Vec2 } from '../../math'
   import type {
     AxisLoadError,
     BasePlotProps,
+    ColorScaleConfig,
     ControlsConfig,
     DataLoaderFn,
     DataSeries,
@@ -17,7 +18,6 @@
     FillHandlerEvent,
     FillRegion,
     HoverConfig,
-    InitialRanges,
     InternalPoint,
     LabelPlacementConfig,
     LegendConfig,
@@ -26,9 +26,9 @@
     Point,
     RefLine,
     RefLineEvent,
-    ScaleType,
     ScatterHandlerEvent,
     ScatterHandlerProps,
+    SizeScaleConfig,
     StyleOverrides,
     UserContentProps,
   } from '..'
@@ -40,6 +40,7 @@
     Line,
     PlotAxis,
     PlotLegend,
+    PlotMarginals,
     PlotTooltip,
     ReferenceLine,
     ScatterPlotControls,
@@ -47,23 +48,33 @@
     ZeroLines,
     ZoomRect,
   } 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,
     has_explicit_position,
     measured_footprint,
     place_decorations,
   } from '../core/auto-place'
-  import type { AxisChangeState } from '../core/axis-utils'
-  import { AXIS_DEFAULTS, create_axis_loader } from '../core/axis-utils'
-  import { get_series_color, get_series_symbol } from '../core/data-transform'
   import {
-    create_dimension_tracker,
-    create_hover_lock,
-  } from '../core/hover-lock.svelte'
+    AXIS_DEFAULTS,
+    type AxisChangeState,
+    create_axis_loader,
+  } from '../core/axis-utils'
+  import { get_series_color, get_series_symbol } from '../core/data-transform'
+  import { create_placed_tween } from '../core/placed-tween.svelte'
   import {
+    COLOR_BAR_DEFAULTS,
     DEFAULT_MARKERS,
     get_scale_type_name,
     is_time_scale,
+    SCALE_DEFAULTS,
   } from '../core/types'
   import { compute_label_positions } from '../core/utils/label-placement'
   import { create_legend_visibility } from '../core/utils/series-visibility'
@@ -73,7 +84,7 @@
   import type { ComponentProps, Snippet } from 'svelte'
   import { onDestroy, untrack } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { Tween, type TweenOptions } from 'svelte/motion'
+  import type { TweenOptions } from 'svelte/motion'
   import { SvelteSet } from 'svelte/reactivity'
   import type { Pt } from '../core/fill-utils'
   import {
@@ -84,18 +95,14 @@
   import {
     expand_range_if_needed,
     get_relative_coords,
-    MIN_TOUCH_DISTANCE_PIXELS,
+    invert_rect_range,
     normalize_y2_sync,
-    pan_range_by_pixels,
-    PINCH_ZOOM_THRESHOLD,
-    remove_drag_listeners,
-    sorted_range,
     sync_y2_range,
-    to_epoch_num,
-    zoom_range_by_factor,
   } from '../core/interactions'
+  import { create_pan_zoom } from '../core/pan-zoom.svelte'
   import type { Rect, Sides } from '../core/layout'
   import {
+    AXIS_TITLE_OFFSET,
     calc_auto_padding,
     filter_padding,
     LABEL_GAP_DEFAULT,
@@ -114,11 +121,10 @@
     get_nice_data_range,
   } from '../core/scales'
   import { resolve_line_tween, unique_id } from '../core/utils'
-  import {
-    build_legend_data,
-    filter_series_to_ranges,
-    pick_tooltip_bg,
-  } from './scatter-data'
+  import { build_legend_data, filter_series_to_ranges, pick_tooltip_bg } from './scatter-data'
+
+  // Plots with at least this many visible markers get smaller default point radii
+  const DENSE_MARKER_COUNT = 100
 
   let {
     series = $bindable([]),
@@ -130,7 +136,7 @@
     styles: styles_init = {},
     controls: controls_init = {},
     padding = {},
-    range_padding = 0.05,
+    range_padding = 0,
     current_x_value = null,
     tooltip_point = $bindable(null),
     selected_point = null,
@@ -138,13 +144,9 @@
     tooltip,
     user_content,
     change = () => {},
-    color_scale = {
-      type: `linear`,
-      scheme: `interpolateViridis`,
-      value_range: undefined,
-    },
+    color_scale = SCALE_DEFAULTS.color,
     color_bar = {},
-    size_scale = { type: `linear`, radius_range: [2, 10], value_range: undefined },
+    size_scale = SCALE_DEFAULTS.size,
     label_placement_config = {},
     hover_config = {},
     legend = {},
@@ -171,113 +173,99 @@
     on_axis_change,
     on_error,
     pan = {},
+    marginals = false,
     ...rest
-  }: HTMLAttributes<HTMLDivElement> & Omit<BasePlotProps, `change`> & PlotConfig & {
-    series?: DataSeries<Metadata>[]
-    styles?: StyleOverrides
-    controls?: ControlsConfig
-    current_x_value?: number | null
-    tooltip_point?: InternalPoint<Metadata> | null
-    selected_point?: { series_idx: number; point_idx: number } | null
-    tooltip?: Snippet<[ScatterHandlerProps<Metadata>]>
-    user_content?: Snippet<[UserContentProps]>
-    header_controls?: Snippet<
-      [{ height: number; width: number; fullscreen: boolean }]
-    >
-    controls_extra?: Snippet<
-      [
-        & { styles: StyleOverrides; selected_series_idx: number }
-        & Required<PlotConfig>,
-      ]
-    >
-    change?: (
-      data: (Point<Metadata> & { series: DataSeries<Metadata> }) | null,
-    ) => void
-    color_scale?: {
-      type?: ScaleType
-      scheme?: D3ColorSchemeName | D3InterpolateName
-      value_range?: [number, number]
-    } | D3InterpolateName
-    size_scale?: {
-      type?: ScaleType
-      radius_range?: [number, number]
-      value_range?: [number, number]
-    }
-    color_bar?:
-      | (ComponentProps<typeof ColorBar> & {
-        margin?: number | Sides
-        tween?: TweenOptions<Point2D>
-        responsive?: boolean // Allow colorbar to reposition if density changes (default: false)
-        axis_clearance?: number // Min distance kept from plot edges/axes (default: 15)
-      })
-      | null
-    label_placement_config?: Partial<LabelPlacementConfig>
-    hover_config?: Partial<HoverConfig>
-    legend?: LegendConfig | null
-    point_tween?: TweenOptions<Point2D>
-    line_tween?: TweenOptions<string>
-    point_events?: Record<
-      string,
-      (payload: { point: InternalPoint<Metadata>; event: Event }) => void
-    >
-    on_point_click?: (data: ScatterHandlerEvent<Metadata>) => void
-    on_point_hover?: (data: ScatterHandlerEvent<Metadata> | null) => void
-    fill_regions?: FillRegion[] // Bindable for legend toggle support
-    error_bands?: ErrorBand[]
-    on_fill_click?: (event: FillHandlerEvent) => void
-    on_fill_hover?: (event: FillHandlerEvent | null) => void
-    ref_lines?: RefLine[] // Bindable for legend toggle support
-    on_ref_line_click?: (event: RefLineEvent) => void
-    on_ref_line_hover?: (event: RefLineEvent | null) => void
-    selected_series_idx?: number
-    wrapper?: HTMLDivElement
-    // Interactive axis props
-    data_loader?: DataLoaderFn<Metadata>
-    on_axis_change?: (
-      axis: `x` | `x2` | `y` | `y2`,
-      key: string,
-      new_series: DataSeries<Metadata>[],
-    ) => void
-    on_error?: (error: AxisLoadError) => void
-    pan?: PanConfig
-  } = $props()
+  }: HTMLAttributes<HTMLDivElement> &
+    Omit<BasePlotProps, `change`> &
+    PlotConfig & {
+      series?: DataSeries<Metadata>[]
+      styles?: StyleOverrides
+      controls?: ControlsConfig
+      current_x_value?: number | null
+      tooltip_point?: InternalPoint<Metadata> | null
+      selected_point?: { series_idx: number; point_idx: number } | null
+      tooltip?: Snippet<[ScatterHandlerProps<Metadata>]>
+      user_content?: Snippet<[UserContentProps]>
+      header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
+      controls_extra?: Snippet<
+        [{ styles: StyleOverrides; selected_series_idx: number } & Required<PlotConfig>]
+      >
+      change?: (data: (Point<Metadata> & { series: DataSeries<Metadata> }) | null) => void
+      color_scale?: ColorScaleConfig | D3InterpolateName
+      size_scale?: SizeScaleConfig
+      color_bar?:
+        | (ComponentProps<typeof ColorBar> & {
+            margin?: number | Sides
+            tween?: TweenOptions<Point2D>
+            responsive?: boolean // Allow colorbar to reposition if density changes (default: false)
+            axis_clearance?: number // Min distance kept from plot edges/axes (default: 15)
+          })
+        | null
+      label_placement_config?: Partial<LabelPlacementConfig>
+      hover_config?: Partial<HoverConfig>
+      legend?: LegendConfig | null
+      point_tween?: TweenOptions<Point2D>
+      line_tween?: TweenOptions<string>
+      point_events?: Record<
+        string,
+        (payload: { point: InternalPoint<Metadata>; event: Event }) => void
+      >
+      on_point_click?: (data: ScatterHandlerEvent<Metadata>) => void
+      on_point_hover?: (data: ScatterHandlerEvent<Metadata> | null) => void
+      fill_regions?: FillRegion[] // Bindable for legend toggle support
+      error_bands?: ErrorBand[]
+      on_fill_click?: (event: FillHandlerEvent) => void
+      on_fill_hover?: (event: FillHandlerEvent | null) => void
+      ref_lines?: RefLine[] // Bindable for legend toggle support
+      on_ref_line_click?: (event: RefLineEvent) => void
+      on_ref_line_hover?: (event: RefLineEvent | null) => void
+      selected_series_idx?: number
+      wrapper?: HTMLDivElement
+      // Interactive axis props
+      data_loader?: DataLoaderFn<Metadata>
+      on_axis_change?: (
+        axis: `x` | `x2` | `y` | `y2`,
+        key: string,
+        new_series: DataSeries<Metadata>[],
+      ) => void
+      on_error?: (error: AxisLoadError) => void
+      pan?: PanConfig
+      marginals?: MarginalsProp
+    } = $props()
 
   // Merged axis/display values with defaults (use $derived to avoid breaking $bindable)
   const final_x_axis = $derived({
     ...AXIS_DEFAULTS,
-    label_shift: { x: 0, y: -40 }, // x-axis needs different label position
+    label_shift: { x: 0, y: 0 },
     ...x_axis,
   })
   const final_y_axis = $derived({ ...AXIS_DEFAULTS, ...y_axis })
   const final_x2_axis = $derived({
     ...AXIS_DEFAULTS,
-    label_shift: { x: 0, y: 40 }, // x2-axis label above top edge
+    label_shift: { x: 0, y: AXIS_TITLE_OFFSET }, // x2-axis label above top edge
     ...x2_axis,
   })
   const final_y2_axis = $derived({ ...AXIS_DEFAULTS, ...y2_axis })
   // Cache time-axis check — used in ~10 places for scale/tick/tooltip logic
-  let is_time_x = $derived(
-    is_time_scale(final_x_axis.scale_type, final_x_axis.format),
-  )
-  let is_time_x2 = $derived(
-    is_time_scale(final_x2_axis.scale_type, final_x2_axis.format),
-  )
+  let is_time_x = $derived(is_time_scale(final_x_axis.scale_type, final_x_axis.format))
+  let is_time_x2 = $derived(is_time_scale(final_x2_axis.scale_type, final_x2_axis.format))
   const final_display = $derived({ ...DEFAULTS.scatter.display, ...display })
   // Local state for styles (initialized from prop, owned by this component for controls)
   // Using $state because styles has bindings in ScatterPlotControls
   // untrack() explicitly captures initial prop value (intentional - props provide initial config)
-  let styles = $state(untrack(() => ({
-    show_points: DEFAULTS.scatter.show_points,
-    show_lines: DEFAULTS.scatter.show_lines,
-    point: { ...DEFAULTS.scatter.point, ...styles_init?.point },
-    line: { ...DEFAULTS.scatter.line, ...styles_init?.line },
-    ...styles_init,
-  })))
+  let styles = $state(
+    untrack(() => ({
+      show_points: DEFAULTS.scatter.show_points,
+      show_lines: DEFAULTS.scatter.show_lines,
+      point: { ...DEFAULTS.scatter.point, ...styles_init?.point },
+      line: { ...DEFAULTS.scatter.line, ...styles_init?.line },
+      ...styles_init,
+    })),
+  )
   let controls = $derived({ show: true, open: false, ...controls_init })
 
   let [width, height] = $state([0, 0])
   let svg_element: SVGElement | null = $state(null) // Bind the SVG element
-  let svg_bounding_box: DOMRect | null = $state(null) // Store SVG bounds during drag
 
   // Track which specific control properties user has modified
   let touched = new SvelteSet<string>()
@@ -296,20 +284,18 @@
     }),
   )
 
-  // State for rectangle zoom selection
-  let drag_start_coords = $state<Point2D | null>(null)
-  let drag_current_coords = $state<Point2D | null>(null)
-
   // Zoom/pan state - track both initial (data-driven) and current (after pan/zoom) ranges
-  let initial_x_range = $state<[number, number]>([0, 1])
-  let initial_x2_range = $state<[number, number]>([0, 1])
-  let initial_y_range = $state<[number, number]>([0, 1])
-  let initial_y2_range = $state<[number, number]>([0, 1])
-  let zoom_x_range = $state<[number, number]>([0, 1])
-  let zoom_x2_range = $state<[number, number]>([0, 1])
-  let zoom_y_range = $state<[number, number]>([0, 1])
-  let zoom_y2_range = $state<[number, number]>([0, 1])
-  const legend_vis = create_legend_visibility(() => series, (next) => (series = next))
+  let ranges = $state<{
+    initial: { x: Vec2; x2: Vec2; y: Vec2; y2: Vec2 }
+    current: { x: Vec2; x2: Vec2; y: Vec2; y2: Vec2 }
+  }>({
+    initial: { x: [0, 1], x2: [0, 1], y: [0, 1], y2: [0, 1] },
+    current: { x: [0, 1], x2: [0, 1], y: [0, 1], y2: [0, 1] },
+  })
+  const legend_vis = create_legend_visibility(
+    () => series,
+    (next) => (series = next),
+  )
 
   // Y2 axis sync configuration
   let y2_sync_config = $derived(normalize_y2_sync(y2_axis?.sync))
@@ -319,7 +305,7 @@
   // Helper to compute synced y2 range or return fallback when sync disabled
   const get_synced_y2 = (y1_range: Vec2, fallback: Vec2): Vec2 =>
     y2_sync_config.mode !== `none`
-      ? sync_y2_range(y1_range, initial_y2_range, y2_sync_config)
+      ? sync_y2_range(y1_range, ranges.initial.y2, y2_sync_config)
       : fallback
 
   // Effect to update y2 range when sync mode changes - use $effect.pre to capture
@@ -330,25 +316,15 @@
     if (mode !== prev_sync_mode) {
       // When sync mode becomes enabled (or changes), apply sync immediately
       if (mode !== `none`) {
-        zoom_y2_range = sync_y2_range(zoom_y_range, initial_y2_range, y2_sync_config)
+        ranges.current.y2 = sync_y2_range(ranges.current.y, ranges.initial.y2, y2_sync_config)
       } else {
         // When switching to independent mode, reset Y2 to its data range
-        zoom_y2_range = [...initial_y2_range] as [number, number]
+        ranges.current.y2 = [...ranges.initial.y2] as Vec2
       }
       prev_sync_mode = mode
     }
   })
 
-  // 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)
-
   // Fill region hover state
   let hovered_fill_key = $state<string | null>(null)
 
@@ -370,17 +346,6 @@
   // State for legend/colorbar placement stability
   let legend_element = $state<HTMLDivElement | undefined>()
   let colorbar_element = $state<HTMLDivElement | undefined>()
-  const legend_hover = create_hover_lock()
-  const colorbar_hover = create_hover_lock()
-  const dim_tracker = create_dimension_tracker()
-  let has_initial_legend_placement = $state(false)
-  let has_initial_colorbar_placement = $state(false)
-
-  // Clear pending hover lock timeouts on unmount
-  $effect(() => () => {
-    legend_hover.cleanup()
-    colorbar_hover.cleanup()
-  })
 
   // Module-level constants to avoid repeated allocations
   // Create and categorize points in a single pass (instead of 3 separate iterations)
@@ -393,8 +358,13 @@
 
     for (const srs of series_with_ids) {
       if (!srs) continue
-      const { x: xs, y: ys, visible = true, y_axis: series_y_axis = `y1`, x_axis: x_ax = `x1` } =
-        srs as DataSeries
+      const {
+        x: xs,
+        y: ys,
+        visible = true,
+        y_axis: series_y_axis = `y1`,
+        x_axis: x_ax = `x1`,
+      } = srs as DataSeries
       for (let idx = 0; idx < xs.length; idx++) {
         const point = { x: xs[idx], y: ys[idx] }
         all.push(point)
@@ -419,37 +389,44 @@
 
   // Update padding when format or ticks change
   $effect(() => {
-    const new_pad = width && height &&
-        (y_tick_values.length > 0 || y2_tick_values.length > 0 || x2_tick_values.length > 0)
-      ? calc_auto_padding({
-        padding,
-        default_padding,
-        x2_axis: { ...final_x2_axis, tick_values: x2_tick_values },
-        y_axis: { ...final_y_axis, tick_values: y_tick_values },
-        y2_axis: { ...final_y2_axis, tick_values: y2_tick_values },
-      })
-      : filter_padding(padding, default_padding)
+    const new_pad =
+      width &&
+      height &&
+      (y_tick_values.length > 0 || y2_tick_values.length > 0 || x2_tick_values.length > 0)
+        ? calc_auto_padding({
+            padding,
+            default_padding,
+            x2_axis: { ...final_x2_axis, tick_values: x2_tick_values },
+            y_axis: { ...final_y_axis, tick_values: y_tick_values },
+            y2_axis: { ...final_y2_axis, tick_values: y2_tick_values },
+          })
+        : filter_padding(padding, default_padding)
 
     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 = new_pad
   })
 
   // === Auto-move legend/colorbar outside the plot when interior overlap is unavoidable ===
   // (shared logic lives in auto-place.ts so every 2D plot reuses it)
   // ColorBar's orientation prop defaults to horizontal, so treat unset as horizontal too
-  const colorbar_is_horizontal = $derived((color_bar?.orientation ?? `horizontal`) === `horizontal`)
+  const colorbar_is_horizontal = $derived(
+    (color_bar?.orientation ?? `horizontal`) === `horizontal`,
+  )
   const colorbar_footprint = $derived(
     colorbar_element?.offsetWidth && colorbar_element?.offsetHeight
       ? measure_full_footprint(colorbar_element)
       : colorbar_is_horizontal
-      ? { width: 220, height: 56 }
-      : { width: 56, height: 100 },
+        ? COLOR_BAR_DEFAULTS.horizontal_footprint
+        : COLOR_BAR_DEFAULTS.vertical_footprint,
+  )
+  const legend_footprint = $derived(
+    measured_footprint(legend_element, { width: 120, height: 80 }),
   )
-  const legend_footprint = $derived(measured_footprint(legend_element, { width: 120, height: 80 }))
   const legend_has_explicit_pos = $derived(has_explicit_position(legend?.style))
 
   // Plot-specific obstacle field: series points/lines normalized to [0,1] (y=0 at top)
@@ -459,7 +436,9 @@
     const base_h = height - base_pad.t - base_pad.b
     if (base_w <= 0 || base_h <= 0) return []
     const norm_x = is_time_x
-      ? scaleTime().domain([new Date(x_min), new Date(x_max)]).range([0, 1])
+      ? scaleTime()
+          .domain([new Date(x_min), new Date(x_max)])
+          .range([0, 1])
       : create_scale(final_x_axis.scale_type ?? `linear`, [x_min, x_max], [0, 1])
     const norm_y = create_scale(final_y_axis.scale_type ?? `linear`, [y_min, y_max], [0, 1])
     return build_obstacles_norm(
@@ -485,23 +464,58 @@
       obstacles_norm,
       // gate on legend_element (the actual render signal) not legend_data, whose fill entries read
       // computed_fills -> pad and would make this derived reference itself
-      legend: legend != null && legend_element != null &&
-          !legend_has_explicit_pos && !legend_is_dragging && !legend_manual_position
-        ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
-        : null,
+      legend:
+        legend != null &&
+        legend_element != null &&
+        !legend_has_explicit_pos &&
+        !legend_is_dragging &&
+        !legend_manual_position
+          ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
+          : null,
       // gate on a measured colorbar: its outside style stretches it to full width, so deciding from
       // the (wide) pre-measure fallback would flip-flop placement between interior and outside
-      colorbar: Boolean(color_bar) && all_color_values.length > 0 && !color_bar?.wrapper_style &&
-          (colorbar_element?.offsetWidth ?? 0) > 0 && (colorbar_element?.offsetHeight ?? 0) > 0
-        ? {
-          footprint: colorbar_footprint,
-          horizontal: colorbar_is_horizontal,
-          clearance: color_bar?.axis_clearance,
-        }
-        : null,
-    })
+      colorbar:
+        Boolean(color_bar) &&
+        all_color_values.length > 0 &&
+        !color_bar?.wrapper_style &&
+        (colorbar_element?.offsetWidth ?? 0) > 0 &&
+        (colorbar_element?.offsetHeight ?? 0) > 0
+          ? {
+              footprint: colorbar_footprint,
+              horizontal: colorbar_is_horizontal,
+              clearance: color_bar?.axis_clearance,
+            }
+          : null,
+    }),
+  )
+  // Resolve marginals and reserve outer-band padding so the plot shrinks to make room
+  const resolved_marginals = $derived(
+    normalize_marginals(marginals, { top: true, right: true }),
+  )
+  const pad = $derived(add_sides(decor.pad, reserve_marginal_pad(resolved_marginals)))
+  // Map series to the generic marginal input, reusing the line/legend color fallback
+  const marginal_series = $derived<MarginalSeriesInput[]>(
+    series_with_ids.map((srs, idx) => {
+      const point_fill = Array.isArray(srs?.point_style)
+        ? srs.point_style[0]?.fill
+        : srs?.point_style?.fill
+      return {
+        x: srs?.x ?? [],
+        y: srs?.y ?? [],
+        color:
+          srs?.line_style?.stroke ??
+          point_fill ??
+          get_series_color(srs?.orig_series_idx ?? idx),
+        label: srs?.label,
+        visible: srs?.visible ?? true,
+        x_axis: srs?.x_axis,
+        y_axis: srs?.y_axis,
+      }
+    }),
+  )
+  const marginal_has_axis = $derived(
+    marginal_axis_presence(x2_points.length > 0, y2_points.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)
@@ -514,9 +528,7 @@
     x: pad.l || 0,
     y: pad.t || 0,
     width: isFinite(width - pad.l - pad.r) ? Math.max(1, width - pad.l - pad.r) : 1,
-    height: isFinite(height - pad.t - pad.b)
-      ? Math.max(1, height - pad.t - pad.b)
-      : 1,
+    height: isFinite(height - pad.t - pad.b) ? Math.max(1, height - pad.t - pad.b) : 1,
   })
 
   // Calculate plot area center coordinates
@@ -530,8 +542,12 @@
     for (const srs of series_with_ids) {
       if (!srs) continue
       const { color_values: cvs, size_values: svs } = srs as DataSeries
-      if (cvs) { for (const val of cvs) if (val != null) color_values.push(val) }
-      if (svs) { for (const val of svs) if (val != null) size_values.push(val) }
+      if (cvs) {
+        for (const val of cvs) if (val != null) color_values.push(val)
+      }
+      if (svs) {
+        for (const val of svs) if (val != null) size_values.push(val)
+      }
     }
     return { color_values, size_values }
   })
@@ -596,77 +612,68 @@
       return { explicit, range }
     }
 
-    const x = get_range(final_x_axis, auto_x_range)
-    const x2 = get_range(final_x2_axis, auto_x2_range)
-    const y = get_range(final_y_axis, auto_y_range)
-    const y2 = get_range(final_y2_axis, auto_y2_range)
-
-    // X axis: explicit → direct, auto → lazy expand
-    if (x.explicit) {
-      zoom_x_range = x.range
-    } else {
-      const result = expand_range_if_needed(initial_x_range, x.range)
-      if (result.changed) {
-        ;[initial_x_range, zoom_x_range] = [result.range, result.range]
-      }
+    const resolved = {
+      x: get_range(final_x_axis, auto_x_range),
+      x2: get_range(final_x2_axis, auto_x2_range),
+      y: get_range(final_y_axis, auto_y_range),
+      y2: get_range(final_y2_axis, auto_y2_range),
     }
 
-    // X2 axis: explicit → direct, auto → lazy expand
-    if (x2.explicit) {
-      zoom_x2_range = x2.range
-    } else {
-      const result = expand_range_if_needed(initial_x2_range, x2.range)
-      if (result.changed) {
-        ;[initial_x2_range, zoom_x2_range] = [result.range, result.range]
-      }
-    }
-
-    // Y axis: explicit → direct, auto → lazy expand
-    if (y.explicit) {
-      zoom_y_range = y.range
-    } else {
-      const result = expand_range_if_needed(initial_y_range, y.range)
-      if (result.changed) {
-        ;[initial_y_range, zoom_y_range] = [result.range, result.range]
+    // untrack reads of `ranges`: this effect also writes it, and tracked reads of the
+    // deep proxy would re-trigger the effect on every current/initial write
+    for (const axis of [`x`, `x2`, `y`] as const) {
+      const { explicit, range } = resolved[axis]
+      if (explicit) {
+        ranges.current[axis] = range
+      } else {
+        const result = expand_range_if_needed(
+          untrack(() => ranges.initial[axis]),
+          range,
+        )
+        if (result.changed) {
+          ranges.initial[axis] = result.range
+          ranges.current[axis] = result.range
+        }
       }
     }
 
     // Y2 axis: explicit → direct, else expand initial range then optionally sync
-    if (y2.explicit) {
-      zoom_y2_range = y2.range
+    if (resolved.y2.explicit) {
+      ranges.current.y2 = resolved.y2.range
     } else {
-      const result = expand_range_if_needed(initial_y2_range, y2.range)
-      if (result.changed) initial_y2_range = result.range
+      const result = expand_range_if_needed(
+        untrack(() => ranges.initial.y2),
+        resolved.y2.range,
+      )
+      if (result.changed) ranges.initial.y2 = result.range
       // Apply sync if enabled, otherwise use expanded range (or keep current if unchanged)
       if (y2_sync_config.mode !== `none`) {
-        // untrack the read of zoom_y_range: this effect also writes it (fresh array per
-        // run when y.explicit), so a tracked read would loop until
-        // effect_update_depth_exceeded. Pan/zoom handlers sync y2 themselves.
-        zoom_y2_range = sync_y2_range(
-          untrack(() => zoom_y_range),
-          initial_y2_range,
+        // Pan/zoom handlers sync y2 themselves.
+        ranges.current.y2 = sync_y2_range(
+          untrack(() => ranges.current.y),
+          untrack(() => ranges.initial.y2),
           y2_sync_config,
         )
       } else if (result.changed) {
-        zoom_y2_range = result.range
+        ranges.current.y2 = result.range
       }
     }
   })
 
-  let [x_min, x_max] = $derived(zoom_x_range)
-  let [x2_min, x2_max] = $derived(zoom_x2_range)
-  let [y_min, y_max] = $derived(zoom_y_range)
-  let [y2_min, y2_max] = $derived(zoom_y2_range)
+  let [x_min, x_max] = $derived(ranges.current.x)
+  let [x2_min, x2_max] = $derived(ranges.current.x2)
+  let [y_min, y_max] = $derived(ranges.current.y)
+  let [y2_min, y2_max] = $derived(ranges.current.y2)
 
   // Create auto color range
   let auto_color_range = $derived(
     // Ensure we only calculate extent on actual numbers, filtering out nulls/undefined
     all_color_values.length > 0
       ? extent(
-        all_color_values.filter((color_val: number | null): color_val is number =>
-          typeof color_val === `number`
-        ),
-      )
+          all_color_values.filter(
+            (color_val: number | null): color_val is number => typeof color_val === `number`,
+          ),
+        )
       : [0, 1],
   ) as Vec2
 
@@ -675,37 +682,37 @@
   let x_scale_fn = $derived(
     is_time_x
       ? scaleTime()
-        .domain([new Date(x_min), new Date(x_max)])
-        .range([pad.l, width - pad.r])
-      : create_scale(final_x_axis.scale_type ?? `linear`, [x_min, x_max], [
-        pad.l,
-        width - pad.r,
-      ]),
+          .domain([new Date(x_min), new Date(x_max)])
+          .range([pad.l, width - pad.r])
+      : create_scale(
+          final_x_axis.scale_type ?? `linear`,
+          [x_min, x_max],
+          [pad.l, width - pad.r],
+        ),
   )
 
   let x2_scale_fn = $derived(
     is_time_x2
       ? scaleTime()
-        .domain([new Date(x2_min), new Date(x2_max)])
-        .range([pad.l, width - pad.r])
-      : create_scale(final_x2_axis.scale_type ?? `linear`, [x2_min, x2_max], [
-        pad.l,
-        width - pad.r,
-      ]),
+          .domain([new Date(x2_min), new Date(x2_max)])
+          .range([pad.l, width - pad.r])
+      : create_scale(
+          final_x2_axis.scale_type ?? `linear`,
+          [x2_min, x2_max],
+          [pad.l, width - pad.r],
+        ),
   )
 
   let y_scale_fn = $derived(
-    create_scale(final_y_axis.scale_type ?? `linear`, [y_min, y_max], [
-      height - pad.b,
-      pad.t,
-    ]),
+    create_scale(final_y_axis.scale_type ?? `linear`, [y_min, y_max], [height - pad.b, pad.t]),
   )
 
   let y2_scale_fn = $derived(
-    create_scale(final_y2_axis.scale_type ?? `linear`, [y2_min, y2_max], [
-      height - pad.b,
-      pad.t,
-    ]),
+    create_scale(
+      final_y2_axis.scale_type ?? `linear`,
+      [y2_min, y2_max],
+      [height - pad.b, pad.t],
+    ),
   )
 
   // All size values from series (for size scale) - extracted in series_value_arrays
@@ -742,6 +749,22 @@
   })
   let effective_line_tween = $derived(resolve_line_tween(line_tween, line_tween_load))
 
+  let visible_marker_count = $derived.by(() => {
+    if (!styles.show_points) return 0
+    let count = 0
+    for (const series_data of filtered_series ?? []) {
+      if ((series_data.markers ?? DEFAULT_MARKERS).includes(`points`)) {
+        count += series_data.filtered_data.length
+      }
+    }
+    return count
+  })
+
+  const default_point_radius = (markers: string): number => {
+    const [sparse_radius, dense_radius] = markers.includes(`line`) ? [2.5, 2] : [3, 2.5]
+    return visible_marker_count >= DENSE_MARKER_COUNT ? dense_radius : sparse_radius
+  }
+
   // Obstacle field for legend/colorbar auto-placement. Sampling only data points lets the
   // legend land on top of a steep connecting line whose markers are sparse (e.g. y=x^2), so
   // sample_series_obstacle_points also walks each drawn segment at a fixed pixel cadence.
@@ -757,14 +780,16 @@
       const active_x_scale = use_x2_scale ? x2_scale_fn : x_scale_fn
       const active_is_time_x = use_x2_scale ? is_time_x2 : is_time_x
       const active_y_scale = series_data.y_axis === `y2` ? y2_scale_fn : y_scale_fn
-      const draws_line = styles.show_lines &&
-        (series_data.markers ?? DEFAULT_MARKERS).includes(`line`)
+      const draws_line =
+        styles.show_lines && (series_data.markers ?? DEFAULT_MARKERS).includes(`line`)
 
       const pixel_points = series_data.filtered_data.map((point) => ({
         x: active_is_time_x ? active_x_scale(new Date(point.x)) : active_x_scale(point.x),
         y: active_y_scale(point.y),
       }))
-      points.push(...sample_series_obstacle_points(pixel_points, draws_line, SEGMENT_SAMPLE_STEP))
+      points.push(
+        ...sample_series_obstacle_points(pixel_points, draws_line, SEGMENT_SAMPLE_STEP),
+      )
     }
     return points
   })
@@ -849,14 +874,16 @@
     }
 
     return all_regions
-      .filter((
-        entry,
-      ): entry is {
-        region: FillRegion
-        source_type: `fill_region` | `error_band`
-        source_idx: number
-        hover_key: string
-      } => entry.region !== null)
+      .filter(
+        (
+          entry,
+        ): entry is {
+          region: FillRegion
+          source_type: `fill_region` | `error_band`
+          source_idx: number
+          hover_key: string
+        } => entry.region !== null,
+      )
       .map(({ region, source_type, source_idx, hover_key }, idx) => {
         // Hidden fills keep their entry (with empty path_segments -> nothing renders) so the
         // legend item persists greyed-out and can be toggled back on.
@@ -864,15 +891,15 @@
         const path_segments = hidden
           ? []
           : compute_fill_segments(region, series_with_ids, domains)
-            .map((seg) =>
-              generate_fill_path(
-                seg.upper.map(to_px),
-                seg.lower.map(to_px),
-                seg.upper_curve,
-                seg.lower_curve,
+              .map((seg) =>
+                generate_fill_path(
+                  seg.upper.map(to_px),
+                  seg.lower.map(to_px),
+                  seg.upper_curve,
+                  seg.lower_curve,
+                ),
               )
-            )
-            .filter((path) => path.length > 0)
+              .filter((path) => path.length > 0)
 
         // Drop only visible fills with no geometry; keep hidden ones for the legend
         if (!hidden && path_segments.length === 0) return null
@@ -906,13 +933,12 @@
   })
 
   // Compute ref_lines with index and group by z-index (using shared utilities)
-  let indexed_ref_lines = $derived(index_ref_lines(ref_lines))
-  let ref_lines_by_z = $derived(group_ref_lines_by_z(indexed_ref_lines))
+  let ref_lines_by_z = $derived(group_ref_lines_by_z(index_ref_lines(ref_lines)))
 
   // Calculate best legend placement using continuous grid sampling
   let legend_placement = $derived.by(() => {
-    const should_place = legend != null &&
-      (legend_data.length > 1 || Object.keys(legend ?? {}).length > 0)
+    const should_place =
+      legend != null && (legend_data.length > 1 || Object.keys(legend ?? {}).length > 0)
 
     if (!should_place || !width || !height) return null
 
@@ -940,10 +966,9 @@
 
     // Fallback estimate (with room for tick labels) used before the colorbar first
     // renders; compute_element_placement measures the real footprint once it's laid out
-    const is_horizontal = (color_bar.orientation ?? `horizontal`) === `horizontal`
-    const colorbar_size = is_horizontal
-      ? { width: 220, height: 56 }
-      : { width: 56, height: 100 }
+    const colorbar_size = colorbar_is_horizontal
+      ? COLOR_BAR_DEFAULTS.horizontal_footprint
+      : COLOR_BAR_DEFAULTS.vertical_footprint
 
     // Build exclusion rects (avoid legend if it's placed)
     const exclude_rects: Rect[] = []
@@ -968,75 +993,28 @@
     })
   })
 
-  // Active legend placement (null if user set explicit position)
-  let active_legend_placement = $derived.by(() => {
-    if (!legend_placement) return null
-
-    // Skip auto-placement if user set explicit position in style
-    const legend_style = legend?.style ?? ``
-    if (
-      /(^|[;{]\s*)(top|bottom|left|right)\s*:|position\s*:\s*absolute/.test(
-        legend_style,
-      )
-    ) return null
-
-    return legend_placement
-  })
-
-  // Initialize tweened values for color bar position - create once, update target via effect
-  // untrack() explicitly captures initial tween config (intentional - config set once at mount)
-  const tweened_colorbar_coords = new Tween(
-    { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...color_bar?.tween })),
-  )
-  // Initialize tweened values for legend position - create once, update target via effect
-  const tweened_legend_coords = new Tween(
-    { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...legend?.tween })),
+  // Active legend placement (null if user set explicit position in style)
+  let active_legend_placement = $derived(
+    legend_placement && !legend_has_explicit_pos ? legend_placement : null,
   )
 
-  // Update placement positions (with animation and stability checks)
-  $effect(() => {
-    if (!width || !height) return
-
-    // Track dimensions for resize detection
-    const dims_changed = dim_tracker.has_changed(width, height)
-    if (dims_changed) dim_tracker.update(width, height)
-
-    // Update colorbar position (stable after initial placement unless responsive)
-    if (color_bar_placement) {
-      const is_responsive = color_bar?.responsive ?? false
-      const should_update = dims_changed || (!colorbar_hover.is_locked.current &&
-        (is_responsive || !has_initial_colorbar_placement))
-
-      if (should_update) {
-        tweened_colorbar_coords.set(
-          { x: color_bar_placement.x, y: color_bar_placement.y },
-          has_initial_colorbar_placement ? undefined : { duration: 0 },
-        )
-        if (colorbar_element && !has_initial_colorbar_placement) {
-          has_initial_colorbar_placement = true
-        }
-      }
-    }
-
-    // Update legend position (stable after initial placement unless responsive)
-    if (legend_manual_position && !legend_is_dragging) {
-      // Immediate update (no animation) for manually dragged positions
-      tweened_legend_coords.set(legend_manual_position, { duration: 0 })
-    } else if (active_legend_placement && !legend_is_dragging) {
-      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: active_legend_placement.x, y: active_legend_placement.y },
-          has_initial_legend_placement ? undefined : { duration: 0 },
-        )
-        if (legend_element) has_initial_legend_placement = true
-      }
-    }
+  // Tweened colorbar/legend coordinates with shared placement stability gating
+  const colorbar_tween = create_placed_tween({
+    placement: () => color_bar_placement,
+    dims: () => ({ width, height }),
+    responsive: () => color_bar?.responsive ?? false,
+    element: () => colorbar_element,
+    tween: () => color_bar?.tween,
+  })
+  const legend_tween = create_placed_tween({
+    placement: () => active_legend_placement,
+    dims: () => ({ width, height }),
+    responsive: () => legend?.responsive ?? false,
+    element: () => legend_element,
+    tween: () => legend?.tween,
+    // Leave coords alone mid-drag; once dragged, the manual position wins permanently
+    suspended: () => legend_is_dragging,
+    manual_position: () => legend_manual_position,
   })
 
   // Generate axis ticks - consolidated into single derived for efficiency
@@ -1061,15 +1039,16 @@
         x_scale_for_ticks,
         { format: final_x_axis.format },
       ),
-      x2: x2_points.length > 0
-        ? generate_ticks(
-          [x2_min, x2_max],
-          final_x2_axis.scale_type ?? `linear`,
-          final_x2_axis.ticks,
-          x2_scale_for_ticks,
-          { format: final_x2_axis.format },
-        )
-        : [],
+      x2:
+        x2_points.length > 0
+          ? generate_ticks(
+              [x2_min, x2_max],
+              final_x2_axis.scale_type ?? `linear`,
+              final_x2_axis.ticks,
+              x2_scale_for_ticks,
+              { format: final_x2_axis.format },
+            )
+          : [],
       y: generate_ticks(
         [y_min, y_max],
         final_y_axis.scale_type ?? `linear`,
@@ -1077,15 +1056,16 @@
         y_scale_fn,
         { default_count: 5 },
       ),
-      y2: y2_points.length > 0
-        ? generate_ticks(
-          [y2_min, y2_max],
-          final_y2_axis.scale_type ?? `linear`,
-          final_y2_axis.ticks,
-          y2_scale_fn,
-          { default_count: 5 },
-        )
-        : [],
+      y2:
+        y2_points.length > 0
+          ? generate_ticks(
+              [y2_min, y2_max],
+              final_y2_axis.scale_type ?? `linear`,
+              final_y2_axis.ticks,
+              y2_scale_fn,
+              { default_count: 5 },
+            )
+          : [],
     }
   })
 
@@ -1102,250 +1082,76 @@
     y2_max: measure_max_tick_width(y2_tick_values, final_y2_axis.format ?? ``),
   })
 
-  // Define global handlers reference for adding/removing listeners
-  const on_window_mouse_move = (evt: MouseEvent) => {
-    if (!drag_start_coords || !svg_bounding_box) return // Exit if not dragging or no bounds
-
-    // Calculate mouse position relative to the stored SVG bounding box
-    const current_x = evt.clientX - svg_bounding_box.left
-    const current_y = evt.clientY - svg_bounding_box.top
-    drag_current_coords = { x: current_x, y: current_y }
-
-    // Optional: update tooltip only if inside SVG bounds
-    const is_inside_svg = current_x >= 0 &&
-      current_x <= svg_bounding_box.width &&
-      current_y >= 0 &&
-      current_y <= svg_bounding_box.height
-
-    if (is_inside_svg) {
-      // Use the already calculated relative coordinates
-      update_tooltip_point(current_x, current_y)
-    } else tooltip_point = null // Clear tooltip if outside
-  }
-
-  const on_window_mouse_up = (_evt: MouseEvent) => {
-    if (drag_start_coords && drag_current_coords) {
-      // Use current scales to invert screen coords to data coords
-      const start_data_x_val = x_scale_fn.invert(drag_start_coords.x)
-      const end_data_x_val = x_scale_fn.invert(drag_current_coords.x)
-      const start_data_y_val = y_scale_fn.invert(drag_start_coords.y)
-      const end_data_y_val = y_scale_fn.invert(drag_current_coords.y)
-
-      // Same scale inverts both coords, so both are numbers or both are Dates
-      const [x1, x2] = [to_epoch_num(start_data_x_val), to_epoch_num(end_data_x_val)]
-      const next_x_range = sorted_range(x1, x2)
-      // Y axis is always number
-      const next_y_range = sorted_range(start_data_y_val, end_data_y_val)
-
-      // Check for minuscule zoom box (e.g. accidental click)
-      const min_zoom_size = 5 // Minimum pixels to trigger zoom
-      const dx = Math.abs(drag_start_coords.x - drag_current_coords.x)
-      const dy = Math.abs(drag_start_coords.y - drag_current_coords.y)
-
-      if (
-        dx > min_zoom_size &&
-        dy > min_zoom_size &&
-        next_x_range[0] !== next_x_range[1] &&
-        next_y_range[0] !== next_y_range[1]
-      ) {
-        // Update axis ranges to trigger reactivity (like BarPlot/Histogram do)
-        x_axis = { ...x_axis, range: next_x_range }
-        y_axis = { ...y_axis, range: next_y_range }
-
-        // X2 axis: invert screen coords using x2 scale
-        if (x2_points.length > 0) {
-          const x2_a = to_epoch_num(x2_scale_fn.invert(drag_start_coords.x))
-          const x2_b = to_epoch_num(x2_scale_fn.invert(drag_current_coords.x))
-          x2_axis = { ...x2_axis, range: sorted_range(x2_a, x2_b) }
-        }
-
-        // Y2 axis: when sync is enabled the y_axis effect derives y2; with sync 'none'
-        // y2 must zoom from the rect directly (parity with BarPlot/Histogram/BoxPlot)
-        if (y2_points.length > 0 && y2_sync_config.mode === `none`) {
-          const y2_a = y2_scale_fn.invert(drag_start_coords.y)
-          const y2_b = y2_scale_fn.invert(drag_current_coords.y)
-          y2_axis = { ...y2_axis, range: sorted_range(y2_a, y2_b) }
-        }
+  // Shared pan/zoom/touch/drag-rect interaction controller. set_range routes y2
+  // writes through get_synced_y2 (write-order contract: y is written before y2, so
+  // the sync reads the just-updated y range).
+  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) => {
+      if (axis === `y2`) ranges.current.y2 = get_synced_y2(ranges.current.y, range)
+      else ranges.current[axis] = range
+    },
+    svg: () => svg_element,
+    on_rect_zoom: (start, current) => {
+      // Update axis ranges to trigger reactivity; both x and y must invert to valid
+      // (finite, non-degenerate) ranges or the rect zoom is discarded entirely
+      const next_x = invert_rect_range(x_scale_fn, start.x, current.x)
+      const next_y = invert_rect_range(y_scale_fn, start.y, current.y)
+      if (!next_x || !next_y) return
+      x_axis = { ...x_axis, range: next_x }
+      y_axis = { ...y_axis, range: next_y }
+
+      // X2 axis: invert screen coords using x2 scale
+      const next_x2 =
+        x2_points.length > 0 ? invert_rect_range(x2_scale_fn, start.x, current.x) : null
+      if (next_x2) x2_axis = { ...x2_axis, range: next_x2 }
+
+      // Y2 axis: when sync is enabled the y_axis effect derives y2; with sync 'none'
+      // y2 must zoom from the rect directly (parity with BarPlot/Histogram/BoxPlot)
+      const next_y2 =
+        y2_points.length > 0 && y2_sync_config.mode === `none`
+          ? invert_rect_range(y2_scale_fn, start.y, current.y)
+          : null
+      if (next_y2) y2_axis = { ...y2_axis, range: next_y2 }
+    },
+    on_reset: () => {
+      // Reset to current auto ranges (not stale initial ranges which may have expanded)
+      // This ensures lazy expansion restarts fresh from current data bounds
+      ranges.initial = {
+        x: [...auto_x_range] as Vec2,
+        x2: [...auto_x2_range] as Vec2,
+        y: [...auto_y_range] as Vec2,
+        y2: [...auto_y2_range] as Vec2,
       }
-    }
-
-    // Reset states and remove listeners
-    drag_start_coords = null
-    drag_current_coords = null
-    svg_bounding_box = 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)
-    zoom_x_range = pan_range_by_pixels(init.initial_x_range, dx_px, plot_width, final_x_axis.scale_type)
-    zoom_x2_range = pan_range_by_pixels(init.initial_x2_range, dx_px, plot_width, final_x2_axis.scale_type)
-    zoom_y_range = pan_range_by_pixels(init.initial_y_range, dy_px, plot_height, final_y_axis.scale_type)
-    zoom_y2_range = get_synced_y2(
-      zoom_y_range,
-      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) => {
-    zoom_x_range = zoom_range_by_factor(init.initial_x_range, factor, final_x_axis.scale_type)
-    zoom_x2_range = zoom_range_by_factor(init.initial_x2_range, factor, final_x2_axis.scale_type)
-    zoom_y_range = zoom_range_by_factor(init.initial_y_range, factor, final_y_axis.scale_type)
-    zoom_y2_range = get_synced_y2(
-      zoom_y_range,
-      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_start_coords = null
-    drag_current_coords = null
-    svg_bounding_box = null
-    pan_drag_state = null
-  })
-
-  function handle_mouse_down(evt: MouseEvent) {
-    if (!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: [...zoom_x_range] as [number, number],
-        initial_x2_range: [...zoom_x2_range] as [number, number],
-        initial_y_range: [...zoom_y_range] as [number, number],
-        initial_y2_range: [...zoom_y2_range] as [number, number],
+      ranges.current = {
+        x: [...auto_x_range] as Vec2,
+        x2: [...auto_x2_range] as Vec2,
+        y: [...auto_y_range] as Vec2,
+        y2: get_synced_y2(auto_y_range, [...auto_y2_range] as Vec2),
       }
-      document.body.style.cursor = `grabbing`
-      window.addEventListener(`mousemove`, on_pan_move)
-      window.addEventListener(`mouseup`, on_pan_end)
-      return
-    }
-
-    // Store bounding box first, then calculate coords using it
-    svg_bounding_box = svg_element.getBoundingClientRect()
-
-    // Calculate initial coords using the same bounding box that will be used during drag
-    const initial_x = evt.clientX - svg_bounding_box.left
-    const initial_y = evt.clientY - svg_bounding_box.top
-    const coords = { x: initial_x, y: initial_y }
-
-    drag_start_coords = coords
-    drag_current_coords = coords
-
-    window.addEventListener(`mousemove`, on_window_mouse_move)
-    window.addEventListener(`mouseup`, on_window_mouse_up)
-    document.body.style.cursor = `crosshair`
-    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
-    // (deltaX for horizontal scroll on trackpads, deltaY for vertical)
-    if (Math.abs(evt.deltaX) > Math.abs(evt.deltaY)) {
-      const dx = evt.deltaX * sensitivity
-      zoom_x_range = pan_range_by_pixels(zoom_x_range, dx, plot_width, final_x_axis.scale_type)
-      zoom_x2_range = pan_range_by_pixels(zoom_x2_range, dx, plot_width, final_x2_axis.scale_type)
-    } else {
-      const dy = evt.deltaY * sensitivity
-      zoom_y_range = pan_range_by_pixels(zoom_y_range, dy, plot_height, final_y_axis.scale_type)
-      zoom_y2_range = get_synced_y2(
-        zoom_y_range,
-        pan_range_by_pixels(zoom_y2_range, 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: [...zoom_x_range] as [number, number],
-      initial_x2_range: [...zoom_x2_range] as [number, number],
-      initial_y_range: [...zoom_y_range] as [number, number],
-      initial_y2_range: [...zoom_y2_range] 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
-  }
+      // 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] }
+    },
+    // Live tooltip while rect-dragging: update for the closest point inside the
+    // plot bounds, clear when the cursor leaves the svg
+    on_drag_move: (coords, inside_svg) => {
+      if (inside_svg) update_tooltip_point(coords.x, coords.y)
+      else tooltip_point = null
+    },
+  })
+  onDestroy(() => pan_zoom.destroy())
 
   // tooltip logic: find closest point and update tooltip state
   function update_tooltip_point(x_rel: number, y_rel: number, evt?: MouseEvent) {
@@ -1369,9 +1175,7 @@
         const point_cx = tooltip_is_time_x
           ? tooltip_x_scale(new Date(point.x))
           : tooltip_x_scale(point.x)
-        const point_cy = (series_data.y_axis === `y2` ? y2_scale_fn : y_scale_fn)(
-          point.y,
-        )
+        const point_cy = (series_data.y_axis === `y2` ? y2_scale_fn : y_scale_fn)(point.y)
 
         // Calculate squared screen distance between mouse and point
         const screen_dx = x_rel - point_cx
@@ -1388,11 +1192,7 @@
     }
 
     // Check if the closest point is within the hover threshold
-    if (
-      closest_point &&
-      closest_series &&
-      min_screen_dist_sq <= hover_threshold_px_sq
-    ) {
+    if (closest_point && closest_series && min_screen_dist_sq <= hover_threshold_px_sq) {
       // Construct handler props synchronously to avoid stale derived reads
       const props = construct_handler_props(closest_point)
       tooltip_point = closest_point
@@ -1467,8 +1267,8 @@
     const new_y = event.clientY - svg_rect.top - legend_drag_offset.y
 
     // Get actual legend dimensions for accurate bounds checking using the bound element reference
-    const { width: legend_width, height: legend_height } = legend_element
-      .getBoundingClientRect()
+    const { width: legend_width, height: legend_height } =
+      legend_element.getBoundingClientRect()
 
     // Constrain to plot bounds using measured legend size
     const constrained_x = Math.max(0, Math.min(width - legend_width, new_x))
@@ -1477,7 +1277,7 @@
     legend_manual_position = { x: constrained_x, y: constrained_y }
   }
 
-  function get_screen_coords(point: Point, data_series?: DataSeries): [number, number] {
+  function get_screen_coords(point: Point, data_series?: DataSeries): Vec2 {
     // convert data coordinates to potentially non-finite screen coordinates
     const use_x2 = data_series?.x_axis === `x2`
     const active_x_scale = use_x2 ? x2_scale_fn : x_scale_fn
@@ -1514,9 +1314,7 @@
     const cx = handler_is_time_x ? handler_x_scale(new Date(x)) : handler_x_scale(x)
     const cy = (hovered_series.y_axis === `y2` ? y2_scale_fn : y_scale_fn)(y)
     const active_x_config = handler_use_x2 ? final_x2_axis : final_x_axis
-    const active_y_config = hovered_series.y_axis === `y2`
-      ? final_y2_axis
-      : final_y_axis
+    const active_y_config = hovered_series.y_axis === `y2` ? final_y2_axis : final_y_axis
     const coords = {
       x,
       y,
@@ -1533,8 +1331,8 @@
       metadata,
       label: hovered_series.label ?? null,
       series_idx,
-      x_formatted: format_value(x, active_x_config.format || `.3~s`),
-      y_formatted: format_value(y, active_y_config.format || `.3~s`),
+      x_formatted: format_value_or_num(x, active_x_config.format),
+      y_formatted: format_value_or_num(y, active_y_config.format),
       color_value: color_value ?? null,
       colorbar: {
         value: color_value ?? null,
@@ -1556,9 +1354,7 @@
   // Precompute non-click event names from point_events so we don't rebuild
   // the entries array on every point render.
   let point_event_names = $derived(
-    point_events
-      ? Object.keys(point_events).filter((name) => name !== `onclick`)
-      : [],
+    point_events ? Object.keys(point_events).filter((name) => name !== `onclick`) : [],
   )
 
   // Set theme-aware background when entering fullscreen
@@ -1567,41 +1363,30 @@
   })
 
   // State accessors for shared axis change handler
+  // Spread into existing state in each setter to preserve merged type structure
   const axis_state: AxisChangeState<DataSeries<Metadata>> = {
-    get_axis: (axis) => {
-      if (axis === `x`) return x_axis
-      if (axis === `x2`) return x2_axis
-      if (axis === `y`) return y_axis
-      return y2_axis
-    },
-    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>
 
 {#snippet fill_regions_layer(fills: typeof computed_fills)}
   {#each fills as fill (fill.hover_key)}
-    {#each fill.path_segments as
-      path_d,
-      segment_idx
-      (`${fill.id ?? fill.idx}-${segment_idx}`)
-    }
+    {#each fill.path_segments as path_d, segment_idx (`${fill.id ?? fill.idx}-${segment_idx}`)}
       <FillArea
         region={fill}
         region_idx={fill.idx}
@@ -1658,11 +1443,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
@@ -1670,7 +1453,7 @@
   bind:clientWidth={width}
   bind:clientHeight={height}
   {...rest}
-  class="scatter {rest.class ?? ``}"
+  class={[`scatter`, rest.class]}
   class:fullscreen
 >
   {#if width && height}
@@ -1686,49 +1469,30 @@
       bind:this={svg_element}
       role="application"
       aria-label={rest[`aria-label`] ??
-      ([final_x_axis.label, final_y_axis.label].filter(Boolean).join(` vs `) ||
-        `Scatter plot`)}
+        ([final_x_axis.label, final_y_axis.label].filter(Boolean).join(` vs `) ||
+          `Scatter plot`)}
       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}
       onmousemove={(evt: MouseEvent) => {
         // Only find closest point if not actively dragging
-        if (!drag_start_coords && !pan_drag_state) on_mouse_move(evt)
+        if (!pan_zoom.drag_start && !pan_zoom.is_pan_dragging) on_mouse_move(evt)
       }}
       onmouseleave={() => {
         hovered = false
         tooltip_point = null
         on_point_hover?.(null)
       }}
-      ondblclick={() => {
-        // Reset to current auto ranges (not stale initial_*_range which may have expanded)
-        // This ensures lazy expansion restarts fresh from current data bounds
-        initial_x_range = [...auto_x_range] as [number, number]
-        initial_x2_range = [...auto_x2_range] as [number, number]
-        initial_y_range = [...auto_y_range] as [number, number]
-        initial_y2_range = [...auto_y2_range] as [number, number]
-        zoom_x_range = [...auto_x_range] as [number, number]
-        zoom_x2_range = [...auto_x2_range] as [number, number]
-        zoom_y_range = [...auto_y_range] as [number, number]
-        zoom_y2_range = get_synced_y2(auto_y_range, [...auto_y2_range] as Vec2)
-        // Also reset axis props so future data changes recalculate auto ranges
-        x_axis = { ...x_axis, range: [null, null] }
-        x2_axis = { ...x2_axis, range: [null, null] }
-        y_axis = { ...y_axis, range: [null, null] }
-        y2_axis = { ...y2_axis, range: [null, null] }
-      }}
-      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`}
+      ondblclick={pan_zoom.reset_view}
+      onkeydown={pan_zoom.on_key_down}
+      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}
     >
       {@render user_content?.({
         height,
@@ -1763,7 +1527,7 @@
         domain={[x_min, x_max]}
         tick_label={(tick) => get_tick_label(tick, final_x_axis.ticks)}
         label_x={width / 2 + (final_x_axis.label_shift?.x ?? 0)}
-        label_y={height - pad.b - (final_x_axis.label_shift?.y ?? -40)}
+        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)}
       />
@@ -1771,8 +1535,8 @@
       <!-- Current frame indicator -->
       {#if current_x_value != null}
         {@const current_pos_raw = is_time_x
-        ? x_scale_fn(new Date(current_x_value))
-        : x_scale_fn(current_x_value)}
+          ? x_scale_fn(new Date(current_x_value))
+          : x_scale_fn(current_x_value)}
         {#if isFinite(current_pos_raw)}
           {@const current_pos = current_pos_raw}
           {#if current_pos >= pad.l && current_pos <= width - pad.r}
@@ -1806,7 +1570,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)}
@@ -1851,7 +1616,7 @@
           domain={[x2_min, x2_max]}
           tick_label={(tick) => get_tick_label(tick, final_x2_axis.ticks)}
           label_x={width / 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)}
         />
@@ -1859,7 +1624,7 @@
 
       <!-- Tooltip rendered inside overlay (moved outside SVG for stacking above colorbar) -->
 
-      <ZoomRect start={drag_start_coords} current={drag_current_coords} />
+      <ZoomRect start={pan_zoom.drag_start} current={pan_zoom.drag_current} />
 
       <ZeroLines
         display={final_display}
@@ -1867,10 +1632,10 @@
         {x2_scale_fn}
         {y_scale_fn}
         {y2_scale_fn}
-        x_range={zoom_x_range}
-        x2_range={zoom_x2_range}
-        y_range={zoom_y_range}
-        y2_range={zoom_y2_range}
+        x_range={ranges.current.x}
+        x2_range={ranges.current.x2}
+        y_range={ranges.current.y}
+        y2_range={ranges.current.y2}
         x_scale_type={final_x_axis.scale_type}
         x2_scale_type={final_x2_axis.scale_type}
         y_scale_type={final_y_axis.scale_type}
@@ -1909,30 +1674,32 @@
             data-series-id={series_data._id}
             clip-path="url(#{clip_path_id})"
             opacity={hovered_legend_series_idx !== null &&
-                hovered_legend_series_idx !== series_data.orig_series_idx
+            hovered_legend_series_idx !== series_data.orig_series_idx
               ? 0.25
               : 1}
           >
-            {#if series_markers?.includes(`line`)}
+            {#if series_markers.includes(`line`)}
               {@const all_line_points = series_data.x.map((x, idx) => ({
-          x,
-          y: series_data.y[idx],
-        }))}
+                x,
+                y: series_data.y[idx],
+              }))}
               {@const finite_screen_points = all_line_points
-          .map((point) => get_screen_coords(point, series_data))
-          .filter(([sx, sy]) => isFinite(sx) && isFinite(sy))}
-              {@const apply_line_controls = controls.show &&
-          (!has_multiple_series ||
-            series_data._id === series_with_ids[selected_series_idx]?._id)}
+                .map((point) => get_screen_coords(point, series_data))
+                .filter(([sx, sy]) => isFinite(sx) && isFinite(sy))}
+              {@const apply_line_controls =
+                controls.show &&
+                (!has_multiple_series ||
+                  series_data._id === series_with_ids[selected_series_idx]?._id)}
               {@const ls = series_data.line_style}
               {@const tc = (key: string) => apply_line_controls && touched.has(key)}
-              {@const color_fallback = ls?.stroke ??
-          (Array.isArray(series_data.point_style)
-            ? series_data.point_style[0]?.fill
-            : series_data.point_style?.fill) ??
-          (series_data.color_values?.[0] != null
-            ? color_scale_fn(series_data.color_values[0])
-            : series_default_color)}
+              {@const color_fallback =
+                ls?.stroke ??
+                (Array.isArray(series_data.point_style)
+                  ? series_data.point_style[0]?.fill
+                  : series_data.point_style?.fill) ??
+                (series_data.color_values?.[0] != null
+                  ? color_scale_fn(series_data.color_values[0])
+                  : series_default_color)}
               <Line
                 points={finite_screen_points}
                 origin={[
@@ -1940,8 +1707,11 @@
                   series_data.y_axis === `y2` ? y2_scale_fn(y2_min) : y_scale_fn(y_min),
                 ]}
                 line_color={(tc(`line.color`) ? styles.line?.color : null) ?? color_fallback}
-                line_width={(tc(`line.width`) ? styles.line?.width : null) ?? ls?.stroke_width ?? 2}
+                line_width={(tc(`line.width`) ? styles.line?.width : null) ??
+                  ls?.stroke_width ??
+                  2}
                 line_dash={(tc(`line.dash`) ? styles.line?.dash : null) ?? ls?.line_dash}
+                curve={ls?.curve}
                 area_color="transparent"
                 line_tween={effective_line_tween}
               />
@@ -1962,53 +1732,60 @@
           {@const series_default_color = get_series_color(series_data.orig_series_idx ?? 0)}
           {@const series_default_symbol = get_series_symbol(series_data.orig_series_idx ?? 0)}
           <g data-series-id={series_data._id}>
-            {#if series_markers?.includes(`points`)}
-              {#each series_data.filtered_data as
-                point
-                (`${point.series_idx}-${point.point_idx}`)
-              }
+            {#if series_markers.includes(`points`)}
+              {#each series_data.filtered_data as point (`${point.series_idx}-${point.point_idx}`)}
                 {@const label_id = `${point.series_idx}-${point.point_idx}`}
                 {@const calculated_label_pos = label_positions[label_id]}
                 {@const point_label = point.point_label ?? {}}
-                {@const label_style = point_label.auto_placement &&
-          actual_label_config.max_neighbors &&
-          !calculated_label_pos
-          ? {}
-          : point_label}
+                {@const label_style =
+                  point_label.auto_placement &&
+                  actual_label_config.max_neighbors &&
+                  !calculated_label_pos
+                    ? {}
+                    : point_label}
                 {@const final_label = calculated_label_pos
-          ? {
-            ...label_style,
-            offset: {
-              x: calculated_label_pos.x -
-                (is_time_x ? x_scale_fn(new Date(point.x)) : x_scale_fn(point.x)),
-              y: calculated_label_pos.y - (series_data.y_axis === `y2`
-                ? y2_scale_fn(point.y)
-                : y_scale_fn(point.y)),
-            },
-          }
-          : label_style}
+                  ? {
+                      ...label_style,
+                      offset: {
+                        x:
+                          calculated_label_pos.x -
+                          (is_time_x ? x_scale_fn(new Date(point.x)) : x_scale_fn(point.x)),
+                        y:
+                          calculated_label_pos.y -
+                          (series_data.y_axis === `y2`
+                            ? y2_scale_fn(point.y)
+                            : y_scale_fn(point.y)),
+                      },
+                    }
+                  : label_style}
                 {@const [raw_screen_x, raw_screen_y] = get_screen_coords(point, series_data)}
-                {@const screen_x = isFinite(raw_screen_x) ? raw_screen_x : x_scale_fn.range()[0]}
+                {@const screen_x = isFinite(raw_screen_x)
+                  ? raw_screen_x
+                  : x_scale_fn.range()[0]}
                 {@const screen_y = isFinite(raw_screen_y)
-          ? raw_screen_y
-          : (series_data.y_axis === `y2` ? y2_scale_fn : y_scale_fn).range()[0]}
-                {@const apply_controls = controls.show &&
-          (!has_multiple_series ||
-            series_data._id === series_with_ids[selected_series_idx]?._id)}
+                  ? raw_screen_y
+                  : (series_data.y_axis === `y2` ? y2_scale_fn : y_scale_fn).range()[0]}
+                {@const apply_controls =
+                  controls.show &&
+                  (!has_multiple_series ||
+                    series_data._id === series_with_ids[selected_series_idx]?._id)}
                 {@const pt = point.point_style}
                 {@const tc = (key: string) => apply_controls && touched.has(key)}
-                {@const computed_radius = point.size_value != null
-          ? size_scale_fn(point.size_value)
-          : (tc(`point.size`) ? styles.point?.size : null) ?? pt?.radius ?? 4}
+                {@const computed_radius =
+                  point.size_value != null
+                    ? size_scale_fn(point.size_value)
+                    : ((tc(`point.size`) ? styles.point?.size : null) ??
+                      pt?.radius ??
+                      default_point_radius(series_markers))}
                 <ScatterPoint
                   x={screen_x}
                   y={screen_y}
                   is_dimmed={hovered_legend_series_idx !== null &&
                     hovered_legend_series_idx !== point.series_idx}
                   is_hovered={tooltip_point?.series_idx === point.series_idx &&
-                  tooltip_point?.point_idx === point.point_idx}
+                    tooltip_point?.point_idx === point.point_idx}
                   is_selected={selected_point?.series_idx === point.series_idx &&
-                  selected_point?.point_idx === point.point_idx}
+                    selected_point?.point_idx === point.point_idx}
                   leader_line_threshold={actual_label_config.leader_line_threshold}
                   style={{
                     symbol_type: pt?.symbol_type ?? series_default_symbol,
@@ -2016,18 +1793,21 @@
                     radius: computed_radius,
                     stroke_width:
                       (tc(`point.stroke_width`) ? styles.point?.stroke_width : null) ??
-                        pt?.stroke_width ?? 1,
+                      pt?.stroke_width ??
+                      1,
                     stroke:
                       (tc(`point.stroke_color`) ? styles.point?.stroke_color : null) ??
-                        pt?.stroke ?? `#000`,
+                      pt?.stroke ??
+                      `#000`,
                     stroke_opacity:
                       (tc(`point.stroke_opacity`) ? styles.point?.stroke_opacity : null) ??
-                        pt?.stroke_opacity ?? 1,
-                    fill_opacity: (tc(`point.opacity`) ? styles.point?.opacity : null) ??
-                      pt?.fill_opacity ?? 1,
-                    cursor: (on_point_click || point_events?.onclick)
-                      ? `pointer`
-                      : undefined,
+                      pt?.stroke_opacity ??
+                      1,
+                    fill_opacity:
+                      (tc(`point.opacity`) ? styles.point?.opacity : null) ??
+                      pt?.fill_opacity ??
+                      1,
+                    cursor: on_point_click || point_events?.onclick ? `pointer` : undefined,
                   }}
                   hover={point.point_hover ?? {}}
                   label={final_label}
@@ -2035,15 +1815,17 @@
                   {point_tween}
                   origin={{ x: plot_center_x, y: plot_center_y }}
                   --point-fill-color={point.color_value != null
-                  ? color_scale_fn(point.color_value)
-                  : (tc(`point.color`) ? styles.point?.color : null) ?? pt?.fill ??
-                    series_default_color}
+                    ? color_scale_fn(point.color_value)
+                    : ((tc(`point.color`) ? styles.point?.color : null) ??
+                      pt?.fill ??
+                      series_default_color)}
                   {...point_events &&
-                  Object.fromEntries(
-                    point_event_names.map((name) => [name, (event: Event) =>
-                      point_events?.[name]?.({ point, event })]
-                    ),
-                  )}
+                    Object.fromEntries(
+                      point_event_names.map((name) => [
+                        name,
+                        (event: Event) => point_events?.[name]?.({ point, event }),
+                      ]),
+                    )}
                   onclick={(event: MouseEvent) => {
                     // Call user-provided onclick handler first if it exists
                     point_events?.onclick?.({ point, event })
@@ -2063,16 +1845,33 @@
       {@render fill_regions_layer(fills_by_z.above_all)}
       <!-- 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(x_scale_fn, [x_min, x_max], final_x_axis),
+          x2: marginal_axis(x2_scale_fn, [x2_min, x2_max], final_x2_axis),
+          y1: marginal_axis(y_scale_fn, [y_min, y_max], final_y_axis),
+          y2: marginal_axis(y2_scale_fn, [y2_min, y2_max], final_y2_axis),
+        }}
+        id={component_id}
+      />
     </svg>
 
     <!-- Tooltip overlay above all plot overlays (legend, colorbar) -->
     {#if handler_props && hovered && tooltip_point}
       {@const { point_label, series_idx } = tooltip_point}
       {@const tooltip_bg_color = pick_tooltip_bg(
-      tooltip_point,
-      series_with_ids[series_idx],
-      color_scale_fn,
-    )}
+        tooltip_point,
+        series_with_ids[series_idx],
+        color_scale_fn,
+      )}
       <PlotTooltip
         x={handler_props.cx}
         y={handler_props.cy}
@@ -2090,9 +1889,10 @@
           {@html sanitize_html(hp.x_axis.label || `x`)}: {hp.x_formatted}<br />
           {@html sanitize_html(hp.y_axis.label || `y`)}: {hp.y_formatted}
           {#if hp.colorbar?.value != null}
-            <br />{@html sanitize_html(hp.colorbar.title || `Color`)}: {
-              format_value(hp.colorbar.value, hp.colorbar.tick_format || `.3~g`)
-            }
+            <br />{@html sanitize_html(hp.colorbar.title || `Color`)}: {format_value(
+              hp.colorbar.value,
+              hp.colorbar.tick_format || `.3~g`,
+            )}
           {/if}
         {/if}
       </PlotTooltip>
@@ -2103,10 +1903,9 @@
       <ScatterPlotControls
         toggle_props={{
           ...controls.toggle_props,
-          style:
-            `--ctrl-btn-right: var(--fullscreen-btn-offset, 30px); top: var(--ctrl-btn-top, 5pt); ${
-              controls.toggle_props?.style ?? ``
-            }`,
+          style: `--ctrl-btn-right: var(--fullscreen-btn-offset, 30px); top: var(--ctrl-btn-top, 5pt); ${
+            controls.toggle_props?.style ?? ``
+          }`,
         }}
         pane_props={controls.pane_props}
         bind:x_axis
@@ -2131,22 +1930,23 @@
     <!-- Color Bar -->
     {#if color_bar && all_color_values.length > 0 && color_bar_placement}
       {@const color_domain = [
-      (typeof color_scale === `string` ? undefined : color_scale.value_range)?.[0] ??
-        auto_color_range[0],
-      (typeof color_scale === `string` ? undefined : color_scale.value_range)?.[1] ??
-        auto_color_range[1],
-    ] as Vec2}
+        (typeof color_scale === `string` ? undefined : color_scale.value_range)?.[0] ??
+          auto_color_range[0],
+        (typeof color_scale === `string` ? undefined : color_scale.value_range)?.[1] ??
+          auto_color_range[1],
+      ] as Vec2}
       <div
         bind:this={colorbar_element}
-        onmouseenter={() => colorbar_hover.set_locked(true)}
-        onmouseleave={() => colorbar_hover.set_locked(false)}
+        onmouseenter={() => colorbar_tween.set_locked(true)}
+        onmouseleave={() => colorbar_tween.set_locked(false)}
         class="colorbar-wrapper"
         role="img"
         aria-label="Color scale legend"
         style={`${
-        // explicit wrapper_style or auto-outside places the colorbar; else auto-placement coords
-        effective_cbar_wrapper_style ??
-          `position: absolute; left: ${tweened_colorbar_coords.current.x}px; top: ${tweened_colorbar_coords.current.y}px`}; pointer-events: auto;`}
+          // explicit wrapper_style or auto-outside places the colorbar; else auto-placement coords
+          effective_cbar_wrapper_style ??
+          `position: absolute; left: ${colorbar_tween.coords.current.x}px; top: ${colorbar_tween.coords.current.y}px`
+        }; pointer-events: auto;`}
       >
         <ColorBar
           tick_labels={4}
@@ -2155,7 +1955,8 @@
           color_scale_domain={color_domain}
           scale_type={typeof color_scale === `string` ? undefined : color_scale.type}
           range={color_domain?.every((val) => val != null) ? color_domain : undefined}
-          bar_style="width: 220px; height: 16px; {color_bar?.style ?? ``}"
+          bar_style="width: {COLOR_BAR_DEFAULTS.width}px; height: {COLOR_BAR_DEFAULTS.horizontal_bar_height}px; {color_bar?.style ??
+            ``}"
           {...color_bar}
           wrapper_style={effective_cbar_wrapper_style ? `height: 100%; width: 100%;` : ``}
         />
@@ -2164,31 +1965,32 @@
 
     <!-- Legend -->
     <!-- Only render if multiple series or if legend prop was explicitly provided by user (even if empty object) -->
-    {#if legend != null && legend_data.length > 0 &&
-      (legend_data.length > 1 || Object.keys(legend ?? {}).length > 0)}
+    {#if legend != null && legend_data.length > 0 && (legend_data.length > 1 || Object.keys(legend ?? {}).length > 0)}
       {@const default_x = pad.l + 10}
       {@const default_y = pad.t + 10}
-      {@const current_x = legend_is_dragging && legend_manual_position
-      ? legend_manual_position.x
-      : legend_auto_outside
-      ? legend_outside_x
-      : legend_placement
-      ? tweened_legend_coords.current.x
-      : default_x}
-      {@const current_y = legend_is_dragging && legend_manual_position
-      ? legend_manual_position.y
-      : legend_auto_outside
-      ? legend_outside_y
-      : legend_placement
-      ? tweened_legend_coords.current.y
-      : default_y}
+      {@const current_x =
+        legend_is_dragging && legend_manual_position
+          ? legend_manual_position.x
+          : legend_auto_outside
+            ? legend_outside_x
+            : legend_placement
+              ? legend_tween.coords.current.x
+              : default_x}
+      {@const current_y =
+        legend_is_dragging && legend_manual_position
+          ? legend_manual_position.y
+          : legend_auto_outside
+            ? legend_outside_y
+            : legend_placement
+              ? legend_tween.coords.current.y
+              : default_y}
       <PlotLegend
         bind:root_element={legend_element}
         series_data={legend_data}
         on_drag_start={handle_legend_drag_start}
         on_drag={handle_legend_drag}
         on_drag_end={() => (legend_is_dragging = false)}
-        on_hover_change={legend_hover.set_locked}
+        on_hover_change={legend_tween.set_locked}
         on_item_hover={(item) => {
           if (item?.item_type === `fill`) {
             // highlight the matching fill in the plot (same state plot fill-hover uses), but skip
@@ -2197,15 +1999,14 @@
             hovered_fill_key = fill && fill.visible !== false ? fill.hover_key : null
             hovered_legend_series_idx = null
           } else {
-            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
             hovered_fill_key = null
           }
         }}
         active_series_idx={tooltip_point?.series_idx ?? hovered_legend_series_idx}
-        active_fill_idx={computed_fills.find((fill) => fill.hover_key === hovered_fill_key)?.idx ??
-          null}
+        active_fill_idx={computed_fills.find((fill) => fill.hover_key === hovered_fill_key)
+          ?.idx ?? null}
         draggable={legend?.draggable ?? true}
         {...legend}
         on_toggle={legend?.on_toggle ?? legend_vis.on_toggle}
@@ -2217,7 +2018,7 @@
             fill_regions = fill_regions.map((region, idx) =>
               idx === source_idx
                 ? { ...region, visible: !(region.visible !== false) }
-                : region
+                : region,
             )
           }
         }}
@@ -2228,7 +2029,9 @@
           // Only fill_regions can be toggled (error_bands are not bindable)
           if (source_type !== `fill_region`) return
           // Toggle: if only this fill is visible, show all; otherwise show only this one
-          const visible_count = fill_regions.filter((region) => region.visible !== false).length
+          const visible_count = fill_regions.filter(
+            (region) => region.visible !== false,
+          ).length
           const this_visible = fill_regions[source_idx]?.visible !== false
           if (visible_count === 1 && this_visible) {
             // Show all fills
@@ -2314,7 +2117,9 @@
   div.scatter :global(.pane-toggle),
   div.scatter .header-controls {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   div.scatter:hover :global(.pane-toggle),
   div.scatter:hover .header-controls,
@@ -2341,10 +2146,7 @@
     color: var(--text-color);
     white-space: nowrap;
     /* Use line-height to center text vertically without flexbox */
-    line-height: var(
-      --scatter-axis-label-line-height,
-      20px
-    ); /* Match foreignObject height */
+    line-height: var(--scatter-axis-label-line-height, 20px); /* Match foreignObject height */
     display: block;
   }
   .current-frame-indicator {