matterviz 0.3.7 → 0.4.1

package/dist/structure/Structure.svelte

@@ -1,13 +1,13 @@
 <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 { normalize_show_controls, type ShowControlsProp } from '../controls'
+  import { coerce_elem_symbol, 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 { create_file_drop_handler, drag_over_handlers, load_from_url } 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 {
@@ -15,8 +15,8 @@
     DEFAULT_ISOSURFACE_SETTINGS,
     tile_volumetric_data,
   } from '../isosurface/types'
-  import { ELEM_SYMBOLS } from '../labels'
-  import { set_fullscreen_bg, toggle_fullscreen } from '../layout'
+  import { type FullscreenToggleProp, toggle_fullscreen, ViewerChrome } from '../layout'
+  import { sync_fullscreen } from '../layout/fullscreen.svelte'
   import type { Vec3 } from '../math'
   import { create_cart_to_frac, create_frac_to_cart } from '../math'
   import { DEFAULTS } from '../settings'
@@ -56,7 +56,7 @@
   import { get_property_colors } from './atom-properties'
   import AtomLegend from './AtomLegend.svelte'
   import CellSelect from './CellSelect.svelte'
-  import { BOND_ORDER_OPTIONS, merge_bond_edits } from './bonding'
+  import { BOND_ORDER_OPTIONS, merge_bond_edits, remap_bonds_after_deletion } from './bonding'
   import type { StructureHandlerData } from './index'
   import { MAX_SELECTED_SITES } from './measure'
   import { normalize_fractional_coords, parse_any_structure } from './parse'
@@ -64,6 +64,7 @@
   import StructureExportPane from './StructureExportPane.svelte'
   import StructureInfoPane from './StructureInfoPane.svelte'
   import StructureScene from './StructureScene.svelte'
+  import { to_error } from '../utils'
 
   // Type alias for event handlers to reduce verbosity
   type EventHandler = (data: StructureHandlerData) => void
@@ -187,15 +188,13 @@
       structure?: AnyStructure
       bonds?: StructureBond[]
       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'
-       */
+      // 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
@@ -216,7 +215,7 @@
       bond_edit_mode?: BondEditMode
       bond_edit_order?: BondOrder
       info_pane_open?: boolean
-      fullscreen_toggle?: Snippet<[{ fullscreen: boolean }]> | boolean
+      fullscreen_toggle?: FullscreenToggleProp
       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)
@@ -302,7 +301,7 @@
             emit_file_load_event(parsed, filename, content)
           } catch (error) {
             error_msg = `Failed to parse structure: ${
-              error instanceof Error ? error.message : String(error)
+              to_error(error).message
             }`
             on_error?.({ error_msg, filename })
           }
@@ -333,7 +332,7 @@
       }
     } catch (err) {
       error_msg = `Failed to parse structure from string: ${
-        err instanceof Error ? err.message : String(err)
+        to_error(err).message
       }`
       untrack(() => on_error?.({ error_msg, filename: `string` }))
     } finally {
@@ -467,10 +466,13 @@
   let bond_order_overrides = $state<StructureBond[]>([])
   let bond_undo_stack = $state<BondEditHistorySnapshot[]>([])
   let bond_redo_stack = $state<BondEditHistorySnapshot[]>([])
-  let bond_history_context = $state<BondEditContext>()
-  let last_bond_structure_identity = $state(structure)
+  // These hold object-identity tokens (structure_identity) compared with ===/!==,
+  // so they must stay raw — proxying them via $state would break identity comparisons
+  // (state_proxy_equality_mismatch) against the raw `structure` prop.
+  let bond_history_context = $state.raw<BondEditContext>()
+  let last_bond_structure_identity = $state.raw(structure)
   let last_emitted_bond_signature = $state<string>()
-  let bond_edit_snapshot = $state<BondEditSnapshot>()
+  let bond_edit_snapshot = $state.raw<BondEditSnapshot>()
   let has_bond_edits = $derived(
     added_bonds.length > 0 || removed_bonds.length > 0 ||
       bond_order_overrides.length > 0,
@@ -638,6 +640,10 @@
     emit_bonds(edited_bonds)
   })
 
