matterviz 0.4.0 → 0.4.2

package/dist/structure/StructureScene.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { D3InterpolateName } from '../colors'
-  import { AXIS_COLORS, get_d3_interpolator, NEG_AXIS_COLORS } from '../colors'
+  import { get_d3_interpolator } from '../colors'
   import type { ElementSymbol } from '../element'
   import { element_data } from '../element'
   import Isosurface from '../isosurface/Isosurface.svelte'
@@ -9,12 +9,9 @@
   import { format_num } from '../labels'
   import type { Vec3 } from '../math'
   import * as math from '../math'
-  import type {
-    CameraProjection,
-    ShowBonds,
-    VectorColorMode,
-    VectorLayerConfig,
-  } from '../settings'
+  import { bind_renderer, build_orbit_props, SceneCamera } from '../scene'
+  import type { SceneControlProps } from '../scene'
+  import type { ShowBonds, VectorColorMode, VectorLayerConfig } from '../settings'
   import { DEFAULTS } from '../settings'
   import { create_pulse_animation } from '../effects.svelte'
   import { colors } from '../state.svelte'
@@ -28,7 +25,6 @@
     StructureBond,
   } from './'
   import {
-    Arrow,
     atomic_radii,
     Cylinder,
     get_all_site_vectors,
@@ -37,11 +33,14 @@
     Lattice,
     VECTOR_PALETTE,
   } from './'
+  import ArrowInstances from './ArrowInstances.svelte'
+  import InstancedAtoms from './InstancedAtoms.svelte'
+  import SiteLabels from './SiteLabels.svelte'
   import type { AtomColorConfig } from './atom-properties'
-  import {
-    get_orig_site_idx,
-    get_property_colors,
-  } from './atom-properties'
+  import { get_orig_site_idx, get_property_colors } from './atom-properties'
+  import type { SymmetryElement } from '../symmetry'
+  import { has_visible_symmetry_overlay } from '../symmetry/symmetry-elements'
+  import SymmetryElements from '../symmetry/SymmetryElements.svelte'
   import * as measure from './measure'
   import {
     compute_slice_geometry,
@@ -49,53 +48,31 @@
     PARTIAL_OCCUPANCY_CAP_ARC,
   } from './partial-occupancy'
   import type { MoyoDataset } from '@spglib/moyo-wasm'
-  import { T, useThrelte } from '@threlte/core'
+  import { T } from '@threlte/core'
   import * as extras from '@threlte/extras'
   import { type ComponentProps, type Snippet, untrack } from 'svelte'
   import { SvelteMap, SvelteSet } from 'svelte/reactivity'
-  import { type Camera, Color, type Mesh, type Object3D, type Scene, Vector3 } from 'three'
+  import { BufferAttribute, BufferGeometry, Color, DoubleSide, Vector3 } from 'three'
+  import type { Mesh, Object3D } from 'three'
   import Bond from './Bond.svelte'
   import type { BondEditResult, BondingStrategy, BondKeyTarget } from './bonding'
   import {
     add_or_restore_bond,
-    BONDING_STRATEGIES,
     BOND_ORDER_OPTIONS,
     canonicalize_bond_target,
+    compute_bonds,
     delete_bond as apply_delete_bond,
     get_bond_key,
     get_bond_render_matrices,
     get_explicit_bond_metadata,
+    get_majority_element,
     set_bond_order as apply_set_bond_order,
     structure_bond_to_bond_pair,
   } from './bonding'
-  import {
-    CanvasTooltip,
-    compose_perceived_bonds,
-    perceive_bond_orders,
-  } from './index'
-  import {
-    choose_site_label_offset,
-    LABEL_OFFSET_EPS,
-    make_label_position_calculator,
-  } from './label-placement'
-
-  type InstancedAtomGroup = {
-    element: string
-    radius: number
-    color: string
-    is_image_atom: boolean
-    atoms: (typeof atom_data)[number][]
-  }
-
-  function instanced_atom_group_key(
-    { element, radius, color, is_image_atom, atoms }: InstancedAtomGroup,
-    measure_mode: MeasureMode,
-  ): string {
-    const edit_mode_image = measure_mode === `edit-atoms` && is_image_atom
-    return `${element}-${format_num(radius, `.3~`)}-${color}-${
-      is_image_atom ? `img` : `base`
-    }-${edit_mode_image}-${atoms.length}`
-  }
+  import { CanvasTooltip, compose_perceived_bonds, perceive_bond_orders } from './index'
+  import { choose_site_label_offset, LABEL_OFFSET_EPS } from './atom-label-placement'
+  import type { PolyhedraColorMode, Polyhedron } from './polyhedra'
+  import { compute_polyhedra, merge_polyhedra_buffers } from './polyhedra'
 
   type EditableAtomHitTarget = {
     site_idx: number
@@ -129,6 +106,7 @@
     same_size_atoms = false,
     camera_position = DEFAULTS.structure.camera_position,
     camera_target = undefined,
+    camera_direction = undefined,
     camera_projection = DEFAULTS.structure.camera_projection,
     rotation_damping = DEFAULTS.structure.rotation_damping,
     max_zoom = DEFAULTS.structure.max_zoom,
@@ -168,12 +146,27 @@
     auto_bond_order = DEFAULTS.structure.auto_bond_order,
     aromatic_display = DEFAULTS.structure.aromatic_display,
     bonding_options = {},
+    show_polyhedra = DEFAULTS.structure.show_polyhedra,
+    polyhedra_opacity = DEFAULTS.structure.polyhedra_opacity,
+    polyhedra_show_edges = DEFAULTS.structure.polyhedra_show_edges,
+    polyhedra_edge_color = DEFAULTS.structure.polyhedra_edge_color,
+    polyhedra_color_mode = DEFAULTS.structure.polyhedra_color_mode,
+    polyhedra_color = DEFAULTS.structure.polyhedra_color,
+    polyhedra_hide_center_atoms = DEFAULTS.structure.polyhedra_hide_center_atoms,
+    polyhedra_min_neighbors = DEFAULTS.structure.polyhedra_min_neighbors,
+    polyhedra_max_neighbors = DEFAULTS.structure.polyhedra_max_neighbors,
+    polyhedra_excluded_elements = DEFAULTS.structure.polyhedra_excluded_elements,
+    polyhedra_included_elements = DEFAULTS.structure.polyhedra_included_elements,
+    polyhedra_rendered_elements = $bindable<string[]>([]),
     fov = DEFAULTS.structure.fov,
     initial_zoom = DEFAULTS.structure.initial_zoom,
     ambient_light = DEFAULTS.structure.ambient_light,
     directional_light = DEFAULTS.structure.directional_light,
     sphere_segments = DEFAULTS.structure.sphere_segments,
     lattice_props = {},
+    symmetry_elements = [],
+    symmetry_elements_props = {},
+    symmetry_declutter = true,
     atom_label,
     camera_is_moving = $bindable(false),
     width = 0,
@@ -218,7 +211,8 @@
     dragging_atoms = $bindable(false),
     volumetric_data = undefined,
     isosurface_settings = DEFAULT_ISOSURFACE_SETTINGS,
-  }: {
+    interactive = true,
+  }: SceneControlProps & {
     structure?: AnyStructure
     base_structure?: AnyStructure // The original structure without image atoms, used for property color calculation
     atom_radius?: number // scale factor for atomic radii
@@ -226,15 +220,9 @@
     // determined by the atomic radius of the element
     camera_position?: [x: number, y: number, z: number] // initial camera position from which to render the scene
     camera_target?: Vec3 // external orbit-controls target for pan synchronization
-    camera_projection?: CameraProjection // camera projection type
-    rotation_damping?: number // rotation damping factor (how quickly the rotation comes to rest after mouse release)
-    // zoom level of the camera
-    max_zoom?: number
-    min_zoom?: number
-    rotate_speed?: number // rotation speed. set to 0 to disable rotation.
-    zoom_speed?: number // zoom speed. set to 0 to disable zooming.
-    pan_speed?: number // pan speed. set to 0 to disable panning.
-    zoom_to_cursor?: boolean // zoom toward cursor position instead of scene center
+    // When set (and camera_position is unset/zero), auto-place the camera along this
+    // direction from the structure center (used by the multi-side view for fixed angles)
+    camera_direction?: Vec3
     show_atoms?: boolean
     show_bonds?: ShowBonds
     show_site_labels?: boolean
@@ -250,30 +238,49 @@
     vector_shaft_radius?: number
     vector_arrow_head_radius?: number
     vector_arrow_head_length?: number
-    gizmo?: boolean | ComponentProps<typeof extras.Gizmo>
     hovered_idx?: number | null
     hovered_site?: Site | null
     float_fmt?: string
-    auto_rotate?: number
-    initial_zoom?: number
     bond_thickness?: number
     bond_color?: string
     bonding_strategy?: BondingStrategy
     auto_bond_order?: boolean
     aromatic_display?: `aromatic` | `kekule`
     bonding_options?: Record<string, unknown>
-    fov?: number
-    ambient_light?: number
-    directional_light?: number
+    show_polyhedra?: ShowBonds // when to render coordination polyhedra
+    polyhedra_opacity?: number
+    polyhedra_show_edges?: boolean
+    polyhedra_edge_color?: string
+    polyhedra_color_mode?: PolyhedraColorMode
+    polyhedra_color?: string // custom color used when polyhedra_color_mode is 'uniform'
+    polyhedra_hide_center_atoms?: boolean
+    polyhedra_min_neighbors?: number // min coordination number to form a polyhedron
+    polyhedra_max_neighbors?: number // max CN - skips e.g. CN-12 cuboctahedra
+    polyhedra_excluded_elements?: readonly string[] // elements never used as polyhedra centers
+    polyhedra_included_elements?: readonly string[] // force-include (bypasses spectator hiding)
+    polyhedra_rendered_elements?: string[] // (output) elements that currently have polyhedra
     sphere_segments?: number
     lattice_props?: ComponentProps<typeof Lattice>
+    // Symmetry elements (from symmetry_elements_from_ops) to overlay on the structure.
+    // Fractional coords must refer to the SAME cell as the rendered lattice (moyo
+    // operations are in the input-cell frame, i.e. the original untransformed cell).
+    symmetry_elements?: SymmetryElement[]
+    symmetry_elements_props?: Omit<
+      ComponentProps<typeof SymmetryElements>,
+      `elements` | `lattice`
+    >
+    // Auto-reduce visual clutter while a symmetry-element overlay is visible: hides
+    // coordination polyhedra and calculated bonds, and shrinks atoms so axes/planes/
+    // centers stay readable. Purely derived — toggling the overlay off restores the
+    // configured appearance.
+    symmetry_declutter?: boolean
     atom_label?: Snippet<[{ site: Site; site_idx: number }]>
     site_label_size?: number
     site_label_offset?: Vec3
     site_label_bg_color?: string
     site_label_color?: string
     site_label_padding?: number
-    camera_is_moving?: boolean // used to prevent tooltip from showing while camera is moving
+    camera_is_moving?: boolean // bindable: true while orbit controls are active
     width?: number // Viewer dimensions for responsive zoom
     height?: number
     // measurement props
@@ -291,9 +298,6 @@
     active_sites?: number[]
     active_highlight_color?: string
     rotation?: Vec3 // rotation control prop
-    // Expose scene and camera for external use (e.g. export pane)
-    scene?: Scene
-    camera?: Camera
     orbit_controls?: ComponentProps<typeof extras.OrbitControls>[`ref`] // OrbitControls instance
     rotation_target_ref?: Vec3 // Expose rotation target for reset
     initial_computed_zoom?: number // Expose initial zoom for reset
@@ -314,6 +318,9 @@
     dragging_atoms?: boolean // true while TransformControls drag is active (skips expensive recalculations)
     volumetric_data?: VolumetricData // Active volumetric data for isosurface rendering
     isosurface_settings?: IsosurfaceSettings // Isosurface rendering settings
+    // When false, render the scene without hover/edit raycast helpers. Used by multi-side
+    // view so inactive panes skip interaction-only work while the active pane stays editable.
+    interactive?: boolean
   } = $props()
 
   const pulse = create_pulse_animation(
@@ -322,13 +329,9 @@
   )
   let pulse_opacity = $derived(0.15 + 0.25 * pulse.unit)
 
