matterviz 0.3.7 → 0.4.1

package/dist/plot/box/kde.js

@@ -0,0 +1,160 @@
+// 1-D Gaussian kernel density estimation for violin plots.
+// Pure and unit-tested; mirrors the style of box-plot.ts. Never mutates inputs.
+import { quantile_sorted, quantile_unordered } from './quantile';
+const KDE_EXACT_SAMPLE_LIMIT = 1024;
+const KDE_TAIL_SIGMA = 6;
+function sample_deviation(sorted) {
+    const n_vals = sorted.length;
+    if (n_vals < 2)
+        return 0;
+    let sum = 0;
+    for (const val of sorted)
+        sum += val;
+    const mean = sum / n_vals;
+    let variance_sum = 0;
+    for (const val of sorted) {
+        const delta = val - mean;
+        variance_sum += delta * delta;
+    }
+    return Math.sqrt(variance_sum / (n_vals - 1));
+}
+// Silverman's rule of thumb: 0.9 * min(std, IQR/1.34) * n^(-1/5). Matches scipy/seaborn.
+// (`sigma` floors to std then 1 to avoid a zero bandwidth.)
+const silverman_from_stats = (n_vals, std, iqr) => {
+    const spread = iqr > 0 ? Math.min(std, iqr / 1.34) : std;
+    const sigma = spread > 0 ? spread : std > 0 ? std : 1;
+    return 0.9 * sigma * n_vals ** (-1 / 5);
+};
+export function silverman_bandwidth(sorted) {
+    if (sorted.length < 2)
+        return 1;
+    const iqr = quantile_sorted(sorted, 0.75) - quantile_sorted(sorted, 0.25);
+    return silverman_from_stats(sorted.length, sample_deviation(sorted), iqr);
+}
+function silverman_bandwidth_unordered(samples) {
+    if (samples.length < 2)
+        return 1;
+    const q1 = quantile_unordered(samples, 0.25);
+    const q3 = quantile_unordered(samples, 0.75);
+    return silverman_from_stats(samples.length, sample_deviation(samples), q3 - q1);
+}
+// Scott's rule: std * n^(-1/5) for 1-D data.
+// `samples` need not be sorted (only uses sample_deviation, unlike silverman_bandwidth)
+export function scott_bandwidth(samples) {
+    const n_vals = samples.length;
+    if (n_vals < 2)
+        return 1;
+    const std = sample_deviation(samples) || 1;
+    return std * n_vals ** (-1 / 5);
+}
+function exact_density(eval_samples, grid, band) {
+    const n_eval = eval_samples.length;
+    const norm = 1 / (n_eval * band * Math.sqrt(2 * Math.PI));
+    const density = Array.from({ length: grid.length }, () => 0);
+    for (let grid_idx = 0; grid_idx < grid.length; grid_idx++) {
+        const g_val = grid[grid_idx];
+        let sum = 0;
+        for (const sample of eval_samples) {
+            const z_score = (g_val - sample) / band;
+            sum += Math.exp(-0.5 * z_score * z_score);
+        }
+        density[grid_idx] = sum * norm;
+    }
+    return density;
+}
+function binned_density(eval_samples, grid, band) {
+    const n_eval = eval_samples.length;
+    let sample_min = Infinity;
+    let sample_max = -Infinity;
+    for (const sample of eval_samples) {
+        if (sample < sample_min)
+            sample_min = sample;
+        if (sample > sample_max)
+            sample_max = sample;
+    }
+    if (sample_max <= sample_min)
+        return exact_density(eval_samples, grid, band);
+    const bin_count = Math.min(1024, Math.max(128, grid.length * 4));
+    const counts = new Float64Array(bin_count);
+    const span = sample_max - sample_min;
+    const inv_bin_width = bin_count / span;
+    for (const sample of eval_samples) {
+        const idx = Math.min(bin_count - 1, Math.floor((sample - sample_min) * inv_bin_width));
+        counts[idx] += 1;
+    }
+    const centers = new Float64Array(bin_count);
+    const bin_width = span / bin_count;
+    for (let idx = 0; idx < bin_count; idx++)
+        centers[idx] = sample_min + (idx + 0.5) * bin_width;
+    const density = Array.from({ length: grid.length }, () => 0);
+    const norm = 1 / (n_eval * band * Math.sqrt(2 * Math.PI));
+    const radius = KDE_TAIL_SIGMA * band;
+    for (let grid_idx = 0; grid_idx < grid.length; grid_idx++) {
+        const g_val = grid[grid_idx];
+        const start = Math.max(0, Math.floor((g_val - radius - sample_min) * inv_bin_width));
+        const stop = Math.min(bin_count - 1, Math.floor((g_val + radius - sample_min) * inv_bin_width));
+        let sum = 0;
+        for (let bin_idx = start; bin_idx <= stop; bin_idx++) {
+            const count = counts[bin_idx];
+            if (count === 0)
+                continue;
+            const z_score = (g_val - centers[bin_idx]) / band;
+            sum += count * Math.exp(-0.5 * z_score * z_score);
+        }
+        density[grid_idx] = sum * norm;
+    }
+    return density;
+}
+// Estimate a smooth density from raw samples via a Gaussian kernel.
+export function gaussian_kde(samples, opts = {}) {
+    const { bandwidth = `silverman`, n_points = 100, cut = 2, clip, range, max_samples } = opts;
+    const finite = samples.filter((val) => Number.isFinite(val));
+    const n_vals = finite.length;
+    if (n_vals === 0)
+        return { grid: [], density: [], bandwidth: 0 };
+    let data_min = Infinity;
+    let data_max = -Infinity;
+    for (const sample of finite) {
+        if (sample < data_min)
+            data_min = sample;
+        if (sample > data_max)
+            data_max = sample;
+    }
+    // Deterministic stride subsample for the density sum on large inputs.
+    // Do this before unordered quantile selection mutates `finite`.
+    let eval_samples = finite;
+    if (max_samples && n_vals > max_samples) {
+        const step = n_vals / max_samples;
+        const sampled = Array.from({ length: max_samples }, () => 0);
+        for (let idx = 0; idx < max_samples; idx++)
+            sampled[idx] = finite[Math.floor(idx * step)];
+        eval_samples = sampled;
+    }
+    let band = typeof bandwidth === `number`
+        ? bandwidth
+        : bandwidth === `scott`
+            ? scott_bandwidth(finite)
+            : silverman_bandwidth_unordered(finite);
+    band = Math.max(band, 1e-12); // guard against zero/negative bandwidth
+    const n_eval = eval_samples.length;
+    let lo = range ? range[0] : data_min - cut * band;
+    let hi = range ? range[1] : data_max + cut * band;
+    if (clip) {
+        if (clip[0] != null)
+            lo = Math.max(lo, clip[0]);
+        if (clip[1] != null)
+            hi = Math.min(hi, clip[1]);
+    }
+    // An inverted/collapsed range (e.g. clip [10, 5], or a clip bound outside the data) leaves
+    // no valid grid -> degrade to an empty density rather than a corrupted descending grid.
+    if (hi <= lo)
+        return { grid: [], density: [], bandwidth: band };
+    const points = Math.max(2, Math.floor(n_points));
+    const grid = Array.from({ length: points }, () => 0);
+    for (let idx = 0; idx < points; idx++)
+        grid[idx] = lo + ((hi - lo) * idx) / (points - 1);
+    const density = max_samples && n_eval > KDE_EXACT_SAMPLE_LIMIT
+        ? binned_density(eval_samples, grid, band)
+        : exact_density(eval_samples, grid, band);
+    return { grid, density, bandwidth: band };
+}