+  // Elements currently anchoring polyhedra (written by StructureScene, read by
+  // StructureControls so per-element toggles reflect actual render state)
+  let polyhedra_rendered_elements = $state<string[]>([])
+
   // === Edit-atoms mode state ===
   let dragging_atoms = $state(false)
   let undo_stack = $state<AnyStructure[]>([])
@@ -677,9 +683,8 @@
 
   // 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()) as ElementSymbol
-    return ELEM_SYMBOLS.includes(normalized) ? normalized : null
+    const normalized = input.charAt(0).toUpperCase() + input.slice(1).toLowerCase()
+    return coerce_elem_symbol(normalized) ?? null
   }
 
   function clear_selection() {
@@ -776,7 +781,13 @@
   })
 
   let controls_config = $derived(normalize_show_controls(show_controls))
-  let viewer_active = $derived(hovered || focused)
+  // $effect instead of `$derived(hovered || focused)`: the $derived reading the $bindable
+  // `hovered` prop went stale after the first hover/leave cycle, so the gizmo + mode toggle only
+  // appeared on the first mouseenter until reload.
+  let viewer_active = $state(false)
+  $effect(() => {
+    viewer_active = hovered || focused
+  })
   let scene_gizmo = $derived(viewer_active && (scene_props.gizmo ?? scene_props.show_gizmo))
   let active_scene_sites = $derived([
     ...new SvelteSet([...(scene_props.active_sites ?? []), ...highlighted_sites]),
@@ -822,7 +833,7 @@
   let supercell_structure = $state(structure)
   let supercell_loading = $state(false)
   let has_supercell = $derived(
-    !!supercell_scaling && ![``, `1x1x1`, `1`].includes(supercell_scaling),
+    Boolean(supercell_scaling) && ![``, `1x1x1`, `1`].includes(supercell_scaling),
   )
   let bond_edits_enabled = $derived(
     cell_type === `original` && !has_supercell && !supercell_loading,
@@ -865,8 +876,8 @@
       // 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 scaling_mult = (parseInt(nx_str, 10) || 1) * (parseInt(ny_str, 10) || 1) *
+        (parseInt(nz_str, 10) || 1)
       const estimated_sites = sites_count * scaling_mult
 
       // Show spinner for supercells with >1000 estimated sites or scaling >8
@@ -1124,7 +1135,7 @@
         emit_file_load_event(parsed, filename, content)
       } catch (err) {
         error_msg = `Failed to parse structure: ${
-          err instanceof Error ? err.message : String(err)
+          to_error(err).message
         }`
         on_error?.({ error_msg, filename })
       }
@@ -1139,7 +1150,9 @@
     },
   })
 
