matterviz 0.4.1 → 0.4.2

package/dist/isosurface/parse-vaspwave.js

@@ -0,0 +1,138 @@
+// Parser for VASP vaspwave.h5 charge density: charge/charge on charge/grid
+// plus the embedded structure under structure/positions (dataset paths follow
+// ferrox's VASPWAVE_* constants / py4vasp's VASP 6.x schema). Full files are
+// hundreds of MB, so embedding hosts are expected to prune them server-side
+// first; this parser sees only charge/{charge,grid} + structure/positions.
+//
+// Prototype scope: charge (+ magnetization) isosurfaces only — wavefunctions
+// are out of scope. The "charge density RMS per SCF step" convergence signal
+// is already covered by OSZICAR's rms(c) column in the vaspout.h5 parser
+// (scf_charge_rms frame metadata); diffing charge grids between live reloads
+// is explicitly out of scope here.
+import { calc_lattice_params, create_frac_to_cart } from '../math';
+import { wrap_to_unit_cell } from '../structure/pbc';
+import { make_site } from '../structure/site';
+import { validate_3x3_matrix } from '../trajectory/helpers';
+import { expand_ion_types, is_hdf5_dataset, read_dataset, scale_matrix, to_number_array, to_scalar_number, to_string_array, with_h5_file, } from '../trajectory/parse/h5-utils';
+import { grid_data_range } from './types';
+const CHARGE_PATH = `charge/charge`;
+const CHARGE_GRID_PATH = `charge/grid`;
+const STRUCTURE_PREFIX = `structure/positions`;
+// vaspwave carries charge density/wavefunctions, never a trajectory — used by
+// file-open routing to divert from the HDF5 trajectory dispatcher.
+export const is_vaspwave_filename = (filename) => {
+    const basename = filename.split(`/`).pop() ?? filename;
+    return /vaspwave.*\.(?:h5|hdf5)$/i.test(basename);
+};
+const dataset_shape = (h5_file, path) => {
+    const entity = h5_file.get(path);
+    return is_hdf5_dataset(entity) ? (entity.shape ?? null) : null;
+};
+const read_embedded_structure = (h5_file) => {
+    const lattice_data = read_dataset(h5_file, `${STRUCTURE_PREFIX}/lattice_vectors`);
+    if (!lattice_data) {
+        throw new Error(`vaspwave.h5 has no embedded structure (${STRUCTURE_PREFIX}/lattice_vectors) — ` +
+            `cannot place the charge grid in a lattice`);
+    }
+    const scale = to_scalar_number(read_dataset(h5_file, `${STRUCTURE_PREFIX}/scale`)) ?? 1;
+    const lattice = scale_matrix(validate_3x3_matrix(lattice_data), scale);
+    // Sites are optional for rendering (the isosurface needs only the lattice),
+    // so a pruned/torn file missing ion data still opens with an empty cell.
+    const sites = [];
+    const ion_types = to_string_array(read_dataset(h5_file, `${STRUCTURE_PREFIX}/ion_types`));
+    const ion_counts = to_number_array(read_dataset(h5_file, `${STRUCTURE_PREFIX}/number_ion_types`));
+    const frac_positions = read_dataset(h5_file, `${STRUCTURE_PREFIX}/position_ions`);
+    if (ion_types && ion_counts && frac_positions && ion_types.length === ion_counts.length) {
+        const elements = expand_ion_types(ion_types, ion_counts);
+        const frac_to_cart = create_frac_to_cart(lattice);
+        for (const [site_idx, element] of elements.entries()) {
+            const frac = frac_positions[site_idx];
+            if (!Array.isArray(frac) || frac.length < 3)
+                break; // torn positions: keep what parsed
+            const abc = wrap_to_unit_cell(frac.slice(0, 3));
+            sites.push(make_site(element, abc, frac_to_cart(abc), `${element}${site_idx + 1}`));
+        }
+    }
+    return {
+        sites,
+        lattice: { matrix: lattice, pbc: [true, true, true], ...calc_lattice_params(lattice) },
+    };
+};
+// VASP writes volumetric data C-order [components, nz, ny, nx]; the grid
+// dataset [nx, ny, nz] disambiguates (same logic as ferrox's
+// volumetric_grid_shape_and_order — when nx == nz both layouts match, so
+// default to the canonical zyx order).
+const charge_axis_order = (spatial_shape, grid_dims) => {
+    const [nx, ny, nz] = grid_dims;
+    const matches = (dims) => dims.every((dim, idx) => dim === spatial_shape[idx]);
+    if (matches([nz, ny, nx]))
+        return `zyx`;
+    if (matches([nx, ny, nz]))
+        return `xyz`;
+    throw new Error(`vaspwave.h5 ${CHARGE_GRID_PATH} [${grid_dims}] is incompatible with ` +
+        `${CHARGE_PATH} spatial shape [${spatial_shape}]`);
+};
+function parse_vaspwave_charge_file(h5_file) {
+    const shape = dataset_shape(h5_file, CHARGE_PATH);
+    if (!shape) {
+        throw new Error(`vaspwave.h5 file has no charge density (missing ${CHARGE_PATH})`);
+    }
+    // Only the dimension count is checked here — the spatial axis order (zyx vs
+    // xyz) is disambiguated later by charge_axis_order against CHARGE_GRID_PATH.
+    if (shape.length !== 4) {
+        throw new Error(`${CHARGE_PATH} must have 4 dimensions, got [${shape}]`);
+    }
+    const n_components = shape[0];
+    if (n_components < 1 || n_components > 2) {
+        throw new Error(`${CHARGE_PATH} has unsupported component count ${n_components}; expected 1 ` +
+            `(non-spin-polarized) or 2 (total + magnetization)`);
+    }
+    const grid_dims = to_number_array(read_dataset(h5_file, CHARGE_GRID_PATH));
+    if (grid_dims?.length !== 3) {
+        throw new Error(`vaspwave.h5 is missing ${CHARGE_GRID_PATH}; cannot determine the axis order of ${CHARGE_PATH}`);
+    }
+    const axis_order = charge_axis_order(shape.slice(1), grid_dims);
+    const [nx, ny, nz] = grid_dims;
+    const structure = read_embedded_structure(h5_file);
+    const lattice = structure.lattice.matrix;
+    const charge_data = read_dataset(h5_file, CHARGE_PATH);
+    if (!charge_data)
+        throw new Error(`Failed to read ${CHARGE_PATH} data`);
+    // Metadata shape and decoded data can disagree in torn/corrupt files — fail
+    // loudly instead of silently rendering fewer components than the file claims
+    if (charge_data.length !== n_components) {
+        throw new Error(`${CHARGE_PATH} decoded ${charge_data.length} components but its shape claims ${n_components}`);
+    }
+    const component_labels = [`charge density`, `magnetization density`];
+    const volumes = charge_data.map((component, component_idx) => {
+        const grid = Array(nx);
+        for (let x_idx = 0; x_idx < nx; x_idx++) {
+            const plane = Array(ny);
+            for (let y_idx = 0; y_idx < ny; y_idx++) {
+                const row = Array(nz);
+                for (let z_idx = 0; z_idx < nz; z_idx++) {
+                    row[z_idx] =
+                        axis_order === `zyx`
+                            ? component[z_idx][y_idx][x_idx]
+                            : component[x_idx][y_idx][z_idx];
+                }
+                plane[y_idx] = row;
+            }
+            grid[x_idx] = plane;
+        }
+        return {
+            grid,
+            grid_dims: [nx, ny, nz],
+            lattice,
+            origin: [0, 0, 0],
+            data_range: grid_data_range(grid),
+            data_order: `x_fastest`,
+            periodic: true,
+            label: component_labels[component_idx],
+        };
+    });
+    return { structure, volumes };
+}
+export async function parse_vaspwave_charge(buffer, filename) {
+    return with_h5_file(buffer, filename, parse_vaspwave_charge_file);
+}