package/dist/plot/box/quantile.d.ts

@@ -0,0 +1,3 @@
+export declare function quickselect(values: number[], kth: number): number;
+export declare function quantile_sorted(values: readonly number[], p: number): number;
+export declare function quantile_unordered(values: number[], p: number): number;

package/dist/plot/box/quantile.js

@@ -0,0 +1,53 @@
+// Shared quantile + selection helpers used by box-plot.ts and kde.ts.
+// quickselect partially sorts in place; quantile_unordered mutates its input
+// (quantile_sorted assumes an already-ascending array and never mutates).
+//
+// Unguarded contract: quickselect, quantile_sorted and quantile_unordered all assume
+// values.length > 0 and 0 <= p <= 1. Out-of-range inputs index past the array and
+// yield undefined/NaN — callers (box-plot.ts, kde.ts) must length- and p-range-check
+// before calling.
+export function quickselect(values, kth) {
+    let left = 0;
+    let right = values.length - 1;
+    while (left < right) {
+        const pivot = values[(left + right) >>> 1];
+        let scan_lo = left;
+        let scan_hi = right;
+        while (scan_lo <= scan_hi) {
+            while (values[scan_lo] < pivot)
+                scan_lo++;
+            while (values[scan_hi] > pivot)
+                scan_hi--;
+            if (scan_lo <= scan_hi) {
+                const tmp = values[scan_lo];
+                values[scan_lo] = values[scan_hi];
+                values[scan_hi] = tmp;
+                scan_lo++;
+                scan_hi--;
+            }
+        }
+        if (kth <= scan_hi)
+            right = scan_hi;
+        else if (kth >= scan_lo)
+            left = scan_lo;
+        else
+            return values[kth];
+    }
+    return values[kth];
+}
+export function quantile_sorted(values, p) {
+    const idx = (values.length - 1) * p;
+    const lo = Math.floor(idx);
+    const hi = Math.ceil(idx);
+    const frac = idx - lo;
+    const lo_val = values[lo];
+    return hi === lo ? lo_val : lo_val + (values[hi] - lo_val) * frac;
+}
+export function quantile_unordered(values, p) {
+    const idx = (values.length - 1) * p;
+    const lo = Math.floor(idx);
+    const hi = Math.ceil(idx);
+    const frac = idx - lo;
+    const lo_val = quickselect(values, lo);
+    return hi === lo ? lo_val : lo_val + (quickselect(values, hi) - lo_val) * frac;
+}

