matterviz 0.4.0 → 0.4.2

package/dist/isosurface/parse.js

@@ -1,10 +1,24 @@
 // Parsers for volumetric data file formats (VASP CHGCAR, Gaussian .cube)
-import { COMPRESSION_EXTENSIONS_REGEX, VASP_VOLUMETRIC_REGEX } from '../constants';
-import { ELEM_SYMBOLS } from '../labels';
+import { ATOMIC_NUMBER_TO_SYMBOL } from '../composition/parse';
+import { VASP_VOLUMETRIC_REGEX } from '../constants';
+import { coerce_elem_symbol, FALLBACK_ELEMENTS } from '../element/helpers';
+import { strip_compression_extensions } from '../io/decompress';
 import * as math from '../math';
 import { wrap_to_unit_cell } from '../structure/pbc';
+import { make_site } from '../structure/site';
+import { parse_leading_num } from '../utils';
 // Bohr radius in Angstroms (for Gaussian .cube unit conversion)
 const BOHR_TO_ANGSTROM = 0.529177249;
+// === Parse error contract ===
+// parse_chgcar/parse_cube return null and record reasons here (mirrored to console.error).
+// parse_volumetric_file resets per call and throws when the FILENAME identifies a volumetric
+// format that fails to parse, but returns null when content doesn't look volumetric at all
+// (probe semantics — callers then fall back to structure parsing).
+let vol_parse_errors = [];
+const vol_error = (message) => {
+    vol_parse_errors.push(message);
+    console.error(message);
+};
 // === Fast number parsing utilities ===
 // Parse whitespace-separated numbers directly from a string, starting at `pos`.
 // Writes into a pre-allocated Float64Array and returns { count, end_pos }.
