matterviz 0.3.2 → 0.3.3

package/dist/structure/Structure.svelte

@@ -1,911 +1,1176 @@
-<script lang="ts">import { ELEMENT_COLOR_SCHEMES } from '../colors';
-import { normalize_show_controls } from '../controls';
-import { StatusMessage } from '../feedback';
-import Spinner from '../feedback/Spinner.svelte';
-import Icon from '../Icon.svelte';
-import { create_file_drop_handler, load_from_url } from '../io';
-import { parse_volumetric_file } from '../isosurface/parse';
-import { auto_isosurface_settings, DEFAULT_ISOSURFACE_SETTINGS, } from '../isosurface/types';
-import { ELEM_SYMBOLS } from '../labels';
-import { set_fullscreen_bg, toggle_fullscreen } from '../layout';
-import { create_cart_to_frac, create_frac_to_cart } from '../math';
-import { DEFAULTS } from '../settings';
-import { colors } from '../state.svelte';
-import { get_element_counts, get_pbc_image_sites, get_site_vector, } from './';
-import { wrap_to_unit_cell } from './pbc';
-import { is_valid_supercell_input, make_supercell } from './supercell';
-import * as symmetry from '../symmetry';
-import { transform_cell } from '../symmetry';
-import { Canvas } from '@threlte/core';
-import { untrack } from 'svelte';
-import { click_outside, tooltip } from 'svelte-multiselect';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-import { get_property_colors } from './atom-properties';
-import AtomLegend from './AtomLegend.svelte';
-import CellSelect from './CellSelect.svelte';
-import { MAX_SELECTED_SITES } from './measure';
-import { normalize_fractional_coords, parse_any_structure } from './parse';
-import StructureControls from './StructureControls.svelte';
-import StructureExportPane from './StructureExportPane.svelte';
-import StructureInfoPane from './StructureInfoPane.svelte';
-import StructureScene from './StructureScene.svelte';
-// Local reactive state for scene and lattice props. Deeply reactive so nested mutations propagate.
-// Deep-clone to prevent mutations from leaking to global defaults across component instances.
-let scene_props = $state(structuredClone(DEFAULTS.structure));
-let lattice_props = $state({
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import { ELEMENT_COLOR_SCHEMES } from '../colors'
+  import type { ShowControlsProp } from '../controls'
+  import { normalize_show_controls } from '../controls'
+  import type { ElementSymbol } from '../element'
+  import { StatusMessage } from '../feedback'
+  import Spinner from '../feedback/Spinner.svelte'
+  import Icon from '../Icon.svelte'
+  import { create_file_drop_handler, load_from_url } from '../io'
+  import { parse_volumetric_file } from '../isosurface/parse'
+  import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types'
+  import {
+    auto_isosurface_settings,
+    DEFAULT_ISOSURFACE_SETTINGS,
+    tile_volumetric_data,
+  } from '../isosurface/types'
+  import { ELEM_SYMBOLS } from '../labels'
+  import { set_fullscreen_bg, toggle_fullscreen } from '../layout'
+  import type { Vec3 } from '../math'
+  import { create_cart_to_frac, create_frac_to_cart } from '../math'
+  import { DEFAULTS } from '../settings'
+  import { sanitize_html } from '../sanitize'
+  import { colors } from '../state.svelte'
+  import type { AnyStructure, Crystal, MeasureMode } from './'
+  import {
+    default_vector_configs,
+    get_element_counts,
+    get_pbc_image_sites,
+    get_structure_vector_keys,
+  } from './'
+  import { wrap_to_unit_cell } from './pbc'
+  import {
+    is_valid_supercell_input,
+    make_supercell,
+    parse_supercell_scaling,
+  } from './supercell'
+  import type { CellType, SymmetrySettings } from '../symmetry'
+  import * as symmetry from '../symmetry'
+  import { transform_cell } from '../symmetry'
+  import type { MoyoDataset } from '@spglib/moyo-wasm'
+  import { Canvas } from '@threlte/core'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import { untrack } from 'svelte'
+  import { click_outside, tooltip } from 'svelte-multiselect'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+  import type { Camera, OrthographicCamera, Scene } from 'three'
+  import type { AtomColorConfig } from './atom-properties'
+  import { get_property_colors } from './atom-properties'
+  import AtomLegend from './AtomLegend.svelte'
+  import CellSelect from './CellSelect.svelte'
+  import type { StructureHandlerData } from './index'
+  import { MAX_SELECTED_SITES } from './measure'
+  import { normalize_fractional_coords, parse_any_structure } from './parse'
+  import StructureControls from './StructureControls.svelte'
+  import StructureExportPane from './StructureExportPane.svelte'
+  import StructureInfoPane from './StructureInfoPane.svelte'
+  import StructureScene from './StructureScene.svelte'
+
+  // Type alias for event handlers to reduce verbosity
+  type EventHandler = (data: StructureHandlerData) => void
+
+  // Local reactive state for scene and lattice props. Deeply reactive so nested mutations propagate.
+  // Deep-clone to prevent mutations from leaking to global defaults across component instances.
+  let scene_props = $state(
+    structuredClone(DEFAULTS.structure) as typeof DEFAULTS.structure & {
+      camera_target?: Vec3
+    },
+  )
+  let lattice_props = $state({
     cell_edge_opacity: DEFAULTS.structure.cell_edge_opacity,
     cell_surface_opacity: DEFAULTS.structure.cell_surface_opacity,
     cell_edge_color: DEFAULTS.structure.cell_edge_color,
     cell_surface_color: DEFAULTS.structure.cell_surface_color,
     cell_edge_width: DEFAULTS.structure.cell_edge_width,
     show_cell_vectors: DEFAULTS.structure.show_cell_vectors,
-});
-let { structure = $bindable(), scene_props: scene_props_in = $bindable(), lattice_props: lattice_props_in = $bindable(), controls_open = $bindable(false), info_pane_open = $bindable(false), enable_measure_mode = $bindable(true), measure_mode = $bindable(`distance`), background_color = $bindable(), background_opacity = $bindable(0.1), show_controls, fullscreen = $bindable(false), wrapper = $bindable(), width = $bindable(0), height = $bindable(0), reset_text = `Reset camera (or double-click)`, color_scheme = $bindable(`Vesta`), atom_color_config = $bindable({
-    mode: DEFAULTS.structure.atom_color_mode,
-    scale: DEFAULTS.structure.atom_color_scale,
-    scale_type: DEFAULTS.structure.atom_color_scale_type,
-}), hovered = $bindable(false), dragover = $bindable(false), allow_file_drop = true, enable_info_pane = true, png_dpi = $bindable(150), show_image_atoms = $bindable(true), supercell_scaling = $bindable(`1x1x1`), fullscreen_toggle = DEFAULTS.structure.fullscreen_toggle, bottom_left, data_url, structure_string, on_file_drop, spinner_props = {}, loading = $bindable(false), error_msg = $bindable(), performance_mode = $bindable(`quality`), 
-// expose selected site indices for external control/highlighting
-selected_sites = $bindable([]), 
-// expose measured site indices for overlays/labels
-measured_sites = $bindable([]), 
-// expose the displayed structure (with image atoms and supercell) for external use
-displayed_structure = $bindable(), 
-// Track hidden elements across component lifecycle
-hidden_elements = $bindable(new SvelteSet()), 
-// Track hidden property values (e.g. Wyckoff positions, coordination numbers)
-hidden_prop_vals = $bindable(new SvelteSet()), 
-// Per-element radius overrides (absolute values in Angstroms)
-element_radius_overrides = $bindable({}), 
-// Per-site radius overrides (absolute values in Angstroms)
-site_radius_overrides = $bindable(new SvelteMap()), 
-// Symmetry analysis data (bindable for external access)
-sym_data = $bindable(null), 
-// Symmetry analysis settings (bindable for external control)
-symmetry_settings = $bindable(symmetry.default_sym_settings), 
-// Map element symbols to different elements (e.g. {'H': 'Na', 'He': 'Cl'})
-// Useful for LAMMPS files where atom types are mapped to H, He, Li by default
-element_mapping = $bindable(), 
-// Cell type: original, conventional, or primitive (requires symmetry analysis)
-cell_type = $bindable(`original`), 
-// Volumetric data for isosurface rendering (parsed from CHGCAR or .cube files)
-volumetric_data = $bindable(), 
-// Isosurface rendering settings
-isosurface_settings = $bindable({
-    ...DEFAULT_ISOSURFACE_SETTINGS,
-}), 
-// Active volume index when multiple volumes are present
-active_volume_idx = $bindable(0), children, top_right_controls, on_file_load, on_error, on_fullscreen_change, on_camera_move, on_camera_reset, ...rest } = $props();
-// Initialize models from incoming props; mutations come from UI controls; we mirror into local dicts (NOTE only doing shallow merge)
-$effect.pre(() => {
+  })
+
+  let {
+    structure = $bindable(),
+    scene_props: scene_props_in = $bindable(),
+    lattice_props: lattice_props_in = $bindable(),
+    controls_open = $bindable(false),
+    info_pane_open = $bindable(false),
+    enable_measure_mode = $bindable(true),
+    measure_mode = $bindable<MeasureMode>(`distance`),
+    background_color = $bindable(),
+    background_opacity = $bindable(0.1),
+    show_controls,
+    fullscreen = $bindable(false),
+    wrapper = $bindable(),
+    width = $bindable(0),
+    height = $bindable(0),
+    reset_text = `Reset camera (or double-click)`,
+    color_scheme = $bindable(`Vesta`),
+    atom_color_config = $bindable({
+      mode: DEFAULTS.structure.atom_color_mode,
+      scale: DEFAULTS.structure.atom_color_scale,
+      scale_type: DEFAULTS.structure.atom_color_scale_type,
+    }),
+    hovered = $bindable(false),
+    dragover = $bindable(false),
+    allow_file_drop = true,
+    enable_info_pane = true,
+    png_dpi = $bindable(150),
+    show_image_atoms = $bindable(true),
+    supercell_scaling = $bindable(`1x1x1`),
+    fullscreen_toggle = DEFAULTS.structure.fullscreen_toggle,
+    bottom_left,
+    data_url,
+    structure_string,
+    on_file_drop,
+    spinner_props = {},
+    loading = $bindable(false),
+    error_msg = $bindable(),
+    performance_mode = $bindable(`quality`),
+    // expose selected site indices for external control/highlighting
+    selected_sites = $bindable([]),
+    // expose measured site indices for overlays/labels
+    measured_sites = $bindable([]),
+    // expose the displayed structure (with image atoms and supercell) for external use
+    displayed_structure = $bindable(),
+    // Track hidden elements across component lifecycle
+    hidden_elements = $bindable(new SvelteSet<ElementSymbol>()),
+    // Track hidden property values (e.g. Wyckoff positions, coordination numbers)
+    hidden_prop_vals = $bindable(new SvelteSet<number | string>()),
+    // Per-element radius overrides (absolute values in Angstroms)
+    element_radius_overrides = $bindable<Partial<Record<ElementSymbol, number>>>({}),
+    // Per-site radius overrides (absolute values in Angstroms)
+    site_radius_overrides = $bindable<SvelteMap<number, number>>(new SvelteMap()),
+    // Symmetry analysis data (bindable for external access)
+    sym_data = $bindable(null),
+    // Symmetry analysis settings (bindable for external control)
+    symmetry_settings = $bindable(symmetry.default_sym_settings),
+    // Map element symbols to different elements (e.g. {'H': 'Na', 'He': 'Cl'})
+    // Useful for LAMMPS files where atom types are mapped to H, He, Li by default
+    element_mapping = $bindable(),
+    // Cell type: original, conventional, or primitive (requires symmetry analysis)
+    cell_type = $bindable(`original`),
+    // Volumetric data for isosurface rendering (parsed from CHGCAR or .cube files)
+    volumetric_data = $bindable<VolumetricData[]>(),
+    // Isosurface rendering settings
+    isosurface_settings = $bindable<IsosurfaceSettings>({
+      ...DEFAULT_ISOSURFACE_SETTINGS,
+    }),
+    // Active volume index when multiple volumes are present
+    active_volume_idx = $bindable(0),
+    children,
+    top_right_controls,
+    on_file_load,
+    on_error,
+    on_fullscreen_change,
+    on_camera_move,
+    on_camera_reset,
+    ...rest
+  }:
+    & {
+      structure?: AnyStructure
+      scene_props?: ComponentProps<typeof StructureScene>
+      /**
+       * Controls visibility configuration.
+       * - 'always': controls always visible
+       * - 'hover': controls visible on component hover (default)
+       * - 'never': controls never visible
+       * - object: { mode, hidden, style } for fine-grained control
+       *
+       * Control names: 'reset-camera', 'fullscreen', 'measure-mode', 'info-pane', 'export-pane', 'controls'
+       */
+      show_controls?: ShowControlsProp
+      fullscreen?: boolean
+      // bindable width of the canvas
+      width?: number
+      // bindable height of the canvas
+      height?: number
+      // Canvas wrapper element (for export pane)
+      wrapper?: HTMLDivElement
+      // PNG export DPI setting
+      png_dpi?: number
+      reset_text?: string
+      hovered?: boolean
+      dragover?: boolean
+      allow_file_drop?: boolean
+      enable_info_pane?: boolean
+      enable_measure_mode?: boolean
+      measure_mode?: MeasureMode
+      info_pane_open?: boolean
+      fullscreen_toggle?: Snippet<[{ fullscreen: boolean }]> | boolean
+      bottom_left?: Snippet<[{ structure?: AnyStructure }]>
+      top_right_controls?: Snippet // Additional controls to render at the end of the control buttons row
+      data_url?: string // URL to load structure from (alternative to providing structure directly)
+      // Generic callback for when files are dropped - receives raw content and filename
+      on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
+      // spinner props (passed to Spinner component)
+      spinner_props?: ComponentProps<typeof Spinner>
+      loading?: boolean
+      error_msg?: string
+      // Performance mode: 'quality' (default) or 'speed' for large structures
+      performance_mode?: `quality` | `speed`
+      // allow parent components to control highlighted/selected site indices
+      selected_sites?: number[]
+      // explicit measured sites for distance/angle overlays
+      measured_sites?: number[]
+      // expose the displayed structure (with image atoms and/or supercell) for external use
+      displayed_structure?: AnyStructure
+      // Track which elements are hidden (bindable across frames in trajectories)
+      hidden_elements?: Set<ElementSymbol>
+      // Track which property values are hidden (e.g. Wyckoff positions, coordination numbers)
+      hidden_prop_vals?: Set<number | string>
+      // Per-element radius overrides (absolute values in Angstroms)
+      element_radius_overrides?: Partial<Record<ElementSymbol, number>>
+      // Per-site radius overrides (absolute values in Angstroms)
+      // Accepts Map or SvelteMap for flexibility with external callers
+      site_radius_overrides?: Map<number, number> | SvelteMap<number, number>
+      // Symmetry analysis data (bindable for external access)
+      sym_data?: MoyoDataset | null
+      // Symmetry analysis settings (bindable for external control)
+      symmetry_settings?: Partial<SymmetrySettings>
+      // Map element symbols to different elements (e.g. {'H': 'Na', 'He': 'Cl'})
+      element_mapping?: Partial<Record<ElementSymbol, ElementSymbol>>
+      // Cell type: original, conventional, or primitive (requires symmetry analysis)
+      cell_type?: CellType
+      // Volumetric data for isosurface rendering (parsed from CHGCAR or .cube files)
+      volumetric_data?: VolumetricData[]
+      // Isosurface rendering settings
+      isosurface_settings?: IsosurfaceSettings
+      // Active volume index when multiple volumes are present
+      active_volume_idx?: number
+      // structure content as string (alternative to providing structure directly or via data_url)
+      structure_string?: string
+      // Atom coloring configuration
+      atom_color_config?: Partial<AtomColorConfig>
+      children?: Snippet<[{ structure?: AnyStructure; fullscreen: boolean }]>
+      on_file_load?: EventHandler
+      on_error?: EventHandler
+      on_fullscreen_change?: EventHandler
+      on_camera_move?: EventHandler
+      on_camera_reset?: EventHandler
+    }
+    & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`>
+    & Omit<HTMLAttributes<HTMLDivElement>, `children`> = $props()
+
+  // Initialize models from incoming props; mutations come from UI controls; we mirror into local dicts (NOTE only doing shallow merge)
+  $effect.pre(() => {
     if (scene_props_in && typeof scene_props_in === `object`) {
-        Object.assign(scene_props, scene_props_in);
+      Object.assign(scene_props, scene_props_in)
     }
     if (lattice_props_in && typeof lattice_props_in === `object`) {
-        Object.assign(lattice_props, lattice_props_in);
+      Object.assign(lattice_props, lattice_props_in)
     }
-});
-// Load structure from URL when data_url is provided
-$effect(() => {
+  })
+
+  // Load structure from URL when data_url is provided
+  $effect(() => {
     if (data_url && !structure) {
-        loading = true;
-        error_msg = undefined;
-        load_from_url(data_url, (content, filename) => {
-            if (on_file_drop)
-                on_file_drop(content, filename);
-            else {
-                // Parse structure internally when no handler provided
-                try {
-                    const text_content = content instanceof ArrayBuffer
-                        ? new TextDecoder().decode(content)
-                        : content;
-                    const parsed = parse_file_content(text_content, filename);
-                    emit_file_load_event(parsed, filename, content);
-                }
-                catch (error) {
-                    error_msg = `Failed to parse structure: ${error instanceof Error ? error.message : String(error)}`;
-                    on_error?.({ error_msg, filename });
-                }
-            }
-        })
-            .then(() => loading = false)
-            .catch((error) => {
-            console.error(`Failed to load structure from URL:`, error);
-            error_msg = `Failed to load structure: ${error.message}`;
-            loading = false;
-            on_error?.({ error_msg, filename: data_url });
-        });
-    }
-});
-$effect(() => {
-    if (!structure_string || data_url)
-        return;
-    loading = true;
-    error_msg = undefined;
-    try {
-        const parsed = parse_any_structure(structure_string, `string`);
-        if (parsed) {
-            structure = parsed;
-            untrack(() => emit_file_load_event(parsed, `string`, structure_string));
-        }
+      loading = true
+      error_msg = undefined
+
+      load_from_url(data_url, (content, filename) => {
+        if (on_file_drop) on_file_drop(content, filename)
         else {
-            throw new Error(`Failed to parse structure from string`);
+          // Parse structure internally when no handler provided
+          try {
+            const text_content = content instanceof ArrayBuffer
+              ? new TextDecoder().decode(content)
+              : content
+            const parsed = parse_file_content(text_content, filename)
+            emit_file_load_event(parsed, filename, content)
+          } catch (error) {
+            error_msg = `Failed to parse structure: ${
+              error instanceof Error ? error.message : String(error)
+            }`
+            on_error?.({ error_msg, filename })
+          }
         }
+      })
+        .then(() => loading = false)
+        .catch((error: Error) => {
+          console.error(`Failed to load structure from URL:`, error)
+          error_msg = `Failed to load structure: ${error.message}`
+          loading = false
+          on_error?.({ error_msg, filename: data_url })
+        })
     }
-    catch (err) {
-        error_msg = `Failed to parse structure from string: ${err instanceof Error ? err.message : String(err)}`;
-        untrack(() => on_error?.({ error_msg, filename: `string` }));
-    }
-    finally {
-        loading = false;
+  })
+
+  $effect(() => { // Parse structure from string when structure_string is provided
+    if (!structure_string || data_url) return
+    loading = true
+    error_msg = undefined
+    clear_camera_state()
+    try {
+      const parsed = parse_any_structure(structure_string, `string`)
+      if (parsed) {
+        structure = parsed
+        untrack(() => emit_file_load_event(parsed, `string`, structure_string))
+      } else {
+        throw new Error(`Failed to parse structure from string`)
+      }
+    } catch (err) {
+      error_msg = `Failed to parse structure from string: ${
+        err instanceof Error ? err.message : String(err)
+      }`
+      untrack(() => on_error?.({ error_msg, filename: `string` }))
+    } finally {
+      loading = false
     }
-});
-// Track if force vectors were auto-enabled to prevent repeated triggering
-let force_vectors_auto_enabled = $state(false);
-// Auto-enable force vectors when structure has vector data (force, magmom, or spin)
-$effect(() => {
-    if (structure?.sites && !force_vectors_auto_enabled) {
-        const has_vector_data = structure.sites.some((site) => get_site_vector(site) !== null);
-        if (!has_vector_data)
-            return;
-        if (!scene_props.show_force_vectors) {
-            scene_props.show_force_vectors = true;
-            scene_props.force_scale ??= DEFAULTS.structure.force_scale;
-            scene_props.force_color ??= DEFAULTS.structure.force_color;
-        }
-        force_vectors_auto_enabled = true;
+  })
+
+  // Auto-populate vector_configs when structure has vector data (force, magmom, spin, etc.)
+  // Skip if configs were externally provided. Clear auto-generated configs on structure change.
+  let vectors_auto_populated_for: AnyStructure | undefined = undefined
+  let last_auto_configs: Record<string, unknown> | undefined = undefined
+
+  $effect(() => {
+    if (!structure?.sites || structure === vectors_auto_populated_for) return
+    const keys = get_structure_vector_keys(structure)
+    // Clear auto-generated configs from previous structure; preserve externally-modified ones
+    const existing = scene_props.vector_configs
+    if (last_auto_configs && existing === last_auto_configs) {
+      scene_props.vector_configs = {}
+      last_auto_configs = undefined
+    } else if (existing && Object.keys(existing).length > 0) {
+      vectors_auto_populated_for = structure
+      return
     }
-});
-// Optimize scene props for performance based on structure size and mode
-$effect(() => {
+    vectors_auto_populated_for = structure
+    if (keys.length === 0) return
+    const configs = default_vector_configs(keys)
+    scene_props.vector_configs = configs
+    // Read back the proxied reference — Svelte 5 $state wraps objects in
+    // proxies, so `scene_props.vector_configs !== configs`. Storing the proxy
+    // lets the identity check above detect unmodified auto-configs.
+    // See https://svelte.dev/e/state_proxy_equality_mismatch
+    last_auto_configs = scene_props.vector_configs
+    scene_props.vector_scale ??= DEFAULTS.structure.vector_scale
+    scene_props.vector_color ??= DEFAULTS.structure.vector_color
+  })
+
+  // Optimize scene props for performance based on structure size and mode
+  $effect(() => {
     if (structure?.sites && performance_mode === `speed`) {
-        const site_count = structure.sites.length;
-        const current_sphere_segments = scene_props.sphere_segments || 20;
-        // Reduce sphere segments for large structures in speed mode
-        if (site_count > 200) {
-            scene_props.sphere_segments = Math.min(current_sphere_segments, 12);
-        }
+      const site_count = structure.sites.length
+      const current_sphere_segments = scene_props.sphere_segments || 20
+
+      // Reduce sphere segments for large structures in speed mode
+      if (site_count > 200) {
+        scene_props.sphere_segments = Math.min(current_sphere_segments, 12)
+      }
     }
-});
-$effect(() => {
-    colors.element = ELEMENT_COLOR_SCHEMES[color_scheme];
-});
-// Compute property-based colors for legend display
-let property_colors = $derived(get_property_colors(structure, atom_color_config, scene_props.bonding_strategy, sym_data));
-let symmetry_run_id = 0;
-let symmetry_error = $state();
-let last_symmetry_structure_ref = null;
-// Trigger symmetry analysis when structure is loaded or settings change.
-// Skip during atom drags — symmetry doesn't change from moving atoms,
-// and WASM analysis on every drag frame causes severe frame drops.
-$effect(() => {
-    if (dragging_atoms)
-        return;
+  })
+
+  $effect(() => {
+    colors.element = ELEMENT_COLOR_SCHEMES[color_scheme as ColorSchemeName]
+  })
+
+  // Compute property-based colors for legend display
+  let property_colors = $derived(
+    get_property_colors(
+      structure,
+      atom_color_config,
+      scene_props.bonding_strategy,
+      sym_data,
+    ),
+  )
+
+  let symmetry_run_id = 0
+  let symmetry_error = $state<string>()
+  let last_symmetry_structure_ref: AnyStructure | null = null
+
+  // Trigger symmetry analysis when structure is loaded or settings change.
+  // Skip during atom drags — symmetry doesn't change from moving atoms,
+  // and WASM analysis on every drag frame causes severe frame drops.
+  $effect(() => {
+    if (dragging_atoms) return
     if (!structure || !(`lattice` in structure)) {
-        untrack(() => {
-            sym_data = null;
-            symmetry_error = undefined;
-        });
-        last_symmetry_structure_ref = null;
-        return;
+      untrack(() => {
+        sym_data = null
+        symmetry_error = undefined
+      })
+      last_symmetry_structure_ref = null
+      return
     }
-    const current_structure = structure;
-    const structure_changed = current_structure !== last_symmetry_structure_ref;
+
+    const current_structure = structure
+    const structure_changed = current_structure !== last_symmetry_structure_ref
     if (structure_changed) {
-        untrack(() => {
-            sym_data = null;
-            symmetry_error = undefined;
-        });
-        last_symmetry_structure_ref = current_structure;
+      untrack(() => {
+        sym_data = null
+        symmetry_error = undefined
+      })
+      last_symmetry_structure_ref = current_structure
+    } else {
+      // Keep previous symmetry data while recomputing so bound consumers
+      // (e.g. SymmetryStats inputs) do not unmount and lose focus.
+      untrack(() => symmetry_error = undefined)
     }
-    else {
-        // Keep previous symmetry data while recomputing so bound consumers
-        // (e.g. SymmetryStats inputs) do not unmount and lose focus.
-        untrack(() => symmetry_error = undefined);
-    }
-    const run_id = ++symmetry_run_id;
+    const run_id = ++symmetry_run_id
     // Destructure symmetry_settings to ensure Svelte tracks changes to symprec and algo
     // (reading just the object reference isn't sufficient for fine-grained reactivity)
-    const { symprec, algo } = symmetry_settings ?? symmetry.default_sym_settings;
-    const current_settings = { symprec, algo };
+    const { symprec, algo } = symmetry_settings ?? symmetry.default_sym_settings
+    const current_settings = { symprec, algo }
+    // Skip symmetry auto-analysis in unit tests; happy-dom can't fetch WASM assets
+    if (typeof process !== `undefined` && process.env?.VITEST) return
+
     symmetry.ensure_moyo_wasm_ready()
-        .then(() => run_id === symmetry_run_id
-        ? symmetry.analyze_structure_symmetry(current_structure, current_settings)
-        : null)
-        .then((data) => {
+      .then(() =>
+        run_id === symmetry_run_id
+          ? symmetry.analyze_structure_symmetry(current_structure, current_settings)
+          : null
+      )
+      .then((data) => {
         if (data && run_id === symmetry_run_id) {
-            untrack(() => sym_data = data);
+          untrack(() => sym_data = data)
         }
-    })
-        .catch((err) => {
+      })
+      .catch((err) => {
         if (run_id === symmetry_run_id) {
-            untrack(() => sym_data = null);
-            symmetry_error = `Symmetry analysis failed: ${err?.message || err}`;
-            console.error(`Symmetry analysis failed:`, err);
+          untrack(() => sym_data = null)
+          symmetry_error = `Symmetry analysis failed: ${err?.message || err}`
+          console.error(`Symmetry analysis failed:`, err)
         }
-    });
-});
-let measure_menu_open = $state(false);
-let export_pane_open = $state(false);
-// Bond customization state
-let added_bonds = $state([]);
-let removed_bonds = $state([]);
-// === Edit-atoms mode state ===
-let dragging_atoms = $state(false);
-let undo_stack = $state([]);
-let redo_stack = $state([]);
-const MAX_HISTORY = 20;
-// Flag set before internal edits (undo/redo/delete/add/move) to distinguish
-// them from external structure changes (file load, trajectory step, etc.)
-let is_internal_edit = false;
-// Add-atom sub-mode state (bound to StructureScene)
-let add_atom_mode = $state(false);
-let add_element = $state(`C`);
-let canvas_cursor = $state(`default`);
-let change_element_mode = $state(false);
-let change_element_value = $state(``);
-// Ephemeral toast message for edit operations
-let toast_msg = $state(null);
-let toast_timer;
-function show_toast(msg, duration_ms = 2000) {
-    clearTimeout(toast_timer);
-    toast_msg = msg;
-    toast_timer = setTimeout(() => (toast_msg = null), duration_ms);
-}
-// Normalize and validate element symbol (e.g. "fe" → "Fe", "Xx" → null)
-function normalize_element(input) {
+      })
+  })
+
+  let measure_menu_open = $state(false)
+  let export_pane_open = $state(false)
+
+  // Bond customization state
+  let added_bonds = $state<[number, number][]>([])
+  let removed_bonds = $state<[number, number][]>([])
+
+  // === Edit-atoms mode state ===
+  let dragging_atoms = $state(false)
+  let undo_stack = $state<AnyStructure[]>([])
+  let redo_stack = $state<AnyStructure[]>([])
+  const MAX_HISTORY = 20
+  // Flag set before internal edits (undo/redo/delete/add/move) to distinguish
+  // them from external structure changes (file load, trajectory step, etc.)
+  let is_internal_edit = false
+  // Add-atom sub-mode state (bound to StructureScene)
+  let add_atom_mode = $state(false)
+  let add_element = $state<ElementSymbol>(`C` as ElementSymbol)
+  let canvas_cursor = $state(`default`)
+  let change_element_mode = $state(false)
+  let change_element_value = $state(``)
+  // Ephemeral toast message for edit operations
+  let toast_msg = $state<string | null>(null)
+  let toast_timer: ReturnType<typeof setTimeout> | undefined
+  function show_toast(msg: string, duration_ms = 2000) {
+    clearTimeout(toast_timer)
+    toast_msg = msg
+    toast_timer = setTimeout(() => (toast_msg = null), duration_ms)
+  }
+
+  // Normalize and validate element symbol (e.g. "fe" → "Fe", "Xx" → null)
+  function normalize_element(input: string): ElementSymbol | null {
     const normalized = (input.charAt(0).toUpperCase() +
-        input.slice(1).toLowerCase());
-    return ELEM_SYMBOLS.includes(normalized) ? normalized : null;
-}
-function clear_selection() {
-    selected_sites = [];
-    measured_sites = [];
-    dragging_atoms = false;
-}
-function push_undo() {
-    if (!structure)
-        return;
+      input.slice(1).toLowerCase()) as ElementSymbol
+    return ELEM_SYMBOLS.includes(normalized) ? normalized : null
+  }
+
+  function clear_selection() {
+    selected_sites = []
+    measured_sites = []
+    dragging_atoms = false
+  }
+
+  function push_undo() {
+    if (!structure) return
     if (undo_stack.length >= MAX_HISTORY) {
-        undo_stack.splice(0, undo_stack.length - MAX_HISTORY + 1);
+      undo_stack.splice(0, undo_stack.length - MAX_HISTORY + 1)
     }
-    undo_stack.push($state.snapshot(structure));
-    redo_stack.length = 0;
-}
-// Shared undo/redo: pop from `source`, push current state onto `target`
-function apply_history(source, target) {
-    if (source.length === 0 || !structure)
-        return;
-    const restored = source.pop();
-    if (!restored)
-        return;
-    is_internal_edit = true;
-    target.push($state.snapshot(structure));
-    structure = restored;
-    clear_selection();
-}
-const undo = () => apply_history(undo_stack, redo_stack);
-const redo = () => apply_history(redo_stack, undo_stack);
-// Clear undo/redo stacks when structure changes externally (file load, etc.)
-// Internal edits set is_internal_edit=true before modifying structure.
-// This $effect runs after microtask, so the flag is still set from the edit.
-$effect(() => {
+    undo_stack.push($state.snapshot(structure) as AnyStructure)
+    redo_stack.length = 0
+  }
+
+  // Shared undo/redo: pop from `source`, push current state onto `target`
+  function apply_history(source: AnyStructure[], target: AnyStructure[]) {
+    if (source.length === 0 || !structure) return
+    const restored = source.pop()
+    if (!restored) return
+    is_internal_edit = true
+    target.push($state.snapshot(structure) as AnyStructure)
+    structure = restored
+    clear_selection()
+  }
+
+  const undo = () => apply_history(undo_stack, redo_stack)
+  const redo = () => apply_history(redo_stack, undo_stack)
+
+  // Clear undo/redo stacks when structure changes externally (file load, etc.)
+  // Internal edits set is_internal_edit=true before modifying structure.
+  // This $effect runs after microtask, so the flag is still set from the edit.
+  $effect(() => {
     // Track structure to re-run when it changes
-    void structure;
+    void structure
     if (is_internal_edit) {
-        is_internal_edit = false;
-        return;
+      is_internal_edit = false
+      return
     }
     // External change — clear history and stale edit-atoms state
     untrack(() => {
-        if (undo_stack.length > 0 || redo_stack.length > 0) {
-            undo_stack = [];
-            redo_stack = [];
-        }
-        if (measure_mode === `edit-atoms`) {
-            if (selected_sites.length > 0 || measured_sites.length > 0)
-                clear_selection();
-            if (site_radius_overrides?.size > 0)
-                site_radius_overrides.clear();
-        }
-    });
-});
-// Clear selection when switching measure/edit mode so stale state doesn't carry over
-let mode_first_run = true;
-$effect(() => {
-    void measure_mode; // track reactively
+      if (undo_stack.length > 0 || redo_stack.length > 0) {
+        undo_stack = []
+        redo_stack = []
+      }
+      if (measure_mode === `edit-atoms`) {
+        if (selected_sites.length > 0 || measured_sites.length > 0) clear_selection()
+        if (site_radius_overrides?.size > 0) site_radius_overrides.clear()
+      }
+    })
+  })
+
+  // Clear selection when switching measure/edit mode so stale state doesn't carry over
+  let mode_first_run = true
+  $effect(() => {
+    void measure_mode // track reactively
     if (mode_first_run) {
-        mode_first_run = false;
-        return;
+      mode_first_run = false
+      return
     }
     untrack(() => {
-        if (selected_sites.length > 0 || measured_sites.length > 0)
-            clear_selection();
-    });
-});
-// Auto-bake cell type transform and clear stale state when entering edit-atoms mode
-$effect(() => {
-    if (measure_mode !== `edit-atoms`)
-        return;
+      if (selected_sites.length > 0 || measured_sites.length > 0) clear_selection()
+    })
+  })
+
+  // Auto-bake cell type transform and clear stale state when entering edit-atoms mode
+  $effect(() => {
+    if (measure_mode !== `edit-atoms`) return
     untrack(() => {
-        // Clear bond edits from edit-bonds mode to avoid stale state
-        if (added_bonds.length > 0 || removed_bonds.length > 0) {
-            added_bonds = [];
-            removed_bonds = [];
-        }
-        if (cell_type !== `original` && cell_transformed_structure && structure) {
-            // Bake the transformed cell: push original to undo, replace structure
-            is_internal_edit = true;
-            push_undo();
-            structure = $state.snapshot(cell_transformed_structure);
-            cell_type = `original`;
-        }
-    });
-});
-let controls_config = $derived(normalize_show_controls(show_controls));
-// Normalize structure coordinates: wrap fractional coords to [0,1) and recompute Cartesian
-// This ensures atoms are rendered inside the unit cell regardless of data source
-let normalized_structure = $derived.by(() => {
-    if (!structure || !(`lattice` in structure))
-        return structure;
-    return normalize_fractional_coords(structure);
-});
-// Apply cell type transformation (original, conventional, or primitive)
-// This must happen BEFORE supercell transformation
-let cell_transformed_structure = $derived.by(() => {
-    if (!normalized_structure || !(`lattice` in normalized_structure) ||
-        cell_type === `original`) {
-        return normalized_structure;
+      // Clear bond edits from edit-bonds mode to avoid stale state
+      if (added_bonds.length > 0 || removed_bonds.length > 0) {
+        added_bonds = []
+        removed_bonds = []
+      }
+      if (cell_type !== `original` && cell_transformed_structure && structure) {
+        // Bake the transformed cell: push original to undo, replace structure
+        is_internal_edit = true
+        push_undo()
+        structure = $state.snapshot(cell_transformed_structure) as AnyStructure
+        cell_type = `original`
+      }
+    })
+  })
+
+  let controls_config = $derived(normalize_show_controls(show_controls))
+
+  // Normalize structure coordinates: wrap fractional coords to [0,1) and recompute Cartesian
+  // This ensures atoms are rendered inside the unit cell regardless of data source
+  let normalized_structure = $derived.by(() => {
+    if (!structure || !(`lattice` in structure)) return structure
+    return normalize_fractional_coords(structure) as AnyStructure
+  })
+
+  // Apply cell type transformation (original, conventional, or primitive)
+  // This must happen BEFORE supercell transformation
+  let cell_transformed_structure = $derived.by(() => {
+    if (
+      !normalized_structure || !(`lattice` in normalized_structure) ||
+      cell_type === `original`
+    ) {
+      return normalized_structure
     }
     // Cell type transformation requires symmetry data
     if (!sym_data) {
-        return normalized_structure;
+      return normalized_structure
     }
     try {
-        return transform_cell(normalized_structure, cell_type, sym_data);
+      return transform_cell(normalized_structure as Crystal, cell_type, sym_data)
+    } catch (error) {
+      console.error(`Failed to transform cell to ${cell_type}:`, error)
+      return normalized_structure
     }
-    catch (error) {
-        console.error(`Failed to transform cell to ${cell_type}:`, error);
-        return normalized_structure;
+  })
+
+  // Create supercell if needed (uses cell_transformed_structure as base)
+  let supercell_structure = $state(structure)
+  let supercell_loading = $state(false)
+  let has_supercell = $derived(
+    !!supercell_scaling && ![``, `1x1x1`, `1`].includes(supercell_scaling),
+  )
+
+  // Tile volumetric data to match supercell when active.
+  // Gate on !supercell_loading so the tiled volume and supercell structure update
+  // in the same frame (large supercells defer structure via setTimeout).
+  let supercell_volume = $derived.by(() => {
+    const vol = volumetric_data?.[active_volume_idx]
+    if (!vol || !has_supercell || supercell_loading) return vol
+    try {
+      return tile_volumetric_data(vol, parse_supercell_scaling(supercell_scaling))
+    } catch {
+      return vol
     }
-});
-// Create supercell if needed (uses cell_transformed_structure as base)
-let supercell_structure = $state(structure);
-let supercell_loading = $state(false);
-let has_supercell = $derived(!!supercell_scaling && ![``, `1x1x1`, `1`].includes(supercell_scaling));
-$effect(() => {
-    const base_structure = cell_transformed_structure;
+  })
+
+  let supercell_timeout: ReturnType<typeof setTimeout> | undefined
+  $effect(() => {
+    const base_structure = cell_transformed_structure
+    clearTimeout(supercell_timeout)
     if (!base_structure || !(`lattice` in base_structure) || !has_supercell) {
-        supercell_structure = base_structure;
-        supercell_loading = false;
-    }
-    else if (!is_valid_supercell_input(supercell_scaling)) {
-        supercell_structure = base_structure;
-        supercell_loading = false;
-    }
-    else {
-        // For large supercells, show loading state and use async generation
-        const sites_count = base_structure.sites?.length || 0;
-        const [nx_str, ny_str, nz_str] = supercell_scaling.split(/[x×]/);
-        const scaling_mult = (parseInt(nx_str) || 1) * (parseInt(ny_str) || 1) *
-            (parseInt(nz_str) || 1);
-        const estimated_sites = sites_count * scaling_mult;
-        // Show spinner for supercells with >1000 estimated sites or scaling >8
-        const show_loading = estimated_sites > 1000 || scaling_mult > 8;
-        if (show_loading) {
-            supercell_loading = true;
-            // Use setTimeout to allow UI to update before heavy computation
-            setTimeout(() => {
-                try {
-                    if (base_structure && `lattice` in base_structure) {
-                        supercell_structure = make_supercell(base_structure, supercell_scaling);
-                    }
-                }
-                catch (error) {
-                    console.error(`Failed to create supercell:`, error);
-                    supercell_structure = base_structure;
-                }
-                finally {
-                    supercell_loading = false;
-                }
-            }, 10);
-        }
-        else {
+      supercell_structure = base_structure
+      supercell_loading = false
+    } else if (!is_valid_supercell_input(supercell_scaling)) {
+      supercell_structure = base_structure
+      supercell_loading = false
+    } else {
+      // For large supercells, show loading state and use async generation
+      const sites_count = base_structure.sites?.length || 0
+      const [nx_str, ny_str, nz_str] = supercell_scaling.split(/[x×]/)
+      const scaling_mult = (parseInt(nx_str) || 1) * (parseInt(ny_str) || 1) *
+        (parseInt(nz_str) || 1)
+      const estimated_sites = sites_count * scaling_mult
+
+      // Show spinner for supercells with >1000 estimated sites or scaling >8
+      const show_loading = estimated_sites > 1000 || scaling_mult > 8
+
+      if (show_loading) {
+        supercell_loading = true
+        // Use setTimeout to allow UI to update before heavy computation
+        supercell_timeout = setTimeout(() => {
+          try {
             if (base_structure && `lattice` in base_structure) {
-                supercell_structure = make_supercell(base_structure, supercell_scaling);
+              supercell_structure = make_supercell(
+                base_structure as Crystal,
+                supercell_scaling,
+              )
             }
-            supercell_loading = false;
+          } catch (error) {
+            console.error(`Failed to create supercell:`, error)
+            supercell_structure = base_structure
+          } finally {
+            supercell_loading = false
+          }
+        }, 10)
+      } else {
+        if (base_structure && `lattice` in base_structure) {
+          supercell_structure = make_supercell(
+            base_structure as Crystal,
+            supercell_scaling,
+          )
         }
+        supercell_loading = false
+      }
     }
-});
-// Clear selections and site overrides when transformations change site indices
-// (skip first run to preserve parent-provided selections)
-let first_run = true;
-$effect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    ;
-    [supercell_scaling, show_image_atoms, structure, cell_type];
+  })
+
+  // Clear selections, site overrides, and stale camera target when transformations
+  // change site indices (skip first run to preserve parent-provided selections)
+  let first_run = true
+  $effect(() => {
+    void [supercell_scaling, show_image_atoms, structure, cell_type] // track reactively
     if (first_run) {
-        first_run = false;
-        return;
+      first_run = false
+      return
     }
     untrack(() => {
-        // In edit-atoms mode, structure changes are intentional user edits
-        // (move/add/delete) — preserve the selection so TransformControls stays active
-        if (measure_mode === `edit-atoms`)
-            return;
-        if (selected_sites.length > 0 || measured_sites.length > 0)
-            clear_selection();
-        // Clear site radius overrides since site indices are no longer valid
-        if (site_radius_overrides?.size > 0)
-            site_radius_overrides.clear();
-    });
-});
-// Apply element mapping then image atoms to the supercell structure.
-// Skip get_pbc_image_sites during atom drags — the vector math + doubled site
-// count causes frame drops. Image atoms reappear instantly on drag release.
-$effect(() => {
-    let struct = supercell_structure;
+      // In edit-atoms mode, structure changes are intentional user edits
+      // (move/add/delete) — preserve the selection so TransformControls stays active
+      if (measure_mode === `edit-atoms`) return
+      if (selected_sites.length > 0 || measured_sites.length > 0) clear_selection()
+      // Clear site radius overrides since site indices are no longer valid
+      if (site_radius_overrides?.size > 0) site_radius_overrides.clear()
+      // Clear stale camera target so orbit controls re-center on the new cell
+      scene_props.camera_target = undefined
+    })
+  })
+
+  // Apply element mapping then image atoms to the supercell structure.
+  // Skip get_pbc_image_sites during atom drags — the vector math + doubled site
+  // count causes frame drops. Image atoms reappear instantly on drag release.
+  $effect(() => {
+    let struct = supercell_structure
     if (struct && element_mapping && Object.keys(element_mapping).length > 0) {
-        const mapping = element_mapping; // capture for TypeScript narrowing
-        struct = {
-            ...struct,
-            sites: struct.sites.map((site) => ({
-                ...site,
-                species: site.species.map((sp) => ({
-                    ...sp,
-                    element: mapping[sp.element] ?? sp.element,
-                })),
-                label: mapping[site.label] ?? site.label,
-            })),
-        };
+      const mapping = element_mapping // capture for TypeScript narrowing
+      struct = {
+        ...struct,
+        sites: struct.sites.map((site) => ({
+          ...site,
+          species: site.species.map((sp) => ({
+            ...sp,
+            element: mapping[sp.element as ElementSymbol] ?? sp.element,
+          })),
+          label: mapping[site.label as ElementSymbol] ?? site.label,
+        })),
+      }
     }
     displayed_structure =
-        !dragging_atoms && show_image_atoms && struct && `lattice` in struct &&
-            struct.lattice
-            ? get_pbc_image_sites(struct)
-            : struct;
-});
-// Track if camera has ever been moved from initial position
-let camera_has_moved = $state(false);
-let camera_is_moving = $state(false);
-let scene = $state(undefined);
-let camera = $state(undefined);
-let orbit_controls = $state(undefined);
-let rotation_target_ref = $state(undefined);
-let initial_computed_zoom = $state(undefined);
-// Mutual exclusion: opening one pane closes others
-$effect(() => {
+      !dragging_atoms && show_image_atoms && struct && `lattice` in struct &&
+        struct.lattice
+        ? get_pbc_image_sites(struct)
+        : struct
+  })
+
+  // Track if camera has ever been moved from initial position
+  let camera_has_moved = $state(false)
+  let camera_is_moving = $state(false)
+  let scene = $state<Scene | undefined>(undefined)
+  let camera = $state<Camera | undefined>(undefined)
+  let orbit_controls = $state<
+    ComponentProps<typeof StructureScene>[`orbit_controls`]
+  >(undefined)
+  let rotation_target_ref = $state<Vec3 | undefined>(undefined)
+  let initial_computed_zoom = $state<number | undefined>(undefined)
+
+  // Mutual exclusion: opening one pane closes others
+  $effect(() => {
     if (info_pane_open) {
-        untrack(() => [controls_open, export_pane_open] = [false, false]);
+      untrack(() => [controls_open, export_pane_open] = [false, false])
     }
-});
-$effect(() => {
+  })
+  $effect(() => {
     if (controls_open) {
-        untrack(() => [info_pane_open, export_pane_open] = [false, false]);
+      untrack(() => [info_pane_open, export_pane_open] = [false, false])
     }
-});
-$effect(() => {
+  })
+  $effect(() => {
     if (export_pane_open) {
-        untrack(() => [info_pane_open, controls_open] = [false, false]);
+      untrack(() => [info_pane_open, controls_open] = [false, false])
     }
-});
-// Reset tracking when structure changes
-$effect(() => {
-    if (structure)
-        camera_has_moved = false;
-});
-const read_orbit_target = () => {
-    if (!orbit_controls?.target)
-        return;
-    const { x, y, z } = orbit_controls.target;
-    return [x, y, z];
-};
-const read_camera_position = () => camera
-    ? [camera.position.x, camera.position.y, camera.position.z]
-    : scene_props.camera_position;
-// Emit debounced camera updates while controls are active.
-$effect(() => {
-    if (!camera_is_moving)
-        return;
-    camera_has_moved = true;
+  })
+
+  // Reset tracking when structure changes
+  $effect(() => {
+    if (structure) camera_has_moved = false
+  })
+
+  // Clear stale camera target and position so StructureScene uses the new
+  // structure's rotation_target (unit cell center) and auto-positions the camera.
+  function clear_camera_state() {
+    scene_props.camera_target = undefined
+    scene_props.camera_position = [0, 0, 0]
+  }
+
+  const read_orbit_target = (): Vec3 | undefined => {
+    if (!orbit_controls?.target) return
+    const { x, y, z } = orbit_controls.target
+    return [x, y, z]
+  }
+
+  const read_camera_position = (): Vec3 | undefined =>
+    camera
+      ? [camera.position.x, camera.position.y, camera.position.z]
+      : scene_props.camera_position
+
+  // Emit debounced camera updates while controls are active.
+  $effect(() => {
+    if (!camera_is_moving) return
+    camera_has_moved = true
+
     const emit_camera_move = () => {
-        const camera_position = read_camera_position();
-        if (camera_position === undefined)
-            return;
-        const camera_target = read_orbit_target();
-        scene_props.camera_position = camera_position;
-        scene_props.camera_target = camera_target;
-        on_camera_move?.({
-            structure,
-            camera_has_moved,
-            camera_position,
-            camera_target,
-        });
-    };
-    emit_camera_move();
-    const emit_interval = setInterval(emit_camera_move, 200);
-    return () => clearInterval(emit_interval);
-});
-function reset_camera() {
+      const camera_position = read_camera_position()
+      if (camera_position === undefined) return
+      const camera_target = read_orbit_target()
+      scene_props.camera_position = camera_position
+      scene_props.camera_target = camera_target
+      on_camera_move?.({
+        structure,
+        camera_has_moved,
+        camera_position,
+        camera_target,
+      })
+    }
+
+    emit_camera_move()
+    const emit_interval = setInterval(emit_camera_move, 200)
+    return () => clearInterval(emit_interval)
+  })
+
+  function reset_camera() {
     // Reset camera position to trigger automatic positioning.
-    scene_props.camera_position = [0, 0, 0];
-    scene_props.camera_target = rotation_target_ref;
-    camera_has_moved = false;
-    let camera_position = [0, 0, 0];
-    let camera_target = rotation_target_ref;
+    scene_props.camera_position = [0, 0, 0]
+    scene_props.camera_target = rotation_target_ref
+    camera_has_moved = false
+
+    let camera_position: Vec3 = [0, 0, 0]
+    let camera_target: Vec3 | undefined = rotation_target_ref
+
     // Reset pan/zoom and ensure controls target returns to structure center.
     if (orbit_controls && camera) {
-        if (`reset` in orbit_controls &&
-            typeof orbit_controls.reset === `function`)
-            orbit_controls.reset();
-        if (orbit_controls.target && rotation_target_ref) {
-            const [target_x, target_y, target_z] = rotation_target_ref;
-            orbit_controls.target.set(target_x, target_y, target_z);
-        }
-        // Reset zoom for orthographic camera
-        if (`zoom` in camera && initial_computed_zoom !== undefined) {
-            const ortho_camera = camera;
-            ortho_camera.zoom = initial_computed_zoom;
-            ortho_camera.updateProjectionMatrix();
-        }
-        // Call update to apply changes immediately
-        if (typeof orbit_controls.update === `function`)
-            orbit_controls.update();
-        camera_position = read_camera_position() ?? camera_position;
-        camera_target = read_orbit_target();
+      if (
+        `reset` in orbit_controls &&
+        typeof orbit_controls.reset === `function`
+      ) orbit_controls.reset()
+      if (orbit_controls.target && rotation_target_ref) {
+        const [target_x, target_y, target_z] = rotation_target_ref
+        orbit_controls.target.set(target_x, target_y, target_z)
+      }
+
+      // Reset zoom for orthographic camera
+      if (`zoom` in camera && initial_computed_zoom !== undefined) {
+        const ortho_camera = camera as OrthographicCamera
+        ortho_camera.zoom = initial_computed_zoom
+        ortho_camera.updateProjectionMatrix()
+      }
+
+      // Call update to apply changes immediately
+      if (typeof orbit_controls.update === `function`) orbit_controls.update()
+      camera_position = read_camera_position() ?? camera_position
+      camera_target = read_orbit_target()
     }
-    scene_props.camera_position = camera_position;
-    scene_props.camera_target = camera_target;
-    on_camera_reset?.({ structure, camera_has_moved, camera_position, camera_target });
-}
-const emit_file_load_event = (structure, filename, content) => on_file_load?.({
-    structure: structure,
-    filename,
-    file_size: typeof content === `string`
+
+    scene_props.camera_position = camera_position
+    scene_props.camera_target = camera_target
+    on_camera_reset?.({ structure, camera_has_moved, camera_position, camera_target })
+  }
+
+  const emit_file_load_event = (
+    structure: AnyStructure,
+    filename: string,
+    content: string | ArrayBuffer,
+  ) =>
+    on_file_load?.({
+      structure: structure,
+      filename,
+      file_size: typeof content === `string`
         ? new Blob([content]).size
         : content.byteLength,
-    total_atoms: structure.sites?.length || 0,
-});
-// Try to parse content as a volumetric file, setting both structure and volumetric data.
-// Delegates format detection entirely to parse_volumetric_file (filename + content sniffing).
-// Returns the parsed structure on success, or null if the file isn't a volumetric format.
-function try_parse_volumetric(text_content, filename) {
-    const vol_result = parse_volumetric_file(text_content, filename);
-    if (!vol_result)
-        return null;
+      total_atoms: structure.sites?.length || 0,
+    })
+
+  // Try to parse content as a volumetric file, setting both structure and volumetric data.
+  // Delegates format detection entirely to parse_volumetric_file (filename + content sniffing).
+  // Returns the parsed structure on success, or null if the file isn't a volumetric format.
+  function try_parse_volumetric(
+    text_content: string,
+    filename: string,
+  ): AnyStructure | null {
+    const vol_result = parse_volumetric_file(text_content, filename)
+    if (!vol_result) return null
     // parse_volumetric_file extracts structure from file header;
     // parsers set pbc so the lattice conforms to Crystal's LatticeType
-    structure = vol_result.structure;
-    volumetric_data = vol_result.volumes;
+    structure = vol_result.structure as AnyStructure
+    volumetric_data = vol_result.volumes
     // Auto-compute reasonable isosurface settings from data range
-    const vol = vol_result.volumes[0];
+    const vol = vol_result.volumes[0]
     if (vol) {
-        isosurface_settings = auto_isosurface_settings(vol.data_range);
-        active_volume_idx = 0;
+      isosurface_settings = auto_isosurface_settings(vol.data_range)
+      active_volume_idx = 0
     }
-    return structure;
-}
-// Parse file content, trying volumetric format first then falling back to plain structure.
-// Returns the parsed structure on success, throws on failure.
-function parse_file_content(text_content, filename) {
-    const vol_struct = try_parse_volumetric(text_content, filename);
-    if (vol_struct)
-        return vol_struct;
+    return structure
+  }
+
+  // Parse file content, trying volumetric format first then falling back to plain structure.
+  // Returns the parsed structure on success, throws on failure.
+  function parse_file_content(text_content: string, filename: string): AnyStructure {
+    clear_camera_state()
+    const vol_struct = try_parse_volumetric(text_content, filename)
+    if (vol_struct) return vol_struct
     // Clear stale volumetric data when loading a non-volumetric file
-    volumetric_data = [];
-    const parsed = parse_any_structure(text_content, filename);
-    if (!parsed)
-        throw new Error(`Failed to parse structure from ${filename}`);
-    structure = parsed;
-    return parsed;
-}
-const handle_file_drop = create_file_drop_handler({
+    volumetric_data = []
+    const parsed = parse_any_structure(text_content, filename)
+    if (!parsed) throw new Error(`Failed to parse structure from ${filename}`)
+    structure = parsed
+    return parsed
+  }
+
+  const handle_file_drop = create_file_drop_handler({
     allow: () => allow_file_drop,
     on_drop: (content, filename) => {
-        if (on_file_drop)
-            return on_file_drop(content, filename);
-        try {
-            const text_content = content instanceof ArrayBuffer
-                ? new TextDecoder().decode(content)
-                : content;
-            const parsed = parse_file_content(text_content, filename);
-            emit_file_load_event(parsed, filename, content);
-        }
-        catch (err) {
-            error_msg = `Failed to parse structure: ${err instanceof Error ? err.message : String(err)}`;
-            on_error?.({ error_msg, filename });
-        }
+      if (on_file_drop) return on_file_drop(content, filename)
+      try {
+        const text_content = content instanceof ArrayBuffer
+          ? new TextDecoder().decode(content)
+          : content
+        const parsed = parse_file_content(text_content, filename)
+        emit_file_load_event(parsed, filename, content)
+      } catch (err) {
+        error_msg = `Failed to parse structure: ${
+          err instanceof Error ? err.message : String(err)
+        }`
+        on_error?.({ error_msg, filename })
+      }
     },
     on_error: (msg) => {
-        error_msg = msg;
-        on_error?.({ error_msg: msg });
+      error_msg = msg
+      on_error?.({ error_msg: msg })
     },
     set_loading: (val) => {
-        loading = val;
-        if (val)
-            [error_msg, dragover] = [undefined, false];
+      loading = val
+      if (val) [error_msg, dragover] = [undefined, false]
     },
-});
-function handle_keydown(event) {
+  })
+
+  function handle_keydown(event: KeyboardEvent) {
     // Don't handle shortcuts if user is typing in an input field
-    const target = event.target;
+    const target = event.target as HTMLElement
     const is_input_focused = target.tagName === `INPUT` ||
-        target.tagName === `TEXTAREA`;
+      target.tagName === `TEXTAREA`
+
     // Allow Escape to cancel add-atom mode even when the element input is focused
     if (event.key === `Escape` && measure_mode === `edit-atoms` && add_atom_mode) {
-        event.preventDefault();
-        add_atom_mode = false;
-        return;
+      event.preventDefault()
+      add_atom_mode = false
+      return
     }
-    if (is_input_focused)
-        return;
+
+    if (is_input_focused) return
+
     // Edit-atoms mode shortcuts (including undo/redo)
     if (measure_mode === `edit-atoms`) {
-        // Undo/redo shortcuts (Ctrl/Cmd + Z/Y) — only active in edit-atoms mode
-        if (event.ctrlKey || event.metaKey) {
-            const key = event.key.toLowerCase();
-            if (key === `z` && !event.shiftKey) {
-                event.preventDefault();
-                undo();
-                show_toast(`Undo (${undo_stack.length} left)`);
-                return;
-            }
-            else if (key === `y` || (key === `z` && event.shiftKey)) {
-                event.preventDefault();
-                redo();
-                show_toast(`Redo (${redo_stack.length} left)`);
-                return;
-            }
+      // Undo/redo shortcuts (Ctrl/Cmd + Z/Y) — only active in edit-atoms mode
+      if (event.ctrlKey || event.metaKey) {
+        const key = event.key.toLowerCase()
+        if (key === `z` && !event.shiftKey) {
+          event.preventDefault()
+          undo()
+          show_toast(`Undo (${undo_stack.length} left)`)
+          return
+        } else if (key === `y` || (key === `z` && event.shiftKey)) {
+          event.preventDefault()
+          redo()
+          show_toast(`Redo (${redo_stack.length} left)`)
+          return
         }
-        if (event.key === `Delete` || event.key === `Backspace`) {
-            // Delete selected atoms
-            if (selected_sites.length > 0 && structure?.sites) {
-                event.preventDefault();
-                is_internal_edit = true;
-                push_undo();
-                const to_delete = scene_to_structure_indices(selected_sites, true);
-                const n_deleted = to_delete.size;
-                clear_selection();
-                structure = {
-                    ...structure,
-                    sites: structure.sites.filter((_, idx) => !to_delete.has(idx)),
-                };
-                // Clear per-site overrides since indices shifted after deletion
-                if (site_radius_overrides?.size > 0)
-                    site_radius_overrides.clear();
-                added_bonds = [];
-                removed_bonds = [];
-                show_toast(`Deleted ${n_deleted} site${n_deleted > 1 ? `s` : ``}`);
-            }
-            return;
-        }
-        const key = event.key.toLowerCase();
-        const plain = !event.ctrlKey && !event.metaKey && !event.altKey;
-        if (key === `a` && plain) {
-            // Enter add-atom sub-mode (plain 'a' only, not Ctrl+A/Cmd+A/Alt+A)
-            event.preventDefault();
-            add_atom_mode = !add_atom_mode;
-            return;
+      }
+
+      if (event.key === `Delete` || event.key === `Backspace`) {
+        // Delete selected atoms
+        if (selected_sites.length > 0 && structure?.sites) {
+          event.preventDefault()
+          is_internal_edit = true
+          push_undo()
+          const to_delete = scene_to_structure_indices(selected_sites, true)
+          const n_deleted = to_delete.size
+          clear_selection()
+          structure = {
+            ...structure,
+            sites: structure.sites.filter((_, idx) => !to_delete.has(idx)),
+          }
+          // Clear per-site overrides since indices shifted after deletion
+          if (site_radius_overrides?.size > 0) site_radius_overrides.clear()
+          added_bonds = []
+          removed_bonds = []
+          show_toast(`Deleted ${n_deleted} site${n_deleted > 1 ? `s` : ``}`)
         }
-        // Change element of selected atoms
-        if (key === `e` && plain && selected_sites.length > 0) {
-            event.preventDefault();
-            change_element_mode = !change_element_mode;
-            return;
+        return
+      }
+      const key = event.key.toLowerCase()
+      const plain = !event.ctrlKey && !event.metaKey && !event.altKey
+
+      if (key === `a` && plain) {
+        // Enter add-atom sub-mode (plain 'a' only, not Ctrl+A/Cmd+A/Alt+A)
+        event.preventDefault()
+        add_atom_mode = !add_atom_mode
+        return
+      }
+      // Change element of selected atoms
+      if (key === `e` && plain && selected_sites.length > 0) {
+        event.preventDefault()
+        change_element_mode = !change_element_mode
+        return
+      }
+      // Duplicate selected atoms at a small offset
+      if (
+        key === `d` && (event.ctrlKey || event.metaKey) &&
+        selected_sites.length > 0 && structure?.sites
+      ) {
+        event.preventDefault()
+        is_internal_edit = true
+        push_undo()
+        const orig_indices = scene_to_structure_indices(selected_sites)
+        const cart_to_frac = get_cart_to_frac()
+        const new_sites = structure.sites
+          .filter((_, idx) => orig_indices.has(idx))
+          .map((site) => {
+            const new_xyz: Vec3 = [
+              site.xyz[0] + 0.5,
+              site.xyz[1] + 0.5,
+              site.xyz[2] + 0.5,
+            ]
+            return {
+              ...site,
+              xyz: new_xyz,
+              abc: cart_to_frac?.(new_xyz) ?? new_xyz,
+              properties: { ...site.properties },
+            }
+          })
+        const base_idx = structure.sites.length
+        structure = {
+          ...structure,
+          sites: [...structure.sites, ...new_sites],
         }
-        // Duplicate selected atoms at a small offset
-        if (key === `d` && (event.ctrlKey || event.metaKey) &&
-            selected_sites.length > 0 && structure?.sites) {
-            event.preventDefault();
-            is_internal_edit = true;
-            push_undo();
-            const orig_indices = scene_to_structure_indices(selected_sites);
-            const cart_to_frac = get_cart_to_frac();
-            const new_sites = structure.sites
-                .filter((_, idx) => orig_indices.has(idx))
-                .map((site) => {
-                const new_xyz = [
-                    site.xyz[0] + 0.5,
-                    site.xyz[1] + 0.5,
-                    site.xyz[2] + 0.5,
-                ];
-                return {
-                    ...site,
-                    xyz: new_xyz,
-                    abc: cart_to_frac?.(new_xyz) ?? new_xyz,
-                    properties: { ...site.properties },
-                };
-            });
-            const base_idx = structure.sites.length;
-            structure = {
-                ...structure,
-                sites: [...structure.sites, ...new_sites],
-            };
-            // Select the newly duplicated atoms
-            selected_sites = new_sites.map((_, idx) => base_idx + idx);
-            measured_sites = [...selected_sites];
-            show_toast(`Duplicated ${new_sites.length} site${new_sites.length > 1 ? `s` : ``}`);
-            return;
+        // Select the newly duplicated atoms
+        selected_sites = new_sites.map((_, idx) => base_idx + idx)
+        measured_sites = [...selected_sites]
+        show_toast(
+          `Duplicated ${new_sites.length} site${new_sites.length > 1 ? `s` : ``}`,
+        )
+        return
+      }
+
+      // add_atom_mode Escape is already handled above (before is_input_focused guard)
+      if (event.key === `Escape`) {
+        if (change_element_mode) {
+          change_element_mode = false
+          return
         }
-        // add_atom_mode Escape is already handled above (before is_input_focused guard)
-        if (event.key === `Escape`) {
-            if (change_element_mode) {
-                change_element_mode = false;
-                return;
-            }
-            if (selected_sites.length > 0) {
-                clear_selection();
-                return;
-            }
+        if (selected_sites.length > 0) {
+          clear_selection()
+          return
         }
+      }
     }
+
     // Interface shortcuts (require Ctrl/Cmd modifier to avoid accidental triggers)
-    const has_modifier = event.ctrlKey || event.metaKey;
+    const has_modifier = event.ctrlKey || event.metaKey
     if (event.key === `f` && has_modifier && fullscreen_toggle) {
-        event.preventDefault();
-        toggle_fullscreen(wrapper);
+      event.preventDefault()
+      toggle_fullscreen(wrapper)
+    } else if (event.key === `i` && has_modifier && enable_info_pane) {
+      event.preventDefault()
+      info_pane_open = !info_pane_open
+    } else if (event.key === `Escape`) {
+      // Prioritize closing panes, then exit edit modes, then exit fullscreen
+      if (info_pane_open) info_pane_open = false
+      else if (controls_open) controls_open = false
+      else if (export_pane_open) export_pane_open = false
+      else if (measure_mode === `edit-bonds` || measure_mode === `edit-atoms`) {
+        measure_mode = `distance`
+      }
     }
-    else if (event.key === `i` && has_modifier && enable_info_pane) {
-        event.preventDefault();
-        info_pane_open = !info_pane_open;
-    }
-    else if (event.key === `Escape`) {
-        // Prioritize closing panes, then exit edit modes, then exit fullscreen
-        if (info_pane_open)
-            info_pane_open = false;
-        else if (controls_open)
-            controls_open = false;
-        else if (export_pane_open)
-            export_pane_open = false;
-        else if (measure_mode === `edit-bonds` || measure_mode === `edit-atoms`) {
-            measure_mode = `distance`;
-        }
-    }
-}
-// === Edit-atoms mode helpers ===
-// Map scene indices (into displayed_structure) back to raw structure indices.
-// Handles supercell atoms via orig_unit_cell_idx property.
-// skip_image_atoms: when true, image atoms (PBC ghosts) are excluded from the result.
-function scene_to_structure_indices(scene_indices, skip_image_atoms = false) {
-    const result = new SvelteSet();
+  }
+
+  // === Edit-atoms mode helpers ===
+
+  // Map scene indices (into displayed_structure) back to raw structure indices.
+  // Handles supercell atoms via orig_unit_cell_idx property.
+  // skip_image_atoms: when true, image atoms (PBC ghosts) are excluded from the result.
+  function scene_to_structure_indices(
+    scene_indices: number[],
+    skip_image_atoms = false,
+  ): SvelteSet<number> {
+    const result = new SvelteSet<number>()
     for (const scene_idx of scene_indices) {
-        const displayed_site = displayed_structure?.sites?.[scene_idx];
-        if (!displayed_site)
-            continue;
-        if (skip_image_atoms && displayed_site.properties?.orig_site_idx != null) {
-            continue;
-        }
-        if (has_supercell && displayed_site.properties?.orig_unit_cell_idx != null) {
-            result.add(displayed_site.properties.orig_unit_cell_idx);
-        }
-        else if (displayed_site.properties?.orig_site_idx != null) {
-            // Image atom (PBC ghost) — map back to its original site index
-            result.add(displayed_site.properties.orig_site_idx);
-        }
-        else {
-            result.add(scene_idx);
-        }
+      const displayed_site = displayed_structure?.sites?.[scene_idx]
+      if (!displayed_site) continue
+      if (skip_image_atoms && displayed_site.properties?.orig_site_idx != null) {
+        continue
+      }
+
+      if (has_supercell && displayed_site.properties?.orig_unit_cell_idx != null) {
+        result.add(displayed_site.properties.orig_unit_cell_idx as number)
+      } else if (displayed_site.properties?.orig_site_idx != null) {
+        // Image atom (PBC ghost) — map back to its original site index
+        result.add(displayed_site.properties.orig_site_idx as number)
+      } else {
+        result.add(scene_idx)
+      }
     }
-    return result;
-}
-// Try to create a Cartesian→fractional converter for the current structure's lattice
-function get_cart_to_frac() {
-    if (!structure || !(`lattice` in structure))
-        return undefined;
+    return result
+  }
+
+  // Try to create a Cartesian→fractional converter for the current structure's lattice
+  function get_cart_to_frac(): ((xyz: Vec3) => Vec3) | undefined {
+    if (!structure || !(`lattice` in structure)) return undefined
     try {
-        return create_cart_to_frac(structure.lattice.matrix);
-    }
-    catch {
-        console.warn(`Failed to compute lattice inverse for fractional coordinates`);
-        return undefined;
+      return create_cart_to_frac((structure as Crystal).lattice.matrix)
+    } catch {
+      console.warn(`Failed to compute lattice inverse for fractional coordinates`)
+      return undefined
     }
-}
-// Handle atom moves from TransformControls. Applies Cartesian delta and wraps
-// fractional coords inline so normalize_fractional_coords hits its fast path.
-function handle_sites_moved(scene_indices, delta) {
-    if (!structure?.sites)
-        return;
-    is_internal_edit = true;
-    const orig_indices = scene_to_structure_indices(scene_indices);
+  }
+
+  // Handle atom moves from TransformControls. Applies Cartesian delta and wraps
+  // fractional coords inline so normalize_fractional_coords hits its fast path.
+  function handle_sites_moved(scene_indices: number[], delta: Vec3) {
+    if (!structure?.sites) return
+    is_internal_edit = true
+
+    const orig_indices = scene_to_structure_indices(scene_indices)
     // For crystals, wrap to [0,1) inline so normalize_fractional_coords fast-paths.
     // For molecules (no lattice), just apply the Cartesian delta directly.
     const lattice = `lattice` in structure
-        ? structure.lattice.matrix
-        : null;
-    const cart_to_frac = lattice ? create_cart_to_frac(lattice) : null;
-    const frac_to_cart = lattice ? create_frac_to_cart(lattice) : null;
+      ? (structure as Crystal).lattice.matrix
+      : null
+    const cart_to_frac = lattice ? create_cart_to_frac(lattice) : null
+    const frac_to_cart = lattice ? create_frac_to_cart(lattice) : null
     structure = {
-        ...structure,
-        sites: structure.sites.map((site, idx) => {
-            if (!orig_indices.has(idx))
-                return site;
-            const new_xyz = [
-                site.xyz[0] + delta[0],
-                site.xyz[1] + delta[1],
-                site.xyz[2] + delta[2],
-            ];
-            if (!cart_to_frac || !frac_to_cart) {
-                return { ...site, xyz: new_xyz, abc: new_xyz };
-            }
-            const wrapped_abc = wrap_to_unit_cell(cart_to_frac(new_xyz));
-            return { ...site, xyz: frac_to_cart(wrapped_abc), abc: wrapped_abc };
-        }),
-    };
-}
-// Change element symbol of selected atoms
-function handle_change_element(new_element) {
-    if (!structure?.sites || selected_sites.length === 0)
-        return;
-    const elem = normalize_element(new_element);
-    if (!elem)
-        return;
-    is_internal_edit = true;
-    push_undo();
-    const orig_indices = scene_to_structure_indices(selected_sites);
+      ...structure,
+      sites: structure.sites.map((site, idx) => {
+        if (!orig_indices.has(idx)) return site
+        const new_xyz: Vec3 = [
+          site.xyz[0] + delta[0],
+          site.xyz[1] + delta[1],
+          site.xyz[2] + delta[2],
+        ]
+        if (!cart_to_frac || !frac_to_cart) {
+          return { ...site, xyz: new_xyz, abc: new_xyz }
+        }
+        const wrapped_abc = wrap_to_unit_cell(cart_to_frac(new_xyz))
+        return { ...site, xyz: frac_to_cart(wrapped_abc), abc: wrapped_abc }
+      }),
+    }
+  }
+
+  // Change element symbol of selected atoms
+  function handle_change_element(new_element: string) {
+    if (!structure?.sites || selected_sites.length === 0) return
+    const elem = normalize_element(new_element)
+    if (!elem) return
+    is_internal_edit = true
+    push_undo()
+    const orig_indices = scene_to_structure_indices(selected_sites)
     structure = {
-        ...structure,
-        sites: structure.sites.map((site, idx) => {
-            if (!orig_indices.has(idx))
-                return site;
-            return {
-                ...site,
-                species: [{ element: elem, occu: 1, oxidation_state: 0 }],
-                label: elem,
-            };
-        }),
-    };
-    change_element_mode = false;
-    change_element_value = ``;
-    show_toast(`Changed ${orig_indices.size} site${orig_indices.size > 1 ? `s` : ``} to ${elem}`);
-}
-// Handle add-atom from StructureScene click-to-place
-function handle_add_atom(xyz, element) {
-    if (!structure)
-        return;
-    const elem = normalize_element(element);
+      ...structure,
+      sites: structure.sites.map((site, idx) => {
+        if (!orig_indices.has(idx)) return site
+        return {
+          ...site,
+          species: [{ element: elem, occu: 1, oxidation_state: 0 }],
+          label: elem,
+        }
+      }),
+    }
+    change_element_mode = false
+    change_element_value = ``
+    show_toast(
+      `Changed ${orig_indices.size} site${
+        orig_indices.size > 1 ? `s` : ``
+      } to ${elem}`,
+    )
+  }
+
+  // Handle add-atom from StructureScene click-to-place
+  function handle_add_atom(xyz: Vec3, element: ElementSymbol) {
+    if (!structure) return
+    const elem = normalize_element(element)
     if (!elem) {
-        return console.warn(`Invalid element symbol "${element}", ignoring add-atom`);
+      return console.warn(`Invalid element symbol "${element}", ignoring add-atom`)
     }
-    is_internal_edit = true;
-    push_undo();
+    is_internal_edit = true
+    push_undo()
     structure = {
-        ...structure,
-        sites: [...structure.sites, {
-                species: [{ element: elem, occu: 1, oxidation_state: 0 }],
-                xyz,
-                abc: get_cart_to_frac()?.(xyz) ?? xyz,
-                label: elem,
-                properties: {},
-            }],
-    };
-    show_toast(`Added ${elem} at (${xyz.map((c) => c.toFixed(2)).join(`, `)})`);
-}
-// Only set background override when background_color is explicitly provided
-$effect(() => {
-    if (typeof window !== `undefined` && wrapper && background_color) {
-        // Convert opacity (0-1) to hex alpha value (00-FF)
-        const alpha_hex = Math.round(background_opacity * 255)
-            .toString(16)
-            .padStart(2, `0`);
-        wrapper.style.setProperty(`--struct-bg-override`, `${background_color}${alpha_hex}`);
+      ...structure,
+      sites: [...structure.sites, {
+        species: [{ element: elem, occu: 1, oxidation_state: 0 }],
+        xyz,
+        abc: get_cart_to_frac()?.(xyz) ?? xyz,
+        label: elem,
+        properties: {},
+      }],
     }
-    else if (typeof window !== `undefined` && wrapper) {
-        // Remove override to use theme system
-        wrapper.style.removeProperty(`--struct-bg-override`);
+    show_toast(`Added ${elem} at (${xyz.map((c) => c.toFixed(2)).join(`, `)})`)
+  }
+
+  // Only set background override when background_color is explicitly provided
+  $effect(() => {
+    if (typeof window !== `undefined` && wrapper && background_color) {
+      // Convert opacity (0-1) to hex alpha value (00-FF)
+      const alpha_hex = Math.round(background_opacity * 255)
+        .toString(16)
+        .padStart(2, `0`)
+      wrapper.style.setProperty(
+        `--struct-bg-override`,
+        `${background_color}${alpha_hex}`,
+      )
+    } else if (typeof window !== `undefined` && wrapper) {
+      // Remove override to use theme system
+      wrapper.style.removeProperty(`--struct-bg-override`)
     }
-});
-$effect(() => {
+  })
+
+  $effect(() => { // fullscreen and background
     if (typeof window !== `undefined`) {
-        if (fullscreen && !document.fullscreenElement && wrapper) {
-            wrapper.requestFullscreen().catch(console.error);
-        }
-        else if (!fullscreen && document.fullscreenElement) {
-            document.exitFullscreen();
-        }
+      if (fullscreen && !document.fullscreenElement && wrapper) {
+        wrapper.requestFullscreen().catch(console.error)
+      } else if (!fullscreen && document.fullscreenElement) {
+        document.exitFullscreen()
+      }
     }
-    set_fullscreen_bg(wrapper, fullscreen, `--struct-bg-fullscreen`);
-});
+    set_fullscreen_bg(wrapper, fullscreen, `--struct-bg-fullscreen`)
+  })
 </script>
 
 <svelte:document
@@ -1071,7 +1336,7 @@ $effect(() => {
                     onclick={() => [measure_mode, measure_menu_open] = [mode, false]}
                   >
                     <Icon {icon} style="transform: scale({scale})" />
-                    <span>{@html label}</span>
+                    <span>{@html sanitize_html(label)}</span>
                   </button>
                 {/each}
               </div>
@@ -1232,14 +1497,14 @@ $effect(() => {
     <!-- prevent from rendering in vitest runner since WebGLRenderingContext not available -->
     {#if typeof WebGLRenderingContext !== `undefined`}
       <!-- prevent HTML labels from rendering outside of the canvas -->
-      <div style="overflow: hidden; height: 100%; flex: 1">
+      <div style="overflow: hidden; height: 100%; width: 100%">
         <Canvas>
           <StructureScene
             structure={displayed_structure}
             base_structure={cell_transformed_structure}
             {...scene_props}
             {lattice_props}
-            volumetric_data={volumetric_data?.[active_volume_idx]}
+            volumetric_data={supercell_volume}
             {isosurface_settings}
             bind:camera_is_moving
             bind:selected_sites
@@ -1372,7 +1637,8 @@ $effect(() => {
     pointer-events: auto;
   }
   /* Mode: hover - controls visible on component hover */
-  .structure:hover section.control-buttons.hover-visible {
+  .structure:hover section.control-buttons.hover-visible,
+  .structure:focus-within section.control-buttons.hover-visible {
     opacity: 1;
     pointer-events: auto;
   }
@@ -1380,7 +1646,7 @@ $effect(() => {
   section.control-buttons > :global(button) {
     background-color: transparent;
     display: flex;
-    padding: 4px;
+    padding: 1px 6px;
     border-radius: var(--border-radius, 3pt);
     font-size: clamp(0.85em, 2cqmin, 1.3em);
   }
@@ -1432,7 +1698,7 @@ $effect(() => {
   }
   .measure-mode-dropdown > button {
     background: transparent;
-    padding: 0 0 0 4px;
+    padding: 1px 6px;
     font-size: clamp(0.85em, 2cqmin, 1.3em);
   }
   .selection-limit-text {