package/dist/isosurface/parse.js

@@ -1,11 +1,12 @@
 // Parsers for volumetric data file formats (VASP CHGCAR, Gaussian .cube)
 import { ATOMIC_NUMBER_TO_SYMBOL } from '../composition/parse';
 import { VASP_VOLUMETRIC_REGEX } from '../constants';
-import { coerce_elem_symbol, FALLBACK_ELEMENTS } from '../element';
-import { strip_compression_extensions } from '../io';
+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 ===
@@ -188,7 +189,7 @@ 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)) {
         vol_error(`Invalid scaling factor in CHGCAR`);
         return null;
@@ -212,8 +213,7 @@ export function parse_chgcar(content) {
         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;
@@ -536,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';
@@ -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

@@ -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
@@ -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()

package/dist/layout/SettingsSection.svelte

@@ -14,11 +14,13 @@
     title: string
     current_values: Record<string, unknown>
     children: Snippet<
-      [{
-        current_values: Record<string, unknown>
-        has_changes: boolean
-        reference_values: Record<string, unknown>
-      }]
+      [
+        {
+          current_values: Record<string, unknown>
+          has_changes: boolean
+          reference_values: Record<string, unknown>
+        },
+      ]
     >
     on_reset?: () => void
   } = $props()
@@ -30,23 +32,22 @@
     if (obj instanceof RegExp) return new RegExp(obj)
     if (Array.isArray(obj)) {
       return obj.map((item) =>
-        typeof item === `object` && item !== null ? deep_copy(item) : item
+        typeof item === `object` && item !== null ? deep_copy(item) : item,
       )
     }
 
     const copy: Record<string, unknown> = {}
     for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
-      copy[key] = typeof value === `object` && value !== null
-        ? deep_copy(value)
-        : value
+      copy[key] = typeof value === `object` && value !== null ? deep_copy(value) : value
     }
     return copy
   }
 
   // Capture initial values once at mount - must NOT be $derived or it tracks changes
