matterviz 0.4.2 → 0.4.3

package/dist/structure/Structure.svelte

@@ -6,14 +6,17 @@
   import { StatusMessage } from '../feedback'
   import Spinner from '../feedback/Spinner.svelte'
   import Icon from '../Icon.svelte'
-  import { create_file_drop_handler, drag_over_handlers, load_from_url } from '../io'
+  import * as io from '../io'
   import { forward_window_keydown, handle_and_prevent } from '../keyboard'
   import { parse_volumetric_file } from '../isosurface/parse'
   import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types'
   import {
     auto_isosurface_settings,
     DEFAULT_ISOSURFACE_SETTINGS,
-    tile_volumetric_data,
+    label_file_volumes,
+    lattices_match,
+    materialize_layers,
+    merge_imported_volumes,
   } from '../isosurface/types'
   import { type FullscreenToggleProp, toggle_fullscreen, ViewerChrome } from '../layout'
   import { sync_fullscreen } from '../layout/fullscreen.svelte'
@@ -302,23 +305,39 @@
   // completions so a newer data_url (or an externally-supplied structure, via the cleanup)
   // can't be clobbered by a slow earlier fetch.
   let data_url_load_id = 0
+  let loaded_data_url: string | undefined
+  let url_owned_structure: AnyStructure | undefined
+
   $effect(() => {
-    if (!data_url || structure) return
+    const requested_url = data_url
+    const current_structure = structure
+    // Host on_file_drop owns the structure; don't treat it as caller-owned cancel.
+    const caller_owns_structure = Boolean(
+      !on_file_drop && current_structure && current_structure !== url_owned_structure,
+    )
+    if (!requested_url || caller_owns_structure) {
+      loaded_data_url = undefined
+      url_owned_structure = undefined
+      return
+    }
+    if (loaded_data_url === requested_url) return
+
     const load_id = ++data_url_load_id
     const is_current = () => load_id === data_url_load_id
     loading = true
     error_msg = undefined
 
-    load_from_url(data_url, (content, filename) => {
+    io.load_from_url(requested_url, (content, filename) => {
       if (!is_current()) return // stale response
-      if (on_file_drop) on_file_drop(content, filename)
-      else {
+      if (on_file_drop) {
+        on_file_drop(content, filename)
+        loaded_data_url = requested_url
+      } 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)
+          parse_and_emit_file(content, filename)
+          url_owned_structure = structure
+          loaded_data_url = requested_url
         } catch (error) {
           error_msg = `Failed to parse structure: ${to_error(error).message}`
           on_error?.({ error_msg, filename })
@@ -329,7 +348,7 @@
         if (!is_current()) return
         console.error(`Failed to load structure from URL:`, error)
         error_msg = `Failed to load structure: ${error.message}`
-        on_error?.({ error_msg, filename: data_url })
+        on_error?.({ error_msg, filename: io.basename_from_url(requested_url) })
       })
       .finally(() => {
         if (is_current()) loading = false
@@ -680,6 +699,14 @@
   // 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
+  // Claim URL ownership before regular effects so internal edits aren't treated as caller-owned.
+  $effect.pre(() => {
+    void structure
+    if (is_internal_edit && loaded_data_url && loaded_data_url === data_url && structure) {
+      url_owned_structure = structure
+    }
+  })
+
   // Add-atom sub-mode state (bound to StructureScene)
   let add_atom_mode = $state(false)
   let add_element = $state<ElementSymbol>(`C` as ElementSymbol)
@@ -830,7 +857,9 @@
   $effect(() => {
     viewer_active = hovered || focused
   })
-  let scene_gizmo = $derived(viewer_active && (scene_props.gizmo ?? scene_props.show_gizmo))
+  // Keep the gizmo mounted whenever enabled — toggling via `{#if gizmo}` on hover remounts
+  // OrbitControls/Gizmo and resets camera rotation. Visibility is CSS-gated by `gizmo-visible`.
+  let scene_gizmo = $derived(scene_props.gizmo ?? scene_props.show_gizmo)
   let active_scene_sites = $derived([
     ...new SvelteSet([...(scene_props.active_sites ?? []), ...highlighted_sites]),
   ])
@@ -898,16 +927,16 @@
     })
   })
 
-  // 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
+  // Supercell tiling factors for isosurface geometry (tiling itself happens in
+  // the Isosurface component so color sampling can use the untiled full-res
+  // volumes). Gate on !supercell_loading so tiled surfaces and the supercell
+  // structure update in the same frame (large supercells defer via setTimeout).
+  let volume_scaling = $derived.by((): Vec3 => {
+    if (!has_supercell || supercell_loading) return [1, 1, 1]
     try {
-      return tile_volumetric_data(vol, parse_supercell_scaling(supercell_scaling))
+      return parse_supercell_scaling(supercell_scaling)
     } catch {
-      return vol
+      return [1, 1, 1]
     }
   })
 
@@ -1034,7 +1063,9 @@
     scene_props,
     gizmo: scene_gizmo,
     lattice_props,
-    volumetric_data: supercell_volume,
+    volumetric_data,
+    volume_scaling,
+    active_volume_idx,
     isosurface_settings,
     bond_edits_enabled,
     bond_edit_order,
@@ -1100,18 +1131,65 @@
       total_atoms: loaded_structure.sites?.length || 0,
     })
 