-  function handle_keydown(event: KeyboardEvent) {
+  // Handle keyboard shortcuts. Returns true if the key was handled, so the caller
+  // (handle_and_prevent / forward_window_keydown) can suppress the browser default.
+  function handle_keydown(event: KeyboardEvent): boolean {
     // Don't handle shortcuts if user is typing in an input field
     const target = event.target
     const is_input_focused =
@@ -1151,45 +1164,39 @@
 
     // 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
+      return true
     }
 
-    if (is_input_focused) return
+    if (is_input_focused) return false
 
     if (measure_mode === `edit-bonds`) {
       const key = event.key.toLowerCase()
       const plain = !event.ctrlKey && !event.metaKey && !event.altKey
       if (event.ctrlKey || event.metaKey) {
         if (key === `z` && !event.shiftKey) {
-          if (bond_undo_stack.length === 0) return
-          event.preventDefault()
+          if (bond_undo_stack.length === 0) return false
           undo_bond_edit()
           show_toast(`Undo bond edit (${bond_undo_stack.length} left)`)
-          return
+          return true
         } else if (key === `y` || (key === `z` && event.shiftKey)) {
-          if (bond_redo_stack.length === 0) return
-          event.preventDefault()
+          if (bond_redo_stack.length === 0) return false
           redo_bond_edit()
           show_toast(`Redo bond edit (${bond_redo_stack.length} left)`)
-          return
+          return true
         }
       }
       if (key === `a` && plain) {
-        event.preventDefault()
         bond_edit_mode = `add`
-        return
+        return true
       }
       if (key === `d` && plain) {
-        event.preventDefault()
         bond_edit_mode = `delete`
-        return
+        return true
       }
       if (event.key === `Escape` && selected_sites.length > 0) {
-        event.preventDefault()
         clear_selection()
-        return
+        return true
       }
     }
 
@@ -1199,61 +1206,66 @@
       if (event.ctrlKey || event.metaKey) {
         const key = event.key.toLowerCase()
         if (key === `z` && !event.shiftKey) {
-          if (undo_stack.length === 0) return
-          event.preventDefault()
+          if (undo_stack.length === 0) return false
           undo()
           show_toast(`Undo (${undo_stack.length} left)`)
-          return
+          return true
         } else if (key === `y` || (key === `z` && event.shiftKey)) {
-          if (redo_stack.length === 0) return
-          event.preventDefault()
+          if (redo_stack.length === 0) return false
           redo()
           show_toast(`Redo (${redo_stack.length} left)`)
-          return
+          return true
         }
       }
 
       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()
+          // Remap explicit bond metadata so surviving bonds track shifted site indices.
+          // structure_with_bonds prefers the bindable `bonds` prop, so remap that too.
+          if (bonds !== undefined) bonds = remap_bonds_after_deletion(bonds, to_delete)
+          const old_bonds = structure.properties?.bonds
           structure = {
             ...structure,
             sites: structure.sites.filter((_, idx) => !to_delete.has(idx)),
+            ...(old_bonds && {
+              properties: {
+                ...structure.properties,
+                bonds: remap_bonds_after_deletion(old_bonds, to_delete),
+              },
+            }),
           }
           // Clear per-site overrides since indices shifted after deletion
           if (site_radius_overrides?.size > 0) site_radius_overrides.clear()
           clear_bond_edits()
           show_toast(`Deleted ${n_deleted} site${n_deleted > 1 ? `s` : ``}`)
+          return true
         }
-        return
+        return false
       }
       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
+        return true
       }
       // Change element of selected atoms
       if (key === `e` && plain && selected_sites.length > 0) {
-        event.preventDefault()
         change_element_mode = !change_element_mode
-        return
+        return true
       }
       // 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)
@@ -1284,18 +1296,18 @@
         show_toast(
           `Duplicated ${new_sites.length} site${new_sites.length > 1 ? `s` : ``}`,
         )
-        return
+        return true
       }
 
       // 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
+          return true
         }
         if (selected_sites.length > 0) {
           clear_selection()
-          return
+          return true
         }
       }
     }
@@ -1303,11 +1315,11 @@
     // Interface shortcuts (require Ctrl/Cmd modifier to avoid accidental triggers)
     const has_modifier = event.ctrlKey || event.metaKey
     if (event.key === `f` && has_modifier && fullscreen_toggle) {
-      event.preventDefault()
       toggle_fullscreen(wrapper)
+      return true
     } else if (event.key === `i` && has_modifier && enable_info_pane) {
-      event.preventDefault()
       info_pane_open = !info_pane_open
+      return true
     } else if (event.key === `Escape`) {
       // Prioritize closing panes, then exit edit modes, then exit fullscreen
       if (info_pane_open) info_pane_open = false
@@ -1315,10 +1327,19 @@
       else if (export_pane_open) export_pane_open = false
       else if (measure_mode === `edit-bonds` || measure_mode === `edit-atoms`) {
         measure_mode = `distance`
-      }
+      } else return false
+      return true
     }
+    return false
   }
 
+  // Hover (window) path: skip edit-mode mutations so destructive keys (delete/undo)
+  // require focus, not just a hovering mouse.
+  const handle_hover_keydown = (event: KeyboardEvent): boolean =>
+    measure_mode === `edit-atoms` || measure_mode === `edit-bonds`
+      ? false
+      : handle_keydown(event)
+
   // === Edit-atoms mode helpers ===
 
   // Map scene indices (into displayed_structure) back to raw structure indices.
@@ -1458,24 +1479,19 @@
     }
   })
 
