matterviz 0.3.5 → 0.3.7

package/dist/fermi-surface/parse.js

@@ -2,13 +2,9 @@ import * as constants from './constants';
 import { compute_vertex_normals } from './marching-cubes';
 const parse_number_tokens = (line) => line.split(/\s+/).filter(Boolean);
 // Parse whitespace-separated floats from a line (optimized with unary +)
-function parse_floats(line) {
-    return parse_number_tokens(line).map((part) => +part);
-}
+const parse_floats = (line) => parse_number_tokens(line).map((part) => +part);
 // Parse whitespace-separated integers from a line
-function parse_ints(line) {
-    return parse_number_tokens(line).map((part) => parseInt(part, 10));
-}
+const parse_ints = (line) => parse_number_tokens(line).map((part) => parseInt(part, 10));
 // Parse BXSF (Band-XSF) format used by XCrySDen, Quantum ESPRESSO, etc.
 // Format specification: http://www.xcrysden.org/doc/XSF.html
 function parse_bxsf(content) {
@@ -304,12 +300,12 @@ function parse_fermi_json(content) {
         return data.fermi_surface;
     }
     if (data.band_structure?.energies || data.bands?.energies) {
-        const bs = data.band_structure || data.bands;
+        const bs = data.band_structure ?? data.bands;
         return {
             energies: bs.energies,
-            k_grid: bs.k_grid || bs.kgrid,
-            k_lattice: bs.k_lattice || bs.reciprocal_lattice,
-            fermi_energy: bs.fermi_energy || bs.efermi || 0,
+            k_grid: bs.k_grid ?? bs.kgrid,
+            k_lattice: bs.k_lattice ?? bs.reciprocal_lattice,
+            fermi_energy: bs.fermi_energy ?? bs.efermi ?? 0,
             n_bands: bs.n_bands || bs.nbands || bs.energies[0]?.length || 0,
             n_spins: bs.n_spins || bs.nspins || bs.energies.length || 1,
         };
@@ -412,7 +408,7 @@ function parse_ifermi_surface(data) {
         }
     }
     // Compute total surface area
-    const total_area = isosurfaces.reduce((sum, iso) => sum + (iso.area || 0), 0);
+    const total_area = isosurfaces.reduce((sum, iso) => sum + (iso.area ?? 0), 0);
     return {
         isosurfaces,
         k_lattice,
@@ -482,7 +478,7 @@ export function parse_fermi_file(content, filename) {
     // FRMSF format detection (starts with grid dimensions)
     const first_line = trimmed.split(/\r?\n/)[0];
     const first_tokens = first_line.split(/\s+/).filter(Boolean);
-    if (first_tokens.length === 3 && first_tokens.every((t) => /^\d+$/.test(t))) {
+    if (first_tokens.length === 3 && first_tokens.every((token) => /^\d+$/.test(token))) {
         try {
             return parse_frmsf(content);
         }

package/dist/fermi-surface/types.d.ts

@@ -1,4 +1,4 @@
-import type { Matrix3x3, Vec3 } from '../math';
+import type { Matrix3x3, Point2D, Vec3 } from '../math';
 import type { TooltipConfig, TooltipProp } from '../tooltip';
 export type SpinChannel = `up` | `down` | null;
 export type RepresentationMode = `solid` | `wireframe` | `transparent`;
@@ -95,10 +95,7 @@ export interface FermiHoverData {
     spin: SpinChannel;
     position_cartesian: Vec3;
     position_fractional: Vec3 | null;
-    screen_position: {
-        x: number;
-        y: number;
-    };
+    screen_position: Point2D;
     surface_color?: string;
     property_value?: number;
     property_name?: string;

package/dist/heatmap-matrix/HeatmapMatrix.svelte

@@ -4,6 +4,7 @@
   import { format_num } from '../labels'
   import type { AxisConfig } from '../plot'
   import ColorBar from '../plot/ColorBar.svelte'
+  import { make_change_detector } from '../utils'
   import * as d3_sc from 'd3-scale-chromatic'
   import { type ComponentProps, onDestroy, onMount, type Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
@@ -212,6 +213,7 @@
   // === Value resolution ===
   let x_keys = $derived(x_items.map((item) => item.key ?? item.label))
   let y_keys = $derived(y_items.map((item) => item.key ?? item.label))
+  let interaction_axis_signature = $derived(JSON.stringify([x_keys, y_keys]))
   let highlight_x_key_set = $derived(new SvelteSet(highlight_x_keys))
   let highlight_y_key_set = $derived(new SvelteSet(highlight_y_keys))
   let search_query_norm = $derived(search_query.trim().toLowerCase())
@@ -577,9 +579,8 @@
     return vis_y.slice(start_pos, end_pos)
   })
 
-  function is_selected_cell(x_idx: number, y_idx: number): boolean {
-    return selected_cell_key_set.has(cell_pos_key(x_idx, y_idx))
-  }
+  const is_selected_cell = (x_idx: number, y_idx: number): boolean =>
+    selected_cell_key_set.has(cell_pos_key(x_idx, y_idx))
 
   let vis_x_pos_map = $derived.by(() => {
     const position_map = new SvelteMap<number, number>()
@@ -1086,6 +1087,23 @@
 
   // Tooltip state: only used for custom tooltip snippets (function tooltips)
   let tooltip_cell: CellContext | null = $state(null)
+  const axis_changed = make_change_detector()
+  $effect(() => {
+    if (!axis_changed(interaction_axis_signature)) return
+    cancel_raf(active_cell_raf)
+    // Cancel delayed clicks before old cell coordinates can fire on new axes.
+    clear_pending_click()
+    active_cell = null
+    pinned_cell = null
+    selected_cells = []
+    last_selected_cell = null
+    brush_start = null
+    brush_end = null
+    last_hover_x = -1
+    last_hover_y = -1
+    tooltip_cell = null
+    tooltip_div?.classList.remove(`visible`)
+  })
 
   onMount(() => {
     update_viewport_state()

package/dist/heatmap-matrix/index.js

@@ -33,15 +33,15 @@ export function matrix_to_rows(x_items, y_items, values) {
         return row;
     });
 }
+function escape_csv_field(value) {
+    const field = String(value ?? ``);
+    if (!/[",\n\r]/.test(field))
+        return field;
+    return `"${field.replaceAll(`"`, `""`)}"`;
+}
 export function rows_to_csv(rows) {
     if (!rows.length)
         return ``;
-    const escape_csv_field = (value) => {
-        const field = String(value ?? ``);
-        if (!/[",\n\r]/.test(field))
-            return field;
-        return `"${field.replaceAll(`"`, `""`)}"`;
-    };
     const headers = Object.keys(rows[0]);
     const lines = [
         headers.map((header) => escape_csv_field(header)).join(`,`),

package/dist/io/decompress.d.ts

@@ -1,4 +1,5 @@
-import { COMPRESSION_EXTENSIONS, COMPRESSION_FORMATS } from '../constants';
+import type { COMPRESSION_EXTENSIONS } from '../constants';
+import { COMPRESSION_FORMATS } from '../constants';
 export type CompressionFormat = keyof typeof COMPRESSION_FORMATS;
 export type CompressionExtension = (typeof COMPRESSION_EXTENSIONS)[number];
 export declare function detect_compression_format(filename: string): CompressionFormat | null;

package/dist/io/decompress.js

@@ -1,4 +1,4 @@
-import { COMPRESSION_EXTENSIONS, COMPRESSION_EXTENSIONS_REGEX, COMPRESSION_FORMATS, } from '../constants';
+import { COMPRESSION_EXTENSIONS_REGEX, COMPRESSION_FORMATS } from '../constants';
 export function detect_compression_format(filename) {
     const lower = filename.toLowerCase();
     for (const [format, extensions] of Object.entries(COMPRESSION_FORMATS)) {

package/dist/io/export.js

@@ -91,7 +91,7 @@ export function export_canvas_as_png(canvas, structure_or_filename, png_dpi = 15
 // Helper to ensure font-family is set on SVG root
 function set_svg_font_family(svg) {
     const style = svg.getAttribute(`style`) || ``;
-    if (!/font-family/.test(style)) {
+    if (!style.includes(`font-family`)) {
         svg.setAttribute(`style`, `${style}${style ? `;` : ``}font-family:sans-serif;`);
     }
     // Also set as attribute for extra robustness

package/dist/io/index.d.ts

@@ -3,5 +3,5 @@ export * from './export';
 export * from './fetch';
 export * from './file-drop';
 export * from './is-binary';
-export * from './types';
+export type * from './types';
 export * from './url-drop';

package/dist/io/index.js

@@ -3,5 +3,4 @@ export * from './export';
 export * from './fetch';
 export * from './file-drop';
 export * from './is-binary';
-export * from './types';
 export * from './url-drop';

package/dist/io/url-drop.js

@@ -90,6 +90,7 @@ export async function load_from_url(url, callback) {
     // Skip Range requests for known text formats to avoid production server issues
     // Include VASP files that don't have extensions (POSCAR, XDATCAR, CONTCAR)
     const is_known_text = TEXT_EXTENSIONS.has(ext) || VASP_BASENAME_RE.test(url_basename);
+    let binary_callback_args;
     if (!is_known_text) {
         try {
             // Check for magic bytes only for unknown formats
@@ -102,7 +103,10 @@ export async function load_from_url(url, callback) {
                     const resp = await fetch(url);
                     if (!resp.ok)
                         throw new Error(`Fetch failed: ${resp.status}`);
-                    return callback(await resp.arrayBuffer(), extract_filename(resp.headers, url_basename));
+                    binary_callback_args = [
+                        await resp.arrayBuffer(),
+                        extract_filename(resp.headers, url_basename),
+                    ];
                 }
             }
         }
@@ -110,6 +114,8 @@ export async function load_from_url(url, callback) {
             // Fall through to text fetch if HEAD request fails
         }
     }
+    if (binary_callback_args)
+        return callback(...binary_callback_args);
     const resp = await fetch(url);
     if (!resp.ok)
         throw new Error(`Fetch failed: ${resp.status}`);

package/dist/isosurface/IsosurfaceControls.svelte

@@ -68,9 +68,7 @@
   <div class="pane-row compact-row">
     {#if volumes.length > 1}
       <label
-        {@attach tooltip({
-          content: `Select which volume to display (e.g. charge vs magnetization)`,
-        })}
+        {@attach tooltip({ content: `Select which volume to display (e.g. charge vs magnetization)` })}
       >
         <span>Volume:</span>
         <select bind:value={active_volume_idx}>
@@ -81,15 +79,13 @@
       </label>
     {/if}
     <label
-      {@attach tooltip({
-        content: `Number of isosurface shells at different density thresholds`,
-      })}
+      {@attach tooltip({ content: `Number of isosurface shells at different density thresholds` })}
     >
       <span>Layers:</span>
       <select
         value={n_layers}
         onchange={(event) =>
-        set_layer_count(Number((event.target as HTMLSelectElement).value))}
+        set_layer_count(Number(event.currentTarget.value))}
       >
         {#each [1, 2, 3, 4, 5] as count (count)}
           <option value={count}>{count}</option>
@@ -99,10 +95,7 @@
     <!-- Sync both settings.show_negative (single-layer fallback) and all layer entries
     so the toggle works consistently regardless of which mode is active -->
     <label
-      {@attach tooltip({
-        content:
-          `Show negative lobe at −isovalue (for orbitals, ESP, magnetization)`,
-      })}
+      {@attach tooltip({ content: `Show negative lobe at −isovalue (for orbitals, ESP, magnetization)` })}
     >
       <span>Neg. lobe</span>
       <input
@@ -111,7 +104,7 @@
         ? settings.layers?.some((layer) => layer.show_negative) ?? false
         : settings.show_negative}
         onchange={(event) => {
-          const checked = (event.target as HTMLInputElement).checked
+          const checked = event.currentTarget.checked
           settings.show_negative = checked
           if (settings.layers) {
             settings.layers = settings.layers.map((layer) => ({
@@ -143,7 +136,7 @@
           type="color"
           value={layer.color}
           onchange={(event) =>
-          update_layer(idx, { color: (event.target as HTMLInputElement).value })}
+          update_layer(idx, { color: event.currentTarget.value })}
         />
         <input
           type="range"
@@ -153,7 +146,7 @@
           value={layer.isovalue}
           oninput={(event) =>
           update_layer(idx, {
-            isovalue: Number((event.target as HTMLInputElement).value),
+            isovalue: Number(event.currentTarget.value),
           })}
           style="flex: 1; min-width: 60px"
         />
@@ -166,7 +159,7 @@
           value={layer.opacity}
           oninput={(event) =>
           update_layer(idx, {
-            opacity: Number((event.target as HTMLInputElement).value),
+            opacity: Number(event.currentTarget.value),
           })}
           style="width: 50px"
           title="Opacity: {format_num(layer.opacity, `.2f`)}"
@@ -176,9 +169,7 @@
   {:else}
     <!-- Single-layer: isovalue slider full width -->
     <label
-      {@attach tooltip({
-        content: `Density threshold — surface is drawn where grid values equal this`,
-      })}
+      {@attach tooltip({ content: `Density threshold — surface is drawn where grid values equal this` })}
     >
       <span>Isovalue:</span>
       <input
@@ -194,9 +185,7 @@
     <!-- Opacity + colors on one row -->
     <div class="pane-row compact-row">
       <label
-        {@attach tooltip({
-          content: `Surface transparency — lower values reveal inner structure`,
-        })}
+        {@attach tooltip({ content: `Surface transparency — lower values reveal inner structure` })}
       >
         <span>Opacity:</span>
         <input
@@ -226,10 +215,7 @@
 
   {#if volumes?.[active_volume_idx]?.periodic}
     <label
-      {@attach tooltip({
-        content:
-          `Extend isosurface beyond cell boundaries to close partial spheres (fraction of cell)`,
-      })}
+      {@attach tooltip({ content: `Extend isosurface beyond cell boundaries to close partial spheres (fraction of cell)` })}
     >
       Halo: {format_num(settings.halo, `.2f`)}
       <input

package/dist/isosurface/slice.js

@@ -2,6 +2,7 @@
 // crystallographic plane defined by Miller indices, using trilinear interpolation.
 import { reciprocal_lattice } from '../brillouin';
 import * as math from '../math';
+const safe_mod = (val, dim) => ((val % dim) + dim) % dim;
 // Trilinear interpolation of a scalar 3D grid at fractional coordinates.
 // Periodic grids wrap with modulo; non-periodic return 0 for out-of-bounds.
 export function trilinear_interpolate(grid, fx, fy, fz, periodic) {
@@ -19,7 +20,6 @@ export function trilinear_interpolate(grid, fx, fy, fz, periodic) {
         if (fx < 0 || fx > 1 || fy < 0 || fy > 1 || fz < 0 || fz > 1)
             return 0;
     }
-    const safe_mod = (val, dim) => ((val % dim) + dim) % dim;
     const x0 = periodic
         ? safe_mod(Math.floor(gx), nx)
         : Math.max(0, Math.min(Math.floor(gx), nx - 2));

package/dist/isosurface/types.js

@@ -34,6 +34,12 @@ export function grid_data_range(grid) {
     const abs_max = Math.max(Math.abs(min_val), Math.abs(max_val));
     return { min: min_val, max: max_val, abs_max, mean: count > 0 ? sum / count : 0 };
 }
+const wrap_grid_idx = (val, size) => ((val % size) + size) % size;
+const clamp_dim = (src, fac) => Math.min(src, Math.max(2, Math.ceil(src / fac)));
+const partition_ranges = (n_out, n_src) => Array.from({ length: n_out }, (_, idx) => [
+    Math.round((idx * n_src) / n_out),
+    Math.round(((idx + 1) * n_src) / n_out),
+]);
 // Pad a periodic 3D grid with halo cells from the opposite face so isosurfaces
 // extend beyond the unit cell and close into complete enclosed shapes.
 // Returns a larger grid with dims [nx+2*pad, ny+2*pad, nz+2*pad] and the
@@ -49,16 +55,15 @@ export function pad_periodic_grid(grid, dims, pad_fraction) {
     const out_nx = nx + 2 * px;
     const out_ny = ny + 2 * py;
     const out_nz = nz + 2 * pz;
-    const wrap = (val, size) => ((val % size) + size) % size;
     const out = Array(out_nx);
     for (let ix = 0; ix < out_nx; ix++) {
         const plane = Array(out_ny);
-        const src_x = wrap(ix - px, nx);
+        const src_x = wrap_grid_idx(ix - px, nx);
         for (let iy = 0; iy < out_ny; iy++) {
             const row = Array(out_nz);
-            const src_y = wrap(iy - py, ny);
+            const src_y = wrap_grid_idx(iy - py, ny);
             for (let iz = 0; iz < out_nz; iz++) {
-                row[iz] = grid[src_x][src_y][wrap(iz - pz, nz)];
+                row[iz] = grid[src_x][src_y][wrap_grid_idx(iz - pz, nz)];
             }
             plane[iy] = row;
         }
@@ -85,7 +90,6 @@ export function downsample_grid(grid, dims, max_points = MAX_GRID_POINTS) {
     // A single cbrt step can overshoot for anisotropic grids where max(2,...)
     // clamping prevents a small axis from shrinking below 2.
     // clamp_dim: returns 1 for single-cell axes, otherwise clamps to [2, src]
-    const clamp_dim = (src, fac) => Math.min(src, Math.max(2, Math.ceil(src / fac)));
     let factor = Math.ceil(Math.cbrt(total / max_points));
     let new_nx = clamp_dim(nx, factor);
     let new_ny = clamp_dim(ny, factor);
@@ -103,13 +107,9 @@ export function downsample_grid(grid, dims, max_points = MAX_GRID_POINTS) {
     // Proportional partitioning: evenly divides [0, n) into new_n non-empty blocks.
     // Unlike fixed-stride (ix * factor), this is safe when max(2,...) clamping
     // produces more output cells than ceil(n/factor) would — no empty blocks.
-    const partition = (n_out, n_src) => Array.from({ length: n_out }, (_, idx) => [
-        Math.round((idx * n_src) / n_out),
-        Math.round(((idx + 1) * n_src) / n_out),
-    ]);
-    const x_ranges = partition(new_nx, nx);
-    const y_ranges = partition(new_ny, ny);
-    const z_ranges = partition(new_nz, nz);
+    const x_ranges = partition_ranges(new_nx, nx);
+    const y_ranges = partition_ranges(new_ny, ny);
+    const z_ranges = partition_ranges(new_nz, nz);
     const out = Array(new_nx);
     for (let ix = 0; ix < new_nx; ix++) {
         const plane = Array(new_ny);

package/dist/labels.d.ts

@@ -5,7 +5,7 @@ import * as d3_symbols from 'd3-shape';
 export type D3Symbol = keyof typeof d3_symbols & `symbol${Capitalize<string>}`;
 export type D3SymbolName = Exclude<D3Symbol extends `symbol${infer Name}` ? Name : never, ``>;
 export declare const symbol_names: D3SymbolName[];
-export declare const symbol_map: Record<D3SymbolName, SymbolType>;
+export declare const symbol_map: Partial<Record<D3SymbolName, SymbolType>>;
 export declare function format_value(value: number, formatter?: string): string;
 export declare const ELEM_PROPERTY_LABELS: Partial<Record<keyof ChemicalElement, [string, string | null]>>;
 export declare const ELEM_HEATMAP_KEYS: (keyof ChemicalElement)[];

package/dist/labels.js

@@ -1,12 +1,14 @@
 import { format } from 'd3-format';
 import * as d3_symbols from 'd3-shape';
 import { timeFormat } from 'd3-time-format';
+const is_d3_symbol_name = (name) => Object.hasOwn(d3_symbols, `symbol${name}`);
 function name_for_symbol(sym) {
-    for (const key in d3_symbols) {
-        if (Object.prototype.hasOwnProperty.call(d3_symbols, key) &&
-            d3_symbols[key] === sym &&
-            /^symbol[A-Z]/.test(key))
-            return key.substring(6);
+    for (const [key, symbol] of Object.entries(d3_symbols)) {
+        if (symbol === sym && /^symbol[A-Z]/.test(key)) {
+            const name = key.substring(6);
+            if (is_d3_symbol_name(name))
+                return name;
+        }
     }
     return null;
 }
@@ -81,7 +83,7 @@ export const ELEM_HEATMAP_KEYS = [
 export const ELEM_HEATMAP_LABELS = Object.fromEntries(ELEM_HEATMAP_KEYS.map((key) => {
     const [label, unit] = ELEM_PROPERTY_LABELS[key] ?? [];
     if (!label)
-        throw `Unexpected missing label ${label}`;
+        throw new Error(`Unexpected missing label for element property ${key}`);
     return [label + (unit ? ` (${unit})` : ``), key];
 }));
 // Allow users to import DEFAULT_FMT and change its items in place to
@@ -134,18 +136,18 @@ export const format_bytes = (bytes) => {
 export function format_fractional(value) {
     if (!Number.isFinite(value))
         return String(value);
-    const x = ((value % 1) + 1) % 1; // wrap into [0,1)
+    const wrapped_value = ((value % 1) + 1) % 1; // wrap into [0,1)
     const eps = 1e-3;
     for (const [target, glyph] of FRACTION_GLYPHS) {
         if (target === 0) {
-            if (Math.abs(x - target) <= eps)
+            if (Math.abs(wrapped_value - target) <= eps)
                 return glyph;
         }
-        else if (Math.abs(x - target) < eps)
+        else if (Math.abs(wrapped_value - target) < eps)
             return glyph;
     }
     for (const [target, glyph] of FRACTION_GLYPHS) {
-        if (target !== 0 && Math.abs(1 - x - target) < eps)
+        if (target !== 0 && Math.abs(1 - wrapped_value - target) < eps)
             return glyph;
     }
     return format_num(value, `.4~`);
@@ -216,6 +218,7 @@ export const SUPERSCRIPT_MAP = {
     '+': `⁺`,
     '-': `⁻`,
 };
+const is_superscript_key = (key) => key in SUPERSCRIPT_MAP;
 export const SUBSCRIPT_MAP = {
     '0': `₀`,
     '1': `₁`,
@@ -229,7 +232,7 @@ export const SUBSCRIPT_MAP = {
     '9': `₉`,
 };
 // replaces all signs and digits with their unicode superscript equivalent
-export const superscript_digits = (input) => input.replace(/[\d+-]/g, (match) => SUPERSCRIPT_MAP[match] ?? match);
+export const superscript_digits = (input) => input.replace(/[\d+-]/g, (match) => is_superscript_key(match) ? SUPERSCRIPT_MAP[match] : match);
 // Trajectory property configuration: clean labels and units as structured data
 export const trajectory_property_config = {
     // Energy properties

package/dist/layout/InfoTag.svelte

@@ -49,10 +49,12 @@
     else void copy_to_clipboard()
   }
 
-  function handle_keydown(event: KeyboardEvent): void {
+  function handle_keydown(
+    event: KeyboardEvent & { currentTarget: HTMLElement },
+  ): void {
     if (disabled || (event.key !== `Enter` && event.key !== ` `)) return
     event.preventDefault()
-    ;(event.currentTarget as HTMLElement)?.click()
+    event.currentTarget.click()
   }
 
   function handle_remove(event: MouseEvent): void {
@@ -66,8 +68,8 @@
   tabindex={disabled ? -1 : 0}
   onclick={handle_click}
   onkeydown={handle_keydown}
-  {title}
-  {@attach tooltip()}
+  title={sanitize_html(title)}
+  {@attach tooltip({ allow_html: true })}
   class="info-tag {variant} {size}"
   class:disabled
   aria-disabled={disabled}

package/dist/layout/PropertyFilter.svelte

@@ -56,10 +56,12 @@
     return histogram_data.filter((val) => val >= min && val <= max)
   })
 
-  function onkeydown(event: KeyboardEvent): void {
+  function onkeydown(
+    event: KeyboardEvent & { currentTarget: HTMLInputElement },
+  ): void {
     if (event.key === `Enter`) {
       event.preventDefault()
-      ;(event.target as HTMLInputElement).blur()
+      event.currentTarget.blur()
     } else if (event.key === `Escape` && active) {
       event.preventDefault()
       clear_filter()

package/dist/layout/json-tree/JsonTree.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '../../Icon.svelte'
   import { download } from '../../io/fetch'
+  import { make_change_detector } from '../../utils'
   import { setContext, tick } from 'svelte'
   import { highlight_matches, tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
@@ -89,24 +90,31 @@
   // Copy feedback positioning (null = use default corner position)
   let copy_feedback_pos = $state<{ x: number; y: number } | null>(null)
 
-  // Clear stale path-based state when value changes
-  let prev_value_ref: unknown
+  const value_changed = make_change_detector()
   $effect.pre(() => {
-    if (prev_value_ref !== undefined && value !== prev_value_ref) {
-      force_expanded.clear()
-      pinned_paths = new SvelteSet()
-      selected_paths = new SvelteSet()
-      last_selected_path = null
-    }
-    prev_value_ref = value
+    if (!value_changed(value)) return
+    focused_path = null
+    registered_paths_set = new Set()
+    registered_paths_list = []
+    copy_feedback_path = null
+    copy_feedback_error = false
+    context_menu_state = null
+    force_expanded = new SvelteSet()
+    const valid_paths = new SvelteSet(collect_all_paths(value, root_label ?? ``))
+    collapsed_paths = new SvelteSet([...collapsed_paths].filter((path) => valid_paths.has(path)))
+    pinned_paths = new SvelteSet()
+    selected_paths = new SvelteSet()
+    last_selected_path = null
+    current_match_index = -1
+    prev_values.clear()
+    if (search_query) queueMicrotask(() => expand_to_matches())
   })
 
   // Debounce search input
   let search_debounce_timeout: ReturnType<typeof setTimeout> | undefined
 
-  function handle_search_input(event: Event) {
-    const input = event.target as HTMLInputElement
-    search_input_value = input.value
+  function handle_search_input(event: Event & { currentTarget: HTMLInputElement }) {
+    search_input_value = event.currentTarget.value
 
     if (search_debounce_timeout) clearTimeout(search_debounce_timeout)
     search_debounce_timeout = setTimeout(() => {
@@ -209,7 +217,7 @@
   }
 
   // Previous values map for change detection
-  const previous_values = new Map<string, unknown>()
+  const prev_values = new Map<string, unknown>()
 
   // Toggle collapse - tracks force_expanded to override auto-fold thresholds
   function toggle_collapse(path: string, is_currently_collapsed: boolean): void {
@@ -471,7 +479,7 @@
     get focused_path() {
       return focused_path
     },
-    previous_values,
+    prev_values,
     toggle_collapse,
     toggle_collapse_recursive,
     expand_all,

package/dist/layout/json-tree/JsonValue.svelte

@@ -39,7 +39,7 @@
   $effect(() => {
     if (!ctx?.settings.highlight_changes) return
 
-    const prev = ctx.previous_values.get(path)
+    const prev = ctx.prev_values.get(path)
     if (prev !== undefined && !values_equal(prev, value)) {
       just_changed = true
       if (change_timeout) clearTimeout(change_timeout)
@@ -47,7 +47,7 @@
         just_changed = false
       }, 1000)
     }
-    ctx.previous_values.set(path, value)
+    ctx.prev_values.set(path, value)
 
     return () => {
       if (change_timeout) clearTimeout(change_timeout)

package/dist/layout/json-tree/types.d.ts

@@ -1,3 +1,4 @@
+import type { GhostEntry } from './utils';
 export type JsonValueType = `string` | `number` | `boolean` | `null` | `undefined` | `object` | `array` | `date` | `regexp` | `map` | `set` | `symbol` | `bigint` | `error` | `function` | `circular`;
 export interface JsonTreeProps {
     value: unknown;
@@ -37,7 +38,7 @@ export interface JsonTreeContext {
     search_matches: Set<string>;
     current_match_path: string | null;
     focused_path: string | null;
-    previous_values: Map<string, unknown>;
+    prev_values: Map<string, unknown>;
     toggle_collapse: (path: string, is_currently_collapsed: boolean) => void;
     toggle_collapse_recursive: (path: string, collapse: boolean) => void;
     expand_all: () => void;
@@ -55,7 +56,7 @@ export interface JsonTreeContext {
     toggle_select: (path: string, shift: boolean) => void;
     copy_selected: () => void;
     diff_map: Map<string, DiffEntry> | null;
-    ghost_map: Map<string, import('./utils').GhostEntry[]>;
+    ghost_map: Map<string, GhostEntry[]>;
     collapse_children_only: (path: string) => void;
     onchange?: (path: string, new_value: unknown, old_value: unknown) => void;
 }

package/dist/layout/json-tree/types.js

@@ -1,3 +1,2 @@
-// JSON Tree component types
 // Context key for Svelte's setContext/getContext
 export const JSON_TREE_CONTEXT_KEY = Symbol(`json-tree-context`);

package/dist/layout/json-tree/utils.d.ts

@@ -1,8 +1,8 @@
 import type { DiffEntry, JsonValueType } from './types';
 export declare function get_value_type(value: unknown): JsonValueType;
-export declare function is_expandable_type(value_type: JsonValueType): boolean;
-export declare function is_primitive_type(value_type: JsonValueType): boolean;
-export declare function is_expandable(value: unknown): boolean;
+export declare const is_expandable_type: (value_type: JsonValueType) => boolean;
+export declare const is_primitive_type: (value_type: JsonValueType) => boolean;
+export declare const is_expandable: (value: unknown) => boolean;
 export declare function get_child_count(value: unknown): number;
 export declare function format_path(segments: (string | number)[]): string;
 export declare function build_path(parent_path: string, key: string | number): string;
@@ -16,7 +16,7 @@ export declare function parse_path(path: string): (string | number)[];
 export declare function values_equal(val_a: unknown, val_b: unknown): boolean;
 export declare function parse_edited_value(text: string): unknown;
 export declare function set_at_path(root: unknown, path_str: string, new_value: unknown, root_label?: string): unknown;
-export declare function is_url(str: string): boolean;
+export declare const is_url: (str: string) => boolean;
 export declare function is_css_color(str: string): boolean;
 export declare function estimate_byte_size(value: unknown, max_depth?: number, current_depth?: number): number;
 export interface GhostEntry {