-  const reference_values = untrack(() =>
-    deep_copy(current_values) as Record<string, unknown>
-  )
+  const reference_values = untrack(() => deep_copy(current_values) as Record<string, unknown>)
+
+  // unique per-instance id so aria-labelledby stays valid with multiple sections on a page
+  const title_id = `settings-section-title-${crypto.randomUUID()}`
 
   // Check if any values have changed from reference values
   let has_changes = $derived.by(() => {
@@ -61,9 +62,12 @@
             const curr_val = current_value[idx]
             // Handle nested objects/arrays in arrays
             if (
-              typeof val === `object` && val !== null &&
-              typeof curr_val === `object` && curr_val !== null
-            ) return JSON.stringify(val) !== JSON.stringify(curr_val) // Quick deep comparison fallback
+              typeof val === `object` &&
+              val !== null &&
+              typeof curr_val === `object` &&
+              curr_val !== null
+            )
+              return JSON.stringify(val) !== JSON.stringify(curr_val) // Quick deep comparison fallback
             return val !== curr_val
           })
         ) {
@@ -91,7 +95,7 @@
   }
 </script>
 
-<h4 id="settings-section-title">
+<h4 id={title_id}>
   {title}
 
   {#if has_changes}
@@ -106,7 +110,7 @@
     </button>
   {/if}
 </h4>
-<section {...rest} aria-labelledby="settings-section-title">
+<section {...rest} aria-labelledby={title_id}>
   {@render children?.({ current_values, has_changes, reference_values })}
 </section>
 

package/dist/layout/SubpageGrid.svelte

@@ -52,7 +52,9 @@
     border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
     text-decoration: none;
     color: inherit;
-    transition: border-color 0.15s, box-shadow 0.15s;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
     &:hover {
       border-color: color-mix(in srgb, currentColor 35%, transparent);
       box-shadow: 0 2px 12px color-mix(in srgb, currentColor 8%, transparent);