matterviz 0.4.1 → 0.4.3

package/dist/isosurface/types.js

@@ -75,7 +75,7 @@ export function pad_periodic_grid(grid, dims, pad_fraction) {
 }
 // Max total grid points before downsampling is applied for isosurface extraction.
 // 500K balances visual quality with interactive performance (<200ms marching cubes).
-const MAX_GRID_POINTS = 500_000;
+export const MAX_GRID_POINTS = 500_000;
 // Downsample a 3D volumetric grid to keep total point count under a budget.
 // Uses block averaging to preserve data fidelity while reducing grid dimensions.
 // Returns original grid/dims if already within budget.
@@ -147,16 +147,17 @@ export const DEFAULT_ISOSURFACE_SETTINGS = {
     wireframe: false,
     halo: 0,
 };
+const field_has_significant_negatives = ({ min, abs_max }) => min < -abs_max * 0.01;
+const default_isovalue = ({ abs_max }) => abs_max > 0 ? abs_max * 0.2 : DEFAULT_ISOSURFACE_SETTINGS.isovalue;
 // Compute reasonable isosurface settings from a volume's data range.
 // Sets isovalue to 20% of abs_max and enables negative lobe when data has
 // significant negative values (>1% of max).
 export function auto_isosurface_settings(data_range) {
-    const has_negatives = data_range.min < -data_range.abs_max * 0.01;
     return {
         ...DEFAULT_ISOSURFACE_SETTINGS,
         // Fall back to default isovalue for all-zero grids to keep controls usable
-        isovalue: data_range.abs_max > 0 ? data_range.abs_max * 0.2 : DEFAULT_ISOSURFACE_SETTINGS.isovalue,
-        show_negative: has_negatives,
+        isovalue: default_isovalue(data_range),
+        show_negative: field_has_significant_negatives(data_range),
     };
 }
 // Generate N evenly-spaced isosurface layers across a data range.