-  const threlte = useThrelte()
-  $effect(() => {
-    scene = threlte.scene
-    camera = threlte.camera.current
-    if (threlte.renderer) {
-      Object.assign(threlte.renderer.domElement, { __renderer: threlte.renderer })
-    }
+  bind_renderer((threlte_scene, threlte_camera) => {
+    scene = threlte_scene
+    camera = threlte_camera
   })
 
   // Expose rotation target for external reset
@@ -345,7 +348,6 @@
     initial_computed_zoom = stored_initial_zoom
   })
 
-  let bond_pairs: BondPair[] = $state([])
   let atom_tooltip_active = $state(false)
   let hovered_bond_key = $state<string | null>(null)
   const ATOM_HOVER_CLEAR_DELAY_MS = 200
@@ -373,20 +375,18 @@
     }, ATOM_HOVER_CLEAR_DELAY_MS)
   }
 
-  const atom_hover_props = (site_idx: number | null, disabled = false) => ({
-    onpointerenter: () => {
-      if (!disabled && site_idx != null) set_atom_hover(site_idx)
-    },
-    onpointermove: () => {
-      if (!disabled && site_idx != null) set_atom_hover(site_idx)
-    },
-    onpointerleave: () => {
-      if (!disabled && site_idx != null) schedule_atom_hover_clear(site_idx)
-    },
-  })
+  const atom_hover_props = (site_idx: number | null) =>
+    !interactive || site_idx == null
+      ? {}
+      : {
+          onpointerenter: () => set_atom_hover(site_idx),
+          onpointermove: () => set_atom_hover(site_idx),
+          onpointerleave: () => schedule_atom_hover_clear(site_idx),
+        }
 
   // Cursor style for the canvas, derived from mode and hover state
   let canvas_cursor = $derived.by(() => {
+    if (!interactive) return `default`
     if (measure_mode === `edit-atoms` && add_atom_mode) return `crosshair`
     if (measure_mode === `edit-bonds` && hovered_bond_key != null) {
       return bond_edits_enabled ? `pointer` : `not-allowed`
@@ -400,7 +400,6 @@
       if (measure_mode === `edit-atoms`) {
         const site = structure?.sites?.[hovered_idx]
         if (site?.properties?.orig_site_idx != null) return `not-allowed`
-        return `pointer`
       }
       return `pointer`
     }
@@ -455,8 +454,9 @@
   ): BondKeyTarget {
     const rendered_target = { site_idx_1, site_idx_2, cell_shift }
     const rendered_key = rendered_bond_key_for(rendered_target)
-    return find_added_bond_by_rendered_key(rendered_key) ??
-      canonical_bond_target(rendered_target)
+    return (
+      find_added_bond_by_rendered_key(rendered_key) ?? canonical_bond_target(rendered_target)
+    )
   }
 
   const is_image_bond_site = (site_idx: number): boolean =>
@@ -467,9 +467,11 @@
 
   const can_edit_bond = (bond: BondKeyTarget): boolean => {
     const target = canonical_bond_target(bond)
-    return bond_edits_enabled &&
+    return (
+      bond_edits_enabled &&
       !is_image_bond_site(target.site_idx_1) &&
       !is_image_bond_site(target.site_idx_2)
+    )
   }
 
   const format_bond_order = (order: BondOrder | undefined): string =>
@@ -481,10 +483,12 @@
     cell_shift?: Vec3,
   ): BondOrder | undefined {
     const key = get_bond_key(site_idx_1, site_idx_2, cell_shift)
-    return find_added_bond_by_rendered_key(key)?.order ??
+    return (
+      find_added_bond_by_rendered_key(key)?.order ??
       bond_order_overrides.find((bond) => matches_bond_key(bond, key))?.order ??
       added_bonds.find((bond) => matches_bond_key(bond, key))?.order ??
       filtered_bond_pairs.find((bond) => matches_bond_key(bond, key))?.bond_order
+    )
   }
 
   const midpoint = (pos_1: Vec3, pos_2: Vec3): Vec3 => [
@@ -534,9 +538,10 @@
       return site_idx
     }
 
-    const image_site_idx = structure.sites.findIndex((candidate_site) =>
-      candidate_site.properties?.orig_site_idx === site_idx &&
-      matches_world_position(candidate_site)
+    const image_site_idx = structure.sites.findIndex(
+      (candidate_site) =>
+        candidate_site.properties?.orig_site_idx === site_idx &&
+        matches_world_position(candidate_site),
     )
     return image_site_idx === -1 ? site_idx : image_site_idx
   }
@@ -571,10 +576,7 @@
 
   let label_screen_margin = $derived(site_label_size * 10 + site_label_padding)
 
