matterviz 0.4.0 → 0.4.1

package/dist/plot/core/components/ColorBar.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../../../math';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { AxisOption, ColorBarDataLoaderFn, ColorScaleOption, Orientation, ScaleType } from '../types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
@@ -9,19 +10,19 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     wrapper_style?: string;
     tick_labels?: (string | number)[] | number;
     tick_format?: string;
-    range?: [number, number];
+    range?: Vec2;
     tick_side?: `primary` | `secondary` | `inside`;
     orientation?: Orientation;
     snap_ticks?: boolean;
     steps?: number;
-    nice_range?: [number, number];
+    nice_range?: Vec2;
     scale_type?: ScaleType;
     color_scale_fn?: (value: number) => string;
-    color_scale_domain?: [number, number];
+    color_scale_domain?: Vec2;
     property_options?: AxisOption[];
     selected_property_key?: string;
     data_loader?: ColorBarDataLoaderFn;
-    on_property_change?: (key: string, range: [number, number]) => void;
+    on_property_change?: (key: string, range: Vec2) => void;
     color_scale_options?: ColorScaleOption[];
     selected_color_scale_key?: string;
     on_color_scale_change?: (key: string) => void;

package/dist/plot/core/components/Line.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Vec2 } from '../../../math'
   import { DEFAULTS } from '../../../settings'
   import { extent, min } from 'd3-array'
   import { interpolatePath } from 'd3-interpolate-path'
@@ -19,8 +20,8 @@
     line_dash = DEFAULTS.scatter.line.dash,
     ...rest
   }: Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
-    points: readonly [number, number][]
-    origin: [number, number]
+    points: readonly Vec2[]
+    origin: Vec2
     line_color?: string
     line_width?: number
     area_color?: string

package/dist/plot/core/components/Line.svelte.d.ts

@@ -1,8 +1,9 @@
+import type { Vec2 } from '../../../math';
 import type { SVGAttributes } from 'svelte/elements';
 import { type TweenOptions } from 'svelte/motion';
 type $$ComponentProps = Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
-    points: readonly [number, number][];
-    origin: [number, number];
+    points: readonly Vec2[];
+    origin: Vec2;
     line_color?: string;
     line_width?: number;
     area_color?: string;

package/dist/plot/core/components/PlotAxis.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { format_value } from '../../../labels'
+  import type { Vec2 } from '../../../math'
   import AxisLabel from './AxisLabel.svelte'
   import type { Sides } from '../layout'
   import type { AxisConfig } from '../types'
@@ -40,7 +41,7 @@
     show_baseline?: boolean // axis spine line (ScatterPlot omits it)
     tick_label?: (tick: number) => string | null | undefined // custom/categorical label
     tick_color?: (tick: number) => string | undefined // per-tick label color (else axis.color)
-    domain?: [number, number] // when set, cull off-plot ticks and hide out-of-domain labels
+    domain?: Vec2 // when set, cull off-plot ticks and hide out-of-domain labels
     unit_on_first_tick?: boolean // append axis.unit after the first tick label (ScatterPlot)
     label_x?: number
     label_y?: number

package/dist/plot/core/components/PlotAxis.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../../../math';
 import type { Sides } from '../layout';
 import type { AxisConfig } from '../types';
 type Side = `x` | `x2` | `y` | `y2`;
