matterviz 0.4.2 → 0.4.3

package/dist/structure/StructureViewport.svelte

@@ -8,6 +8,7 @@
   // callbacks so it drives Structure's external camera API. Camera state is per-pane:
   // the primary pane binds it back to Structure's scene_props, while side panes keep it local.
   import type { ElementSymbol } from '../element'
+  import { StatusMessage } from '../feedback'
   import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types'
   import type { Vec3 } from '../math'
   import type { CameraProjection } from '../settings'
@@ -46,13 +47,46 @@
     }
   }
 
-  const create_renderer = (canvas: HTMLCanvasElement) =>
-    new StructureRenderer({
+  // Self-heal evicted WebGL contexts: browsers cap live contexts (~8-16 per
+  // page) and evict the oldest without notice, leaving its canvas permanently
+  // blank. three.js handles `webglcontextrestored` when the browser restores
+  // on its own; when it doesn't, remount the <Canvas> for a fresh context.
+  // Bounded retries avoid eviction ping-pong when over the context budget.
+  let canvas_remount_token = $state(0)
+  let remount_timer: ReturnType<typeof setTimeout> | undefined
+  let recovery_reset_timer: ReturnType<typeof setTimeout> | undefined
+  let recovery_attempts = 0
+  let recovery_failed = $state(false)
+
+  const create_renderer = (canvas: HTMLCanvasElement) => {
+    canvas.addEventListener(`webglcontextlost`, () => {
+      // canvas.isConnected is false when the loss came from our own dispose()
+      // (component unmounted), not from browser eviction
+      if (!canvas.isConnected) return
+      clearTimeout(recovery_reset_timer)
+      if (recovery_attempts >= 3) {
+        recovery_failed = true
+        return
+      }
+      recovery_attempts += 1
+      remount_timer = setTimeout(() => (canvas_remount_token += 1), 1000)
+    })
+    canvas.addEventListener(`webglcontextrestored`, () => {
+      clearTimeout(remount_timer)
+      recovery_attempts = 0
+      recovery_failed = false
+    })
+    const renderer = new StructureRenderer({
       canvas,
       powerPreference: `high-performance`,
       antialias: true,
       alpha: true,
     })
+    // Reset only after a stable remount; an immediate reset would allow
+    // endless eviction ping-pong while the page exceeds its context budget.
+    recovery_reset_timer = setTimeout(() => (recovery_attempts = 0), 5000)
+    return renderer
+  }
 
   let {
     // Multi-view chrome
@@ -74,6 +108,8 @@
     lattice_props = {},
     volumetric_data = undefined,
     isosurface_settings = undefined,
+    active_volume_idx = 0,
+    volume_scaling = [1, 1, 1],
     bond_edits_enabled = true,
     bond_edit_order = 1,
     measure_mode = `distance`,
@@ -126,8 +162,10 @@
     scene_props?: ComponentProps<typeof StructureScene>
     gizmo?: boolean | ComponentProps<typeof StructureScene>[`gizmo`]
     lattice_props?: ComponentProps<typeof StructureScene>[`lattice_props`]
-    volumetric_data?: VolumetricData
+    volumetric_data?: VolumetricData | VolumetricData[]
     isosurface_settings?: IsosurfaceSettings
+    active_volume_idx?: number
+    volume_scaling?: Vec3
     bond_edits_enabled?: boolean
     bond_edit_order?: BondOrder
     measure_mode?: MeasureMode
@@ -275,6 +313,11 @@
       return
     reset_camera()
   }
+
+  $effect(() => () => {
+    clearTimeout(remount_timer)
+    clearTimeout(recovery_reset_timer)
+  })
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -289,57 +332,69 @@
   ondblclick={handle_dblclick}
 >
   {#if label}<span class="viewport-label">{label}</span>{/if}
-  <Canvas createRenderer={create_renderer}>
-    <StructureScene
-      {structure}
-      {base_structure}
-      {...scene_props}
-      {...in_grid ? { auto_rotate: 0 } : {}}
-      {camera_position}
-      {camera_target}
-      {camera_projection}
-      {camera_direction}
-      {interactive}
-      gizmo={gizmo_prop}
-      {lattice_props}
-      {volumetric_data}
-      {isosurface_settings}
-      bind:camera_is_moving
-      bind:selected_sites
-      {active_sites}
-      bind:hovered_idx={hovered_site_idx}
-      bind:measured_sites
-      bind:scene
-      bind:camera
-      bind:orbit_controls
-      bind:rotation_target_ref
-      bind:initial_computed_zoom
-      bind:hidden_elements
-      bind:hidden_prop_vals
-      bind:element_radius_overrides
-      bind:site_radius_overrides
-      bind:added_bonds
-      bind:removed_bonds
-      bind:bond_order_overrides
-      {bond_edits_enabled}
-      bind:bond_edit_mode
-      {bond_edit_order}
-      {measure_mode}
-      {width}
-      {height}
-      {atom_color_config}
-      {sym_data}
-      {on_sites_moved}
-      {on_operation_start}
-      {on_bond_edit_start}
-      {on_add_atom}
-      bind:add_atom_mode
-      bind:add_element
-      bind:cursor
-      bind:dragging_atoms
-      bind:polyhedra_rendered_elements
-    />
-  </Canvas>
+  {#if recovery_failed}
+    <div class="context-recovery-error">
+      <StatusMessage
+        message="Unable to restore the 3D view after repeated WebGL context loss. Reload the page to retry."
+        type="error"
+      />
+    </div>
+  {/if}
+  {#key canvas_remount_token}
+    <Canvas createRenderer={create_renderer}>
+      <StructureScene
+        {structure}
+        {base_structure}
+        {...scene_props}
+        {...in_grid ? { auto_rotate: 0 } : {}}
+        {camera_position}
+        {camera_target}
+        {camera_projection}
+        {camera_direction}
+        {interactive}
+        gizmo={gizmo_prop}
+        {lattice_props}
+        {volumetric_data}
+        {isosurface_settings}
+        {active_volume_idx}
+        {volume_scaling}
+        bind:camera_is_moving
+        bind:selected_sites
+        {active_sites}
+        bind:hovered_idx={hovered_site_idx}
+        bind:measured_sites
+        bind:scene
+        bind:camera
+        bind:orbit_controls
+        bind:rotation_target_ref
+        bind:initial_computed_zoom
+        bind:hidden_elements
+        bind:hidden_prop_vals
+        bind:element_radius_overrides
+        bind:site_radius_overrides
+        bind:added_bonds
+        bind:removed_bonds
+        bind:bond_order_overrides
+        {bond_edits_enabled}
+        bind:bond_edit_mode
+        {bond_edit_order}
+        {measure_mode}
+        {width}
+        {height}
+        {atom_color_config}
+        {sym_data}
+        {on_sites_moved}
+        {on_operation_start}
+        {on_bond_edit_start}
+        {on_add_atom}
+        bind:add_atom_mode
+        bind:add_element
+        bind:cursor
+        bind:dragging_atoms
+        bind:polyhedra_rendered_elements
+      />
+    </Canvas>
+  {/key}
 </div>
 
 <style>
@@ -368,7 +423,7 @@
     position: absolute;
     top: 3px;
     left: 5px;
-    z-index: 1;
+    z-index: var(--z-index-viewer-label, 1);
     pointer-events: none;
     font-size: var(--struct-viewport-label-font-size, 0.8em);
     font-weight: 500;
@@ -380,6 +435,16 @@
       color-mix(in srgb, var(--page-bg, Canvas) 65%, transparent)
     );
   }
+  .context-recovery-error {
+    position: absolute;
+    inset: 0;
+    z-index: var(--z-index-viewer-tooltip, 1000);
+    display: grid;
+    place-items: center;
+    padding: 1em;
+    pointer-events: none;
+    will-change: transform;
+  }
   .viewport-cell :global(canvas) {
     cursor: var(--canvas-cursor, default);
   }

package/dist/structure/StructureViewport.svelte.d.ts

@@ -24,8 +24,10 @@ type $$ComponentProps = {
     scene_props?: ComponentProps<typeof StructureScene>;
     gizmo?: boolean | ComponentProps<typeof StructureScene>[`gizmo`];
     lattice_props?: ComponentProps<typeof StructureScene>[`lattice_props`];
-    volumetric_data?: VolumetricData;
+    volumetric_data?: VolumetricData | VolumetricData[];
     isosurface_settings?: IsosurfaceSettings;
+    active_volume_idx?: number;
+    volume_scaling?: Vec3;
     bond_edits_enabled?: boolean;
     bond_edit_order?: BondOrder;
     measure_mode?: MeasureMode;

package/dist/structure/atom-properties.d.ts

@@ -1,5 +1,5 @@
 import type { ColorScaleType, D3InterpolateName } from '../colors';
-import { type CoordinationData } from '../coordination/calc-coordination';
+import type { CoordinationData } from '../coordination/calc-coordination';
 import type { AtomColorMode } from '../settings';
 import type { AnyStructure, Site } from './';
 import type { BondingStrategy } from './bonding';

package/dist/structure/atom-properties.js

@@ -1,8 +1,9 @@
 // Utility functions for computing atom properties and applying color scales
 import { get_d3_interpolator } from '../colors';
-import { calc_coordination_nums, } from '../coordination/calc-coordination';
+import { calc_coordination_nums } from '../coordination/calc-coordination';
+import { element_by_symbol } from '../element/data';
 import * as math from '../math';
-import { element_lookup, get_majority_element } from './bonding';
+import { get_majority_element } from './bonding';
 import { wrap_frac_coord } from './pbc';
 import { rgb } from 'd3-color';
 import * as d3_sc from 'd3-scale-chromatic';
@@ -106,7 +107,7 @@ function expand_structure_for_pbc(structure, strategy) {
     // Covalent radius per atom (0 = unknown → forms no bonds → needs no images)
     const radii = cell_sites.map((site) => {
         const elem = get_majority_element(site);
-        return (elem ? element_lookup.get(elem)?.covalent_radius : undefined) ?? 0;
+        return (elem ? element_by_symbol.get(elem)?.covalent_radius : undefined) ?? 0;
     });
     let max_radius = 0;
     for (const radius of radii)

package/dist/structure/bond-order-perception.js

@@ -52,12 +52,10 @@ function formal_charge(symbol, bond_valence) {
 const is_main_group = (symbol) => symbol in ATOMIC_VALENCE;
 // Cap per-fragment valence enumeration (3^k for catenated S/Se/Te/P chains).
 const MAX_VALENCE_COMBOS = 4096;
+// Edges are bounds-checked by perceive_bond_orders before reaching here.
 function split_fragments(n_atoms, edges) {
     const adjacency = Array.from({ length: n_atoms }, () => []);
     for (const [atom_idx_1, atom_idx_2] of edges) {
-        if (adjacency[atom_idx_1] === undefined || adjacency[atom_idx_2] === undefined) {
-            throw new Error(`Invalid edge ${atom_idx_1}-${atom_idx_2} for ${n_atoms} atoms`);
-        }
         adjacency[atom_idx_1].push(atom_idx_2);
         adjacency[atom_idx_2].push(atom_idx_1);
     }
@@ -140,9 +138,6 @@ function assign_bond_orders(edges, target_valence) {
 function find_rings(n_atoms, edges) {
     const adjacency = Array.from({ length: n_atoms }, () => new Set());
     for (const [atom_idx_1, atom_idx_2] of edges) {
-        if (adjacency[atom_idx_1] === undefined || adjacency[atom_idx_2] === undefined) {
-            throw new Error(`Invalid edge ${atom_idx_1}-${atom_idx_2} for ${n_atoms} atoms`);
-        }
         adjacency[atom_idx_1].add(atom_idx_2);
         adjacency[atom_idx_2].add(atom_idx_1);
     }
@@ -200,7 +195,6 @@ function find_rings(n_atoms, edges) {
     }
     return [...uniq.values()];
 }
-const order_to_bond_order = (order) => order >= 3 ? 3 : order === 2 ? 2 : 1;
 // Conservative planarity check: degenerate first-3-atom planes are non-planar.
 function ring_is_planar(ring, sites) {
     if (ring.length < 3)
@@ -294,7 +288,8 @@ export function perceive_bond_orders(sites, bonds, opts = {}) {
         if (!solved)
             continue;
         local_edges.forEach((edge, edge_idx) => {
-            const order = order_to_bond_order(solved[edge_idx]);
+            const solved_order = solved[edge_idx];
+            const order = solved_order >= 3 ? 3 : solved_order === 2 ? 2 : 1;
             result.set(edge.bond, { ...edge.bond, bond_order: order, perceived: true });
         });
         // Hückel aromatic post-pass, retaining Kekulé orders for display toggles.

package/dist/structure/bonding.d.ts

@@ -1,7 +1,6 @@
 import type { ElementSymbol } from '../element';
 import type { Vec3 } from '../math';
 import type { AnyStructure, BondOrder, BondPair, Site, StructureBond } from './';
-export declare const element_lookup: Map<"Ac" | "Ag" | "Al" | "Am" | "Ar" | "As" | "At" | "Au" | "B" | "Ba" | "Be" | "Bh" | "Bi" | "Bk" | "Br" | "C" | "Ca" | "Cd" | "Ce" | "Cf" | "Cl" | "Cm" | "Co" | "Cr" | "Cs" | "Cu" | "Db" | "Dy" | "Er" | "Es" | "Eu" | "F" | "Fe" | "Fm" | "Fr" | "Ga" | "Gd" | "Ge" | "H" | "He" | "Hf" | "Hg" | "Ho" | "Hs" | "I" | "In" | "Ir" | "K" | "Kr" | "La" | "Li" | "Lr" | "Lu" | "Md" | "Mg" | "Mn" | "Mo" | "Mt" | "N" | "Na" | "Nb" | "Nd" | "Ne" | "Ni" | "No" | "Np" | "O" | "Os" | "P" | "Pa" | "Pb" | "Pd" | "Pm" | "Po" | "Pr" | "Pt" | "Pu" | "Ra" | "Rb" | "Re" | "Rf" | "Rh" | "Rn" | "Ru" | "S" | "Sb" | "Sc" | "Se" | "Sg" | "Si" | "Sm" | "Sn" | "Sr" | "Ta" | "Tb" | "Tc" | "Te" | "Th" | "Ti" | "Tl" | "Tm" | "U" | "V" | "W" | "Xe" | "Y" | "Yb" | "Zn" | "Zr" | "Ds" | "Rg" | "Cn" | "Nh" | "Fl" | "Mc" | "Lv" | "Ts" | "Og", import("../element").ChemicalElement>;
 export declare const get_majority_element: (site: Site | undefined) => ElementSymbol | null;
 export declare const is_spectator_center: (element: string) => boolean;
 export declare function has_framework_potential(elements: Iterable<string>): boolean;

package/dist/structure/bonding.js

@@ -1,8 +1,6 @@
 // Bonding algorithms for structure visualization
-import { default as element_data } from '../element/data';
+import element_data, { element_by_symbol } from '../element/data';
 import * as math from '../math';
-// Shared per-symbol element data lookup (also used by pbc.ts and polyhedra.ts)
-export const element_lookup = new Map(element_data.map((el) => [el.symbol, el]));
 const covalent_radii = new Map(element_data.flatMap((el) => el.covalent_radius === null ? [] : [[el.symbol, el.covalent_radius]]));
 // Majority-occupancy element of a (possibly disordered) site
 export const get_majority_element = (site) => {
@@ -17,9 +15,8 @@ export const get_majority_element = (site) => {
 // or when force-included via `included_center_elements`. Shared by polyhedra.ts
 // (vertex/center selection) and pbc.ts (phase-2 boundary completion) so the bond
 // graph and the polyhedra it feeds stay consistent.
-const SPECTATOR_CATEGORIES = new Set([`alkali metal`]);
 const HEAVY_ALKALINE_EARTHS = new Set([`Ca`, `Sr`, `Ba`, `Ra`]);
-export const is_spectator_center = (element) => SPECTATOR_CATEGORIES.has(element_lookup.get(element)?.category ?? ``) ||
+export const is_spectator_center = (element) => element_by_symbol.get(element)?.category === `alkali metal` ||
     HEAVY_ALKALINE_EARTHS.has(element);
 // True if the composition contains a framework cation: a non-spectator element
 // strictly less electronegative than the most electronegative element present
@@ -32,23 +29,18 @@ export function has_framework_potential(elements) {
     const els = [...new Set(elements)]; // dedupe so callers can pass per-site element lists
     let max_en = -Infinity;
     for (const el of els) {
-        const en = element_lookup.get(el)?.electronegativity;
+        const en = element_by_symbol.get(el)?.electronegativity;
         if (en != null && en > max_en)
             max_en = en;
     }
     return els.some((el) => {
         if (is_spectator_center(el))
             return false;
-        const en = element_lookup.get(el)?.electronegativity;
+        const en = element_by_symbol.get(el)?.electronegativity;
         return en != null && en < max_en;
     });
 }
 const is_zero_cell_shift = (cell_shift) => cell_shift === undefined || cell_shift.every((val) => val === 0);
-const format_cell_shift = (cell_shift) => {
-    if (cell_shift === undefined || is_zero_cell_shift(cell_shift))
-        return ``;
-    return `@${cell_shift.join(`,`)}`;
-};
 const negate_cell_shift = (cell_shift) => [
     cell_shift[0] === 0 ? 0 : -cell_shift[0],
     cell_shift[1] === 0 ? 0 : -cell_shift[1],
@@ -83,7 +75,10 @@ export const normalize_structure_bond = (site_idx_1, site_idx_2, order, cell_shi
 };
 export const get_bond_key = (idx_1, idx_2, cell_shift) => {
     const normalized = normalize_bond_endpoints(idx_1, idx_2, cell_shift);
-    return `${normalized.site_idx_1}-${normalized.site_idx_2}${format_cell_shift(normalized.cell_shift)}`;
+    const shift_suffix = normalized.cell_shift === undefined || is_zero_cell_shift(normalized.cell_shift)
+        ? ``
+        : `@${normalized.cell_shift.join(`,`)}`;
+    return `${normalized.site_idx_1}-${normalized.site_idx_2}${shift_suffix}`;
 };
 // Remap explicit bond metadata after site deletion: drop bonds touching deleted
 // sites and shift each surviving index down by the number of deleted indices below it.
@@ -280,7 +275,6 @@ export const merge_bond_edits = (base_bonds, added, removed, overrides) => {
     }
     return [...merged.values()];
 };
-const is_record = (value) => typeof value === `object` && value !== null;
 export function normalize_bond_order(order) {
     if (order === `aromatic`)
         return order;
@@ -338,13 +332,14 @@ export function get_explicit_bond_metadata(structure) {
     }
     const explicit_bonds = new Map();
     for (const [entry_idx, raw_bond] of raw_bonds.entries()) {
-        if (!is_record(raw_bond)) {
+        if (typeof raw_bond !== `object` || raw_bond === null) {
             console.warn(`Ignoring invalid explicit bond at index ${entry_idx}: expected object`);
             continue;
         }
-        const { order } = raw_bond;
-        const site_idx_1 = raw_bond.site_idx_1;
-        const site_idx_2 = raw_bond.site_idx_2;
+        const bond_record = raw_bond;
+        const { order } = bond_record;
+        const site_idx_1 = bond_record.site_idx_1;
+        const site_idx_2 = bond_record.site_idx_2;
         if (typeof site_idx_1 !== `number` ||
             typeof site_idx_2 !== `number` ||
             !Number.isInteger(site_idx_1) ||
@@ -364,7 +359,7 @@ export function get_explicit_bond_metadata(structure) {
             console.warn(`Ignoring invalid explicit bond at index ${entry_idx}: unsupported order ${String(order)}`);
             continue;
         }
-        const cell_shift = normalize_cell_shift(raw_bond.cell_shift);
+        const cell_shift = normalize_cell_shift(bond_record.cell_shift);
         if (cell_shift === null) {
             console.warn(`Ignoring invalid explicit bond at index ${entry_idx}: cell_shift must be three integers`);
             continue;
@@ -373,9 +368,7 @@ export function get_explicit_bond_metadata(structure) {
             console.warn(`Ignoring invalid explicit bond at index ${entry_idx}: endpoints match`);
             continue;
         }
-        if (cell_shift !== undefined &&
-            !is_zero_cell_shift(cell_shift) &&
-            !(`lattice` in structure)) {
+        if (!is_zero_cell_shift(cell_shift) && !(`lattice` in structure)) {
             console.warn(`Ignoring invalid explicit bond at index ${entry_idx}: cell_shift requires a crystal lattice`);
             continue;
         }
@@ -650,7 +643,7 @@ center_count = Infinity, } = {}) {
     const elem_id_lookup = new Map();
     for (let idx = 0; idx < n_sites; idx++) {
         const elem = get_majority_element(sites[idx]);
-        const data = elem ? element_lookup.get(elem) : undefined;
+        const data = elem ? element_by_symbol.get(elem) : undefined;
         electronegs[idx] = data?.electronegativity ?? 2.0;
         metal_flags[idx] = data?.metal ? 1 : 0;
         nonmetal_flags[idx] = data?.nonmetal ? 1 : 0;

package/dist/structure/export.js

@@ -6,22 +6,15 @@ import { Color, Group, Matrix4, Mesh, MeshStandardMaterial, ShaderMaterial } fro
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js';
 // @internal exported only for tests - not part of the public API.
-// Type guard to check if a material has a color property (duck typing for bundler
-// compatibility across different Three.js instances - Threlte vs vanilla Three.js).
+// Type guard to check if a material has a Color-like property with numeric r/g/b
+// channels (duck typing for bundler compatibility across different Three.js
+// instances - Threlte vs vanilla Three.js).
 export function has_color_property(mat) {
-    if (!(`color` in mat))
-        return false;
     const color = mat.color;
     if (!color || typeof color !== `object`)
         return false;
-    // Check for Color-like object with numeric r/g/b channels (duck typing)
-    const color_obj = color;
-    const red_channel = color_obj.r;
-    const green_channel = color_obj.g;
-    const blue_channel = color_obj.b;
-    return (typeof red_channel === `number` &&
-        typeof green_channel === `number` &&
-        typeof blue_channel === `number`);
+    const { r: red, g: green, b: blue } = color;
+    return typeof red === `number` && typeof green === `number` && typeof blue === `number`;
 }
 // Extract color from a ShaderMaterial by checking common color uniform patterns
 function extract_shader_color(shader_mat) {
@@ -34,8 +27,8 @@ function extract_shader_color(shader_mat) {
             return uniforms[key].value.clone();
         }
     }
-    // For gradient bonds, try to extract midpoint color from instanceColorStart/End attributes
-    // These are set as geometry attributes, not uniforms, so we return a default gray
+    // Gradient bonds store colors as instanceColorStart/End geometry attributes,
+    // not uniforms — nothing to extract here (caller falls back to gray)
     return null;
 }
 // Convert ShaderMaterial to MeshStandardMaterial for export compatibility
@@ -146,13 +139,6 @@ export function generate_mtl_content(scene) {
     });
     return lines.join(`\n`);
 }
-// Extract color from material, returning RGB values or null if not found
-function extract_material_color(mat) {
-    if (has_color_property(mat)) {
-        return { r: mat.color.r, g: mat.color.g, b: mat.color.b };
-    }
-    return null;
-}
 // Helper function to convert InstancedMesh to regular Mesh objects for export
 // This is necessary because GLB/OBJ exporters don't handle InstancedMesh properly
 // Note: Threlte's InstancedMesh sets isInstancedMesh=true but type remains "Mesh"
@@ -209,25 +195,29 @@ export function convert_instanced_meshes_to_regular(scene) {
         else {
             // Extract shared material color for atoms
             const single_mat = Array.isArray(mat) ? mat[0] : mat;
-            const color = extract_material_color(single_mat);
-            if (color) {
-                material_colors.set(mesh_id, color);
+            if (has_color_property(single_mat)) {
+                material_colors.set(mesh_id, {
+                    r: single_mat.color.r,
+                    g: single_mat.color.g,
+                    b: single_mat.color.b,
+                });
             }
         }
     });
     // STEP 2: Clone the scene
     const cloned_scene = scene.clone();
-    // STEP 3: Find all InstancedMesh objects in the cloned scene and build uuid mapping
-    const original_meshes = [];
-    const cloned_meshes = [];
-    scene.traverse((object) => {
-        if (is_instanced_mesh(object))
-            original_meshes.push(object);
-    });
-    cloned_scene.traverse((object) => {
-        if (is_instanced_mesh(object))
-            cloned_meshes.push(object);
-    });
+    // STEP 3: Find all InstancedMesh objects in original + cloned scene (same traversal
+    // order) to map cloned meshes back to their original uuid
+    const collect_instanced = (root) => {
+        const meshes = [];
+        root.traverse((object) => {
+            if (is_instanced_mesh(object))
+                meshes.push(object);
+        });
+        return meshes;
+    };
+    const original_meshes = collect_instanced(scene);
+    const cloned_meshes = collect_instanced(cloned_scene);
     // STEP 4: Convert each InstancedMesh to individual Mesh objects
     for (let mesh_idx = 0; mesh_idx < cloned_meshes.length; mesh_idx++) {
         const instanced_mesh = cloned_meshes[mesh_idx];
@@ -329,26 +319,18 @@ export function create_structure_filename(structure, extension) {
     if (formula && formula !== `Unknown`) {
         safe_push(formula.replaceAll(` `, ``));
     }
-    // Add space group if available
-    if (`symmetry` in structure &&
-        structure.symmetry &&
-        typeof structure.symmetry === `object` &&
-        `space_group_symbol` in structure.symmetry) {
-        const space_group = structure.symmetry.space_group_symbol;
-        if (space_group && typeof space_group === `string`) {
-            safe_push(space_group.replaceAll(` `, ``));
-        }
-    }
-    // Add lattice system if available
-    if (`lattice` in structure &&
-        structure.lattice &&
-        typeof structure.lattice === `object` &&
-        `lattice_system` in structure.lattice) {
-        const lattice_system = structure.lattice.lattice_system;
-        if (lattice_system && typeof lattice_system === `string`) {
-            safe_push(lattice_system);
-        }
+    // Add space group and lattice system if available
+    const symmetry = `symmetry` in structure && is_plain_object(structure.symmetry)
+        ? structure.symmetry
+        : undefined;
+    if (typeof symmetry?.space_group_symbol === `string`) {
+        safe_push(symmetry.space_group_symbol.replaceAll(` `, ``));
     }
+    const lattice = `lattice` in structure && is_plain_object(structure.lattice)
+        ? structure.lattice
+        : undefined;
+    if (lattice && `lattice_system` in lattice && typeof lattice.lattice_system === `string`)
+        safe_push(lattice.lattice_system);
     // Add number of sites
     if (structure.sites?.length)
         parts.push(`${structure.sites.length}sites`);
@@ -465,21 +447,14 @@ export function structure_to_cif_str(structure) {
     }
     const lines = [];
     // CIF header with data block (required by pymatgen and CIF spec)
-    lines.push(`# CIF file generated by MatterViz`);
-    const block_name = get_cif_block_name(structure);
-    lines.push(`data_${block_name}`);
-    lines.push(``);
+    lines.push(`# CIF file generated by MatterViz`, `data_${get_cif_block_name(structure)}`, ``);
     // Cell parameters
     const lattice = structure.lattice;
     if (lattice.a && lattice.b && lattice.c) {
-        lines.push(`_cell_length_a ${lattice.a.toFixed(6)}`);
-        lines.push(`_cell_length_b ${lattice.b.toFixed(6)}`);
-        lines.push(`_cell_length_c ${lattice.c.toFixed(6)}`);
+        lines.push(`_cell_length_a ${lattice.a.toFixed(6)}`, `_cell_length_b ${lattice.b.toFixed(6)}`, `_cell_length_c ${lattice.c.toFixed(6)}`);
     }
     if (lattice.alpha && lattice.beta && lattice.gamma) {
-        lines.push(`_cell_angle_alpha ${lattice.alpha.toFixed(6)}`);
-        lines.push(`_cell_angle_beta ${lattice.beta.toFixed(6)}`);
-        lines.push(`_cell_angle_gamma ${lattice.gamma.toFixed(6)}`);
+        lines.push(`_cell_angle_alpha ${lattice.alpha.toFixed(6)}`, `_cell_angle_beta ${lattice.beta.toFixed(6)}`, `_cell_angle_gamma ${lattice.gamma.toFixed(6)}`);
     }
     // Space group information
     if (`symmetry` in structure && is_plain_object(structure.symmetry)) {
@@ -498,13 +473,7 @@ export function structure_to_cif_str(structure) {
     // full P1 list, so without it parsers would re-apply the H-M ops and multiply sites
     lines.push(`loop_`, `_symmetry_equiv_pos_as_xyz`, `  'x, y, z'`, ``);
     // Atom site loop header
-    lines.push(`loop_`);
-    lines.push(`_atom_site_label`);
-    lines.push(`_atom_site_type_symbol`);
-    lines.push(`_atom_site_fract_x`);
-    lines.push(`_atom_site_fract_y`);
-    lines.push(`_atom_site_fract_z`);
-    lines.push(`_atom_site_occupancy`);
+    lines.push(`loop_`, `_atom_site_label`, `_atom_site_type_symbol`, `_atom_site_fract_x`, `_atom_site_fract_y`, `_atom_site_fract_z`, `_atom_site_occupancy`);
     // Cache inverse transpose for Cartesian→fractional conversion (avoids recomputing per site)
     const cart_to_frac = lattice.matrix?.length === 3 ? math.create_cart_to_frac(lattice.matrix) : null;
     // Atom sites: one row per species entry so disordered (multi-species) sites
@@ -580,16 +549,23 @@ export function structure_to_poscar_str(structure) {
     for (const group of sites_by_element.values()) {
         for (const site of group) {
             const frac_coords = get_frac_coords(site, cart_to_frac);
-            let selective_dynamics_str = ``;
+            const coords_str = frac_coords
+                .slice(0, 3)
+                .map((coord) => coord.toFixed(8))
+                .join(` `);
+            let sel_dyn_str = ``;
             if (has_selective_dynamics) {
                 const sel_dyn = (site.properties?.selective_dynamics ?? [
                     true,
                     true,
                     true,
                 ]);
-                selective_dynamics_str = ` ${sel_dyn[0] ? `T` : `F`} ${sel_dyn[1] ? `T` : `F`} ${sel_dyn[2] ? `T` : `F`}`;
+                sel_dyn_str = ` ${sel_dyn
+                    .slice(0, 3)
+                    .map((flag) => (flag ? `T` : `F`))
+                    .join(` `)}`;
             }
-            lines.push(`${frac_coords[0].toFixed(8)} ${frac_coords[1].toFixed(8)} ${frac_coords[2].toFixed(8)}${selective_dynamics_str}`);
+            lines.push(`${coords_str}${sel_dyn_str}`);
         }
     }
     return lines.join(`\n`);