matterviz 0.4.0 → 0.4.2

package/dist/chempot-diagram/ChemPotDiagram3D.svelte

@@ -6,23 +6,21 @@
   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 type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.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_vec,
-  } from '../math'
+    FullscreenButton,
+    type FullscreenToggleProp,
+    SettingsSection,
+    toggle_fullscreen,
+  } from '../layout'
+  import { sync_fullscreen } from '../layout/fullscreen.svelte'
+  import type { Vec2, Vec3 } from '../math'
+  import { convex_hull_2d, cross_3d, merge_coplanar_triangles, normalize_vec } from '../math'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { ColorBar, ScatterPlot3DControls } from '../plot'
-  import {
-    constrain_tooltip_position,
-    pad_rect,
-    rects_overlap,
-  } from '../plot/core/layout'
+  import { constrain_tooltip_position, pad_rect, rects_overlap } from '../plot/core/layout'
   import type {
     AxisConfig3D,
     CameraProjection3D,
@@ -32,15 +30,29 @@
   import { Canvas, T } from '@threlte/core'
   import * as extras from '@threlte/extras'
   import { scaleLinear } from 'd3-scale'
+  import type { Snippet } from 'svelte'
   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 {
+    CHEMPOT_COLOR_MODE_OPTIONS,
+    CHEMPOT_COLOR_SCALE_OPTIONS,
+    create_chempot_overrides,
+  } from './controls-state.svelte'
+  import {
+    export_glb_file,
+    export_json_file,
+    export_png_file,
+    export_svg_file,
+    export_view_json_file,
+    get_json_string,
+    get_view_settings,
+  } from './export'
   import {
     apply_element_padding,
     bbox_diagonal,
@@ -85,6 +97,11 @@
     max_interpolation_gap = CHEMPOT_DEFAULTS.max_interpolation_gap,
     hover_info = $bindable<ChemPotHoverInfo | null>(null),
     render_local_tooltip = true,
+    wrapper = $bindable(),
+    fullscreen = $bindable(false),
+    fullscreen_toggle = true,
+    controls_open = $bindable(false),
+    export_pane_open = $bindable(false),
   }: {
     entries: PhaseData[]
     config?: ChemPotDiagramConfig
@@ -95,62 +112,51 @@
     max_interpolation_gap?: number
     hover_info?: ChemPotHoverInfo | null
     render_local_tooltip?: boolean
+    // bindable: top-level wrapper element
+    wrapper?: HTMLDivElement
+    // bindable: fullscreen state
+    fullscreen?: boolean
+    // show/hide the fullscreen button (or custom snippet to render it)
+    fullscreen_toggle?: FullscreenToggleProp
+    // bindable: whether the controls pane is currently open
+    controls_open?: boolean
+    // bindable: whether the export pane is currently open
+    export_pane_open?: 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),
+  // Control overrides (override ?? config ?? default, cleared by Reset)
+  const overrides = create_chempot_overrides(
+    () => config,
+    [
+      `formal_chempots`,
+      `label_stable`,
+      `element_padding`,
+      `default_min_limit`,
+      `formulas_to_draw`,
+      `draw_formula_meshes`,
+      `draw_formula_lines`,
+      `color_mode`,
+      `color_scale`,
+      `reverse_color_scale`,
+    ],
+    { color_mode: `arity`, formulas_to_draw: [] },
   )
+  const formal_chempots = $derived(overrides.resolve(`formal_chempots`))
+  const label_stable = $derived(overrides.resolve(`label_stable`))
+  const element_padding = $derived(overrides.resolve(`element_padding`))
+  const default_min_limit = $derived(overrides.resolve(`default_min_limit`))
+  const formulas_to_draw = $derived(overrides.resolve(`formulas_to_draw`))
+  const draw_formula_meshes = $derived(overrides.resolve(`draw_formula_meshes`))
+  const draw_formula_lines = $derived(overrides.resolve(`draw_formula_lines`))
+  const color_mode = $derived(overrides.resolve(`color_mode`))
+  const color_scale = $derived(overrides.resolve(`color_scale`))
+  const reverse_color_scale = $derived(overrides.resolve(`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,
+    config.formula_colors?.length ? config.formula_colors : CHEMPOT_DEFAULTS.formula_colors,
   )
 
   const formula_label_segments = (formula: string): FormulaLabelSegment[] =>
@@ -167,33 +173,44 @@
     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
+  $effect(() => {
+    if (export_pane_open) {
+      formula_picker_open = false
+      controls_open = false
+    }
+  })
+  $effect(() => {
+    if (formula_picker_open) {
+      export_pane_open = false
+      controls_open = false
+    }
+  })
+  $effect(() => {
+    if (controls_open) {
+      export_pane_open = false
+      formula_picker_open = false
+    }
+  })
   let container_width = $state(0)
   let container_height = $state(0)
   const base_aspect_ratio = $derived(height > 0 && width > 0 ? height / width : 1)
   const render_width = $derived(container_width > 0 ? container_width : width)
   const render_height = $derived(
     fullscreen
-      ? (container_height > 0 ? container_height : height)
+      ? container_height > 0
+        ? container_height
+        : height
       : Math.round(render_width * base_aspect_ratio),
   )
 
   let mounted = $state(false)
-  onMount(() => mounted = true)
+  onMount(() => (mounted = true))
   let orbit_controls_ref = $state<OrbitControls | undefined>(undefined)
   // Backside tracking: axes/ticks/labels render on the far side from the camera
   // back[i] = backside data coordinate value for data axis i
@@ -246,9 +263,7 @@
     if (next_temperature !== temperature) temperature = next_temperature
   })
 
-  const show_temperature_slider = $derived(
-    has_temp_data && available_temperatures.length > 0,
-  )
+  const show_temperature_slider = $derived(has_temp_data && available_temperatures.length > 0)
 
   const projection_source_entries = $derived(
     get_projection_source_entries(entries, temp_filtered_entries),
@@ -260,10 +275,10 @@
         projection_source_entries.flatMap((entry) =>
           Object.entries(entry.composition)
             .filter(([, amount]) => amount > 0)
-            .map(([element]) => element)
+            .map(([element]) => element),
         ),
       ),
-    ).sort()
+    ).sort(),
   )
   const has_multinary_system = $derived(all_entry_elements.length > 3)
   let projection_elements_override = $state<string[] | null>(null)
@@ -285,9 +300,7 @@
   })
   const effective_config = $derived({
     ...config,
-    elements: projection_elements.length === 3
-      ? projection_elements
-      : config.elements,
+    elements: projection_elements.length === 3 ? projection_elements : config.elements,
     formal_chempots,
     label_stable,
     element_padding,
@@ -317,7 +330,9 @@
         diagram_data = null
         diagram_computing = false
       })
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   })
 
   const plot_elements = $derived(diagram_data?.elements ?? projection_elements)
@@ -346,15 +361,11 @@
   })
   const current_projection_key = $derived(plot_elements.join(`|`))
   let formula_filter_query = $state(``)
-  const available_formulas = $derived.by(() =>
-    Object.keys(diagram_data?.domains ?? {}).sort()
-  )
+  const available_formulas = $derived.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)
-    )
+    return available_formulas.filter((formula) => formula.toLowerCase().includes(query))
   })
 
   // Process domains for rendering
@@ -378,45 +389,49 @@
     max_energy_per_atom: number | null
   }
   type NumericColorMode = Exclude<ChemPotColorMode, `none` | `arity`>
+  const domain_annotation_cache = new Map<string, number[]>()
+
+  function get_domain_ann_loc(points_3d: number[][]): number[] {
+    if (points_3d.length >= 3) {
+      const cache_key = points_3d.map((point) => point.join(`,`)).join(`;`)
+      const cached = domain_annotation_cache.get(cache_key)
+      if (cached) return cached
+      const ann_loc = get_3d_domain_simplexes_and_ann_loc(points_3d).ann_loc
+      domain_annotation_cache.set(cache_key, ann_loc)
+      return ann_loc
+    }
+    return points_3d[0].map(
+      (_, col_idx) =>
+        points_3d.reduce((sum, point) => sum + point[col_idx], 0) / points_3d.length,
+    )
+  }
 
   const render_domains = $derived.by((): DomainRenderData[] => {
     if (!diagram_data || plot_elements.length < 2) return []
 
     const dim = diagram_data.elements.length
     const indices = Array.from({ length: dim }, (_, idx) => idx)
-    const new_lims = element_padding > 0
-      ? apply_element_padding(
-        diagram_data.domains,
-        indices,
-        element_padding,
-        default_min_limit,
-      )
-      : null
+    const new_lims =
+      element_padding > 0
+        ? apply_element_padding(
+            diagram_data.domains,
+            indices,
+            element_padding,
+            default_min_limit,
+          )
+        : null
 
     const result: DomainRenderData[] = []
     for (const [formula, pts] of Object.entries(diagram_data.domains)) {
       const padded = new_lims
-        ? pad_domain_points(
-          pts,
-          indices,
-          new_lims,
-          default_min_limit,
-          element_padding,
-        )
+        ? pad_domain_points(pts, indices, new_lims, default_min_limit, element_padding)
         : pts
       if (padded.length < 2) continue
-      const is_draw = formulas_to_draw.includes(formula)
-      const centroid = padded[0].map((_, col_idx) =>
-        padded.reduce((sum, point) => sum + point[col_idx], 0) / padded.length
-      )
-      const ann_loc = padded.length >= 3
-        ? get_3d_domain_simplexes_and_ann_loc(padded).ann_loc
-        : centroid
       result.push({
         formula,
         points_3d: padded,
-        ann_loc,
-        is_draw_formula: is_draw,
+        ann_loc: get_domain_ann_loc(padded),
+        is_draw_formula: formulas_to_draw.includes(formula),
         label_font_size: bbox_diagonal(padded),
       })
     }
@@ -467,9 +482,7 @@
   // 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 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)`,
@@ -484,11 +497,7 @@
       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 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
   }
@@ -535,24 +544,22 @@
   })
 
   // 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 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
