matterviz 0.3.2 → 0.3.3

package/dist/plot/Histogram.svelte.d.ts

@@ -45,6 +45,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotCon
     on_error?: (error: AxisLoadError) => void;
     pan?: PanConfig;
 };
-declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "mode" | "series" | "show_controls" | "controls_open" | "fullscreen" | "bins" | "show_legend" | "selected_property" | "hovered" | "ref_lines">;
+declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "mode" | "fullscreen" | "series" | "bins" | "show_legend" | "selected_property" | "hovered" | "ref_lines" | "show_controls" | "controls_open">;
 type Histogram = ReturnType<typeof Histogram>;
 export default Histogram;

package/dist/plot/HistogramControls.svelte

@@ -1,12 +1,56 @@
-<script lang="ts">// NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
-import { SettingsSection } from '../layout';
-import { PlotControls } from './';
-import { DEFAULTS } from '../settings';
-let { series = [], bins = $bindable(DEFAULTS.histogram.bin_count), mode = $bindable(DEFAULTS.histogram.mode), bar = $bindable({}), show_legend = $bindable(DEFAULTS.histogram.show_legend), selected_property = $bindable(``), x_axis = $bindable({}), x2_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), show_controls = $bindable(false), controls_open = $bindable(false), auto_x2_range = undefined, auto_y2_range = undefined, has_x2_points = false, has_y2_points = false, children, ...rest } = $props();
-bar = { ...DEFAULTS.histogram.bar, ...bar }; // Initialize bar styles with defaults (runs once)
-let has_multiple_series = $derived(series.filter(Boolean).length > 1);
-let visible_series = $derived(series.filter((srs) => srs && (srs.visible ?? true)));
-let series_options = $derived(visible_series.map((srs) => srs.label || `Series`));
+<script lang="ts">
+  // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
+  import { SettingsSection } from '../layout'
+  import type { Vec2 } from '../math'
+  import type { BarStyle, DataSeries, PlotConfig } from './'
+  import { PlotControls } from './'
+  import type { PlotControlsProps } from './types'
+  import { DEFAULTS } from '../settings'
+  import type { Snippet } from 'svelte'
+
+  let {
+    series = [],
+    bins = $bindable(DEFAULTS.histogram.bin_count),
+    mode = $bindable(DEFAULTS.histogram.mode),
+    bar = $bindable({}),
+    show_legend = $bindable(DEFAULTS.histogram.show_legend),
+    selected_property = $bindable(``),
+    x_axis = $bindable({}),
+    x2_axis = $bindable({}),
+    y_axis = $bindable({}),
+    y2_axis = $bindable({}),
+    display = $bindable({}),
+    show_controls = $bindable(false),
+    controls_open = $bindable(false),
+    auto_x2_range = undefined,
+    auto_y2_range = undefined,
+    has_x2_points = false,
+    has_y2_points = false,
+    children,
+    ...rest
+  }: Omit<PlotControlsProps, `children` | `post_children`> & {
+    // Series data for multi-series controls
+    series?: readonly DataSeries[]
+    // Histogram-specific controls
+    bins?: number
+    mode?: `single` | `overlay`
+    bar?: BarStyle
+    show_legend?: boolean
+    selected_property?: string
+    show_controls?: boolean
+    controls_open?: boolean
+    auto_x2_range?: Vec2
+    auto_y2_range?: Vec2
+    has_x2_points?: boolean
+    has_y2_points?: boolean
+    children?: Snippet<[Required<PlotConfig>]>
+  } = $props()
+
+  bar = { ...DEFAULTS.histogram.bar, ...bar } // Initialize bar styles with defaults (runs once)
+
+  let has_multiple_series = $derived(series.filter(Boolean).length > 1)
+  let visible_series = $derived(series.filter((srs) => srs && (srs.visible ?? true)))
+  let series_options = $derived(visible_series.map((srs) => srs.label || `Series`))
 </script>
 
 <PlotControls

package/dist/plot/HistogramControls.svelte.d.ts