+  // The currently loaded structure's lattice matrix (undefined for molecules/none)
+  const current_lattice_matrix = () =>
+    structure && `lattice` in structure ? structure.lattice.matrix : undefined
+  const shares_current_lattice = (matrix: Parameters<typeof lattices_match>[1]): boolean =>
+    lattices_match(current_lattice_matrix(), matrix)
+
   // 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).
+  // When the file describes the same cell as already-loaded volumes, its volumes are
+  // APPENDED (or replaced in place on re-import of the same source file) so multiple
+  // fields — e.g. density + ESP — coexist and can cross-color each other's isosurfaces.
+  // A file with a different lattice replaces the current structure and volumes.
   // 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
+
+    const incoming = label_file_volumes(vol_result.volumes, filename)
+    const same_cell = shares_current_lattice(vol_result.structure.lattice?.matrix)
+    const added_toast = (count: number) =>
+      `Added ${count} volume${count > 1 ? `s` : ``} from ${filename}`
+
+    if (same_cell && structure) {
+      // Same cell: keep the structure and camera, only update volumes
+      if (volumetric_data?.length) {
+        // Materialize the implicit single surface into explicit layers so existing
+        // surfaces survive the transition to multi-volume mode
+        const merged = merge_imported_volumes(
+          volumetric_data,
+          materialize_layers(isosurface_settings, active_volume_idx),
+          incoming,
+          active_volume_idx,
+        )
+        volumetric_data = merged.volumes
+        isosurface_settings = { ...isosurface_settings, layers: merged.layers }
+        active_volume_idx = merged.first_touched_idx
+        show_toast(
+          merged.n_added > 0
+            ? added_toast(merged.n_added)
+            : `Reloaded volumes from ${filename}`,
+        )
+      } else if (incoming[0]) {
+        // First volumetric file for this structure
+        volumetric_data = incoming
+        isosurface_settings = auto_isosurface_settings(incoming[0].data_range)
+        active_volume_idx = 0
+        show_toast(added_toast(incoming.length))
+      }
+      return structure
+    }
+
+    // Replace: new system (or nothing loaded yet)
+    clear_camera_state()
     // parse_volumetric_file extracts structure from file header;
     // parsers set pbc so the lattice conforms to Crystal's LatticeType
     structure = vol_result.structure as AnyStructure
-    volumetric_data = vol_result.volumes
+    volumetric_data = incoming
     // Auto-compute reasonable isosurface settings from data range
-    const vol = vol_result.volumes[0]
+    const vol = incoming[0]
     if (vol) {
       isosurface_settings = auto_isosurface_settings(vol.data_range)
       active_volume_idx = 0
@@ -1122,30 +1200,36 @@
   // 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}`)
+    // Keep loaded volumes and camera when the new structure describes the same
+    // cell (e.g. a mixed batch drop of CHGCAR + POSCAR, in either order);
+    // clear both for a genuinely new system
+    const same_cell = shares_current_lattice(
+      `lattice` in parsed ? parsed.lattice?.matrix : undefined,
+    )
+    if (!same_cell) {
+      clear_camera_state()
+      volumetric_data = []
+    }
     structure = parsed
     return parsed
   }
 