package/dist/plot/{auto-place.d.ts → core/auto-place.d.ts}

@@ -1,5 +1,4 @@
 import type { Sides } from './layout';
-export declare const DECOR_GAP = 8;
 type Pt = {
     x: number;
     y: number;
@@ -8,6 +7,7 @@ type Size = {
     width: number;
     height: number;
 };
+export declare const placed_coords: (auto_outside: boolean, outside: Pt, placement: Pt | null, tweened: Pt, fallback: Pt) => Pt;
 export declare const has_explicit_position: (style?: string | null) => boolean;
 export declare const measured_footprint: (el: HTMLElement | null | undefined, fallback: Size) => Size;
 export declare function build_obstacles_norm(series: {

package/dist/plot/{auto-place.js → core/auto-place.js}

@@ -1,7 +1,10 @@
-import { compute_element_placement, sample_series_obstacle_points } from './layout';
+import { compute_element_placement, sample_series_obstacle_points, } from './layout';
 // Shared "move a decoration (legend/colorbar) outside the plot when interior overlap is
 // unavoidable" logic, reused by every 2D plot (ScatterPlot/BarPlot/Histogram/BinnedScatterPlot).
-export const DECOR_GAP = 8; // px gap between an outside decoration and the plot edge
+const DECOR_GAP = 8; // px gap between an outside decoration and the plot edge
+// Final on-screen position for an auto-placed decoration: explicit outside placement
+// wins, then the tweened auto placement, else a static padding fallback
+export const placed_coords = (auto_outside, outside, placement, tweened, fallback) => (auto_outside ? outside : placement ? tweened : fallback);
 // True when the user pinned a decoration via its style (an edge property or position:absolute),
 // in which case auto-placement must leave it alone.
 export const has_explicit_position = (style) => /(^|[;{]\s*)(top|bottom|left|right)\s*:|position\s*:\s*absolute/.test(style ?? ``);
@@ -55,7 +58,7 @@ export function clip_bar(vertical, cross, a, b) {
 const CROWDING_RATIO = 0.5;
 // True when even the best interior spot for `footprint` (px) is too dense to host the decoration
 function is_crowded(obstacles, footprint, base_w, base_h, clearance) {
-    if (!obstacles.length || base_w <= 0 || base_h <= 0)
+    if (obstacles.length === 0 || base_w <= 0 || base_h <= 0)
         return false;
     const fw = footprint.width / base_w;
     const fh = footprint.height / base_h;

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

@@ -0,0 +1,46 @@
+import type { AxisConfig, AxisLoadError, BarSeries, DataLoaderFn, DataSeries } from './types';
+export declare const AXIS_DEFAULTS: {
+    format: string;
+    scale_type: "linear";
+    ticks: number;
+    label_shift: {
+        x: number;
+        y: number;
+    };
+    tick: {
+        label: {
+            shift: {
+                x: number;
+                y: number;
+            };
+            inside: boolean;
+        };
+    };
+    range: [number | null, number | null];
+};
+type AxisType = `x` | `x2` | `y` | `y2`;
+export declare function merge_series_state<T extends DataSeries | BarSeries>(old_series: T[], new_series: T[]): T[];
+export interface AxisChangeState<T extends DataSeries | BarSeries> {
+    get_axis: (axis: AxisType) => AxisConfig;
+    set_axis: (axis: AxisType, config: AxisConfig) => void;
+    get_series: () => T[];
+    set_series: (series: T[]) => void;
+    get_loading: () => AxisType | null;
+    set_loading: (axis: AxisType | null) => void;
+}
+export declare const create_axis_change_handler: <T extends DataSeries | BarSeries>(state: AxisChangeState<T>, data_loader: DataLoaderFn<Record<string, unknown>, T> | undefined, on_axis_change?: (axis: AxisType, key: string, new_series: T[]) => void, on_error?: (error: AxisLoadError) => void) => ((axis: AxisType, key: string) => Promise<void>);
+export declare function create_axis_loader<T extends DataSeries | BarSeries>(state: AxisChangeState<T>, get_props: () => {
+    data_loader?: DataLoaderFn<Record<string, unknown>, T>;
+    on_axis_change?: (axis: AxisType, key: string, new_series: T[]) => void;
+    on_error?: (error: AxisLoadError) => void;
+}): {
+    handle_axis_change: (axis: AxisType, key: string) => Promise<void>;
+    try_auto_load: () => void;
+};
+export declare const AXIS_LABEL_CONTAINER: {
+    readonly width: 200;
+    readonly height: 24;
+    readonly x_offset: 100;
+    readonly y_offset: 12;
+};
+export {};

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

@@ -0,0 +1,110 @@
+// Shared utilities for interactive axis functionality
+import { to_error } from '../../utils';
+// Shared axis defaults across plot components (single source of truth)
+export const AXIS_DEFAULTS = {
+    format: ``,
+    scale_type: `linear`,
+    ticks: 5,
+    label_shift: { x: 0, y: 0 },
+    tick: { label: { shift: { x: 0, y: 0 }, inside: false } },
+    range: [null, null],
+};
+// Merge new series with preserved UI state from old series.
+// Matches by stable id first, then by index only for ordered id-less series.
+export function merge_series_state(old_series, new_series) {
+    // Build id lookup map for O(1) matching (string or number ids)
+    const by_id = new Map();
+    for (const srs of old_series) {
+        if (srs.id !== undefined && srs.id !== ``)
+            by_id.set(srs.id, srs);
+    }
+    return new_series.map((new_srs, idx) => {
+        const old_srs = new_srs.id !== undefined && new_srs.id !== `` ? by_id.get(new_srs.id) : old_series[idx];
+        if (!old_srs) {
+            return new_srs;
+        }
+        // Preserve UI state: visibility and styling from old series if not in new
+        const result = { ...new_srs };
+        result.visible ??= old_srs.visible;
+        // Preserve style properties only when key exists in BOTH series (guards against
+        // cross-type injection when T is a union like DataSeries | BarSeries)
+        for (const key of [`point_style`, `line_style`, `color`]) {
+            if (key in old_srs && key in new_srs && result[key] === undefined) {
+                result[key] = old_srs[key];
+            }
+        }
+        return result;
+    });
+}
+// Handle axis property change - loads new data via data_loader
+// Returns a function bound to the component's state accessors
+export const create_axis_change_handler = (state, data_loader, on_axis_change, on_error) => async (axis, key) => {
+    if (!data_loader || state.get_loading())
+        return;
+    const axis_config = state.get_axis(axis);
+    const prev_key = axis_config.selected_key;
+    // Skip if key unchanged AND series already loaded (allows initial load when series empty)
+    if (prev_key === key && state.get_series().length > 0)
+        return;
+    // Update selected_key immediately for UI feedback
+    state.set_axis(axis, { ...axis_config, selected_key: key });
+    state.set_loading(axis);
+    try {
+        const result = await data_loader(axis, key, state.get_series());
+        // Merge new series with preserved state from old series
+        const merged = merge_series_state(state.get_series(), result.series);
+        state.set_series(merged);
+        // Update axis label/unit if provided
+        if (result.axis_label || result.axis_unit) {
+            const current = state.get_axis(axis);
+            state.set_axis(axis, {
+                ...current,
+                label: result.axis_label ?? current.label,
+                unit: result.axis_unit ?? current.unit,
+            });
+        }
+        on_axis_change?.(axis, key, merged);
+    }
+    catch (err) {
+        console.error(`Failed to load data for ${axis}=${key}:`, err);
+        // Revert selection
+        state.set_axis(axis, { ...state.get_axis(axis), selected_key: prev_key });
+        const message = to_error(err).message;
+        on_error?.({ axis, key, message });
+    }
+    finally {
+        state.set_loading(null);
+    }
+};
+// Bundle axis change handler with one-shot auto-load of the first axis option.
+// get_props keeps callback props fresh; try_auto_load reads series/axis configs
+// through state getters so a component `$effect(try_auto_load)` tracks them reactively.
+export function create_axis_loader(state, get_props) {
+    let auto_load_attempted = false; // prevent infinite retries on failure
+    const handle_axis_change = (axis, key) => {
+        const { data_loader, on_axis_change, on_error } = get_props();
+        return create_axis_change_handler(state, data_loader, on_axis_change, on_error)(axis, key);
+    };
+    // Auto-load data if series is empty but options exist (runs once, x-axis first then y)
+    const try_auto_load = () => {
+        if (state.get_series().length > 0 || !get_props().data_loader || auto_load_attempted)
+            return;
+        for (const axis of [`x`, `y`]) {
+            const config = state.get_axis(axis);
+            if (config.options?.length) {
+                auto_load_attempted = true;
+                handle_axis_change(axis, config.selected_key ?? config.options[0].key).catch(() => { });
+                return;
+            }
+        }
+    };
+    return { handle_axis_change, try_auto_load };
+}
+// Constants for axis label foreignObject positioning (all values in px)
+// Use minimal dimensions - overflow: visible handles any dropdown expansion
+export const AXIS_LABEL_CONTAINER = {
+    width: 200, // container width for centering; dropdown can overflow
+    height: 24, // single line height; dropdown options overflow downward
+    x_offset: 100, // half of width for horizontal centering
+    y_offset: 12, // half of height for vertical centering
+};

package/dist/plot/{AxisLabel.svelte → core/components/AxisLabel.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { AXIS_LABEL_CONTAINER } from './axis-utils'
-  import type { AxisOption } from './types'
+  import { AXIS_LABEL_CONTAINER } from '../axis-utils'
+  import type { AxisOption } from '../types'
   import InteractiveAxisLabel from './InteractiveAxisLabel.svelte'
 
   let {

package/dist/plot/{AxisLabel.svelte.d.ts → core/components/AxisLabel.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { AxisOption } from './types';
+import type { AxisOption } from '../types';
 type $$ComponentProps = {
     x: number;
     y: number;

package/dist/plot/{ColorBar.svelte → core/components/ColorBar.svelte}

@@ -1,26 +1,26 @@
 <script lang="ts">
-  import { luminance } from '../colors'
-  import Spinner from '../feedback/Spinner.svelte'
-  import { format_num } from '../labels'
-  import { sanitize_html } from '../sanitize'
-  import type { Vec2 } from '../math'
-  import * as math from '../math'
+  import { luminance } from '../../../colors'
+  import Spinner from '../../../feedback/Spinner.svelte'
+  import { format_num } from '../../../labels'
+  import { sanitize_html } from '../../../sanitize'
+  import type { Vec2 } from '../../../math'
+  import * as math from '../../../math'
   import { format } from 'd3-format'
   import * as d3 from 'd3-scale'
   import * as d3_sc from 'd3-scale-chromatic'
   import { timeFormat } from 'd3-time-format'
   import type { HTMLAttributes } from 'svelte/elements'
-  import type { D3InterpolateName } from '../colors'
+  import type { D3InterpolateName } from '../../../colors'
   import PortalSelect from './PortalSelect.svelte'
-  import { generate_arcsinh_ticks, scale_arcsinh } from './scales'
+  import { generate_arcsinh_ticks, scale_arcsinh } from '../scales'
   import type {
     AxisOption,
     ColorBarDataLoaderFn,
     ColorScaleOption,
     Orientation,
     ScaleType,
-  } from './types'
-  import { get_arcsinh_threshold, get_scale_type_name } from './types'
+  } from '../types'
+  import { get_arcsinh_threshold, get_scale_type_name } from '../types'
 
   let {
     title = $bindable(),
@@ -59,7 +59,7 @@
     wrapper_style?: string
     tick_labels?: (string | number)[] | number
     tick_format?: string
-    range?: [number, number]
+    range?: Vec2
     // tick_side determines tick placement relative to orientation:
     // 'primary'   = bottom (horizontal) / right (vertical), outside bar
     // 'secondary' = top (horizontal) / left (vertical), outside bar
@@ -72,18 +72,18 @@
     steps?: number
     // computed "nice" range resulting from snapping ticks
     // https://github.com/d3/d3-scale/issues/86
-    nice_range?: [number, number]
+    nice_range?: Vec2
     // type of scale to use for ticks and potentially color (if color_scale_fn not provided)
     scale_type?: ScaleType
     // Optional pre-configured d3 color scale function
     color_scale_fn?: (value: number) => string
     // Optional domain for pre-configured color scale function
-    color_scale_domain?: [number, number]
+    color_scale_domain?: Vec2
     // Property selection options (makes title interactive)
     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 selection options
     color_scale_options?: ColorScaleOption[]
     selected_color_scale_key?: string
@@ -103,11 +103,11 @@
     // If ticks are secondary (top), default label to bottom
     if (orientation === `horizontal`) {
       return tick_side === `primary` ? `top` : `bottom`
-    } else { // orientation === `vertical`
+    } // orientation === `vertical`
       // If ticks are primary (right), default label to left
       // If ticks are secondary (left), default label to right
       return tick_side === `primary` ? `left` : `right`
-    }
+
   })
 
   // Number of ticks to generate
@@ -200,7 +200,7 @@
 
         const power_of_10_ticks: number[] = []
         for (let exp = start_exp; exp <= end_exp; exp++) {
-          power_of_10_ticks.push(Math.pow(10, exp))
+          power_of_10_ticks.push(10 ** exp)
         }
 
         // Ensure domain endpoints are included if they are powers of 10 and missed by loop
@@ -225,27 +225,24 @@
         }
 
         return power_of_10_ticks
-      } else {
-        // Generate exactly n_ticks manually for log scale if not snapping
-        const log_min = Math.log10(scale_min)
-        const log_max = Math.log10(scale_max)
-        return [...Array(n_ticks).keys()].map((idx) => {
-          const fraction = idx / (n_ticks - 1)
-          const log_val = log_min + fraction * (log_max - log_min)
-          return Math.pow(10, log_val)
-        })
-      }
-    } else {
-      // Use D3's default nice ticks for linear scale
-      if (snap_ticks) return scale.ticks(n_ticks)
-      else {
-        // Generate exactly n_ticks evenly spaced linear ticks
-        return [...Array(n_ticks).keys()].map((idx) => {
-          const fraction = idx / (n_ticks - 1)
-          return scale_min + fraction * (scale_max - scale_min)
-        })
       }
+      // Generate exactly n_ticks manually for log scale if not snapping
+      const log_min = Math.log10(scale_min)
+      const log_max = Math.log10(scale_max)
+      return [...Array(n_ticks).keys()].map((idx) => {
+        const fraction = idx / (n_ticks - 1)
+        const log_val = log_min + fraction * (log_max - log_min)
+        return 10 ** log_val
+      })
     }
+    // Use D3's default nice ticks for linear scale
+    if (snap_ticks) return scale.ticks(n_ticks)
+    // Generate exactly n_ticks evenly spaced linear ticks
+    return [...Array(n_ticks).keys()].map((idx) => {
+      const fraction = idx / (n_ticks - 1)
+      return scale_min + fraction * (scale_max - scale_min)
+    })
+
   })
 
   // Update nice_range binding when snapping ticks
@@ -304,7 +301,7 @@
     // Use potentially adjusted min/max for domain (ascending)
     const lo = Math.min(min_val, max_val)
     const hi = Math.max(min_val, max_val)
-    const domain_for_scale: [number, number] = [lo, hi]
+    const domain_for_scale: Vec2 = [lo, hi]
 
     // For arcsinh, create a custom color scale
     if (type_name === `arcsinh`) {
@@ -380,7 +377,7 @@
       if (use_log_interp) {
         data_value = log_span === 0
           ? adjusted_min_ramp
-          : Math.pow(10, log_min + fraction * log_span)
+          : 10 ** (log_min + fraction * log_span)
       } else if (type_name === `arcsinh`) {
         data_value = asinh_span === 0
           ? min_ramp_domain
@@ -644,6 +641,12 @@
     display: var(--cbar-label-display);
     align-items: center;
     justify-content: center;
+    /* blur-only (no tint): invisible over uniform bg, smears busy bg to keep title readable */
+    background: var(--cbar-label-bg, transparent);
+    backdrop-filter: var(--cbar-label-backdrop-filter, blur(4px));
+    border-radius: var(--cbar-label-border-radius, var(--border-radius, 3pt));
+    /* keep title selectable/copyable */
+    user-select: text;
   }
   span.tick-label {
     position: absolute;

package/dist/plot/{ColorBar.svelte.d.ts → core/components/ColorBar.svelte.d.ts}

@@ -1,5 +1,6 @@
+import type { Vec2 } from '../../../math';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { AxisOption, ColorBarDataLoaderFn, ColorScaleOption, Orientation, ScaleType } from './types';
+import type { AxisOption, ColorBarDataLoaderFn, ColorScaleOption, Orientation, ScaleType } from '../types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     title?: string;
     color_scale?: ((x: number) => string) | string | null;
@@ -9,23 +10,23 @@ 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;
 };
-declare const ColorBar: import("svelte").Component<$$ComponentProps, {}, "title" | "color_scale" | "range" | "tick_labels" | "nice_range" | "selected_property_key" | "selected_color_scale_key">;
+declare const ColorBar: import("svelte").Component<$$ComponentProps, {}, "title" | "range" | "color_scale" | "tick_labels" | "nice_range" | "selected_property_key" | "selected_color_scale_key">;
 type ColorBar = ReturnType<typeof ColorBar>;
 export default ColorBar;

package/dist/plot/{ColorScaleSelect.svelte → core/components/ColorScaleSelect.svelte}

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { ColorBar } from './'
+  import { ColorBar } from '../..'
   import * as d3_sc from 'd3-scale-chromatic'
   import type { ComponentProps } from 'svelte'
   import Select from 'svelte-multiselect'
-  import type { D3InterpolateName } from '../colors'
+  import type { D3InterpolateName } from '../../../colors'
 
   let {
     options = Object.keys(d3_sc).filter((key) =>
@@ -28,6 +28,7 @@
 <Select
   {options}
   maxSelect={1}
+  maxOptions={options.length}
   {minSelect}
   bind:value
   bind:selected
@@ -47,7 +48,7 @@
       tick_labels={0}
       title_side="left"
       wrapper_style="width: 100%;"
-      title_style="width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;"
+      title_style="width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 0.9rem;"
       {...colorbar}
     />
   {/snippet}

package/dist/plot/{ColorScaleSelect.svelte.d.ts → core/components/ColorScaleSelect.svelte.d.ts}

@@ -1,7 +1,7 @@
-import { ColorBar } from './';
+import { ColorBar } from '../..';
 import type { ComponentProps } from 'svelte';
 import Select from 'svelte-multiselect';
-import type { D3InterpolateName } from '../colors';
+import type { D3InterpolateName } from '../../../colors';
 type $$ComponentProps = Omit<ComponentProps<typeof Select>, `options`> & {
     options?: D3InterpolateName[];
     value?: D3InterpolateName;