@@ -13,7 +14,7 @@ type $$ComponentProps = {
     show_baseline?: boolean;
     tick_label?: (tick: number) => string | null | undefined;
     tick_color?: (tick: number) => string | undefined;
-    domain?: [number, number];
+    domain?: Vec2;
     unit_on_first_tick?: boolean;
     label_x?: number;
     label_y?: number;

package/dist/plot/core/components/PlotControls.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { PlotControlsProps } from '../types';
-declare const PlotControls: import("svelte").Component<PlotControlsProps, {}, "display" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "x2_axis" | "y2_axis">;
+declare const PlotControls: import("svelte").Component<PlotControlsProps, {}, "display" | "show_controls" | "x2_axis" | "y_axis" | "y2_axis" | "controls_open" | "x_axis">;
 type PlotControls = ReturnType<typeof PlotControls>;
 export default PlotControls;

package/dist/plot/core/components/ReferenceLine3D.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   // ReferenceLine3D: 3D reference lines for axis-parallel, segments, and extended lines
   // Uses Line2 for proper variable-width lines (WebGL ignores linewidth on basic lines)
-  import type { Point3D, Vec3 } from '../../../math'
+  import type { Point3D, Vec2, Vec3 } from '../../../math'
   import { T, useThrelte } from '@threlte/core'
   import * as THREE from 'three'
   import { Line2 } from 'three/examples/jsm/lines/Line2.js'
@@ -13,7 +13,7 @@
   let { ref_line, scene_size = [10, 10, 5], ranges }: {
     ref_line: RefLine3D
     scene_size?: Vec3
-    ranges: { x: [number, number]; y: [number, number]; z: [number, number] }
+    ranges: { x: Vec2; y: Vec2; z: Vec2 }
   } = $props()
 
   const { size } = useThrelte()

package/dist/plot/core/components/ReferenceLine3D.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Vec3 } from '../../../math';
+import type { Vec2, Vec3 } from '../../../math';
 import type { RefLine3D } from '../types';
 type $$ComponentProps = {
     ref_line: RefLine3D;
     scene_size?: Vec3;
     ranges: {
-        x: [number, number];
-        y: [number, number];
-        z: [number, number];
+        x: Vec2;
+        y: Vec2;
+        z: Vec2;
     };
 };
 declare const ReferenceLine3D: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/plot/core/components/ReferencePlane.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   // ReferencePlane: 3D reference planes (axis-aligned, normal-defined, or point-defined)
-  import type { Vec3 } from '../../../math'
+  import type { Vec2, Vec3 } from '../../../math'
   import { cross_3d, normalize_vec } from '../../../math'
   import { T } from '@threlte/core'
   import * as THREE from 'three'
@@ -10,7 +10,7 @@
   let { ref_plane, scene_size = [10, 10, 5], ranges }: {
     ref_plane: RefPlane
     scene_size?: Vec3
-    ranges: { x: [number, number]; y: [number, number]; z: [number, number] }
+    ranges: { x: Vec2; y: Vec2; z: Vec2 }
   } = $props()
 
   let [scene_x, scene_y, scene_z] = $derived(scene_size)

package/dist/plot/core/components/ReferencePlane.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Vec3 } from '../../../math';
+import type { Vec2, Vec3 } from '../../../math';
 import type { RefPlane } from '../types';
 type $$ComponentProps = {
     ref_plane: RefPlane;
     scene_size?: Vec3;
     ranges: {
-        x: [number, number];
-        y: [number, number];
-        z: [number, number];
+        x: Vec2;
+        y: Vec2;
+        z: Vec2;
     };
 };
 declare const ReferencePlane: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/plot/core/data-cleaning.js

