matterviz 0.4.0 → 0.4.1

package/dist/chempot-diagram/ChemPotDiagram3D.svelte

@@ -6,9 +6,11 @@
   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 { 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,
@@ -32,15 +34,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 +101,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,54 +116,41 @@
     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,
@@ -167,11 +175,7 @@
     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 —
@@ -180,8 +184,6 @@
   $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)
@@ -797,7 +799,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])
@@ -934,7 +936,7 @@
     // 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))
@@ -974,12 +976,12 @@
       }
       // 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)
@@ -1194,7 +1196,7 @@
 
   function get_touches_limits(
     points_3d: number[][],
-    lims: [number, number][],
+    lims: Vec2[],
   ): string[] {
     const limit_tol = 1e-3
     const touches_limits: string[] = []
@@ -1486,10 +1488,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
@@ -1759,8 +1761,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(() => {
@@ -1789,7 +1795,7 @@
       key: string
       pos: Vec3
       rot: Vec3
-      size: [number, number]
+      size: Vec2
       color: string
     }[] = []
     if (projections.xy) {
@@ -1860,17 +1866,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 = ``
   }
 
@@ -1902,270 +1899,94 @@
     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)
   })
 
@@ -2212,25 +2033,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
@@ -2250,7 +2059,7 @@
     ) 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
@@ -2263,72 +2072,16 @@
   }}
 >
   <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 +2094,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>
@@ -2464,36 +2217,29 @@
             <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 +2251,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 +2262,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 +2272,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 +2286,22 @@
             <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,13 +2309,9 @@
       </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
@@ -2963,23 +2692,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;