@@ -165,7 +166,7 @@ export function auto_isosurface_settings(data_range) {
 export function generate_layers(data_range, n_layers) {
     if (n_layers <= 0 || data_range.abs_max <= 0)
         return [];
-    const has_negatives = data_range.min < -data_range.abs_max * 0.01;
+    const show_negative = field_has_significant_negatives(data_range);
     // Space isovalues from high (inner) to low (outer)
     return Array.from({ length: n_layers }, (_, idx) => {
         // Fraction from 0.8 (inner) to 0.1 (outer)
@@ -175,18 +176,129 @@ export function generate_layers(data_range, n_layers) {
             color: LAYER_COLORS[idx % LAYER_COLORS.length],
             opacity: n_layers === 1 ? 0.6 : 0.8 - idx * (0.5 / Math.max(n_layers - 1, 1)),
             visible: true,
-            show_negative: has_negatives,
+            show_negative,
             negative_color: LAYER_COLORS[(idx + 1) % LAYER_COLORS.length],
         };
     });
 }
-// Tile (repeat) volumetric data to fill a supercell.
+// Build a default isosurface layer for a newly added volume: isovalue at 20% of
+// abs_max, next unused palette color, and negative lobe when the data is signed.
+export function auto_volume_layer(volume, volume_idx, color_offset = 0) {
+    return {
+        isovalue: default_isovalue(volume.data_range),
+        color: LAYER_COLORS[color_offset % LAYER_COLORS.length],
+        opacity: 0.6,
+        visible: true,
+        show_negative: field_has_significant_negatives(volume.data_range),
+        negative_color: LAYER_COLORS[(color_offset + 1) % LAYER_COLORS.length],
+        volume_idx,
+    };
+}
+// Convert single-isovalue settings into an explicit layers array (no-op when
+// layers already exist — an explicit empty array means zero surfaces and is
+// preserved). Used when entering multi-volume mode so the implicit
+// active-volume surface survives as an editable layer.
+export function materialize_layers(settings, active_volume_idx) {
+    if (settings.layers) {
+        // Pin any layers still relying on the implicit active volume
+        return settings.layers.map((layer) => ({
+            ...layer,
+            volume_idx: layer.volume_idx ?? active_volume_idx,
+        }));
+    }
+    return [
+        {
+            isovalue: settings.isovalue,
+            color: settings.positive_color,
+            opacity: settings.opacity,
+            visible: true,
+            show_negative: settings.show_negative,
+            negative_color: settings.negative_color,
+            volume_idx: active_volume_idx,
+        },
+    ];
+}
+// Remove a volume from the registry: drops layers whose geometry references it,
+// unsets color sources pointing at it, and shifts higher indices down by one.
+// Layers without an explicit volume_idx implicitly reference `active_volume_idx`.
+export function remove_volume(volumes, layers, removed_idx, active_volume_idx = 0) {
+    const remap = (idx) => {
+        if (idx === undefined || idx === removed_idx)
+            return undefined;
+        return idx > removed_idx ? idx - 1 : idx;
+    };
+    return {
+        volumes: volumes.filter((_vol, idx) => idx !== removed_idx),
+        layers: layers
+            .filter((layer) => (layer.volume_idx ?? active_volume_idx) !== removed_idx)
+            .map((layer) => ({
+            ...layer,
+            volume_idx: remap(layer.volume_idx ?? active_volume_idx) ?? 0,
+            color_volume_idx: remap(layer.color_volume_idx),
+        })),
+    };
+}
+// Label volumes parsed from a file with a stable `source` id (compression-
+// stripped filename) and a display label (multi-block files like spin-polarized
+// CHGCAR get "<file>: <block label>" labels).
+export function label_file_volumes(volumes, filename) {
+    const source = filename.replace(/\.(?:gz|gzip|bz2|xz|zst)$/i, ``);
+    return volumes.map((vol, idx) => ({
+        ...vol,
+        source,
+        label: volumes.length > 1 ? `${source}: ${vol.label ?? idx + 1}` : source,
+    }));
+}
+// Two lattices describe the same cell when all matrix entries agree within
+// tolerance — the signal that an imported file is another scalar field of the
+// already-loaded system and should be appended rather than replace the scene.
+export const lattices_match = (lattice_a, lattice_b, tolerance = 0.05) => Boolean(lattice_a && lattice_b) &&
+    lattice_a.every((row, row_idx) => row.every((val, col_idx) => Math.abs(val - lattice_b[row_idx][col_idx]) < tolerance));
+// Merge volumes from a newly imported file (pre-labeled via label_file_volumes)
+// into an existing registry. Reimporting a source with the same block count
+// replaces its volumes in place, preserving user-tuned layers; a changed block
+// count drops the stale group (remapping layer indices) before appending fresh
+// volumes. New volumes each get an auto-generated layer.
+// Layers without an explicit volume_idx implicitly reference `active_volume_idx`
+// and are pinned to it up front so index remapping treats them correctly.
+export function merge_imported_volumes(existing, existing_layers, incoming, active_volume_idx = 0) {
+    const source = incoming[0]?.source;
+    let volumes = [...existing];
+    let layers = existing_layers.map((layer) => ({
+        ...layer,
+        volume_idx: layer.volume_idx ?? active_volume_idx,
+    }));
+    const group_indices = volumes
+        .map((vol, idx) => (source !== undefined && vol.source === source ? idx : -1))
+        .filter((idx) => idx >= 0);
+    if (group_indices.length === incoming.length && incoming.length > 0) {
+        // Same source, same block count: replace in place, keep layer settings
+        for (const [incoming_idx, vol_idx] of group_indices.entries()) {
+            volumes[vol_idx] = incoming[incoming_idx];
+        }
+        return { volumes, layers, first_touched_idx: group_indices[0], n_added: 0 };
+    }
+    // Drop any stale volumes from the same source (block count changed)
+    for (let removed = group_indices.length - 1; removed >= 0; removed--) {
+        ;
+        ({ volumes, layers } = remove_volume(volumes, layers, group_indices[removed]));
+    }
+    const first_touched_idx = volumes.length;
+    for (const vol of incoming) {
+        layers.push(auto_volume_layer(vol, volumes.length, layers.length));
+        volumes.push(vol);
+    }
+    return { volumes, layers, first_touched_idx, n_added: incoming.length };
+}
+// Tile (repeat) periodic volumetric data to fill a supercell. Finite volumes
+// remain unchanged: structure supercells must not implicitly repeat molecular
+// or other bounded scalar fields.
 // Pre-downsamples the source grid when the tiled result would exceed MAX_GRID_POINTS
 // to avoid large temporary allocations. Returns the original volume unchanged for
 // [1,1,1] scaling.
 export function tile_volumetric_data(volume, scaling) {
     const [sx, sy, sz] = scaling;
-    if (sx === 1 && sy === 1 && sz === 1)
+    if (!volume.periodic || (sx === 1 && sy === 1 && sz === 1))
         return volume;
     const total_cells = sx * sy * sz;
     let src_grid = volume.grid;

package/dist/json-path.d.ts

@@ -0,0 +1,4 @@
+export declare const format_path: (segments: (string | number)[]) => string;
+export declare const build_path: (parent_path: string, key: string | number) => string;
+export declare function parse_path(path: string): (string | number)[];
+export declare function resolve_path(root: unknown, path: string): unknown;

package/dist/json-path.js

@@ -0,0 +1,89 @@
+// Dot/bracket path codec for arbitrary JavaScript object keys.
+// Special keys use JSON.stringify so quotes/backslashes/brackets round-trip.
+const PATH_IDENTIFIER_RE = /^[A-Za-z_$][\w$]*$/u;
+function format_path_segment(segment, is_first = false) {
+    if (typeof segment === `number`)
+        return `[${segment}]`;
+    if (PATH_IDENTIFIER_RE.test(segment))
+        return is_first ? segment : `.${segment}`;
+    return `[${JSON.stringify(segment)}]`;
+}
+export const format_path = (segments) => segments.map((segment, idx) => format_path_segment(segment, idx === 0)).join(``);
+export const build_path = (parent_path, key) => parent_path ? parent_path + format_path_segment(key) : format_path_segment(key, true);
+export function parse_path(path) {
+    if (!path)
+        return [];
+    const segments = [];
+    let pos = 0;
+    while (pos < path.length) {
+        const char = path[pos];
+        if (char === `.`) {
+            pos++;
+            continue;
+        }
+        if (char !== `[`) {
+            const start = pos;
+            while (pos < path.length && path[pos] !== `.` && path[pos] !== `[`)
+                pos++;
+            if (pos > start)
+                segments.push(path.slice(start, pos));
+            continue;
+        }
+        pos++; // skip `[`
+        if (path[pos] === `]`) {
+            pos++;
+            continue;
+        }
+        if (path[pos] === `"`) {
+            const json_start = pos;
+            let escaped = false;
+            pos++;
+            while (pos < path.length) {
+                const quote_char = path[pos];
+                if (escaped)
+                    escaped = false;
+                else if (quote_char === `\\`)
+                    escaped = true;
+                else if (quote_char === `"`)
+                    break;
+                pos++;
+            }
+            if (pos >= path.length) {
+                segments.push(path.slice(json_start + 1));
+                break;
+            }
+            try {
+                segments.push(JSON.parse(path.slice(json_start, pos + 1)));
+            }
+            catch {
+                segments.push(path.slice(json_start + 1, pos));
+            }
+            pos++;
+            if (path[pos] === `]`)
+                pos++;
+            continue;
+        }
+        const start = pos;
+        while (pos < path.length && path[pos] !== `]`)
+            pos++;
+        const token = path.slice(start, pos);
+        if (token) {
+            const num = Number(token);
+            segments.push(Number.isNaN(num) ? token : num);
+        }
+        if (path[pos] === `]`)
+            pos++;
+    }
+    return segments;
+}
+export function resolve_path(root, path) {
+    if (!path)
+        return root;
+    let current = root;
+    for (const key of parse_path(path)) {
+        if (current == null || typeof current !== `object`)
+            return undefined;
+        current = current[key];
+    }
+    return current;
+}

package/dist/labels.d.ts

@@ -12,6 +12,7 @@ export declare const ELEM_HEATMAP_KEYS: (keyof ChemicalElement)[];
 export declare const ELEM_HEATMAP_LABELS: Partial<Record<string, keyof ChemicalElement>>;
 export declare const DEFAULT_FMT: [string, string];
 export declare const FRACTION_GLYPHS: readonly (readonly [number, string])[];
+export declare const format_value_or_num: (value: number, fmt?: string) => string;
 export declare const format_num: (num: number, fmt?: string | number) => string;
 export declare const format_vec3: (vec: Readonly<Vec3>, fmt_spec?: string) => string;
 export declare const format_bytes: (bytes?: number) => string;
@@ -47,7 +48,10 @@ export declare const SUBSCRIPT_MAP: {
     readonly '9': "₉";
 };
 export declare const superscript_digits: (input: string) => string;
-export declare const trajectory_property_config: Record<string, {
+export declare const SCF_AXIS_GROUP = "eV (SCF)";
+export interface TrajPropertyConfig {
     label: string;
     unit: string;
-}>;
+    axis_group?: string;
+}
+export declare const trajectory_property_config: Record<string, TrajPropertyConfig>;

package/dist/labels.js

@@ -1,3 +1,4 @@
+import { normalize_unicode_minus } from './utils';
 import { format } from 'd3-format';
 import * as d3_symbols from 'd3-shape';
 import { timeFormat } from 'd3-time-format';
@@ -33,12 +34,11 @@ export function format_value(value, formatter) {
         return `Infinity`;
     if (Number.isNaN(value))
         return `NaN`;
-    // Format and normalize unicode minus
-    const formatted = format(formatter)(value).replaceAll('−', `-`);
+    const formatted = normalize_unicode_minus(format(formatter)(value));
     // Handle percentage formatting - remove trailing zeros
     if (formatter.includes(`%`)) {
         return formatted.includes(`.`)
-            ? formatted.replace(/(\.\d*?)0+%$/, `$1%`).replace(/\.%$/, `%`)
+            ? formatted.replace(/(?<decimals>\.\d*?)0+%$/, `$1%`).replace(/\.%$/, `%`)
             : formatted;
     }
     // Handle currency formatting - preserve precision if specified
@@ -47,26 +47,44 @@ export function format_value(value, formatter) {
     }
     // Remove trailing zeros after decimal point
     const out = formatted.includes(`.`)
-        ? formatted.replace(/(\.\d*?)0+$/, `$1`).replace(/\.$/, ``)
+        ? formatted.replace(/(?<decimals>\.\d*?)0+$/, `$1`).replace(/\.$/, ``)
         : formatted;
     return out === `-0` ? `0` : out;
 }
-// TODO add labels and units for all elemental properties
+// Human-readable label + unit (null when dimensionless) for displayable element
+// properties. Omitted: Record-valued (ionic_radii, shannon_radii), assets
+// (cpk-hex, spectral_img), heading/summary fields (name, symbol, category,
+// discoverer, year, summary) and electronegativity_pauling (identical to
+// electronegativity).
 export const ELEM_PROPERTY_LABELS = {
+    appearance: [`Appearance`, null],
     atomic_mass: [`Atomic Mass`, `u`],
     atomic_radius: [`Atomic Radius`, `Å`],
     boiling_point: [`Boiling Point`, `K`],
+    column: [`Group`, null],
+    common_oxidation_states: [`Common Oxidation States`, null],
     covalent_radius: [`Covalent Radius`, `Å`],
     density: [`Density`, `g/cm³`],
-    electron_affinity: [`Electron Affinity`, null],
+    electron_affinity: [`Electron Affinity`, `kJ/mol`],
+    electron_configuration: [`Electron Configuration`, null],
+    electron_configuration_semantic: [`Electron Configuration (semantic)`, null],
     electronegativity: [`Electronegativity`, null],
+    electrons: [`Electrons`, null],
     first_ionization: [`First Ionization Energy`, `eV`],
+    icsd_oxidation_states: [`ICSD Oxidation States`, null],
+    ionization_energies: [`Ionization Energies`, `kJ/mol`],
     melting_point: [`Melting Point`, `K`],
     mendeleev_number: [`Mendeleev Number`, null],
-    // molar_heat: [`Molar Heat`, `J/(mol·K)`],
+    molar_heat: [`Molar Heat`, `J/(mol·K)`],
     n_shells: [`Number of Shells`, null],
     n_valence: [`Electron Valency`, null],
+    neutrons: [`Neutrons`, null],
     number: [`Atomic Number`, null],
+    number_of_isotopes: [`Number of Isotopes`, null],
+    oxidation_states: [`Oxidation States`, null],
+    period: [`Period`, null],
+    phase: [`Phase`, null],
+    protons: [`Protons`, null],
     shells: [`Electron Shell Occupations`, null],
     specific_heat: [`Specific Heat`, `J/(g K)`],
 };
@@ -108,6 +126,10 @@ export const FRACTION_GLYPHS = [
     [7 / 8, `⁷⁄₈`],
     [11 / 12, `¹¹⁄₁₂`],
 ];
+// format_value when an explicit format is given, else format_num's adaptive
+// default: SI prefixes for |value| >= 1 (4500 -> 4.5k) but plain decimals
+// below 1 (0.2 stays 0.2, never the SI milli form "200m")
+export const format_value_or_num = (value, fmt) => fmt ? format_value(value, fmt) : format_num(value);
 // fmt as number only allowed to support [].map(format_num) without type error
 export const format_num = (num, fmt) => {
     if (num === null)
@@ -119,7 +141,7 @@ export const format_num = (num, fmt) => {
     return format(fmt)(num);
 };
 // Format a 3D vector as "(x, y, z)" with configurable precision
-export const format_vec3 = (vec, fmt_spec = `.4~`) => `(${format_num(vec[0], fmt_spec)}, ${format_num(vec[1], fmt_spec)}, ${format_num(vec[2], fmt_spec)})`;
+export const format_vec3 = (vec, fmt_spec = `.3~`) => `(${format_num(vec[0], fmt_spec)}, ${format_num(vec[1], fmt_spec)}, ${format_num(vec[2], fmt_spec)})`;
 const BYTE_UNITS = [`B`, `KiB`, `MiB`, `GiB`, `TiB`, `PiB`];
 // Format file sizes using IEC binary units (1024 factor).
 export const format_bytes = (bytes) => {
@@ -157,10 +179,10 @@ export function parse_si_float(value) {
     if (typeof value !== `string`)
         return value;
     // Remove whitespace and commas
-    const cleaned = value.trim().replaceAll(/(\d),(\d)/g, `$1$2`);
+    const cleaned = value.trim().replaceAll(/(?<before>\d),(?<after>\d)/g, `$1$2`);
     // SI-formatted number (e.g. "1.23k", "789µ"). Suffixes are case-sensitive (m=milli vs
     // M=mega), so no `i` flag: mismatched-case suffixes return the string as-is.
-    const match = /^([-+]?\d*\.?\d+)\s*([yzafpnµmkMGTPEZY])?$/.exec(cleaned);
+    const match = /^(?<num_part>[-+]?\d*\.?\d+)\s*(?<suffix>[yzafpnµmkMGTPEZY])?$/.exec(cleaned);
     if (match) {
         const [, num_part, suffix] = match;
         let multiplier = 1;
@@ -171,11 +193,12 @@ export function parse_si_float(value) {
                 multiplier = 1000 ** (index - 8);
             }
         }
-        return parseFloat(num_part) * multiplier;
+        return Number(num_part) * multiplier;
     }
-    // If it's a number without SI suffix, try parsing it
+    // If it's a number without SI suffix, try parsing it (dropping stray commas
+    // not already stripped above, e.g. trailing ones)
     if (/^[-+]?[\d,]+\.?\d*$/.test(cleaned))
-        return parseFloat(cleaned);
+        return Number(cleaned.replaceAll(`,`, ``));
     // If the value is not a formatted number, return as is
     return value;
 }
@@ -234,7 +257,9 @@ export const SUBSCRIPT_MAP = {
 };
 // replaces all signs and digits with their unicode superscript equivalent
 export const superscript_digits = (input) => input.replaceAll(/[\d+-]/g, (match) => is_superscript_key(match) ? SUPERSCRIPT_MAP[match] : match);
-// Trajectory property configuration: clean labels and units as structured data
+// Axis-group key for SCF convergence series: shared between the property config
+// below and the log-scale detection in trajectory/plotting.ts so the two can't drift
+export const SCF_AXIS_GROUP = `eV (SCF)`;
 export const trajectory_property_config = {
     // Energy properties
     energy: { label: `Energy`, unit: `eV` },
@@ -275,4 +300,9 @@ export const trajectory_property_config = {
     Pressure: { label: `Pressure`, unit: `GPa` },
     stress_max: { label: `σ<sub>max</sub>`, unit: `GPa` },
     stress_frobenius: { label: `σ<sub>F</sub>`, unit: `GPa` },
+    // SCF/electronic convergence properties (e.g. from VASP vaspout.h5 OSZICAR data)
+    n_scf_steps: { label: `SCF steps`, unit: `steps` },
+    scf_energy_delta: { label: `|ΔE<sub>SCF</sub>|`, unit: `eV`, axis_group: SCF_AXIS_GROUP },
+    scf_rms: { label: `ρ residual (rms)`, unit: `a.u.` },
+    scf_charge_rms: { label: `ρ<sub>c</sub> residual (rms(c))`, unit: `a.u.` },
 };

package/dist/layout/FullscreenButton.svelte

@@ -21,9 +21,10 @@
   type="button"
   onclick={() => toggle_fullscreen(wrapper)}
   title="{fullscreen ? `Exit` : `Enter`} fullscreen"
+  aria-label="{fullscreen ? `Exit` : `Enter`} fullscreen"
   aria-pressed={fullscreen}
   {...rest}
-  class="fullscreen-btn {rest.class ?? ``}"
+  class={[`fullscreen-btn`, rest.class]}
 >
   {#if typeof toggle === `function`}
     {@render toggle({ fullscreen })}

package/dist/layout/FullscreenToggle.svelte

@@ -4,14 +4,17 @@
   import Icon from '../Icon.svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
 
-  let { fullscreen = $bindable(false), ...rest }: HTMLButtonAttributes & {
+  let {
+    fullscreen = $bindable(false),
+    ...rest
+  }: HTMLButtonAttributes & {
     fullscreen?: boolean
   } = $props()
 </script>
 
 <button
   {...rest}
-  class="fullscreen-toggle {rest.class ?? ``}"
+  class={[`fullscreen-toggle`, rest.class]}
   onclick={() => (fullscreen = !fullscreen)}
   aria-label={fullscreen ? `Exit fullscreen` : `Enter fullscreen`}
   type="button"
@@ -33,9 +36,12 @@
     background-color: transparent;
     cursor: pointer;
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
-  .fullscreen-toggle:hover, .fullscreen-toggle:focus {
+  .fullscreen-toggle:hover,
+  .fullscreen-toggle:focus {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
     opacity: var(--fullscreen-btn-hover-opacity, 1);
   }

package/dist/layout/InfoCard.svelte

@@ -4,8 +4,9 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  interface Props<T extends keyof HTMLElementTagNameMap = `section`>
-    extends HTMLAttributes<HTMLElementTagNameMap[T]> {
+  interface Props<T extends keyof HTMLElementTagNameMap = `section`> extends HTMLAttributes<
+    HTMLElementTagNameMap[T]
+  > {
     data?: {
       title: string
       value?: string | number | number[] | null
@@ -25,17 +26,15 @@
     data = [],
     title = ``,
     fallback = ``,
-    fmt = `.2f`,
+    fmt: default_fmt = `.2f`,
     as = `section`,
     title_snippet,
     fallback_snippet,
     ...rest
   }: Props = $props()
-
-  let default_fmt = $derived(fmt) // rename fmt to default_fmt for internal use
 </script>
 
-<svelte:element this={as} {...rest} class="info-card {rest.class ?? ``}">
+<svelte:element this={as} {...rest} class={[`info-card`, rest.class]}>
   {#if title || title_snippet}
     <h2>
       {#if title_snippet}{@render title_snippet()}{:else}
@@ -43,13 +42,7 @@
       {/if}
     </h2>
   {/if}
-  {#each data.filter((itm) =>
-      (!(`condition` in itm) || itm?.condition) && itm.value !== undefined &&
-      itm.value !== null
-    ) as
-    { title, value, unit, fmt = default_fmt, tooltip }
-    (title + value + unit + fmt)
-  }
+  {#each data.filter((itm) => (!(`condition` in itm) || itm?.condition) && itm.value !== undefined && itm.value !== null) as { title, value, unit, fmt = default_fmt, tooltip } (title + value + unit + fmt)}
     <div>
       <span class="title" {title}>
         {@html sanitize_html(title)}
@@ -77,10 +70,7 @@
     padding: var(--ic-padding, 10pt 12pt);
     margin: var(--ic-margin, 1em 0);
     gap: var(--ic-gap, 10pt 5%);
-    background-color: var(
-      --ic-bg,
-      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1))
-    );
+    background-color: var(--ic-bg, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1)));
     font-size: var(--ic-font-size);
     width: var(--ic-width);
   }
@@ -88,10 +78,7 @@
     grid-column: 1 / -1;
     margin: 0;
     border-bottom: 1px solid
-      var(
-        --ic-title-border-color,
-        light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3))
-      );
+      var(--ic-title-border-color, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3)));
   }
   div {
     display: flex;

package/dist/layout/InfoTag.svelte

@@ -49,9 +49,7 @@
     else void copy_to_clipboard()
   }
 
-  function handle_keydown(
-    event: KeyboardEvent & { currentTarget: HTMLElement },
-  ): void {
+  function handle_keydown(event: KeyboardEvent & { currentTarget: HTMLElement }): void {
     if (disabled || (event.key !== `Enter` && event.key !== ` `)) return
     event.preventDefault()
     event.currentTarget.click()

package/dist/layout/NumberRangeInput.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { tooltip } from 'svelte-multiselect/attachments'
+
+  // Paired number + range input bound to the same value, wrapped in a flex <label>.
+  // The label text/markup is passed as children (supports inline units like <small>Å</small>).
+  // Pass a `title` (via rest) to show a tooltip; wrapping <label> only names the number input
+  // so range slider reuses that `title` as its accessible name.
+  let {
+    value = $bindable(),
+    min,
+    max,
+    step,
+    children,
+    ...rest
+  }: {
+    value: number | undefined
+    min: number | string
+    max: number | string
+    step: number | string
+    children?: Snippet
+  } & HTMLAttributes<HTMLLabelElement> = $props()
+</script>
+
+<label {@attach tooltip()} {...rest}>
+  {@render children?.()}
+  <input type="number" {min} {max} {step} bind:value />
+  <input type="range" {min} {max} {step} bind:value aria-label={rest.title} />
+</label>
+
+<style>
+  label {
+    display: flex;
+    align-items: center;
+    gap: 10pt;
+  }
+  input {
+    font-size: inherit;
+    font-family: inherit;
+  }
+  input[type='range'] {
+    flex: 1;
+    min-width: 40px;
+  }
+</style>

package/dist/layout/NumberRangeInput.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    value: number | undefined;
+    min: number | string;
+    max: number | string;
+    step: number | string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLLabelElement>;
+declare const NumberRangeInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type NumberRangeInput = ReturnType<typeof NumberRangeInput>;
+export default NumberRangeInput;

package/dist/layout/PropertyFilter.svelte

@@ -40,9 +40,7 @@
     onclear?: () => void // Callback when clear button is clicked (fires before onchange)
   } & HTMLAttributes<HTMLDivElement> = $props()
 
-  let show_histogram = $derived(
-    histogram_position !== `none` && histogram_data?.length,
-  )
+  let show_histogram = $derived(histogram_position !== `none` && histogram_data?.length)
 
   // Active when either bound is set (undefined = unbounded)
   let active = $derived(min_value !== undefined || max_value !== undefined)
@@ -56,9 +54,7 @@
     return histogram_data.filter((val) => val >= min && val <= max)
   })
 
-  function onkeydown(
-    event: KeyboardEvent & { currentTarget: HTMLInputElement },
-  ): void {
+  function onkeydown(event: KeyboardEvent & { currentTarget: HTMLInputElement }): void {
     if (event.key === `Enter`) {
       event.preventDefault()
       event.currentTarget.blur()