@@ -274,7 +274,7 @@ export function smooth_savitzky_golay(values, window, polynomial_order = DEFAULT
     const half = Math.floor(actual_window / 2);
     const result = Array(values.length);
     // Cache coefficient sum to avoid O(n × window) redundant reductions in loop
-    const coeffs_sum = coeffs.reduce((a, b) => a + b, 0);
+    const coeffs_sum = coeffs.reduce((sum, coeff) => sum + coeff, 0);
     for (let idx = 0; idx < values.length; idx++) {
         let [sum, weight_sum] = [0, 0];
         for (let jdx = 0; jdx < actual_window; jdx++) {
@@ -437,8 +437,8 @@ export function handle_invalid_values(values, mode) {
             }
             if (left_idx >= 0 && right_idx < cleaned.length) {
                 // Linear interpolation
-                const t = (idx - left_idx) / (right_idx - left_idx);
-                cleaned[idx] = cleaned[left_idx] + t * (cleaned[right_idx] - cleaned[left_idx]);
+                const frac = (idx - left_idx) / (right_idx - left_idx);
+                cleaned[idx] = cleaned[left_idx] + frac * (cleaned[right_idx] - cleaned[left_idx]);
             }
             else if (left_idx >= 0) {
                 cleaned[idx] = cleaned[left_idx];
@@ -797,34 +797,34 @@ function transpose(matrix) {
     }
     return result;
 }
-function multiply_matrices(a, b) {
-    const rows_a = a.length;
-    const cols_a = a[0]?.length ?? 0;
-    const cols_b = b[0]?.length ?? 0;
+function multiply_matrices(matrix_a, matrix_b) {
+    const rows_a = matrix_a.length;
+    const cols_a = matrix_a[0]?.length ?? 0;
+    const cols_b = matrix_b[0]?.length ?? 0;
     const result = Array.from({ length: rows_a }, () => Array(cols_b).fill(0));
     for (let row = 0; row < rows_a; row++) {
         for (let col = 0; col < cols_b; col++) {
-            for (let k = 0; k < cols_a; k++) {
-                result[row][col] += a[row][k] * b[k][col];
+            for (let idx_k = 0; idx_k < cols_a; idx_k++) {
+                result[row][col] += matrix_a[row][idx_k] * matrix_b[idx_k][col];
             }
         }
     }
     return result;
 }
 function invert_matrix(matrix) {
-    const n = matrix.length;
-    if (n === 0 || matrix[0].length !== n)
+    const size = matrix.length;
+    if (size === 0 || matrix[0].length !== size)
         return null;
     // Create augmented matrix [A | I]
     const aug = matrix.map((row, idx) => [
         ...row,
-        ...Array.from({ length: n }, (_, jdx) => (idx === jdx ? 1 : 0)),
+        ...Array.from({ length: size }, (_, jdx) => (idx === jdx ? 1 : 0)),
     ]);
     // Gaussian elimination with partial pivoting
-    for (let col = 0; col < n; col++) {
+    for (let col = 0; col < size; col++) {
         // Find pivot
         let max_row = col;
-        for (let row = col + 1; row < n; row++) {
+        for (let row = col + 1; row < size; row++) {
             if (Math.abs(aug[row][col]) > Math.abs(aug[max_row][col])) {
                 max_row = row;
             }
@@ -836,18 +836,18 @@ function invert_matrix(matrix) {
         [aug[col], aug[max_row]] = [aug[max_row], aug[col]];
         // Eliminate column
         const pivot = aug[col][col];
-        for (let jdx = 0; jdx < 2 * n; jdx++) {
+        for (let jdx = 0; jdx < 2 * size; jdx++) {
             aug[col][jdx] /= pivot;
         }
-        for (let row = 0; row < n; row++) {
+        for (let row = 0; row < size; row++) {
             if (row !== col) {
                 const factor = aug[row][col];
-                for (let jdx = 0; jdx < 2 * n; jdx++) {
+                for (let jdx = 0; jdx < 2 * size; jdx++) {
                     aug[row][jdx] -= factor * aug[col][jdx];
                 }
             }
         }
     }
     // Extract inverse
-    return aug.map((row) => row.slice(n));
+    return aug.map((row) => row.slice(size));
 }

package/dist/plot/core/fill-utils.d.ts

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../../math';
 import type { DataSeries, ErrorBand, FillBoundary, FillCurveType, FillGradient, FillRegion } from './types';
 export declare const LOG_EPSILON = 1e-10;
 export interface Pt {
@@ -21,9 +22,9 @@ export declare function resolve_series_ref(ref: {
 }, series: readonly DataSeries[]): DataSeries | null;
 export declare function monotone_interpolate(xs: readonly number[], ys: readonly number[], x: number, tangents?: readonly number[]): number;
 interface DomainContext {
-    x_domain: [number, number];
-    y_domain: [number, number];
-    y2_domain?: [number, number];
+    x_domain: Vec2;
+    y_domain: Vec2;
+    y2_domain?: Vec2;
 }
 export declare function resolve_boundary_points(boundary: FillBoundary, series: readonly DataSeries[], domains: DomainContext, companion?: Pt[] | null): ResolvedBoundary | null;
 export declare function compute_fill_segments(region: FillRegion, series: readonly DataSeries[], domains: DomainContext): FillSegment[];

package/dist/plot/core/fill-utils.js

@@ -91,9 +91,12 @@ export function monotone_interpolate(xs, ys, x, tangents) {
     const p1 = ys[lo] + dx * tang[lo];
     const p2 = ys[lo + 1] - dx * tang[lo + 1];
     const p3 = ys[lo + 1];
-    const u = (x - x0) / span;
-    const mu = 1 - u;
-    return mu * mu * mu * p0 + 3 * mu * mu * u * p1 + 3 * mu * u * u * p2 + u * u * u * p3;
+    const frac = (x - x0) / span;
+    const mu = 1 - frac;
+    return (mu * mu * mu * p0 +
+        3 * mu * mu * frac * p1 +
+        3 * mu * frac * frac * p2 +
+        frac * frac * frac * p3);
 }
 // Curve types whose interior follows a (near-)monotone cubic; evaluated via monotone_interpolate.
 // Others (linear/step) evaluate piecewise (exact for them at clip points).

package/dist/plot/core/interactions.d.ts

@@ -1,14 +1,18 @@
 import { type Point2D, type Vec2 } from '../../math';
-import type { AxisRanges, ScaleType, Y2SyncConfig, Y2SyncMode } from './types';
+import type { AxisRanges, InitialRanges, ScaleType, Y2SyncConfig, Y2SyncMode } from './types';
 export declare function get_relative_coords(evt: MouseEvent, element?: EventTarget | null): Point2D | null;
 export declare function closest_data_idx(event: Event, attr: string, root?: Element | null): number | null;
 export declare function normalize_y2_sync(sync: Y2SyncConfig | Y2SyncMode | undefined): Y2SyncConfig;
 export declare function sync_y2_range(y1_range: Vec2, y2_base_range: Vec2, sync: Y2SyncConfig): Vec2;
+export declare const snapshot_ranges: ({ x, x2, y, y2 }: AxisRanges) => InitialRanges;
 export declare function pan_range_by_pixels(range: Vec2, pixel_delta: number, pixel_span: number, scale_type?: ScaleType): Vec2;
 export declare function zoom_range_by_factor(range: Vec2, factor: number, scale_type?: ScaleType): Vec2;
 export declare const to_epoch_num: (val: number | Date) => number;
 export declare function remove_drag_listeners(move_handlers: ((evt: MouseEvent) => void)[], up_handlers: ((evt: MouseEvent) => void)[]): void;
 export declare const sorted_range: (a: number, b: number) => Vec2;
+export declare function invert_rect_range(scale: {
+    invert: (px: number) => number | Date;
+}, a_px: number, b_px: number): Vec2 | null;
 export declare const vec2_equal: (a: Vec2, b: Vec2) => boolean;
 export declare const axis_ranges_equal: (a: AxisRanges, b: AxisRanges) => boolean;
 type AxisRangeOverride = {

package/dist/plot/core/interactions.js

@@ -91,6 +91,13 @@ function axis_transform(scale_type) {
     }
     return { to: (val) => val, from: (val) => val };
 }
+// Snapshot the four axis ranges as fresh tuples at pan/zoom/touch interaction start
+export const snapshot_ranges = ({ x, x2, y, y2 }) => ({
+    initial_x_range: [...x],
+    initial_x2_range: [...x2],
+    initial_y_range: [...y],
+    initial_y2_range: [...y2],
+});
 // Pan a range by a pixel delta, uniformly in screen space: linear axes shift by a
 // constant amount, log axes by a constant factor (which also can't cross zero).
 // `pixel_span` is the plot's pixel extent along the axis.
@@ -133,6 +140,13 @@ export function remove_drag_listeners(move_handlers, up_handlers) {
 // Sorted [min, max] from two scalar bounds (rect-zoom inverts drag start/end,
 // which arrive in either order depending on drag direction)
 export const sorted_range = (a, b) => [Math.min(a, b), Math.max(a, b)];
+// Invert a drag-rect edge pair through a scale to a sorted finite data range
+// (time scales invert to Dates, coerced to epoch numbers). Returns null when
+// either bound is non-finite or the range is degenerate (zero span).
+export function invert_rect_range(scale, a_px, b_px) {
+    const range = sorted_range(to_epoch_num(scale.invert(a_px)), to_epoch_num(scale.invert(b_px)));
+    return range.every(Number.isFinite) && range[0] !== range[1] ? range : null;
+}
 // Strict per-bound equality of two [min, max] ranges
 export const vec2_equal = (a, b) => a[0] === b[0] && a[1] === b[1];
 // True when all four axis ranges match. The range-sync effects use this to skip

package/dist/plot/core/pan-zoom.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Point2D, Vec2 } from '../../math';
+import type { AxisRanges, PanConfig, ScaleType } from './types';
+type Axis = `x` | `x2` | `y` | `y2`;
+export interface PanZoomOptions {
+    ranges: () => AxisRanges;
+    scale_type: (axis: Axis) => ScaleType | undefined;
+    plot_dims: () => {
+        width: number;
+        height: number;
+    };
+    pan: () => PanConfig | undefined;
+    set_range: (axis: Axis, range: Vec2) => void;
+    svg: () => SVGElement | null;
+    on_rect_zoom: (start: Point2D, current: Point2D) => void;
+    on_reset: () => void;
+    on_drag_move?: (coords: Point2D, inside_svg: boolean) => void;
+}
+export declare function create_pan_zoom(opts: PanZoomOptions): {
+    readonly drag_start: Point2D | null;
+    readonly drag_current: Point2D | null;
+    readonly is_pan_dragging: boolean;
+    readonly cursor: string;
+    set_focused: (focused: boolean) => void;
+    on_mouse_down: (evt: MouseEvent) => void;
+    on_wheel: (evt: WheelEvent) => void;
+    on_touch_start: (evt: TouchEvent) => void;
+    on_touch_move: (evt: TouchEvent) => void;
+    on_touch_end: () => void;
+    on_key_down: (evt: KeyboardEvent) => void;
+    on_window_key_down: (evt: KeyboardEvent) => void;
+    on_window_key_up: (evt: KeyboardEvent) => void;
+    reset_view: () => void;
+    destroy: () => void;
+};
+export {};

package/dist/plot/core/pan-zoom.svelte.js

@@ -0,0 +1,221 @@
+// Shared pan/zoom/touch/drag-rect interaction controller for the 2D plot components
+// (BarPlot, BoxPlot, Histogram, ScatterPlot). Owns the interaction state machine;
+// per-component policy (which axis props to write on rect-zoom, reset semantics)
+// stays in the component via the on_rect_zoom/on_reset/set_range callbacks.
+import { MIN_TOUCH_DISTANCE_PIXELS, pan_range_by_pixels, PINCH_ZOOM_THRESHOLD, remove_drag_listeners, snapshot_ranges, zoom_range_by_factor, } from './interactions';
+const AXES = [`x`, `x2`, `y`, `y2`];
+export function create_pan_zoom(opts) {
+    // Rect-zoom drag state
+    let drag_state = $state({ start: null, current: null, bounds: null });
+    // Pan state
+    let is_focused = $state(false);
+    let shift_held = $state(false);
+    let pan_drag_state = $state(null);
+    let touch_state = $state(null);
+    const cancel_rect_drag = () => {
+        drag_state = { start: null, current: null, bounds: null };
+        if (typeof window !== `undefined`) {
+            window.removeEventListener(`mousemove`, on_window_mouse_move);
+            window.removeEventListener(`mouseup`, on_window_mouse_up);
+            document.body.style.cursor = ``;
+        }
+    };
+    const on_window_mouse_move = (evt) => {
+        if (!drag_state.start || !drag_state.bounds)
+            return;
+        const coords = {
+            x: evt.clientX - drag_state.bounds.left,
+            y: evt.clientY - drag_state.bounds.top,
+        };
+        drag_state.current = coords;
+        const inside_svg = coords.x >= 0 &&
+            coords.x <= drag_state.bounds.width &&
+            coords.y >= 0 &&
+            coords.y <= drag_state.bounds.height;
+        opts.on_drag_move?.(coords, inside_svg);
+    };
+    const on_window_mouse_up = () => {
+        if (drag_state.start && drag_state.current) {
+            // Ignore minuscule drag rects (e.g. accidental clicks)
+            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)
+                opts.on_rect_zoom(drag_state.start, drag_state.current);
+        }
+        cancel_rect_drag();
+    };
+    // 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, dx_px, dy_px) => {
+        const dims = opts.plot_dims();
+        for (const axis of AXES) {
+            const horizontal = axis === `x` || axis === `x2`;
+            opts.set_range(axis, pan_range_by_pixels(init[`initial_${axis}_range`], horizontal ? dx_px : dy_px, horizontal ? dims.width : dims.height, opts.scale_type(axis)));
+        }
+    };
+    const zoom_all_axes = (init, factor) => {
+        for (const axis of AXES) {
+            opts.set_range(axis, zoom_range_by_factor(init[`initial_${axis}_range`], factor, opts.scale_type(axis)));
+        }
+    };
+    // Pan drag handler (drag direction inverted on x for natural pan feel)
+    const on_pan_move = (evt) => {
+        if (!pan_drag_state)
+            return;
+        const sensitivity = opts.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);
+    };
+    const on_mouse_down = (evt) => {
+        const svg = opts.svg();
+        if (!svg)
+            return;
+        // Shift+drag pans (when enabled); plain drag draws the zoom rect
+        const pan_enabled = opts.pan()?.enabled !== false;
+        if (pan_enabled && evt.shiftKey) {
+            evt.preventDefault();
+            pan_drag_state = {
+                start: { x: evt.clientX, y: evt.clientY },
+                ...snapshot_ranges(opts.ranges()),
+            };
+            document.body.style.cursor = `grabbing`;
+            window.addEventListener(`mousemove`, on_pan_move);
+            window.addEventListener(`mouseup`, on_pan_end);
+            return;
+        }
+        // Cache bounds at drag start so window mousemove can compute relative coords
+        const bounds = svg.getBoundingClientRect();
+        const coords = { x: evt.clientX - bounds.left, y: evt.clientY - bounds.top };
+        drag_state = { start: coords, current: coords, bounds };
+        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). Use shift_held state
+    // (tracked via window keydown/keyup) for compatibility with synthetic events.
+    const on_wheel = (evt) => {
+        const pan_cfg = opts.pan();
+        if (pan_cfg?.enabled === false || !is_focused || !shift_held)
+            return;
+        evt.preventDefault();
+        const dims = opts.plot_dims();
+        const sensitivity = pan_cfg?.wheel_sensitivity ?? 1;
+        const ranges = opts.ranges();
+        // Pan along the dominant wheel direction
+        if (Math.abs(evt.deltaX) > Math.abs(evt.deltaY)) {
+            const dx = evt.deltaX * sensitivity;
+            opts.set_range(`x`, pan_range_by_pixels(ranges.x, dx, dims.width, opts.scale_type(`x`)));
+            opts.set_range(`x2`, pan_range_by_pixels(ranges.x2, dx, dims.width, opts.scale_type(`x2`)));
+        }
+        else {
+            const dy = evt.deltaY * sensitivity;
+            opts.set_range(`y`, pan_range_by_pixels(ranges.y, dy, dims.height, opts.scale_type(`y`)));
+            opts.set_range(`y2`, pan_range_by_pixels(ranges.y2, dy, dims.height, opts.scale_type(`y2`)));
+        }
+    };
+    // Touch handlers for pinch-zoom and two-finger pan
+    const on_touch_start = (evt) => {
+        const pan_cfg = opts.pan();
+        const touch_enabled = pan_cfg?.enabled !== false && pan_cfg?.touch_enabled !== false;
+        if (!touch_enabled || evt.touches.length !== 2)
+            return;
+        evt.preventDefault();
+        touch_state = {
+            start_touches: Array.from(evt.touches).map((touch) => ({
+                x: touch.clientX,
+                y: touch.clientY,
+            })),
+            ...snapshot_ranges(opts.ranges()),
+        };
+    };
+    const on_touch_move = (evt) => {
+        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 in, pinch = zoom out)
+        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 if scale changed significantly, else pan
+        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 on_touch_end = () => {
+        touch_state = null;
+    };
+    // SVG keydown: Escape cancels an in-flight rect drag, Enter/Space resets the view.
+    // Target check keeps focusable plot children (bars, points) from triggering a reset
+    // when their own Enter/Space activation bubbles up.
+    const on_key_down = (evt) => {
+        if (evt.target !== evt.currentTarget)
+            return;
+        if (evt.key === `Escape` && drag_state.start)
+            cancel_rect_drag();
+        if ([`Enter`, ` `].includes(evt.key)) {
+            evt.preventDefault();
+            opts.on_reset();
+        }
+    };
+    return {
+        get drag_start() {
+            return drag_state.start;
+        },
+        get drag_current() {
+            return drag_state.current;
+        },
+        get is_pan_dragging() {
+            return pan_drag_state !== null;
+        },
+        get cursor() {
+            if (pan_drag_state)
+                return `grabbing`;
+            return shift_held && opts.pan()?.enabled !== false ? `grab` : `crosshair`;
+        },
+        set_focused: (focused) => {
+            is_focused = focused;
+        },
+        on_mouse_down,
+        on_wheel,
+        on_touch_start,
+        on_touch_move,
+        on_touch_end,
+        on_key_down,
+        on_window_key_down: (evt) => {
+            if (evt.key === `Shift`)
+                shift_held = true;
+        },
+        on_window_key_up: (evt) => {
+            if (evt.key === `Shift`)
+                shift_held = false;
+        },
+        reset_view: () => opts.on_reset(),
+        // 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). Safe during SSR teardown, where window/document don't exist.
+        destroy: () => {
+            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;
+            touch_state = null;
+        },
+    };
+}

package/dist/plot/core/placed-tween.svelte.d.ts

@@ -0,0 +1,21 @@
+import { Tween, type TweenOptions } from 'svelte/motion';
+type Point = {
+    x: number;
+    y: number;
+};
+export declare function create_placed_tween(opts: {
+    placement: () => Point | null;
+    dims: () => {
+        width: number;
+        height: number;
+    };
+    responsive: () => boolean;
+    element: () => Element | null | undefined;
+    tween?: () => TweenOptions<Point> | undefined;
+    suspended?: () => boolean;
+    manual_position?: () => Point | null;
+}): {
+    coords: Tween<Point>;
+    set_locked: (locked: boolean) => void;
+};
+export {};