@@ -17,6 +17,6 @@ type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> &
     has_y2_points?: boolean;
     children?: Snippet<[Required<PlotConfig>]>;
 };
-declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bar" | "show_controls" | "controls_open" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "bins" | "show_legend" | "selected_property">;
+declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bins" | "show_legend" | "selected_property" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "bar" | "x2_axis" | "y2_axis">;
 type HistogramControls = ReturnType<typeof HistogramControls>;
 export default HistogramControls;

package/dist/plot/InteractiveAxisLabel.svelte

@@ -1,13 +1,36 @@
-<script lang="ts">import Spinner from '../feedback/Spinner.svelte';
-import PortalSelect from './PortalSelect.svelte';
-let { label = ``, options = undefined, selected_key = $bindable(), loading = $bindable(false), axis_type = `x`, color = $bindable(), on_select, ...rest } = $props();
-let is_interactive = $derived(Boolean(options?.length));
-const stop = (evt) => evt.stopPropagation();
-// Only stop propagation for keys the dropdown handles, allow Tab/Escape for navigation
-const stop_key = (evt) => {
-    if (![`Tab`, `Escape`].includes(evt.key))
-        evt.stopPropagation();
-};
+<script lang="ts">
+  import Spinner from '../feedback/Spinner.svelte'
+  import { sanitize_html } from '../sanitize'
+  import PortalSelect from './PortalSelect.svelte'
+  import type { AxisOption } from './types'
+
+  let {
+    label = ``,
+    options = undefined,
+    selected_key = $bindable(),
+    loading = $bindable(false),
+    axis_type = `x`,
+    color = $bindable(),
+    on_select,
+    ...rest
+  }: {
+    label?: string
+    options?: AxisOption[]
+    selected_key?: string
+    loading?: boolean
+    axis_type?: `x` | `x2` | `y` | `y2`
+    color?: string | null
+    on_select?: (key: string) => void
+    [key: string]: unknown
+  } = $props()
+
+  let is_interactive = $derived(Boolean(options?.length))
+
+  const stop = (evt: Event) => evt.stopPropagation()
+  // Only stop propagation for keys the dropdown handles, allow Tab/Escape for navigation
+  const stop_key = (evt: KeyboardEvent) => {
+    if (![`Tab`, `Escape`].includes(evt.key)) evt.stopPropagation()
+  }
 </script>
 
 <div
@@ -36,7 +59,7 @@ const stop_key = (evt) => {
       />
     {/if}
   {:else}
-    <span class="static-label">{@html label}</span>
+    <span class="static-label">{@html sanitize_html(label)}</span>
   {/if}
 </div>
 

package/dist/plot/InteractiveAxisLabel.svelte.d.ts

@@ -9,6 +9,6 @@ type $$ComponentProps = {
     on_select?: (key: string) => void;
     [key: string]: unknown;
 };
-declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "selected_key" | "loading">;
+declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "loading" | "selected_key">;
 type InteractiveAxisLabel = ReturnType<typeof InteractiveAxisLabel>;
 export default InteractiveAxisLabel;

package/dist/plot/Line.svelte

@@ -1,36 +1,71 @@
-<script lang="ts">import { DEFAULTS } from '../settings';
-import { extent, min } from 'd3-array';
-import { interpolatePath } from 'd3-interpolate-path';
-import { curveMonotoneX, line } from 'd3-shape';
-import { untrack } from 'svelte';
-import { linear } from 'svelte/easing';
-import { Tween } from 'svelte/motion';
-let { points, origin = [0, 0], line_color = `rgba(255, 255, 255, 0.5)`, line_width = 2, area_color = `rgba(255, 255, 255, 0.1)`, area_stroke = null, line_tween = {}, line_dash = DEFAULTS.scatter.line.dash, ...rest } = $props();
-const lineGenerator = line()
+<script lang="ts">
+  import type { TweenedOptions } from './'
+  import { DEFAULTS } from '../settings'
+  import { extent, min } from 'd3-array'
+  import { interpolatePath } from 'd3-interpolate-path'
+  import { curveMonotoneX, line } from 'd3-shape'
+  import { untrack } from 'svelte'
+  import { linear } from 'svelte/easing'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { Tween } from 'svelte/motion'
+
+  let {
+    points,
+    origin = [0, 0],
+    line_color = `rgba(255, 255, 255, 0.5)`,
+    line_width = 2,
+    area_color = `rgba(255, 255, 255, 0.1)`,
+    area_stroke = null,
+    line_tween = {},
+    line_dash = DEFAULTS.scatter.line.dash,
+    ...rest
+  }: Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
+    points: readonly [number, number][]
+    origin: [number, number]
+    line_color?: string
+    line_width?: number
+    area_color?: string
+    area_stroke?: string | null
+    line_tween?: TweenedOptions<string>
+    line_dash?: string
+  } = $props()
+
+  const lineGenerator = line()
     .x((point) => point[0])
     .y((point) => point[1])