@@ -175,9 +189,9 @@ export function parse_chgcar(content) {
     pos = cur.next;
     // Line 1: scale factor
     cur = read_line(content, pos);
-    const scale_factor = parseFloat(cur.line);
+    const scale_factor = parse_leading_num(cur.line);
     if (isNaN(scale_factor)) {
-        console.error(`Invalid scaling factor in CHGCAR`);
+        vol_error(`Invalid scaling factor in CHGCAR`);
         return null;
     }
     pos = cur.next;
@@ -195,30 +209,28 @@ export function parse_chgcar(content) {
     let atom_counts = [];
     cur = read_line(content, pos);
     if (pos >= content.length) {
-        console.error(`CHGCAR: file ends before element/count lines`);
+        vol_error(`CHGCAR: file ends before element/count lines`);
         return null;
     }
     // Detect VASP 5+ format (has element symbols before counts)
-    const first_token = cur.line.trim().split(/\s+/)[0];
-    const has_element_symbols = isNaN(parseInt(first_token, 10));
+    const has_element_symbols = isNaN(parse_leading_num(cur.line));
     if (has_element_symbols) {
         element_symbols = cur.line.trim().split(/\s+/);
         pos = cur.next;
         cur = read_line(content, pos);
         if (pos >= content.length) {
-            console.error(`CHGCAR: file ends before atom counts line`);
+            vol_error(`CHGCAR: file ends before atom counts line`);
             return null;
         }
         atom_counts = cur.line.trim().split(/\s+/).map(Number);
     }
     else {
         atom_counts = cur.line.trim().split(/\s+/).map(Number);
-        const fallback_elements = [`H`, `He`, `Li`, `Be`, `B`, `C`, `N`, `O`, `F`, `Ne`];
-        element_symbols = atom_counts.map((_count, idx) => fallback_elements[idx % fallback_elements.length]);
+        element_symbols = atom_counts.map((_count, idx) => FALLBACK_ELEMENTS[idx % FALLBACK_ELEMENTS.length]);
     }
     pos = cur.next;
     if (pos >= content.length) {
-        console.error(`CHGCAR: file ends before coordinate mode line`);
+        vol_error(`CHGCAR: file ends before coordinate mode line`);
         return null;
     }
     // Check for selective dynamics line
@@ -228,7 +240,7 @@ export function parse_chgcar(content) {
         cur = read_line(content, pos);
     }
     if (pos >= content.length) {
-        console.error(`CHGCAR: file ends before coordinate mode line`);
+        vol_error(`CHGCAR: file ends before coordinate mode line`);
         return null;
     }
     // Coordinate mode line
@@ -242,18 +254,18 @@ export function parse_chgcar(content) {
         ({ cart_to_frac, frac_to_cart } = math.create_lattice_converters(lattice));
     }
     catch {
-        console.error(`CHGCAR: lattice matrix is singular; cannot convert coordinates`);
+        vol_error(`CHGCAR: lattice matrix is singular; cannot convert coordinates`);
         return null;
     }
     const sites = [];
     let atom_idx = 0;
     for (let elem_idx = 0; elem_idx < element_symbols.length; elem_idx++) {
         const symbol = element_symbols[elem_idx].split(/[_/]/)[0];
-        const element = (ELEM_SYMBOLS.includes(symbol) ? symbol : `H`);
+        const element = coerce_elem_symbol(symbol) ?? `H`;
         const count = atom_counts[elem_idx];
         for (let count_idx = 0; count_idx < count; count_idx++) {
             if (pos >= content.length) {
-                console.error(`CHGCAR: file ends before all atom coordinates are read`);
+                vol_error(`CHGCAR: file ends before all atom coordinates are read`);
                 return null;
             }
             cur = read_line(content, pos);
@@ -270,13 +282,7 @@ export function parse_chgcar(content) {
                 const raw = cart_to_frac(xyz);
                 abc = wrap_to_unit_cell(raw);
             }
-            sites.push({
-                species: [{ element, occu: 1, oxidation_state: 0 }],
-                abc,
-                xyz,
-                label: `${element}${atom_idx + count_idx + 1}`,
-                properties: {},
-            });
+            sites.push(make_site(element, abc, xyz, `${element}${atom_idx + count_idx + 1}`));
         }
         atom_idx += count;
     }
@@ -348,7 +354,7 @@ export function parse_chgcar(content) {
         }
     }
     if (volumes.length === 0) {
-        console.error(`No volumetric data found in CHGCAR`);
+        vol_error(`No volumetric data found in CHGCAR`);
         return null;
     }
     return { structure, volumes };
@@ -365,7 +371,7 @@ export function parse_cube(content, options = {}) {
             line_count++;
     }
     if (line_count < 6) {
-        console.error(`.cube file too short`);
+        vol_error(`.cube file too short`);
         return null;
     }
     // Parse header (first 6 lines + atom lines)
@@ -376,7 +382,7 @@ export function parse_cube(content, options = {}) {
     // (negative n_atoms indicates orbital data with extra header line)
     const line2 = header.lines[2].split(/\s+/).map(Number);
     if (line2.length < 4 || line2.some(isNaN)) {
-        console.error(`.cube header line 3 malformed: expected 4 numbers`);
+        vol_error(`.cube header line 3 malformed: expected 4 numbers`);
         return null;
     }
     const n_atoms = Math.abs(line2[0]);
@@ -390,7 +396,7 @@ export function parse_cube(content, options = {}) {
         header.lines[5].split(/\s+/).map(Number),
     ];
     if (voxel_lines.some((line) => line.length < 4 || line.some(isNaN))) {
-        console.error(`.cube voxel lines malformed: expected 4 numbers per line`);
+        vol_error(`.cube voxel lines malformed: expected 4 numbers per line`);
         return null;
     }
     const n_grid = [
@@ -423,7 +429,7 @@ export function parse_cube(content, options = {}) {
     }
     catch {
         // Non-periodic system (molecule), use identity
-        cube_cart_to_frac = (v) => [v[0], v[1], v[2]];
+        cube_cart_to_frac = (vec) => [vec[0], vec[1], vec[2]];
     }
     for (let atom_idx = 0; atom_idx < n_atoms; atom_idx++) {
         const cur = read_line(content, pos);
@@ -444,13 +450,7 @@ export function parse_cube(content, options = {}) {
         const xyz = math.subtract(raw_xyz, origin);
         const abc = cube_cart_to_frac(xyz);
         const element = atomic_number_to_symbol(atom_line[0]);
-        sites.push({
-            species: [{ element, occu: 1, oxidation_state: 0 }],
-            abc,
-            xyz,
-            label: `${element}${atom_idx + 1}`,
-            properties: {},
-        });
+        sites.push(make_site(element, abc, xyz, `${element}${atom_idx + 1}`));
     }
     // Build structure
     const lattice_params = math.calc_lattice_params(lattice);
@@ -474,7 +474,7 @@ export function parse_cube(content, options = {}) {
     if (parsed_count < total_points) {
         console.warn(`.cube: expected ${total_points} data values, got ${parsed_count}`);
         if (parsed_count === 0) {
-            console.error(`No volumetric data found in .cube file`);
+            vol_error(`No volumetric data found in .cube file`);
             return null;
         }
     }
@@ -499,22 +499,24 @@ export function parse_cube(content, options = {}) {
     ];
     return { structure, volumes };
 }
-// Convert atomic number to element symbol using ELEM_SYMBOLS (1-indexed: H=1, He=2, ...)
-function atomic_number_to_symbol(atomic_number) {
-    // ELEM_SYMBOLS is 0-indexed (H at index 0), atomic numbers are 1-indexed
-    const idx = atomic_number - 1;
-    return idx >= 0 && idx < ELEM_SYMBOLS.length ? ELEM_SYMBOLS[idx] : `H`;
-}
-// Auto-detect and parse volumetric file format based on filename and content
+// Convert atomic number to element symbol (falls back to H for unknown numbers)
+const atomic_number_to_symbol = (atomic_number) => ATOMIC_NUMBER_TO_SYMBOL[atomic_number] ?? `H`;
+// Auto-detect and parse volumetric file by filename + content (see parse error contract at top)
 export function parse_volumetric_file(content, filename) {
+    vol_parse_errors = [];
+    const fail = (format) => {
+        const detail = vol_parse_errors.length ? `: ${vol_parse_errors.join(`; `)}` : ``;
+        throw new Error(`Failed to parse ${format} file${filename ? ` '${filename}'` : ``}${detail}`);
+    };
     // Strip compression suffixes so "CHGCAR.gz" and "molecule.cube.bz2" match correctly
-    const lower_name = (filename ?? ``).toLowerCase().replace(COMPRESSION_EXTENSIONS_REGEX, ``);
-    // Extension-based detection
+    const lower_name = strip_compression_extensions(filename ?? ``);
+    // Extension-based detection (filename is authoritative: parse failure throws)
     if (lower_name.endsWith(`.cube`))
-        return parse_cube(content);
+        return parse_cube(content) ?? fail(`.cube`);
     // VASP volumetric file detection by filename
-    if (VASP_VOLUMETRIC_REGEX.test(lower_name))
-        return parse_chgcar(content);
+    if (VASP_VOLUMETRIC_REGEX.test(lower_name)) {
+        return parse_chgcar(content) ?? fail(`VASP volumetric (CHGCAR-like)`);
+    }
     // Content-based detection (only parse first few lines, not the whole file)
     // Find enough lines for detection without splitting the entire string
     const detection_end = find_line_offset(content, 10);
@@ -534,7 +536,7 @@ export function parse_volumetric_file(content, filename) {
     // CHGCAR detection: requires POSCAR-like header (scale factor on line 2) AND
     // a grid dimensions line (3 integers) somewhere after the header. This distinguishes
     // CHGCAR from plain POSCAR/CONTCAR files which share the same header format.
-    if (lines.length > 2 && !isNaN(parseFloat(lines[1].trim()))) {
+    if (lines.length > 2 && !isNaN(parse_leading_num(lines[1]))) {
         // Scan for grid dimensions line (3 integers) starting from ~line 7
         let scan_pos = find_line_offset(content, 7);
         // Only scan a limited window, not the entire file

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';
@@ -16,7 +17,7 @@ export const symbol_names = [
     ...new Set([...d3_symbols.symbolsFill, ...d3_symbols.symbolsStroke]),
 ]
     .map(name_for_symbol)
-    .filter((n) => n !== null);
+    .filter((name) => name !== null);
 export const symbol_map = Object.fromEntries(
 // Symbol lookup from d3-shape
 symbol_names.map((name) => [name, d3_symbols[`symbol${name}`]]));
@@ -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)
@@ -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

@@ -0,0 +1,34 @@
+<script lang="ts">
+  // Fullscreen toggle button (default Icon or custom snippet content), shared by the
+  // Trajectory/ChemPotDiagram3D/ConvexHull viewer chromes
+  import Icon from '../Icon.svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import { type FullscreenToggleProp, toggle_fullscreen } from './fullscreen'
+
+  let {
+    fullscreen = false,
+    toggle = true, // pass a snippet to render custom button content
+    wrapper = undefined, // element sent fullscreen
+    ...rest
+  }: HTMLButtonAttributes & {
+    fullscreen?: boolean
+    toggle?: FullscreenToggleProp
+    wrapper?: HTMLDivElement
+  } = $props()
+</script>
+
+<button
+  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]}
+>
+  {#if typeof toggle === `function`}
+    {@render toggle({ fullscreen })}
+  {:else}
+    <Icon icon={fullscreen ? `ExitFullscreen` : `Fullscreen`} />
+  {/if}
+</button>

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

@@ -0,0 +1,10 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type FullscreenToggleProp } from './fullscreen';
+type $$ComponentProps = HTMLButtonAttributes & {
+    fullscreen?: boolean;
+    toggle?: FullscreenToggleProp;
+    wrapper?: HTMLDivElement;
+};
+declare const FullscreenButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type FullscreenButton = ReturnType<typeof FullscreenButton>;
+export default FullscreenButton;

package/dist/layout/FullscreenToggle.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  // Toggles a bindable `fullscreen` flag (plot components manage browser fullscreen
+  // themselves). For chromes that call the browser API directly, use FullscreenButton.
   import Icon from '../Icon.svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
 
   let {
     fullscreen = $bindable(false),
-    class: className,
     ...rest
   }: HTMLButtonAttributes & {
     fullscreen?: boolean
@@ -12,17 +13,13 @@
 </script>
 
 <button
-  class="fullscreen-toggle {className ?? ``}"
+  {...rest}
+  class={[`fullscreen-toggle`, rest.class]}
   onclick={() => (fullscreen = !fullscreen)}
   aria-label={fullscreen ? `Exit fullscreen` : `Enter fullscreen`}
   type="button"
-  {...rest}
 >
-  <Icon
-    icon={fullscreen ? `ExitFullscreen` : `Fullscreen`}
-    width="18"
-    height="18"
-  />
+  <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" width="18" height="18" />
 </button>
 
 <style>
@@ -39,12 +36,15 @@
     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);
   }
-  /* Note: Parent component should add styles to show on parent hover */
-  /* Example: .parent:hover :global(.fullscreen-toggle) { opacity: 1; } */
+  /* Note: Parent component should add styles to show on parent hover
+  Example: .parent:hover :global(.fullscreen-toggle) { opacity: 1; } */
 </style>

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
@@ -35,7 +36,7 @@
   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 +44,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 +72,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 +80,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()