-  function get_bond_context_menu_position(
-    bond: BondPair,
-    event?: BondContextMenuEvent,
-  ): Vec3 {
+  function get_bond_context_menu_position(bond: BondPair, event?: BondContextMenuEvent): Vec3 {
     const parent = event?.object?.parent
     if (!event?.point || !parent) return midpoint(bond.pos_1, bond.pos_2)
 
@@ -615,8 +617,10 @@
   ): BondPair | undefined => {
     const rendered_key = rendered_bond_key_for(target)
     const canonical_key = bond_key_for(canonical_target)
-    return filtered_bond_pairs.find((bond) => rendered_bond_key_for(bond) === rendered_key) ??
+    return (
+      filtered_bond_pairs.find((bond) => rendered_bond_key_for(bond) === rendered_key) ??
       filtered_bond_pairs.find((bond) => bond_key_for(bond) === canonical_key)
+    )
   }
 
   function open_bond_order_menu_for_target(
@@ -628,6 +632,7 @@
   }
 
   function add_or_restore_pair(site_idx_1: number, site_idx_2: number) {
+    if (!interactive) return // inactive panes must not mutate shared bond state
     const rendered_target = { site_idx_1, site_idx_2 }
     if (!can_edit_bond(rendered_target)) return
     const edit_state = current_bond_edit_state()
@@ -685,11 +690,7 @@
     const target = resolve_bond_edit_target(site_idx_1, site_idx_2, cell_shift)
     if (!can_edit_bond(target)) return
     apply_bond_edit_result(
-      apply_delete_bond(
-        current_bond_edit_state(),
-        target,
-        editable_perceived_bond_pairs,
-      ),
+      apply_delete_bond(current_bond_edit_state(), target, editable_perceived_bond_pairs),
     )
   }
 
@@ -703,12 +704,10 @@
   // intercept the same native click, only the first intersection should fire.
   // All threlte intersection events from one click share the same nativeEvent ref.
   let last_native_event: Event | null = null
-  // extras.Instance does not always emit pointerdown, so edit-bonds also falls
-  // back to click. When pointerdown did fire, skip the matching click once.
+  // Instanced-atom raycasts do not always emit pointerdown, so edit-bonds also
+  // falls back to click. When pointerdown did fire, skip the matching click once.
   let last_edit_bonds_pointerdown_site_idx: number | null = null
-  let clear_edit_bonds_pointerdown_site_timeout:
-    | ReturnType<typeof setTimeout>
-    | null = null
+  let clear_edit_bonds_pointerdown_site_timeout: ReturnType<typeof setTimeout> | null = null
 
   function remember_edit_bonds_pointerdown_site(site_idx: number) {
     last_edit_bonds_pointerdown_site_idx = site_idx
@@ -737,9 +736,62 @@
     return true
   }
 
+  // Selection handlers shared by instanced atom meshes and per-site hit targets
+  // so the edit-bonds click semantics can't drift between the two paths
+  const handle_atom_pointerdown = (site_idx: number, event: PointerEvent) => {
+    if (measure_mode !== `edit-bonds` || bond_edit_mode !== `add`) return
+    select_edit_bonds_site(site_idx, event)
+  }
+  const handle_atom_click = (site_idx: number, event: MouseEvent) => {
+    if (measure_mode === `edit-bonds`) {
+      if (bond_edit_mode !== `add`) return
+      if (skip_duplicate_edit_bonds_click(site_idx)) {
+        event.stopPropagation()
+        return
+      }
+    }
+    toggle_selection(site_idx, event)
+  }
+
+  // Pointer handlers for an instanced atom mesh: intersection events carry the
+  // hit `instanceId`, which indexes into the mesh's `atoms` array. One handler
+  // set per mesh instead of one per atom. Inactive grid panes render without
+  // raycast handlers; ghosted edit-mode image atoms are non-interactive.
+  type InstanceEvent = { instanceId?: number }
+  const atom_instance_events = (
+    instance_atoms: { site_idx: number }[],
+    is_edit_image: boolean,
+  ) => {
+    if (!interactive || is_edit_image) return {}
+    const wrap =
+      <Event_ extends InstanceEvent>(handler: (site_idx: number, event: Event_) => void) =>
+      (event: Event_) => {
+        const site_idx = instance_atoms[event.instanceId ?? -1]?.site_idx
+        if (site_idx != null) handler(site_idx, event)
+      }
+    return {
+      onpointerenter: wrap(set_atom_hover),
+      onpointermove: wrap(set_atom_hover),
+      onpointerleave: wrap(schedule_atom_hover_clear),
+      onpointerdown: wrap<PointerEvent & InstanceEvent>(handle_atom_pointerdown),
+      onclick: wrap<MouseEvent & InstanceEvent>(handle_atom_click),
+    }
+  }
+
+  // Pointer props (hover + select) for per-site hit-target meshes (partial-occupancy
+  // sites), with the same interactivity gating as atom_instance_events
+  const atom_pointer_props = (site_idx: number, is_edit_image: boolean) =>
+    !interactive || is_edit_image
+      ? {}
+      : {
+          ...atom_hover_props(site_idx),
+          onpointerdown: (event: PointerEvent) => handle_atom_pointerdown(site_idx, event),
+          onclick: (event: MouseEvent) => handle_atom_click(site_idx, event),
+        }
+
   function toggle_selection(site_index: number, evt?: Event) {
     evt?.stopPropagation?.()
-    const event_with_native = evt as Event & { nativeEvent?: unknown } | undefined
+    const event_with_native = evt as (Event & { nativeEvent?: unknown }) | undefined
     const native_event = event_with_native?.nativeEvent ?? evt
     if (native_event instanceof Event) {
       if (native_event === last_native_event) return
@@ -747,6 +799,9 @@
     }
 
     if (measure_mode === `edit-bonds`) {
+      // Only the active pane edits: inactive panes keep selection/hover overlays visible
+      // but must not change selection or add/restore bonds in shared state.
+      if (!interactive) return
       if (bond_edit_mode === `delete`) {
         measured_sites = []
         selected_sites = []
@@ -771,12 +826,16 @@
     }
 
     if (measure_mode === `edit-atoms`) {
+      // Inactive panes don't drive edit-atoms selection (gizmo/add-plane are interactive-gated)
+      if (!interactive) return
       // Block image atoms (detected by orig_site_idx property from PBC)
       const site = structure?.sites?.[site_index]
       if (site?.properties?.orig_site_idx != null) return
 
       const is_selected = selected_sites.includes(site_index)
-      const is_shift = evt instanceof MouseEvent && evt.shiftKey
+      // threlte dispatches plain objects wrapping the DOM event, so read shift
+      // from the extracted native event (evt itself is never a MouseEvent for 3D hits)
+      const is_shift = native_event instanceof MouseEvent && native_event.shiftKey
 
       // In edit-atoms mode, selected_sites and measured_sites always stay in sync
       let new_sites: number[]
@@ -826,11 +885,15 @@
   $effect(() => {
     const count = structure?.sites?.length ?? 0
     if (count <= 0) {
-      measured_sites = []
+      if (untrack(() => measured_sites.length) > 0) measured_sites = []
       return
     }
     untrack(() => {
-      measured_sites = measured_sites.filter((idx) => idx >= 0 && idx < count)
+      // Only reassign when out-of-range indices were dropped: a fresh (equal)
+      // array identity on every structure change would ripple through all
+      // measured_sites bindings and their dependents each frame of a trajectory.
+      const filtered = measured_sites.filter((idx) => idx >= 0 && idx < count)
+      if (filtered.length !== measured_sites.length) measured_sites = filtered
     })
   })
 
@@ -842,9 +905,7 @@
   $effect.pre(() => {
     hovered_site = structure?.sites?.[hovered_idx ?? -1] ?? null
   })
-  let lattice = $derived(
-    structure && `lattice` in structure ? structure.lattice : null,
-  )
+  let lattice = $derived(structure && `lattice` in structure ? structure.lattice : null)
 
   let visual_lattice = $derived(
     base_structure && `lattice` in base_structure ? base_structure.lattice : lattice,
@@ -852,11 +913,13 @@
 
   let rotation_target = $derived(
     lattice
-      ? (math.scale(math.add(...lattice.matrix), 0.5) as Vec3)
+      ? math.scale(math.add(...lattice.matrix), 0.5)
       : structure
-      ? get_center_of_mass(structure)
-      : [0, 0, 0] as Vec3,
+        ? get_center_of_mass(structure)
+        : ([0, 0, 0] as Vec3),
   )
+  // Negated target for the inner un-translate group (recomputed only on target change)
+  let neg_rotation_target = $derived(math.scale(rotation_target, -1) as Vec3)
 
   let structure_size = $derived.by(() => {
     if (lattice) return (lattice.a + lattice.b + lattice.c) / 2
@@ -873,8 +936,8 @@
   // Excludes PBC image atoms (orig_site_idx) so toggling image atoms doesn't affect arrow sizing.
   let char_atom_spacing = $derived.by(() => {
     if (!lattice || !structure?.sites?.length) return structure_size
-    const n_real = structure.sites.filter((site) =>
-      site.properties?.orig_site_idx == null
+    const n_real = structure.sites.filter(
+      (site) => site.properties?.orig_site_idx == null,
     ).length
     return n_real > 0 ? Math.cbrt(lattice.volume / n_real) : structure_size
   })
@@ -905,9 +968,19 @@
 
   // Using $state because this is mutated in an effect based on viewport/structure size
   let computed_zoom = $state(untrack(() => initial_zoom))
+  // structure_size is read untracked so structure changes don't re-zoom the user's view;
+  // zoom only re-frames on a genuine viewport resize. Skip same-value width/height
+  // re-fires (a wrapping component can transiently re-emit clientWidth/Height during a
+  // structure swap) so they don't sneak in a re-zoom with the new structure_size.
+  let last_zoom_dims: [number, number] = [0, 0]
   $effect(() => {
     if (!(width > 0) || !(height > 0)) return
-    const structure_max_dim = Math.max(1, untrack(() => structure_size))
+    if (width === last_zoom_dims[0] && height === last_zoom_dims[1]) return
+    last_zoom_dims = [width, height]
+    const structure_max_dim = Math.max(
+      1,
+      untrack(() => structure_size),
+    )
     const viewer_min_dim = Math.min(width, height)
     const scale_factor = viewer_min_dim / (structure_max_dim * 50) // 50px per unit
     let new_zoom = initial_zoom * scale_factor
@@ -916,24 +989,69 @@
     computed_zoom = new_zoom
   })
 
-  $effect.pre(() => { // Simple initial camera auto-position: proportional to structure size and fov
+  $effect.pre(() => {
+    // Simple initial camera auto-position: proportional to structure size and fov
     if (camera_position.every((val) => val === 0) && structure) {
       stored_initial_zoom = undefined
       const distance = Math.max(1, structure_size) * (60 / fov)
-      camera_position = [distance, distance * 0.3, distance * 0.8]
+      // When a view direction is given (multi-side view), place the camera
+      // target-relative along it; otherwise use the default angled position.
+      // normalize_vec returns [0,0,0] for an absent or zero-length direction (arrays are
+      // truthy, so a plain `camera_direction ?` check would miss [0,0,0]); treat that as
+      // "no direction" and fall back to the default, since placing the camera on the
+      // rotation target would be a degenerate zero-length view.
+      const view_dir: Vec3 = camera_direction
+        ? math.normalize_vec(camera_direction, [0, 0, 0])
+        : [0, 0, 0]
+      camera_position = view_dir.some((val) => val !== 0)
+        ? math.add(rotation_target, math.scale(view_dir, distance))
+        : [distance, distance * 0.3, distance * 0.8]
     }
   })
-  $effect(() => {
-    if (structure && show_bonds !== `never`) {
-      // Determine if we should show bonds based on the setting and structure type
-      const should_show_bonds = show_bonds === `always` ||
-        (show_bonds === `crystals` && lattice) ||
-        (show_bonds === `molecules` && !lattice)
-
-      if (should_show_bonds) {
-        bond_pairs = BONDING_STRATEGIES[bonding_strategy](structure, bonding_options)
-      } else bond_pairs = []
-    } else bond_pairs = []
+  // Whether a never|always|crystals|molecules setting applies to the current structure
+  const applies_to_structure = (when: ShowBonds): boolean =>
+    when === `always` ||
+    (when === `crystals` && Boolean(lattice)) ||
+    (when === `molecules` && !lattice)
+
+  // Declutter while a symmetry-element overlay actually draws something (elements present
+  // AND an enabled kind among them): hide coordination polyhedra/bonds and shrink atoms so
+  // axes/planes/centers stay readable. Gating on visibility (not just `symmetry_elements`)
+  // avoids hiding everything when nothing renders in its place — e.g. an inversion-only
+  // cell under the rotation-only default. Pure derived overrides: the configured
+  // appearance returns untouched the moment the overlay goes away.
+  const declutter_active = $derived(
+    symmetry_declutter &&
+      has_visible_symmetry_overlay(symmetry_elements, symmetry_elements_props.show_kinds),
+  )
+  const effective_show_polyhedra: ShowBonds = $derived(
+    declutter_active ? `never` : show_polyhedra,
+  )
+  // Calculated bonds are hidden in declutter mode (only their cylinders — bond_pairs
+  // stay computed so tooltips and manually added bonds keep working)
+  const effective_show_bonds: ShowBonds = $derived(declutter_active ? `never` : show_bonds)
+  const effective_atom_radius = $derived(declutter_active ? atom_radius * 0.6 : atom_radius)
+
+  // Derived (not effect + state) so downstream consumers (filtering, polyhedra,
+  // instanced bond buffers) recompute exactly once per structure change instead
+  // of once with stale bonds and again after an effect flush. The mutable cache
+  // lets atom drags freeze the last computed value (recompute happens on release).
+  // Bonds are computed when either bond rendering or polyhedra need them. The
+  // raw/effective mix is deliberate: RAW show_bonds keeps bond_pairs available
+  // during symmetry declutter (cylinders hide via effective_show_bonds in
+  // bonds_to_render, but tooltips + manually added bonds still need the data),
+  // while EFFECTIVE show_polyhedra skips computing bonds whose only consumer —
+  // the polyhedra $derived below, gated on the same effective value — won't run.
+  let last_bond_pairs: BondPair[] = []
+  let bond_pairs: BondPair[] = $derived.by(() => {
+    if (dragging_atoms) return last_bond_pairs
+    const want_bonds = applies_to_structure(show_bonds)
+    const want_polyhedra = applies_to_structure(effective_show_polyhedra)
+    last_bond_pairs =
+      structure && (want_bonds || want_polyhedra)
+        ? compute_bonds(structure, bonding_strategy, bonding_options)
+        : []
+    return last_bond_pairs
   })
 
   // Compute property-based colors when not using element coloring
@@ -957,9 +1075,16 @@
     return total_occu > 0 ? weighted_sum / total_occu : 1
   }
 
+  // Disordered sites are often stored as separate split sites (one species each)
+  // at the same position; merge_split_partial_sites groups them into one render
+  // site whose `species` holds every element. Shared by atom rendering and the
+  // hover tooltip so it lists all elements, not just the majority one.
+  let render_sites = $derived(
+    structure?.sites ? merge_split_partial_sites(structure.sites, hidden_elements) : [],
+  )
+
   let atom_data = $derived.by(() => {
-    if (!show_atoms || !structure?.sites) return []
-    const render_sites = merge_split_partial_sites(structure.sites, hidden_elements)
+    if (!show_atoms) return []
     return render_sites.flatMap(({ site_idx, site, is_image_atom }) => {
       const orig_idx = get_orig_site_idx(site, site_idx)
 
@@ -967,19 +1092,34 @@
       const prop_val = property_colors?.values[orig_idx]
       if (prop_val !== undefined && hidden_prop_vals.has(prop_val)) return []
 
+      // Optionally hide atoms at the center of a rendered polyhedron
+      if (polyhedra_hide_center_atoms && polyhedra_center_site_idxs.has(site_idx)) {
+        return []
+      }
+
+      // Phase-2 PBC images exist only to complete bonds/coordination polyhedra at
+      // cell faces. When neither renders (polyhedra toggled off, symmetry declutter,
+      // …) they'd float disconnected outside the cell — hide them.
+      if (
+        site.properties?.completion_image &&
+        !applies_to_structure(effective_show_bonds) &&
+        !applies_to_structure(effective_show_polyhedra)
+      )
+        return []
+
       // Calculate radius: same_size > site override > element override > default
       // All radii scale uniformly with atom_radius for consistent slider behavior
       const base_radius = same_size_atoms
         ? 1
-        : site_radius_overrides?.get(site_idx) ?? calc_weighted_radius(site)
-      const radius = base_radius * atom_radius
+        : (site_radius_overrides?.get(site_idx) ?? calc_weighted_radius(site))
+      const radius = base_radius * effective_atom_radius
 
       // Use property color if available (e.g. coordination number, Wyckoff position)
       // Otherwise, each species gets its own element color (important for disordered sites)
       const site_property_color = property_colors?.colors[orig_idx]
 
-      const visible_species = site.species.filter(({ element }) =>
-        !hidden_elements.has(element)
+      const visible_species = site.species.filter(
+        ({ element }) => !hidden_elements.has(element),
       )
       const slice_geometry = compute_slice_geometry(visible_species)
       return slice_geometry.map((slice_data) => {
@@ -1007,13 +1147,12 @@
   const is_site_visible = (site_idx: number): boolean => {
     if (!structure?.sites) return false
     const site = structure.sites[site_idx]
-    const has_visible_element = site?.species.some(({ element }) =>
-      !hidden_elements.has(element)
+    const has_visible_element = site?.species.some(
+      ({ element }) => !hidden_elements.has(element),
     )
     const orig_idx = get_orig_site_idx(site, site_idx)
     const prop_val = property_colors?.values[orig_idx]
-    const prop_visible = prop_val === undefined ||
-      !hidden_prop_vals.has(prop_val)
+    const prop_visible = prop_val === undefined || !hidden_prop_vals.has(prop_val)
     return has_visible_element && prop_visible
   }
 
@@ -1039,19 +1178,17 @@
   })
 
   let editable_perceived_bond_pairs = $derived(
-    perceived_bond_pairs.map((bond) => ({ ...bond, ...canonical_bond_target(bond) })),
+    interactive && bond_edits_enabled
+      ? perceived_bond_pairs.map((bond) => ({ ...bond, ...canonical_bond_target(bond) }))
+      : [],
   )
 
   let filtered_bond_pairs = $derived.by(() => {
     if (!structure?.sites) return perceived_bond_pairs
 
     // Build set of removed bond keys for efficient lookup
-    const removed_keys = new Set(
-      removed_bonds.map(bond_key_for),
-    )
-    const added_keys = new Set(
-      added_bonds.map(bond_key_for),
-    )
+    const removed_keys = new Set(removed_bonds.map(bond_key_for))
+    const added_keys = new Set(added_bonds.map(bond_key_for))
     const order_overrides = new Map(
       bond_order_overrides.map((bond) => [bond_key_for(bond), bond.order]),
     )
@@ -1079,20 +1216,117 @@
     return [...calculated, ...added]
   })
 
+  // Bonds drawn as cylinders. When show_bonds doesn't apply, calculated bonds are
+  // hidden but manually added bonds stay visible (bond_pairs may still be computed
+  // for polyhedra, so this can't rely on bond_pairs being empty).
+  let bonds_to_render = $derived.by(() => {
+    if (applies_to_structure(effective_show_bonds)) return filtered_bond_pairs
+    const added_keys = new Set(added_bonds.map(bond_key_for))
+    return filtered_bond_pairs.filter((bond) => added_keys.has(bond_key_for(bond)))
+  })
+
   let editable_bond_pairs = $derived(
-    bond_edits_enabled ? filtered_bond_pairs.filter(can_edit_bond) : [],
+    interactive && bond_edits_enabled ? bonds_to_render.filter(can_edit_bond) : [],
   )
 
+  // Coordination polyhedra around cation-like centers, derived from the same
+  // (edited, filtered) bond graph as rendered bonds so the two never disagree.
+  // Colors are resolved in polyhedra_buffers below, so color-scheme/mode changes
+  // never recompute the hull geometry.
+  let polyhedra: Polyhedron[] = $derived.by(() => {
+    if (
+      !structure?.sites ||
+      dragging_atoms ||
+      !applies_to_structure(effective_show_polyhedra) ||
+      filtered_bond_pairs.length === 0
+    )
+      return []
+    return compute_polyhedra(structure, filtered_bond_pairs, {
+      min_neighbors: polyhedra_min_neighbors,
+      max_neighbors: polyhedra_max_neighbors,
+      excluded_center_elements: polyhedra_excluded_elements,
+      included_center_elements: polyhedra_included_elements,
+    })
+  })
+
+  // Color of a site: property color (coordination/Wyckoff modes) or element color
+  const polyhedra_site_color = (site_idx: number): string => {
+    const site = structure?.sites[site_idx]
+    const orig_idx = get_orig_site_idx(site, site_idx)
+    const element = get_majority_element(site)
+    return (
+      property_colors?.colors[orig_idx] ?? (element && colors.element?.[element]) ?? `#808080`
+    )
+  }
+
+  // Separate derived so material-only changes (opacity, edge color) don't rebuild
+  // buffers and color changes don't rebuild hulls
+  let polyhedra_buffers = $derived.by(() => {
+    if (polyhedra.length === 0) return null
+    const get_vertex_color = (poly: Polyhedron, vertex_idx: number): string => {
+      if (polyhedra_color_mode === `uniform`) return polyhedra_color
+      if (polyhedra_color_mode === `center`) {
+        return polyhedra_site_color(poly.center_site_idx)
+      }
+      // 'vertex' (default): each corner takes the color of the atom that forms it
+      return polyhedra_site_color(poly.vertex_site_idxs[vertex_idx])
+    }
+    return merge_polyhedra_buffers(polyhedra, get_vertex_color)
+  })
+
+  let polyhedra_center_site_idxs = $derived(
+    new Set(polyhedra.map((poly) => poly.center_site_idx)),
+  )
+
+  // Publish which elements currently anchor polyhedra (consumed by controls so
+  // per-element toggles reflect the actual render state incl. spectator hiding)
+  $effect(() => {
+    if (!interactive) return
+    const elems = [...new Set(polyhedra.map((poly) => poly.center_element))].sort()
+    if (elems.join(`,`) !== polyhedra_rendered_elements.join(`,`)) {
+      polyhedra_rendered_elements = elems
+    }
+  })
+
+  // Geometries with proper disposal on dependency change (same pattern as ReferencePlane)
+  const buffer_geometry = (attrs: Record<string, Float32Array>): BufferGeometry => {
+    const geo = new BufferGeometry()
+    for (const [name, array] of Object.entries(attrs)) {
+      geo.setAttribute(name, new BufferAttribute(array, 3))
+    }
+    return geo
+  }
+  let polyhedra_geometry: BufferGeometry | null = $state(null)
+  $effect(() => {
+    let geo: BufferGeometry | null = null
+    if (polyhedra_buffers && polyhedra_buffers.triangle_count > 0) {
+      const { positions: position, colors: color } = polyhedra_buffers
+      geo = buffer_geometry({ position, color })
+      geo.computeVertexNormals() // non-indexed -> per-face normals (flat shading)
+    }
+    polyhedra_geometry = geo
+    return () => geo?.dispose()
+  })
+
+  let polyhedra_edge_geometry: BufferGeometry | null = $state(null)
+  $effect(() => {
+    const geo =
+      polyhedra_show_edges && polyhedra_buffers && polyhedra_buffers.edge_count > 0
+        ? buffer_geometry({ position: polyhedra_buffers.edge_positions })
+        : null
+    polyhedra_edge_geometry = geo
+    return () => geo?.dispose()
+  })
+
   let smart_site_label_offsets = $derived.by(() => {
-    const offsets = new SvelteMap<number, Vec3>()
-    if (filtered_bond_pairs.length === 0) return offsets
+    // Plain Maps: built and consumed inside deriveds, so per-entry reactivity
+    // (SvelteMap) would only add signal overhead for potentially thousands of sites
+    const offsets = new Map<number, Vec3>()
+    if (bonds_to_render.length === 0) return offsets
 
-    const bond_directions_by_site = new SvelteMap<number, Vec3[]>()
+    const bond_directions_by_site = new Map<number, Vec3[]>()
     const add_bond_direction = (site_idx: number, pos_1: Vec3, pos_2: Vec3) => {
-      const direction = math.normalize_vec(
-        math.subtract(pos_2, pos_1),
-        [0, 0, 0],
-      )
+      const direction = math.normalize_vec(math.subtract(pos_2, pos_1), [0, 0, 0])
       if (Math.hypot(...direction) < LABEL_OFFSET_EPS) return
       bond_directions_by_site.set(site_idx, [
         ...(bond_directions_by_site.get(site_idx) ?? []),
@@ -1100,7 +1334,7 @@
       ])
     }
 
-    for (const { site_idx_1, site_idx_2, pos_1, pos_2 } of filtered_bond_pairs) {
+    for (const { site_idx_1, site_idx_2, pos_1, pos_2 } of bonds_to_render) {
       add_bond_direction(site_idx_1, pos_1, pos_2)
       add_bond_direction(site_idx_2, pos_2, pos_1)
     }
@@ -1111,7 +1345,7 @@
   })
 
   let instanced_bond_groups = $derived.by(() => {
-    if (!structure?.sites || filtered_bond_pairs.length === 0) return []
+    if (!structure?.sites || bonds_to_render.length === 0) return []
 
     const group = {
       thickness: bond_thickness,
@@ -1124,14 +1358,14 @@
       }[],
     }
 
-    for (const bond_data of filtered_bond_pairs) {
+    for (const bond_data of bonds_to_render) {
       const site_a = structure.sites[bond_data.site_idx_1]
       const site_b = structure.sites[bond_data.site_idx_2]
 
       const get_majority_color = (site: typeof site_a) => {
         if (!site?.species || site.species.length === 0) return bond_color
         const majority_species = site.species.reduce((max, spec) =>
-          spec.occu > max.occu ? spec : max
+          spec.occu > max.occu ? spec : max,
         )
         return colors.element?.[majority_species.element] || bond_color
       }
@@ -1147,15 +1381,35 @@
   })
 
   let radius_by_site_idx = $derived.by(() => {
-    const map = new SvelteMap<number, number>()
+    const map = new Map<number, number>()
     for (const atom of atom_data) {
       if (!map.has(atom.site_idx)) map.set(atom.site_idx, atom.radius)
     }
     return map
   })
 
+  // Partial-occupancy atoms render as separate wedge (lune) meshes that converge
+  // to a point at the sphere's poles, leaving the ball hard to hover from some
+  // angles. Give each such site one invisible full-sphere hit target so it's as
+  // reliably hoverable as an ordered atom (single solid sphere). One per site.
+  let partial_hit_targets = $derived.by(() => {
+    if (!interactive) return []
+    const targets = new Map<number, EditableAtomHitTarget & { is_image_atom: boolean }>()
+    for (const atom of atom_data) {
+      if (!atom.has_partial_occupancy || targets.has(atom.site_idx)) continue
+      targets.set(atom.site_idx, {
+        site_idx: atom.site_idx,
+        position: atom.position,
+        radius: atom.radius,
+        is_image_atom: atom.is_image_atom,
+      })
+    }
+    return [...targets.values()]
+  })
+
   let editable_atom_hit_targets = $derived.by(() => {
     if (
+      !interactive ||
       measure_mode !== `edit-bonds` ||
       bond_edit_mode !== `add` ||
       !bond_edits_enabled
@@ -1163,7 +1417,7 @@
       return []
     }
 
-    const targets = new SvelteMap<number, EditableAtomHitTarget>()
+    const targets = new Map<number, EditableAtomHitTarget>()
     for (const atom of atom_data) {
       if (!can_select_bond_site(atom.site_idx)) continue
       if (targets.has(atom.site_idx)) continue
@@ -1179,13 +1433,47 @@
   // Get radius for a site (for highlight fallback when site is hidden/filtered)
   // Checks site_radius_overrides first for consistency with visible atoms
   const get_site_radius = (site: Site, site_idx: number | null): number => {
-    const override = site_idx !== null
-      ? site_radius_overrides?.get(site_idx)
-      : undefined
-    const base_radius = same_size_atoms ? 1 : override ?? calc_weighted_radius(site)
-    return base_radius * atom_radius
+    const override = site_idx !== null ? site_radius_overrides?.get(site_idx) : undefined
+    const base_radius = same_size_atoms ? 1 : (override ?? calc_weighted_radius(site))
+    return base_radius * effective_atom_radius
   }
 
+  // Sites to outline with a translucent sphere: hovered + all selected/active sites. Kept
+  // independent of the pulse animation so this list (with its per-site radius lookups) only
+  // rebuilds when highlighted sites change; pulsing opacity is applied per-frame in the
+  // template instead, avoiding a rebuild every frame in every multi-view pane.
+  type HighlightTarget = {
+    kind: `hover` | `selected` | `active`
+    site: Site
+    site_idx: number | null
+    color: string
+    radius: number
+  }
+  let highlight_targets: HighlightTarget[] = $derived.by(() => {
+    const targets: HighlightTarget[] = []
+    const add = (
+      kind: HighlightTarget[`kind`],
+      site: Site | null,
+      site_idx: number | null,
+      color: string,
+    ) => {
+      if (!site) return
+      const radius =
+        site_idx !== null
+          ? (radius_by_site_idx.get(site_idx) ?? get_site_radius(site, site_idx))
+          : get_site_radius(site, site_idx)
+      targets.push({ kind, site, site_idx, color, radius })
+    }
+    add(`hover`, hovered_site, hovered_idx, `white`)
+    for (const idx of selected_sites ?? []) {
+      add(`selected`, structure?.sites?.[idx] ?? null, idx, selection_highlight_color)
+    }
+    for (const idx of active_sites ?? []) {
+      add(`active`, structure?.sites?.[idx] ?? null, idx, active_highlight_color)
+    }
+    return targets
+  })
+
   // Interpolate between spin-down (#3498db blue) and spin-up (#e74c3c red)
   // based on the z-component direction of a magnetic vector
   function spin_direction_color(vec: Vec3): string {
@@ -1194,9 +1482,9 @@
     const red = Math.round(52 + (231 - 52) * z_frac)
     const grn = Math.round(152 + (76 - 152) * z_frac)
     const blu = Math.round(219 + (60 - 219) * z_frac)
-    return `#${red.toString(16).padStart(2, `0`)}${
-      grn.toString(16).padStart(2, `0`)
-    }${blu.toString(16).padStart(2, `0`)}`
+    return `#${red.toString(16).padStart(2, `0`)}${grn
+      .toString(16)
+      .padStart(2, `0`)}${blu.toString(16).padStart(2, `0`)}`
   }
 
   // Build one arrow layer per visible vector key. Auto-scales the longest
@@ -1216,7 +1504,7 @@
     let max_mag = 0
     const site_vec_maps = structure.sites.map((site, site_idx) => {
       if (!is_site_visible(site_idx)) return null
-      const map = new SvelteMap<string, Vec3>()
+      const map = new Map<string, Vec3>()
       for (const { key, vec } of get_all_site_vectors(site)) {
         map.set(key, vec)
         if (active_set.has(key)) {
@@ -1228,9 +1516,7 @@
 
     // When normalize is on, treat all magnitudes as 1 so arrows have equal length
     const effective_max = vector_normalize ? 1 : max_mag
-    const auto_scale = effective_max > 1e-10
-      ? (char_atom_spacing * 1.8) / effective_max
-      : 1
+    const auto_scale = effective_max > 1e-10 ? (char_atom_spacing * 1.8) / effective_max : 1
     const is_single = active_keys.length === 1
     const effective_global_scale = auto_scale * vector_scale
 
@@ -1240,40 +1526,40 @@
     // of the visual atom radius (0 = center, 0.5 = halfway to surface).
     // get_site_radius() returns the uniform scale applied to SphereGeometry(0.5),
     // so visual_radius = get_site_radius() * 0.5.
-    const site_offsets = (vector_origin_gap > 0 && !is_single)
-      ? structure.sites.map((site, site_idx) => {
-        const vec_map = site_vec_maps[site_idx]
-        if (!vec_map) return null
-        const site_keys = active_keys.filter((key) => vec_map.has(key))
-        const n_keys = site_keys.length
-        if (n_keys <= 1) return null
-        const visual_radius = get_site_radius(site, site_idx) * 0.5
-        const gap_abs = vector_origin_gap * visual_radius
-        let mean: Vec3 = [0, 0, 0]
-        for (const key of site_keys) {
-          const vec = vec_map.get(key)
-          if (vec) mean = math.add(mean, math.normalize_vec(vec)) as Vec3
-        }
-        const mean_dir = math.normalize_vec(mean, [0, 1, 0] as Vec3)
-        const [u_vec, v_vec] = math.compute_in_plane_basis(mean_dir)
-        const offsets = new SvelteMap<string, Vec3>()
-        for (const [idx, key] of site_keys.entries()) {
-          const angle = (2 * Math.PI * idx) / n_keys
-          const dx = math.scale(u_vec, gap_abs * Math.cos(angle)) as Vec3
-          const dy = math.scale(v_vec, gap_abs * Math.sin(angle)) as Vec3
-          offsets.set(key, math.add(dx, dy) as Vec3)
-        }
-        return offsets
-      })
-      : null
+    const site_offsets =
+      vector_origin_gap > 0 && !is_single
+        ? structure.sites.map((site, site_idx) => {
+            const vec_map = site_vec_maps[site_idx]
+            if (!vec_map) return null
+            const site_keys = active_keys.filter((key) => vec_map.has(key))
+            const n_keys = site_keys.length
+            if (n_keys <= 1) return null
+            const visual_radius = get_site_radius(site, site_idx) * 0.5
+            const gap_abs = vector_origin_gap * visual_radius
+            let mean: Vec3 = [0, 0, 0]
+            for (const key of site_keys) {
+              const vec = vec_map.get(key)
+              if (vec) mean = math.add(mean, math.normalize_vec(vec)) as Vec3
+            }
+            const mean_dir = math.normalize_vec(mean, [0, 1, 0] as Vec3)
+            const [u_vec, v_vec] = math.compute_in_plane_basis(mean_dir)
+            const offsets = new Map<string, Vec3>()
+            for (const [idx, key] of site_keys.entries()) {
+              const angle = (2 * Math.PI * idx) / n_keys
+              const dx = math.scale(u_vec, gap_abs * Math.cos(angle))
+              const dy = math.scale(v_vec, gap_abs * Math.sin(angle))
+              offsets.set(key, math.add(dx, dy))
+            }
+            return offsets
+          })
+        : null
 
     const mag_interpolator = get_d3_interpolator(vector_color_scale)
 
     return active_keys.map((key, layer_idx) => {
       const layer_cfg = vector_configs[key]
       const layer_scale = effective_global_scale * (layer_cfg?.scale ?? 1.0)
-      const layer_color = layer_cfg?.color ??
-        VECTOR_PALETTE[layer_idx % VECTOR_PALETTE.length]
+      const layer_color = layer_cfg?.color ?? VECTOR_PALETTE[layer_idx % VECTOR_PALETTE.length]
 
       const arrows = structure.sites
         .map((site, site_idx) => {
@@ -1289,11 +1575,12 @@
             arrow_color = layer_cfg.color
           } else if (!is_single) arrow_color = layer_color
           else {
-            const effective_mode = vector_color_mode === `auto`
-              ? (key.startsWith(`magmom`) || key.startsWith(`spin`)
-                ? `spin_direction`
-                : `element`)
-              : vector_color_mode
+            const effective_mode =
+              vector_color_mode === `auto`
+                ? key.startsWith(`magmom`) || key.startsWith(`spin`)
+                  ? `spin_direction`
+                  : `element`
+                : vector_color_mode
             if (effective_mode === `magnitude`) {
               const mag = Math.hypot(...vec)
               const norm = max_mag > 1e-10 ? mag / max_mag : 0
@@ -1303,19 +1590,18 @@
             } else if (effective_mode === `uniform`) {
               arrow_color = vector_color
             } else {
-              const majority_element = site.species.length > 0
-                ? site.species.reduce((max, spec) =>
-                  spec.occu > max.occu ? spec : max
-                ).element
-                : undefined
+              const majority_element =
+                site.species.length > 0
+                  ? site.species.reduce((max, spec) => (spec.occu > max.occu ? spec : max))
+                      .element
+                  : undefined
               arrow_color =
-                (majority_element && colors.element?.[majority_element]) ||
-                vector_color
+                (majority_element && colors.element?.[majority_element]) || vector_color
             }
           }
 
           const offset = site_offsets?.[site_idx]?.get(key)
-          const position = offset ? math.add(site.xyz, offset) as Vec3 : site.xyz
+          const position = offset ? math.add(site.xyz, offset) : site.xyz
           const arrow_vec = vector_normalize ? math.normalize_vec(vec) : vec
 
           return {
@@ -1332,90 +1618,69 @@
     })
   })
 
-  let instanced_atom_groups = $derived(
-    Object.values(
-      atom_data
-        .filter((atom) => !atom.has_partial_occupancy)
-        .reduce(
-          (groups, atom) => {
-            const { element, radius, color, is_image_atom } = atom
-            // Separate image atoms into their own groups for distinct styling in edit-atoms mode
-            const key = `${element}-${format_num(radius, `.3~`)}-${color}-${
-              is_image_atom ? `img` : `base`
-            }`
-            const bucket = groups[key] ||
-              (groups[key] = { element, radius, color, is_image_atom, atoms: [] })
-            bucket.atoms.push(atom)
-            return groups
-          },
-          {} as Record<string, InstancedAtomGroup>,
-        ),
-    ),
-  )
-
-  let unique_instanced_atoms = $derived(
-    Object.values(
-      instanced_atom_groups
-        .flatMap((group) => group.atoms)
-        .reduce((acc, atom) => {
-          acc[atom.site_idx] = atom
-          return acc
-        }, {} as Record<number, (typeof atom_data)[number]>),
-    ),
-  )
-
-  let gizmo_props = $derived.by(() => {
-    const axis_options = Object.fromEntries(
-      [...AXIS_COLORS, ...NEG_AXIS_COLORS].map(([axis, color, hover_color]) => [
-        axis,
-        {
-          color,
-          labelColor: `#111`,
-          opacity: axis.startsWith(`n`) ? 0.9 : 0.8,
-          hover: {
-            color: hover_color,
-            labelColor: `#222222`,
-            opacity: axis.startsWith(`n`) ? 1 : 0.9,
-          },
-        },
-      ]),
-    )
-    return {
-      background: { enabled: false },
-      className: `responsive-gizmo`,
-      ...axis_options,
-      ...(typeof gizmo === `boolean` ? {} : gizmo),
-      offset: { left: 5, bottom: 5 },
+  // Full-occupancy atoms split into base and PBC-image sets. Each set renders
+  // as ONE InstancedMesh (per-atom color/radius live in instance buffers), so
+  // no per-element grouping is needed. Image atoms get their own mesh because
+  // they ghost (desaturate + translucent) and lose interactivity in edit-atoms mode.
+  let instanced_atom_sets = $derived.by(() => {
+    const base: typeof atom_data = []
+    const image: typeof atom_data = []
+    for (const atom of atom_data) {
+      if (!atom.has_partial_occupancy) (atom.is_image_atom ? image : base).push(atom)
     }
+    return { base, image }
   })
 
-  let orbit_controls_props = $derived({
-    position: [0, 0, 0],
-    enableRotate: rotate_speed > 0,
-    rotateSpeed: rotate_speed,
-    enableZoom: zoom_speed > 0,
-    zoomSpeed: camera_projection === `orthographic` ? zoom_speed * 2 : zoom_speed,
-    zoomToCursor: zoom_to_cursor,
-    enablePan: pan_speed > 0,
-    panSpeed: pan_speed,
-    target: camera_target ?? rotation_target,
-    maxZoom: max_zoom,
-    minZoom: min_zoom,
-    autoRotate: Boolean(auto_rotate),
-    autoRotateSpeed: auto_rotate,
-    enableDamping: Boolean(rotation_damping),
-    dampingFactor: rotation_damping,
-    onstart: () => {
-      camera_is_moving = true
-      cancel_atom_hover_clear()
-      hovered_idx = null
-      bond_context_menu = null
-    },
-    onend: () => {
-      camera_is_moving = false
-    },
+  // One label anchor per visible site (sites can contribute several atom_data
+  // entries, e.g. partial-occupancy wedges — label each site once)
+  let label_entries = $derived.by(() => {
+    if (!show_site_labels && !show_site_indices) return []
+    const seen = new Set<number>()
+    const entries: { site_idx: number; position: Vec3; radius: number }[] = []
+    for (const atom of atom_data) {
+      if (seen.has(atom.site_idx)) continue
+      seen.add(atom.site_idx)
+      entries.push({
+        site_idx: atom.site_idx,
+        position: atom.position,
+        radius: atom.radius,
+      })
+    }
+    return entries
   })
 
+  // Partial-occupancy atoms render as separate wedge meshes (see template below).
+  // Derived so the filter isn't re-run inline on every render of the atoms group.
+  let partial_occupancy_atoms = $derived(
+    atom_data.filter((atom) => atom.has_partial_occupancy),
+  )
+
+  let orbit_controls_props = $derived(
+    build_orbit_props({
+      camera_projection,
+      target: camera_target ?? rotation_target,
+      rotate_speed,
+      zoom_speed,
+      zoom_to_cursor,
+      pan_speed,
+      max_zoom,
+      min_zoom,
+      auto_rotate,
+      rotation_damping,
+      set_camera_is_moving: (moving) => (camera_is_moving = moving),
+      // Close hover tooltips + bond context menu while the camera moves. Only hide the
+      // VISIBLE menu (not bond_context_target): clicking a menu button fires this
+      // orbit-controls start handler before the button's own handler runs, which still
+      // needs the target bond to apply the edit (see bond_context_target comment).
+      onstart_extra: () => {
+        cancel_atom_hover_clear()
+        hovered_idx = null
+        hovered_bond_key = null
+        bond_context_menu = null
+      },
+    }),
+  )
+
   let measure_line_color = $derived.by(() => {
     if (typeof window === `undefined`) return
     const root_styles = getComputedStyle(document.documentElement)
@@ -1424,27 +1689,15 @@
   })
 </script>
 
-{#snippet bond_instanced_mesh_snippet(
-  group: ComponentProps<typeof Bond>[`group`],
-)}
+{#snippet bond_instanced_mesh_snippet(group: ComponentProps<typeof Bond>[`group`])}
   {#key group.instances.length}
     <Bond {group} />
   {/key}
 {/snippet}
 
-{#snippet site_label_snippet(position: Vec3, site_idx: number)}
+{#snippet site_label_snippet(site_idx: number)}
   {@const site = structure!.sites[site_idx]}
-  {@const visual_radius = (radius_by_site_idx.get(site_idx) ?? 1) * 0.5}
-  <extras.HTML
-    center
-    position={position}
-    calculatePosition={make_label_position_calculator(
-      position,
-      () => smart_site_label_offsets.get(site_idx) ?? site_label_offset,
-      visual_radius,
-      label_screen_margin,
-    )}
-  >
+  {#if site}
     {#if atom_label}
       {@render atom_label({ site, site_idx })}
     {:else}
@@ -1475,10 +1728,7 @@
           {#if site.species.length === 1}
             {site.species[0].element}{#if show_site_indices}-{site_idx + 1}{/if}
           {:else}
-            {#each site.species as
-              { element, occu, oxidation_state }
-              (`${element}-${occu}-${oxidation_state}`)
-            }
+            {#each site.species as { element, occu, oxidation_state } (`${element}-${occu}-${oxidation_state}`)}
               {element}<sub>{format_num(occu, `.3~`).replace(`0.`, `.`)}</sub>
             {/each}
             {#if show_site_indices}-{site_idx + 1}{/if}
@@ -1488,34 +1738,20 @@
         {/if}
       </button>
     {/if}
-  </extras.HTML>
+  {/if}
 {/snippet}
 
-{#if camera_projection === `perspective`}
-  <T.PerspectiveCamera
-    makeDefault
-    position={camera_position}
-    {fov}
-    near={camera_near}
-    far={camera_far}
-  >
-    <extras.OrbitControls bind:ref={orbit_controls} {...orbit_controls_props}>
-      {#if gizmo}<extras.Gizmo {...gizmo_props} />{/if}
-    </extras.OrbitControls>
-  </T.PerspectiveCamera>
-{:else}
-  <T.OrthographicCamera
-    makeDefault
-    position={camera_position}
-    zoom={computed_zoom}
-    near={-100}
-    far={camera_far}
-  >
-    <extras.OrbitControls bind:ref={orbit_controls} {...orbit_controls_props}>
-      {#if gizmo}<extras.Gizmo {...gizmo_props} />{/if}
-    </extras.OrbitControls>
-  </T.OrthographicCamera>
-{/if}
+<SceneCamera
+  {camera_projection}
+  position={camera_position}
+  {fov}
+  zoom={computed_zoom}
+  near={camera_near}
+  far={camera_far}
+  orbit_props={orbit_controls_props}
+  {gizmo}
+  bind:orbit_controls
+/>
 
 <T.DirectionalLight position={[3, 10, 10]} intensity={directional_light} />
 <T.AmbientLight intensity={ambient_light} />
@@ -1523,100 +1759,39 @@
 <!-- Apply manual rotation around center: translate to origin, rotate, translate back -->
 <T.Group position={rotation_target}>
   <T.Group {rotation}>
-    <T.Group position={math.scale(rotation_target, -1)}>
+    <T.Group position={neg_rotation_target}>
       {#if show_atoms}
-        <!-- Instanced rendering for full occupancy atoms -->
-        {#each instanced_atom_groups as atom_group (instanced_atom_group_key(atom_group, measure_mode))}
-          {@const { element, radius, color, is_image_atom, atoms } = atom_group}
-          {@const edit_mode_image = measure_mode === `edit-atoms` && is_image_atom}
-          <extras.InstancedMesh
-            key={instanced_atom_group_key(atom_group, measure_mode)}
-            limit={atoms.length}
-            range={atoms.length}
-            frustumCulled={false}
-          >
-            <T.SphereGeometry args={[0.5, sphere_segments, sphere_segments]} />
-            <T.MeshStandardMaterial
-              color={edit_mode_image ? desaturate(color) : color}
-              opacity={edit_mode_image ? 0.5 : 1}
-              transparent={edit_mode_image}
-            />
-            {#each atoms as atom (atom.site_idx)}
-              <extras.Instance
-                position={atom.position}
-                scale={atom.radius}
-                {...atom_hover_props(atom.site_idx, edit_mode_image)}
-                onpointerdown={(event: PointerEvent) => {
-                  if (
-                    edit_mode_image ||
-                    measure_mode !== `edit-bonds` ||
-                    bond_edit_mode !== `add`
-                  ) {
-                    return
-                  }
-                  select_edit_bonds_site(atom.site_idx, event)
-                }}
-                onclick={(event: MouseEvent) => {
-                  if (edit_mode_image) return
-                  if (measure_mode === `edit-bonds`) {
-                    if (bond_edit_mode !== `add`) return
-                    if (skip_duplicate_edit_bonds_click(atom.site_idx)) {
-                      event.stopPropagation()
-                      return
-                    }
-                  }
-                  toggle_selection(atom.site_idx, event)
-                }}
-              />
-            {/each}
-          </extras.InstancedMesh>
-        {/each}
+        <!-- Instanced rendering for full-occupancy atoms: one InstancedMesh for
+          base atoms and one for PBC image atoms (which ghost + lose interaction
+          in edit-atoms mode). Pointer events are resolved via raycast instanceId. -->
+        {#if instanced_atom_sets.base.length > 0}
+          <InstancedAtoms
+            atoms={instanced_atom_sets.base}
+            {sphere_segments}
+            {...atom_instance_events(instanced_atom_sets.base, false)}
+          />
+        {/if}
+        {#if instanced_atom_sets.image.length > 0}
+          {@const edit_mode_image = measure_mode === `edit-atoms`}
+          <InstancedAtoms
+            atoms={instanced_atom_sets.image}
+            {sphere_segments}
+            ghost={edit_mode_image}
+            {...atom_instance_events(instanced_atom_sets.image, edit_mode_image)}
+          />
+        {/if}
 
         <!-- Regular rendering for partial occupancy atoms -->
-        {#each atom_data.filter((atom) => atom.has_partial_occupancy) as
-          atom
-          (atom.site_idx + atom.element + atom.occupancy)
-        }
+        {#each partial_occupancy_atoms as atom (atom.site_idx + atom.element + atom.occupancy)}
           {@const partial_edit_image = measure_mode === `edit-atoms` && atom.is_image_atom}
           {@const ghost_opacity = partial_edit_image ? 0.5 : 1}
-          <T.Group
-            position={atom.position}
-            scale={atom.radius}
-            {...atom_hover_props(atom.site_idx, partial_edit_image)}
-            onpointerdown={(event: PointerEvent) => {
-              if (
-                partial_edit_image ||
-                measure_mode !== `edit-bonds` ||
-                bond_edit_mode !== `add`
-              ) {
-                return
-              }
-              select_edit_bonds_site(atom.site_idx, event)
-            }}
-            onclick={(event: MouseEvent) => {
-              if (partial_edit_image) return
-              if (measure_mode === `edit-bonds`) {
-                if (bond_edit_mode !== `add`) return
-                if (skip_duplicate_edit_bonds_click(atom.site_idx)) {
-                  event.stopPropagation()
-                  return
-                }
-              }
-              toggle_selection(atom.site_idx, event)
-            }}
-          >
-            {@const partial_color = partial_edit_image
-            ? desaturate(atom.color)
-            : atom.color}
+          <!-- Visual only: pointer interaction handled by the invisible full-sphere
+            hit targets below (wedge meshes leave gaps at the poles). -->
+          <T.Group position={atom.position} scale={atom.radius}>
+            {@const partial_color = partial_edit_image ? desaturate(atom.color) : atom.color}
             <T.Mesh>
               <T.SphereGeometry
-                args={[
-                  0.5,
-                  sphere_segments,
-                  sphere_segments,
-                  atom.start_phi,
-                  atom.phi_length,
-                ]}
+                args={[0.5, sphere_segments, sphere_segments, atom.start_phi, atom.phi_length]}
               />
               <T.MeshStandardMaterial
                 color={partial_color}
@@ -1625,7 +1800,7 @@
               />
             </T.Mesh>
 
-            {#if atom.has_partial_occupancy && atom.render_start_cap}
+            {#if atom.render_start_cap}
               <T.Mesh rotation={[0, atom.start_phi, 0]}>
                 <T.CircleGeometry
                   args={[
@@ -1643,7 +1818,7 @@
                 />
               </T.Mesh>
             {/if}
-            {#if atom.has_partial_occupancy && atom.render_end_cap}
+            {#if atom.render_end_cap}
               <T.Mesh rotation={[0, atom.end_phi, 0]}>
                 <T.CircleGeometry
                   args={[
@@ -1662,31 +1837,47 @@
               </T.Mesh>
             {/if}
           </T.Group>
+        {/each}
 
-          <!-- Render label only for the first species of this site to avoid duplicates -->
-          {#if (show_site_labels || show_site_indices) &&
-          atom.element === structure!.sites[atom.site_idx].species[0].element}
-            {@render site_label_snippet(atom.position, atom.site_idx)}
-          {/if}
+        <!-- Invisible full-sphere hit targets for partial-occupancy sites so the
+          whole ball is hoverable/clickable (wedge meshes leave gaps at the poles). -->
+        {#each partial_hit_targets as hit (hit.site_idx)}
+          {@const hit_edit_image = measure_mode === `edit-atoms` && hit.is_image_atom}
+          <T.Mesh
+            position={hit.position}
+            scale={hit.radius}
+            {...atom_pointer_props(hit.site_idx, hit_edit_image)}
+          >
+            <T.SphereGeometry args={[0.5, sphere_segments, sphere_segments]} />
+            <T.MeshBasicMaterial transparent opacity={0} depthWrite={false} />
+          </T.Mesh>
         {/each}
 
-        <!-- Site labels/indices for instanced atoms -->
-        {#if show_site_labels || show_site_indices}
-          {#each unique_instanced_atoms as atom (atom.site_idx)}
-            {@render site_label_snippet(atom.position, atom.site_idx)}
-          {/each}
+        <!-- Site labels/indices: single overlay for all labels (one DOM container
+          + one per-frame position pass instead of one threlte <HTML> per label) -->
+        {#if label_entries.length > 0}
+          <SiteLabels
+            entries={label_entries}
+            get_offset={(site_idx) =>
+              smart_site_label_offsets.get(site_idx) ?? site_label_offset}
+            screen_margin={label_screen_margin}
+          >
+            {#snippet label({ site_idx })}
+              {@render site_label_snippet(site_idx)}
+            {/snippet}
+          </SiteLabels>
         {/if}
       {/if}
 
+      <!-- Per-site vector arrows (forces, magmoms, ...) as instanced meshes:
+        2 draw calls per layer instead of 2 meshes per site -->
       {#each vector_layers as layer (layer.key)}
-        {#each layer.arrows as arrow (`${layer.key}-${arrow.site_idx}`)}
-          <Arrow
-            {...arrow}
-            shaft_radius={eff_shaft_radius}
-            arrow_head_radius={eff_head_radius}
-            arrow_head_length={eff_head_length}
-          />
-        {/each}
+        <ArrowInstances
+          arrows={layer.arrows}
+          shaft_radius={eff_shaft_radius}
+          arrow_head_radius={eff_head_radius}
+          arrow_head_length={eff_head_length}
+        />
       {/each}
 
       <!-- Instanced bond rendering with gradient colors -->
@@ -1696,17 +1887,39 @@
         {/each}
       {/if}
 
+      <!-- Coordination polyhedra: all faces in one merged mesh, edges in one
+        LineSegments (1-2 draw calls regardless of supercell size) -->
+      {#if polyhedra_geometry}
+        <T.Mesh geometry={polyhedra_geometry} frustumCulled={false} raycast={() => null}>
+          <!-- depthWrite when mostly opaque: VESTA-like occlusion between polyhedra;
+            fully translucent settings fall back to see-through blending -->
+          <T.MeshStandardMaterial
+            vertexColors
+            transparent={polyhedra_opacity < 1}
+            opacity={polyhedra_opacity}
+            side={DoubleSide}
+            depthWrite={polyhedra_opacity >= 0.65}
+            flatShading
+          />
+        </T.Mesh>
+        {#if polyhedra_edge_geometry}
+          <T.LineSegments
+            geometry={polyhedra_edge_geometry}
+            frustumCulled={false}
+            raycast={() => null}
+          >
+            <T.LineBasicMaterial color={polyhedra_edge_color} />
+          </T.LineSegments>
+        {/if}
+      {/if}
+
       <!-- Clickable bond hit-test cylinders in edit-bonds mode -->
-      {#if measure_mode === `edit-bonds` && editable_bond_pairs.length > 0}
-        {#each editable_bond_pairs as
-          bond
-          (`bond-hit-${bond_edit_mode}-${rendered_bond_key_for(bond)}`)
-        }
+      {#if interactive && measure_mode === `edit-bonds` && editable_bond_pairs.length > 0}
+        {#each editable_bond_pairs as bond (`bond-hit-${bond_edit_mode}-${rendered_bond_key_for(bond)}`)}
           {@const bond_key = rendered_bond_key_for(bond)}
           {@const is_hovered = hovered_bond_key === bond_key}
           {@const is_delete_mode = bond_edit_mode === `delete`}
-          {@const bond_hit_radius =
-            bond_thickness * (is_delete_mode ? 5 : 1.25)}
+          {@const bond_hit_radius = bond_thickness * (is_delete_mode ? 5 : 1.25)}
           {@const bond_hover_radius = bond_thickness * 1.1}
           <T.Mesh
             matrixAutoUpdate={false}
@@ -1735,19 +1948,8 @@
             onpointermove={() => (hovered_bond_key = bond_key)}
             onpointerleave={() => (hovered_bond_key = null)}
           >
-            <T.CylinderGeometry
-              args={[
-                bond_hit_radius,
-                bond_hit_radius,
-                1,
-                6,
-              ]}
-            />
-            <T.MeshBasicMaterial
-              transparent
-              opacity={0}
-              depthWrite={false}
-            />
+            <T.CylinderGeometry args={[bond_hit_radius, bond_hit_radius, 1, 6]} />
+            <T.MeshBasicMaterial transparent opacity={0} depthWrite={false} />
           </T.Mesh>
           {#if is_hovered}
             <T.Mesh
@@ -1766,7 +1968,7 @@
         {/each}
       {/if}
 
-      {#if editable_atom_hit_targets.length > 0}
+      {#if interactive && editable_atom_hit_targets.length > 0}
         {#each editable_atom_hit_targets as atom_hit (atom_hit.site_idx)}
           <T.Mesh
             position={atom_hit.position}
@@ -1777,16 +1979,12 @@
             }}
           >
             <T.SphereGeometry args={[0.5, 12, 12]} />
-            <T.MeshBasicMaterial
-              transparent
-              opacity={0}
-              depthWrite={false}
-            />
+            <T.MeshBasicMaterial transparent opacity={0} depthWrite={false} />
           </T.Mesh>
         {/each}
       {/if}
 
-      {#if measure_mode === `edit-bonds` && bond_context_menu}
+      {#if interactive && measure_mode === `edit-bonds` && bond_context_menu}
         {@const current_order = get_current_bond_order(
           bond_context_menu.site_idx_1,
           bond_context_menu.site_idx_2,
@@ -1850,68 +2048,37 @@
         </extras.HTML>
       {/if}
 
-      <!-- highlight hovered, active and selected sites -->
-      {#each [
-          {
-            kind: `hover`,
-            site: hovered_site,
-            opacity: 0.28,
-            color: `white`,
-            site_idx: hovered_idx,
-          },
-          ...((selected_sites ?? []).map((idx) => ({
-            kind: `selected`,
-            site: structure?.sites?.[idx] ?? null,
-            site_idx: idx,
-            opacity: pulse_opacity,
-            color: selection_highlight_color,
-          }))),
-          ...((active_sites ?? []).map((idx) => ({
-            kind: `active`,
-            site: structure?.sites?.[idx] ?? null,
-            site_idx: idx,
-            opacity: pulse_opacity, // Let it pulse freely
-            color: active_highlight_color,
-          }))),
-        ] as
-        entry
-        (`${entry.kind}-${entry.site_idx}`)
-      }
-        {@const { site, opacity, color, kind, site_idx } = entry}
-        {#if site}
-          {@const xyz = site.xyz}
-          {@const highlight_radius = site_idx !== null
-          ? radius_by_site_idx.get(site_idx) ?? get_site_radius(site, site_idx)
-          : get_site_radius(site, site_idx)}
-          <T.Mesh
-            position={xyz}
-            scale={1.2 * highlight_radius}
-            oncreate={disable_raycast}
-          >
-            <T.SphereGeometry args={[0.5, 22, 22]} />
-            <T.MeshStandardMaterial
-              {color}
-              transparent
-              {opacity}
-              emissive={color}
-              emissiveIntensity={kind === `selected` || kind === `active` ? 0.7 : 0.2}
-              depthTest={false}
-              depthWrite={false}
-            />
-          </T.Mesh>
-        {/if}
+      <!-- highlight hovered, active and selected sites. The target list is a pulse-
+        independent $derived; only the opacity reads the per-frame pulse value so the
+        array isn't rebuilt every animation frame. -->
+      {#each highlight_targets as entry (`${entry.kind}-${entry.site_idx}`)}
+        {@const is_pulsing = entry.kind !== `hover`}
+        <T.Mesh
+          position={entry.site.xyz}
+          scale={1.2 * entry.radius}
+          oncreate={disable_raycast}
+        >
+          <T.SphereGeometry args={[0.5, 22, 22]} />
+          <T.MeshStandardMaterial
+            color={entry.color}
+            transparent
+            opacity={is_pulsing ? pulse_opacity : 0.28}
+            emissive={entry.color}
+            emissiveIntensity={is_pulsing ? 0.7 : 0.2}
+            depthTest={false}
+            depthWrite={false}
+          />
+        </T.Mesh>
       {/each}
 
       <!-- selection order labels (1, 2, 3, ...) for measurements and bond editing -->
-      {#if structure?.sites && (measured_sites?.length ?? 0) > 0 &&
-        (measure_mode === `distance` || measure_mode === `angle` ||
-          measure_mode === `edit-bonds`)}
+      {#if structure?.sites && (measured_sites?.length ?? 0) > 0 && (measure_mode === `distance` || measure_mode === `angle` || measure_mode === `edit-bonds`)}
         {#each measured_sites as site_index, loop_idx (site_index)}
           {@const site = structure.sites[site_index]}
           {#if site}
             <!-- shift selected site labels down to avoid overlapping regular site labels-->
-            {@const selection_offset = math.add(site_label_offset, [0, -0.5, 0])}
-            {@const pos = math.add(site.xyz, selection_offset) as Vec3}
+            {@const selection_offset = math.add<Vec3>(site_label_offset, [0, -0.5, 0])}
+            {@const pos = math.add(site.xyz, selection_offset)}
             <extras.HTML center position={pos}>
               <span class="selection-label">{loop_idx + 1}</span>
             </extras.HTML>
@@ -1920,24 +2087,18 @@
       {/if}
 
       <!-- hovered site tooltip -->
-      {#if hovered_site && !camera_is_moving &&
-        (atom_tooltip_active || active_sites.includes(hovered_idx ?? -1))}
-        {@const abc = hovered_site.abc.map((val) => format_num(val, float_fmt)).join(
-          `, `,
-        )}
-        {@const xyz = hovered_site.xyz.map((val) => format_num(val, float_fmt)).join(
-          `, `,
-        )}
+      {#if hovered_site && !camera_is_moving && (atom_tooltip_active || active_sites.includes(hovered_idx ?? -1))}
+        {@const abc = hovered_site.abc.map((val) => format_num(val, float_fmt)).join(`, `)}
+        {@const xyz = hovered_site.xyz.map((val) => format_num(val, float_fmt)).join(`, `)}
         {@const bond_neighbors = (() => {
           if (hovered_idx == null || !structure?.sites) return []
           return filtered_bond_pairs
-            .filter((bond) =>
-              bond.site_idx_1 === hovered_idx || bond.site_idx_2 === hovered_idx
+            .filter(
+              (bond) => bond.site_idx_1 === hovered_idx || bond.site_idx_2 === hovered_idx,
             )
             .map((bond) => {
-              const neighbor_idx = bond.site_idx_1 === hovered_idx
-                ? bond.site_idx_2
-                : bond.site_idx_1
+              const neighbor_idx =
+                bond.site_idx_1 === hovered_idx ? bond.site_idx_2 : bond.site_idx_1
               return structure.sites[neighbor_idx]?.species[0]?.element ?? `?`
             })
         })()}
@@ -1952,28 +2113,25 @@
             .map(([elem, count]) => `${elem}: ${count}`)
           return ` (${parts.join(`, `)})`
         })()}
+        {@const tooltip_species =
+          render_sites.find((rs) => rs.site_idx === hovered_idx)?.site.species ??
+          hovered_site.species ??
+          []}
         <CanvasTooltip position={hovered_site.xyz}>
           <!-- Element symbols with occupancies for disordered sites -->
           <div class="elements">
-            {#each hovered_site.species ?? [] as
-              { element, occu, oxidation_state: oxi_state },
-              idx
-              (`${element ?? ``}-${occu ?? ``}-${oxi_state ?? ``}-${idx}`)
-            }
-              {@const element_name = element_data.find((elem) =>
-              elem.symbol === element
-            )?.name ??
-              ``}
-              {#if idx > 0}&thinsp;{/if}
-              {#if occu !== 1}<span class="occupancy">{
-                  format_num(occu, `.3~f`)
-                }</span>{/if}
-              <strong>
-                {element}{#if oxi_state != null && oxi_state !== 0}<sup>{Math.abs(
-                    oxi_state,
-                  )}{oxi_state > 0 ? `+` : `−`}</sup>{/if}
-              </strong>
-              {#if element_name}<span class="elem-name">{element_name}</span>{/if}
+            {#each tooltip_species as { element, occu, oxidation_state: oxi_state }, idx (`${element ?? ``}-${occu ?? ``}-${oxi_state ?? ``}-${idx}`)}
+              {@const element_name =
+                element_data.find((elem) => elem.symbol === element)?.name ?? ``}
+              <span class="species">
+                {#if occu !== 1}<span class="occupancy">{format_num(occu, `.3~f`)}</span>{/if}
+                <strong>
+                  {element}{#if oxi_state != null && oxi_state !== 0}<sup
+                      >{Math.abs(oxi_state)}{oxi_state > 0 ? `+` : `−`}</sup
+                    >{/if}
+                </strong>
+                {#if element_name}<span class="elem-name">{element_name}</span>{/if}
+              </span>
             {/each}
           </div>
           <div class="coordinates fractional">abc: ({abc})</div>
@@ -1986,26 +2144,29 @@
 
       {#if visual_lattice}
         <Lattice matrix={visual_lattice.matrix} {...lattice_props} />
+        {#if symmetry_elements.length > 0}
+          <SymmetryElements
+            elements={symmetry_elements}
+            lattice={visual_lattice.matrix}
+            {...symmetry_elements_props}
+          />
+        {/if}
       {/if}
 
       <!-- TransformControls for editing atoms in edit-atoms mode -->
-      {#if measure_mode === `edit-atoms` && selected_sites.length > 0 &&
-          structure?.sites}
+      {#if interactive && measure_mode === `edit-atoms` && selected_sites.length > 0 && structure?.sites}
         {@const selected_atoms = selected_sites
           .map((idx) => structure?.sites?.[idx])
           .filter((site): site is Site => site != null)}
         {#if selected_atoms.length > 0}
           {@const avg = (dim: number) =>
-          selected_atoms.reduce((sum, atom) => sum + atom.xyz[dim], 0) /
-          selected_atoms.length}
+            selected_atoms.reduce((sum, atom) => sum + atom.xyz[dim], 0) /
+            selected_atoms.length}
           {@const centroid = [avg(0), avg(1), avg(2)] as Vec3}
           <!-- Invisible mesh at centroid for TransformControls to manipulate.
                During drag, use frozen_centroid so Svelte doesn't override TransformControls
                with the wrapped centroid (which jumps on PBC boundary crossings). -->
-          <T.Mesh
-            position={frozen_centroid ?? centroid}
-            bind:ref={transform_object}
-          >
+          <T.Mesh position={frozen_centroid ?? centroid} bind:ref={transform_object}>
             <T.SphereGeometry args={[0.01, 4, 4]} />
             <T.MeshBasicMaterial transparent opacity={0} />
           </T.Mesh>
@@ -2044,7 +2205,7 @@
 
       <!-- Invisible plane for click-to-place atom in add-atom mode -->
       <!-- Uses onBeforeRender to orient normal toward camera so raycasts always hit -->
-      {#if measure_mode === `edit-atoms` && add_atom_mode}
+      {#if interactive && measure_mode === `edit-atoms` && add_atom_mode}
         {@const center = rotation_target ?? [0, 0, 0]}
         <T.Mesh
           position={center}
@@ -2059,10 +2220,7 @@
           }}
         >
           <T.PlaneGeometry
-            args={[
-              Math.max(200, structure_size * 4),
-              Math.max(200, structure_size * 4),
-            ]}
+            args={[Math.max(200, structure_size * 4), Math.max(200, structure_size * 4)]}
           />
           <T.MeshBasicMaterial transparent opacity={0} side={2} depthWrite={false} />
         </T.Mesh>
@@ -2082,27 +2240,23 @@
               {@const site_j = structure.sites[idx_j]}
               {@const pos_i = site_i.xyz}
               {@const pos_j = site_j.xyz}
-              <Cylinder
-                from={pos_i}
-                to={pos_j}
-                thickness={0.12}
-                color={measure_line_color}
-              />
+              <Cylinder from={pos_i} to={pos_j} thickness={0.12} color={measure_line_color} />
               {@const midpoint = [
-          (pos_i[0] + pos_j[0]) / 2,
-          (pos_i[1] + pos_j[1]) / 2,
-          (pos_i[2] + pos_j[2]) / 2,
-        ] as Vec3}
+                (pos_i[0] + pos_j[0]) / 2,
+                (pos_i[1] + pos_j[1]) / 2,
+                (pos_i[2] + pos_j[2]) / 2,
+              ] as Vec3}
               {@const direct = math.euclidean_dist(pos_i, pos_j)}
               {@const pbc = lattice
-          ? measure.distance_pbc(pos_i, pos_j, lattice.matrix, undefined, lattice.pbc)
-          : direct}
+                ? measure.distance_pbc(pos_i, pos_j, lattice.matrix, undefined, lattice.pbc)
+                : direct}
               {@const differ = lattice ? Math.abs(pbc - direct) > 1e-6 : false}
               <extras.HTML center position={midpoint}>
                 <span class="measure-label">
                   {#if differ}
                     PBC: {format_num(pbc, float_fmt)} Å<br /><small>
-                      Direct: {format_num(direct, float_fmt)} Å</small>
+                      Direct: {format_num(direct, float_fmt)} Å</small
+                    >
                   {:else}
                     {format_num(pbc, float_fmt)} Å
                   {/if}
@@ -2113,19 +2267,20 @@
         {:else if measure_mode === `angle` && measured_sites.length >= 3}
           {#each measured_sites as idx_center (idx_center)}
             {@const center = structure.sites[idx_center]}
-            {#each measured_sites.filter((idx) => idx !== idx_center) as
-              idx_a,
-              loop_idx
-              (idx_center + `-` + idx_a)
-            }
-              {#each measured_sites.filter((idx) => idx !== idx_center).slice(loop_idx + 1) as
-                idx_b
-                (idx_center + `-` + idx_a + `-` + idx_b)
-              }
+            {#each measured_sites.filter((idx) => idx !== idx_center) as idx_a, loop_idx (idx_center + `-` + idx_a)}
+              {#each measured_sites
+                .filter((idx) => idx !== idx_center)
+                .slice(loop_idx + 1) as idx_b (idx_center + `-` + idx_a + `-` + idx_b)}
                 {@const site_a = structure.sites[idx_a]}
                 {@const site_b = structure.sites[idx_b]}
                 {@const disp = (to: Vec3) =>
-            measure.displacement_pbc(center.xyz, to, lattice?.matrix, undefined, lattice?.pbc)}
+                  measure.displacement_pbc(
+                    center.xyz,
+                    to,
+                    lattice?.matrix,
+                    undefined,
+                    lattice?.pbc,
+                  )}
                 {@const v1 = disp(site_a.xyz)}
                 {@const v2 = disp(site_b.xyz)}
                 {@const n1 = Math.hypot(v1[0], v1[1], v1[2])}
@@ -2163,10 +2318,6 @@
 </T.Group>
 
 <style>
-  :global(.structure .responsive-gizmo) {
-    width: clamp(70px, 18cqmin, 100px) !important;
-    height: clamp(70px, 18cqmin, 100px) !important;
-  }
   .atom-label {
     background: var(--struct-atom-label-bg, rgba(0, 0, 0, 0.1));
     border: 0;
@@ -2180,6 +2331,13 @@
   .elements {
     margin-bottom: var(--canvas-tooltip-elements-margin);
   }
+  .species {
+    display: inline-block;
+    white-space: nowrap;
+    &:not(:first-child) {
+      margin-left: var(--canvas-tooltip-species-gap, 0.5em);
+    }
+  }
   .occupancy {
     font-size: var(--canvas-tooltip-occu-font-size);
     opacity: var(--canvas-tooltip-occu-opacity);