-  $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()
-      }
-    }
-    set_fullscreen_bg(wrapper, fullscreen, `--struct-bg-fullscreen`)
+  sync_fullscreen({
+    get_wrapper: () => wrapper,
+    get_fullscreen: () => fullscreen,
+    set_fullscreen: (val) => (fullscreen = val),
+    bg_css_var: `--struct-bg-fullscreen`,
+    on_change: (val) => on_fullscreen_change?.({ structure, fullscreen: val }),
   })
 </script>
 
-<svelte:document
-  onfullscreenchange={() => {
-    fullscreen = Boolean(document.fullscreenElement)
-    on_fullscreen_change?.({ structure, fullscreen })
-  }}
-/>
+<!-- Forward shortcuts to the hovered viewer when focus is on <body> (see
+  forward_window_keydown). Edit modes are excluded so destructive keys
+  (delete/undo) still require focus, not just a hovering mouse. -->
+<svelte:window onkeydown={forward_window_keydown(() => hovered, handle_hover_keydown)} />
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
@@ -1502,30 +1518,15 @@
     if (!(target instanceof HTMLElement)) return
     // Don't reset if double-click was on UI controls/panes/legend
     if (
-      target.closest(`.control-buttons`) ||
-      target.closest(`.structure-legend`) ||
-      target.closest(`.atom-legend`) ||
-      target.closest(`.info-pane`) ||
-      target.closest(`.export-pane`) ||
-      target.closest(`.controls-pane`) ||
-      target.tagName === `BUTTON` ||
-      target.tagName === `INPUT` ||
-      target.tagName === `SELECT`
+      [`.control-buttons`, `.structure-legend`, `.atom-legend`, `.info-pane`, `.export-pane`, `.controls-pane`].some((selector) => target.closest(selector))
+      || target.tagName === `BUTTON` || target.tagName === `INPUT` || target.tagName === `SELECT`
     ) return
     // Reset camera for double-clicks on the 3D scene
     reset_camera()
   }}
   ondrop={handle_file_drop}
-  ondragover={(event) => {
-    event.preventDefault()
-    if (!allow_file_drop) return
-    dragover = true
-  }}
-  ondragleave={(event) => {
-    event.preventDefault()
-    dragover = false
-  }}
-  onkeydown={handle_keydown}
+  {...drag_over_handlers({ allow: () => allow_file_drop, set_dragover: (over) => dragover = over })}
+  onkeydown={handle_and_prevent(handle_keydown)}
   {...rest}
   class="structure {rest.class ?? ``}"
 >
@@ -1539,307 +1540,282 @@
   {:else if error_msg}
     <StatusMessage bind:message={error_msg} type="error" dismissible />
   {:else if (structure?.sites?.length ?? 0) > 0}
