matterviz 0.4.1 → 0.4.3

package/dist/chempot-diagram/ChemPotDiagram3D.svelte

@@ -9,22 +9,20 @@
   import type { ExportSection } from '../io'
   import ExportPane from '../io/ExportPane.svelte'
   import { format_num } from '../labels'
-  import { FullscreenButton, type FullscreenToggleProp, SettingsSection, toggle_fullscreen } from '../layout'
+  import {
+    FullscreenButton,
+    type FullscreenToggleProp,
+    SettingsSection,
+    toggle_fullscreen,
+  } from '../layout'
   import { sync_fullscreen } from '../layout/fullscreen.svelte'
   import type { Vec2, Vec3 } from '../math'
-  import {
-    convex_hull_2d,
-    cross_3d,
-    merge_coplanar_triangles,
-    normalize_vec,
-  } from '../math'
+  import { convex_hull_2d, cross_3d, merge_coplanar_triangles, normalize_vec } from '../math'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { ColorBar, ScatterPlot3DControls } from '../plot'
-  import {
-    constrain_tooltip_position,
-    pad_rect,
-    rects_overlap,
-  } from '../plot/core/layout'
+  import { page_visibility } from '../scene'
+  import { sanitize_html } from '../sanitize'
+  import { constrain_tooltip_position, pad_rect, rects_overlap } from '../plot/core/layout'
   import type {
     AxisConfig3D,
     CameraProjection3D,
@@ -42,7 +40,7 @@
   import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js'
   import { compute_chempot_async } from './async-compute.svelte'
   import ChemPotScene3D from './ChemPotScene3D.svelte'
-  import { get_chempot_color_bar_config, make_chempot_color_scale } from './color'
+  import { ARITY_COLORS, get_chempot_color_bar_config, get_domain_color_data } from './color'
   import {
     CHEMPOT_COLOR_MODE_OPTIONS,
     CHEMPOT_COLOR_SCALE_OPTIONS,
@@ -60,12 +58,10 @@
   import {
     apply_element_padding,
     bbox_diagonal,
-    best_form_energy_for_formula,
     build_axis_ranges,
     dedup_points,
-    formula_key_from_composition,
     get_3d_domain_simplexes_and_ann_loc,
-    get_energy_per_atom,
+    get_energy_stats_by_formula,
     get_min_entries_and_el_refs,
     get_ternary_combinations,
     get_visible_domain_labels,
@@ -129,18 +125,22 @@
   } = $props()
 
   // Control overrides (override ?? config ?? default, cleared by Reset)
-  const overrides = create_chempot_overrides(() => config, [
-    `formal_chempots`,
-    `label_stable`,
-    `element_padding`,
-    `default_min_limit`,
-    `formulas_to_draw`,
-    `draw_formula_meshes`,
-    `draw_formula_lines`,
-    `color_mode`,
-    `color_scale`,
-    `reverse_color_scale`,
-  ], { color_mode: `arity`, formulas_to_draw: [] })
+  const overrides = create_chempot_overrides(
+    () => config,
+    [
+      `formal_chempots`,
+      `label_stable`,
+      `element_padding`,
+      `default_min_limit`,
+      `formulas_to_draw`,
+      `draw_formula_meshes`,
+      `draw_formula_lines`,
+      `color_mode`,
+      `color_scale`,
+      `reverse_color_scale`,
+    ],
+    { color_mode: `arity`, formulas_to_draw: [] },
+  )
   const formal_chempots = $derived(overrides.resolve(`formal_chempots`))
   const label_stable = $derived(overrides.resolve(`label_stable`))
   const element_padding = $derived(overrides.resolve(`element_padding`))
@@ -156,9 +156,7 @@
     config.tooltip_detail_level ?? CHEMPOT_DEFAULTS.tooltip_detail_level,
   )
   const formula_colors = $derived(
-    config.formula_colors?.length
-      ? config.formula_colors
-      : CHEMPOT_DEFAULTS.formula_colors,
+    config.formula_colors?.length ? config.formula_colors : CHEMPOT_DEFAULTS.formula_colors,
   )
 
   const formula_label_segments = (formula: string): FormulaLabelSegment[] =>
@@ -181,21 +179,38 @@
   // Separate effects so each reacts to its own pane opening independently —
   // a single $derived ternary would create priority ordering where opening
   // a "lower" pane while a "higher" one is open fails silently.
-  $effect(() => { if (export_pane_open) { formula_picker_open = false; controls_open = false } })
-  $effect(() => { if (formula_picker_open) { export_pane_open = false; controls_open = false } })
-  $effect(() => { if (controls_open) { export_pane_open = false; formula_picker_open = false } })
+  $effect(() => {
+    if (export_pane_open) {
+      formula_picker_open = false
+      controls_open = false
+    }
+  })
+  $effect(() => {
+    if (formula_picker_open) {
+      export_pane_open = false
+      controls_open = false
+    }
+  })
+  $effect(() => {
+    if (controls_open) {
+      export_pane_open = false
+      formula_picker_open = false
+    }
+  })
   let container_width = $state(0)
   let container_height = $state(0)
   const base_aspect_ratio = $derived(height > 0 && width > 0 ? height / width : 1)
   const render_width = $derived(container_width > 0 ? container_width : width)
   const render_height = $derived(
     fullscreen
-      ? (container_height > 0 ? container_height : height)
+      ? container_height > 0
+        ? container_height
+        : height
       : Math.round(render_width * base_aspect_ratio),
   )
 
   let mounted = $state(false)
-  onMount(() => mounted = true)
+  onMount(() => (mounted = true))
   let orbit_controls_ref = $state<OrbitControls | undefined>(undefined)
   // Backside tracking: axes/ticks/labels render on the far side from the camera
   // back[i] = backside data coordinate value for data axis i
@@ -248,25 +263,20 @@
     if (next_temperature !== temperature) temperature = next_temperature
   })
 
-  const show_temperature_slider = $derived(
-    has_temp_data && available_temperatures.length > 0,
-  )
+  const show_temperature_slider = $derived(has_temp_data && available_temperatures.length > 0)
 
   const projection_source_entries = $derived(
     get_projection_source_entries(entries, temp_filtered_entries),
   )
 
-  const all_entry_elements = $derived.by(() =>
-    Array.from(
-      new SvelteSet(
-        projection_source_entries.flatMap((entry) =>
-          Object.entries(entry.composition)
-            .filter(([, amount]) => amount > 0)
-            .map(([element]) => element)
-        ),
-      ),
-    ).sort()
-  )
+  const all_entry_elements = $derived.by(() => {
+    const elements = projection_source_entries.flatMap((entry) =>
+      Object.entries(entry.composition)
+        .filter(([, amount]) => amount > 0)
+        .map(([element]) => element),
+    )
+    return Array.from(new SvelteSet(elements)).sort()
+  })
   const has_multinary_system = $derived(all_entry_elements.length > 3)
   let projection_elements_override = $state<string[] | null>(null)
   const config_projection_elements = $derived(
@@ -274,22 +284,18 @@
   )
   const projection_elements = $derived.by(() => {
     if (all_entry_elements.length < 3) return []
-    if (!has_multinary_system) {
-      return config_projection_elements ?? all_entry_elements.slice(0, 3)
-    }
-    const override_projection = normalize_projection_triplet(
-      projection_elements_override ?? undefined,
-      all_entry_elements,
-    )
-    if (override_projection) return override_projection
-    if (config_projection_elements) return config_projection_elements
-    return all_entry_elements.slice(0, 3)
+    // User-picked projection axes only apply to multinary (4+ element) systems
+    const override_projection = has_multinary_system
+      ? normalize_projection_triplet(
+          projection_elements_override ?? undefined,
+          all_entry_elements,
+        )
+      : null
+    return override_projection ?? config_projection_elements ?? all_entry_elements.slice(0, 3)
   })
   const effective_config = $derived({
     ...config,
-    elements: projection_elements.length === 3
-      ? projection_elements
-      : config.elements,
+    elements: projection_elements.length === 3 ? projection_elements : config.elements,
     formal_chempots,
     label_stable,
     element_padding,
@@ -319,7 +325,9 @@
         diagram_data = null
         diagram_computing = false
       })
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   })
 
   const plot_elements = $derived(diagram_data?.elements ?? projection_elements)
@@ -348,15 +356,11 @@
   })
   const current_projection_key = $derived(plot_elements.join(`|`))
   let formula_filter_query = $state(``)
-  const available_formulas = $derived.by(() =>
-    Object.keys(diagram_data?.domains ?? {}).sort()
-  )
+  const available_formulas = $derived(Object.keys(diagram_data?.domains ?? {}).sort())
   const filtered_formulas = $derived.by(() => {
     const query = formula_filter_query.trim().toLowerCase()
     if (!query) return available_formulas
-    return available_formulas.filter((formula) =>
-      formula.toLowerCase().includes(query)
-    )
+    return available_formulas.filter((formula) => formula.toLowerCase().includes(query))
   })
 
   // Process domains for rendering