-    .curve(curveMonotoneX);
-let [x_min, x_max] = $derived(extent(points.map((p) => p[0])));
-let line_path = $derived(lineGenerator(points) ?? ``);
-let ymin = $derived(origin[1] ?? min(points.map((p) => p[1])));
-// Guard against NaN/Infinity in area_path coords (can happen during scale transitions)
-let area_path = $derived(line_path && isFinite(x_min ?? NaN) && isFinite(x_max ?? NaN) &&
-    isFinite(ymin ?? NaN)
-    ? `${line_path}L${x_max},${ymin}L${x_min},${ymin}Z`
-    : ``);
-const default_tween = {
+    .curve(curveMonotoneX)
+
+  let [x_min, x_max] = $derived(extent(points.map((point) => point[0])))
+  let line_path = $derived(lineGenerator(points) ?? ``)
+  let ymin = $derived(origin[1] ?? min(points.map((point) => point[1])))
+  // Guard against NaN/Infinity in area_path coords (can happen during scale transitions)
+  let area_path = $derived(
+    line_path && isFinite(x_min ?? NaN) && isFinite(x_max ?? NaN) &&
+      isFinite(ymin ?? NaN)
+      ? `${line_path}L${x_max},${ymin}L${x_min},${ymin}Z`
+      : ``,
+  )
+
+  const default_tween = {
     duration: 300,
     easing: linear,
     interpolate: interpolatePath,
-};
-// Tween objects are stateful - create once, update target via effect
-// untrack() explicitly captures initial tween config (intentional - config set once at mount)
-const tweened_line = new Tween(``, untrack(() => ({ ...default_tween, ...line_tween })));
-const tweened_area = new Tween(``, untrack(() => ({ ...default_tween, ...line_tween })));
-$effect.pre(() => {
-    tweened_line.target = line_path;
-    tweened_area.target = area_path;
-});
+  }
+  // Tween objects are stateful - create once, update target via effect
+  // untrack() explicitly captures initial tween config (intentional - config set once at mount)
+  const tweened_line = new Tween(
+    ``,
+    untrack(() => ({ ...default_tween, ...line_tween })),
+  )
+  const tweened_area = new Tween(
+    ``,
+    untrack(() => ({ ...default_tween, ...line_tween })),
+  )
+
+  $effect.pre(() => {
+    tweened_line.target = line_path
+    tweened_area.target = area_path
+  })
 </script>
 
 <path

package/dist/plot/PlotControls.svelte