-  const handle_file_drop = create_file_drop_handler({
+  function parse_and_emit_file(content: string | ArrayBuffer, filename: string): void {
+    const text = content instanceof ArrayBuffer ? new TextDecoder().decode(content) : content
+    emit_file_load_event(parse_file_content(text, filename), filename, content)
+  }
+
+  const handle_file_drop = io.create_file_drop_handler({
     allow: () => allow_file_drop,
+    // Parse errors propagate so multi-file batches aggregate all failures into
+    // one message instead of the last error overwriting earlier ones
     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: ${to_error(err).message}`
-        on_error?.({ error_msg, filename })
-      }
+      parse_and_emit_file(content, filename)
     },
     on_error: (msg) => {
       error_msg = msg
@@ -1470,13 +1554,14 @@
 
   // Only set background override when background_color is explicitly provided
   $effect(() => {
-    if (typeof window !== `undefined` && wrapper && background_color) {
+    if (!wrapper) return
+    if (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) {
+    } else {
       // Remove override to use theme system
       wrapper.style.removeProperty(`--struct-bg-override`)
     }
@@ -1500,7 +1585,7 @@
 <div
   class:dragover
   class:active={info_pane_open || controls_open || export_pane_open}
-  class:gizmo-visible={Boolean(scene_gizmo)}
+  class:gizmo-visible={viewer_active && Boolean(scene_gizmo)}
   class:multi-view={multi_view}
   role="application"
   tabindex="0"
@@ -1517,7 +1602,7 @@
     }
   }}
   ondrop={handle_file_drop}
-  {...drag_over_handlers({
+  {...io.drag_over_handlers({
     allow: () => allow_file_drop,
     set_dragover: (over) => (dragover = over),
   })}
@@ -1555,7 +1640,7 @@
       fullscreen_btn_style="padding: 0 3px"
       {wrapper}
       before={reset_camera_btn}
-      style="--viewer-buttons-gap: 4pt; --viewer-buttons-btn-padding: 1px 6px; --viewer-buttons-align: stretch"
+      style="--viewer-buttons-gap: 4pt; --viewer-buttons-btn-padding: 1px 6px; --viewer-buttons-align: stretch; --viewer-buttons-hover-bg: transparent; --viewer-buttons-hover-color: light-dark(#000, #fff)"
     >
       {#if controls_config.visible(`multi-view`)}
         <button
@@ -1639,36 +1724,43 @@
           {/if}
         </div>
 
-        <!-- Undo/redo buttons (only in edit-atoms mode) -->
-        {#if measure_mode === `edit-atoms`}
+        {#snippet undo_redo_snippet(
+          buttons: {
+            icon: `Undo` | `Redo`
+            title: string
+            stack: unknown[]
+            action: () => void
+          }[],
+        )}
           <div class="undo-redo-container">
-            <button
-              type="button"
-              aria-label="Undo (Cmd/Ctrl+Z)"
-              disabled={undo_stack.length === 0}
-              onclick={undo}
-              title="Undo (Cmd/Ctrl+Z)"
-              class="undo-redo-btn"
-            >
-              <Icon icon="Undo" />
-              {#if undo_stack.length > 0}
-                <span class="history-count">{undo_stack.length}</span>
-              {/if}
-            </button>
-            <button
-              type="button"
-              aria-label="Redo (Cmd/Ctrl+Y or Cmd+Shift+Z)"
-              disabled={redo_stack.length === 0}
-              onclick={redo}
-              title="Redo (Cmd/Ctrl+Y or Cmd+Shift+Z)"
-              class="undo-redo-btn"
-            >
-              <Icon icon="Redo" />
-              {#if redo_stack.length > 0}
-                <span class="history-count">{redo_stack.length}</span>
-              {/if}
-            </button>
+            {#each buttons as { icon, title, stack, action } (icon)}
+              <button
+                type="button"
+                aria-label={title}
+                disabled={stack.length === 0}
+                onclick={action}
+                {title}
+                class="undo-redo-btn"
+              >
+                <Icon {icon} />
+                {#if stack.length > 0}
+                  <span class="history-count">{stack.length}</span>
+                {/if}
+              </button>
+            {/each}
           </div>
+        {/snippet}
+
+        {#if measure_mode === `edit-atoms`}
+          {@render undo_redo_snippet([
+            { icon: `Undo`, title: `Undo (Cmd/Ctrl+Z)`, stack: undo_stack, action: undo },
+            {
+              icon: `Redo`,
+              title: `Redo (Cmd/Ctrl+Y or Cmd+Shift+Z)`,
+              stack: redo_stack,
+              action: redo,
+            },
+          ])}
         {/if}
 
         {#if measure_mode === `edit-bonds`}
@@ -1697,34 +1789,20 @@
               {/each}
             </div>
           </div>
-          <div class="undo-redo-container">
-            <button
-              type="button"
-              aria-label="Undo bond edit (Cmd/Ctrl+Z)"
-              disabled={bond_undo_stack.length === 0}
-              onclick={undo_bond_edit}
-              title="Undo bond edit (Cmd/Ctrl+Z)"
-              class="undo-redo-btn"
-            >
-              <Icon icon="Undo" />
-              {#if bond_undo_stack.length > 0}
-                <span class="history-count">{bond_undo_stack.length}</span>
-              {/if}
-            </button>
-            <button
-              type="button"
-              aria-label="Redo bond edit (Cmd/Ctrl+Y or Cmd+Shift+Z)"
-              disabled={bond_redo_stack.length === 0}
-              onclick={redo_bond_edit}
-              title="Redo bond edit (Cmd/Ctrl+Y or Cmd+Shift+Z)"
-              class="undo-redo-btn"
-            >
-              <Icon icon="Redo" />
-              {#if bond_redo_stack.length > 0}
-                <span class="history-count">{bond_redo_stack.length}</span>
-              {/if}
-            </button>
-          </div>
+          {@render undo_redo_snippet([
+            {
+              icon: `Undo`,
+              title: `Undo bond edit (Cmd/Ctrl+Z)`,
+              stack: bond_undo_stack,
+              action: undo_bond_edit,
+            },
+            {
+              icon: `Redo`,
+              title: `Redo bond edit (Cmd/Ctrl+Y or Cmd+Shift+Z)`,
+              stack: bond_redo_stack,
+              action: redo_bond_edit,
+            },
+          ])}
         {/if}
 
         <!-- Add-atom element input (shown when add_atom_mode is active) -->
@@ -2098,7 +2176,7 @@
     gap: 1rem;
     max-width: min(90%, 400px);
     font-size: 0.9rem;
-    z-index: 1000;
+    z-index: var(--z-index-viewer-tooltip, 1000);
   }
   .symmetry-error span {
     flex: 1;
@@ -2125,7 +2203,7 @@
     padding: 0.4rem 0.8rem;
     border-radius: var(--border-radius, 3pt);
     font-size: 0.8rem;
-    z-index: 100;
+    z-index: var(--z-index-viewer-dropdown, 100);
     pointer-events: none;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
     animation: toast-fade 2s ease-in-out;

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

@@ -76,6 +76,6 @@ type $$ComponentProps = {
     on_camera_reset?: EventHandler;
     on_bonds_change?: (bonds: StructureBond[] | undefined) => void;
 } & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`> & Omit<HTMLAttributes<HTMLDivElement>, `children`>;
-declare const Structure: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "color_scheme" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "structure" | "background_color" | "background_opacity" | "show_image_atoms" | "sym_data" | "lattice_props" | "measure_mode" | "selected_sites" | "measured_sites" | "bond_edit_mode" | "bond_edit_order" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "site_radius_overrides" | "atom_color_config" | "volumetric_data" | "isosurface_settings" | "scene_props" | "hovered_site_idx" | "bonds" | "element_mapping" | "supercell_scaling" | "cell_type" | "loading" | "active_volume_idx" | "png_dpi" | "highlighted_sites" | "info_pane_open" | "multi_view" | "enable_measure_mode" | "error_msg" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
+declare const Structure: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "color_scheme" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "structure" | "active_volume_idx" | "background_color" | "background_opacity" | "show_image_atoms" | "sym_data" | "lattice_props" | "measure_mode" | "selected_sites" | "measured_sites" | "bond_edit_mode" | "bond_edit_order" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "site_radius_overrides" | "atom_color_config" | "volumetric_data" | "isosurface_settings" | "scene_props" | "hovered_site_idx" | "bonds" | "element_mapping" | "supercell_scaling" | "cell_type" | "loading" | "png_dpi" | "highlighted_sites" | "info_pane_open" | "multi_view" | "enable_measure_mode" | "error_msg" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
 type Structure = ReturnType<typeof Structure>;
 export default Structure;

package/dist/structure/StructureCarousel.svelte

@@ -531,6 +531,8 @@
   .structure-carousel-pager {
     position: absolute;
     z-index: 6;
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     inset-block-end: 12px;
     inset-inline-start: 50%;
     display: flex;
@@ -549,17 +551,22 @@
   /* hosted in a panel title bar instead of floating over the cards */
   .structure-carousel-pager.portaled {
     position: static;
-    padding: 1px 4px;
+    gap: 1px;
+    padding: 0 2px;
     background: transparent;
     box-shadow: none;
     transform: none;
   }
+  .structure-carousel-pager.portaled button {
+    inline-size: 18px;
+    block-size: 18px;
+  }
   .structure-carousel-pager button {
     display: grid;
     place-items: center;
     inline-size: 22px;
     block-size: 22px;
-    padding: 0;
+    padding: 0 0 2px;
     border: 0;
     border-radius: 50%;
     background: transparent;
@@ -570,7 +577,7 @@
     line-height: 1;
   }
   .structure-carousel-pager button:hover:not(:disabled) {
-    background: color-mix(in srgb, currentColor 12%, transparent);
+    color: var(--active-color, #6ea8ff);
   }
   .structure-carousel-pager button:disabled {
     opacity: 0.3;

package/dist/structure/StructureControls.svelte

@@ -2,6 +2,7 @@
   import type { PaneProps, PaneToggleProps } from '../overlays'
   import type { ColorSchemeName, D3InterpolateName } from '../colors'
   import { AXIS_COLORS, ELEMENT_COLOR_SCHEMES } from '../colors'
+  import Spinner from '../feedback/Spinner.svelte'
   import IsosurfaceControls from '../isosurface/IsosurfaceControls.svelte'
   import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types'
   import { format_num } from '../labels'
@@ -286,17 +287,11 @@
     scene_props.rotation = [...scene_props.rotation]
   }
 
-  // Helper function to get example set of colors from an element color scheme
+  // Sample colors for common elements, used to preview an element color scheme
   function get_representative_colors(scheme_name: string): string[] {
     const scheme = ELEMENT_COLOR_SCHEMES[scheme_name as ColorSchemeName]
     if (!scheme) return []
-
-    // Get colors for common elements: H, C, N, O, Fe, Ca, Si, Al
-    const sample_elements = [`H`, `C`, `N`, `O`, `Fe`, `Ca`, `Si`, `Al`]
-    return sample_elements
-      .slice(0, 4) // Take first 4
-      .map((el) => scheme[el] || scheme.H || `#cccccc`)
-      .filter(Boolean)
+    return [`H`, `C`, `N`, `O`].map((elem) => scheme[elem] || scheme.H || `#cccccc`)
   }
 </script>
 
@@ -318,7 +313,7 @@
   {#if volumetric_data?.length && isosurface_settings}
     <IsosurfaceControls
       bind:settings={isosurface_settings}
-      volumes={volumetric_data}
+      bind:volumes={volumetric_data}
       bind:active_volume_idx
     />
   {/if}
@@ -923,15 +918,10 @@
         />
       </label>
       {#if supercell_loading}
-        <div
-          style="display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: var(--accent-color); margin-top: 4pt"
-        >
-          <span
-            class="spinner-icon"
-            style="display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite"
-          ></span>
-          <span>Generating supercell...</span>
-        </div>
+        <Spinner
+          text="Generating supercell..."
+          style="--spinner-size: 12px; --spinner-border-width: 2px; --spinner-margin: 4pt 0 0; font-size: 0.85em; color: var(--accent-color)"
+        />
       {/if}
 
       {#if !supercell_input_valid}
@@ -1235,12 +1225,4 @@
     flex: 1;
     min-width: 40px;
   }
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
 </style>

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

@@ -28,6 +28,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     pane_props?: PaneProps;
     toggle_props?: PaneToggleProps;
 };
-declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "controls_open" | "background_color" | "background_opacity" | "show_image_atoms" | "lattice_props" | "atom_color_config" | "volumetric_data" | "isosurface_settings" | "scene_props" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "supercell_loading">;
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "controls_open" | "active_volume_idx" | "background_color" | "background_opacity" | "show_image_atoms" | "lattice_props" | "atom_color_config" | "volumetric_data" | "isosurface_settings" | "scene_props" | "supercell_scaling" | "cell_type" | "supercell_loading">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;