@@ -374,51 +378,49 @@
     info: ChemPotHoverInfo3D
   }
 
-  interface FormulaEnergyStats {
-    matching_entry_count: number
-    min_energy_per_atom: number | null
-    max_energy_per_atom: number | null
+  const domain_annotation_cache = new Map<string, number[]>()
+
+  function get_domain_ann_loc(points_3d: number[][]): number[] {
+    if (points_3d.length >= 3) {
+      const cache_key = points_3d.map((point) => point.join(`,`)).join(`;`)
+      const cached = domain_annotation_cache.get(cache_key)
+      if (cached) return cached
+      const ann_loc = get_3d_domain_simplexes_and_ann_loc(points_3d).ann_loc
+      domain_annotation_cache.set(cache_key, ann_loc)
+      return ann_loc
+    }
+    return points_3d[0].map(
+      (_, col_idx) =>
+        points_3d.reduce((sum, point) => sum + point[col_idx], 0) / points_3d.length,
+    )
   }
-  type NumericColorMode = Exclude<ChemPotColorMode, `none` | `arity`>
 
   const render_domains = $derived.by((): DomainRenderData[] => {
     if (!diagram_data || plot_elements.length < 2) return []
 
     const dim = diagram_data.elements.length
     const indices = Array.from({ length: dim }, (_, idx) => idx)
-    const new_lims = element_padding > 0
-      ? apply_element_padding(
-        diagram_data.domains,
-        indices,
-        element_padding,
-        default_min_limit,
-      )
-      : null
+    const new_lims =
+      element_padding > 0
+        ? apply_element_padding(
+            diagram_data.domains,
+            indices,
+            element_padding,
+            default_min_limit,
+          )
+        : null
 
     const result: DomainRenderData[] = []
     for (const [formula, pts] of Object.entries(diagram_data.domains)) {
       const padded = new_lims
-        ? pad_domain_points(
-          pts,
-          indices,
-          new_lims,
-          default_min_limit,
-          element_padding,
-        )
+        ? pad_domain_points(pts, indices, new_lims, default_min_limit, element_padding)
         : pts
       if (padded.length < 2) continue
-      const is_draw = formulas_to_draw.includes(formula)
-      const centroid = padded[0].map((_, col_idx) =>
-        padded.reduce((sum, point) => sum + point[col_idx], 0) / padded.length
-      )
-      const ann_loc = padded.length >= 3
-        ? get_3d_domain_simplexes_and_ann_loc(padded).ann_loc
-        : centroid
       result.push({
         formula,
         points_3d: padded,
-        ann_loc,
-        is_draw_formula: is_draw,
+        ann_loc: get_domain_ann_loc(padded),
+        is_draw_formula: formulas_to_draw.includes(formula),
         label_font_size: bbox_diagonal(padded),
       })
     }
@@ -431,129 +433,26 @@
     return result
   })
 
-  const entry_energy_stats_by_formula = $derived.by(
-    (): SvelteMap<string, FormulaEnergyStats> => {
-      const stats_by_formula = new SvelteMap<string, FormulaEnergyStats>()
-      for (const entry of temp_filtered_entries) {
-        const formula_key = formula_key_from_composition(entry.composition)
-        const energy_per_atom = get_energy_per_atom(entry)
-        const existing = stats_by_formula.get(formula_key)
-        if (!existing) {
-          stats_by_formula.set(formula_key, {
-            matching_entry_count: 1,
-            min_energy_per_atom: energy_per_atom,
-            max_energy_per_atom: energy_per_atom,
-          })
-          continue
-        }
-        stats_by_formula.set(formula_key, {
-          matching_entry_count: existing.matching_entry_count + 1,
-          min_energy_per_atom: Math.min(
-            existing.min_energy_per_atom ?? energy_per_atom,
-            energy_per_atom,
-          ),
-          max_energy_per_atom: Math.max(
-            existing.max_energy_per_atom ?? energy_per_atom,
-            energy_per_atom,
-          ),
-        })
-      }
-      return stats_by_formula
-    },
+  const entry_energy_stats_by_formula = $derived(
+    get_energy_stats_by_formula(temp_filtered_entries),
   )
 
   // === Region coloring ===
-  // Categorical palette for arity mode (element count)
-  const arity_colors = [`#3498db`, `#2ecc71`, `#e67e22`, `#9b59b6`] as const
-
   // Original (non-renormalized) elemental references for formation energy computation.
   // diagram_data.el_refs may be renormalized to zero when formal_chempots is true,
   // so we compute our own from the raw entries to get true DFT reference energies.
-  const raw_el_refs = $derived(
-    get_min_entries_and_el_refs(temp_filtered_entries).el_refs,
-  )
-
-  const color_mode_labels: Record<NumericColorMode, string> = {
-    energy: `Energy per atom (eV)`,
-    formation_energy: `Formation energy (eV/atom)`,
-    entries: `Entry count`,
-  }
-  function get_numeric_color_value(
-    formula: string,
-    active_color_mode: NumericColorMode,
-  ): number | null {
-    if (active_color_mode === `energy`) {
-      return entry_energy_stats_by_formula.get(formula)?.min_energy_per_atom ?? null
-    }
-    if (active_color_mode === `formation_energy`) {
-      return best_form_energy_for_formula(
-        temp_filtered_entries,
-        formula,
-        raw_el_refs,
-      ) ?? null
-    }
-    return entry_energy_stats_by_formula.get(formula)?.matching_entry_count ?? 0
-  }
-  const domain_color_values = $derived.by(
-    (): { value_by_formula: SvelteMap<string, number>; values: number[] } | null => {
-      if (color_mode === `none` || color_mode === `arity`) return null
-      const active_color_mode = color_mode as NumericColorMode
-      const value_by_formula = new SvelteMap<string, number>()
-      const values: number[] = []
-      for (const domain of render_domains) {
-        const value = get_numeric_color_value(domain.formula, active_color_mode)
-        if (value == null || !Number.isFinite(value)) continue
-        values.push(value)
-        value_by_formula.set(domain.formula, value)
-      }
-      return { value_by_formula, values }
-    },
-  )
-
-  // Per-domain color map keyed by formula
-  const domain_colors = $derived.by((): SvelteMap<string, string> => {
-    const colors = new SvelteMap<string, string>()
-    if (color_mode === `none`) return colors
+  const raw_el_refs = $derived(get_min_entries_and_el_refs(temp_filtered_entries).el_refs)
 
-    if (color_mode === `arity`) {
-      for (const domain of render_domains) {
-        const n_elements = extract_formula_elements(domain.formula).length
-        const idx = Math.min(n_elements, arity_colors.length) - 1
-        colors.set(domain.formula, arity_colors[Math.max(0, idx)])
-      }
-      return colors
-    }
-    const values_payload = domain_color_values
-    const scale = make_chempot_color_scale(
-      values_payload?.values ?? [],
+  const { colors: domain_colors, color_range } = $derived(
+    get_domain_color_data({
+      formulas: render_domains.map((domain) => domain.formula),
+      color_mode,
       color_scale,
       reverse_color_scale,
-    )
-    for (const domain of render_domains) {
-      const value = values_payload?.value_by_formula.get(domain.formula)
-      colors.set(domain.formula, value != null && scale ? scale(value) : `#999`)
-    }
-    return colors
-  })
-
-  // Range and label for the color bar (null for none/arity which are categorical)
-  const color_range = $derived.by(
-    (): { min: number; max: number; label: string } | null => {
-      const values = domain_color_values?.values ?? []
-      if (values.length === 0) return null
-      let lo = values[0], hi = values[0]
-      for (let idx = 1; idx < values.length; idx++) {
-        if (values[idx] < lo) lo = values[idx]
-        if (values[idx] > hi) hi = values[idx]
-      }
-      return {
-        min: lo,
-        max: Math.max(hi, lo + 1e-6),
-        label: color_mode === `none` || color_mode === `arity`
-          ? ``
-          : color_mode_labels[color_mode],
-      }
-    },
+      entries: temp_filtered_entries,
+      el_refs: raw_el_refs,
+      energy_stats: entry_energy_stats_by_formula,
+    }),
   )
 
   const arity_legend_labels = $derived.by((): string[] => {
@@ -574,9 +473,12 @@
   const render_axis_scale = $derived.by((): Vec3 => {
     const points = render_domains.flatMap((domain) => domain.points_3d)
     if (points.length === 0) return [1, 1, 1]
-    let min0 = Infinity, max0 = -Infinity
-    let min1 = Infinity, max1 = -Infinity
-    let min2 = Infinity, max2 = -Infinity
+    let min0 = Infinity,
+      max0 = -Infinity
+    let min1 = Infinity,
+      max1 = -Infinity
+    let min2 = Infinity,
+      max2 = -Infinity
     for (const point of points) {
       if (point[0] < min0) min0 = point[0]
       if (point[0] > max0) max0 = point[0]
@@ -596,10 +498,7 @@
     ]
   })
 
-  function to_render_xyz(point: number[]): Vec3 {
-    const [scale_x, scale_y, scale_z] = render_axis_scale
-    return [point[1] * scale_x, point[2] * scale_y, point[0] * scale_z]
-  }
+  const to_render_xyz = (point: number[]): Vec3 => swiz(point[0], point[1], point[2])
 
   // Compute data center and extent for camera positioning (in swizzled coords)
   const { data_center, data_extent } = $derived.by(() => {
@@ -616,11 +515,7 @@
       sum_z += z_val
     }
     const n_points = points.length
-    const center = new THREE.Vector3(
-      sum_x / n_points,
-      sum_y / n_points,
-      sum_z / n_points,
-    )
+    const center = new THREE.Vector3(sum_x / n_points, sum_y / n_points, sum_z / n_points)
     // Compute max distance from center
     let max_dist = 0
     for (const point of points) {
@@ -635,30 +530,22 @@
     data_center.y + data_extent,
     data_center.z + data_extent,
   ])
-  const default_camera_target = $derived<Vec3>([
-    data_center.x,
-    data_center.y,
-    data_center.z,
-  ])
+  const default_camera_target = $derived<Vec3>([data_center.x, data_center.y, data_center.z])
   const default_orthographic_zoom = $derived(
     Math.min(render_width, render_height) / (data_extent * 1.6),
   )
   let camera_position_override = $state<Vec3 | null>(null)
   let camera_target_override = $state<Vec3 | null>(null)
   let orthographic_zoom_override = $state<number | null>(null)
-  const camera_position = $derived(
-    camera_position_override ?? default_camera_position,
-  )
-  const camera_target = $derived(
-    camera_target_override ?? default_camera_target,
-  )
-  const orthographic_zoom = $derived(
-    orthographic_zoom_override ?? default_orthographic_zoom,
-  )
+  const camera_position = $derived(camera_position_override ?? default_camera_position)
+  const camera_target = $derived(camera_target_override ?? default_camera_target)
+  const orthographic_zoom = $derived(orthographic_zoom_override ?? default_orthographic_zoom)
   // Label scale factor: zoom relative to default, so labels grow/shrink with zoom
   // Labels scale sub-linearly with zoom so they grow but don't dominate when zoomed in
   const zoom_scale = $derived(
-    default_orthographic_zoom > 0 ? Math.sqrt(orthographic_zoom / default_orthographic_zoom) : 1,
+    default_orthographic_zoom > 0
+      ? Math.sqrt(orthographic_zoom / default_orthographic_zoom)
+      : 1,
   )
   let last_data_center: Vec3 | null = null
   let last_data_extent: number | null = null
@@ -667,14 +554,16 @@
   // Each domain in a chem pot diagram is a convex polygon/polyhedron. We project
   // to 2D (trying all 3 axis-aligned planes) and use the best projection's
   // convex hull boundary. This reliably handles both flat and 3D domains.
-  function get_domain_edges(
-    pts: number[][],
-  ): [number[], number[]][] {
+  function get_domain_edges(pts: number[][]): [number[], number[]][] {
     const unique = dedup_3d(pts)
     if (unique.length < 2) return []
     if (unique.length === 2) return [[unique[0], unique[1]]]
     if (unique.length === 3) {
-      return [[unique[0], unique[1]], [unique[1], unique[2]], [unique[0], unique[2]]]
+      return [
+        [unique[0], unique[1]],
+        [unique[1], unique[2]],
+        [unique[0], unique[2]],
+      ]
     }
     return get_2d_hull_edges(unique)
   }
@@ -694,9 +583,7 @@
   // (largest non-degenerate hull area). Unioning multiple projections can add
   // non-physical diagonals for nearly coplanar domains.
   // Called only from get_domain_edges with 4+ unique points
-  function get_2d_hull_edges(
-    pts: number[][],
-  ): [number[], number[]][] {
+  function get_2d_hull_edges(pts: number[][]): [number[], number[]][] {
     let selected_hull: Vec2[] = []
     let selected_coord_to_idx: SvelteMap<string, number> | null = null
     let selected_hull_area = -1
@@ -706,15 +593,20 @@
 
       // Skip this projection if points collapse to a line (near-zero range in
       // either projected axis). This avoids spurious edges from edge-on views.
-      let min0 = Infinity, max0 = -Infinity, min1 = Infinity, max1 = -Infinity
+      let min0 = Infinity,
+        max0 = -Infinity,
+        min1 = Infinity,
+        max1 = -Infinity
       for (const pt of pts) {
-        const v0 = pt[axes[0]], v1 = pt[axes[1]]
+        const v0 = pt[axes[0]],
+          v1 = pt[axes[1]]
         if (v0 < min0) min0 = v0
         if (v0 > max0) max0 = v0
         if (v1 < min1) min1 = v1
         if (v1 > max1) max1 = v1
       }
-      const range0 = max0 - min0, range1 = max1 - min1
+      const range0 = max0 - min0,
+        range1 = max1 - min1
       const max_2d_range = Math.max(range0, range1)
       if (max_2d_range < 1e-6 || Math.min(range0, range1) < max_2d_range * 0.01) {
         continue
@@ -751,18 +643,8 @@
       const point_b_idx = selected_coord_to_idx.get(
         `${point_b[0].toFixed(6)},${point_b[1].toFixed(6)}`,
       )
-      if (
-        point_a_idx == null || point_b_idx == null || point_a_idx >= pts.length ||
-        point_b_idx >= pts.length
-      ) {
-        console.warn(`get_2d_hull_edges: invalid edge`, {
-          point_a,
-          point_b,
-          point_a_idx,
-          point_b_idx,
-        })
-        continue
-      }
+      // Hull vertices come from pts_2d, so lookups always succeed
+      if (point_a_idx == null || point_b_idx == null) continue
       edges.push([pts[point_a_idx], pts[point_b_idx]])
     }
 
@@ -846,7 +728,9 @@
     const n_verts = pos.count
     const n_faces = n_verts / 3
     // Hull centroid for orienting face normals outward
-    let hx = 0, hy = 0, hz = 0
+    let hx = 0,
+      hy = 0,
+      hz = 0
     for (let vert_idx = 0; vert_idx < n_verts; vert_idx++) {
       hx += pos.getX(vert_idx)
       hy += pos.getY(vert_idx)
@@ -900,7 +784,9 @@
     const centroids = render_domains
       .filter((domain) => !domain.is_draw_formula && domain.points_3d.length > 0)
       .map((domain) => {
-        let sx = 0, sy = 0, sz = 0
+        let sx = 0,
+          sy = 0,
+          sz = 0
         for (const pt of domain.points_3d) {
           const [x_val, y_val, z_val] = to_render_xyz(pt)
           sx += x_val
@@ -908,7 +794,12 @@
           sz += z_val
         }
         const n_points = domain.points_3d.length
-        return { formula: domain.formula, cx: sx / n_points, cy: sy / n_points, cz: sz / n_points }
+        return {
+          formula: domain.formula,
+          cx: sx / n_points,
+          cy: sy / n_points,
+          cz: sz / n_points,
+        }
       })
 
     // Assign each face to the nearest domain centroid
@@ -938,9 +829,9 @@
       const tol = 1e-3
       const round = (val: number): number => Math.round(val / tol)
       const vkey = (vert_idx: number): string =>
-        `${round(pos.getX(vert_idx))},${round(pos.getY(vert_idx))},${
-          round(pos.getZ(vert_idx))
-        }`
+        `${round(pos.getX(vert_idx))},${round(pos.getY(vert_idx))},${round(
+          pos.getZ(vert_idx),
+        )}`
       // Compute face normals
       const normals: Vec3[] = []
       for (let face_idx = 0; face_idx < n_faces; face_idx++) {
@@ -962,13 +853,11 @@
       for (let face_idx = 0; face_idx < n_faces; face_idx++) {
         const base = face_idx * 3
         const keys = [vkey(base), vkey(base + 1), vkey(base + 2)]
-        for (
-          const ek of [
-            edge_key(keys[0], keys[1]),
-            edge_key(keys[1], keys[2]),
-            edge_key(keys[0], keys[2]),
-          ]
-        ) {
+        for (const ek of [
+          edge_key(keys[0], keys[1]),
+          edge_key(keys[1], keys[2]),
+          edge_key(keys[0], keys[2]),
+        ]) {
           const list = edge_faces.get(ek)
           if (list) list.push(face_idx)
           else edge_faces.set(ek, [face_idx])
@@ -984,13 +873,15 @@
         return node
       }
       const union = (a_idx: number, b_idx: number): void => {
-        const ra = find(a_idx), rb = find(b_idx)
+        const ra = find(a_idx),
+          rb = find(b_idx)
         if (ra !== rb) parent[ra] = rb
       }
       for (const pair of edge_faces.values()) {
         if (pair.length !== 2) continue
         const [fa, fb] = pair
-        const na = normals[fa], nb = normals[fb]
+        const na = normals[fa],
+          nb = normals[fb]
         if (Math.abs(na[0] * nb[0] + na[1] * nb[1] + na[2] * nb[2]) > 1 - tol) {
           union(fa, fb)
         }
@@ -1057,23 +948,21 @@
     return geom
   })
 
+  const domain_label = (domain: DomainRenderData) => ({
+    formula: domain.formula,
+    position: swiz(domain.ann_loc[0], domain.ann_loc[1], domain.ann_loc[2]),
+    label_font_size: domain.label_font_size,
+  })
+
   const visible_domain_labels = $derived.by(() => {
     if (!hull_base_geometry || face_domain_map.length === 0) {
-      return render_domains.map((domain) => ({
-        formula: domain.formula,
-        position: swiz(domain.ann_loc[0], domain.ann_loc[1], domain.ann_loc[2]),
-        label_font_size: domain.label_font_size,
-      }))
+      return render_domains.map(domain_label)
     }
 
     const pos = hull_base_geometry.getAttribute(`position`)
     const pinned_labels = render_domains
       .filter((domain) => domain.is_draw_formula)
-      .map((domain) => ({
-        formula: domain.formula,
-        position: swiz(domain.ann_loc[0], domain.ann_loc[1], domain.ann_loc[2]),
-        label_font_size: domain.label_font_size,
-      }))
+      .map(domain_label)
     const font_size_by_formula = new SvelteMap(
       render_domains.map((domain) => [domain.formula, domain.label_font_size]),
     )
@@ -1085,16 +974,24 @@
     )
   })
 
-  $effect(() => {
-    const geom = hull_base_geometry
-    return () => dispose_geometry(geom)
-  })
+  // Register an effect that disposes the given geometries whenever they are
+  // recomputed or the component unmounts.
+  function dispose_on_change(
+    get_geometries: () => (THREE.BufferGeometry | null | undefined)[],
+  ): void {
+    $effect(() => {
+      const geometries = get_geometries()
+      return () => {
+        for (const geometry of geometries) geometry?.dispose()
+      }
+    })
+  }
 
-  $effect(() => {
-    const geom = colored_hull_geometry
-    // Don't dispose if it's the same object as hull_base_geometry (no clone was made)
-    if (geom && geom !== hull_base_geometry) return () => dispose_geometry(geom)
-  })
+  dispose_on_change(() => [hull_base_geometry])
+  // Don't dispose colored hull if it's the same object as hull_base_geometry (no clone made)
+  dispose_on_change(() =>
+    colored_hull_geometry !== hull_base_geometry ? [colored_hull_geometry] : [],
+  )
 
   // Domains on the outer surface (used by the "Surface" formula overlay quick-select).
   const surface_formulas = $derived.by((): SvelteSet<string> => {
@@ -1140,15 +1037,9 @@
 
   const controls_series = $derived<DataSeries3D[]>([
     {
-      x: render_domains.flatMap((domain) =>
-        domain.points_3d.map((point) => point[1])
-      ),
-      y: render_domains.flatMap((domain) =>
-        domain.points_3d.map((point) => point[2])
-      ),
-      z: render_domains.flatMap((domain) =>
-        domain.points_3d.map((point) => point[0])
-      ),
+      x: render_domains.flatMap((domain) => domain.points_3d.map((point) => point[1])),
+      y: render_domains.flatMap((domain) => domain.points_3d.map((point) => point[2])),
+      z: render_domains.flatMap((domain) => domain.points_3d.map((point) => point[0])),
       label: `domains`,
     },
   ])
@@ -1159,8 +1050,7 @@
     const result: { geometry: THREE.BufferGeometry; color: string }[] = []
     for (const domain of render_domains) {
       if (!domain.is_draw_formula) continue
-      const color_idx = formulas_to_draw.indexOf(domain.formula) %
-        formula_colors.length
+      const color_idx = formulas_to_draw.indexOf(domain.formula) % formula_colors.length
       const swizzled = domain.points_3d.map((point) => to_render_xyz(point))
       const positions: number[] = []
       for (const [pa, pb] of get_domain_edges(swizzled)) {
@@ -1179,8 +1069,7 @@
     if (!draw_formula_meshes) return result
     for (const domain of render_domains) {
       if (!domain.is_draw_formula || domain.points_3d.length < 4) continue
-      const color_idx = formulas_to_draw.indexOf(domain.formula) %
-        formula_colors.length
+      const color_idx = formulas_to_draw.indexOf(domain.formula) % formula_colors.length
       const unique = dedup_3d(domain.points_3d)
       if (unique.length < 4) continue
       const vectors = unique.map((pt) => to_vec3(pt))
@@ -1194,10 +1083,7 @@
     return result
   })
 
-  function get_touches_limits(
-    points_3d: number[][],
-    lims: Vec2[],
-  ): string[] {
+  function get_touches_limits(points_3d: number[][], lims: Vec2[]): string[] {
     const limit_tol = 1e-3
     const touches_limits: string[] = []
     for (
@@ -1207,11 +1093,11 @@
     ) {
       const [axis_min, axis_max] = lims[axis_idx]
       const axis_name = plot_elements[axis_idx] ?? `axis_${axis_idx}`
-      const touches_min = points_3d.some((point) =>
-        Math.abs(point[axis_idx] - axis_min) < limit_tol
+      const touches_min = points_3d.some(
+        (point) => Math.abs(point[axis_idx] - axis_min) < limit_tol,
       )
-      const touches_max = points_3d.some((point) =>
-        Math.abs(point[axis_idx] - axis_max) < limit_tol
+      const touches_max = points_3d.some(
+        (point) => Math.abs(point[axis_idx] - axis_max) < limit_tol,
       )
       if (touches_min) touches_limits.push(`${axis_name} lower bound`)
       if (touches_max) touches_limits.push(`${axis_name} upper bound`)
@@ -1269,9 +1155,7 @@
     const vertex_owners = new SvelteMap<string, string[]>()
     for (const domain of render_domains) {
       for (const pt of domain.points_3d) {
-        const key = pt.map((val) => (Math.round(val / tol) * tol).toFixed(4)).join(
-          `,`,
-        )
+        const key = pt.map((val) => (Math.round(val / tol) * tol).toFixed(4)).join(`,`)
         const owners = vertex_owners.get(key)
         if (owners) {
           if (!owners.includes(domain.formula)) owners.push(domain.formula)
@@ -1344,46 +1228,12 @@
     return result
   })
 
-  function dispose_geometry(geometry: THREE.BufferGeometry | null | undefined): void {
-    if (!geometry) return
-    geometry.dispose()
-  }
-
-  function dispose_geometries(
-    geometries: (THREE.BufferGeometry | null | undefined)[],
-  ): void {
-    for (const geometry of geometries) dispose_geometry(geometry)
-  }
-
-  $effect(() => {
-    const geometry = edge_geometry
-    return () => dispose_geometry(geometry)
-  })
-
-  $effect(() => {
-    const geometry = occlusion_hull_geometry
-    return () => dispose_geometry(geometry)
-  })
-
-  $effect(() => {
-    const geometry = bounding_box_geometry
-    return () => dispose_geometry(geometry)
-  })
-
-  $effect(() => {
-    const geometries = formula_edge_data.map((data) => data.geometry)
-    return () => dispose_geometries(geometries)
-  })
-
-  $effect(() => {
-    const geometries = formula_mesh_data.map((data) => data.geometry)
-    return () => dispose_geometries(geometries)
-  })
-
-  $effect(() => {
-    const geometries = hover_mesh_data.map((data) => data.geometry)
-    return () => dispose_geometries(geometries)
-  })
+  dispose_on_change(() => [edge_geometry])
+  dispose_on_change(() => [occlusion_hull_geometry])
+  dispose_on_change(() => [bounding_box_geometry])
+  dispose_on_change(() => formula_edge_data.map((data) => data.geometry))
+  dispose_on_change(() => formula_mesh_data.map((data) => data.geometry))
+  dispose_on_change(() => hover_mesh_data.map((data) => data.geometry))
 
   // === Grid, axes, ticks (matching ScatterPlot3D style) ===
 
@@ -1440,8 +1290,8 @@
   // Niced ranges (from ticks) padded so the grid extends beyond the diagram.
   // For horizontal axes (0,1): pad both sides.
   // For vertical axis (2): use actual data range and round min down to an integer.
-  const niced_range = $derived.by(() => {
-    return [0, 1, 2].map((axis): Vec2 => {
+  const niced_range = $derived(
+    [0, 1, 2].map((axis): Vec2 => {
       const ticks = data_ticks[axis]
       const lo = ticks[0]
       const hi = ticks.at(-1) ?? lo
@@ -1451,14 +1301,11 @@
         return [Math.floor(min_data), hi]
       }
       return [lo - step, hi + step]
-    })
-  })
+    }),
+  )
 
   // Helper to create a line geometry from two Vec3 arrays
-  function make_line_geom(
-    start: Vec3,
-    end: Vec3,
-  ): THREE.BufferGeometry {
+  function make_line_geom(start: Vec3, end: Vec3): THREE.BufferGeometry {
     const geom = new THREE.BufferGeometry()
     geom.setAttribute(
       `position`,
@@ -1506,11 +1353,12 @@
     return [0, 1, 2].map((axis) => {
       const ticks = data_ticks[axis]
       const color = axis_colors[axis]
-      const label = axis === 0
-        ? (z_axis.label || chem_axis_label(0))
-        : axis === 1
-        ? (x_axis.label || chem_axis_label(1))
-        : (y_axis.label || chem_axis_label(2))
+      const label =
+        axis === 0
+          ? z_axis.label || chem_axis_label(0)
+          : axis === 1
+            ? x_axis.label || chem_axis_label(1)
+            : y_axis.label || chem_axis_label(2)
 
       const tick_geoms: THREE.BufferGeometry[] = []
       const grid_geoms: THREE.BufferGeometry[] = []
@@ -1530,16 +1378,14 @@
           back[2] + out_y * tick_label_dist,
         )
         for (const val of ticks) {
-          tick_geoms.push(make_line_geom(
-            swiz(val, back[1], back[2]),
-            swiz(val, back[1], back[2] + out_y * tick_size),
-          ))
-          grid_geoms.push(
-            make_line_geom(swiz(val, r1[0], back[2]), swiz(val, r1[1], back[2])),
-          )
-          grid_geoms.push(
-            make_line_geom(swiz(val, back[1], r2[0]), swiz(val, back[1], r2[1])),
+          tick_geoms.push(
+            make_line_geom(
+              swiz(val, back[1], back[2]),
+              swiz(val, back[1], back[2] + out_y * tick_size),
+            ),
           )
+          grid_geoms.push(make_line_geom(swiz(val, r1[0], back[2]), swiz(val, r1[1], back[2])))
+          grid_geoms.push(make_line_geom(swiz(val, back[1], r2[0]), swiz(val, back[1], r2[1])))
           tick_labels.push({
             pos: swiz(
               val,
@@ -1560,16 +1406,14 @@
           back[2] + out_y * tick_label_dist,
         )
         for (const val of ticks) {
-          tick_geoms.push(make_line_geom(
-            swiz(back[0], val, back[2]),
-            swiz(back[0], val, back[2] + out_y * tick_size),
-          ))
-          grid_geoms.push(
-            make_line_geom(swiz(r0[0], val, back[2]), swiz(r0[1], val, back[2])),
-          )
-          grid_geoms.push(
-            make_line_geom(swiz(back[0], val, r2[0]), swiz(back[0], val, r2[1])),
+          tick_geoms.push(
+            make_line_geom(
+              swiz(back[0], val, back[2]),
+              swiz(back[0], val, back[2] + out_y * tick_size),
+            ),
           )
+          grid_geoms.push(make_line_geom(swiz(r0[0], val, back[2]), swiz(r0[1], val, back[2])))
+          grid_geoms.push(make_line_geom(swiz(back[0], val, r2[0]), swiz(back[0], val, r2[1])))
           tick_labels.push({
             pos: swiz(back[0], val, back[2] + out_y * tick_label_dist),
             text: format_num(val, `.3~g`),
@@ -1586,16 +1430,14 @@
           outer_end(r2) + outer_direction(r2) * axis_label_dist,
         )
         for (const val of ticks) {
-          tick_geoms.push(make_line_geom(
-            swiz(back[0], back[1], val),
-            swiz(back[0], back[1] + out_x * tick_size, val),
-          ))
-          grid_geoms.push(
-            make_line_geom(swiz(r0[0], back[1], val), swiz(r0[1], back[1], val)),
-          )
-          grid_geoms.push(
-            make_line_geom(swiz(back[0], r1[0], val), swiz(back[0], r1[1], val)),
+          tick_geoms.push(
+            make_line_geom(
+              swiz(back[0], back[1], val),
+              swiz(back[0], back[1] + out_x * tick_size, val),
+            ),
           )
+          grid_geoms.push(make_line_geom(swiz(r0[0], back[1], val), swiz(r0[1], back[1], val)))
+          grid_geoms.push(make_line_geom(swiz(back[0], r1[0], val), swiz(back[0], r1[1], val)))
           tick_labels.push({
             pos: swiz(back[0], back[1] + out_x * tick_label_dist, val),
             text: format_num(val, `.3~g`),
@@ -1623,21 +1465,17 @@
 
   function update_label_occlusion(): void {
     if (!wrapper) return
-    const tick_labels = Array.from(
-      wrapper.querySelectorAll<HTMLElement>(`.axis-tick-label`),
-    )
+    const tick_labels = Array.from(wrapper.querySelectorAll<HTMLElement>(`.axis-tick-label`))
     tick_labels_occluded = false
     for (const tick_label of tick_labels) {
       tick_label.style.visibility = ``
     }
-    const domain_rects = Array.from(
-      wrapper.querySelectorAll<HTMLElement>(`.domain-label`),
-    )
-      .filter((domain_label) => {
-        const style = getComputedStyle(domain_label)
+    const domain_rects = Array.from(wrapper.querySelectorAll<HTMLElement>(`.domain-label`))
+      .filter((label_el) => {
+        const style = getComputedStyle(label_el)
         return style.display !== `none` && style.visibility !== `hidden`
       })
-      .map((domain_label) => pad_rect(domain_label.getBoundingClientRect(), 1))
+      .map((label_el) => pad_rect(label_el.getBoundingClientRect(), 1))
     if (domain_rects.length === 0) return
 
     for (const tick_label of tick_labels) {
@@ -1700,11 +1538,7 @@
     }
     const controls_target = controls?.target
     if (controls_target) {
-      camera_target_override = [
-        controls_target.x,
-        controls_target.y,
-        controls_target.z,
-      ]
+      camera_target_override = [controls_target.x, controls_target.y, controls_target.z]
     }
   }
 
@@ -1769,28 +1603,20 @@
     bg_css_var: `--chempot-3d-bg-fullscreen`,
   })
 
-  $effect(() => {
-    const grid_geometries = grid_config
-    return () => {
-      for (const grid_item of grid_geometries) {
-        dispose_geometry(grid_item.line_geom)
-        for (const tick_geometry of grid_item.tick_geoms) {
-          dispose_geometry(tick_geometry)
-        }
-        for (const line_geometry of grid_item.grid_geoms) {
-          dispose_geometry(line_geometry)
-        }
-      }
-    }
-  })
+  dispose_on_change(() =>
+    grid_config.flatMap((grid_item) => [
+      grid_item.line_geom,
+      ...grid_item.tick_geoms,
+      ...grid_item.grid_geoms,
+    ]),
+  )
 
   const projection_planes = $derived.by(() => {
     const projections = display.projections
     if (!projections) return []
     const [r0, r1, r2] = niced_range
-    const s0 = (r0[1] - r0[0]) * (display.projection_scale ?? 0.5)
-    const s1 = (r1[1] - r1[0]) * (display.projection_scale ?? 0.5)
-    const s2 = (r2[1] - r2[0]) * (display.projection_scale ?? 0.5)
+    const projection_scale = display.projection_scale ?? 0.5
+    const [s0, s1, s2] = niced_range.map(([lo, hi]) => (hi - lo) * projection_scale)
     const planes: {
       key: string
       pos: Vec3
@@ -1880,18 +1706,12 @@
       next_projection[current_owner_idx] = next_projection[axis_idx]
     }
     next_projection[axis_idx] = element
-    const normalized = normalize_projection_triplet(
-      next_projection,
-      all_entry_elements,
-    )
+    const normalized = normalize_projection_triplet(next_projection, all_entry_elements)
     if (normalized) projection_elements_override = normalized
   }
 
   function apply_projection_preset(preset_elements: string[]): void {
-    const normalized = normalize_projection_triplet(
-      preset_elements,
-      all_entry_elements,
-    )
+    const normalized = normalize_projection_triplet(preset_elements, all_entry_elements)
     if (normalized) projection_elements_override = normalized
   }
 
@@ -1968,19 +1788,21 @@
         },
         {
           label: `View`,
-          on_download: () =>
-            export_view_json_file(current_view_settings(), export_basename),
+          on_download: () => export_view_json_file(current_view_settings(), export_basename),
         },
         {
           label: `GLB`,
           on_download: () =>
-            export_glb_file({
-              hull_geometry: colored_hull_geometry,
-              hull_opacity: color_mode === `none` ? 0.25 : 0.4,
-              edge_geometry,
-              formula_meshes: formula_mesh_data,
-              formula_edges: draw_formula_lines ? formula_edge_data : [],
-            }, export_basename),
+            export_glb_file(
+              {
+                hull_geometry: colored_hull_geometry,
+                hull_opacity: color_mode === `none` ? 0.25 : 0.4,
+                edge_geometry,
+                formula_meshes: formula_mesh_data,
+                formula_edges: draw_formula_lines ? formula_edge_data : [],
+              },
+              export_basename,
+            ),
         },
       ],
     },
@@ -1997,10 +1819,12 @@
     const pointer = hover_info?.pointer
     if (!pointer) return { x: 4, y: 4 }
     return constrain_tooltip_position(
-      pointer.x, pointer.y,
+      pointer.x,
+      pointer.y,
       tooltip_el?.offsetWidth ?? 200,
       tooltip_el?.offsetHeight ?? 100,
-      container_width, container_height,
+      container_width,
+      container_height,
       { offset: 0 },
     )
   })
@@ -2018,12 +1842,22 @@
     hover_info = null
   }
 
+  function stop_phase_pointer_event(raw_event: unknown): void {
+    const event = raw_event as
+      | { nativeEvent?: { stopPropagation?: () => void }; stopPropagation?: () => void }
+      | null
+      | undefined
+    event?.stopPropagation?.()
+    event?.nativeEvent?.stopPropagation?.()
+  }
+
   function handle_phase_hover(domain_data: HoverMeshData, raw_event: unknown): void {
     if (locked_hover_formula && locked_hover_formula !== domain_data.formula) return
     set_hover_info(domain_data, raw_event)
   }
 
   function toggle_phase_lock(domain_data: HoverMeshData, raw_event: unknown): void {
+    stop_phase_pointer_event(raw_event)
     if (locked_hover_formula === domain_data.formula) {
       clear_hover_lock()
       return
@@ -2053,20 +1887,15 @@
   role="application"
   tabindex="0"
   onkeydown={(event) => {
-    if (
-      event.target instanceof HTMLInputElement ||
-      event.target instanceof HTMLSelectElement
-    ) return
+    if (event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement)
+      return
     if (event.key === `Escape`) clear_hover_lock()
     else if (event.key === `c`) cycle_color_mode()
     else if (event.key === `f` && fullscreen_toggle) toggle_fullscreen(wrapper)
   }}
   onpointerdown={(event) => {
     const target = event.target
-    if (
-      locked_hover_formula &&
-      (target === wrapper || target instanceof HTMLCanvasElement)
-    ) {
+    if (locked_hover_formula && (target === wrapper || target instanceof HTMLCanvasElement)) {
       clear_hover_lock()
     }
   }}
@@ -2102,11 +1931,7 @@
       </div>
       <label class="overlay-search">
         Search:
-        <input
-          type="text"
-          placeholder="Formula filter"
-          bind:value={formula_filter_query}
-        />
+        <input type="text" placeholder="Formula filter" bind:value={formula_filter_query} />
       </label>
       <div class="formula-list">
         {#if filtered_formulas.length === 0}
@@ -2117,14 +1942,14 @@
             <label>
               <input
                 type="checkbox"
-                checked={formulas_to_draw.includes(formula)}
+                checked={formula_overlay_idx !== -1}
                 onchange={() => toggle_formula_selection(formula)}
               />
               <span
                 class="formula-color-dot"
                 style:background={formula_colors[
                   (formula_overlay_idx >= 0 ? formula_overlay_idx : formula_idx) %
-                  formula_colors.length
+                    formula_colors.length
                 ]}
               ></span>
               {get_electro_neg_formula(formula, true, ``, `.3~s`)}
@@ -2231,8 +2056,7 @@
             <input
               type="checkbox"
               checked={draw_formula_meshes}
-              onchange={() =>
-              overrides.set(`draw_formula_meshes`, !draw_formula_meshes)}
+              onchange={() => overrides.set(`draw_formula_meshes`, !draw_formula_meshes)}
             /> Meshes
           </label>
           <label>
@@ -2252,7 +2076,7 @@
               step="0.1"
               value={element_padding}
               oninput={(event) =>
-              overrides.set(`element_padding`, Number(event.currentTarget.value))}
+                overrides.set(`element_padding`, Number(event.currentTarget.value))}
             />
           </label>
           <label>
@@ -2263,7 +2087,7 @@
               step="1"
               value={default_min_limit}
               oninput={(event) =>
-              overrides.set(`default_min_limit`, Number(event.currentTarget.value))}
+                overrides.set(`default_min_limit`, Number(event.currentTarget.value))}
             />
           </label>
         </div>
@@ -2273,7 +2097,7 @@
             id="chempot-color-mode"
             value={color_mode}
             onchange={(event) =>
-            overrides.set(`color_mode`, event.currentTarget.value as ChemPotColorMode)}
+              overrides.set(`color_mode`, event.currentTarget.value as ChemPotColorMode)}
           >
             {#each CHEMPOT_COLOR_MODE_OPTIONS as [value, label] (value)}
               <option {value}>{label}</option>
@@ -2287,10 +2111,7 @@
               id="chempot-color-scale"
               value={color_scale}
               onchange={(event) =>
-              overrides.set(
-                `color_scale`,
-                event.currentTarget.value as D3InterpolateName,
-              )}
+                overrides.set(`color_scale`, event.currentTarget.value as D3InterpolateName)}
             >
               {#each CHEMPOT_COLOR_SCALE_OPTIONS as [value, label] (value)}
                 <option {value}>{label}</option>
@@ -2300,8 +2121,7 @@
               <input
                 type="checkbox"
                 checked={reverse_color_scale}
-                onchange={() =>
-                overrides.set(`reverse_color_scale`, !reverse_color_scale)}
+                onchange={() => overrides.set(`reverse_color_scale`, !reverse_color_scale)}
               /> Rev
             </label>
           </div>
@@ -2314,312 +2134,297 @@
     {/if}
   </section>
   {#if show_temperature_slider && temperature !== undefined}
-    <TemperatureSlider
-      class="chempot-temp-slider"
-      {available_temperatures}
-      bind:temperature
-    />
+    <TemperatureSlider class="chempot-temp-slider" {available_temperatures} bind:temperature />
   {/if}
   <div class="canvas-clip">
-  {#if diagram_computing}
-    <div class="computing-state">
-      <Spinner text="Computing chemical potential domains..." style="--spinner-size: 1.2em" />
-    </div>
-  {:else if !diagram_data}
-    <div class="error-state" role="alert" aria-live="polite">
-      <p>Cannot compute chemical potential diagram.</p>
-      <p>Need at least 2 elements with elemental reference entries.</p>
-    </div>
-  {:else if mounted && typeof WebGLRenderingContext !== `undefined`}
-    <Canvas
-      createRenderer={(cvs) =>
-      new THREE.WebGLRenderer({
-        canvas: cvs,
-        alpha: true,
-        antialias: true,
-        preserveDrawingBuffer: true,
-      })}
-    >
-      <ChemPotScene3D>
-        {#if camera_projection === `orthographic`}
-          <!-- Orthographic camera matching pymatgen's projection style -->
-          <T.OrthographicCamera
-            makeDefault
-            position={camera_position}
-            zoom={orthographic_zoom}
-            near={0.1}
-            far={data_extent * 10}
-          >
-            <extras.OrbitControls
-              bind:ref={orbit_controls_ref}
-              enableRotate
-              enableZoom
-              enablePan
-              autoRotate={auto_rotate > 0}
-              autoRotateSpeed={auto_rotate}
-              target={camera_target}
-            />
-          </T.OrthographicCamera>
-        {:else}
-          <T.PerspectiveCamera
-            makeDefault
-            position={camera_position}
-            fov={50}
-            near={0.1}
-            far={data_extent * 10}
-          >
-            <extras.OrbitControls
-              bind:ref={orbit_controls_ref}
-              enableRotate
-              enableZoom
-              enablePan
-              autoRotate={auto_rotate > 0}
-              autoRotateSpeed={auto_rotate}
-              target={camera_target}
-            />
-          </T.PerspectiveCamera>
-        {/if}
+    {#if diagram_computing}
+      <div class="computing-state">
+        <Spinner
+          text="Computing chemical potential domains..."
+          style="--spinner-size: 1.2em"
+        />
+      </div>
+    {:else if !diagram_data}
+      <div class="error-state" role="alert" aria-live="polite">
+        <p>Cannot compute chemical potential diagram.</p>
+        <p>Need at least 2 elements with elemental reference entries.</p>
+      </div>
+    {:else if mounted && typeof WebGLRenderingContext !== `undefined`}
+      {#snippet orbit_controls()}
+        <extras.OrbitControls
+          bind:ref={orbit_controls_ref}
+          enableRotate
+          enableZoom
+          enablePan
+          autoRotate={auto_rotate > 0 && page_visibility.visible}
+          autoRotateSpeed={auto_rotate}
+          target={camera_target}
+        />
+      {/snippet}
+      <Canvas
+        createRenderer={(cvs) =>
+          new THREE.WebGLRenderer({
+            canvas: cvs,
+            alpha: true,
+            antialias: true,
+            preserveDrawingBuffer: true,
+          })}
+      >
+        <ChemPotScene3D>
+          {#if camera_projection === `orthographic`}
+            <!-- Orthographic camera matching pymatgen's projection style -->
+            <T.OrthographicCamera
+              makeDefault
+              position={camera_position}
+              zoom={orthographic_zoom}
+              near={0.1}
+              far={data_extent * 10}
+            >
+              {@render orbit_controls()}
+            </T.OrthographicCamera>
+          {:else}
+            <T.PerspectiveCamera
+              makeDefault
+              position={camera_position}
+              fov={50}
+              near={0.1}
+              far={data_extent * 10}
+            >
+              {@render orbit_controls()}
+            </T.PerspectiveCamera>
+          {/if}
 
-        <!-- Ambient light for visibility -->
-        <T.AmbientLight intensity={0.8} />
-        <T.DirectionalLight position={[1, 1, 1]} intensity={0.5} />
+          <!-- Ambient light for visibility -->
+          <T.AmbientLight intensity={0.8} />
+          <T.DirectionalLight position={[1, 1, 1]} intensity={0.5} />
 
-        <!-- Vertex-colored hull for both plain and colored modes.
+          <!-- Vertex-colored hull for both plain and colored modes.
            {#key domain_colors} forces Threlte to re-create the mesh whenever
            colors change (covers color_mode, color_scale, and data updates),
            since on-demand rendering won't detect mutated vertex color buffers. -->
-        {#if colored_hull_geometry}
-          {#key domain_colors}
-            <T.Mesh geometry={colored_hull_geometry}>
+          {#if colored_hull_geometry}
+            {#key domain_colors}
+              <T.Mesh geometry={colored_hull_geometry}>
+                <T.MeshBasicMaterial
+                  vertexColors
+                  transparent
+                  opacity={color_mode === `none` ? 0.25 : 0.4}
+                  side={THREE.DoubleSide}
+                  polygonOffset
+                  polygonOffsetFactor={1}
+                  polygonOffsetUnits={1}
+                />
+              </T.Mesh>
+            {/key}
+          {/if}
+
+          <!-- Domain boundary edges (wireframe on top of opaque fills) -->
+          <T.LineSegments geometry={edge_geometry}>
+            <T.LineBasicMaterial color={0x333333} linewidth={1} />
+          </T.LineSegments>
+
+          <!-- Invisible pick meshes for per-phase hover tooltip -->
+          {#each hover_mesh_data as domain_hover (domain_hover.formula)}
+            <T.Mesh
+              geometry={domain_hover.geometry}
+              onpointerenter={(event: unknown) => handle_phase_hover(domain_hover, event)}
+              onpointermove={(event: unknown) => handle_phase_hover(domain_hover, event)}
+              onpointerdown={(event: unknown) => toggle_phase_lock(domain_hover, event)}
+              onpointerleave={() => {
+                if (!locked_hover_formula && hover_info?.formula === domain_hover.formula) {
+                  hover_info = null
+                }
+              }}
+            >
               <T.MeshBasicMaterial
-                vertexColors
                 transparent
-                opacity={color_mode === `none` ? 0.25 : 0.4}
+                opacity={0}
                 side={THREE.DoubleSide}
-                polygonOffset
-                polygonOffsetFactor={1}
-                polygonOffsetUnits={1}
+                depthWrite={false}
               />
             </T.Mesh>
-          {/key}
-        {/if}
+          {/each}
 
-        <!-- Domain boundary edges (wireframe on top of opaque fills) -->
-        <T.LineSegments geometry={edge_geometry}>
-          <T.LineBasicMaterial color={0x333333} linewidth={1} />
-        </T.LineSegments>
-
-        <!-- Invisible pick meshes for per-phase hover tooltip -->
-        {#each hover_mesh_data as domain_hover (domain_hover.formula)}
-          <T.Mesh
-            geometry={domain_hover.geometry}
-            onpointerenter={(event: unknown) => handle_phase_hover(domain_hover, event)}
-            onpointermove={(event: unknown) => handle_phase_hover(domain_hover, event)}
-            onpointerdown={(event: unknown) => toggle_phase_lock(domain_hover, event)}
-            onpointerleave={() => {
-              if (
-                !locked_hover_formula &&
-                hover_info?.formula === domain_hover.formula
-              ) {
-                hover_info = null
-              }
-            }}
-          >
-            <T.MeshBasicMaterial
-              transparent
-              opacity={0}
-              side={THREE.DoubleSide}
-              depthWrite={false}
-            />
-          </T.Mesh>
-        {/each}
-
-        <!-- Formula overlay meshes (semi-transparent colored fill) -->
-        {#each formula_mesh_data as { geometry, color }, mesh_idx (mesh_idx)}
-          <T.Mesh {geometry}>
-            <T.MeshBasicMaterial
-              color={new THREE.Color(color)}
-              transparent
-              opacity={0.13}
-              side={THREE.DoubleSide}
-              depthWrite={false}
-            />
-          </T.Mesh>
-        {/each}
-
-        <!-- Formula overlay edges (colored, thicker) -->
-        {#if draw_formula_lines}
-          {#each formula_edge_data as { geometry, color }, edge_idx (edge_idx)}
-            <T.LineSegments {geometry}>
-              <T.LineBasicMaterial color={new THREE.Color(color)} linewidth={2} />
-            </T.LineSegments>
+          <!-- Formula overlay meshes (semi-transparent colored fill) -->
+          {#each formula_mesh_data as { geometry, color }, mesh_idx (mesh_idx)}
+            <T.Mesh {geometry}>
+              <T.MeshBasicMaterial
+                color={new THREE.Color(color)}
+                transparent
+                opacity={0.13}
+                side={THREE.DoubleSide}
+                depthWrite={false}
+              />
+            </T.Mesh>
           {/each}
-        {/if}
 
-        {#each projection_planes as plane (`${plane.key}-${projection_opacity}`)}
-          <T.Mesh position={plane.pos} rotation={plane.rot}>
-            <T.PlaneGeometry args={plane.size} />
-            <T.MeshBasicMaterial
-              color={plane.color}
-              opacity={projection_opacity}
-              transparent
-              side={THREE.DoubleSide}
-              depthWrite={false}
-            />
-          </T.Mesh>
-        {/each}
+          <!-- Formula overlay edges (colored, thicker) -->
+          {#if draw_formula_lines}
+            {#each formula_edge_data as { geometry, color }, edge_idx (edge_idx)}
+              <T.LineSegments {geometry}>
+                <T.LineBasicMaterial color={new THREE.Color(color)} linewidth={2} />
+              </T.LineSegments>
+            {/each}
+          {/if}
 
-        {#if display.show_bounding_box}
-          <T.LineSegments geometry={bounding_box_geometry}>
-            <T.LineBasicMaterial color="#666" opacity={0.6} transparent />
-          </T.LineSegments>
-        {/if}
+          {#each projection_planes as plane (`${plane.key}-${projection_opacity}`)}
+            <T.Mesh position={plane.pos} rotation={plane.rot}>
+              <T.PlaneGeometry args={plane.size} />
+              <T.MeshBasicMaterial
+                color={plane.color}
+                opacity={projection_opacity}
+                transparent
+                side={THREE.DoubleSide}
+                depthWrite={false}
+              />
+            </T.Mesh>
+          {/each}
 
-        <!-- Axes, ticks, grid lines, and labels -->
-        {#each grid_config as gc (gc.axis)}
-          {#if display.show_axes}
-            <!-- Main axis line -->
-            <T.Line geometry={gc.line_geom}>
-              <T.LineBasicMaterial color={gc.color} linewidth={2} />
-            </T.Line>
-            <!-- Tick marks -->
-            {#each gc.tick_geoms as tick_geom, tdx (tdx)}
-              <T.Line geometry={tick_geom}>
-                <T.LineBasicMaterial color={gc.color} />
-              </T.Line>
-            {/each}
+          {#if display.show_bounding_box}
+            <T.LineSegments geometry={bounding_box_geometry}>
+              <T.LineBasicMaterial color="#666" opacity={0.6} transparent />
+            </T.LineSegments>
           {/if}
-          {#if display.show_grid}
-            <!-- Grid lines -->
-            {#each gc.grid_geoms as grid_geom, gdx (gdx)}
-              <T.Line geometry={grid_geom}>
-                <T.LineBasicMaterial color="#888" opacity={0.3} transparent />
+
+          <!-- Axes, ticks, grid lines, and labels -->
+          {#each grid_config as gc (gc.axis)}
+            {#if display.show_axes}
+              <!-- Main axis line -->
+              <T.Line geometry={gc.line_geom}>
+                <T.LineBasicMaterial color={gc.color} linewidth={2} />
               </T.Line>
-            {/each}
-          {/if}
-          {#if display.show_axis_labels}
-            <!-- Tick labels (billboarded, always face camera) -->
-            {#each gc.tick_labels as tick, tick_idx (tick_idx)}
+              <!-- Tick marks -->
+              {#each gc.tick_geoms as tick_geom, tdx (tdx)}
+                <T.Line geometry={tick_geom}>
+                  <T.LineBasicMaterial color={gc.color} />
+                </T.Line>
+              {/each}
+            {/if}
+            {#if display.show_grid}
+              <!-- Grid lines -->
+              {#each gc.grid_geoms as grid_geom, gdx (gdx)}
+                <T.Line geometry={grid_geom}>
+                  <T.LineBasicMaterial color="#888" opacity={0.3} transparent />
+                </T.Line>
+              {/each}
+            {/if}
+            {#if display.show_axis_labels}
+              <!-- Tick labels (billboarded, always face camera) -->
+              {#each gc.tick_labels as tick, tick_idx (tick_idx)}
+                <extras.HTML position={tick.pos} center portal={wrapper} zIndexRange={[1, 0]}>
+                  <span class="tick-label axis-tick-label">{tick.text}</span>
+                </extras.HTML>
+              {/each}
+              <!-- Axis label -->
               <extras.HTML
-                position={tick.pos}
+                position={gc.label_pos}
                 center
                 portal={wrapper}
                 zIndexRange={[1, 0]}
               >
-                <span class="tick-label axis-tick-label">{tick.text}</span>
+                <span class="axis-label" style:color={gc.color}
+                  >{@html sanitize_html(gc.label)}</span
+                >
+              </extras.HTML>
+            {/if}
+          {/each}
+
+          <!-- Domain labels -->
+          {#if label_stable}
+            {#each visible_domain_labels as domain (domain.formula)}
+              <extras.HTML
+                position={domain.position}
+                center
+                portal={wrapper}
+                zIndexRange={[5, 5]}
+              >
+                <span
+                  class="domain-label"
+                  style:font-size="{(domain.label_font_size * zoom_scale).toFixed(1)}px"
+                >
+                  {#each formula_label_segments(domain.formula) as segment}
+                    <span class:formula-subscript={segment.subscript}>{segment.text}</span>
+                  {/each}
+                </span>
               </extras.HTML>
             {/each}
-            <!-- Axis label -->
-            <extras.HTML
-              position={gc.label_pos}
-              center
-              portal={wrapper}
-              zIndexRange={[1, 0]}
-            >
-              <span class="axis-label" style:color={gc.color}>{@html gc.label}</span>
-            </extras.HTML>
           {/if}
-        {/each}
-
-        <!-- Domain labels -->
-        {#if label_stable}
-          {#each visible_domain_labels as domain (domain.formula)}
-            <extras.HTML
-              position={domain.position}
-              center
-              portal={wrapper}
-              zIndexRange={[5, 5]}
-            >
-              <span
-                class="domain-label"
-                style:font-size="{(domain.label_font_size * zoom_scale).toFixed(1)}px"
-              >
-                {#each formula_label_segments(domain.formula) as segment}
-                  <span class:formula-subscript={segment.subscript}>{segment.text}</span>
-                {/each}
-              </span>
-            </extras.HTML>
+        </ChemPotScene3D>
+      </Canvas>
+      <!-- Color bar for continuous modes -->
+      {#if color_range}
+        {@const color_bar_config = get_chempot_color_bar_config(
+          color_scale,
+          reverse_color_scale,
+        )}
+        <ColorBar
+          title={color_range.label}
+          range={[color_range.min, color_range.max]}
+          color_scale_fn={color_bar_config.color_scale_fn}
+          color_scale_domain={color_bar_config.color_scale_domain}
+          wrapper_style="position: absolute; bottom: 16px; left: 1em; width: 200px; z-index: 10;"
+          bar_style="height: 12px;"
+          title_style="margin-bottom: 4px;"
+        />
+      {/if}
+      <!-- Categorical legend for arity mode -->
+      {#if color_mode === `arity`}
+        <div class="arity-legend">
+          {#each arity_legend_labels as label, idx (label)}
+            <span>
+              <span style:background={ARITY_COLORS[idx]}></span>
+              {label}
+            </span>
           {/each}
-        {/if}
-      </ChemPotScene3D>
-    </Canvas>
-    <!-- Color bar for continuous modes -->
-    {#if color_mode !== `none` && color_mode !== `arity` && color_range}
-      {@const color_bar_config = get_chempot_color_bar_config(
-      color_scale,
-      reverse_color_scale,
-    )}
-      <ColorBar
-        title={color_range.label}
-        range={[color_range.min, color_range.max]}
-        color_scale_fn={color_bar_config.color_scale_fn}
-        color_scale_domain={color_bar_config.color_scale_domain}
-        wrapper_style="position: absolute; bottom: 16px; left: 1em; width: 200px; z-index: 10;"
-        bar_style="height: 12px;"
-        title_style="margin-bottom: 4px;"
-      />
-    {/if}
-    <!-- Categorical legend for arity mode -->
-    {#if color_mode === `arity`}
-      <div class="arity-legend">
-        {#each arity_legend_labels as label, idx (label)}
-          <span>
-            <span style:background={arity_colors[idx]}></span>
-            {label}
-          </span>
-        {/each}
-      </div>
-    {/if}
-  {/if}
-  {#if render_local_tooltip && show_tooltip && hover_info?.view === `3d`}
-    <aside
-      bind:this={tooltip_el}
-      class="phase-tooltip"
-      style:left="{tooltip_pos.x}px"
-      style:top="{tooltip_pos.y}px"
-    >
-      <h4>
-        {#each formula_label_segments(hover_info.formula) as segment}
-          <span class:formula-subscript={segment.subscript}>{segment.text}</span>
-        {/each}
-      </h4>
-      {#if locked_hover_formula === hover_info.formula}
-        <p>Pinned · Press Esc to unlock</p>
+        </div>
       {/if}
-      <p>
-        Vertices: {hover_info.n_vertices} · Edges: {hover_info.n_edges} · Points:
-        {hover_info.n_points}
-      </p>
-      <p>
-        Entries: {hover_info.matching_entry_count}
-        {#if hover_info.min_energy_per_atom !== null &&
-          hover_info.max_energy_per_atom !== null}
-          · E/atom: {format_num(hover_info.min_energy_per_atom, `.4~g`)}
-          to {format_num(hover_info.max_energy_per_atom, `.4~g`)} eV
+    {/if}
+    {#if render_local_tooltip && show_tooltip && hover_info?.view === `3d`}
+      <aside
+        bind:this={tooltip_el}
+        class="phase-tooltip"
+        style:left="{tooltip_pos.x}px"
+        style:top="{tooltip_pos.y}px"
+      >
+        <h4>
+          {#each formula_label_segments(hover_info.formula) as segment}
+            <span class:formula-subscript={segment.subscript}>{segment.text}</span>
+          {/each}
+        </h4>
+        {#if locked_hover_formula === hover_info.formula}
+          <p>Pinned · Press Esc to unlock</p>
         {/if}
-      </p>
-      {#if tooltip_detail_level === `detailed`}
-        <h5 id="axis-ranges">Axis ranges</h5>
-        {#each hover_info.axis_ranges as axis_range (axis_range.element)}
-          <p>
-            {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
-            {format_num(axis_range.max_val, `.4~g`)} eV
-          </p>
-        {/each}
         <p>
-          Centroid: ({
-            hover_info.ann_loc.map((value) => format_num(value, `.3~g`)).join(
-              `, `,
-            )
-          })
+          Vertices: {hover_info.n_vertices} · Edges: {hover_info.n_edges} · Points:
+          {hover_info.n_points}
+        </p>
+        <p>
+          Entries: {hover_info.matching_entry_count}
+          {#if hover_info.min_energy_per_atom !== null && hover_info.max_energy_per_atom !== null}
+            · E/atom: {format_num(hover_info.min_energy_per_atom, `.4~g`)}
+            to {format_num(hover_info.max_energy_per_atom, `.4~g`)} eV
+          {/if}
         </p>
-        {#if hover_info.touches_limits.length > 0}
-          <h5 id="touches-bounds">Touches bounds</h5>
-          <p>{hover_info.touches_limits.join(`, `)}</p>
+        {#if tooltip_detail_level === `detailed`}
+          <h5 id="axis-ranges">Axis ranges</h5>
+          {#each hover_info.axis_ranges as axis_range (axis_range.element)}
+            <p>
+              {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
+              {format_num(axis_range.max_val, `.4~g`)} eV
+            </p>
+          {/each}
+          <p>
+            Centroid: ({hover_info.ann_loc
+              .map((value) => format_num(value, `.3~g`))
+              .join(`, `)})
+          </p>
+          {#if hover_info.touches_limits.length > 0}
+            <h5 id="touches-bounds">Touches bounds</h5>
+            <p>{hover_info.touches_limits.join(`, `)}</p>
+          {/if}
         {/if}
-      {/if}
-    </aside>
-  {/if}
+      </aside>
+    {/if}
   </div>
 </div>
 
@@ -2708,8 +2513,10 @@
   }
   .chempot-diagram-3d :global(.projection-controls .pane-row) {
     display: grid;
-    grid-template-columns:
-      auto minmax(4.5em, 1fr) auto minmax(4.5em, 1fr) auto minmax(4.5em, 1fr);
+    grid-template-columns: auto minmax(4.5em, 1fr) auto minmax(4.5em, 1fr) auto minmax(
+        4.5em,
+        1fr
+      );
     align-items: center;
     gap: 3pt;
   }
@@ -2849,10 +2656,7 @@
   .phase-tooltip {
     position: absolute;
     max-width: min(32rem, 92vw);
-    background: var(
-      --tooltip-bg,
-      light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9))
-    );
+    background: var(--tooltip-bg, light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9)));
     color: var(--tooltip-text, var(--text-color, #222));
     border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
     border-radius: 6px;