@@ -572,9 +579,12 @@
   const render_axis_scale = $derived.by((): Vec3 => {
     const points = render_domains.flatMap((domain) => domain.points_3d)
     if (points.length === 0) return [1, 1, 1]
-    let min0 = Infinity, max0 = -Infinity
-    let min1 = Infinity, max1 = -Infinity
-    let min2 = Infinity, max2 = -Infinity
+    let min0 = Infinity,
+      max0 = -Infinity
+    let min1 = Infinity,
+      max1 = -Infinity
+    let min2 = Infinity,
+      max2 = -Infinity
     for (const point of points) {
       if (point[0] < min0) min0 = point[0]
       if (point[0] > max0) max0 = point[0]
@@ -614,11 +624,7 @@
       sum_z += z_val
     }
     const n_points = points.length
-    const center = new THREE.Vector3(
-      sum_x / n_points,
-      sum_y / n_points,
-      sum_z / n_points,
-    )
+    const center = new THREE.Vector3(sum_x / n_points, sum_y / n_points, sum_z / n_points)
     // Compute max distance from center
     let max_dist = 0
     for (const point of points) {
@@ -633,30 +639,22 @@
     data_center.y + data_extent,
     data_center.z + data_extent,
   ])
-  const default_camera_target = $derived<Vec3>([
-    data_center.x,
-    data_center.y,
-    data_center.z,
-  ])
+  const default_camera_target = $derived<Vec3>([data_center.x, data_center.y, data_center.z])
   const default_orthographic_zoom = $derived(
     Math.min(render_width, render_height) / (data_extent * 1.6),
   )
   let camera_position_override = $state<Vec3 | null>(null)
   let camera_target_override = $state<Vec3 | null>(null)
   let orthographic_zoom_override = $state<number | null>(null)
-  const camera_position = $derived(
-    camera_position_override ?? default_camera_position,
-  )
-  const camera_target = $derived(
-    camera_target_override ?? default_camera_target,
-  )
-  const orthographic_zoom = $derived(
-    orthographic_zoom_override ?? default_orthographic_zoom,
-  )
+  const camera_position = $derived(camera_position_override ?? default_camera_position)
+  const camera_target = $derived(camera_target_override ?? default_camera_target)
+  const orthographic_zoom = $derived(orthographic_zoom_override ?? default_orthographic_zoom)
   // Label scale factor: zoom relative to default, so labels grow/shrink with zoom
   // Labels scale sub-linearly with zoom so they grow but don't dominate when zoomed in
   const zoom_scale = $derived(
-    default_orthographic_zoom > 0 ? Math.sqrt(orthographic_zoom / default_orthographic_zoom) : 1,
+    default_orthographic_zoom > 0
+      ? Math.sqrt(orthographic_zoom / default_orthographic_zoom)
+      : 1,
   )
   let last_data_center: Vec3 | null = null
   let last_data_extent: number | null = null
@@ -665,14 +663,16 @@
   // Each domain in a chem pot diagram is a convex polygon/polyhedron. We project
   // to 2D (trying all 3 axis-aligned planes) and use the best projection's
   // convex hull boundary. This reliably handles both flat and 3D domains.
-  function get_domain_edges(
-    pts: number[][],
-  ): [number[], number[]][] {
+  function get_domain_edges(pts: number[][]): [number[], number[]][] {
     const unique = dedup_3d(pts)
     if (unique.length < 2) return []
     if (unique.length === 2) return [[unique[0], unique[1]]]
     if (unique.length === 3) {
-      return [[unique[0], unique[1]], [unique[1], unique[2]], [unique[0], unique[2]]]
+      return [
+        [unique[0], unique[1]],
+        [unique[1], unique[2]],
+        [unique[0], unique[2]],
+      ]
     }
     return get_2d_hull_edges(unique)
   }
@@ -692,9 +692,7 @@
   // (largest non-degenerate hull area). Unioning multiple projections can add
   // non-physical diagonals for nearly coplanar domains.
   // Called only from get_domain_edges with 4+ unique points
-  function get_2d_hull_edges(
-    pts: number[][],
-  ): [number[], number[]][] {
+  function get_2d_hull_edges(pts: number[][]): [number[], number[]][] {
     let selected_hull: Vec2[] = []
     let selected_coord_to_idx: SvelteMap<string, number> | null = null
     let selected_hull_area = -1
@@ -704,15 +702,20 @@
 
       // Skip this projection if points collapse to a line (near-zero range in
       // either projected axis). This avoids spurious edges from edge-on views.
-      let min0 = Infinity, max0 = -Infinity, min1 = Infinity, max1 = -Infinity
+      let min0 = Infinity,
+        max0 = -Infinity,
+        min1 = Infinity,
+        max1 = -Infinity
       for (const pt of pts) {
-        const v0 = pt[axes[0]], v1 = pt[axes[1]]
+        const v0 = pt[axes[0]],
+          v1 = pt[axes[1]]
         if (v0 < min0) min0 = v0
         if (v0 > max0) max0 = v0
         if (v1 < min1) min1 = v1
         if (v1 > max1) max1 = v1
       }
-      const range0 = max0 - min0, range1 = max1 - min1
+      const range0 = max0 - min0,
+        range1 = max1 - min1
       const max_2d_range = Math.max(range0, range1)
       if (max_2d_range < 1e-6 || Math.min(range0, range1) < max_2d_range * 0.01) {
         continue
@@ -750,7 +753,9 @@
         `${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_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`, {
@@ -797,7 +802,7 @@
       for (const [pa, pb] of get_domain_edges(swizzled)) {
         const ka = pa.map((coord) => coord.toFixed(4)).join(`,`)
         const kb = pb.map((coord) => coord.toFixed(4)).join(`,`)
-        const key = ka < kb ? `${ka}|${kb}` : `${kb}|${ka}`
+        const key = edge_key(ka, kb)
         if (seen.has(key)) continue
         seen.add(key)
         positions.push(pa[0], pa[1], pa[2], pb[0], pb[1], pb[2])
@@ -844,7 +849,9 @@
     const n_verts = pos.count
     const n_faces = n_verts / 3
     // Hull centroid for orienting face normals outward
-    let hx = 0, hy = 0, hz = 0
+    let hx = 0,
+      hy = 0,
+      hz = 0
     for (let vert_idx = 0; vert_idx < n_verts; vert_idx++) {
       hx += pos.getX(vert_idx)
       hy += pos.getY(vert_idx)
@@ -898,7 +905,9 @@
     const centroids = render_domains
       .filter((domain) => !domain.is_draw_formula && domain.points_3d.length > 0)
       .map((domain) => {
-        let sx = 0, sy = 0, sz = 0
+        let sx = 0,
+          sy = 0,
+          sz = 0
         for (const pt of domain.points_3d) {
           const [x_val, y_val, z_val] = to_render_xyz(pt)
           sx += x_val
@@ -906,7 +915,12 @@
           sz += z_val
         }
         const n_points = domain.points_3d.length
-        return { formula: domain.formula, cx: sx / n_points, cy: sy / n_points, cz: sz / n_points }
+        return {
+          formula: domain.formula,
+          cx: sx / n_points,
+          cy: sy / n_points,
+          cz: sz / n_points,
+        }
       })
 
     // Assign each face to the nearest domain centroid
@@ -934,11 +948,11 @@
     // 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 round = (val: number): number => Math.round(val / tol)
       const vkey = (vert_idx: number): string =>
-        `${round(pos.getX(vert_idx))},${round(pos.getY(vert_idx))},${
-          round(pos.getZ(vert_idx))
-        }`
+        `${round(pos.getX(vert_idx))},${round(pos.getY(vert_idx))},${round(
+          pos.getZ(vert_idx),
+        )}`
       // Compute face normals
       const normals: Vec3[] = []
       for (let face_idx = 0; face_idx < n_faces; face_idx++) {
@@ -960,13 +974,11 @@
       for (let face_idx = 0; face_idx < n_faces; face_idx++) {
         const base = face_idx * 3
         const keys = [vkey(base), vkey(base + 1), vkey(base + 2)]
-        for (
-          const ek of [
-            edge_key(keys[0], keys[1]),
-            edge_key(keys[1], keys[2]),
-            edge_key(keys[0], keys[2]),
-          ]
-        ) {
+        for (const ek of [
+          edge_key(keys[0], keys[1]),
+          edge_key(keys[1], keys[2]),
+          edge_key(keys[0], keys[2]),
+        ]) {
           const list = edge_faces.get(ek)
           if (list) list.push(face_idx)
           else edge_faces.set(ek, [face_idx])
@@ -974,21 +986,23 @@
       }
       // 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]
+      const find = (node: number): number => {
+        while (parent[node] !== node) {
+          parent[node] = parent[parent[node]]
+          node = parent[node]
         }
-        return x
+        return node
       }
       const union = (a_idx: number, b_idx: number): void => {
-        const ra = find(a_idx), rb = find(b_idx)
+        const ra = find(a_idx),
+          rb = find(b_idx)
         if (ra !== rb) parent[ra] = rb
       }
       for (const pair of edge_faces.values()) {
         if (pair.length !== 2) continue
         const [fa, fb] = pair
-        const na = normals[fa], nb = normals[fb]
+        const na = normals[fa],
+          nb = normals[fb]
         if (Math.abs(na[0] * nb[0] + na[1] * nb[1] + na[2] * nb[2]) > 1 - tol) {
           union(fa, fb)
         }
@@ -1138,15 +1152,9 @@
 
   const controls_series = $derived<DataSeries3D[]>([
     {
-      x: render_domains.flatMap((domain) =>
-        domain.points_3d.map((point) => point[1])
-      ),
-      y: render_domains.flatMap((domain) =>
-        domain.points_3d.map((point) => point[2])
-      ),
-      z: render_domains.flatMap((domain) =>
-        domain.points_3d.map((point) => point[0])
-      ),
+      x: render_domains.flatMap((domain) => domain.points_3d.map((point) => point[1])),
+      y: render_domains.flatMap((domain) => domain.points_3d.map((point) => point[2])),
+      z: render_domains.flatMap((domain) => domain.points_3d.map((point) => point[0])),
       label: `domains`,
     },
   ])
@@ -1157,8 +1165,7 @@
     const result: { geometry: THREE.BufferGeometry; color: string }[] = []
     for (const domain of render_domains) {
       if (!domain.is_draw_formula) continue
-      const color_idx = formulas_to_draw.indexOf(domain.formula) %
-        formula_colors.length
+      const color_idx = formulas_to_draw.indexOf(domain.formula) % formula_colors.length
       const swizzled = domain.points_3d.map((point) => to_render_xyz(point))
       const positions: number[] = []
       for (const [pa, pb] of get_domain_edges(swizzled)) {
@@ -1177,8 +1184,7 @@
     if (!draw_formula_meshes) return result
     for (const domain of render_domains) {
       if (!domain.is_draw_formula || domain.points_3d.length < 4) continue
-      const color_idx = formulas_to_draw.indexOf(domain.formula) %
-        formula_colors.length
+      const color_idx = formulas_to_draw.indexOf(domain.formula) % formula_colors.length
       const unique = dedup_3d(domain.points_3d)
       if (unique.length < 4) continue
       const vectors = unique.map((pt) => to_vec3(pt))
@@ -1192,10 +1198,7 @@
     return result
   })
 
-  function get_touches_limits(
-    points_3d: number[][],
-    lims: [number, number][],
-  ): string[] {
+  function get_touches_limits(points_3d: number[][], lims: Vec2[]): string[] {
     const limit_tol = 1e-3
     const touches_limits: string[] = []
     for (
@@ -1205,11 +1208,11 @@
     ) {
       const [axis_min, axis_max] = lims[axis_idx]
       const axis_name = plot_elements[axis_idx] ?? `axis_${axis_idx}`
-      const touches_min = points_3d.some((point) =>
-        Math.abs(point[axis_idx] - axis_min) < limit_tol
+      const touches_min = points_3d.some(
+        (point) => Math.abs(point[axis_idx] - axis_min) < limit_tol,
       )
-      const touches_max = points_3d.some((point) =>
-        Math.abs(point[axis_idx] - axis_max) < limit_tol
+      const touches_max = points_3d.some(
+        (point) => Math.abs(point[axis_idx] - axis_max) < limit_tol,
       )
       if (touches_min) touches_limits.push(`${axis_name} lower bound`)
       if (touches_max) touches_limits.push(`${axis_name} upper bound`)
@@ -1267,9 +1270,7 @@
     const vertex_owners = new SvelteMap<string, string[]>()
     for (const domain of render_domains) {
       for (const pt of domain.points_3d) {
-        const key = pt.map((val) => (Math.round(val / tol) * tol).toFixed(4)).join(
-          `,`,
-        )
+        const key = pt.map((val) => (Math.round(val / tol) * tol).toFixed(4)).join(`,`)
         const owners = vertex_owners.get(key)
         if (owners) {
           if (!owners.includes(domain.formula)) owners.push(domain.formula)
@@ -1347,9 +1348,7 @@
     geometry.dispose()
   }
 
-  function dispose_geometries(
-    geometries: (THREE.BufferGeometry | null | undefined)[],
-  ): void {
+  function dispose_geometries(geometries: (THREE.BufferGeometry | null | undefined)[]): void {
     for (const geometry of geometries) dispose_geometry(geometry)
   }
 
@@ -1453,10 +1452,7 @@
   })
 
   // Helper to create a line geometry from two Vec3 arrays
-  function make_line_geom(
-    start: Vec3,
-    end: Vec3,
-  ): THREE.BufferGeometry {
+  function make_line_geom(start: Vec3, end: Vec3): THREE.BufferGeometry {
     const geom = new THREE.BufferGeometry()
     geom.setAttribute(
       `position`,
@@ -1486,10 +1482,10 @@
   // 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.
-  const outer_end = (range: [number, number]): number =>
+  const outer_end = (range: Vec2): number =>
     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)
-  const outer_direction = (range: [number, number]): number => {
+  const outer_direction = (range: Vec2): number => {
     const end = outer_end(range)
     const mid = (range[0] + range[1]) / 2
     return end >= mid ? 1 : -1
@@ -1504,11 +1500,12 @@
     return [0, 1, 2].map((axis) => {
       const ticks = data_ticks[axis]
       const color = axis_colors[axis]
-      const label = axis === 0
-        ? (z_axis.label || chem_axis_label(0))
-        : axis === 1
-        ? (x_axis.label || chem_axis_label(1))
-        : (y_axis.label || chem_axis_label(2))
+      const label =
+        axis === 0
+          ? z_axis.label || chem_axis_label(0)
+          : axis === 1
+            ? x_axis.label || chem_axis_label(1)
+            : y_axis.label || chem_axis_label(2)
 
       const tick_geoms: THREE.BufferGeometry[] = []
       const grid_geoms: THREE.BufferGeometry[] = []
@@ -1528,16 +1525,14 @@
           back[2] + out_y * tick_label_dist,
         )
         for (const val of ticks) {
-          tick_geoms.push(make_line_geom(
-            swiz(val, back[1], back[2]),
-            swiz(val, back[1], back[2] + out_y * tick_size),
-          ))
-          grid_geoms.push(
-            make_line_geom(swiz(val, r1[0], back[2]), swiz(val, r1[1], back[2])),
-          )
-          grid_geoms.push(
-            make_line_geom(swiz(val, back[1], r2[0]), swiz(val, back[1], r2[1])),
+          tick_geoms.push(
+            make_line_geom(
+              swiz(val, back[1], back[2]),
+              swiz(val, back[1], back[2] + out_y * tick_size),
+            ),
           )
+          grid_geoms.push(make_line_geom(swiz(val, r1[0], back[2]), swiz(val, r1[1], back[2])))
+          grid_geoms.push(make_line_geom(swiz(val, back[1], r2[0]), swiz(val, back[1], r2[1])))
           tick_labels.push({
             pos: swiz(
               val,
@@ -1558,16 +1553,14 @@
           back[2] + out_y * tick_label_dist,
         )
         for (const val of ticks) {
-          tick_geoms.push(make_line_geom(
-            swiz(back[0], val, back[2]),
-            swiz(back[0], val, back[2] + out_y * tick_size),
-          ))
-          grid_geoms.push(
-            make_line_geom(swiz(r0[0], val, back[2]), swiz(r0[1], val, back[2])),
-          )
-          grid_geoms.push(
-            make_line_geom(swiz(back[0], val, r2[0]), swiz(back[0], val, r2[1])),
+          tick_geoms.push(
+            make_line_geom(
+              swiz(back[0], val, back[2]),
+              swiz(back[0], val, back[2] + out_y * tick_size),
+            ),
           )
+          grid_geoms.push(make_line_geom(swiz(r0[0], val, back[2]), swiz(r0[1], val, back[2])))
+          grid_geoms.push(make_line_geom(swiz(back[0], val, r2[0]), swiz(back[0], val, r2[1])))
           tick_labels.push({
             pos: swiz(back[0], val, back[2] + out_y * tick_label_dist),
             text: format_num(val, `.3~g`),
@@ -1584,16 +1577,14 @@
           outer_end(r2) + outer_direction(r2) * axis_label_dist,
         )
         for (const val of ticks) {
-          tick_geoms.push(make_line_geom(
-            swiz(back[0], back[1], val),
-            swiz(back[0], back[1] + out_x * tick_size, val),
-          ))
-          grid_geoms.push(
-            make_line_geom(swiz(r0[0], back[1], val), swiz(r0[1], back[1], val)),
-          )
-          grid_geoms.push(
-            make_line_geom(swiz(back[0], r1[0], val), swiz(back[0], r1[1], val)),
+          tick_geoms.push(
+            make_line_geom(
+              swiz(back[0], back[1], val),
+              swiz(back[0], back[1] + out_x * tick_size, val),
+            ),
           )
+          grid_geoms.push(make_line_geom(swiz(r0[0], back[1], val), swiz(r0[1], back[1], val)))
+          grid_geoms.push(make_line_geom(swiz(back[0], r1[0], val), swiz(back[0], r1[1], val)))
           tick_labels.push({
             pos: swiz(back[0], back[1] + out_x * tick_label_dist, val),
             text: format_num(val, `.3~g`),
@@ -1621,16 +1612,12 @@
 
   function update_label_occlusion(): void {
     if (!wrapper) return
-    const tick_labels = Array.from(
-      wrapper.querySelectorAll<HTMLElement>(`.axis-tick-label`),
-    )
+    const tick_labels = Array.from(wrapper.querySelectorAll<HTMLElement>(`.axis-tick-label`))
     tick_labels_occluded = false
     for (const tick_label of tick_labels) {
       tick_label.style.visibility = ``
     }
-    const domain_rects = Array.from(
-      wrapper.querySelectorAll<HTMLElement>(`.domain-label`),
-    )
+    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`
@@ -1698,11 +1685,7 @@
     }
     const controls_target = controls?.target
     if (controls_target) {
-      camera_target_override = [
-        controls_target.x,
-        controls_target.y,
-        controls_target.z,
-      ]
+      camera_target_override = [controls_target.x, controls_target.y, controls_target.z]
     }
   }
 
@@ -1759,8 +1742,12 @@
     schedule_label_occlusion_update()
   })
 
-  $effect(() => {
-    set_fullscreen_bg(wrapper, fullscreen, `--chempot-3d-bg-fullscreen`)
+  // Drive the browser Fullscreen API from the bindable `fullscreen` prop (parent-controllable), keep it in sync with Esc/external exits
+  sync_fullscreen({
+    get_wrapper: () => wrapper,
+    get_fullscreen: () => fullscreen,
+    set_fullscreen: (val) => (fullscreen = val),
+    bg_css_var: `--chempot-3d-bg-fullscreen`,
   })
 
   $effect(() => {
@@ -1782,14 +1769,13 @@
     const projections = display.projections
     if (!projections) return []
     const [r0, r1, r2] = niced_range
-    const s0 = (r0[1] - r0[0]) * (display.projection_scale ?? 0.5)
-    const s1 = (r1[1] - r1[0]) * (display.projection_scale ?? 0.5)
-    const s2 = (r2[1] - r2[0]) * (display.projection_scale ?? 0.5)
+    const projection_scale = display.projection_scale ?? 0.5
+    const [s0, s1, s2] = niced_range.map(([lo, hi]) => (hi - lo) * projection_scale)
     const planes: {
       key: string
       pos: Vec3
       rot: Vec3
-      size: [number, number]
+      size: Vec2
       color: string
     }[] = []
     if (projections.xy) {
@@ -1860,17 +1846,8 @@
   })
 
   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
+    overrides.reset()
     projection_elements_override = null
-    formulas_to_draw_override = null
     formula_filter_query = ``
   }
 
@@ -1883,18 +1860,12 @@
       next_projection[current_owner_idx] = next_projection[axis_idx]
     }
     next_projection[axis_idx] = element
-    const normalized = normalize_projection_triplet(
-      next_projection,
-      all_entry_elements,
-    )
+    const normalized = normalize_projection_triplet(next_projection, all_entry_elements)
     if (normalized) projection_elements_override = normalized
   }
 
   function apply_projection_preset(preset_elements: string[]): void {
-    const normalized = normalize_projection_triplet(
-      preset_elements,
-      all_entry_elements,
-    )
+    const normalized = normalize_projection_triplet(preset_elements, all_entry_elements)
     if (normalized) projection_elements_override = normalized
   }
 
@@ -1902,270 +1873,96 @@
     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]
+    overrides.set(`formulas_to_draw`, [...selected_formulas])
   }
 
   function select_surface_formulas(): void {
-    formulas_to_draw_override = render_domains
-      .filter((domain) => surface_formulas.has(domain.formula))
-      .map((domain) => domain.formula)
+    overrides.set(
+      `formulas_to_draw`,
+      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)
+    overrides.set(`formulas_to_draw`, [hover_info.formula, ...neighbors])
   }
 
   let png_dpi = $state(150)
   const export_basename = $derived(`chempot-${plot_elements.join(`-`)}`)
 
-  function get_view_settings(): Record<string, unknown> {
-    const view_camera_position = orbit_controls_ref?.object?.position
-    const view_camera_target = orbit_controls_ref?.target
-    return {
+  const current_view_settings = (): Record<string, unknown> =>
+    get_view_settings({
       elements: plot_elements,
       camera_projection,
       auto_rotate,
       color_mode,
       color_scale,
       reverse_color_scale,
-      camera_position: view_camera_position
-        ? [view_camera_position.x, view_camera_position.y, view_camera_position.z]
-        : null,
-      camera_target: view_camera_target
-        ? [view_camera_target.x, view_camera_target.y, view_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`)
-  }
-
-  const xml_escape = (text: string): string =>
-    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 },
-    )
-  }
-
-  const get_json_string = (): string =>
-    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,
-    )
+      camera_position: orbit_controls_ref?.object?.position ?? null,
+      camera_target: orbit_controls_ref?.target ?? null,
+    })
 
-  function export_json_file(): void {
-    download_blob(
-      new Blob([get_json_string()], { type: `application/json` }),
-      `${export_basename}.json`,
-    )
-  }
+  const export_json_payload = (): Record<string, unknown> => ({
+    elements: diagram_data?.elements ?? [],
+    domains: render_domains.map((domain) => ({
+      formula: domain.formula,
+      points_3d: domain.points_3d,
+    })),
+    lims: diagram_data?.lims ?? [],
+    view: current_view_settings(),
+  })
 
-  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)
-  }
+  const export_sections = $derived<ExportSection[]>([
+    {
+      title: `Export Image`,
+      items: [
+        {
+          label: `SVG`,
+          on_download: () =>
+            export_svg_file(wrapper, export_basename, current_view_settings()),
+        },
+        {
+          label: `PNG`,
+          show_dpi: true,
+          on_download: () => export_png_file(wrapper, export_basename, png_dpi),
+        },
+      ],
+    },
+    {
+      title: `Export Data`,
+      items: [
+        {
+          label: `JSON`,
+          on_download: () => export_json_file(export_json_payload(), export_basename),
+          copy_text: () => get_json_string(export_json_payload()),
+        },
+        {
+          label: `View`,
+          on_download: () => export_view_json_file(current_view_settings(), export_basename),
+        },
+        {
+          label: `GLB`,
+          on_download: () =>
+            export_glb_file(
+              {
+                hull_geometry: colored_hull_geometry,
+                hull_opacity: color_mode === `none` ? 0.25 : 0.4,
+                edge_geometry,
+                formula_meshes: formula_mesh_data,
+                formula_edges: draw_formula_lines ? formula_edge_data : [],
+              },
+              export_basename,
+            ),
+        },
+      ],
+    },
+  ])
 
   onDestroy(() => {
-    if (copy_timeout_id !== null) clearTimeout(copy_timeout_id)
     if (label_occlusion_frame !== null) cancelAnimationFrame(label_occlusion_frame)
   })
 
@@ -2176,10 +1973,12 @@
     const pointer = hover_info?.pointer
     if (!pointer) return { x: 4, y: 4 }
     return constrain_tooltip_position(
-      pointer.x, pointer.y,
+      pointer.x,
+      pointer.y,
       tooltip_el?.offsetWidth ?? 200,
       tooltip_el?.offsetHeight ?? 100,
-      container_width, container_height,
+      container_width,
+      container_height,
       { offset: 0 },
     )
   })
@@ -2197,12 +1996,25 @@
     hover_info = null
   }
 
+  function stop_phase_pointer_event(raw_event: unknown): void {
+    if (!raw_event || typeof raw_event !== `object`) return
+
+    const event = raw_event as { nativeEvent?: unknown; stopPropagation?: () => void }
+    event.stopPropagation?.()
+
+    const native_event = event.nativeEvent
+    if (!native_event || typeof native_event !== `object`) return
+    const native_pointer_event = native_event as { stopPropagation?: () => void }
+    native_pointer_event.stopPropagation?.()
+  }
+
   function handle_phase_hover(domain_data: HoverMeshData, raw_event: unknown): void {
     if (locked_hover_formula && locked_hover_formula !== domain_data.formula) return
     set_hover_info(domain_data, raw_event)
   }
 
   function toggle_phase_lock(domain_data: HoverMeshData, raw_event: unknown): void {
+    stop_phase_pointer_event(raw_event)
     if (locked_hover_formula === domain_data.formula) {
       clear_hover_lock()
       return
@@ -2212,25 +2024,13 @@
   }
 
   // Color mode cycling (keyboard shortcut 'c')
-  const color_modes: ChemPotColorMode[] = [
-    `none`,
-    `energy`,
-    `formation_energy`,
-    `arity`,
-    `entries`,
-  ]
+  const color_modes = CHEMPOT_COLOR_MODE_OPTIONS.map(([value]) => value)
   function cycle_color_mode(): void {
     const idx = color_modes.indexOf(color_mode)
-    color_mode_override = color_modes[(idx + 1) % color_modes.length]
+    overrides.set(`color_mode`, 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
@@ -2244,91 +2044,30 @@
   role="application"
   tabindex="0"
   onkeydown={(event) => {
-    if (
-      event.target instanceof HTMLInputElement ||
-      event.target instanceof HTMLSelectElement
-    ) return
+    if (event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement)
+      return
     if (event.key === `Escape`) clear_hover_lock()
     else if (event.key === `c`) cycle_color_mode()
-    else if (event.key === `f`) toggle_fullscreen(wrapper)
+    else if (event.key === `f` && fullscreen_toggle) toggle_fullscreen(wrapper)
   }}
   onpointerdown={(event) => {
     const target = event.target
-    if (
-      locked_hover_formula &&
-      (target === wrapper || target instanceof HTMLCanvasElement)
-    ) {
+    if (locked_hover_formula && (target === wrapper || target instanceof HTMLCanvasElement)) {
       clear_hover_lock()
     }
   }}
 >
   <section>
-    <DraggablePane
-      bind:show={export_pane_open}
-      open_icon="Cross"
-      closed_icon="Export"
+    <ExportPane
+      bind:export_pane_open
+      bind:png_dpi
+      sections={export_sections}
       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"
@@ -2341,7 +2080,7 @@
     >
       <h4 id="formula-overlays">Formula Overlays</h4>
       <div class="overlay-actions">
-        <button type="button" onclick={() => formulas_to_draw_override = []}>
+        <button type="button" onclick={() => overrides.set(`formulas_to_draw`, [])}>
           Clear
         </button>
         <button type="button" onclick={select_surface_formulas}>Surface</button>
@@ -2349,11 +2088,7 @@
       </div>
       <label class="overlay-search">
         Search:
-        <input
-          type="text"
-          placeholder="Formula filter"
-          bind:value={formula_filter_query}
-        />
+        <input type="text" placeholder="Formula filter" bind:value={formula_filter_query} />
       </label>
       <div class="formula-list">
         {#if filtered_formulas.length === 0}
@@ -2364,14 +2099,14 @@
             <label>
               <input
                 type="checkbox"
-                checked={formulas_to_draw.includes(formula)}
+                checked={formula_overlay_idx !== -1}
                 onchange={() => toggle_formula_selection(formula)}
               />
               <span
                 class="formula-color-dot"
                 style:background={formula_colors[
                   (formula_overlay_idx >= 0 ? formula_overlay_idx : formula_idx) %
-                  formula_colors.length
+                    formula_colors.length
                 ]}
               ></span>
               {get_electro_neg_formula(formula, true, ``, `.3~s`)}
@@ -2464,36 +2199,28 @@
             <input
               type="checkbox"
               checked={formal_chempots}
-              onchange={() => {
-                formal_chempots_override = !formal_chempots
-              }}
+              onchange={() => overrides.set(`formal_chempots`, !formal_chempots)}
             /> Formal
           </label>
           <label>
             <input
               type="checkbox"
               checked={label_stable}
-              onchange={() => {
-                label_stable_override = !label_stable
-              }}
+              onchange={() => overrides.set(`label_stable`, !label_stable)}
             /> Labels
           </label>
           <label>
             <input
               type="checkbox"
               checked={draw_formula_meshes}
-              onchange={() => {
-                draw_formula_meshes_override = !draw_formula_meshes
-              }}
+              onchange={() => overrides.set(`draw_formula_meshes`, !draw_formula_meshes)}
             /> Meshes
           </label>
           <label>
             <input
               type="checkbox"
               checked={draw_formula_lines}
-              onchange={() => {
-                draw_formula_lines_override = !draw_formula_lines
-              }}
+              onchange={() => overrides.set(`draw_formula_lines`, !draw_formula_lines)}
             /> Lines
           </label>
         </div>
@@ -2505,9 +2232,8 @@
               min="0"
               step="0.1"
               value={element_padding}
-              oninput={(event) => {
-                element_padding_override = Number(event.currentTarget.value)
-              }}
+              oninput={(event) =>
+                overrides.set(`element_padding`, Number(event.currentTarget.value))}
             />
           </label>
           <label>
@@ -2517,11 +2243,8 @@
               max="0"
               step="1"
               value={default_min_limit}
-              oninput={(event) => {
-                default_min_limit_override = Number(
-                  event.currentTarget.value,
-                )
-              }}
+              oninput={(event) =>
+                overrides.set(`default_min_limit`, Number(event.currentTarget.value))}
             />
           </label>
         </div>
@@ -2530,16 +2253,12 @@
           <select
             id="chempot-color-mode"
             value={color_mode}
-            onchange={(event) => {
-              color_mode_override = event.currentTarget
-                .value as ChemPotColorMode
-            }}
+            onchange={(event) =>
+              overrides.set(`color_mode`, 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>
+            {#each CHEMPOT_COLOR_MODE_OPTIONS as [value, label] (value)}
+              <option {value}>{label}</option>
+            {/each}
           </select>
         </div>
         {#if color_mode !== `none` && color_mode !== `arity`}
@@ -2548,27 +2267,18 @@
             <select
               id="chempot-color-scale"
               value={color_scale}
-              onchange={(event) => {
-                color_scale_override = event.currentTarget
-                  .value as D3InterpolateName
-              }}
+              onchange={(event) =>
+                overrides.set(`color_scale`, 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>
+              {#each CHEMPOT_COLOR_SCALE_OPTIONS as [value, label] (value)}
+                <option {value}>{label}</option>
+              {/each}
             </select>
             <label>
               <input
                 type="checkbox"
                 checked={reverse_color_scale}
-                onchange={() => {
-                  reverse_color_scale_override = !reverse_color_scale
-                }}
+                onchange={() => overrides.set(`reverse_color_scale`, !reverse_color_scale)}
               /> Rev
             </label>
           </div>
@@ -2576,321 +2286,305 @@
       </SettingsSection>
     </ScatterPlot3DControls>
 
-    <button
-      type="button"
-      onclick={() => toggle_fullscreen(wrapper)}
-      title="{fullscreen ? `Exit` : `Enter`} fullscreen"
-    >
-      <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" />
-    </button>
+    {#if fullscreen_toggle}
+      <FullscreenButton {fullscreen} toggle={fullscreen_toggle} {wrapper} />
+    {/if}
   </section>
   {#if show_temperature_slider && temperature !== undefined}
-    <TemperatureSlider
-      class="chempot-temp-slider"
-      {available_temperatures}
-      bind:temperature
-    />
+    <TemperatureSlider class="chempot-temp-slider" {available_temperatures} bind:temperature />
   {/if}
   <div class="canvas-clip">
-  {#if diagram_computing}
-    <div class="computing-state">
-      <Spinner text="Computing chemical potential domains..." style="--spinner-size: 1.2em" />
-    </div>
-  {:else if !diagram_data}
-    <div class="error-state" role="alert" aria-live="polite">
-      <p>Cannot compute chemical potential diagram.</p>
-      <p>Need at least 2 elements with elemental reference entries.</p>
-    </div>
-  {:else if mounted && typeof WebGLRenderingContext !== `undefined`}
-    <Canvas
-      createRenderer={(cvs) =>
-      new THREE.WebGLRenderer({
-        canvas: cvs,
-        alpha: true,
-        antialias: true,
-        preserveDrawingBuffer: true,
-      })}
-    >
-      <ChemPotScene3D>
-        {#if camera_projection === `orthographic`}
-          <!-- Orthographic camera matching pymatgen's projection style -->
-          <T.OrthographicCamera
-            makeDefault
-            position={camera_position}
-            zoom={orthographic_zoom}
-            near={0.1}
-            far={data_extent * 10}
-          >
-            <extras.OrbitControls
-              bind:ref={orbit_controls_ref}
-              enableRotate
-              enableZoom
-              enablePan
-              autoRotate={auto_rotate > 0}
-              autoRotateSpeed={auto_rotate}
-              target={camera_target}
-            />
-          </T.OrthographicCamera>
-        {:else}
-          <T.PerspectiveCamera
-            makeDefault
-            position={camera_position}
-            fov={50}
-            near={0.1}
-            far={data_extent * 10}
-          >
-            <extras.OrbitControls
-              bind:ref={orbit_controls_ref}
-              enableRotate
-              enableZoom
-              enablePan
-              autoRotate={auto_rotate > 0}
-              autoRotateSpeed={auto_rotate}
-              target={camera_target}
-            />
-          </T.PerspectiveCamera>
-        {/if}
+    {#if diagram_computing}
+      <div class="computing-state">
+        <Spinner
+          text="Computing chemical potential domains..."
+          style="--spinner-size: 1.2em"
+        />
+      </div>
+    {:else if !diagram_data}
+      <div class="error-state" role="alert" aria-live="polite">
+        <p>Cannot compute chemical potential diagram.</p>
+        <p>Need at least 2 elements with elemental reference entries.</p>
+      </div>
+    {:else if mounted && typeof WebGLRenderingContext !== `undefined`}
+      <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} />
+          <!-- Ambient light for visibility -->
+          <T.AmbientLight intensity={0.8} />
+          <T.DirectionalLight position={[1, 1, 1]} intensity={0.5} />
 
-        <!-- Vertex-colored hull for both plain and colored modes.
+          <!-- Vertex-colored hull for both plain and colored modes.
            {#key domain_colors} forces Threlte to re-create the mesh whenever
            colors change (covers color_mode, color_scale, and data updates),
            since on-demand rendering won't detect mutated vertex color buffers. -->
-        {#if colored_hull_geometry}
-          {#key domain_colors}
-            <T.Mesh geometry={colored_hull_geometry}>
+          {#if colored_hull_geometry}
+            {#key domain_colors}
+              <T.Mesh geometry={colored_hull_geometry}>
+                <T.MeshBasicMaterial
+                  vertexColors
+                  transparent
+                  opacity={color_mode === `none` ? 0.25 : 0.4}
+                  side={THREE.DoubleSide}
+                  polygonOffset
+                  polygonOffsetFactor={1}
+                  polygonOffsetUnits={1}
+                />
+              </T.Mesh>
+            {/key}
+          {/if}
+
+          <!-- Domain boundary edges (wireframe on top of opaque fills) -->
+          <T.LineSegments geometry={edge_geometry}>
+            <T.LineBasicMaterial color={0x333333} linewidth={1} />
+          </T.LineSegments>
+
+          <!-- Invisible pick meshes for per-phase hover tooltip -->
+          {#each hover_mesh_data as domain_hover (domain_hover.formula)}
+            <T.Mesh
+              geometry={domain_hover.geometry}
+              onpointerenter={(event: unknown) => handle_phase_hover(domain_hover, event)}
+              onpointermove={(event: unknown) => handle_phase_hover(domain_hover, event)}
+              onpointerdown={(event: unknown) => toggle_phase_lock(domain_hover, event)}
+              onpointerleave={() => {
+                if (!locked_hover_formula && hover_info?.formula === domain_hover.formula) {
+                  hover_info = null
+                }
+              }}
+            >
               <T.MeshBasicMaterial
-                vertexColors
                 transparent
-                opacity={color_mode === `none` ? 0.25 : 0.4}
+                opacity={0}
                 side={THREE.DoubleSide}
-                polygonOffset
-                polygonOffsetFactor={1}
-                polygonOffsetUnits={1}
+                depthWrite={false}
               />
             </T.Mesh>
-          {/key}
-        {/if}
+          {/each}
 
-        <!-- Domain boundary edges (wireframe on top of opaque fills) -->
-        <T.LineSegments geometry={edge_geometry}>
-          <T.LineBasicMaterial color={0x333333} linewidth={1} />
-        </T.LineSegments>
-
-        <!-- Invisible pick meshes for per-phase hover tooltip -->
-        {#each hover_mesh_data as domain_hover (domain_hover.formula)}
-          <T.Mesh
-            geometry={domain_hover.geometry}
-            onpointerenter={(event: unknown) => handle_phase_hover(domain_hover, event)}
-            onpointermove={(event: unknown) => handle_phase_hover(domain_hover, event)}
-            onpointerdown={(event: unknown) => toggle_phase_lock(domain_hover, event)}
-            onpointerleave={() => {
-              if (
-                !locked_hover_formula &&
-                hover_info?.formula === domain_hover.formula
-              ) {
-                hover_info = null
-              }
-            }}
-          >
-            <T.MeshBasicMaterial
-              transparent
-              opacity={0}
-              side={THREE.DoubleSide}
-              depthWrite={false}
-            />
-          </T.Mesh>
-        {/each}
-
-        <!-- Formula overlay meshes (semi-transparent colored fill) -->
-        {#each formula_mesh_data as { geometry, color }, mesh_idx (mesh_idx)}
-          <T.Mesh {geometry}>
-            <T.MeshBasicMaterial
-              color={new THREE.Color(color)}
-              transparent
-              opacity={0.13}
-              side={THREE.DoubleSide}
-              depthWrite={false}
-            />
-          </T.Mesh>
-        {/each}
-
-        <!-- Formula overlay edges (colored, thicker) -->
-        {#if draw_formula_lines}
-          {#each formula_edge_data as { geometry, color }, edge_idx (edge_idx)}
-            <T.LineSegments {geometry}>
-              <T.LineBasicMaterial color={new THREE.Color(color)} linewidth={2} />
-            </T.LineSegments>
+          <!-- Formula overlay meshes (semi-transparent colored fill) -->
+          {#each formula_mesh_data as { geometry, color }, mesh_idx (mesh_idx)}
+            <T.Mesh {geometry}>
+              <T.MeshBasicMaterial
+                color={new THREE.Color(color)}
+                transparent
+                opacity={0.13}
+                side={THREE.DoubleSide}
+                depthWrite={false}
+              />
+            </T.Mesh>
           {/each}
-        {/if}
 
-        {#each projection_planes as plane (`${plane.key}-${projection_opacity}`)}
-          <T.Mesh position={plane.pos} rotation={plane.rot}>
-            <T.PlaneGeometry args={plane.size} />
-            <T.MeshBasicMaterial
-              color={plane.color}
-              opacity={projection_opacity}
-              transparent
-              side={THREE.DoubleSide}
-              depthWrite={false}
-            />
-          </T.Mesh>
-        {/each}
+          <!-- Formula overlay edges (colored, thicker) -->
+          {#if draw_formula_lines}
+            {#each formula_edge_data as { geometry, color }, edge_idx (edge_idx)}
+              <T.LineSegments {geometry}>
+                <T.LineBasicMaterial color={new THREE.Color(color)} linewidth={2} />
+              </T.LineSegments>
+            {/each}
+          {/if}
 
-        {#if display.show_bounding_box}
-          <T.LineSegments geometry={bounding_box_geometry}>
-            <T.LineBasicMaterial color="#666" opacity={0.6} transparent />
-          </T.LineSegments>
-        {/if}
+          {#each projection_planes as plane (`${plane.key}-${projection_opacity}`)}
+            <T.Mesh position={plane.pos} rotation={plane.rot}>
+              <T.PlaneGeometry args={plane.size} />
+              <T.MeshBasicMaterial
+                color={plane.color}
+                opacity={projection_opacity}
+                transparent
+                side={THREE.DoubleSide}
+                depthWrite={false}
+              />
+            </T.Mesh>
+          {/each}
 
-        <!-- Axes, ticks, grid lines, and labels -->
-        {#each grid_config as gc (gc.axis)}
-          {#if display.show_axes}
-            <!-- Main axis line -->
-            <T.Line geometry={gc.line_geom}>
-              <T.LineBasicMaterial color={gc.color} linewidth={2} />
-            </T.Line>
-            <!-- Tick marks -->
-            {#each gc.tick_geoms as tick_geom, tdx (tdx)}
-              <T.Line geometry={tick_geom}>
-                <T.LineBasicMaterial color={gc.color} />
-              </T.Line>
-            {/each}
+          {#if display.show_bounding_box}
+            <T.LineSegments geometry={bounding_box_geometry}>
+              <T.LineBasicMaterial color="#666" opacity={0.6} transparent />
+            </T.LineSegments>
           {/if}
-          {#if display.show_grid}
-            <!-- Grid lines -->
-            {#each gc.grid_geoms as grid_geom, gdx (gdx)}
-              <T.Line geometry={grid_geom}>
-                <T.LineBasicMaterial color="#888" opacity={0.3} transparent />
+
+          <!-- Axes, ticks, grid lines, and labels -->
+          {#each grid_config as gc (gc.axis)}
+            {#if display.show_axes}
+              <!-- Main axis line -->
+              <T.Line geometry={gc.line_geom}>
+                <T.LineBasicMaterial color={gc.color} linewidth={2} />
               </T.Line>
-            {/each}
-          {/if}
-          {#if display.show_axis_labels}
-            <!-- Tick labels (billboarded, always face camera) -->
-            {#each gc.tick_labels as tick, tick_idx (tick_idx)}
+              <!-- Tick marks -->
+              {#each gc.tick_geoms as tick_geom, tdx (tdx)}
+                <T.Line geometry={tick_geom}>
+                  <T.LineBasicMaterial color={gc.color} />
+                </T.Line>
+              {/each}
+            {/if}
+            {#if display.show_grid}
+              <!-- Grid lines -->
+              {#each gc.grid_geoms as grid_geom, gdx (gdx)}
+                <T.Line geometry={grid_geom}>
+                  <T.LineBasicMaterial color="#888" opacity={0.3} transparent />
+                </T.Line>
+              {/each}
+            {/if}
+            {#if display.show_axis_labels}
+              <!-- Tick labels (billboarded, always face camera) -->
+              {#each gc.tick_labels as tick, tick_idx (tick_idx)}
+                <extras.HTML position={tick.pos} center portal={wrapper} zIndexRange={[1, 0]}>
+                  <span class="tick-label axis-tick-label">{tick.text}</span>
+                </extras.HTML>
+              {/each}
+              <!-- Axis label -->
               <extras.HTML
-                position={tick.pos}
+                position={gc.label_pos}
                 center
                 portal={wrapper}
                 zIndexRange={[1, 0]}
               >
-                <span class="tick-label axis-tick-label">{tick.text}</span>
+                <span class="axis-label" style:color={gc.color}>{@html gc.label}</span>
+              </extras.HTML>
+            {/if}
+          {/each}
+
+          <!-- Domain labels -->
+          {#if label_stable}
+            {#each visible_domain_labels as domain (domain.formula)}
+              <extras.HTML
+                position={domain.position}
+                center
+                portal={wrapper}
+                zIndexRange={[5, 5]}
+              >
+                <span
+                  class="domain-label"
+                  style:font-size="{(domain.label_font_size * zoom_scale).toFixed(1)}px"
+                >
+                  {#each formula_label_segments(domain.formula) as segment}
+                    <span class:formula-subscript={segment.subscript}>{segment.text}</span>
+                  {/each}
+                </span>
               </extras.HTML>
             {/each}
-            <!-- Axis label -->
-            <extras.HTML
-              position={gc.label_pos}
-              center
-              portal={wrapper}
-              zIndexRange={[1, 0]}
-            >
-              <span class="axis-label" style:color={gc.color}>{@html gc.label}</span>
-            </extras.HTML>
           {/if}
-        {/each}
-
-        <!-- Domain labels -->
-        {#if label_stable}
-          {#each visible_domain_labels as domain (domain.formula)}
-            <extras.HTML
-              position={domain.position}
-              center
-              portal={wrapper}
-              zIndexRange={[5, 5]}
-            >
-              <span
-                class="domain-label"
-                style:font-size="{(domain.label_font_size * zoom_scale).toFixed(1)}px"
-              >
-                {#each formula_label_segments(domain.formula) as segment}
-                  <span class:formula-subscript={segment.subscript}>{segment.text}</span>
-                {/each}
-              </span>
-            </extras.HTML>
+        </ChemPotScene3D>
+      </Canvas>
+      <!-- Color bar for continuous modes -->
+      {#if color_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}
-        {/if}
-      </ChemPotScene3D>
-    </Canvas>
-    <!-- Color bar for continuous modes -->
-    {#if color_mode !== `none` && color_mode !== `arity` && color_range}
-      {@const color_bar_config = get_chempot_color_bar_config(
-      color_scale,
-      reverse_color_scale,
-    )}
-      <ColorBar
-        title={color_range.label}
-        range={[color_range.min, color_range.max]}
-        color_scale_fn={color_bar_config.color_scale_fn}
-        color_scale_domain={color_bar_config.color_scale_domain}
-        wrapper_style="position: absolute; bottom: 16px; left: 1em; width: 200px; z-index: 10;"
-        bar_style="height: 12px;"
-        title_style="margin-bottom: 4px;"
-      />
-    {/if}
-    <!-- Categorical legend for arity mode -->
-    {#if color_mode === `arity`}
-      <div class="arity-legend">
-        {#each arity_legend_labels as label, idx (label)}
-          <span>
-            <span style:background={arity_colors[idx]}></span>
-            {label}
-          </span>
-        {/each}
-      </div>
-    {/if}
-  {/if}
-  {#if render_local_tooltip && show_tooltip && hover_info?.view === `3d`}
-    <aside
-      bind:this={tooltip_el}
-      class="phase-tooltip"
-      style:left="{tooltip_pos.x}px"
-      style:top="{tooltip_pos.y}px"
-    >
-      <h4>
-        {#each formula_label_segments(hover_info.formula) as segment}
-          <span class:formula-subscript={segment.subscript}>{segment.text}</span>
-        {/each}
-      </h4>
-      {#if locked_hover_formula === hover_info.formula}
-        <p>Pinned · Press Esc to unlock</p>
+        </div>
       {/if}
-      <p>
-        Vertices: {hover_info.n_vertices} · Edges: {hover_info.n_edges} · Points:
-        {hover_info.n_points}
-      </p>
-      <p>
-        Entries: {hover_info.matching_entry_count}
-        {#if hover_info.min_energy_per_atom !== null &&
-          hover_info.max_energy_per_atom !== null}
-          · E/atom: {format_num(hover_info.min_energy_per_atom, `.4~g`)}
-          to {format_num(hover_info.max_energy_per_atom, `.4~g`)} eV
+    {/if}
+    {#if render_local_tooltip && show_tooltip && hover_info?.view === `3d`}
+      <aside
+        bind:this={tooltip_el}
+        class="phase-tooltip"
+        style:left="{tooltip_pos.x}px"
+        style:top="{tooltip_pos.y}px"
+      >
+        <h4>
+          {#each formula_label_segments(hover_info.formula) as segment}
+            <span class:formula-subscript={segment.subscript}>{segment.text}</span>
+          {/each}
+        </h4>
+        {#if locked_hover_formula === hover_info.formula}
+          <p>Pinned · Press Esc to unlock</p>
         {/if}
-      </p>
-      {#if tooltip_detail_level === `detailed`}
-        <h5 id="axis-ranges">Axis ranges</h5>
-        {#each hover_info.axis_ranges as axis_range (axis_range.element)}
-          <p>
-            {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
-            {format_num(axis_range.max_val, `.4~g`)} eV
-          </p>
-        {/each}
         <p>
-          Centroid: ({
-            hover_info.ann_loc.map((value) => format_num(value, `.3~g`)).join(
-              `, `,
-            )
-          })
+          Vertices: {hover_info.n_vertices} · Edges: {hover_info.n_edges} · Points:
+          {hover_info.n_points}
+        </p>
+        <p>
+          Entries: {hover_info.matching_entry_count}
+          {#if hover_info.min_energy_per_atom !== null && hover_info.max_energy_per_atom !== null}
+            · E/atom: {format_num(hover_info.min_energy_per_atom, `.4~g`)}
+            to {format_num(hover_info.max_energy_per_atom, `.4~g`)} eV
+          {/if}
         </p>
-        {#if hover_info.touches_limits.length > 0}
-          <h5 id="touches-bounds">Touches bounds</h5>
-          <p>{hover_info.touches_limits.join(`, `)}</p>
+        {#if tooltip_detail_level === `detailed`}
+          <h5 id="axis-ranges">Axis ranges</h5>
+          {#each hover_info.axis_ranges as axis_range (axis_range.element)}
+            <p>
+              {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
+              {format_num(axis_range.max_val, `.4~g`)} eV
+            </p>
+          {/each}
+          <p>
+            Centroid: ({hover_info.ann_loc
+              .map((value) => format_num(value, `.3~g`))
+              .join(`, `)})
+          </p>
+          {#if hover_info.touches_limits.length > 0}
+            <h5 id="touches-bounds">Touches bounds</h5>
+            <p>{hover_info.touches_limits.join(`, `)}</p>
+          {/if}
         {/if}
-      {/if}
-    </aside>
-  {/if}
+      </aside>
+    {/if}
   </div>
 </div>
 
@@ -2963,23 +2657,6 @@
     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;
@@ -2996,8 +2673,10 @@
   }
   .chempot-diagram-3d :global(.projection-controls .pane-row) {
     display: grid;
-    grid-template-columns:
-      auto minmax(4.5em, 1fr) auto minmax(4.5em, 1fr) auto minmax(4.5em, 1fr);
+    grid-template-columns: auto minmax(4.5em, 1fr) auto minmax(4.5em, 1fr) auto minmax(
+        4.5em,
+        1fr
+      );
     align-items: center;
     gap: 3pt;
   }
@@ -3137,10 +2816,7 @@
   .phase-tooltip {
     position: absolute;
     max-width: min(32rem, 92vw);
-    background: var(
-      --tooltip-bg,
-      light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9))
-    );
+    background: var(--tooltip-bg, light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9)));
     color: var(--tooltip-text, var(--text-color, #222));
     border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
     border-radius: 6px;