@@ -1,98 +1,141 @@
-<script lang="ts">// NOTE: Axis config objects (x_axis, x2_axis, y_axis, y2_axis) must be reassigned (not mutated)
-// to trigger $bindable reactivity propagation to parent components.
-// Pattern: `x_axis = { ...x_axis, prop: value }` instead of `x_axis.prop = value`
-import SettingsSection from '../layout/SettingsSection.svelte';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import { DEFAULTS } from '../settings';
-import { format } from 'd3-format';
-import { timeFormat } from 'd3-time-format';
-import { tooltip } from 'svelte-multiselect/attachments';
-import { normalize_y2_sync } from './interactions';
-import { get_scale_type_name, is_scale_type_name, is_y2_sync_mode } from './types';
-let { show_controls = $bindable(false), controls_open = $bindable(false), children, post_children, x_axis = $bindable({}), x2_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), auto_x_range = [0, 1], auto_x2_range = undefined, auto_y_range = [0, 1], auto_y2_range = undefined, has_x2_points = false, has_y2_points = false, show_ticks = false, controls_title = `plot`, controls_class = ``, toggle_props = {}, pane_props = {}, } = $props();
-// Range input state
-let range_inputs = $state({ x: [null, null], x2: [null, null], y: [null, null], y2: [null, null] });
-let range_els = $state({});
-// Check if an axis range spans zero (handles inverted ranges like [3.5, 1.4])
-const range_spans_zero = (lo, hi) => Math.min(lo, hi) <= 0 && Math.max(lo, hi) >= 0;
-let x_includes_zero = $derived(range_spans_zero(x_axis.range?.[0] ?? auto_x_range[0], x_axis.range?.[1] ?? auto_x_range[1]));
-let x2_includes_zero = $derived(has_x2_points && auto_x2_range != null &&
-    range_spans_zero(x2_axis.range?.[0] ?? auto_x2_range[0], x2_axis.range?.[1] ?? auto_x2_range[1]));
-let y_includes_zero = $derived(range_spans_zero(y_axis.range?.[0] ?? auto_y_range[0], y_axis.range?.[1] ?? auto_y_range[1]));
-let y2_includes_zero = $derived(has_y2_points && auto_y2_range != null &&
-    range_spans_zero(y2_axis.range?.[0] ?? auto_y2_range[0], y2_axis.range?.[1] ?? auto_y2_range[1]));
-// Validation function for format specifiers
-function is_valid_format(format_string) {
-    if (!format_string)
-        return true;
+<script lang="ts">
+  // NOTE: Axis config objects (x_axis, x2_axis, y_axis, y2_axis) must be reassigned (not mutated)
+  // to trigger $bindable reactivity propagation to parent components.
+  // Pattern: `x_axis = { ...x_axis, prop: value }` instead of `x_axis.prop = value`
+  import SettingsSection from '../layout/SettingsSection.svelte'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { DEFAULTS } from '../settings'
+  import { format } from 'd3-format'
+  import { timeFormat } from 'd3-time-format'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { Vec2 } from '../math'
+  import type { AxisKey, PlotControlsProps } from './index'
+  import { normalize_y2_sync } from './interactions'
+  import { get_scale_type_name, is_scale_type_name, is_y2_sync_mode } from './types'
+
+  let {
+    show_controls = $bindable(false),
+    controls_open = $bindable(false),
+    children,
+    post_children,
+    x_axis = $bindable({}),
+    x2_axis = $bindable({}),
+    y_axis = $bindable({}),
+    y2_axis = $bindable({}),
+    display = $bindable({}),
+    auto_x_range = [0, 1],
+    auto_x2_range = undefined,
+    auto_y_range = [0, 1],
+    auto_y2_range = undefined,
+    has_x2_points = false,
+    has_y2_points = false,
+    show_ticks = false,
+    controls_title = `plot`,
+    controls_class = ``,
+    toggle_props = {},
+    pane_props = {},
+  }: PlotControlsProps = $props()
+
+  // Range input state
+  let range_inputs: Record<AxisKey, [number | null, number | null]> = $state(
+    { x: [null, null], x2: [null, null], y: [null, null], y2: [null, null] },
+  )
+  let range_els = $state<Record<string, HTMLInputElement>>({})
+
+  // Check if an axis range spans zero (handles inverted ranges like [3.5, 1.4])
+  const range_spans_zero = (lo: number, hi: number): boolean =>
+    Math.min(lo, hi) <= 0 && Math.max(lo, hi) >= 0
+
+  let x_includes_zero = $derived(
+    range_spans_zero(
+      x_axis.range?.[0] ?? auto_x_range[0],
+      x_axis.range?.[1] ?? auto_x_range[1],
+    ),
+  )
+  let x2_includes_zero = $derived(
+    has_x2_points && auto_x2_range != null &&
+      range_spans_zero(
+        x2_axis.range?.[0] ?? auto_x2_range[0],
+        x2_axis.range?.[1] ?? auto_x2_range[1],
+      ),
+  )
+  let y_includes_zero = $derived(
+    range_spans_zero(
+      y_axis.range?.[0] ?? auto_y_range[0],
+      y_axis.range?.[1] ?? auto_y_range[1],
+    ),
+  )
+  let y2_includes_zero = $derived(
+    has_y2_points && auto_y2_range != null &&
+      range_spans_zero(
+        y2_axis.range?.[0] ?? auto_y2_range[0],
+        y2_axis.range?.[1] ?? auto_y2_range[1],
+      ),
+  )
+
+  // Validation function for format specifiers
+  function is_valid_format(format_string: string): boolean {
+    if (!format_string) return true
     try {
-        if (format_string.startsWith(`%`)) {
-            timeFormat(format_string)(new Date());
-            return true;
-        }
-        else {
-            format(format_string)(123.456);
-            return true;
-        }
-    }
-    catch {
-        return false;
+      if (format_string.startsWith(`%`)) {
+        timeFormat(format_string)(new Date())
+        return true
+      } else {
+        format(format_string)(123.456)
+        return true
+      }
+    } catch {
+      return false
     }
-}
-// Handle format input changes
-const format_input_handler = (format_type) => (event) => {
-    const input = event.target;
-    if (!(input instanceof HTMLInputElement))
-        return;
+  }
+
+  // Handle format input changes
+  const format_input_handler = (format_type: AxisKey) => (event: Event) => {
+    const input = event.target
+    if (!(input instanceof HTMLInputElement)) return
     if (!is_valid_format(input.value)) {
-        input.classList.add(`invalid`);
-        return;
+      input.classList.add(`invalid`)
+      return
     }
-    input.classList.remove(`invalid`);
-    if (format_type === `x`)
-        x_axis = { ...x_axis, format: input.value };
-    else if (format_type === `x2`)
-        x2_axis = { ...x2_axis, format: input.value };
-    else if (format_type === `y`)
-        y_axis = { ...y_axis, format: input.value };
-    else
-        y2_axis = { ...y2_axis, format: input.value };
-};
-// Handle range input changes
-const update_range = (axis, bound, value) => {
-    const parsed = value === `` ? null : Number(value);
-    range_inputs[axis][bound] = Number.isFinite(parsed) ? parsed : null;
-    const [min, max] = range_inputs[axis];
-    const auto = { x: auto_x_range, x2: auto_x2_range, y: auto_y_range, y2: auto_y2_range }[axis];
-    const invalid = min !== null && max !== null && min >= max;
-    range_els[`${axis}-min`]?.classList.toggle(`invalid`, invalid);
-    range_els[`${axis}-max`]?.classList.toggle(`invalid`, invalid);
-    if (invalid)
-        return;
-    const axis_config = { x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis }[axis];
+    input.classList.remove(`invalid`)
+    if (format_type === `x`) x_axis = { ...x_axis, format: input.value }
+    else if (format_type === `x2`) x2_axis = { ...x2_axis, format: input.value }
+    else if (format_type === `y`) y_axis = { ...y_axis, format: input.value }
+    else y2_axis = { ...y2_axis, format: input.value }
+  }
+
+  // Handle range input changes
+  const update_range = (axis: AxisKey, bound: 0 | 1, value: string) => {
+    const parsed = value === `` ? null : Number(value)
+    range_inputs[axis][bound] = Number.isFinite(parsed) ? parsed : null
+    const [min, max] = range_inputs[axis]
+    const auto =
+      { x: auto_x_range, x2: auto_x2_range, y: auto_y_range, y2: auto_y2_range }[axis]
+    const invalid = min !== null && max !== null && min >= max
+    range_els[`${axis}-min`]?.classList.toggle(`invalid`, invalid)
+    range_els[`${axis}-max`]?.classList.toggle(`invalid`, invalid)
+    if (invalid) return
+    const axis_config = { x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis }[axis]
     const next_range = min === null && max === null
-        ? undefined
-        : [min ?? auto?.[0] ?? 0, max ?? auto?.[1] ?? 1];
+      ? undefined
+      : [min ?? auto?.[0] ?? 0, max ?? auto?.[1] ?? 1] as Vec2
     // If auto range is undefined, only set if both min and max are provided
-    if (!auto && (min === null || max === null))
-        return;
-    if (axis === `x`)
-        x_axis = { ...axis_config, range: next_range };
-    else if (axis === `x2`)
-        x2_axis = { ...axis_config, range: next_range };
-    else if (axis === `y`)
-        y_axis = { ...axis_config, range: next_range };
-    else
-        y2_axis = { ...axis_config, range: next_range };
-};
-// Sync range inputs from props
-$effect(() => {
-    range_inputs.x = [x_axis.range?.[0] ?? null, x_axis.range?.[1] ?? null];
-    range_inputs.x2 = [x2_axis.range?.[0] ?? null, x2_axis.range?.[1] ?? null];
-    range_inputs.y = [y_axis.range?.[0] ?? null, y_axis.range?.[1] ?? null];
-    range_inputs.y2 = [y2_axis.range?.[0] ?? null, y2_axis.range?.[1] ?? null];
-});
-let ctrl_state = $derived({
+    if (!auto && (min === null || max === null)) return
+    if (axis === `x`) x_axis = { ...axis_config, range: next_range }
+    else if (axis === `x2`) x2_axis = { ...axis_config, range: next_range }
+    else if (axis === `y`) y_axis = { ...axis_config, range: next_range }
+    else y2_axis = { ...axis_config, range: next_range }
+  }
+
+  // Sync range inputs from props
+  $effect(() => {
+    range_inputs.x = [x_axis.range?.[0] ?? null, x_axis.range?.[1] ?? null]
+    range_inputs.x2 = [x2_axis.range?.[0] ?? null, x2_axis.range?.[1] ?? null]
+    range_inputs.y = [y_axis.range?.[0] ?? null, y_axis.range?.[1] ?? null]
+    range_inputs.y2 = [y2_axis.range?.[0] ?? null, y2_axis.range?.[1] ?? null]
+  })
+
+  let ctrl_state = $derived({
     show_controls,
     controls_open,
     x_axis,
@@ -101,7 +144,7 @@ let ctrl_state = $derived({
     y2_axis,
     display,
     range_inputs,
-});
+  })
 </script>
 
 {#if show_controls}
@@ -215,16 +258,16 @@ let ctrl_state = $derived({
             bind:this={range_els[`${axis}-min`]}
             placeholder="auto"
             class="range-input"
-            oninput={(e) => update_range(axis, 0, e.currentTarget.value)}
-            onkeydown={(e) => e.key === `Enter` && e.currentTarget?.blur()}
+            oninput={(evt) => update_range(axis, 0, evt.currentTarget.value)}
+            onkeydown={(evt) => evt.key === `Enter` && evt.currentTarget?.blur()}
           /> to <input
             type="number"
             value={range_inputs[axis][1] ?? ``}
             bind:this={range_els[`${axis}-max`]}
             placeholder="auto"
             class="range-input"
-            oninput={(e) => update_range(axis, 1, e.currentTarget.value)}
-            onkeydown={(e) => e.key === `Enter` && e.currentTarget?.blur()}
+            oninput={(evt) => update_range(axis, 1, evt.currentTarget.value)}
+            onkeydown={(evt) => evt.key === `Enter` && evt.currentTarget?.blur()}
           />
         </label>
       {/each}
@@ -249,12 +292,12 @@ let ctrl_state = $derived({
             max={max_ticks}
             step="1"
             value={typeof x_axis.ticks === `number` ? x_axis.ticks : 8}
-            oninput={(e) => {
-              const v = parseInt(e.currentTarget.value, 10)
-              if (isNaN(v)) return
+            oninput={(evt) => {
+              const parsed = parseInt(evt.currentTarget.value, 10)
+              if (isNaN(parsed)) return
               x_axis = {
                 ...x_axis,
-                ticks: Math.max(min_ticks, Math.min(max_ticks, v)),
+                ticks: Math.max(min_ticks, Math.min(max_ticks, parsed)),
               }
             }}
           />
@@ -266,12 +309,12 @@ let ctrl_state = $derived({
             max={max_ticks}
             step="1"
             value={typeof y_axis.ticks === `number` ? y_axis.ticks : 6}
-            oninput={(e) => {
-              const v = parseInt(e.currentTarget.value, 10)
-              if (isNaN(v)) return
+            oninput={(evt) => {
+              const parsed = parseInt(evt.currentTarget.value, 10)
+              if (isNaN(parsed)) return
               y_axis = {
                 ...y_axis,
-                ticks: Math.max(min_ticks, Math.min(max_ticks, v)),
+                ticks: Math.max(min_ticks, Math.min(max_ticks, parsed)),
               }
             }}
           />
@@ -299,8 +342,8 @@ let ctrl_state = $derived({
       <label>X:
         <select
           value={get_scale_type_name(x_axis.scale_type)}
-          onchange={(e) => {
-            const val = e.currentTarget.value
+          onchange={(evt) => {
+            const val = evt.currentTarget.value
             x_axis = {
               ...x_axis,
               scale_type: is_scale_type_name(val) ? val : `linear`,
@@ -316,8 +359,8 @@ let ctrl_state = $derived({
         <label>X2:
           <select
             value={get_scale_type_name(x2_axis.scale_type)}
-            onchange={(e) => {
-              const val = e.currentTarget.value
+            onchange={(evt) => {
+              const val = evt.currentTarget.value
               x2_axis = {
                 ...x2_axis,
                 scale_type: is_scale_type_name(val) ? val : `linear`,
@@ -333,8 +376,8 @@ let ctrl_state = $derived({
       <label>Y:
         <select
           value={get_scale_type_name(y_axis.scale_type)}
-          onchange={(e) => {
-            const val = e.currentTarget.value
+          onchange={(evt) => {
+            const val = evt.currentTarget.value
             y_axis = {
               ...y_axis,
               scale_type: is_scale_type_name(val) ? val : `linear`,
@@ -350,8 +393,8 @@ let ctrl_state = $derived({
         <label>Y2:
           <select
             value={get_scale_type_name(y2_axis.scale_type)}
-            onchange={(e) => {
-              const val = e.currentTarget.value
+            onchange={(evt) => {
+              const val = evt.currentTarget.value
               y2_axis = {
                 ...y2_axis,
                 scale_type: is_scale_type_name(val) ? val : `linear`,
@@ -385,8 +428,8 @@ let ctrl_state = $derived({
           <select
             value={current_sync.mode}
             aria-label="Y2 axis synchronization mode"
-            onchange={(e) => {
-              const val = e.currentTarget.value
+            onchange={(evt) => {
+              const val = evt.currentTarget.value
               const mode = is_y2_sync_mode(val) ? val : `none`
               if (mode === `none`) {
                 y2_axis = { ...y2_axis, sync: undefined }
@@ -412,8 +455,8 @@ let ctrl_state = $derived({
               value={current_sync.align_value ?? 0}
               aria-label="Value to align on both axes"
               style="width: 5em"
-              onchange={(e) => {
-                const val = parseFloat(e.currentTarget.value)
+              onchange={(evt) => {
+                const val = parseFloat(evt.currentTarget.value)
                 y2_axis = {
                   ...y2_axis,
                   sync: {

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

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