-    <section
-      class="control-buttons {controls_config.class}"
-      style={controls_config.style}
+    {#snippet reset_camera_btn()}
+      {#if camera_has_moved && controls_config.visible(`reset-camera`)}
+        <button class="reset-camera" onclick={reset_camera} title={reset_text}>
+          <!-- Target/Focus icon for reset camera -->
+          <Icon icon="Reset" />
+        </button>
+      {/if}
+    {/snippet}
+    <ViewerChrome
+      {controls_config}
+      {fullscreen}
+      {fullscreen_toggle}
+      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"
     >
-      {#if controls_config.mode !== `never`}
-        {#if camera_has_moved && controls_config.visible(`reset-camera`)}
-          <button class="reset-camera" onclick={reset_camera} title={reset_text}>
-            <!-- Target/Focus icon for reset camera -->
-            <Icon icon="Reset" />
-          </button>
-        {/if}
-        {#if fullscreen_toggle && controls_config.visible(`fullscreen`)}
+      {#if enable_measure_mode && controls_config.visible(`measure-mode`)}
+        <div
+          class="measure-mode-dropdown"
+          {@attach click_outside({ callback: () => measure_menu_open = false })}
+        >
           <button
-            type="button"
-            onclick={() => fullscreen_toggle && toggle_fullscreen(wrapper)}
-            title="{fullscreen ? `Exit` : `Enter`} fullscreen"
-            aria-pressed={fullscreen}
-            class="fullscreen-toggle"
-            style="padding: 0 3px"
-            {@attach tooltip()}
+            onclick={() => (measure_menu_open = !measure_menu_open)}
+            title="Measure / Edit"
+            class="view-mode-button"
+            class:active={measure_menu_open}
+            aria-expanded={measure_menu_open}
+            style="transform: scale(1.2)"
           >
-            {#if typeof fullscreen_toggle === `function`}
-              {@render fullscreen_toggle({ fullscreen })}
+            {#if show_measure_selection_limit}
+              <span class="selection-limit-text">
+                {measured_sites.length}/{MAX_SELECTED_SITES}
+              </span>
             {:else}
-              <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" />
+              <Icon
+                icon={({
+                  distance: `Ruler`,
+                  angle: `Angle`,
+                  'edit-bonds': `Link`,
+                  'edit-atoms': `Edit`,
+                } as const)[measure_mode]}
+              />
             {/if}
+            <Icon
+              icon="Arrow{measure_menu_open ? `Up` : `Down`}"
+              style="margin-left: -2px"
+            />
           </button>
-        {/if}
-
-        {#if enable_measure_mode && controls_config.visible(`measure-mode`)}
-          <div
-            class="measure-mode-dropdown"
-            {@attach click_outside({ callback: () => measure_menu_open = false })}
-          >
+          {#if show_selection_reset}
             <button
-              onclick={() => (measure_menu_open = !measure_menu_open)}
-              title="Measure / Edit"
-              class="view-mode-button"
-              class:active={measure_menu_open}
-              aria-expanded={measure_menu_open}
-              style="transform: scale(1.2)"
+              type="button"
+              aria-label="Reset selection and bond edits"
+              onclick={() => {
+                clear_selection()
+                clear_bond_edits()
+              }}
             >
-              {#if show_measure_selection_limit}
-                <span class="selection-limit-text">
-                  {measured_sites.length}/{MAX_SELECTED_SITES}
-                </span>
-              {:else}
-                <Icon
-                  icon={({
-                    distance: `Ruler`,
-                    angle: `Angle`,
-                    'edit-bonds': `Link`,
-                    'edit-atoms': `Edit`,
-                  } as const)[measure_mode]}
-                />
-              {/if}
-              <Icon
-                icon="Arrow{measure_menu_open ? `Up` : `Down`}"
-                style="margin-left: -2px"
-              />
+              <Icon icon="Reset" style="margin-left: -4px" />
             </button>
-            {#if show_selection_reset}
-              <button
-                type="button"
-                aria-label="Reset selection and bond edits"
-                onclick={() => {
-                  clear_selection()
-                  clear_bond_edits()
-                }}
-              >
-                <Icon icon="Reset" style="margin-left: -4px" />
-              </button>
-            {/if}
-            {#if measure_menu_open}
-              <div class="view-mode-dropdown">
-                {#each [
-            { mode: `distance`, icon: `Ruler`, label: `Distance`, scale: 1.1 },
-            { mode: `angle`, icon: `Angle`, label: `Angle`, scale: 1.3 },
-            {
-              mode: `edit-atoms`,
-              icon: `Edit`,
-              label: `Edit Atoms`,
-              scale: 1.0,
-            },
-            {
-              mode: `edit-bonds`,
-              icon: `Link`,
-              label: `Edit Bonds`,
-              scale: 1.0,
-            },
-          ] as const as
-                  { mode, icon, label, scale }
-                  (mode)
-                }
-                  <button
-                    class="view-mode-option"
-                    class:selected={measure_mode === mode}
-                    disabled={mode === `edit-bonds` && !bond_edits_enabled}
-                    title={mode === `edit-bonds` && !bond_edits_enabled
-                      ? `Bond editing is only available for the original 1x1x1 cell`
-                      : label}
-                    onclick={() => {
-                      if (mode === `edit-bonds` && !bond_edits_enabled) return
-                      ;[measure_mode, measure_menu_open] = [mode, false]
-                    }}
-                  >
-                    <Icon {icon} style="transform: scale({scale})" />
-                    <span>{label}</span>
-                  </button>
-                {/each}
-              </div>
-            {/if}
-          </div>
-
-          <!-- Undo/redo buttons (only in edit-atoms mode) -->
-          {#if measure_mode === `edit-atoms`}
-            <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>
-            </div>
           {/if}
-
-          {#if measure_mode === `edit-bonds`}
-            <div class="bond-edit-toolbar" aria-label="Bond editing controls">
-              {#if bond_edit_mode === `add`}
-                <label>
-                  <span>Bond order</span>
-                  <select bind:value={bond_edit_order}>
-                    {#each BOND_ORDER_OPTIONS as { order, label } (label)}
-                      <option value={order}>{label}</option>
-                    {/each}
-                  </select>
-                </label>
-              {/if}
-              <div class="bond-edit-mode-toggle">
-                {#each [
-                  { mode: `add`, label: `Add`, title: `Add: click two atoms` },
-                  { mode: `delete`, label: `Delete`, title: `Delete: click a bond` },
-                ] as const as { mode, label, title } (mode)}
-                  <button
-                    type="button"
-                    class:selected={bond_edit_mode === mode}
-                    aria-pressed={bond_edit_mode === mode}
-                    title="{title} ({label[0]})"
-                    onclick={() => (bond_edit_mode = mode)}
-                  >
-                    {label}
-                  </button>
-                {/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>
+          {#if measure_menu_open}
+            <div class="view-mode-dropdown">
+              {#each [
+          { mode: `distance`, icon: `Ruler`, label: `Distance`, scale: 1.1 },
+          { mode: `angle`, icon: `Angle`, label: `Angle`, scale: 1.3 },
+          { mode: `edit-atoms`, icon: `Edit`, label: `Edit Atoms`, scale: 1.0 },
+          { mode: `edit-bonds`, icon: `Link`, label: `Edit Bonds`, scale: 1.0 },
+        ] as const as { mode, icon, label, scale } (mode)}
+                <button
+                  class="view-mode-option"
+                  class:selected={measure_mode === mode}
+                  disabled={mode === `edit-bonds` && !bond_edits_enabled}
+                  title={mode === `edit-bonds` && !bond_edits_enabled
+                    ? `Bond editing is only available for the original 1x1x1 cell`
+                    : label}
+                  onclick={() => {
+                    if (mode === `edit-bonds` && !bond_edits_enabled) return
+                    ;[measure_mode, measure_menu_open] = [mode, false]
+                  }}
+                >
+                  <Icon {icon} style="transform: scale({scale})" />
+                  <span>{label}</span>
+                </button>
+              {/each}
             </div>
           {/if}
+        </div>
 
-          <!-- Add-atom element input (shown when add_atom_mode is active) -->
-          {#if measure_mode === `edit-atoms` && add_atom_mode}
-            <div class="add-atom-input">
-              <label>
-                <span>Element:</span>
-                <input
-                  type="text"
-                  bind:value={add_element}
-                  maxlength="2"
-                  placeholder="C"
-                  style="width: 3em; text-align: center"
-                />
-              </label>
-              <span style="font-size: 0.75em; opacity: 0.7">Click to place</span>
-            </div>
-          {/if}
+        <!-- Undo/redo buttons (only in edit-atoms mode) -->
+        {#if measure_mode === `edit-atoms`}
+          <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>
+          </div>
+        {/if}
 
-          <!-- Change-element input (shown when 'e' pressed with selection) -->
-          {#if measure_mode === `edit-atoms` && change_element_mode &&
-        selected_sites.length > 0}
-            <div class="add-atom-input">
+        {#if measure_mode === `edit-bonds`}
+          <div class="bond-edit-toolbar" aria-label="Bond editing controls">
+            {#if bond_edit_mode === `add`}
               <label>
-                <span>New element:</span>
-                <input
-                  type="text"
-                  bind:value={change_element_value}
-                  maxlength="2"
-                  placeholder="Fe"
-                  style="width: 3em; text-align: center"
-                  onkeydown={(event: KeyboardEvent) => {
-                    if (event.key === `Enter`) {
-                      handle_change_element(change_element_value)
-                    } else if (event.key === `Escape`) {
-                      change_element_mode = false
-                    }
-                    event.stopPropagation()
-                  }}
-                  {@attach (node: HTMLInputElement) => {
-                    node.focus()
-                  }}
-                />
+                <span>Bond order</span>
+                <select bind:value={bond_edit_order}>
+                  {#each BOND_ORDER_OPTIONS as { order, label } (label)}
+                    <option value={order}>{label}</option>
+                  {/each}
+                </select>
               </label>
-              <span style="font-size: 0.75em; opacity: 0.7">Enter to apply</span>
+            {/if}
+            <div class="bond-edit-mode-toggle">
+              {#each [
+                { mode: `add`, label: `Add`, title: `Add: click two atoms` },
+                { mode: `delete`, label: `Delete`, title: `Delete: click a bond` },
+              ] as const as { mode, label, title } (mode)}
+                <button
+                  type="button"
+                  class:selected={bond_edit_mode === mode}
+                  aria-pressed={bond_edit_mode === mode}
+                  title="{title} ({label[0]})"
+                  onclick={() => (bond_edit_mode = mode)}
+                >
+                  {label}
+                </button>
+              {/each}
             </div>
-          {/if}
+          </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>
         {/if}
 
-        {#if enable_info_pane && normalized_structure &&
-        controls_config.visible(`info-pane`)}
-          <StructureInfoPane
-            structure={normalized_structure}
-            bind:pane_open={info_pane_open}
-            bind:highlighted_sites
-            bind:hovered_site_idx
-            bind:selected_sites
-            {sym_data}
-            {@attach tooltip({ content: `Structure info pane` })}
-          />
+        <!-- Add-atom element input (shown when add_atom_mode is active) -->
+        {#if measure_mode === `edit-atoms` && add_atom_mode}
+          <div class="add-atom-input">
+            <label>
+              <span>Element:</span>
+              <input
+                type="text"
+                bind:value={add_element}
+                maxlength="2"
+                placeholder="C"
+                style="width: 3em; text-align: center"
+              />
+            </label>
+            <span style="font-size: 0.75em; opacity: 0.7">Click to place</span>
+          </div>
         {/if}
 
-        {#if controls_config.visible(`export-pane`)}
-          <StructureExportPane
-            bind:export_pane_open
-            structure={normalized_structure}
-            {wrapper}
-            {scene}
-            {camera}
-            bind:png_dpi
-            pane_props={{ style: `max-height: calc(${height}px - 50px)` }}
-          />
+        <!-- Change-element input (shown when 'e' pressed with selection) -->
+        {#if measure_mode === `edit-atoms` && change_element_mode &&
+      selected_sites.length > 0}
+          <div class="add-atom-input">
+            <label>
+              <span>New element:</span>
+              <input
+                type="text"
+                bind:value={change_element_value}
+                maxlength="2"
+                placeholder="Fe"
+                style="width: 3em; text-align: center"
+                onkeydown={(event: KeyboardEvent) => {
+                  if (event.key === `Enter`) {
+                    handle_change_element(change_element_value)
+                  } else if (event.key === `Escape`) {
+                    change_element_mode = false
+                  }
+                  event.stopPropagation()
+                }}
+                {@attach (node: HTMLInputElement) => {
+                  node.focus()
+                }}
+              />
+            </label>
+            <span style="font-size: 0.75em; opacity: 0.7">Enter to apply</span>
+          </div>
         {/if}
+      {/if}
 
-        {#if controls_config.visible(`controls`)}
-          <StructureControls
-            bind:controls_open
-            bind:scene_props
-            bind:lattice_props
-            bind:show_image_atoms
-            bind:supercell_scaling
-            bind:background_color
-            bind:background_opacity
-            bind:color_scheme
-            bind:atom_color_config
-            bind:cell_type
-            bind:volumetric_data
-            bind:isosurface_settings
-            bind:active_volume_idx
-            {structure}
-            {supercell_loading}
-            {sym_data}
-          />
-        {/if}
+      {#if enable_info_pane && normalized_structure &&
+      controls_config.visible(`info-pane`)}
+        <StructureInfoPane
+          structure={normalized_structure}
+          bind:pane_open={info_pane_open}
+          bind:highlighted_sites
+          bind:hovered_site_idx
+          bind:selected_sites
+          {sym_data}
+          {@attach tooltip({ content: `Structure info pane` })}
+        />
+      {/if}
 
-        {@render top_right_controls?.()}
+      {#if controls_config.visible(`export-pane`)}
+        <StructureExportPane
+          bind:export_pane_open
+          structure={normalized_structure}
+          {wrapper}
+          {scene}
+          {camera}
+          bind:png_dpi
+          pane_props={{ style: `max-height: calc(${height}px - 50px)` }}
+        />
+      {/if}
+
+      {#if controls_config.visible(`controls`)}
+        <StructureControls
+          bind:controls_open
+          bind:scene_props
+          bind:lattice_props
+          bind:show_image_atoms
+          bind:supercell_scaling
+          bind:background_color
+          bind:background_opacity
+          bind:color_scheme
+          bind:atom_color_config
+          bind:cell_type
+          bind:volumetric_data
+          bind:isosurface_settings
+          bind:active_volume_idx
+          {structure}
+          {supercell_loading}
+          {sym_data}
+          {polyhedra_rendered_elements}
+        />
       {/if}
-    </section>
+
+      {@render top_right_controls?.()}
+    </ViewerChrome>
 
     <AtomLegend
       bind:atom_color_config
@@ -1855,15 +1831,18 @@
       show_mode_toggle={viewer_active}
       {sym_data}
     >
-      {#if structure && `lattice` in structure}
-        <CellSelect
-          bind:supercell_scaling
-          bind:cell_type
-          {sym_data}
-          loading={supercell_loading}
-          direction="up"
-        />
-      {/if}
+      {#snippet children({ mode_menu_open })}
+        {#if structure && `lattice` in structure}
+          <CellSelect
+            bind:supercell_scaling
+            bind:cell_type
+            {sym_data}
+            loading={supercell_loading}
+            direction="up"
+            suppress_hover={mode_menu_open}
+          />
+        {/if}
+      {/snippet}
     </AtomLegend>
 
     <!-- prevent from rendering in vitest runner since WebGLRenderingContext not available -->
@@ -1912,6 +1891,7 @@
             bind:add_element
             bind:cursor={canvas_cursor}
             bind:dragging_atoms
+            bind:polyhedra_rendered_elements
           />
         </Canvas>
       </div>
@@ -1980,7 +1960,7 @@
   }
   /* Avoid accidental text selection while interacting with the viewer */
   .structure :global(canvas),
-  .structure section.control-buttons,
+  .structure :global(section.control-buttons),
   .structure .bottom-left {
     user-select: none;
   }
@@ -1991,44 +1971,6 @@
     font-size: var(--struct-bottom-left-font-size, 1.2em);
     padding: var(--struct-bottom-left-padding, 1pt 5pt);
   }
-  section.control-buttons {
-    position: absolute;
-    display: flex;
-    top: var(--struct-buttons-top, var(--ctrl-btn-top, 1ex));
-    right: var(--struct-buttons-right, var(--ctrl-btn-right, 1ex));
-    gap: 4pt;
-    /* buttons need higher z-index than AtomLegend to make info/controls panes occlude legend */
-    /* we also need crazy high z-index to make info/control pane occlude threlte/extras' <HTML> elements for site labels */
-    z-index: var(
-      --struct-buttons-z-index,
-      var(--z-index-overlay-controls, 100000000)
-    );
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-  }
-  /* Mode: always - controls always visible */
-  section.control-buttons.always-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: hover - controls visible on component hover */
-  .structure:hover section.control-buttons.hover-visible,
-  .structure:focus-within section.control-buttons.hover-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: never - stays hidden (default state, no additional CSS needed) */
-  section.control-buttons > :global(button) {
-    background-color: transparent;
-    display: flex;
-    padding: 1px 6px;
-    border-radius: var(--border-radius, 3pt);
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
-  }
-  section.control-buttons :global(button:hover) {
-    background-color: color-mix(in srgb, currentColor 8%, transparent);
-  }
   /* Match Trajectory dropdown UI */
   .view-mode-dropdown {
     position: absolute;