matterviz 0.3.1 → 0.3.3

package/dist/chempot-diagram/ChemPotDiagram3D.svelte

@@ -0,0 +1,3194 @@
+<script lang="ts">
+  import { type D3InterpolateName } from '../colors'
+  import {
+    get_electro_neg_formula,
+    get_formula_label_segments,
+    type FormulaLabelSegment,
+  } from '../composition/format'
+  import { extract_formula_elements } from '../composition/parse'
+  import TemperatureSlider from '../convex-hull/TemperatureSlider.svelte'
+  import type { PhaseData } from '../convex-hull/types'
+  import Spinner from '../feedback/Spinner.svelte'
+  import Icon from '../Icon.svelte'
+  import { format_num } from '../labels'
+  import { set_fullscreen_bg, SettingsSection, toggle_fullscreen } from '../layout'
+  import type { Vec2, Vec3 } from '../math'
+  import {
+    convex_hull_2d,
+    cross_3d,
+    merge_coplanar_triangles,
+    normalize_vec3,
+  } from '../math'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { ColorBar, ScatterPlot3DControls } from '../plot'
+  import {
+    constrain_tooltip_position,
+    pad_rect,
+    rects_overlap,
+  } from '../plot/layout'
+  import type {
+    AxisConfig3D,
+    CameraProjection3D,
+    DataSeries3D,
+    DisplayConfig3D,
+  } from '../plot/types'
+  import { Canvas, T } from '@threlte/core'
+  import * as extras from '@threlte/extras'
+  import { scaleLinear } from 'd3-scale'
+  import { onDestroy, onMount, untrack } from 'svelte'
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+  import * as THREE from 'three'
+  import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+  import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
+  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 {
+    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_min_entries_and_el_refs,
+    get_ternary_combinations,
+    get_visible_domain_labels,
+    pad_domain_points,
+    scale_to_font_range,
+  } from './compute'
+  import { with_hover_pointer } from './pointer'
+  import {
+    get_projection_source_entries,
+    get_temp_filter_payload,
+    get_valid_temperature,
+  } from './temperature'
+  import type {
+    ChemPotColorMode,
+    ChemPotDiagramConfig,
+    ChemPotDiagramData,
+    ChemPotHoverInfo,
+    ChemPotHoverInfo3D,
+  } from './types'
+  import { CHEMPOT_DEFAULTS } from './types'
+
+  let {
+    entries = [],
+    config = {},
+    width = $bindable(800),
+    height = $bindable(600),
+    // Auto-corrected to a valid available temperature when needed.
+    temperature = $bindable<number | undefined>(undefined),
+    interpolate_temperature = CHEMPOT_DEFAULTS.interpolate_temperature,
+    max_interpolation_gap = CHEMPOT_DEFAULTS.max_interpolation_gap,
+    hover_info = $bindable<ChemPotHoverInfo | null>(null),
+    render_local_tooltip = true,
+  }: {
+    entries: PhaseData[]
+    config?: ChemPotDiagramConfig
+    width?: number
+    height?: number
+    temperature?: number
+    interpolate_temperature?: boolean
+    max_interpolation_gap?: number
+    hover_info?: ChemPotHoverInfo | null
+    render_local_tooltip?: boolean
+  } = $props()
+
+  let formal_chempots_override = $state<boolean | null>(null)
+  let label_stable_override = $state<boolean | null>(null)
+  let element_padding_override = $state<number | null>(null)
+  let default_min_limit_override = $state<number | null>(null)
+  let draw_formula_meshes_override = $state<boolean | null>(null)
+  let draw_formula_lines_override = $state<boolean | null>(null)
+  const formal_chempots = $derived(
+    formal_chempots_override ??
+      (config.formal_chempots ?? CHEMPOT_DEFAULTS.formal_chempots),
+  )
+  const label_stable = $derived(
+    label_stable_override ?? (config.label_stable ?? CHEMPOT_DEFAULTS.label_stable),
+  )
+  const element_padding = $derived(
+    element_padding_override ??
+      (config.element_padding ?? CHEMPOT_DEFAULTS.element_padding),
+  )
+  const default_min_limit = $derived(
+    default_min_limit_override ??
+      (config.default_min_limit ?? CHEMPOT_DEFAULTS.default_min_limit),
+  )
+  let formulas_to_draw_override = $state<string[] | null>(null)
+  const formulas_to_draw = $derived(
+    formulas_to_draw_override ?? (config.formulas_to_draw ?? []),
+  )
+  const draw_formula_meshes = $derived(
+    draw_formula_meshes_override ??
+      (config.draw_formula_meshes ?? CHEMPOT_DEFAULTS.draw_formula_meshes),
+  )
+  const draw_formula_lines = $derived(
+    draw_formula_lines_override ??
+      (config.draw_formula_lines ?? CHEMPOT_DEFAULTS.draw_formula_lines),
+  )
+  let color_mode_override = $state<ChemPotColorMode | null>(null)
+  let color_scale_override = $state<D3InterpolateName | null>(null)
+  let reverse_color_scale_override = $state<boolean | null>(null)
+  const color_mode = $derived(
+    color_mode_override ?? (config.color_mode ?? `arity`),
+  )
+  const color_scale = $derived(
+    color_scale_override ?? (config.color_scale ?? CHEMPOT_DEFAULTS.color_scale),
+  )
+  const reverse_color_scale = $derived(
+    reverse_color_scale_override ??
+      (config.reverse_color_scale ?? CHEMPOT_DEFAULTS.reverse_color_scale),
+  )
+  const show_tooltip = $derived(config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip)
+  const tooltip_detail_level = $derived(
+    config.tooltip_detail_level ?? CHEMPOT_DEFAULTS.tooltip_detail_level,
+  )
+  const formula_colors = $derived(
+    config.formula_colors?.length
+      ? config.formula_colors
+      : CHEMPOT_DEFAULTS.formula_colors,
+  )
+
+  function formula_label_segments(formula: string): FormulaLabelSegment[] {
+    return get_formula_label_segments(get_electro_neg_formula(formula, true, ``, `.3~s`))
+  }
+
+  function normalize_projection_triplet(
+    maybe_triplet: string[] | undefined,
+    available_elements: string[],
+  ): string[] | null {
+    if (!maybe_triplet || maybe_triplet.length !== 3) return null
+    const deduped = Array.from(new Set(maybe_triplet))
+    if (deduped.length !== 3) return null
+    if (deduped.some((element) => !available_elements.includes(element))) return null
+    return deduped
+  }
+
+  let wrapper = $state<HTMLDivElement>()
+  let fullscreen = $state(false)
+  let export_pane_open = $state(false)
+  let formula_picker_open = $state(false)
+  let controls_open = $state(false)
+
+  // Mutual exclusion: only one pane open at a time.
+  // 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 } })
+  let copy_status = $state(false)
+  let copy_timeout_id: ReturnType<typeof setTimeout> | null = null
+  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)
+      : Math.round(render_width * base_aspect_ratio),
+  )
+
+  let mounted = $state(false)
+  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
+  // Matches ScatterPlot3DScene pattern where pos tracks the opposite side from camera
+  let back = $state([0, 0, 0])
+  // Outward offset signs for tick/label placement (away from bounding box)
+  let out_x = $state(-1) // sign for Three.js X (data axis 1) direction
+  let out_y = $state(-1) // sign for Three.js Y (data axis 2) direction
+  let camera_projection = $state<CameraProjection3D>(`orthographic`)
+  let auto_rotate = $state(0)
+  let display = $state<DisplayConfig3D>({
+    show_axes: true,
+    show_grid: true,
+    show_axis_labels: true,
+    show_bounding_box: false,
+    projections: { xy: false, xz: false, yz: false },
+    projection_opacity: 0.15,
+    projection_scale: 0.5,
+  })
+  let x_axis = $state<AxisConfig3D>({ label: ``, range: [null, null] })
+  let y_axis = $state<AxisConfig3D>({ label: ``, range: [null, null] })
+  let z_axis = $state<AxisConfig3D>({ label: ``, range: [null, null] })
+  const projection_opacity = $derived(display.projection_opacity ?? 0.15)
+
+  // Plotly/pymatgen uses Z-up with x-axis projecting left in isometric view.
+  // Three.js uses Y-up with X projecting right. To match pymatgen's visual layout:
+  //   data[0] (plotly x, projects left)  → Three.js Z (projects left)
+  //   data[1] (plotly y, projects right) → Three.js X (projects right)
+  //   data[2] (plotly z, projects up)    → Three.js Y (projects up)
+  function to_vec3(pt: number[]): THREE.Vector3 {
+    const [x_val, y_val, z_val] = to_render_xyz(pt)
+    return new THREE.Vector3(x_val, y_val, z_val)
+  }
+
+  // Compute diagram data (requires >= 3 elements for 3D rendering)
+  const { has_temp_data, available_temperatures, temp_filtered_entries } = $derived(
+    get_temp_filter_payload(entries, temperature, config, {
+      interpolate_temperature,
+      max_interpolation_gap,
+    }),
+  )
+
+  // Keep bound temperature aligned with available data points.
+  $effect(() => {
+    const next_temperature = get_valid_temperature(
+      temperature,
+      has_temp_data,
+      available_temperatures,
+    )
+    if (next_temperature !== temperature) temperature = next_temperature
+  })
+
+  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 has_multinary_system = $derived(all_entry_elements.length > 3)
+  let projection_elements_override = $state<string[] | null>(null)
+  const config_projection_elements = $derived(
+    normalize_projection_triplet(config.elements, all_entry_elements),
+  )
+  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)
+  })
+  const effective_config = $derived({
+    ...config,
+    elements: projection_elements.length === 3
+      ? projection_elements
+      : config.elements,
+    formal_chempots,
+    label_stable,
+    element_padding,
+    default_min_limit,
+    draw_formula_meshes,
+    draw_formula_lines,
+  })
+  let diagram_data = $state<ChemPotDiagramData | null>(null)
+  let diagram_computing = $state(false)
+  $effect(() => {
+    if (temp_filtered_entries.length < 3) {
+      diagram_data = null
+      diagram_computing = false
+      return
+    }
+    let cancelled = false
+    diagram_computing = true
+    compute_chempot_async(temp_filtered_entries, effective_config)
+      .then((data) => {
+        if (cancelled) return
+        diagram_data = data.elements.length >= 3 ? data : null
+        diagram_computing = false
+      })
+      .catch((err) => {
+        if (cancelled) return
+        console.error(`ChemPotDiagram3D:`, err)
+        diagram_data = null
+        diagram_computing = false
+      })
+    return () => { cancelled = true }
+  })
+
+  const plot_elements = $derived(diagram_data?.elements ?? projection_elements)
+  const is_projection_mode = $derived(
+    plot_elements.length > 0 &&
+      plot_elements.length < all_entry_elements.length &&
+      plot_elements.every((element) => all_entry_elements.includes(element)),
+  )
+  const projection_presets = $derived.by(() => {
+    const presets: string[][] = []
+    const seen = new Set<string>()
+    const add_triplet = (candidate: string[] | null): void => {
+      if (!candidate) return
+      const key = candidate.join(`|`)
+      if (seen.has(key)) return
+      seen.add(key)
+      presets.push(candidate)
+    }
+    add_triplet(config_projection_elements)
+    add_triplet(plot_elements.length === 3 ? plot_elements : null)
+    for (const combo of get_ternary_combinations(all_entry_elements)) {
+      add_triplet(combo)
+      if (presets.length >= 12) break
+    }
+    return presets
+  })
+  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 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)
+    )
+  })
+
+  // Process domains for rendering
+  interface DomainRenderData {
+    formula: string
+    points_3d: number[][]
+    ann_loc: number[]
+    is_draw_formula: boolean
+    label_font_size: number
+  }
+
+  interface HoverMeshData {
+    formula: string
+    geometry: THREE.BufferGeometry
+    info: ChemPotHoverInfo3D
+  }
+
+  interface FormulaEnergyStats {
+    matching_entry_count: number
+    min_energy_per_atom: number | null
+    max_energy_per_atom: number | null
+  }
+  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 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,
+        )
+        : 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,
+        label_font_size: bbox_diagonal(padded),
+      })
+    }
+    const fonts = scale_to_font_range(result.map((d) => d.label_font_size), 9, 15)
+    for (let idx = 0; idx < result.length; idx++) result[idx].label_font_size = fonts[idx]
+    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
+    },
+  )
+
+  // === 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
+
+    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 ?? [],
+      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],
+      }
+    },
+  )
+
+  const arity_legend_labels = $derived.by((): string[] => {
+    let has_four_plus_regions = false
+    for (const domain of render_domains) {
+      if (extract_formula_elements(domain.formula).length >= 4) {
+        has_four_plus_regions = true
+        break
+      }
+    }
+    return has_four_plus_regions
+      ? [`Unary`, `Binary`, `Ternary`, `4+`]
+      : [`Unary`, `Binary`, `Ternary`]
+  })
+
+  // Stretch short axes to improve screen-space utilization for highly anisotropic systems.
+  // Mapping is in rendered axis order: X=data[1], Y=data[2], Z=data[0].
+  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
+    for (const point of points) {
+      if (point[0] < min0) min0 = point[0]
+      if (point[0] > max0) max0 = point[0]
+      if (point[1] < min1) min1 = point[1]
+      if (point[1] > max1) max1 = point[1]
+      if (point[2] < min2) min2 = point[2]
+      if (point[2] > max2) max2 = point[2]
+    }
+    const span_x = Math.max(max1 - min1, 1e-6) // render X from data axis 1
+    const span_y = Math.max(max2 - min2, 1e-6) // render Y from data axis 2
+    const span_z = Math.max(max0 - min0, 1e-6) // render Z from data axis 0
+    const max_span = Math.max(span_x, span_y, span_z)
+    return [
+      Math.min(Math.max(max_span / span_x, 1), 4),
+      Math.min(Math.max(max_span / span_y, 1), 4),
+      Math.min(Math.max(max_span / span_z, 1), 4),
+    ]
+  })
+
+  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]
+  }
+
+  // Compute data center and extent for camera positioning (in swizzled coords)
+  const { data_center, data_extent } = $derived.by(() => {
+    const points = render_domains.flatMap((domain) => domain.points_3d)
+    if (points.length === 0) {
+      return { data_center: new THREE.Vector3(0, 0, 0), data_extent: 10 }
+    }
+    // Compute center in rendered coordinates (swizzled + axis scaling).
+    let [sum_x, sum_y, sum_z] = [0, 0, 0]
+    for (const point_3d of points) {
+      const [x_val, y_val, z_val] = to_render_xyz(point_3d)
+      sum_x += x_val
+      sum_y += y_val
+      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,
+    )
+    // Compute max distance from center
+    let max_dist = 0
+    for (const point of points) {
+      const [x_val, y_val, z_val] = to_render_xyz(point)
+      const dist = Math.hypot(x_val - center.x, y_val - center.y, z_val - center.z)
+      if (dist > max_dist) max_dist = dist
+    }
+    return { data_center: center, data_extent: Math.max(max_dist * 1.3, 1) }
+  })
+  const default_camera_position = $derived<Vec3>([
+    data_center.x + data_extent,
+    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_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,
+  )
+  // 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,
+  )
+  let last_data_center: Vec3 | null = null
+  let last_data_extent: number | null = null
+
+  // Compute domain boundary edges via axis-aligned 2D convex hull projection.
+  // 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[]][] {
+    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 get_2d_hull_edges(unique)
+  }
+
+  function polygon_area_2d(points_2d: Vec2[]): number {
+    if (points_2d.length < 3) return 0
+    let area_twice = 0
+    for (let idx = 0; idx < points_2d.length; idx++) {
+      const current = points_2d[idx]
+      const next = points_2d[(idx + 1) % points_2d.length]
+      area_twice += current[0] * next[1] - next[0] * current[1]
+    }
+    return Math.abs(area_twice) / 2
+  }
+
+  // Compute domain edges from the single best axis-aligned projection
+  // (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[]][] {
+    let selected_hull: Vec2[] = []
+    let selected_coord_to_idx: SvelteMap<string, number> | null = null
+    let selected_hull_area = -1
+
+    for (const drop of [0, 1, 2]) {
+      const axes = [0, 1, 2].filter((ax) => ax !== drop)
+
+      // 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
+      for (const pt of pts) {
+        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 max_2d_range = Math.max(range0, range1)
+      if (max_2d_range < 1e-6 || Math.min(range0, range1) < max_2d_range * 0.01) {
+        continue
+      }
+
+      // Build coordinate lookup for this projection
+      const coord_to_idx = new SvelteMap<string, number>()
+      const pts_2d: Vec2[] = []
+      for (let idx = 0; idx < pts.length; idx++) {
+        const p2 = [pts[idx][axes[0]], pts[idx][axes[1]]] as Vec2
+        pts_2d.push(p2)
+        const key = `${p2[0].toFixed(6)},${p2[1].toFixed(6)}`
+        if (!coord_to_idx.has(key)) coord_to_idx.set(key, idx)
+      }
+
+      const hull = convex_hull_2d(pts_2d)
+      if (hull.length < 3) continue
+      const hull_area = polygon_area_2d(hull)
+      if (hull_area <= selected_hull_area) continue
+      selected_hull = hull
+      selected_coord_to_idx = coord_to_idx
+      selected_hull_area = hull_area
+    }
+
+    if (!selected_coord_to_idx || selected_hull.length < 3) return []
+
+    const edges: [number[], number[]][] = []
+    for (let idx = 0; idx < selected_hull.length; idx++) {
+      const point_a = selected_hull[idx]
+      const point_b = selected_hull[(idx + 1) % selected_hull.length]
+      const point_a_idx = selected_coord_to_idx.get(
+        `${point_a[0].toFixed(6)},${point_a[1].toFixed(6)}`,
+      )
+      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
+      }
+      edges.push([pts[point_a_idx], pts[point_b_idx]])
+    }
+
+    return edges
+  }
+
+  // Build globally deduplicated edge geometry for domain boundaries using
+  // 3D convex hull crease edges (not 2D projected hull).
+  const edge_geometry = $derived.by(() => {
+    if (is_projection_mode) {
+      const all_points = render_domains
+        .filter((domain) => !domain.is_draw_formula)
+        .flatMap((domain) => domain.points_3d)
+      const unique_points = dedup_3d(all_points)
+      if (unique_points.length >= 4) {
+        try {
+          const hull_vectors = unique_points.map((point) => to_vec3(point))
+          const hull_geometry = new ConvexGeometry(hull_vectors)
+          const hull_edges = new THREE.EdgesGeometry(hull_geometry)
+          hull_geometry.dispose()
+          return hull_edges
+        } catch {
+          // Fall back to per-domain edges below.
+        }
+      }
+    }
+
+    const seen = new SvelteSet<string>()
+    const positions: number[] = []
+    for (const domain of render_domains) {
+      if (domain.is_draw_formula) continue
+      // Compute edges in swizzled (Three.js) coords since ConvexGeometry works there
+      const swizzled = domain.points_3d.map((point) => to_render_xyz(point))
+      for (const [pa, pb] of get_domain_edges(swizzled)) {
+        const ka = pa.map((v) => v.toFixed(4)).join(`,`)
+        const kb = pb.map((v) => v.toFixed(4)).join(`,`)
+        const key = ka < kb ? `${ka}|${kb}` : `${kb}|${ka}`
+        if (seen.has(key)) continue
+        seen.add(key)
+        positions.push(pa[0], pa[1], pa[2], pb[0], pb[1], pb[2])
+      }
+    }
+    const geom = new THREE.BufferGeometry()
+    geom.setAttribute(`position`, new THREE.Float32BufferAttribute(positions, 3))
+    return geom
+  })
+
+  // Build a single opaque convex hull mesh from ALL domain vertices for depth
+  // occlusion. This seamless surface writes to the depth buffer, hiding wireframe
+  // edges on the back side. Using all vertices together avoids gaps between domains.
+  const occlusion_hull_geometry = $derived.by((): THREE.BufferGeometry | null => {
+    try {
+      const all_points: number[][] = []
+      for (const domain of render_domains) {
+        if (domain.is_draw_formula) continue
+        all_points.push(...domain.points_3d)
+      }
+      const unique_points = dedup_3d(all_points)
+      if (unique_points.length < 4) return null
+      const vectors = unique_points.map((point) => to_vec3(point))
+      return merge_coplanar_geometry(new ConvexGeometry(vectors))
+    } catch {
+      return null
+    }
+  })
+
+  // Non-indexed hull geometry with artificial closing faces removed.
+  // The convex hull includes faces that close the diagram at the lower axis
+  // limits — flat walls and diagonal closing triangles. These are artificial
+  // (they depend on how far we extend the axes) and clutter the view.
+  // We detect them via their outward-pointing face normal: closing faces have
+  // normals pointing entirely toward the negative octant (all components ≤ 0),
+  // while meaningful domain boundaries always have at least one positive
+  // normal component (pointing toward 0 eV / the elemental reference).
+  const hull_base_geometry = $derived.by((): THREE.BufferGeometry | null => {
+    if (!occlusion_hull_geometry) return null
+    const src = occlusion_hull_geometry.index
+      ? occlusion_hull_geometry.toNonIndexed()
+      : occlusion_hull_geometry.clone()
+    const pos = src.getAttribute(`position`)
+    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
+    for (let vert_idx = 0; vert_idx < n_verts; vert_idx++) {
+      hx += pos.getX(vert_idx)
+      hy += pos.getY(vert_idx)
+      hz += pos.getZ(vert_idx)
+    }
+    hx /= n_verts
+    hy /= n_verts
+    hz /= n_verts
+    const kept: number[] = []
+    for (let face_idx = 0; face_idx < n_faces; face_idx++) {
+      const base = face_idx * 3
+      const va: Vec3 = [pos.getX(base), pos.getY(base), pos.getZ(base)]
+      const vb: Vec3 = [pos.getX(base + 1), pos.getY(base + 1), pos.getZ(base + 1)]
+      const vc: Vec3 = [pos.getX(base + 2), pos.getY(base + 2), pos.getZ(base + 2)]
+      // Face normal via cross product of two edges
+      let normal = cross_3d(
+        [vb[0] - va[0], vb[1] - va[1], vb[2] - va[2]],
+        [vc[0] - va[0], vc[1] - va[1], vc[2] - va[2]],
+      )
+      // Orient outward (away from hull centroid)
+      const dx = (va[0] + vb[0] + vc[0]) / 3 - hx
+      const dy = (va[1] + vb[1] + vc[1]) / 3 - hy
+      const dz = (va[2] + vb[2] + vc[2]) / 3 - hz
+      if (normal[0] * dx + normal[1] * dy + normal[2] * dz < 0) {
+        normal = [-normal[0], -normal[1], -normal[2]]
+      }
+      // Closing faces point entirely toward negative octant (all ≤ 0).
+      // Meaningful domain faces always have at least one positive component.
+      if (normal[0] <= 0 && normal[1] <= 0 && normal[2] <= 0) continue
+      kept.push(...va, ...vb, ...vc)
+    }
+    // Re-merge coplanar faces after the filter — the closing-face removal
+    // can expose new coplanar adjacencies or leave fragments that should be
+    // merged into cleaner fan triangulations.
+    const merged = merge_coplanar_triangles(new Float32Array(kept))
+    const geom = new THREE.BufferGeometry()
+    geom.setAttribute(`position`, new THREE.Float32BufferAttribute(merged, 3))
+    const colors = new Float32Array(merged.length).fill(0.965)
+    geom.setAttribute(`color`, new THREE.Float32BufferAttribute(colors, 3))
+    return geom
+  })
+
+  // Per-face domain assignment (stable — only changes when geometry or domains change).
+  // Uses actual vertex centroid (mean of points_3d) for robust nearest-face matching.
+  const face_domain_map = $derived.by((): string[] => {
+    if (!hull_base_geometry) return []
+    const pos = hull_base_geometry.getAttribute(`position`)
+    const n_faces = pos.count / 3
+
+    // Domain vertex centroids in render coords (swizzled + axis stretch), matching hull_base_geometry.
+    const centroids = render_domains
+      .filter((d) => !d.is_draw_formula && d.points_3d.length > 0)
+      .map((d) => {
+        let sx = 0, sy = 0, sz = 0
+        for (const pt of d.points_3d) {
+          const [x_val, y_val, z_val] = to_render_xyz(pt)
+          sx += x_val
+          sy += y_val
+          sz += z_val
+        }
+        const n = d.points_3d.length
+        return { formula: d.formula, cx: sx / n, cy: sy / n, cz: sz / n }
+      })
+
+    // Assign each face to the nearest domain centroid
+    const result: string[] = []
+    for (let face_idx = 0; face_idx < n_faces; face_idx++) {
+      const base = face_idx * 3
+      const fcx = (pos.getX(base) + pos.getX(base + 1) + pos.getX(base + 2)) / 3
+      const fcy = (pos.getY(base) + pos.getY(base + 1) + pos.getY(base + 2)) / 3
+      const fcz = (pos.getZ(base) + pos.getZ(base + 1) + pos.getZ(base + 2)) / 3
+      let best_formula = ``
+      let best_dist = Infinity
+      for (const dc of centroids) {
+        const dist = (fcx - dc.cx) ** 2 + (fcy - dc.cy) ** 2 + (fcz - dc.cz) ** 2
+        if (dist < best_dist) {
+          best_dist = dist
+          best_formula = dc.formula
+        }
+      }
+      result.push(best_formula)
+    }
+
+    // Unify coplanar adjacent faces to the majority domain so that fan
+    // triangulation edges within a single hull face don't create visible
+    // color boundaries. Build adjacency via shared edge keys, group
+    // coplanar neighbors, then assign each group to its most-common domain.
+    if (n_faces > 1) {
+      const tol = 1e-3
+      const round = (v: number): number => Math.round(v / tol)
+      const vkey = (vert_idx: number): string =>
+        `${round(pos.getX(vert_idx))},${round(pos.getY(vert_idx))},${
+          round(pos.getZ(vert_idx))
+        }`
+      const ekey = (ka: string, kb: string): string =>
+        ka < kb ? `${ka}|${kb}` : `${kb}|${ka}`
+      // Compute face normals
+      const normals: Vec3[] = []
+      for (let face_idx = 0; face_idx < n_faces; face_idx++) {
+        const base = face_idx * 3
+        const e1: Vec3 = [
+          pos.getX(base + 1) - pos.getX(base),
+          pos.getY(base + 1) - pos.getY(base),
+          pos.getZ(base + 1) - pos.getZ(base),
+        ]
+        const e2: Vec3 = [
+          pos.getX(base + 2) - pos.getX(base),
+          pos.getY(base + 2) - pos.getY(base),
+          pos.getZ(base + 2) - pos.getZ(base),
+        ]
+        normals.push(normalize_vec3(cross_3d(e1, e2)))
+      }
+      // Build edge → face adjacency
+      const edge_faces = new SvelteMap<string, number[]>()
+      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 [
+            ekey(keys[0], keys[1]),
+            ekey(keys[1], keys[2]),
+            ekey(keys[0], keys[2]),
+          ]
+        ) {
+          const list = edge_faces.get(ek)
+          if (list) list.push(face_idx)
+          else edge_faces.set(ek, [face_idx])
+        }
+      }
+      // Union-find for coplanar adjacent faces
+      const parent = Array.from({ length: n_faces }, (_, idx) => idx)
+      const find = (x: number): number => {
+        while (parent[x] !== x) {
+          parent[x] = parent[parent[x]]
+          x = parent[x]
+        }
+        return x
+      }
+      const union = (a_idx: number, b_idx: number): void => {
+        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]
+        if (Math.abs(na[0] * nb[0] + na[1] * nb[1] + na[2] * nb[2]) > 1 - tol) {
+          union(fa, fb)
+        }
+      }
+      // Assign majority domain to each coplanar group
+      const groups = new SvelteMap<number, number[]>()
+      for (let face_idx = 0; face_idx < n_faces; face_idx++) {
+        const root = find(face_idx)
+        const grp = groups.get(root)
+        if (grp) grp.push(face_idx)
+        else groups.set(root, [face_idx])
+      }
+      for (const members of groups.values()) {
+        if (members.length < 2) continue
+        // Find most common domain in this group
+        const counts = new SvelteMap<string, number>()
+        for (const member_idx of members) {
+          counts.set(result[member_idx], (counts.get(result[member_idx]) ?? 0) + 1)
+        }
+        let majority = result[members[0]]
+        let max_count = 0
+        for (const [formula, count] of counts) {
+          if (count > max_count) {
+            max_count = count
+            majority = formula
+          }
+        }
+        for (const member_idx of members) result[member_idx] = majority
+      }
+    }
+
+    return result
+  })
+
+  // Reactive color fill: creates a cloned geometry with vertex colors applied.
+  // Only runs when color_mode or domain_colors change — no mutation of hull_base_geometry.
+  const colored_hull_geometry = $derived.by((): THREE.BufferGeometry | null => {
+    const mapping = face_domain_map
+    if (!hull_base_geometry || mapping.length === 0) return hull_base_geometry
+
+    const geom = hull_base_geometry.clone()
+    const color_attr = geom.getAttribute(`color`) as THREE.BufferAttribute
+    const use_colors = color_mode !== `none` && domain_colors.size > 0
+    const fb = use_colors
+      ? [0.91, 0.91, 0.91] // #e8e8e8
+      : [0.965, 0.965, 0.965] // #f6f6f6
+
+    // Cache parsed RGB per formula to avoid redundant THREE.Color allocations
+    const rgb_cache = new SvelteMap<string, Vec3>()
+    for (const [formula, hex] of domain_colors) {
+      const clr = new THREE.Color(hex)
+      rgb_cache.set(formula, [clr.r, clr.g, clr.b])
+    }
+
+    for (let face_idx = 0; face_idx < mapping.length; face_idx++) {
+      const rgb = use_colors ? rgb_cache.get(mapping[face_idx]) : null
+      const [red, green, blue] = rgb ?? fb
+      const base = face_idx * 3
+      for (let vert_idx = 0; vert_idx < 3; vert_idx++) {
+        color_attr.setXYZ(base + vert_idx, red, green, blue)
+      }
+    }
+    color_attr.needsUpdate = true
+    return geom
+  })
+
+  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,
+      }))
+    }
+
+    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,
+      }))
+    const font_size_by_formula = new SvelteMap(
+      render_domains.map((domain) => [domain.formula, domain.label_font_size]),
+    )
+    return get_visible_domain_labels(
+      pos.array,
+      face_domain_map,
+      font_size_by_formula,
+      pinned_labels,
+    )
+  })
+
+  $effect(() => {
+    const geom = hull_base_geometry
+    return () => dispose_geometry(geom)
+  })
+
+  $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)
+  })
+
+  // Domains on the outer surface (used by the "Surface" formula overlay quick-select).
+  const surface_formulas = $derived.by((): SvelteSet<string> => {
+    const on_surface = new SvelteSet<string>()
+    if (!occlusion_hull_geometry) {
+      for (const domain of render_domains) on_surface.add(domain.formula)
+      return on_surface
+    }
+    // Raycast from each domain's centroid outward -- if it hits the hull,
+    // the centroid is inside (interior domain). Use multiple ray directions
+    // and count: if most hit, the point is interior.
+    const raycaster = new THREE.Raycaster()
+    const hull_mesh = new THREE.Mesh(occlusion_hull_geometry)
+    const directions = [
+      new THREE.Vector3(1, 0, 0),
+      new THREE.Vector3(0, 1, 0),
+      new THREE.Vector3(0, 0, 1),
+      new THREE.Vector3(-1, 0, 0),
+      new THREE.Vector3(0, -1, 0),
+      new THREE.Vector3(0, 0, -1),
+    ]
+    for (const domain of render_domains) {
+      if (domain.is_draw_formula) {
+        on_surface.add(domain.formula)
+        continue
+      }
+      const origin = to_vec3(domain.ann_loc)
+      // Count how many rays hit the hull from the centroid
+      let hits = 0
+      for (const dir of directions) {
+        raycaster.set(origin, dir)
+        if (raycaster.intersectObject(hull_mesh).length > 0) hits++
+      }
+      // If fewer than 4 of 6 rays hit, centroid is on or near the surface
+      if (hits < 4) on_surface.add(domain.formula)
+    }
+    return on_surface
+  })
+
+  // Deduplicate 3D points within tolerance (reuses compute.ts dedup_points)
+  function dedup_3d(pts: number[][], tol: number = 1e-4): number[][] {
+    return dedup_points(pts, tol).unique
+  }
+
+  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])
+      ),
+      label: `domains`,
+    },
+  ])
+
+  // Build formula overlay edge geometries (per formula, colored) using crease edges
+  const formula_edge_data = $derived.by(() => {
+    if (!draw_formula_lines || formulas_to_draw.length === 0) return []
+    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 swizzled = domain.points_3d.map((point) => to_render_xyz(point))
+      const positions: number[] = []
+      for (const [pa, pb] of get_domain_edges(swizzled)) {
+        positions.push(pa[0], pa[1], pa[2], pb[0], pb[1], pb[2])
+      }
+      const geom = new THREE.BufferGeometry()
+      geom.setAttribute(`position`, new THREE.Float32BufferAttribute(positions, 3))
+      result.push({ geometry: geom, color: formula_colors[color_idx] })
+    }
+    return result
+  })
+
+  // Build formula overlay mesh geometries (convex hull surface)
+  const formula_mesh_data = $derived.by(() => {
+    const result: { geometry: THREE.BufferGeometry; color: string }[] = []
+    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 unique = dedup_3d(domain.points_3d)
+      if (unique.length < 4) continue
+      const vectors = unique.map((pt) => to_vec3(pt))
+      try {
+        const geom = merge_coplanar_geometry(new ConvexGeometry(vectors))
+        result.push({ geometry: geom, color: formula_colors[color_idx] })
+      } catch {
+        // Degenerate hull, skip
+      }
+    }
+    return result
+  })
+
+  function get_touches_limits(
+    points_3d: number[][],
+    lims: [number, number][],
+  ): string[] {
+    const limit_tol = 1e-3
+    const touches_limits: string[] = []
+    for (
+      let axis_idx = 0;
+      axis_idx < Math.min(plot_elements.length, lims.length);
+      axis_idx++
+    ) {
+      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_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`)
+    }
+    return touches_limits
+  }
+
+  // Post-process ConvexGeometry to merge coplanar triangles, eliminating
+  // internal diagonal edges across flat faces of the convex hull.
+  function merge_coplanar_geometry(geom: THREE.BufferGeometry): THREE.BufferGeometry {
+    const non_indexed = geom.index ? geom.toNonIndexed() : geom
+    const pos = non_indexed.getAttribute(`position`)
+    const merged = merge_coplanar_triangles(pos.array as Float32Array)
+    const result = new THREE.BufferGeometry()
+    result.setAttribute(`position`, new THREE.Float32BufferAttribute(merged, 3))
+    result.computeVertexNormals()
+    // Dispose intermediate geometry from toNonIndexed() (avoid double-dispose if same object)
+    if (non_indexed !== geom) non_indexed.dispose()
+    // Callers always pass a freshly created ConvexGeometry, so we own it
+    geom.dispose()
+    return result
+  }
+
+  function create_hover_geometry(
+    points_3d: number[][],
+  ): { geometry: THREE.BufferGeometry; n_vertices: number } | null {
+    const unique_points = dedup_3d(points_3d)
+    if (unique_points.length < 3) return null
+    // For exactly 3 unique points (planar/degenerate domain), create a triangle
+    // geometry directly since ConvexGeometry requires 4+ points for a 3D hull
+    if (unique_points.length === 3) {
+      const geom = new THREE.BufferGeometry()
+      const vectors = unique_points.map((pt) => to_vec3(pt))
+      const verts = new Float32Array(vectors.flatMap((v) => [v.x, v.y, v.z]))
+      geom.setAttribute(`position`, new THREE.Float32BufferAttribute(verts, 3))
+      geom.setIndex([0, 1, 2, 2, 1, 0]) // both winding orders for double-sided pick
+      geom.computeVertexNormals()
+      return { geometry: geom, n_vertices: 3 }
+    }
+    try {
+      return {
+        geometry: merge_coplanar_geometry(
+          new ConvexGeometry(unique_points.map((point) => to_vec3(point))),
+        ),
+        n_vertices: unique_points.length,
+      }
+    } catch {
+      return null
+    }
+  }
+
+  // Domain adjacency: two domains are neighbors if they share any vertex (within tolerance)
+  const domain_neighbors = $derived.by((): SvelteMap<string, string[]> => {
+    const tol = 1e-4
+    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 owners = vertex_owners.get(key)
+        if (owners) {
+          if (!owners.includes(domain.formula)) owners.push(domain.formula)
+        } else vertex_owners.set(key, [domain.formula])
+      }
+    }
+    const neighbors = new SvelteMap<string, SvelteSet<string>>()
+    for (const domain of render_domains) {
+      neighbors.set(domain.formula, new SvelteSet())
+    }
+    for (const owners of vertex_owners.values()) {
+      if (owners.length < 2) continue
+      for (let idx = 0; idx < owners.length; idx++) {
+        for (let jdx = idx + 1; jdx < owners.length; jdx++) {
+          neighbors.get(owners[idx])?.add(owners[jdx])
+          neighbors.get(owners[jdx])?.add(owners[idx])
+        }
+      }
+    }
+    const result = new SvelteMap<string, string[]>()
+    for (const [formula, set] of neighbors) result.set(formula, [...set].sort())
+    return result
+  })
+
+  const hover_mesh_data = $derived.by((): HoverMeshData[] => {
+    if (!diagram_data) return []
+    const result: HoverMeshData[] = []
+    const lims = diagram_data.lims
+    const energy_stats_by_formula = entry_energy_stats_by_formula
+
+    for (const domain of render_domains) {
+      if (domain.points_3d.length < 3) continue
+      const hover_geometry = create_hover_geometry(domain.points_3d)
+      if (!hover_geometry) continue
+      const { geometry, n_vertices } = hover_geometry
+
+      const swizzled_points = domain.points_3d.map((point) => to_render_xyz(point))
+      const edge_count = get_domain_edges(swizzled_points).length
+      const axis_ranges = build_axis_ranges(domain.points_3d, plot_elements)
+      const touches_limits = get_touches_limits(domain.points_3d, lims)
+      const energy_stats = energy_stats_by_formula.get(domain.formula) ?? {
+        matching_entry_count: 0,
+        min_energy_per_atom: null,
+        max_energy_per_atom: null,
+      }
+
+      const info: ChemPotHoverInfo3D = {
+        formula: domain.formula,
+        view: `3d`,
+        n_vertices,
+        n_edges: edge_count,
+        n_points: domain.points_3d.length,
+        ann_loc: domain.ann_loc,
+        axis_ranges,
+        touches_limits,
+        is_elemental: all_entry_elements.includes(domain.formula),
+        is_draw_formula: domain.is_draw_formula,
+        matching_entry_count: energy_stats.matching_entry_count,
+        min_energy_per_atom: energy_stats.min_energy_per_atom,
+        max_energy_per_atom: energy_stats.max_energy_per_atom,
+        neighbors: domain_neighbors.get(domain.formula) ?? [],
+      }
+
+      result.push({
+        formula: domain.formula,
+        geometry,
+        info,
+      })
+    }
+    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)
+  })
+
+  // === Grid, axes, ticks (matching ScatterPlot3D style) ===
+
+  // Bounding box of all data points in DATA coordinates (before swizzle)
+  const raw_data_bbox = $derived.by(() => {
+    const pts = render_domains.flatMap((d) => d.points_3d)
+    if (pts.length === 0) return { mins: [0, 0, 0], maxs: [1, 1, 1] }
+    const mins = [Infinity, Infinity, Infinity]
+    const maxs = [-Infinity, -Infinity, -Infinity]
+    for (const pt of pts) {
+      for (let dim = 0; dim < 3; dim++) {
+        if (pt[dim] < mins[dim]) mins[dim] = pt[dim]
+        if (pt[dim] > maxs[dim]) maxs[dim] = pt[dim]
+      }
+    }
+    return { mins, maxs }
+  })
+
+  // Axis range controls are in swizzled axis order:
+  // x-axis control -> data axis 1, y-axis control -> data axis 2, z-axis control -> data axis 0
+  const data_bbox = $derived.by(() => {
+    const mins = [...raw_data_bbox.mins]
+    const maxs = [...raw_data_bbox.maxs]
+    const range_by_data_axis: ([number | null, number | null] | undefined)[] = [
+      z_axis.range,
+      x_axis.range,
+      y_axis.range,
+    ]
+    for (let axis_idx = 0; axis_idx < 3; axis_idx++) {
+      const range = range_by_data_axis[axis_idx]
+      if (!range) continue
+      const [range_min, range_max] = range
+      if (range_min !== null) mins[axis_idx] = range_min
+      if (range_max !== null) maxs[axis_idx] = range_max
+    }
+    return { mins, maxs }
+  })
+
+  // Generate nice tick values for each data axis using D3
+  function gen_ticks(min_val: number, max_val: number, count: number = 5): number[] {
+    if (!isFinite(min_val) || !isFinite(max_val) || min_val === max_val) {
+      return [min_val]
+    }
+    return scaleLinear().domain([min_val, max_val]).nice().ticks(count)
+  }
+
+  // Ticks in DATA coordinates for each of the 3 data axes
+  const data_ticks = $derived([
+    gen_ticks(data_bbox.mins[0], data_bbox.maxs[0]),
+    gen_ticks(data_bbox.mins[1], data_bbox.maxs[1]),
+    gen_ticks(data_bbox.mins[2], data_bbox.maxs[2]),
+  ])
+
+  // 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 ticks = data_ticks[axis]
+      const lo = ticks[0]
+      const hi = ticks.at(-1) ?? lo
+      const step = ticks.length > 1 ? ticks[1] - ticks[0] : 1
+      if (axis === 2) {
+        const min_data = data_bbox.mins[2]
+        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 {
+    const geom = new THREE.BufferGeometry()
+    geom.setAttribute(
+      `position`,
+      new THREE.BufferAttribute(new Float32Array([...start, ...end]), 3),
+    )
+    return geom
+  }
+
+  // Swizzle a data-coord triple to Three.js coords
+  function swiz(d0: number, d1: number, d2: number): Vec3 {
+    const [scale_x, scale_y, scale_z] = render_axis_scale
+    return [d1 * scale_x, d2 * scale_y, d0 * scale_z] // data[0]→Z, data[1]→X, data[2]→Y
+  }
+
+  const axis_colors = [`#e74c3c`, `#2ecc71`, `#3498db`] as const
+  function chem_axis_label(data_axis: number): string {
+    const el = plot_elements[data_axis]
+    const prefix = formal_chempots ? `\u0394` : ``
+    return `${prefix}\u03BC<sub>${el}</sub> <span class="axis-unit">(eV)</span>`
+  }
+
+  // Proportional offsets for tick marks and labels, scaled to data extent
+  const tick_size = $derived(data_extent * 0.015)
+  const tick_label_dist = $derived(data_extent * 0.04)
+  const axis_label_dist = $derived(data_extent * 0.02)
+
+  // Place axis label just past the outer end of the axis (the end closer to 0).
+  // In isometric 3D, the end near 0 projects outward at the front edge of the
+  // bounding box, while the negative end projects inward toward the center.
+  function outer_end(range: [number, number]): number {
+    return Math.abs(range[0]) <= Math.abs(range[1]) ? range[0] : range[1]
+  }
+  // Direction from range center toward outer end (to extend the label beyond the grid)
+  function outer_dir(range: [number, number]): number {
+    const end = outer_end(range)
+    const mid = (range[0] + range[1]) / 2
+    return end >= mid ? 1 : -1
+  }
+
+  // Grid/axis configuration for each data axis.
+  // Axes, ticks, and labels are placed on the backside (far from camera)
+  // matching ScatterPlot3DScene's dynamic backside tracking pattern.
+  const grid_config = $derived.by(() => {
+    const [r0, r1, r2] = niced_range
+
+    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 tick_geoms: THREE.BufferGeometry[] = []
+      const grid_geoms: THREE.BufferGeometry[] = []
+      const tick_labels: { pos: Vec3; text: string }[] = []
+      let line_geom: THREE.BufferGeometry
+      let label_pos: Vec3
+
+      if (axis === 0) {
+        // Data axis 0 (Three.js Z, depth): axis at backside d1 and d2
+        const ls = swiz(r0[0], back[1], back[2])
+        const le = swiz(r0[1], back[1], back[2])
+        line_geom = make_line_geom(ls, le)
+        // Axis label past the outer end of the axis (near 0, projects outward)
+        label_pos = swiz(
+          outer_end(r0) + outer_dir(r0) * axis_label_dist,
+          back[1] + out_x * tick_label_dist * 0.5,
+          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_labels.push({
+            pos: swiz(
+              val,
+              back[1] + out_x * tick_label_dist * 0.5,
+              back[2] + out_y * tick_label_dist,
+            ),
+            text: format_num(val, `.3~g`),
+          })
+        }
+      } else if (axis === 1) {
+        // Data axis 1 (Three.js X, horizontal): axis at backside d0 and d2
+        const ls = swiz(back[0], r1[0], back[2])
+        const le = swiz(back[0], r1[1], back[2])
+        line_geom = make_line_geom(ls, le)
+        label_pos = swiz(
+          back[0],
+          outer_end(r1) + outer_dir(r1) * axis_label_dist,
+          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_labels.push({
+            pos: swiz(back[0], val, back[2] + out_y * tick_label_dist),
+            text: format_num(val, `.3~g`),
+          })
+        }
+      } else {
+        // Data axis 2 (Three.js Y, vertical): axis at backside d0 and d1
+        const ls = swiz(back[0], back[1], r2[0])
+        const le = swiz(back[0], back[1], r2[1])
+        line_geom = make_line_geom(ls, le)
+        label_pos = swiz(
+          back[0],
+          back[1] + out_x * tick_label_dist,
+          outer_end(r2) + outer_dir(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_labels.push({
+            pos: swiz(back[0], back[1] + out_x * tick_label_dist, val),
+            text: format_num(val, `.3~g`),
+          })
+        }
+      }
+
+      return { axis, color, label, line_geom, tick_geoms, grid_geoms, tick_labels, label_pos }
+    })
+  })
+
+  let label_occlusion_frame: number | null = null
+  let tick_labels_occluded = false
+  const has_occluding_domain_labels = $derived(
+    label_stable && visible_domain_labels.length > 0,
+  )
+  const can_update_label_occlusion = $derived(
+    mounted &&
+      display.show_axis_labels &&
+      grid_config.length > 0 &&
+      Number.isFinite(zoom_scale) &&
+      container_width > 0 &&
+      container_height > 0,
+  )
+
+  function update_label_occlusion(): void {
+    if (!wrapper) return
+    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)
+        return style.display !== `none` && style.visibility !== `hidden`
+      })
+      .map((domain_label) => pad_rect(domain_label.getBoundingClientRect(), 1))
+    if (domain_rects.length === 0) return
+
+    for (const tick_label of tick_labels) {
+      const style = getComputedStyle(tick_label)
+      if (style.display === `none` || style.visibility === `hidden`) continue
+      const tick_rect = tick_label.getBoundingClientRect()
+      if (domain_rects.some((domain_rect) => rects_overlap(tick_rect, domain_rect))) {
+        tick_label.style.visibility = `hidden`
+        tick_labels_occluded = true
+      }
+    }
+  }
+
+  function schedule_label_occlusion_update(): void {
+    if (typeof requestAnimationFrame === `undefined`) return
+    if (label_occlusion_frame !== null) cancelAnimationFrame(label_occlusion_frame)
+    label_occlusion_frame = requestAnimationFrame(() => {
+      label_occlusion_frame = null
+      update_label_occlusion()
+    })
+  }
+
+  // Update backside positions when camera crosses axis planes.
+  // Only updates when sign changes to avoid triggering geometry recreation every frame.
+  function update_backside(): void {
+    const cam = orbit_controls_ref?.object?.position
+    if (!cam) return
+    const [r0, r1, r2] = niced_range
+    // swiz: data[0]→Z, data[1]→X, data[2]→Y
+    const new_back_0 = cam.z > data_center.z ? r0[0] : r0[1]
+    const new_back_1 = cam.x > data_center.x ? r1[0] : r1[1]
+    const new_back_2 = cam.y > data_center.y ? r2[0] : r2[1]
+    if (back[0] !== new_back_0 || back[1] !== new_back_1 || back[2] !== new_back_2) {
+      back = [new_back_0, new_back_1, new_back_2]
+      out_x = cam.x > data_center.x ? -1 : 1
+      out_y = cam.y > data_center.y ? -1 : 1
+    }
+  }
+
+  function store_camera_view_state(): void {
+    // Prime framing baseline on first user interaction so the next geometry
+    // change can preserve zoom/center immediately (not only from second change).
+    if (last_data_center === null) {
+      last_data_center = [data_center.x, data_center.y, data_center.z]
+    }
+    if (last_data_extent === null) {
+      last_data_extent = data_extent
+    }
+    const controls = orbit_controls_ref
+    const controls_camera = controls?.object
+    if (controls_camera) {
+      camera_position_override = [
+        controls_camera.position.x,
+        controls_camera.position.y,
+        controls_camera.position.z,
+      ]
+      if (controls_camera instanceof THREE.OrthographicCamera) {
+        orthographic_zoom_override = controls_camera.zoom
+      }
+    }
+    const controls_target = controls?.target
+    if (controls_target) {
+      camera_target_override = [
+        controls_target.x,
+        controls_target.y,
+        controls_target.z,
+      ]
+    }
+  }
+
+  // Preserve user framing across temperature-driven geometry changes:
+  // shift camera/target with domain center and keep orthographic zoom relative to extent.
+  $effect(() => {
+    if (camera_position_override && camera_target_override && last_data_center) {
+      const [last_x, last_y, last_z] = last_data_center
+      const delta_x = data_center.x - last_x
+      const delta_y = data_center.y - last_y
+      const delta_z = data_center.z - last_z
+      if (delta_x !== 0 || delta_y !== 0 || delta_z !== 0) {
+        camera_position_override = [
+          camera_position_override[0] + delta_x,
+          camera_position_override[1] + delta_y,
+          camera_position_override[2] + delta_z,
+        ]
+        camera_target_override = [
+          camera_target_override[0] + delta_x,
+          camera_target_override[1] + delta_y,
+          camera_target_override[2] + delta_z,
+        ]
+      }
+    }
+    if (
+      orthographic_zoom_override !== null &&
+      last_data_extent !== null &&
+      last_data_extent > 0 &&
+      data_extent > 0
+    ) {
+      orthographic_zoom_override *= last_data_extent / data_extent
+    }
+    last_data_center = [data_center.x, data_center.y, data_center.z]
+    last_data_extent = data_extent
+  })
+
+  $effect(() => {
+    const controls = orbit_controls_ref
+    if (!controls) return
+    const on_controls_change = (): void => {
+      update_backside()
+      store_camera_view_state()
+      if (has_occluding_domain_labels) schedule_label_occlusion_update()
+    }
+    controls.addEventListener(`change`, on_controls_change)
+    untrack(() => update_backside())
+    controls.update()
+    return () => controls.removeEventListener(`change`, on_controls_change)
+  })
+
+  $effect(() => {
+    if (!can_update_label_occlusion) return
+    if (!has_occluding_domain_labels && !tick_labels_occluded) return
+    schedule_label_occlusion_update()
+  })
+
+  $effect(() => {
+    set_fullscreen_bg(wrapper, fullscreen, `--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)
+        }
+      }
+    }
+  })
+
+  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 planes: {
+      key: string
+      pos: Vec3
+      rot: Vec3
+      size: [number, number]
+      color: string
+    }[] = []
+    if (projections.xy) {
+      planes.push({
+        key: `xy`,
+        pos: swiz((r0[0] + r0[1]) / 2, (r1[0] + r1[1]) / 2, back[2]),
+        rot: [-Math.PI / 2, 0, 0],
+        size: [s1, s0],
+        color: `#5dade2`,
+      })
+    }
+    if (projections.xz) {
+      planes.push({
+        key: `xz`,
+        pos: swiz((r0[0] + r0[1]) / 2, back[1], (r2[0] + r2[1]) / 2),
+        rot: [0, Math.PI / 2, 0],
+        size: [s0, s2],
+        color: `#58d68d`,
+      })
+    }
+    if (projections.yz) {
+      planes.push({
+        key: `yz`,
+        pos: swiz(back[0], (r1[0] + r1[1]) / 2, (r2[0] + r2[1]) / 2),
+        rot: [0, 0, 0],
+        size: [s1, s2],
+        color: `#f5b041`,
+      })
+    }
+    return planes
+  })
+
+  const bounding_box_geometry = $derived.by(() => {
+    const [r0, r1, r2] = niced_range
+    const vertices = [
+      swiz(r0[0], r1[0], r2[0]),
+      swiz(r0[1], r1[0], r2[0]),
+      swiz(r0[1], r1[1], r2[0]),
+      swiz(r0[0], r1[1], r2[0]),
+      swiz(r0[0], r1[0], r2[1]),
+      swiz(r0[1], r1[0], r2[1]),
+      swiz(r0[1], r1[1], r2[1]),
+      swiz(r0[0], r1[1], r2[1]),
+    ]
+    const edges = [
+      [0, 1],
+      [1, 2],
+      [2, 3],
+      [3, 0],
+      [4, 5],
+      [5, 6],
+      [6, 7],
+      [7, 4],
+      [0, 4],
+      [1, 5],
+      [2, 6],
+      [3, 7],
+    ]
+    const positions: number[] = []
+    for (const [start_idx, end_idx] of edges) {
+      const start = vertices[start_idx]
+      const end = vertices[end_idx]
+      positions.push(start[0], start[1], start[2], end[0], end[1], end[2])
+    }
+    const geom = new THREE.BufferGeometry()
+    geom.setAttribute(`position`, new THREE.Float32BufferAttribute(positions, 3))
+    return geom
+  })
+
+  function reset_controls(): void {
+    formal_chempots_override = null
+    label_stable_override = null
+    element_padding_override = null
+    default_min_limit_override = null
+    draw_formula_meshes_override = null
+    draw_formula_lines_override = null
+    color_mode_override = null
+    color_scale_override = null
+    reverse_color_scale_override = null
+    projection_elements_override = null
+    formulas_to_draw_override = null
+    formula_filter_query = ``
+  }
+
+  function set_projection_axis(axis_idx: number, element: string): void {
+    if (!all_entry_elements.includes(element)) return
+    const next_projection = [...plot_elements]
+    if (next_projection.length !== 3) return
+    const current_owner_idx = next_projection.indexOf(element)
+    if (current_owner_idx !== -1 && current_owner_idx !== axis_idx) {
+      next_projection[current_owner_idx] = next_projection[axis_idx]
+    }
+    next_projection[axis_idx] = element
+    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,
+    )
+    if (normalized) projection_elements_override = normalized
+  }
+
+  function toggle_formula_selection(formula: string): void {
+    const selected_formulas = new SvelteSet(formulas_to_draw)
+    if (selected_formulas.has(formula)) selected_formulas.delete(formula)
+    else selected_formulas.add(formula)
+    formulas_to_draw_override = [...selected_formulas]
+  }
+
+  function select_surface_formulas(): void {
+    formulas_to_draw_override = render_domains
+      .filter((domain) => surface_formulas.has(domain.formula))
+      .map((domain) => domain.formula)
+  }
+
+  function select_neighbor_formulas(): void {
+    if (hover_info?.view !== `3d`) return
+    const neighbors = domain_neighbors.get(hover_info.formula) ?? []
+    formulas_to_draw_override = [hover_info.formula, ...neighbors]
+  }
+
+  function download_blob(blob: Blob, filename: string): void {
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement(`a`)
+    link.href = url
+    link.download = filename
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  let png_dpi = $state(150)
+  const export_basename = $derived(`chempot-${plot_elements.join(`-`)}`)
+
+  function get_view_settings(): Record<string, unknown> {
+    const camera_position = orbit_controls_ref?.object?.position
+    const camera_target = orbit_controls_ref?.target
+    return {
+      elements: plot_elements,
+      camera_projection,
+      auto_rotate,
+      color_mode,
+      color_scale,
+      reverse_color_scale,
+      camera_position: camera_position
+        ? [camera_position.x, camera_position.y, camera_position.z]
+        : null,
+      camera_target: camera_target
+        ? [camera_target.x, camera_target.y, camera_target.z]
+        : null,
+    }
+  }
+
+  interface OverlayTextItem {
+    x: number
+    y: number
+    text: string
+    font: string
+    font_size: string
+    font_family: string
+    font_weight: string
+    color: string
+  }
+  function get_overlay_text_items(canvas_rect: DOMRect): OverlayTextItem[] {
+    if (!wrapper) return []
+    const text_items: OverlayTextItem[] = []
+    for (
+      const element of wrapper.querySelectorAll(
+        `.tick-label, .axis-label, .domain-label`,
+      )
+    ) {
+      const html_element = element as HTMLElement
+      const style = getComputedStyle(html_element)
+      if (style.display === `none` || style.visibility === `hidden`) continue
+      const element_rect = html_element.getBoundingClientRect()
+      text_items.push({
+        x: element_rect.left + element_rect.width / 2 - canvas_rect.left,
+        y: element_rect.top + element_rect.height / 2 - canvas_rect.top,
+        text: html_element.textContent ?? ``,
+        font: style.font || `${style.fontSize} ${style.fontFamily}`,
+        font_size: style.fontSize || `11px`,
+        font_family: style.fontFamily || `sans-serif`,
+        font_weight: style.fontWeight || `400`,
+        color: style.color || `#333`,
+      })
+    }
+    return text_items
+  }
+
+  function export_png_file(): void {
+    if (!wrapper) return
+    const gl_canvas = wrapper.querySelector(`canvas`)
+    if (!(gl_canvas instanceof HTMLCanvasElement)) return
+
+    // Composite WebGL canvas + HTML overlay labels into a single image
+    const rect = gl_canvas.getBoundingClientRect()
+    const scale = Math.min(png_dpi / 72, 10)
+    const out = document.createElement(`canvas`)
+    out.width = Math.round(rect.width * scale)
+    out.height = Math.round(rect.height * scale)
+    const ctx = out.getContext(`2d`)
+    if (!ctx) return
+    ctx.scale(scale, scale)
+
+    // Draw the WebGL canvas as background
+    ctx.drawImage(gl_canvas, 0, 0, rect.width, rect.height)
+
+    // Draw all HTML overlay text (tick labels, axis labels, domain labels)
+    for (const text_item of get_overlay_text_items(rect)) {
+      ctx.font = text_item.font
+      ctx.fillStyle = text_item.color
+      ctx.textAlign = `center`
+      ctx.textBaseline = `middle`
+      ctx.fillText(text_item.text, text_item.x, text_item.y)
+    }
+
+    out.toBlob((blob) => {
+      if (!blob) return
+      download_blob(blob, `${export_basename}.png`)
+    }, `image/png`)
+  }
+
+  function xml_escape(text: string): string {
+    return text
+      .replaceAll(`&`, `&amp;`)
+      .replaceAll(`<`, `&lt;`)
+      .replaceAll(`>`, `&gt;`)
+      .replaceAll(`"`, `&quot;`)
+      .replaceAll(`'`, `&#39;`)
+  }
+
+  function export_svg_file(): void {
+    if (!wrapper) return
+    const gl_canvas = wrapper.querySelector(`canvas`)
+    if (!(gl_canvas instanceof HTMLCanvasElement)) return
+    const canvas_rect = gl_canvas.getBoundingClientRect()
+    if (canvas_rect.width === 0 || canvas_rect.height === 0) return
+    const png_data_url = gl_canvas.toDataURL(`image/png`)
+    const text_nodes = get_overlay_text_items(canvas_rect).map((text_item) =>
+      `<text x="${text_item.x.toFixed(2)}" y="${
+        text_item.y.toFixed(2)
+      }" text-anchor="middle" dominant-baseline="central" fill="${
+        xml_escape(text_item.color)
+      }" font-size="${xml_escape(text_item.font_size)}" font-family="${
+        xml_escape(text_item.font_family)
+      }" font-weight="${xml_escape(text_item.font_weight)}">${
+        xml_escape(text_item.text)
+      }</text>`
+    )
+    const metadata = xml_escape(JSON.stringify(get_view_settings()))
+    const svg = [
+      `<?xml version="1.0" encoding="UTF-8"?>`,
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas_rect.width}" height="${canvas_rect.height}" viewBox="0 0 ${canvas_rect.width} ${canvas_rect.height}">`,
+      `<metadata>${metadata}</metadata>`,
+      `<image href="${png_data_url}" x="0" y="0" width="${canvas_rect.width}" height="${canvas_rect.height}" />`,
+      ...text_nodes,
+      `</svg>`,
+    ].join(``)
+    download_blob(
+      new Blob([svg], { type: `image/svg+xml` }),
+      `${export_basename}.svg`,
+    )
+  }
+
+  function export_view_json_file(): void {
+    const json_text = JSON.stringify(get_view_settings(), null, 2)
+    download_blob(
+      new Blob([json_text], { type: `application/json` }),
+      `${export_basename}-view.json`,
+    )
+  }
+
+  function export_glb_file(): void {
+    const gltf_exporter = new GLTFExporter()
+    const export_root = new THREE.Group()
+    if (colored_hull_geometry) {
+      export_root.add(
+        new THREE.Mesh(
+          colored_hull_geometry.clone(),
+          new THREE.MeshBasicMaterial({
+            vertexColors: true,
+            transparent: true,
+            opacity: color_mode === `none` ? 0.25 : 0.4,
+            side: THREE.DoubleSide,
+          }),
+        ),
+      )
+    }
+    export_root.add(
+      new THREE.LineSegments(
+        edge_geometry.clone(),
+        new THREE.LineBasicMaterial({ color: 0x333333 }),
+      ),
+    )
+    for (const { geometry, color } of formula_mesh_data) {
+      export_root.add(
+        new THREE.Mesh(
+          geometry.clone(),
+          new THREE.MeshBasicMaterial({
+            color: new THREE.Color(color),
+            transparent: true,
+            opacity: 0.13,
+            side: THREE.DoubleSide,
+          }),
+        ),
+      )
+    }
+    if (draw_formula_lines) {
+      for (const { geometry, color } of formula_edge_data) {
+        export_root.add(
+          new THREE.LineSegments(
+            geometry.clone(),
+            new THREE.LineBasicMaterial({ color: new THREE.Color(color) }),
+          ),
+        )
+      }
+    }
+    gltf_exporter.parse(
+      export_root,
+      (result) => {
+        if (!(result instanceof ArrayBuffer)) return
+        download_blob(
+          new Blob([result], { type: `model/gltf-binary` }),
+          `${export_basename}.glb`,
+        )
+      },
+      (err) => {
+        console.error(`Failed to export GLB:`, err)
+      },
+      { binary: true, onlyVisible: false },
+    )
+  }
+
+  function get_json_string(): string {
+    return JSON.stringify(
+      {
+        elements: diagram_data?.elements ?? [],
+        domains: render_domains.map((domain) => ({
+          formula: domain.formula,
+          points_3d: domain.points_3d,
+        })),
+        lims: diagram_data?.lims ?? [],
+        view: get_view_settings(),
+      },
+      null,
+      2,
+    )
+  }
+
+  function export_json_file(): void {
+    download_blob(
+      new Blob([get_json_string()], { type: `application/json` }),
+      `${export_basename}.json`,
+    )
+  }
+
+  async function copy_json(): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(get_json_string())
+      copy_status = true
+    } catch (err) {
+      copy_status = false
+      console.error(`Failed to copy JSON to clipboard:`, err)
+    }
+    if (copy_timeout_id !== null) clearTimeout(copy_timeout_id)
+    copy_timeout_id = setTimeout(() => {
+      copy_status = false
+      copy_timeout_id = null
+    }, 1000)
+  }
+
+  onDestroy(() => {
+    if (copy_timeout_id !== null) clearTimeout(copy_timeout_id)
+    if (label_occlusion_frame !== null) cancelAnimationFrame(label_occlusion_frame)
+  })
+
+  let locked_hover_formula = $state<string | null>(null)
+  let tooltip_el = $state<HTMLElement>()
+
+  const tooltip_pos = $derived.by(() => {
+    const pointer = hover_info?.pointer
+    if (!pointer) return { x: 4, y: 4 }
+    return constrain_tooltip_position(
+      pointer.x, pointer.y,
+      tooltip_el?.offsetWidth ?? 200,
+      tooltip_el?.offsetHeight ?? 100,
+      container_width, container_height,
+      { offset: 0 },
+    )
+  })
+
+  function set_hover_info(domain_data: HoverMeshData, raw_event: unknown): void {
+    hover_info = with_hover_pointer<ChemPotHoverInfo>(
+      domain_data.info,
+      raw_event,
+      wrapper?.getBoundingClientRect() ?? null,
+    )
+  }
+
+  function clear_hover_lock(): void {
+    locked_hover_formula = null
+    hover_info = null
+  }
+
+  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 {
+    if (locked_hover_formula === domain_data.formula) {
+      clear_hover_lock()
+      return
+    }
+    locked_hover_formula = domain_data.formula
+    set_hover_info(domain_data, raw_event)
+  }
+
+  // Color mode cycling (keyboard shortcut 'c')
+  const color_modes: ChemPotColorMode[] = [
+    `none`,
+    `energy`,
+    `formation_energy`,
+    `arity`,
+    `entries`,
+  ]
+  function cycle_color_mode(): void {
+    const idx = color_modes.indexOf(color_mode)
+    color_mode_override = color_modes[(idx + 1) % color_modes.length]
+  }
+</script>
+
+<svelte:document
+  onfullscreenchange={() => {
+    fullscreen = document.fullscreenElement === wrapper
+  }}
+/>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  bind:this={wrapper}
+  bind:clientWidth={container_width}
+  bind:clientHeight={container_height}
+  class="chempot-diagram-3d"
+  class:fullscreen
+  style:width={fullscreen ? `100vw` : `100%`}
+  style:height={fullscreen ? `100vh` : `${render_height}px`}
+  role="application"
+  tabindex="0"
+  onkeydown={(event) => {
+    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`) toggle_fullscreen(wrapper)
+  }}
+  onpointerdown={(event) => {
+    const target = event.target
+    if (
+      locked_hover_formula &&
+      (target === wrapper || target instanceof HTMLCanvasElement)
+    ) {
+      clear_hover_lock()
+    }
+  }}
+>
+  <section>
+    <DraggablePane
+      bind:show={export_pane_open}
+      open_icon="Cross"
+      closed_icon="Export"
+      pane_props={{ class: `chempot-export-pane` }}
+      toggle_props={{
+        class: `chempot-export-toggle`,
+        title: `Export chemical potential diagram`,
+      }}
+    >
+      <h4 id="export-image">Export Image</h4>
+      <div class="export-row">
+        <label>
+          SVG
+          <button type="button" onclick={export_svg_file} title="SVG snapshot export">
+            ⬇
+          </button>
+        </label>
+        <label>
+          PNG
+          <button type="button" onclick={export_png_file} title="PNG ({png_dpi} DPI)">
+            ⬇
+          </button>
+          &nbsp;(DPI: <input
+            type="number"
+            min={50}
+            max={500}
+            bind:value={png_dpi}
+            title="Export resolution in dots per inch"
+            style="margin: 0 0 0 2pt"
+          />)
+        </label>
+      </div>
+      <h4 id="export-data">Export Data</h4>
+      <div class="export-row">
+        <label>
+          JSON
+          <button type="button" onclick={export_json_file} aria-label="Download JSON">
+            ⬇
+          </button>
+          <button
+            type="button"
+            onclick={copy_json}
+            aria-label="Copy JSON to clipboard"
+          >
+            {copy_status ? `✅` : `📋`}
+          </button>
+        </label>
+        <label>
+          View
+          <button
+            type="button"
+            onclick={export_view_json_file}
+            aria-label="Download view JSON"
+          >
+            ⬇
+          </button>
+        </label>
+        <label>
+          GLB
+          <button type="button" onclick={export_glb_file} aria-label="Download GLB">
+            ⬇
+          </button>
+        </label>
+      </div>
+    </DraggablePane>
+    <DraggablePane
+      bind:show={formula_picker_open}
+      open_icon="Cross"
+      closed_icon="Filter"
+      pane_props={{ class: `chempot-formula-pane` }}
+      toggle_props={{
+        class: `chempot-formula-toggle`,
+        title: `Formula overlays`,
+      }}
+    >
+      <h4 id="formula-overlays">Formula Overlays</h4>
+      <div class="overlay-actions">
+        <button type="button" onclick={() => formulas_to_draw_override = []}>
+          Clear
+        </button>
+        <button type="button" onclick={select_surface_formulas}>Surface</button>
+        <button type="button" onclick={select_neighbor_formulas}>Neighbors</button>
+      </div>
+      <label class="overlay-search">
+        Search:
+        <input
+          type="text"
+          placeholder="Formula filter"
+          bind:value={formula_filter_query}
+        />
+      </label>
+      <div class="formula-list">
+        {#if filtered_formulas.length === 0}
+          <div class="formula-empty">No matching formulas</div>
+        {:else}
+          {#each filtered_formulas as formula, formula_idx (formula)}
+            {@const formula_overlay_idx = formulas_to_draw.indexOf(formula)}
+            <label>
+              <input
+                type="checkbox"
+                checked={formulas_to_draw.includes(formula)}
+                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
+                ]}
+              ></span>
+              {get_electro_neg_formula(formula, true, ``, `.3~s`)}
+            </label>
+          {/each}
+        {/if}
+      </div>
+    </DraggablePane>
+
+    <ScatterPlot3DControls
+      bind:show={controls_open}
+      bind:x_axis
+      bind:y_axis
+      bind:z_axis
+      bind:display
+      bind:camera_projection
+      bind:auto_rotate
+      series={controls_series}
+      toggle_props={{
+        class: `chempot-controls-toggle`,
+        title: `3D plot controls`,
+      }}
+      pane_props={{ class: `chempot-controls-pane` }}
+    >
+      <SettingsSection
+        title="ChemPot"
+        current_values={{
+          formal_chempots,
+          label_stable,
+          element_padding,
+          default_min_limit,
+          draw_formula_meshes,
+          draw_formula_lines,
+          color_mode,
+          color_scale,
+          reverse_color_scale,
+        }}
+        on_reset={reset_controls}
+      >
+        {#if has_multinary_system && plot_elements.length === 3}
+          <div class="projection-controls">
+            <div class="pane-row">
+              <label for="chempot-proj-x">X:</label>
+              <select
+                id="chempot-proj-x"
+                value={plot_elements[0]}
+                onchange={(event) => set_projection_axis(0, event.currentTarget.value)}
+              >
+                {#each all_entry_elements as element_name (element_name)}
+                  <option value={element_name}>{element_name}</option>
+                {/each}
+              </select>
+              <label for="chempot-proj-y">Y:</label>
+              <select
+                id="chempot-proj-y"
+                value={plot_elements[1]}
+                onchange={(event) => set_projection_axis(1, event.currentTarget.value)}
+              >
+                {#each all_entry_elements as element_name (element_name)}
+                  <option value={element_name}>{element_name}</option>
+                {/each}
+              </select>
+              <label for="chempot-proj-z">Z:</label>
+              <select
+                id="chempot-proj-z"
+                value={plot_elements[2]}
+                onchange={(event) => set_projection_axis(2, event.currentTarget.value)}
+              >
+                {#each all_entry_elements as element_name (element_name)}
+                  <option value={element_name}>{element_name}</option>
+                {/each}
+              </select>
+            </div>
+            <div class="projection-presets">
+              {#each projection_presets as preset_elements (preset_elements.join(`|`))}
+                <button
+                  type="button"
+                  class:selected={preset_elements.join(`|`) === current_projection_key}
+                  onclick={() => apply_projection_preset(preset_elements)}
+                  title="Switch projection"
+                >
+                  {preset_elements.join(`-`)}
+                </button>
+              {/each}
+            </div>
+          </div>
+        {/if}
+        <div class="chempot-checks">
+          <label>
+            <input
+              type="checkbox"
+              checked={formal_chempots}
+              onchange={() => {
+                formal_chempots_override = !formal_chempots
+              }}
+            /> Formal
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={label_stable}
+              onchange={() => {
+                label_stable_override = !label_stable
+              }}
+            /> Labels
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={draw_formula_meshes}
+              onchange={() => {
+                draw_formula_meshes_override = !draw_formula_meshes
+              }}
+            /> Meshes
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={draw_formula_lines}
+              onchange={() => {
+                draw_formula_lines_override = !draw_formula_lines
+              }}
+            /> Lines
+          </label>
+        </div>
+        <div class="chempot-nums">
+          <label>
+            Pad (eV)
+            <input
+              type="number"
+              min="0"
+              step="0.1"
+              value={element_padding}
+              oninput={(event) => {
+                element_padding_override = Number(event.currentTarget.value)
+              }}
+            />
+          </label>
+          <label>
+            Min (eV)
+            <input
+              type="number"
+              max="0"
+              step="1"
+              value={default_min_limit}
+              oninput={(event) => {
+                default_min_limit_override = Number(
+                  event.currentTarget.value,
+                )
+              }}
+            />
+          </label>
+        </div>
+        <div class="pane-row">
+          <label for="chempot-color-mode">Color:</label>
+          <select
+            id="chempot-color-mode"
+            value={color_mode}
+            onchange={(event) => {
+              color_mode_override = event.currentTarget
+                .value as ChemPotColorMode
+            }}
+          >
+            <option value="none">None</option>
+            <option value="energy">Energy/atom</option>
+            <option value="formation_energy">Formation energy</option>
+            <option value="arity">Element count</option>
+            <option value="entries">Entry count</option>
+          </select>
+        </div>
+        {#if color_mode !== `none` && color_mode !== `arity`}
+          <div class="pane-row">
+            <label for="chempot-color-scale">Scale:</label>
+            <select
+              id="chempot-color-scale"
+              value={color_scale}
+              onchange={(event) => {
+                color_scale_override = event.currentTarget
+                  .value as D3InterpolateName
+              }}
+            >
+              <option value="interpolateViridis">Viridis</option>
+              <option value="interpolatePlasma">Plasma</option>
+              <option value="interpolateInferno">Inferno</option>
+              <option value="interpolateMagma">Magma</option>
+              <option value="interpolateCividis">Cividis</option>
+              <option value="interpolateTurbo">Turbo</option>
+              <option value="interpolateRdYlBu">RdYlBu</option>
+              <option value="interpolateSpectral">Spectral</option>
+            </select>
+            <label>
+              <input
+                type="checkbox"
+                checked={reverse_color_scale}
+                onchange={() => {
+                  reverse_color_scale_override = !reverse_color_scale
+                }}
+              /> Rev
+            </label>
+          </div>
+        {/if}
+      </SettingsSection>
+    </ScatterPlot3DControls>
+
+    <button
+      type="button"
+      onclick={() => toggle_fullscreen(wrapper)}
+      title="{fullscreen ? `Exit` : `Enter`} fullscreen"
+    >
+      <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" />
+    </button>
+  </section>
+  {#if show_temperature_slider && temperature !== undefined}
+    <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}
+
+        <!-- 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.
+           {#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}>
+              <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
+              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>
+          {/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}
+
+        {#if display.show_bounding_box}
+          <T.LineSegments geometry={bounding_box_geometry}>
+            <T.LineBasicMaterial color="#666" opacity={0.6} transparent />
+          </T.LineSegments>
+        {/if}
+
+        <!-- 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}
+          {#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={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>
+          {/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>
+      {/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}
+      </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}
+    </aside>
+  {/if}
+  </div>
+</div>
+
+<style>
+  .chempot-diagram-3d {
+    position: relative;
+    overflow: clip;
+  }
+  .canvas-clip {
+    position: relative;
+    overflow: clip;
+    width: 100%;
+    height: 100%;
+  }
+  .chempot-diagram-3d:fullscreen {
+    background: var(--chempot-3d-bg-fullscreen, var(--bg-color, #fff));
+  }
+  /* Threlte <extras.HTML portal={wrapper}> appends absolutely-positioned overlay divs
+     for 3D labels. pointer-events: none prevents them from blocking raycasting. */
+  .chempot-diagram-3d > :global(div[style*='position: absolute'][style*='top: 0']) {
+    pointer-events: none !important;
+  }
+  .chempot-diagram-3d > section {
+    position: absolute;
+    top: 1ex;
+    right: 1ex;
+    display: flex;
+    gap: 8px;
+    z-index: 20;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+    pointer-events: none;
+  }
+  .chempot-diagram-3d:hover > section,
+  .chempot-diagram-3d:focus-within > section,
+  .chempot-diagram-3d > section:has(:global(.pane-open)) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (hover: none) {
+    .chempot-diagram-3d > section {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  .chempot-diagram-3d > section > :global(button),
+  .chempot-diagram-3d > section > :global(.pane-toggle) {
+    background: transparent;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    border-radius: 3px;
+    color: var(--text-color, currentColor);
+    transition: background-color 0.2s;
+    display: flex;
+    font-size: clamp(0.75em, 1.5cqmin, 1em);
+  }
+  .chempot-diagram-3d > section > :global(button:hover),
+  .chempot-diagram-3d > section > :global(.pane-toggle:hover) {
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+  }
+  .chempot-diagram-3d :global(.chempot-temp-slider) {
+    top: var(--chempot-temp-slider-top, calc(1ex + 108px));
+    right: 4px;
+    z-index: 11;
+  }
+  .chempot-diagram-3d :global(.draggable-pane label) {
+    display: flex;
+    align-items: center;
+    gap: 4pt;
+    font-size: 0.9em;
+  }
+  .chempot-diagram-3d :global(.export-row) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4pt 10pt;
+    margin: 0 0 4pt;
+  }
+  .chempot-diagram-3d :global(.export-row > label) {
+    margin: 0;
+  }
+  .chempot-diagram-3d :global(.export-row button) {
+    width: 1.4em;
+    height: 1.4em;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .chempot-diagram-3d :global(.chempot-checks) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1ex;
+  }
+  .chempot-diagram-3d :global(.chempot-nums) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1ex;
+    margin: 4pt 0;
+  }
+  .chempot-diagram-3d :global(.projection-controls) {
+    margin: 0 0 6pt;
+  }
+  .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);
+    align-items: center;
+    gap: 3pt;
+  }
+  .chempot-diagram-3d :global(.projection-presets) {
+    margin-top: 4pt;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4pt;
+  }
+  .chempot-diagram-3d :global(.projection-presets button) {
+    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+    border-radius: 3px;
+    padding: 1px 5px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 0.85em;
+    color: var(--text-color, currentColor);
+  }
+  .chempot-diagram-3d :global(.projection-presets button.selected) {
+    background: color-mix(in srgb, currentColor 14%, transparent);
+  }
+  .chempot-diagram-3d :global(.overlay-actions) {
+    display: flex;
+    gap: 3pt;
+    margin: 0 0 4pt;
+  }
+  .chempot-diagram-3d :global(.overlay-actions button) {
+    border: none;
+    border-radius: 3px;
+    padding: 2px 6px;
+    background: color-mix(in srgb, currentColor 10%, transparent);
+    cursor: pointer;
+    color: var(--text-color, currentColor);
+    font-size: 0.85em;
+  }
+  .chempot-diagram-3d :global(.overlay-search) {
+    display: flex;
+    align-items: center;
+    gap: 4pt;
+    margin: 0 0 4pt;
+  }
+  .chempot-diagram-3d :global(.overlay-search input) {
+    width: 100%;
+    min-width: 10em;
+  }
+  .chempot-diagram-3d :global(.formula-list) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3pt;
+    max-height: min(42vh, 18rem);
+    overflow: auto;
+    padding: 2pt 0;
+  }
+  .chempot-diagram-3d :global(.formula-list label) {
+    display: inline-flex;
+    align-items: center;
+    gap: 3pt;
+    padding: 1px 5px;
+    border-radius: 3px;
+    font-size: 0.88em;
+    cursor: pointer;
+    background: color-mix(in srgb, currentColor 6%, transparent);
+  }
+  .chempot-diagram-3d :global(.formula-list label:has(input:checked)) {
+    background: color-mix(in srgb, currentColor 16%, transparent);
+  }
+  .chempot-diagram-3d :global(.formula-list input[type='checkbox']) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+  .chempot-diagram-3d :global(.formula-list label:has(input:focus-visible)) {
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+  .chempot-diagram-3d :global(.formula-color-dot) {
+    width: 0.55em;
+    height: 0.55em;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .chempot-diagram-3d :global(.formula-empty) {
+    font-size: 0.9em;
+    opacity: 0.7;
+  }
+  .chempot-diagram-3d :global(.chempot-nums input[type='number']) {
+    width: 5em;
+  }
+  .chempot-diagram-3d :global(.draggable-pane select) {
+    flex: 1;
+    min-width: 0;
+    padding: 2px 4px;
+  }
+  .computing-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+  }
+  .error-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-color, #666);
+  }
+  :is(.axis-label, .tick-label) {
+    pointer-events: none;
+    user-select: none;
+    white-space: nowrap;
+  }
+  .axis-label {
+    font: bold 13px sans-serif;
+  }
+  .axis-label :global(.axis-unit) {
+    font-weight: 300;
+    opacity: 0.7;
+  }
+  .tick-label {
+    font-size: 10px;
+    color: var(--text-color, #333);
+  }
+  .domain-label {
+    font-family: sans-serif;
+    color: var(--text-color, #333);
+    opacity: 0.7;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+  .formula-subscript {
+    font-size: calc(11em / 12);
+    vertical-align: -0.28em;
+  }
+  .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))
+    );
+    color: var(--tooltip-text, var(--text-color, #222));
+    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+    border-radius: 6px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
+    padding: 4px 6px;
+    font-size: 12px;
+    line-height: 1.25;
+    pointer-events: none;
+    z-index: 100;
+  }
+  .phase-tooltip h4 {
+    margin: 0 0 2px;
+    font-size: 13px;
+  }
+  .phase-tooltip p {
+    margin: 1px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .phase-tooltip h5 {
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .arity-legend {
+    position: absolute;
+    bottom: 16px;
+    left: 1em;
+    display: flex;
+    gap: 10px;
+    font-size: 12px;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .arity-legend > span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .arity-legend > span > span {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+</style>