matterviz 0.3.2 → 0.3.3

package/dist/convex-hull/ConvexHull3D.svelte

@@ -1,949 +1,1418 @@
-<script lang="ts">import { add_alpha, AXIS_COLORS, is_dark_mode, NEG_AXIS_COLORS, PLOT_COLORS, vesta_hex, watch_dark_mode, } from '../colors';
-import { normalize_show_controls } from '../controls';
-import { ClickFeedback, DragOverlay, Spinner } from '../feedback';
-import Icon from '../Icon.svelte';
-import { format_num } from '../labels';
-import { set_fullscreen_bg, setup_fullscreen_effect, toggle_fullscreen, } from '../layout';
-import { to_radians } from '../math';
-import { ColorBar, PlotTooltip } from '../plot';
-import { DEFAULTS } from '../settings';
-import { Canvas, T } from '@threlte/core';
-import * as extras from '@threlte/extras';
-import { ticks } from 'd3-array';
-import { SvelteMap } from 'svelte/reactivity';
-import { PerspectiveCamera, WebGLRenderer } from 'three';
-import { get_ternary_3d_coordinates, get_triangle_centroid, get_triangle_edges, get_triangle_vertical_edges, TRIANGLE_VERTICES, } from './barycentric-coords';
-import ConvexHullControls from './ConvexHullControls.svelte';
-import ConvexHullInfoPane from './ConvexHullInfoPane.svelte';
-import ConvexHullTooltip from './ConvexHullTooltip.svelte';
-import GasPressureControls from './GasPressureControls.svelte';
-import * as helpers from './helpers';
-import { CONVEX_HULL_STYLE, default_controls, default_hull_config } from './index';
-import StructurePopup from './StructurePopup.svelte';
-import TemperatureSlider from './TemperatureSlider.svelte';
-import * as thermo from './thermodynamics';
-let { entries = [], controls = {}, config = {}, on_point_click, on_point_hover, fullscreen = $bindable(DEFAULTS.convex_hull.ternary.fullscreen), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(), label_threshold = 50, show_stable = $bindable(DEFAULTS.convex_hull.ternary.show_stable), show_unstable = $bindable(DEFAULTS.convex_hull.ternary.show_unstable), show_hull_faces = $bindable(DEFAULTS.convex_hull.ternary.show_hull_faces), hull_face_opacity = $bindable(DEFAULTS.convex_hull.ternary.hull_face_opacity), hull_face_color_mode = $bindable(DEFAULTS.convex_hull.ternary.hull_face_color_mode), element_colors = vesta_hex, color_mode = $bindable(DEFAULTS.convex_hull.ternary.color_mode), color_scale = $bindable(DEFAULTS.convex_hull.ternary.color_scale), info_pane_open = $bindable(DEFAULTS.convex_hull.ternary.info_pane_open), legend_pane_open = $bindable(DEFAULTS.convex_hull.ternary.legend_pane_open), max_hull_dist_show_phases = $bindable(DEFAULTS.convex_hull.ternary.max_hull_dist_show_phases), max_hull_dist_show_labels = $bindable(DEFAULTS.convex_hull.ternary.max_hull_dist_show_labels), show_stable_labels = $bindable(DEFAULTS.convex_hull.ternary.show_stable_labels), show_unstable_labels = $bindable(DEFAULTS.convex_hull.ternary.show_unstable_labels), on_file_drop, enable_click_selection = true, enable_structure_preview = true, energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), stable_entries = $bindable([]), unstable_entries = $bindable([]), highlighted_entries = $bindable([]), highlight_style = {}, selected_entry = $bindable(null), temperature = $bindable(), interpolate_temperature = true, max_interpolation_gap = 500, gizmo = true, gas_config, gas_pressures = $bindable({}), children, tooltip, ...rest } = $props();
-const merged_controls = $derived({ ...default_controls, ...controls });
-const controls_config = $derived(normalize_show_controls(merged_controls.show));
-const merged_config = $derived({
+<script lang="ts">
+  import type { D3InterpolateName } from '../colors'
+  import {
+    add_alpha,
+    AXIS_COLORS,
+    is_dark_mode,
+    NEG_AXIS_COLORS,
+    PLOT_COLORS,
+    vesta_hex,
+    watch_dark_mode,
+  } from '../colors'
+  import {
+    get_formula_label_segments,
+    type FormulaLabelSegment,
+  } from '../composition/format'
+  import { normalize_show_controls } from '../controls'
+  import { sanitize_html } from '../sanitize'
+  import { ClickFeedback, DragOverlay, Spinner } from '../feedback'
+  import Icon from '../Icon.svelte'
+  import { format_num } from '../labels'
+  import {
+    set_fullscreen_bg,
+    setup_fullscreen_effect,
+    toggle_fullscreen,
+  } from '../layout'
+  import { to_radians, type Vec3 } from '../math'
+  import { ColorBar, PlotTooltip } from '../plot'
+  import {
+    centered_rect,
+    pad_rect,
+    rects_overlap,
+    rect_within_rect,
+    type Rect,
+  } from '../plot/layout'
+  import { DEFAULTS } from '../settings'
+  import type { AnyStructure } from '../structure'
+  import { Canvas, T } from '@threlte/core'
+  import * as extras from '@threlte/extras'
+  import { ticks } from 'd3-array'
+  import { PerspectiveCamera, WebGLRenderer } from 'three'
+  import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+  import {
+    get_ternary_3d_coordinates,
+    get_triangle_centroid,
+    get_triangle_edges,
+    get_triangle_vertical_edges,
+    TRIANGLE_VERTICES,
+  } from './barycentric-coords'
+  import ConvexHullControls from './ConvexHullControls.svelte'
+  import ConvexHullInfoPane from './ConvexHullInfoPane.svelte'
+  import ConvexHullTooltip from './ConvexHullTooltip.svelte'
+  import GasPressureControls from './GasPressureControls.svelte'
+  import * as helpers from './helpers'
+  import type { BaseConvexHullProps, Hull3DProps } from './index'
+  import { CONVEX_HULL_STYLE, default_controls, default_hull_config } from './index'
+  import StructurePopup from './StructurePopup.svelte'
+  import TemperatureSlider from './TemperatureSlider.svelte'
+  import * as thermo from './thermodynamics'
+  import type {
+    ConvexHullEntry,
+    ConvexHullTriangle,
+    HighlightStyle,
+    HoverData3D,
+    HullFaceColorMode,
+    LabelPlacement,
+    Point3D,
+  } from './types'
+  import { compute_hull_stability } from './helpers'
+
+  let {
+    entries = [],
+    controls = {},
+    config = {},
+    on_point_click,
+    on_point_hover,
+    fullscreen = $bindable(DEFAULTS.convex_hull.ternary.fullscreen),
+    enable_fullscreen = true,
+    enable_info_pane = true,
+    wrapper = $bindable(),
+    label_threshold = 50,
+    show_stable = $bindable(DEFAULTS.convex_hull.ternary.show_stable),
+    show_unstable = $bindable(DEFAULTS.convex_hull.ternary.show_unstable),
+    show_hull_faces = $bindable(DEFAULTS.convex_hull.ternary.show_hull_faces),
+    hull_face_opacity = $bindable(DEFAULTS.convex_hull.ternary.hull_face_opacity),
+    hull_face_color_mode = $bindable(
+      DEFAULTS.convex_hull.ternary.hull_face_color_mode as HullFaceColorMode,
+    ),
+    element_colors = vesta_hex,
+    color_mode = $bindable(DEFAULTS.convex_hull.ternary.color_mode),
+    color_scale = $bindable(
+      DEFAULTS.convex_hull.ternary.color_scale as D3InterpolateName,
+    ),
+    info_pane_open = $bindable(DEFAULTS.convex_hull.ternary.info_pane_open),
+    legend_pane_open = $bindable(DEFAULTS.convex_hull.ternary.legend_pane_open),
+    max_hull_dist_show_phases = $bindable(
+      DEFAULTS.convex_hull.ternary.max_hull_dist_show_phases,
+    ),
+    max_hull_dist_show_labels = $bindable(
+      DEFAULTS.convex_hull.ternary.max_hull_dist_show_labels,
+    ),
+    show_stable_labels = $bindable(DEFAULTS.convex_hull.ternary.show_stable_labels),
+    show_unstable_labels = $bindable(
+      DEFAULTS.convex_hull.ternary.show_unstable_labels,
+    ),
+    on_file_drop,
+    enable_click_selection = true,
+    enable_structure_preview = true,
+    energy_source_mode = $bindable(`precomputed`),
+    phase_stats = $bindable(null),
+    stable_entries = $bindable([]),
+    unstable_entries = $bindable([]),
+    highlighted_entries = $bindable([]),
+    highlight_style = {},
+    selected_entry = $bindable(null),
+    temperature = $bindable(),
+    interpolate_temperature = true,
+    max_interpolation_gap = 500,
+    gizmo = true,
+    gas_config,
+    gas_pressures = $bindable({}),
+    children,
+    tooltip,
+    ...rest
+  }: BaseConvexHullProps<ConvexHullEntry> & Hull3DProps & {
+    highlight_style?: HighlightStyle
+  } = $props()
+
+  const merged_controls = $derived({ ...default_controls, ...controls })
+  const controls_config = $derived(normalize_show_controls(merged_controls.show))
+  const merged_config = $derived({
     ...default_hull_config,
     ...config,
     colors: { ...default_hull_config.colors, ...(config.colors || {}) },
     margin: { t: 40, r: 40, b: 60, l: 60, ...(config.margin || {}) },
-});
-// Temperature-dependent free energy support
-const { has_temp_data, available_temperatures } = $derived(helpers.analyze_temperature_data(entries));
-// Initialize or reset temperature when it's undefined or no longer valid
-$effect(() => {
-    if (has_temp_data &&
-        available_temperatures.length > 0 &&
-        (temperature === undefined || !available_temperatures.includes(temperature)))
-        temperature = available_temperatures[0];
-});
-// Filter entries by temperature when in temperature mode
-const temp_filtered_entries = $derived(has_temp_data && temperature !== undefined
-    ? helpers.filter_entries_at_temperature(entries, temperature, {
+  })
+
+  // Temperature-dependent free energy support
+  const { has_temp_data, available_temperatures } = $derived(
+    helpers.analyze_temperature_data(entries),
+  )
+
+  // Initialize or reset temperature when it's undefined or no longer valid
+  $effect(() => {
+    if (
+      has_temp_data &&
+      available_temperatures.length > 0 &&
+      (temperature === undefined || !available_temperatures.includes(temperature))
+    ) temperature = available_temperatures[0]
+  })
+
+  // Filter entries by temperature when in temperature mode
+  const temp_filtered_entries = $derived(
+    has_temp_data && temperature !== undefined
+      ? helpers.filter_entries_at_temperature(entries, temperature, {
         interpolate: interpolate_temperature,
         max_interpolation_gap,
-    })
-    : entries);
-// Gas-dependent chemical potential support (corrections based on T, P)
-// Default to DEFAULT_GAS_TEMP (room temperature) when no temperature specified
-const { entries: gas_corrected_entries, analysis: gas_analysis, merged_config: merged_gas_config, } = $derived(helpers.get_gas_corrected_entries(temp_filtered_entries, gas_config, gas_pressures, temperature ?? helpers.DEFAULT_GAS_TEMP));
-let { // Compute energy mode information
-has_precomputed_e_form, has_precomputed_hull, can_compute_e_form, can_compute_hull, energy_mode, unary_refs, } = $derived(helpers.compute_energy_mode_info(gas_corrected_entries, thermo.find_lowest_energy_unary_refs, energy_source_mode));
-const effective_entries = $derived(helpers.get_effective_entries(gas_corrected_entries, energy_mode, unary_refs, thermo.compute_e_form_per_atom));
-// Process convex hull data with unified PhaseData interface using effective entries
-const pd_data = $derived(thermo.process_hull_entries(effective_entries));
-// Pre-compute polymorph stats once for O(1) tooltip lookups
-const polymorph_stats_map = $derived(helpers.compute_all_polymorph_stats(effective_entries));
-const elements = $derived.by(() => {
+      })
+      : entries,
+  )
+
+  // Gas-dependent chemical potential support (corrections based on T, P)
+  // Default to DEFAULT_GAS_TEMP (room temperature) when no temperature specified
+  const {
+    entries: gas_corrected_entries,
+    analysis: gas_analysis,
+    merged_config: merged_gas_config,
+  } = $derived(
+    helpers.get_gas_corrected_entries(
+      temp_filtered_entries,
+      gas_config,
+      gas_pressures,
+      temperature ?? helpers.DEFAULT_GAS_TEMP,
+    ),
+  )
+
+  let { // Compute energy mode information
+    has_precomputed_e_form,
+    has_precomputed_hull,
+    can_compute_e_form,
+    can_compute_hull,
+    energy_mode,
+    unary_refs,
+  } = $derived(
+    helpers.compute_energy_mode_info(
+      gas_corrected_entries,
+      thermo.find_lowest_energy_unary_refs,
+      energy_source_mode,
+    ),
+  )
+
+  const effective_entries = $derived(
+    helpers.get_effective_entries(
+      gas_corrected_entries,
+      energy_mode,
+      unary_refs,
+      thermo.compute_e_form_per_atom,
+    ),
+  )
+
+  // Process convex hull data with unified PhaseData interface using effective entries
+  const pd_data = $derived(thermo.process_hull_entries(effective_entries))
+
+  // Pre-compute polymorph stats once for O(1) tooltip lookups
+  const polymorph_stats_map = $derived(
+    helpers.compute_all_polymorph_stats(effective_entries),
+  )
+
+  const elements = $derived.by(() => {
     if (pd_data.elements.length > 3) {
-        console.error(`ConvexHull3D: Dataset contains ${pd_data.elements.length} elements, but ternary diagrams require exactly 3. Found: [${pd_data.elements.join(`, `)}]`);
-        return [];
+      console.error(
+        `ConvexHull3D: Dataset contains ${pd_data.elements.length} elements, but ternary diagrams require exactly 3. Found: [${
+          pd_data.elements.join(`, `)
+        }]`,
+      )
+      return []
     }
-    return pd_data.elements;
-});
-// 1) Raw 3D coordinates (formation-energy z), independent of hull state
-const coords_entries = $derived.by(() => {
-    if (elements.length !== 3)
-        return [];
+
+    return pd_data.elements
+  })
+
+  // 1) Raw 3D coordinates (formation-energy z), independent of hull state
+  const coords_entries = $derived.by(() => {
+    if (elements.length !== 3) return []
     try {
-        // Pass precomputed el_refs to avoid recomputing in error diagnostics
-        const coords = get_ternary_3d_coordinates(pd_data.entries, elements, pd_data.el_refs);
-        return coords;
+      // Pass precomputed el_refs to avoid recomputing in error diagnostics
+      const coords = get_ternary_3d_coordinates(
+        pd_data.entries,
+        elements,
+        pd_data.el_refs,
+      )
+      return coords
+    } catch (error) {
+      console.error(`Error computing ternary coordinates:`, error)
+      return []
     }
-    catch (error) {
-        console.error(`Error computing ternary coordinates:`, error);
-        return [];
-    }
-});
-const hull_faces = $derived.by(() => {
-    if (coords_entries.length === 0)
-        return [];
-    const points = coords_entries.map((e) => ({ x: e.x, y: e.y, z: e.z }));
+  })
+
+  // Compute lower convex hull faces (triangles) for 3D rendering (low energy hull only)
+  // Must be defined before all_enriched_entries which uses hull_model
+  const hull_faces = $derived.by((): ConvexHullTriangle[] => {
+    if (coords_entries.length === 0) return []
+    // Excluded entries don't participate in hull construction
+    const hull_entries = coords_entries.filter((e) => !e.exclude_from_hull)
+    if (hull_entries.length === 0) return []
+    const points = hull_entries.map((e) => ({ x: e.x, y: e.y, z: e.z }))
     try {
-        return thermo.compute_lower_hull_triangles(points);
+      return thermo.compute_lower_hull_triangles(points)
+    } catch (error) {
+      console.error(`Error computing convex hull:`, error)
+      return []
     }
-    catch (error) {
-        console.error(`Error computing convex hull:`, error);
-        return [];
-    }
-});
-// Cached hull model for e_above_hull queries; recompute only when faces change
-let hull_model = $derived.by(() => thermo.build_lower_hull_model(hull_faces));
-// Enrich coords with e_above_hull from cached hull model (before filtering)
-const all_enriched_entries = $derived.by(() => {
-    if (coords_entries.length === 0)
-        return [];
-    if (energy_mode !== `on-the-fly`)
-        return coords_entries;
-    const pts = coords_entries.map((e) => ({ x: e.x, y: e.y, z: e.z }));
-    const e_hulls = thermo.compute_e_above_hull_for_points(pts, hull_model);
-    return coords_entries.map((e, idx) => ({ ...e, e_above_hull: e_hulls[idx] }));
-});
-// Auto threshold: show all for few entries, use default for many, interpolate between
-const max_hull_dist_in_data = $derived(helpers.calc_max_hull_dist_in_data(all_enriched_entries));
-const auto_default_threshold = $derived(helpers.compute_auto_hull_dist_threshold(all_enriched_entries.length, max_hull_dist_in_data, DEFAULTS.convex_hull.ternary.max_hull_dist_show_phases));
-// Initialize threshold to auto value on first load
-let initialized = $state(false);
-$effect(() => {
+  })
+
+  // Cached hull model for e_above_hull queries; recompute only when faces change
+  let hull_model = $derived.by(() => thermo.build_lower_hull_model(hull_faces))
+
+  // Enrich coords with e_above_hull from cached hull model (before filtering)
+  const all_enriched_entries = $derived.by(() => {
+    if (coords_entries.length === 0) return []
+    if (energy_mode !== `on-the-fly`) return coords_entries
+    const pts = coords_entries.map((e) => ({ x: e.x, y: e.y, z: e.z }))
+    const raw_dists = thermo.compute_e_above_hull_for_points(pts, hull_model)
+    return coords_entries.map((entry, idx) => ({
+      ...entry, ...compute_hull_stability(raw_dists[idx], entry.exclude_from_hull),
+    }))
+  })
+
+  // Auto threshold: show all for few entries, use default for many, interpolate between
+  const max_hull_dist_in_data = $derived(
+    helpers.calc_max_hull_dist_in_data(all_enriched_entries),
+  )
+  const auto_default_threshold = $derived(helpers.compute_auto_hull_dist_threshold(
+    all_enriched_entries.length,
+    max_hull_dist_in_data,
+    DEFAULTS.convex_hull.ternary.max_hull_dist_show_phases,
+  ))
+
+  // Initialize threshold to auto value on first load
+  let initialized = $state(false)
+  $effect(() => {
     if (!initialized && all_enriched_entries.length > 0) {
-        initialized = true;
-        max_hull_dist_show_phases = auto_default_threshold;
+      initialized = true
+      max_hull_dist_show_phases = auto_default_threshold
     }
-});
-// Filter by threshold and compute visibility
-const plot_entries = $derived(all_enriched_entries
-    .filter((e) => (e.e_above_hull ?? 0) <= max_hull_dist_show_phases)
-    .map((e) => ({
-    ...e,
-    visible: ((e.is_stable || e.e_above_hull === 0) && show_stable) ||
-        (!(e.is_stable || e.e_above_hull === 0) && show_unstable),
-})));
-$effect(() => {
-    stable_entries = plot_entries.filter((entry) => entry.is_stable || entry.e_above_hull === 0);
-    unstable_entries = plot_entries.filter((entry) => typeof entry.e_above_hull === `number` && entry.e_above_hull > 0 &&
-        !entry.is_stable);
-});
-// Canvas rendering
-let canvas;
-let ctx = null;
-// Performance optimization
-let frame_id = 0;
-let pulse_frame_id = 0;
-const camera_default = {
+  })
+
+  // Filter by threshold and compute visibility
+  const plot_entries = $derived(
+    all_enriched_entries
+      .filter((e) => (e.e_above_hull ?? 0) <= max_hull_dist_show_phases)
+      .map((e) => ({
+        ...e,
+        visible: ((e.is_stable || e.e_above_hull === 0) && show_stable) ||
+          (!(e.is_stable || e.e_above_hull === 0) && show_unstable),
+      })),
+  )
+
+  $effect(() => {
+    stable_entries = plot_entries.filter((entry: ConvexHullEntry) =>
+      entry.is_stable || entry.e_above_hull === 0
+    )
+    unstable_entries = plot_entries.filter((entry: ConvexHullEntry) =>
+      typeof entry.e_above_hull === `number` && entry.e_above_hull > 0 &&
+      !entry.is_stable
+    )
+  })
+
+  // Canvas rendering
+  let canvas: HTMLCanvasElement
+  let ctx: CanvasRenderingContext2D | null = null
+
+  // Performance optimization
+  let frame_id = 0
+  let pulse_frame_id = 0
+
+  const camera_default = {
     elevation: DEFAULTS.convex_hull.ternary.camera_elevation,
     azimuth: DEFAULTS.convex_hull.ternary.camera_azimuth,
     zoom: DEFAULTS.convex_hull.ternary.camera_zoom,
     center_x: 0,
     center_y: -50, // Shift up to better show the formation energy funnel
-};
-let camera = $state({ ...camera_default });
-// === Gizmo state & coordinate mapping ===
-// ConvexHull3D uses Rz(azimuth) then Rx(-elevation), viewing along -z_rotated.
-// These helpers convert between that system and Three.js camera position/up.
-const GIZMO_CAM_DIST = 5;
-const MIN_ELEV_FOR_Z_AXIS = 5; // degrees — below this, z-axis ticks collapse to a point
-let gizmo_cam_ref = $state();
-let gizmo_orbit_ref = $state(undefined);
-let gizmo_active = $state(false);
-// Convert elevation/azimuth (degrees) to Three.js camera position + up vector.
-function gizmo_camera(elev_deg, azim_deg) {
-    const [elev, azim] = [to_radians(elev_deg), to_radians(azim_deg)];
+  }
+  let camera = $state({ ...camera_default })
+
+  // === Gizmo state & coordinate mapping ===
+  // ConvexHull3D uses Rz(azimuth) then Rx(-elevation), viewing along -z_rotated.
+  // These helpers convert between that system and Three.js camera position/up.
+  const GIZMO_CAM_DIST = 5
+  const MIN_ELEV_FOR_Z_AXIS = 5 // degrees — below this, z-axis ticks collapse to a point
+  let gizmo_cam_ref = $state<PerspectiveCamera>()
+  let gizmo_orbit_ref = $state<OrbitControls | undefined>(undefined)
+  let gizmo_active = $state(false)
+
+  // Convert elevation/azimuth (degrees) to Three.js camera position + up vector.
+  function gizmo_camera(
+    elev_deg: number,
+    azim_deg: number,
+  ): { position: Vec3; up: Vec3 } {
+    const [elev, azim] = [to_radians(elev_deg), to_radians(azim_deg)]
     const [se, ce, sa, ca] = [
-        Math.sin(elev),
-        Math.cos(elev),
-        Math.sin(azim),
-        Math.cos(azim),
-    ];
+      Math.sin(elev),
+      Math.cos(elev),
+      Math.sin(azim),
+      Math.cos(azim),
+    ]
     return {
-        position: [
-            -sa * se * GIZMO_CAM_DIST,
-            -ca * se * GIZMO_CAM_DIST,
-            ce * GIZMO_CAM_DIST,
-        ],
-        up: [sa * ce, ca * ce, se],
-    };
-}
-// Derived gizmo camera state, avoids recomputing in the template
-const gizmo_cam_state = $derived(gizmo_camera(camera.elevation, camera.azimuth));
-// Center camera on the triangle's visual center for a given elevation.
-// The centroid (rotation center) sits at 1/3 height while the bbox
-// center is at 1/2 height — a difference of sqrt(3)/12 in data units.
-// Scale by cos(elevation) so offset only applies in near-top-down views.
-function center_camera(elev_deg) {
-    camera.center_x = 0;
+      position: [
+        -sa * se * GIZMO_CAM_DIST,
+        -ca * se * GIZMO_CAM_DIST,
+        ce * GIZMO_CAM_DIST,
+      ],
+      up: [sa * ce, ca * ce, se],
+    }
+  }
+
+  // Derived gizmo camera state, avoids recomputing in the template
+  const gizmo_cam_state = $derived(gizmo_camera(camera.elevation, camera.azimuth))
+
+  // Center camera on the triangle's visual center for a given elevation.
+  // The centroid (rotation center) sits at 1/3 height while the bbox
+  // center is at 1/2 height — a difference of sqrt(3)/12 in data units.
+  // Scale by cos(elevation) so offset only applies in near-top-down views.
+  function center_camera(elev_deg: number): void {
+    camera.center_x = 0
     // 0.6 matches the draw_data_points() scale factor that maps data coords to canvas pixels
-    const scale = Math.min(canvas_dims.width, canvas_dims.height) * 0.6 * camera.zoom;
-    camera.center_y = Math.sqrt(3) / 12 * scale * Math.cos(to_radians(elev_deg));
-}
-// Sync: ConvexHull3D → Three.js gizmo camera (on main canvas drag)
-$effect(() => {
-    if (gizmo_active)
-        return;
-    const cam = gizmo_cam_ref;
-    if (!cam)
-        return;
-    const { position, up } = gizmo_camera(camera.elevation, camera.azimuth);
-    cam.position.set(...position);
-    cam.up.set(...up);
-    cam.lookAt(0, 0, 0);
-    gizmo_orbit_ref?.update?.();
-});
-// Sync: gizmo → ConvexHull3D (during and after gizmo animation)
-function sync_gizmo_to_camera() {
-    const cam = gizmo_cam_ref;
-    if (!cam)
-        return;
-    const { x: cx, y: cy, z: cz } = cam.position;
-    const dist = Math.sqrt(cx * cx + cy * cy + cz * cz);
-    if (dist < 1e-6)
-        return;
-    const elev_rad = Math.acos(Math.max(-1, Math.min(1, cz / dist)));
-    const sin_elev = Math.sin(elev_rad);
+    const scale = Math.min(canvas_dims.width, canvas_dims.height) * 0.6 * camera.zoom
+    camera.center_y = Math.sqrt(3) / 12 * scale * Math.cos(to_radians(elev_deg))
+  }
+
+  // Sync: ConvexHull3D → Three.js gizmo camera (on main canvas drag)
+  $effect(() => {
+    if (gizmo_active) return
+    const cam = gizmo_cam_ref
+    if (!cam) return
+    const { position, up } = gizmo_camera(camera.elevation, camera.azimuth)
+    cam.position.set(...position)
+    cam.up.set(...up)
+    cam.lookAt(0, 0, 0)
+    gizmo_orbit_ref?.update?.()
+  })
+
+  // Sync: gizmo → ConvexHull3D (during and after gizmo animation)
+  function sync_gizmo_to_camera(): void {
+    const cam = gizmo_cam_ref
+    if (!cam) return
+    const { x: cx, y: cy, z: cz } = cam.position
+    const dist = Math.sqrt(cx * cx + cy * cy + cz * cz)
+    if (dist < 1e-6) return
+    const elev_rad = Math.acos(Math.max(-1, Math.min(1, cz / dist)))
+    const sin_elev = Math.sin(elev_rad)
     const azim_deg = Math.abs(sin_elev) > 1e-6
-        ? Math.atan2(-cx / (dist * sin_elev), -cy / (dist * sin_elev)) * 180 / Math.PI
-        : 0;
-    const elev_deg = elev_rad * 180 / Math.PI;
-    camera.elevation = elev_deg;
-    camera.azimuth = azim_deg;
-    center_camera(elev_deg);
-}
-// Gizmo axis colors (constant — AXIS_COLORS/NEG_AXIS_COLORS never change)
-const gizmo_axis_options = Object.fromEntries([...AXIS_COLORS, ...NEG_AXIS_COLORS].map(([axis, color, hover_color]) => [axis, {
-        color,
-        labelColor: `#111`,
-        opacity: 0.85,
-        hover: { color: hover_color, labelColor: `#222`, opacity: 1 },
-    }]));
-// Extract placement from gizmo options (not a Threlte Gizmo prop)
-const gizmo_placement = $derived(typeof gizmo === `object` && gizmo?.placement ? gizmo.placement : `top-right`);
-// Merge constant axis options with consumer overrides (exclude our custom placement)
-const gizmo_props = $derived.by(() => {
+      ? Math.atan2(-cx / (dist * sin_elev), -cy / (dist * sin_elev)) * 180 / Math.PI
+      : 0
+    const elev_deg = elev_rad * 180 / Math.PI
+    camera.elevation = elev_deg
+    camera.azimuth = azim_deg
+    center_camera(elev_deg)
+  }
+
+  // Gizmo axis colors (constant — AXIS_COLORS/NEG_AXIS_COLORS never change)
+  const gizmo_axis_options = Object.fromEntries(
+    [...AXIS_COLORS, ...NEG_AXIS_COLORS].map((
+      [axis, color, hover_color],
+    ) => [axis, {
+      color,
+      labelColor: `#111`,
+      opacity: 0.85,
+      hover: { color: hover_color, labelColor: `#222`, opacity: 1 },
+    }]),
+  )
+
+  // Extract placement from gizmo options (not a Threlte Gizmo prop)
+  const gizmo_placement = $derived(
+    typeof gizmo === `object` && gizmo?.placement ? gizmo.placement : `top-right`,
+  )
+
+  // Merge constant axis options with consumer overrides (exclude our custom placement)
+  const gizmo_props = $derived.by(() => {
     if (typeof gizmo !== `object` || !gizmo) {
-        return { background: { enabled: false }, size: 80, ...gizmo_axis_options };
+      return { background: { enabled: false }, size: 80, ...gizmo_axis_options }
     }
-    const { placement: _, ...threlte_opts } = gizmo;
+    const { placement: _, ...threlte_opts } = gizmo
     return {
-        background: { enabled: false },
-        size: 80,
-        ...gizmo_axis_options,
-        ...threlte_opts,
-    };
-});
-// Interaction state
-let is_dragging = $state(false);
-let drag_started = $state(false);
-let last_mouse = $state({ x: 0, y: 0 });
-let hover_data = $state(null);
-let copy_feedback = $state({ visible: false, position: { x: 0, y: 0 } });
-// Drag and drop state
-let drag_over = $state(false);
-// Structure popup state
-let modal_open = $state(false);
-let selected_structure = $state(null);
-let modal_place_right = $state(true);
-// Hull face color (customizable via controls)
-let hull_face_color = $state(`#4caf50`);
-// Pulsating highlight for selected point
-let pulse_time = $state(0);
-let pulse_opacity = $derived(0.3 + 0.4 * Math.sin(pulse_time * 4));
-// Merge highlight style with defaults
-const merged_highlight_style = $derived(helpers.merge_highlight_style(highlight_style));
-// Helper to check if entry is highlighted
-const is_highlighted = (entry) => helpers.is_entry_highlighted(entry, highlighted_entries);
-$effect(() => {
-    if (!selected_entry && !highlighted_entries.length)
-        return;
+      background: { enabled: false },
+      size: 80,
+      ...gizmo_axis_options,
+      ...threlte_opts,
+    }
+  })
+
+  // Interaction state
+  let is_dragging = $state(false)
+  let drag_started = $state(false)
+  let last_mouse = $state({ x: 0, y: 0 })
+  let hover_data = $state<HoverData3D<ConvexHullEntry> | null>(null)
+  let copy_feedback = $state({ visible: false, position: { x: 0, y: 0 } })
+
+  // Drag and drop state
+  let drag_over = $state(false)
+
+  // Structure popup state
+  let modal_open = $state(false)
+  let selected_structure = $state<AnyStructure | null>(null)
+  let modal_place_right = $state(true)
+
+  // Hull face color (customizable via controls)
+  let hull_face_color = $state(`#4caf50`)
+
+  // Pulsating highlight for selected point
+  let pulse_time = $state(0)
+  let pulse_opacity = $derived(0.3 + 0.4 * Math.sin(pulse_time * 4))
+
+  // Merge highlight style with defaults
+  const merged_highlight_style = $derived(
+    helpers.merge_highlight_style(highlight_style),
+  )
+
+  // Helper to check if entry is highlighted
+  const is_highlighted = (entry: ConvexHullEntry): boolean =>
+    helpers.is_entry_highlighted(entry, highlighted_entries)
+
+  $effect(() => {
+    if (!selected_entry && !highlighted_entries.length) return
     const animate = () => {
-        pulse_time += 0.02;
-        render_once();
-        pulse_frame_id = requestAnimationFrame(animate);
-    };
-    pulse_frame_id = requestAnimationFrame(animate);
+      pulse_time += 0.02
+      render_once()
+      pulse_frame_id = requestAnimationFrame(animate)
+    }
+    pulse_frame_id = requestAnimationFrame(animate)
     return () => {
-        if (pulse_frame_id)
-            cancelAnimationFrame(pulse_frame_id);
-    };
-});
-// Re-render when important state changes
-$effect(() => {
-    // deno-fmt-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    [show_hull_faces, color_mode, color_scale, show_stable_labels, show_unstable_labels, max_hull_dist_show_labels, camera.elevation, camera.azimuth, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_face_color, hull_face_opacity, hull_face_color_mode, element_colors, highlighted_entries, text_color];
-    render_once();
-});
-// Function to extract structure data from a convex hull entry
-function extract_structure_from_entry(entry) {
-    const orig_entry = entries.find((ent) => ent.entry_id === entry.entry_id);
-    return orig_entry?.structure || null;
-}
-const reset_camera = () => Object.assign(camera, camera_default);
-function reset_all() {
-    reset_camera();
-    fullscreen = DEFAULTS.convex_hull.ternary.fullscreen;
-    info_pane_open = DEFAULTS.convex_hull.ternary.info_pane_open;
-    legend_pane_open = DEFAULTS.convex_hull.ternary.legend_pane_open;
-    color_mode = DEFAULTS.convex_hull.ternary.color_mode;
-    color_scale = DEFAULTS.convex_hull.ternary.color_scale;
-    show_stable = DEFAULTS.convex_hull.ternary.show_stable;
-    show_unstable = DEFAULTS.convex_hull.ternary.show_unstable;
-    show_stable_labels = DEFAULTS.convex_hull.ternary.show_stable_labels;
-    show_unstable_labels = DEFAULTS.convex_hull.ternary.show_unstable_labels;
-    max_hull_dist_show_labels = DEFAULTS.convex_hull.ternary.max_hull_dist_show_labels;
+      if (pulse_frame_id) cancelAnimationFrame(pulse_frame_id)
+    }
+  })
+
+  // Re-render when important state changes
+  $effect(() => {
+    // oxfmt-ignore
+    void [show_hull_faces, color_mode, color_scale, show_stable_labels, show_unstable_labels, max_hull_dist_show_labels, camera.elevation, camera.azimuth, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_face_color, hull_face_opacity, hull_face_color_mode, element_colors, highlighted_entries, text_color] // track reactively
+
+    render_once()
+  })
+
+  // Function to extract structure data from a convex hull entry
+  function extract_structure_from_entry(
+    entry: ConvexHullEntry,
+  ): AnyStructure | null {
+    const orig_entry = entries.find((ent) => ent.entry_id === entry.entry_id)
+    return orig_entry?.structure as AnyStructure || null
+  }
+
+  const reset_camera = () => Object.assign(camera, camera_default)
+  function reset_all() {
+    reset_camera()
+    fullscreen = DEFAULTS.convex_hull.ternary.fullscreen
+    info_pane_open = DEFAULTS.convex_hull.ternary.info_pane_open
+    legend_pane_open = DEFAULTS.convex_hull.ternary.legend_pane_open
+    color_mode = DEFAULTS.convex_hull.ternary.color_mode
+    color_scale = DEFAULTS.convex_hull.ternary.color_scale as D3InterpolateName
+    show_stable = DEFAULTS.convex_hull.ternary.show_stable
+    show_unstable = DEFAULTS.convex_hull.ternary.show_unstable
+    show_stable_labels = DEFAULTS.convex_hull.ternary.show_stable_labels
+    show_unstable_labels = DEFAULTS.convex_hull.ternary.show_unstable_labels
+    max_hull_dist_show_labels = DEFAULTS.convex_hull.ternary.max_hull_dist_show_labels
     // Use auto-computed threshold based on entry count instead of static default
-    max_hull_dist_show_phases = auto_default_threshold;
-    show_hull_faces = DEFAULTS.convex_hull.ternary.show_hull_faces;
-    hull_face_color = DEFAULTS.convex_hull.ternary.hull_face_color;
-    hull_face_opacity = DEFAULTS.convex_hull.ternary.hull_face_opacity;
+    max_hull_dist_show_phases = auto_default_threshold
+    show_hull_faces = DEFAULTS.convex_hull.ternary.show_hull_faces
+    hull_face_color = DEFAULTS.convex_hull.ternary.hull_face_color
+    hull_face_opacity = DEFAULTS.convex_hull.ternary.hull_face_opacity
     hull_face_color_mode = DEFAULTS.convex_hull.ternary
-        .hull_face_color_mode;
-}
-const handle_keydown = (event) => {
-    const target = event.target;
-    if (target.tagName.match(/INPUT|TEXTAREA/))
-        return;
+      .hull_face_color_mode as HullFaceColorMode
+  }
+
+  const handle_keydown = (event: KeyboardEvent) => {
+    const target = event.target as HTMLElement
+    if (target.tagName.match(/INPUT|TEXTAREA/)) return
+
     // Stop propagation if event came from canvas to prevent wrapper's handler
     // from running again (both have onkeydown, causing duplicate handling)
     if (target === canvas) {
-        event.stopPropagation();
+      event.stopPropagation()
     }
+
     if (event.key === `Escape` && modal_open) {
-        close_structure_popup();
-        return;
+      close_structure_popup()
+      return
     }
+
     // Handle Enter for keyboard accessibility - select hovered entry
     if (event.key === `Enter`) {
-        const entry = hover_data?.entry;
-        if (entry) {
-            on_point_click?.(entry);
-            if (enable_click_selection) {
-                selected_entry = entry;
-                if (enable_structure_preview) {
-                    const structure = extract_structure_from_entry(entry);
-                    if (structure) {
-                        selected_structure = structure;
-                        modal_place_right = helpers.calculate_modal_side(wrapper);
-                        modal_open = true;
-                    }
-                }
+      const entry = hover_data?.entry
+      if (entry) {
+        on_point_click?.(entry)
+        if (enable_click_selection) {
+          selected_entry = entry
+          if (enable_structure_preview) {
+            const structure = extract_structure_from_entry(entry)
+            if (structure) {
+              selected_structure = structure
+              modal_place_right = helpers.calculate_modal_side(wrapper)
+              modal_open = true
             }
+          }
         }
-        else if (modal_open) {
-            close_structure_popup();
-        }
-        return;
+      } else if (modal_open) {
+        close_structure_popup()
+      }
+      return
+    }
+
+    const actions: Record<string, () => void> = {
+      r: reset_camera,
+      t: () => {
+        camera.elevation = 0
+        camera.azimuth = 0
+        center_camera(0)
+      },
+      b: () => color_mode = color_mode === `stability` ? `energy` : `stability`,
+      s: () => show_stable = !show_stable,
+      u: () => show_unstable = !show_unstable,
+      h: () => show_hull_faces = !show_hull_faces,
+      l: () => show_stable_labels = !show_stable_labels,
     }
-    const actions = {
-        r: reset_camera,
-        t: () => {
-            camera.elevation = 0;
-            camera.azimuth = 0;
-            center_camera(0);
-        },
-        b: () => color_mode = color_mode === `stability` ? `energy` : `stability`,
-        s: () => show_stable = !show_stable,
-        u: () => show_unstable = !show_unstable,
-        h: () => show_hull_faces = !show_hull_faces,
-        l: () => show_stable_labels = !show_stable_labels,
-    };
-    actions[event.key.toLowerCase()]?.();
-};
-async function handle_file_drop(event) {
-    drag_over = false;
-    const data = await helpers.parse_hull_entries_from_drop(event);
-    if (data)
-        on_file_drop?.(data);
-}
-async function copy_entry_data(entry, position) {
+    actions[event.key.toLowerCase()]?.()
+  }
+
+  async function handle_file_drop(event: DragEvent): Promise<void> {
+    drag_over = false
+    const data = await helpers.parse_hull_entries_from_drop(event)
+    if (data) on_file_drop?.(data)
+  }
+
+  async function copy_entry_data(
+    entry: ConvexHullEntry,
+    position: { x: number; y: number },
+  ) {
     await helpers.copy_entry_to_clipboard(entry, position, (visible, pos) => {
-        copy_feedback.visible = visible;
-        copy_feedback.position = pos;
-    });
-}
-const get_point_color = (entry) => helpers.get_point_color_for_entry(entry, color_mode, merged_config.colors, energy_color_scale);
-// Cache energy color scale per frame/setting
-const energy_color_scale = $derived.by(() => helpers.get_energy_color_scale(color_mode, color_scale, plot_entries));
-// Convex hull statistics - compute internally and expose via bindable prop
-$effect(() => {
-    phase_stats = thermo.get_convex_hull_stats(plot_entries, elements, 3);
-});
-// 3D to 2D projection for ternary diagrams
-function project_3d_point(x, y, z) {
-    if (!canvas)
-        return { x: 0, y: 0, depth: 0 };
+      copy_feedback.visible = visible
+      copy_feedback.position = pos
+    })
+  }
+
+  const get_point_color = (entry: ConvexHullEntry): string =>
+    helpers.get_point_color_for_entry(
+      entry,
+      color_mode,
+      merged_config.colors,
+      energy_color_scale,
+    )
+
+  // Cache energy color scale per frame/setting
+  const energy_color_scale = $derived.by(() =>
+    helpers.get_energy_color_scale(color_mode, color_scale, plot_entries)
+  )
+
+  // Convex hull statistics - compute internally and expose via bindable prop
+  $effect(() => {
+    phase_stats = thermo.get_convex_hull_stats(plot_entries, elements, 3)
+  })
+
+  // 3D to 2D projection for ternary diagrams
+  function project_3d_point(
+    x: number,
+    y: number,
+    z: number,
+  ): { x: number; y: number; depth: number } {
+    if (!canvas) return { x: 0, y: 0, depth: 0 }
+
     const [elev, azim] = [
-        (camera.elevation * Math.PI) / 180,
-        (camera.azimuth * Math.PI) / 180,
-    ];
+      (camera.elevation * Math.PI) / 180,
+      (camera.azimuth * Math.PI) / 180,
+    ]
     const [cos_az, sin_az, cos_el, sin_el] = [
-        Math.cos(azim),
-        Math.sin(azim),
-        Math.cos(-elev),
-        Math.sin(-elev),
-    ];
-    const centroid = get_triangle_centroid();
-    const { center: e_ctr, z_scale } = energy_range;
-    const [dx, dy, dz] = [x - centroid.x, y - centroid.y, (z - e_ctr) * z_scale];
-    const [x1, y1] = [dx * cos_az - dy * sin_az, dx * sin_az + dy * cos_az];
-    const [y2, z2] = [y1 * cos_el - dz * sin_el, y1 * sin_el + dz * cos_el];
+      Math.cos(azim),
+      Math.sin(azim),
+      Math.cos(-elev),
+      Math.sin(-elev),
+    ]
+    const centroid = get_triangle_centroid()
+    const { center: e_ctr, z_scale } = energy_range
+
+    const [dx, dy, dz] = [x - centroid.x, y - centroid.y, (z - e_ctr) * z_scale]
+    const [x1, y1] = [dx * cos_az - dy * sin_az, dx * sin_az + dy * cos_az]
+    const [y2, z2] = [y1 * cos_el - dz * sin_el, y1 * sin_el + dz * cos_el]
+
     // Use Math.min for consistent scaling with cached canvas dimensions
-    const scale = Math.min(canvas_dims.width, canvas_dims.height) * 0.6 * camera.zoom;
+    const scale = Math.min(canvas_dims.width, canvas_dims.height) * 0.6 * camera.zoom
     return {
-        x: canvas_dims.width / 2 + camera.center_x + x1 * scale,
-        y: canvas_dims.height / 2 + camera.center_y - y2 * scale,
-        depth: z2,
-    };
-}
-function draw_structure_outline() {
-    if (!ctx)
-        return;
+      x: canvas_dims.width / 2 + camera.center_x + x1 * scale,
+      y: canvas_dims.height / 2 + camera.center_y - y2 * scale,
+      depth: z2,
+    }
+  }
+
+  function draw_structure_outline(): void {
+    if (!ctx) return
+
     // Set consistent style for all triangle structure lines
-    ctx.strokeStyle = CONVEX_HULL_STYLE.structure_line.color;
-    ctx.lineWidth = CONVEX_HULL_STYLE.structure_line.line_width;
-    ctx.setLineDash(CONVEX_HULL_STYLE.structure_line.dash); // Dashed lines for all structure lines
+    ctx.strokeStyle = CONVEX_HULL_STYLE.structure_line.color
+    ctx.lineWidth = CONVEX_HULL_STYLE.structure_line.line_width
+    ctx.setLineDash(CONVEX_HULL_STYLE.structure_line.dash) // Dashed lines for all structure lines
+
     // Draw triangle base and vertical edges
-    draw_triangle_structure();
-}
-function draw_triangle_structure() {
-    if (!ctx)
-        return;
+    draw_triangle_structure()
+  }
+
+  function draw_triangle_structure(): void {
+    if (!ctx) return
+
     // Get formation energy range for vertical edges
-    const formation_energies = plot_entries.map((e) => e.e_form_per_atom ?? 0);
-    const e_form_min = Math.min(0, ...formation_energies); // Include 0 for elemental references
-    const e_form_max = Math.max(0, ...formation_energies); // Include 0 for elemental references
+    const formation_energies = plot_entries.map((e) => e.e_form_per_atom ?? 0)
+    const e_form_min = Math.min(0, ...formation_energies) // Include 0 for elemental references
+    const e_form_max = Math.max(0, ...formation_energies) // Include 0 for elemental references
+
     // Draw base triangle edges (top triangle at formation energy = 0)
-    const triangle_edges = get_triangle_edges();
-    ctx.beginPath();
+    const triangle_edges = get_triangle_edges()
+    ctx.beginPath()
     for (const [v1, v2] of triangle_edges) {
-        const proj1 = project_3d_point(v1.x, v1.y, 0); // Base triangle at formation energy = 0
-        const proj2 = project_3d_point(v2.x, v2.y, 0);
-        ctx.moveTo(proj1.x, proj1.y);
-        ctx.lineTo(proj2.x, proj2.y);
+      const proj1 = project_3d_point(v1.x, v1.y, 0) // Base triangle at formation energy = 0
+      const proj2 = project_3d_point(v2.x, v2.y, 0)
+
+      ctx.moveTo(proj1.x, proj1.y)
+      ctx.lineTo(proj2.x, proj2.y)
     }
-    ctx.stroke();
+    ctx.stroke()
+
     // Draw vertical edges from corners (from most negative to 0 formation energy)
-    const vertical_edges = get_triangle_vertical_edges(e_form_min, e_form_max);
-    ctx.beginPath();
+    const vertical_edges = get_triangle_vertical_edges(
+      e_form_min,
+      e_form_max,
+    )
+    ctx.beginPath()
     for (const [v1, v2] of vertical_edges) {
-        const proj1 = project_3d_point(v1.x, v1.y, v1.z);
-        const proj2 = project_3d_point(v2.x, v2.y, v2.z);
-        ctx.moveTo(proj1.x, proj1.y);
-        ctx.lineTo(proj2.x, proj2.y);
+      const proj1 = project_3d_point(v1.x, v1.y, v1.z)
+      const proj2 = project_3d_point(v2.x, v2.y, v2.z)
+
+      ctx.moveTo(proj1.x, proj1.y)
+      ctx.lineTo(proj2.x, proj2.y)
     }
-    ctx.stroke();
+    ctx.stroke()
+
     // Draw bottom triangle (connecting the bottom tips of vertical lines)
-    const bottom_triangle_edges = get_triangle_edges();
-    ctx.beginPath();
+    const bottom_triangle_edges = get_triangle_edges()
+    ctx.beginPath()
     for (const [v1, v2] of bottom_triangle_edges) {
-        const proj1 = project_3d_point(v1.x, v1.y, e_form_min); // Bottom triangle at most negative energy
-        const proj2 = project_3d_point(v2.x, v2.y, e_form_min);
-        ctx.moveTo(proj1.x, proj1.y);
-        ctx.lineTo(proj2.x, proj2.y);
+      const proj1 = project_3d_point(v1.x, v1.y, e_form_min) // Bottom triangle at most negative energy
+      const proj2 = project_3d_point(v2.x, v2.y, e_form_min)
+
+      ctx.moveTo(proj1.x, proj1.y)
+      ctx.lineTo(proj2.x, proj2.y)
     }
-    ctx.stroke();
+    ctx.stroke()
+
     // Reset stroke style to default for other elements
-    const styles = getComputedStyle(canvas);
-    ctx.strokeStyle = styles.getPropertyValue(`--hull-edge-color`) || `#212121`;
-    ctx.setLineDash([]); // Reset line dash for other drawing operations
-}
-function draw_element_labels() {
-    if (!ctx || elements.length !== 3)
-        return;
-    ctx.save();
+    const styles = getComputedStyle(canvas)
+    ctx.strokeStyle = styles.getPropertyValue(`--hull-edge-color`) || `#212121`
+    ctx.setLineDash([]) // Reset line dash for other drawing operations
+  }
+
+  function draw_element_labels(): void {
+    if (!ctx || elements.length !== 3) return
+
+    ctx.save()
+
     // Draw element labels outside triangle corners
-    const centroid = get_triangle_centroid();
-    ctx.fillStyle = text_color;
-    ctx.font = `bold 16px Arial`;
-    ctx.textAlign = `center`;
-    ctx.textBaseline = `middle`;
-    for (let idx = 0; idx < TRIANGLE_VERTICES.length && idx < elements.length; idx++) {
-        const [x, y] = TRIANGLE_VERTICES[idx];
-        const dx = x - centroid.x;
-        const dy = y - centroid.y;
-        const length = Math.sqrt(dx * dx + dy * dy);
-        const distance = 0.05;
-        const label_pos = {
-            x: x + (dx / length) * distance,
-            y: y + (dy / length) * distance,
-            z: 0,
-        };
-        const proj = project_3d_point(label_pos.x, label_pos.y, label_pos.z);
-        ctx.fillText(elements[idx], proj.x, proj.y);
+    const centroid = get_triangle_centroid()
+    ctx.fillStyle = text_color
+    ctx.font = `bold 16px Arial`
+    ctx.textAlign = `center`
+    ctx.textBaseline = `middle`
+
+    for (
+      let idx = 0;
+      idx < TRIANGLE_VERTICES.length && idx < elements.length;
+      idx++
+    ) {
+      const [x, y] = TRIANGLE_VERTICES[idx]
+      const dx = x - centroid.x
+      const dy = y - centroid.y
+      const length = Math.sqrt(dx * dx + dy * dy)
+      const distance = 0.05
+
+      const label_pos = {
+        x: x + (dx / length) * distance,
+        y: y + (dy / length) * distance,
+        z: 0,
+      }
+
+      const proj = project_3d_point(label_pos.x, label_pos.y, label_pos.z)
+      ctx.fillText(elements[idx], proj.x, proj.y)
     }
-    ctx.restore();
-}
-function draw_z_axis_ticks() {
-    if (!ctx || elements.length !== 3)
-        return;
+
+    ctx.restore()
+  }
+
+  function draw_z_axis_ticks(): void {
+    if (!ctx || elements.length !== 3) return
     // Hide z-axis in near-top-down views where ticks collapse to a point
-    if (Math.abs(camera.elevation) < MIN_ELEV_FOR_Z_AXIS)
-        return;
-    const { min: e_min, max: e_max, center: e_mid } = energy_range;
-    if (Math.abs(e_max - e_min) < 1e-6)
-        return;
+    if (Math.abs(camera.elevation) < MIN_ELEV_FOR_Z_AXIS) return
+
+    const { min: e_min, max: e_max, center: e_mid } = energy_range
+    if (Math.abs(e_max - e_min) < 1e-6) return
+
     // Find the vertex that projects to the leftmost x-position (changes with rotation)
-    const projected_vertices = TRIANGLE_VERTICES.map(([vx, vy]) => project_3d_point(vx, vy, e_mid));
-    const leftmost_idx = projected_vertices.reduce((min_idx, proj, idx) => (proj.x < projected_vertices[min_idx].x ? idx : min_idx), 0);
-    const [axis_x, axis_y] = TRIANGLE_VERTICES[leftmost_idx];
-    const tick_len = 6 * canvas_dims.scale;
-    ctx.save();
-    ctx.fillStyle = text_color;
-    ctx.textAlign = `right`;
-    ctx.textBaseline = `middle`;
-    ctx.strokeStyle = CONVEX_HULL_STYLE.structure_line.color;
-    ctx.font = `${merged_config.font_size}px Arial`;
+    const projected_vertices = TRIANGLE_VERTICES.map(([vx, vy]) =>
+      project_3d_point(vx, vy, e_mid)
+    )
+    const leftmost_idx = projected_vertices.reduce(
+      (
+        min_idx,
+        proj,
+        idx,
+      ) => (proj.x < projected_vertices[min_idx].x ? idx : min_idx),
+      0,
+    )
+    const [axis_x, axis_y] = TRIANGLE_VERTICES[leftmost_idx]
+    const tick_len = 6 * canvas_dims.scale
+
+    ctx.save()
+    ctx.fillStyle = text_color
+    ctx.textAlign = `right`
+    ctx.textBaseline = `middle`
+    ctx.strokeStyle = CONVEX_HULL_STYLE.structure_line.color
+    ctx.font = `${merged_config.font_size}px Arial`
+
     for (const tick of ticks(e_min, e_max, 5)) {
-        const { x, y } = project_3d_point(axis_x, axis_y, tick);
-        ctx.beginPath();
-        ctx.moveTo(x - tick_len, y);
-        ctx.lineTo(x, y);
-        ctx.stroke();
-        ctx.fillText(format_num(tick, `.2~`), x - tick_len - 4, y);
+      const { x, y } = project_3d_point(axis_x, axis_y, tick)
+      ctx.beginPath()
+      ctx.moveTo(x - tick_len, y)
+      ctx.lineTo(x, y)
+      ctx.stroke()
+      ctx.fillText(format_num(tick, `.2~`), x - tick_len - 4, y)
     }
+
     // Rotated axis label: Eform (eV/atom) with "form" as subscript
-    const { x: lx, y: ly } = project_3d_point(axis_x, axis_y, e_mid);
-    const fs = merged_config.font_size ?? 12;
-    const sub_fs = Math.round(fs * 0.75);
-    ctx.translate(lx - 50 * canvas_dims.scale, ly);
-    ctx.rotate(-Math.PI / 2);
-    ctx.textAlign = `left`;
+    const { x: lx, y: ly } = project_3d_point(axis_x, axis_y, e_mid)
+    const fs = merged_config.font_size ?? 12
+    const sub_fs = Math.round(fs * 0.75)
+    ctx.translate(lx - 50 * canvas_dims.scale, ly)
+    ctx.rotate(-Math.PI / 2)
+    ctx.textAlign = `left`
     // Measure widths in each font, then draw — reordered to minimize font switches
-    ctx.font = `bold ${fs}px Arial`;
-    const e_width = ctx.measureText(`E`).width;
-    const suffix_width = ctx.measureText(` (eV/atom)`).width;
-    ctx.font = `${sub_fs}px Arial`;
-    const form_width = ctx.measureText(`form`).width;
-    const offset = -(e_width + form_width + suffix_width) / 2;
+    ctx.font = `bold ${fs}px Arial`
+    const e_width = ctx.measureText(`E`).width
+    const suffix_width = ctx.measureText(` (eV/atom)`).width
+    ctx.font = `${sub_fs}px Arial`
+    const form_width = ctx.measureText(`form`).width
+    const offset = -(e_width + form_width + suffix_width) / 2
     // Draw subscript while sub-font is still active
-    ctx.fillText(`form`, offset + e_width, fs * 0.3);
-    ctx.font = `bold ${fs}px Arial`;
-    ctx.fillText(`E`, offset, 0);
-    ctx.fillText(` (eV/atom)`, offset + e_width + form_width, 0);
-    ctx.restore();
-}
-function draw_convex_hull_faces() {
-    if (!ctx || !show_hull_faces || hull_faces.length === 0)
-        return;
+    ctx.fillText(`form`, offset + e_width, fs * 0.3)
+    ctx.font = `bold ${fs}px Arial`
+    ctx.fillText(`E`, offset, 0)
+    ctx.fillText(` (eV/atom)`, offset + e_width + form_width, 0)
+    ctx.restore()
+  }
+
+  function draw_convex_hull_faces(): void {
+    if (!ctx || !show_hull_faces || hull_faces.length === 0) return
+
     // Lazy computation for uniform mode: normalize alpha by formation energy
-    let norm_alpha = null;
+    let norm_alpha: ((z: number) => number) | null = null
     if (hull_face_color_mode === `uniform`) {
-        const formation_energies = plot_entries.map((e) => e.e_form_per_atom ?? 0);
-        const min_fe = Math.min(0, ...formation_energies);
-        norm_alpha = (z) => {
-            const t = Math.max(0, Math.min(1, (0 - z) / Math.max(1e-6, 0 - min_fe)));
-            return t * hull_face_opacity;
-        };
+      const formation_energies = plot_entries.map((e) => e.e_form_per_atom ?? 0)
+      const min_fe = Math.min(0, ...formation_energies)
+      norm_alpha = (z: number) => {
+        const t = Math.max(0, Math.min(1, (0 - z) / Math.max(1e-6, 0 - min_fe)))
+        return t * hull_face_opacity
+      }
     }
+
     // Lazy computation for formation_energy mode
-    let energy_face_scale = null;
-    let min_z = 0;
+    let energy_face_scale: ((val: number) => string) | null = null
+    let min_z = 0
     if (hull_face_color_mode === `formation_energy`) {
-        const all_z = hull_faces.flatMap((tri) => tri.vertices.map((v) => v.z));
-        min_z = Math.min(...all_z);
-        energy_face_scale = helpers.get_energy_color_scale(`energy`, color_scale, all_z.map((z) => ({ e_above_hull: z - min_z })));
+      const all_z = hull_faces.flatMap((tri) => tri.vertices.map((v) => v.z))
+      min_z = Math.min(...all_z)
+      energy_face_scale = helpers.get_energy_color_scale(
+        `energy`,
+        color_scale,
+        all_z.map((z) => ({ e_above_hull: z - min_z })), // Normalize to 0-based
+      )
     }
+
     // Helper to get face color based on mode
-    const get_face_color = (tri, tri_idx) => {
-        if (hull_face_color_mode === `uniform`) {
-            return hull_face_color;
-        }
-        if (hull_face_color_mode === `formation_energy`) {
-            const avg_z = (tri.vertices[0].z + tri.vertices[1].z + tri.vertices[2].z) / 3;
-            return energy_face_scale(avg_z - min_z);
-        }
-        if (hull_face_color_mode === `dominant_element`) {
-            // Find element vertex closest to face centroid in 2D ternary space
-            const { x: cx, y: cy } = tri.centroid;
-            const dists = TRIANGLE_VERTICES.map(([tx, ty]) => Math.hypot(cx - tx, cy - ty));
-            const el = elements[dists.indexOf(Math.min(...dists))];
-            return element_colors[el] ?? `#888888`;
-        }
-        if (hull_face_color_mode === `facet_index`) {
-            return PLOT_COLORS[tri_idx % PLOT_COLORS.length];
-        }
-        return hull_face_color;
-    };
+    const get_face_color = (
+      tri: typeof hull_faces[0],
+      tri_idx: number,
+    ): string => {
+      if (hull_face_color_mode === `uniform`) {
+        return hull_face_color
+      }
+      if (hull_face_color_mode === `formation_energy`) {
+        const avg_z = (tri.vertices[0].z + tri.vertices[1].z + tri.vertices[2].z) / 3
+        return energy_face_scale?.(avg_z - min_z) ?? hull_face_color
+      }
+      if (hull_face_color_mode === `dominant_element`) {
+        // Find element vertex closest to face centroid in 2D ternary space
+        const { x: cx, y: cy } = tri.centroid
+        const dists = TRIANGLE_VERTICES.map(([tx, ty]) =>
+          Math.hypot(cx - tx, cy - ty)
+        )
+        const el = elements[dists.indexOf(Math.min(...dists))]
+        return element_colors[el] ?? `#888888`
+      }
+      if (hull_face_color_mode === `facet_index`) {
+        return PLOT_COLORS[tri_idx % PLOT_COLORS.length]
+      }
+      return hull_face_color
+    }
+
     // Sort faces by depth for proper rendering
     const faces_with_depth = hull_faces.map((tri, tri_idx) => {
-        const centroid_proj = project_3d_point(tri.centroid.x, tri.centroid.y, tri.centroid.z);
-        return { tri, tri_idx, depth: centroid_proj.depth };
-    });
-    faces_with_depth.sort((a, b) => a.depth - b.depth); // Back to front
+      const centroid_proj = project_3d_point(
+        tri.centroid.x,
+        tri.centroid.y,
+        tri.centroid.z,
+      )
+      return { tri, tri_idx, depth: centroid_proj.depth }
+    })
+
+    faces_with_depth.sort((a, b) => a.depth - b.depth) // Back to front
+
     // Draw each face (lower hull only)
     for (const { tri, tri_idx } of faces_with_depth) {
-        const [p1, p2, p3] = tri.vertices;
-        const proj1 = project_3d_point(p1.x, p1.y, p1.z);
-        const proj2 = project_3d_point(p2.x, p2.y, p2.z);
-        const proj3 = project_3d_point(p3.x, p3.y, p3.z);
-        const face_color = get_face_color(tri, tri_idx);
-        // For uniform mode, use gradient with variable opacity
-        // For other modes, use fixed opacity
-        if (hull_face_color_mode === `uniform`) {
-            // Build per-face linear gradient in screen space matching linear variation of formation energy
-            const a1 = norm_alpha(p1.z);
-            const a2 = norm_alpha(p2.z);
-            const a3 = norm_alpha(p3.z);
-            // Solve a*x + b*y + c = alpha at the three projected vertices
-            const x1 = proj1.x, y1 = proj1.y;
-            const x2 = proj2.x, y2 = proj2.y;
-            const x3 = proj3.x, y3 = proj3.y;
-            const det = x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2);
-            let coef_a = 0, coef_b = 0, coef_c = (a1 + a2 + a3) / 3;
-            if (Math.abs(det) > 1e-9) {
-                coef_a = (a1 * (y2 - y3) + a2 * (y3 - y1) + a3 * (y1 - y2)) / det;
-                coef_b = (a1 * (x3 - x2) + a2 * (x1 - x3) + a3 * (x2 - x1)) / det;
-                coef_c = (a1 * (x2 * y3 - x3 * y2) + a2 * (x3 * y1 - x1 * y3) +
-                    a3 * (x1 * y2 - x2 * y1)) /
-                    det;
-            }
-            // Helper to draw filled+stroked triangle (ctx guaranteed non-null by early return)
-            const draw_tri = (fill, stroke_alpha) => {
-                ctx.save();
-                ctx.beginPath();
-                ctx.moveTo(proj1.x, proj1.y);
-                ctx.lineTo(proj2.x, proj2.y);
-                ctx.lineTo(proj3.x, proj3.y);
-                ctx.closePath();
-                ctx.fillStyle = fill;
-                ctx.fill();
-                ctx.strokeStyle = add_alpha(face_color, Math.min(0.6, stroke_alpha));
-                ctx.lineWidth = 1;
-                ctx.stroke();
-                ctx.restore();
-            };
-            // Gradient direction is the screen-space gradient of alpha
-            const mag = Math.hypot(coef_a, coef_b);
-            if (mag < 1e-9) {
-                // Fallback: uniform fill if nearly flat
-                const avg_alpha = (a1 + a2 + a3) / 3;
-                draw_tri(add_alpha(face_color, avg_alpha), avg_alpha * 3);
-            }
-            else {
-                const vx = coef_a / mag;
-                const vy = coef_b / mag;
-                const cx = (x1 + x2 + x3) / 3;
-                const cy = (y1 + y2 + y3) / 3;
-                const alpha_c = coef_a * cx + coef_b * cy + coef_c;
-                const alpha_min = Math.min(a1, a2, a3);
-                const alpha_max = Math.max(a1, a2, a3);
-                const s_min = (alpha_min - alpha_c) / mag;
-                const s_max = (alpha_max - alpha_c) / mag;
-                const grad = ctx.createLinearGradient(cx + vx * s_min, cy + vy * s_min, cx + vx * s_max, cy + vy * s_max);
-                grad.addColorStop(0, add_alpha(face_color, alpha_min));
-                grad.addColorStop(1, add_alpha(face_color, alpha_max));
-                draw_tri(grad, alpha_max * 3);
-            }
+      const [p1, p2, p3] = tri.vertices
+
+      const proj1 = project_3d_point(p1.x, p1.y, p1.z)
+      const proj2 = project_3d_point(p2.x, p2.y, p2.z)
+      const proj3 = project_3d_point(p3.x, p3.y, p3.z)
+
+      const face_color = get_face_color(tri, tri_idx)
+
+      // For uniform mode, use gradient with variable opacity
+      // For other modes, use fixed opacity
+      if (hull_face_color_mode === `uniform`) {
+        // Build per-face linear gradient in screen space matching linear variation of formation energy
+        const a1 = norm_alpha?.(p1.z) ?? 0
+        const a2 = norm_alpha?.(p2.z) ?? 0
+        const a3 = norm_alpha?.(p3.z) ?? 0
+
+        // Solve a*x + b*y + c = alpha at the three projected vertices
+        const x1 = proj1.x, y1 = proj1.y
+        const x2 = proj2.x, y2 = proj2.y
+        const x3 = proj3.x, y3 = proj3.y
+        const det = x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)
+        let coef_a = 0, coef_b = 0, coef_c = (a1 + a2 + a3) / 3
+        if (Math.abs(det) > 1e-9) {
+          coef_a = (a1 * (y2 - y3) + a2 * (y3 - y1) + a3 * (y1 - y2)) / det
+          coef_b = (a1 * (x3 - x2) + a2 * (x1 - x3) + a3 * (x2 - x1)) / det
+          coef_c = (a1 * (x2 * y3 - x3 * y2) + a2 * (x3 * y1 - x1 * y3) +
+            a3 * (x1 * y2 - x2 * y1)) /
+            det
+        }
+
+        // Helper to draw filled+stroked triangle
+        const draw_tri = (fill: string | CanvasGradient, stroke_alpha: number) => {
+          if (!ctx) return
+          ctx.save()
+          ctx.beginPath()
+          ctx.moveTo(proj1.x, proj1.y)
+          ctx.lineTo(proj2.x, proj2.y)
+          ctx.lineTo(proj3.x, proj3.y)
+          ctx.closePath()
+          ctx.fillStyle = fill
+          ctx.fill()
+          ctx.strokeStyle = add_alpha(face_color, Math.min(0.6, stroke_alpha))
+          ctx.lineWidth = 1
+          ctx.stroke()
+          ctx.restore()
         }
-        else {
-            // Non-uniform modes: solid color with fixed opacity
-            ctx.save();
-            ctx.beginPath();
-            ctx.moveTo(proj1.x, proj1.y);
-            ctx.lineTo(proj2.x, proj2.y);
-            ctx.lineTo(proj3.x, proj3.y);
-            ctx.closePath();
-            ctx.fillStyle = add_alpha(face_color, hull_face_opacity);
-            ctx.fill();
-            ctx.strokeStyle = add_alpha(face_color, Math.min(0.6, hull_face_opacity * 3));
-            ctx.lineWidth = 1;
-            ctx.stroke();
-            ctx.restore();
+
+        // Gradient direction is the screen-space gradient of alpha
+        const mag = Math.hypot(coef_a, coef_b)
+        if (mag < 1e-9) {
+          // Fallback: uniform fill if nearly flat
+          const avg_alpha = (a1 + a2 + a3) / 3
+          draw_tri(add_alpha(face_color, avg_alpha), avg_alpha * 3)
+        } else {
+          const vx = coef_a / mag
+          const vy = coef_b / mag
+          const cx = (x1 + x2 + x3) / 3
+          const cy = (y1 + y2 + y3) / 3
+          const alpha_c = coef_a * cx + coef_b * cy + coef_c
+          const alpha_min = Math.min(a1, a2, a3)
+          const alpha_max = Math.max(a1, a2, a3)
+          const s_min = (alpha_min - alpha_c) / mag
+          const s_max = (alpha_max - alpha_c) / mag
+
+          const grad = ctx.createLinearGradient(
+            cx + vx * s_min,
+            cy + vy * s_min,
+            cx + vx * s_max,
+            cy + vy * s_max,
+          )
+          grad.addColorStop(0, add_alpha(face_color, alpha_min))
+          grad.addColorStop(1, add_alpha(face_color, alpha_max))
+          draw_tri(grad, alpha_max * 3)
         }
+      } else {
+        // Non-uniform modes: solid color with fixed opacity
+        ctx.save()
+        ctx.beginPath()
+        ctx.moveTo(proj1.x, proj1.y)
+        ctx.lineTo(proj2.x, proj2.y)
+        ctx.lineTo(proj3.x, proj3.y)
+        ctx.closePath()
+        ctx.fillStyle = add_alpha(face_color, hull_face_opacity)
+        ctx.fill()
+        ctx.strokeStyle = add_alpha(face_color, Math.min(0.6, hull_face_opacity * 3))
+        ctx.lineWidth = 1
+        ctx.stroke()
+        ctx.restore()
+      }
     }
-}
-// Formation energy color bar helpers
-const e_form_range = $derived.by(() => {
-    const energies = plot_entries.map((e) => e.e_form_per_atom ?? 0);
-    const min_fe = energies.length ? Math.min(0, ...energies) : -1;
-    return [min_fe, 0];
-});
-const e_form_color_scale_fn = $derived.by(() => {
-    const [min_fe, max_fe] = e_form_range;
-    const denom = Math.max(1e-6, max_fe - min_fe);
-    return (value) => {
-        // alpha 0 at 0 eV, goes to hull_face_opacity at most negative energy
-        const t = Math.max(0, Math.min(1, (value - min_fe) / denom));
-        const alpha = (1 - t) * hull_face_opacity;
-        return add_alpha(hull_face_color, alpha);
-    };
-});
-function draw_data_points() {
-    if (!ctx || sorted_points_cache.length === 0)
-        return;
+  }
+
+  // Formation energy color bar helpers
+  const e_form_range = $derived.by((): [number, number] => {
+    const energies = plot_entries.map((e) => e.e_form_per_atom ?? 0)
+    const min_fe = energies.length ? Math.min(0, ...energies) : -1
+    return [min_fe, 0]
+  })
+
+  const e_form_color_scale_fn = $derived.by(() => {
+    const [min_fe, max_fe] = e_form_range
+    const denom = Math.max(1e-6, max_fe - min_fe)
+    return (value: number) => {
+      // alpha 0 at 0 eV, goes to hull_face_opacity at most negative energy
+      const t = Math.max(0, Math.min(1, (value - min_fe) / denom))
+      const alpha = (1 - t) * hull_face_opacity
+      return add_alpha(hull_face_color, alpha)
+    }
+  })
+
+  function draw_data_points(): void {
+    if (!ctx || sorted_points_cache.length === 0) return
+
     for (const { entry, projected } of sorted_points_cache) {
-        const is_stable = entry.is_stable || entry.e_above_hull === 0;
-        const is_entry_highlighted = is_highlighted(entry);
-        const color = get_point_color(entry);
-        const size = (entry.size || (is_stable ? 6 : 4)) * canvas_dims.scale;
-        const marker = entry.marker || `circle`;
-        // Shadow
-        const shadow_offset = Math.abs(entry.z) * 0.1 * canvas_dims.scale;
-        ctx.fillStyle = `rgba(0, 0, 0, 0.2)`;
-        const shadow_path = helpers.create_marker_path(size * 0.8, marker);
-        ctx.save();
-        ctx.translate(projected.x + shadow_offset, projected.y + shadow_offset);
-        ctx.fill(shadow_path);
-        ctx.restore();
-        // Highlights
-        if (selected_entry && entry.entry_id === selected_entry.entry_id) {
-            helpers.draw_selection_highlight(ctx, projected, size, canvas_dims.scale, pulse_time, pulse_opacity);
-        }
-        if (is_entry_highlighted) {
-            helpers.draw_highlight_effect(ctx, projected, size, canvas_dims.scale, pulse_time, merged_highlight_style);
-        }
-        // Main point with marker symbol
-        ctx.fillStyle =
-            is_entry_highlighted && merged_highlight_style.effect === `color`
-                ? merged_highlight_style.color
-                : color;
-        ctx.strokeStyle = is_stable ? `#ffffff` : `#000000`;
-        ctx.lineWidth = 0.5 * canvas_dims.scale;
-        const marker_path = helpers.create_marker_path(size, marker);
-        ctx.save();
-        ctx.translate(projected.x, projected.y);
-        ctx.fill(marker_path);
-        ctx.stroke(marker_path);
-        ctx.restore();
+      const is_stable = entry.is_stable || entry.e_above_hull === 0
+      const is_entry_highlighted = is_highlighted(entry)
+      const color = get_point_color(entry)
+      const size = (entry.size || (is_stable ? 6 : 4)) * canvas_dims.scale
+      const marker = entry.marker || `circle`
+
+      // Shadow
+      const shadow_offset = Math.abs(entry.z) * 0.1 * canvas_dims.scale
+      ctx.fillStyle = `rgba(0, 0, 0, 0.2)`
+      const shadow_path = helpers.create_marker_path(size * 0.8, marker)
+      ctx.save()
+      ctx.translate(projected.x + shadow_offset, projected.y + shadow_offset)
+      ctx.fill(shadow_path)
+      ctx.restore()
+
+      // Highlights
+      if (selected_entry && entry.entry_id === selected_entry.entry_id) {
+        helpers.draw_selection_highlight(
+          ctx,
+          projected,
+          size,
+          canvas_dims.scale,
+          pulse_time,
+          pulse_opacity,
+        )
+      }
+      if (is_entry_highlighted) {
+        helpers.draw_highlight_effect(
+          ctx,
+          projected,
+          size,
+          canvas_dims.scale,
+          pulse_time,
+          merged_highlight_style,
+        )
+      }
+
+      // Main point with marker symbol
+      ctx.fillStyle =
+        is_entry_highlighted && merged_highlight_style.effect === `color`
+          ? merged_highlight_style.color
+          : color
+      ctx.strokeStyle = is_stable ? `#ffffff` : `#000000`
+      ctx.lineWidth = 0.5 * canvas_dims.scale
+      const marker_path = helpers.create_marker_path(size, marker)
+      ctx.save()
+      ctx.translate(projected.x, projected.y)
+      ctx.fill(marker_path)
+      ctx.stroke(marker_path)
+      ctx.restore()
     }
-}
-function draw_hull_labels() {
-    if (!ctx || !merged_config.show_labels)
-        return;
-    const composition_map = new SvelteMap();
-    for (const entry of plot_entries) {
-        if (!entry.visible || entry.is_element)
-            continue;
-        const comp_key = Object.entries(entry.composition)
-            .filter(([, amt]) => amt > 0)
-            .sort(([a], [b]) => a.localeCompare(b))
-            .map(([el, amt]) => `${el}${amt.toFixed(3)}`)
-            .join(``);
-        const existing = composition_map.get(comp_key);
-        if (!existing || (entry.e_form_per_atom ?? 0) < (existing.e_form_per_atom ?? 0)) {
-            composition_map.set(comp_key, entry);
-        }
+  }
+
+  const hull_label_font_size = 12
+  const hull_label_subscript_font_size = 11
+  const hull_label_font = `${hull_label_font_size}px Arial`
+  const hull_label_subscript_font = `${hull_label_subscript_font_size}px Arial`
+
+  function label_priority_energy(entry: ConvexHullEntry): number {
+    for (const value of [
+      entry.e_form_per_atom,
+      entry.z,
+      entry.energy_per_atom,
+      entry.energy,
+      entry.e_above_hull,
+    ]) {
+      if (typeof value === `number` && Number.isFinite(value)) return value
+    }
+    return Number.POSITIVE_INFINITY
+  }
+
+  function get_label_placements(
+    projected: { x: number; y: number },
+    point_size: number,
+    text_width: number,
+    text_height: number,
+  ): LabelPlacement[] {
+    const padding = Math.max(1, 2 * canvas_dims.scale)
+    const gap = point_size + 4 * canvas_dims.scale
+    const side_gap = point_size + 5 * canvas_dims.scale
+    const placements = [
+      { x: projected.x, y: projected.y + gap },
+      { x: projected.x, y: projected.y - gap - text_height },
+      { x: projected.x + side_gap + text_width / 2, y: projected.y - text_height / 2 },
+      { x: projected.x - side_gap - text_width / 2, y: projected.y - text_height / 2 },
+      { x: projected.x + side_gap + text_width / 2, y: projected.y + gap },
+      { x: projected.x - side_gap - text_width / 2, y: projected.y + gap },
+      { x: projected.x + side_gap + text_width / 2, y: projected.y - gap - text_height },
+      { x: projected.x - side_gap - text_width / 2, y: projected.y - gap - text_height },
+    ]
+
+    return placements.map((placement) => ({
+      ...placement,
+      rect: pad_rect(
+        centered_rect(placement.x, placement.y, text_width, text_height),
+        padding,
+      ),
+    }))
+  }
+
+  function measure_formula_segments(
+    context: CanvasRenderingContext2D,
+    segments: FormulaLabelSegment[],
+  ): number {
+    context.save()
+    const width = segments.reduce((sum, segment) => {
+      context.font = segment.subscript ? hull_label_subscript_font : hull_label_font
+      return sum + context.measureText(segment.text).width
+    }, 0)
+    context.restore()
+    return width
+  }
+
+  function draw_formula_segments(
+    context: CanvasRenderingContext2D,
+    segments: FormulaLabelSegment[],
+    center_x: number,
+    top_y: number,
+    text_width: number,
+  ): void {
+    const subscript_offset = hull_label_font_size * 0.28
+    let text_x = center_x - text_width / 2
+
+    context.save()
+    context.textAlign = `left`
+    context.textBaseline = `top`
+    for (const segment of segments) {
+      context.font = segment.subscript ? hull_label_subscript_font : hull_label_font
+      context.fillText(
+        segment.text,
+        text_x,
+        top_y + (segment.subscript ? subscript_offset : 0),
+      )
+      text_x += context.measureText(segment.text).width
+    }
+    context.restore()
+  }
+
+  function draw_hull_labels(): void {
+    if (!ctx || !merged_config.show_labels) return
+
+    ctx.fillStyle = text_color
+    ctx.font = hull_label_font
+    ctx.textAlign = `center`
+    ctx.textBaseline = `top`
+    const label_height = hull_label_font_size + 2
+
+    const label_entries = helpers.get_composition_label_entries(
+      plot_entries.filter((entry) => {
+        if (!entry.visible || entry.is_element) return false
+        const is_stable_point = entry.is_stable || (entry.e_above_hull ?? 0) <= 1e-6
+        return (is_stable_point && show_stable_labels) ||
+          (!is_stable_point && show_unstable_labels &&
+            (entry.e_above_hull ?? 0) <= max_hull_dist_show_labels)
+      }),
+    )
+      .sort((entry_1, entry_2) => {
+        const energy_diff = label_priority_energy(entry_1) -
+          label_priority_energy(entry_2)
+        if (energy_diff !== 0) return energy_diff
+        return (entry_1.e_above_hull ?? 0) - (entry_2.e_above_hull ?? 0)
+      })
+
+    const occupied_rects: Rect[] = []
+    const canvas_rect: Rect = {
+      x: 0,
+      y: 0,
+      width: canvas_dims.width,
+      height: canvas_dims.height,
     }
-    ctx.fillStyle = text_color;
-    ctx.font = `12px Arial`;
-    ctx.textAlign = `center`;
-    ctx.textBaseline = `top`;
-    for (const entry of composition_map.values()) {
-        const is_stable_point = entry.is_stable || (entry.e_above_hull ?? 0) <= 1e-6;
-        const can_label = (is_stable_point && show_stable_labels) ||
-            (!is_stable_point && show_unstable_labels &&
-                (entry.e_above_hull ?? 0) <= max_hull_dist_show_labels);
-        if (!can_label)
-            continue;
-        const projected = project_3d_point(entry.x, entry.y, entry.z);
-        const formula = helpers.get_entry_label(entry, elements);
-        ctx.fillText(formula, projected.x, projected.y + 16 * canvas_dims.scale);
+    for (const entry of label_entries) {
+      const projected = project_3d_point(entry.x, entry.y, entry.z)
+      const formula_segments = get_formula_label_segments(
+        helpers.get_entry_label(entry, elements),
+      )
+      const is_stable_point = entry.is_stable || entry.e_above_hull === 0
+      const point_size = (entry.size || (is_stable_point ? 6 : 4)) * canvas_dims.scale
+      const text_width = measure_formula_segments(ctx, formula_segments)
+      const placements = get_label_placements(
+        projected,
+        point_size,
+        text_width,
+        label_height,
+      )
+      const placement = placements.find((candidate) =>
+        rect_within_rect(candidate.rect, canvas_rect) &&
+        !occupied_rects.some((occupied_rect) =>
+          rects_overlap(candidate.rect, occupied_rect)
+        )
+      )
+      if (!placement) continue
+
+      occupied_rects.push(placement.rect)
+      draw_formula_segments(ctx, formula_segments, placement.x, placement.y, text_width)
     }
-}
-function render_frame() {
-    if (!ctx || !canvas)
-        return;
+  }
+
+  function render_frame(): void {
+    if (!ctx || !canvas) return
+
     // Use CSS dimensions for rendering
-    const display_width = canvas.clientWidth || 600;
-    const display_height = canvas.clientHeight || 600;
+    const display_width = canvas.clientWidth || 600
+    const display_height = canvas.clientHeight || 600
+
     // Clear canvas
-    ctx.clearRect(0, 0, display_width, display_height);
+    ctx.clearRect(0, 0, display_width, display_height)
+
     // Set background - use transparent to inherit from container
-    ctx.fillStyle = `transparent`;
-    ctx.fillRect(0, 0, display_width, display_height);
+    ctx.fillStyle = `transparent`
+    ctx.fillRect(0, 0, display_width, display_height)
+
     if (elements.length !== 3) {
-        if (elements.length > 0) {
-            ctx.fillStyle = text_color;
-            ctx.font = `16px Arial`;
-            ctx.textAlign = `center`;
-            ctx.textBaseline = `middle`;
-            ctx.fillText(`Ternary convex hull requires exactly 3 elements (got ${elements.length})`, display_width / 2, display_height / 2);
-        }
-        return;
+      if (elements.length > 0) {
+        ctx.fillStyle = text_color
+        ctx.font = `16px Arial`
+        ctx.textAlign = `center`
+        ctx.textBaseline = `middle`
+        ctx.fillText(
+          `Ternary convex hull requires exactly 3 elements (got ${elements.length})`,
+          display_width / 2,
+          display_height / 2,
+        )
+      }
+      return
     }
-    draw_structure_outline();
-    draw_convex_hull_faces(); // behind points
-    draw_z_axis_ticks(); // after faces for visibility at high opacity
-    draw_data_points();
-    draw_hull_labels();
-    draw_element_labels();
-}
-function handle_mouse_down(event) {
-    is_dragging = true;
-    drag_started = false;
-    hover_data = null;
-    on_point_hover?.(null);
-    last_mouse = { x: event.clientX, y: event.clientY };
-}
-const handle_mouse_move = (event) => {
-    if (!is_dragging)
-        return;
-    const [dx, dy] = [event.clientX - last_mouse.x, event.clientY - last_mouse.y];
+
+    draw_structure_outline()
+    draw_convex_hull_faces() // behind points
+    draw_z_axis_ticks() // after faces for visibility at high opacity
+    draw_data_points()
+    draw_hull_labels()
+    draw_element_labels()
+  }
+
+  function handle_mouse_down(event: MouseEvent) {
+    is_dragging = true
+    drag_started = false
+    hover_data = null
+    on_point_hover?.(null)
+    last_mouse = { x: event.clientX, y: event.clientY }
+  }
+
+  const handle_mouse_move = (event: MouseEvent) => {
+    if (!is_dragging) return
+    const [dx, dy] = [event.clientX - last_mouse.x, event.clientY - last_mouse.y]
+
     // Mark as drag if any movement occurred
-    if (dx !== 0 || dy !== 0)
-        drag_started = true;
+    if (dx !== 0 || dy !== 0) drag_started = true
+
     // With Cmd/Ctrl held: pan the view instead of rotating
     if (event.metaKey || event.ctrlKey) {
-        camera.center_x += dx;
-        camera.center_y += dy;
-    }
-    else {
-        // Horizontal drag -> azimuth rotation around z-axis
-        camera.azimuth += dx * 0.3; // Positive dx (drag right) rotates clockwise
-        // Vertical drag -> elevation angle (full range)
-        camera.elevation -= dy * 0.3; // Positive dy (drag down) tilts view down
+      camera.center_x += dx
+      camera.center_y += dy
+    } else {
+      // Horizontal drag -> azimuth rotation around z-axis
+      camera.azimuth += dx * 0.3 // Positive dx (drag right) rotates clockwise
+
+      // Vertical drag -> elevation angle (full range)
+      camera.elevation -= dy * 0.3 // Positive dy (drag down) tilts view down
     }
-    last_mouse = { x: event.clientX, y: event.clientY };
-};
-const handle_wheel = (event) => {
-    event.preventDefault();
-    camera.zoom = Math.max(0.5, Math.min(10, camera.zoom * (event.deltaY > 0 ? 0.98 : 1.02)));
-};
-const handle_hover = (event) => {
-    if (is_dragging)
-        return;
-    const entry = find_entry_at_mouse(event);
+
+    last_mouse = { x: event.clientX, y: event.clientY }
+  }
+
+  const handle_wheel = (event: WheelEvent) => {
+    event.preventDefault()
+    camera.zoom = Math.max(
+      0.5,
+      Math.min(10, camera.zoom * (event.deltaY > 0 ? 0.98 : 1.02)),
+    )
+  }
+
+  const handle_hover = (event: MouseEvent) => {
+    if (is_dragging) return
+    const entry = find_entry_at_mouse(event)
     hover_data = entry
-        ? { entry, position: { x: event.clientX, y: event.clientY } }
-        : null;
-    on_point_hover?.(hover_data);
-};
-const find_entry_at_mouse = (event) => helpers.find_hull_entry_at_mouse(canvas, event, plot_entries, (x, y, z) => {
-    const pt = project_3d_point(x, y, z);
-    return { x: pt.x, y: pt.y };
-});
-const handle_click = (event) => {
-    event.stopPropagation();
+      ? { entry, position: { x: event.clientX, y: event.clientY } }
+      : null
+    on_point_hover?.(hover_data)
+  }
+
+  const find_entry_at_mouse = (event: MouseEvent): ConvexHullEntry | null =>
+    helpers.find_hull_entry_at_mouse(
+      canvas,
+      event,
+      plot_entries,
+      (x: number, y: number, z: number) => {
+        const pt = project_3d_point(x, y, z)
+        return { x: pt.x, y: pt.y }
+      },
+    )
+
+  const handle_click = (event: MouseEvent) => {
+    event.stopPropagation()
     // Check if this was a drag operation (any mouse movement during drag)
-    const was_drag = drag_started;
-    drag_started = false; // Reset for next interaction
-    if (was_drag)
-        return; // Don't trigger click if this was a drag
-    const entry = find_entry_at_mouse(event);
+    const was_drag = drag_started
+    drag_started = false // Reset for next interaction
+    if (was_drag) return // Don't trigger click if this was a drag
+
+    const entry = find_entry_at_mouse(event)
     if (!entry) {
-        if (modal_open)
-            close_structure_popup();
-        return;
+      if (modal_open) close_structure_popup()
+      return
     }
-    on_point_click?.(entry);
+
+    on_point_click?.(entry)
+
     if (enable_click_selection) {
-        selected_entry = entry;
-        if (enable_structure_preview) {
-            const structure = extract_structure_from_entry(entry);
-            if (structure) {
-                selected_structure = structure;
-                modal_place_right = helpers.calculate_modal_side(wrapper);
-                modal_open = true;
-            }
+      selected_entry = entry
+      if (enable_structure_preview) {
+        const structure = extract_structure_from_entry(entry)
+        if (structure) {
+          selected_structure = structure
+          modal_place_right = helpers.calculate_modal_side(wrapper)
+          modal_open = true
         }
+      }
     }
-};
-function close_structure_popup() {
-    modal_open = false;
-    selected_structure = null;
-    selected_entry = null;
-}
-const handle_double_click = (event) => {
-    const entry = find_entry_at_mouse(event);
+  }
+
+  function close_structure_popup() {
+    modal_open = false
+    selected_structure = null
+    selected_entry = null
+  }
+
+  const handle_double_click = (event: MouseEvent) => {
+    const entry = find_entry_at_mouse(event)
     if (entry) {
-        copy_entry_data(entry, {
-            x: event.clientX,
-            y: event.clientY,
-        });
+      copy_entry_data(entry, {
+        x: event.clientX,
+        y: event.clientY,
+      })
     }
-};
-const render_once = () => {
+  }
+
+  const render_once = () => {
     if (!frame_id) {
-        frame_id = requestAnimationFrame(() => {
-            render_frame();
-            frame_id = 0;
-        });
+      frame_id = requestAnimationFrame(() => {
+        render_frame()
+        frame_id = 0
+      })
     }
-};
-function update_canvas_size() {
-    if (!canvas)
-        return;
-    const dpr = globalThis.devicePixelRatio || 1;
-    const container = canvas.parentElement;
-    const rect = container?.getBoundingClientRect();
-    const [w, h] = rect ? [rect.width, rect.height] : [400, 400];
+  }
+
+  function update_canvas_size() {
+    if (!canvas) return
+    const dpr = globalThis.devicePixelRatio || 1
+    const container = canvas.parentElement
+    const rect = container?.getBoundingClientRect()
+    const [w, h] = rect ? [rect.width, rect.height] : [400, 400]
+
     // Only update canvas dimensions if they actually changed
     // (assigning canvas.width/height clears the canvas even if values are the same)
-    const new_width = Math.max(0, Math.round(w * dpr));
-    const new_height = Math.max(0, Math.round(h * dpr));
+    const new_width = Math.max(0, Math.round(w * dpr))
+    const new_height = Math.max(0, Math.round(h * dpr))
     if (!ctx || canvas.width !== new_width || canvas.height !== new_height) {
-        canvas.width = new_width;
-        canvas.height = new_height;
-        ctx = canvas.getContext(`2d`);
-        if (ctx) {
-            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-            ctx.imageSmoothingEnabled = true;
-            ctx.imageSmoothingQuality = `high`;
-        }
+      canvas.width = new_width
+      canvas.height = new_height
+      ctx = canvas.getContext(`2d`)
+      if (ctx) {
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+        ctx.imageSmoothingEnabled = true
+        ctx.imageSmoothingQuality = `high`
+      }
     }
-    canvas_dims = { width: w, height: h, scale: Math.min(w, h) / 600 };
-    render_once();
-}
-// Reactive dark mode detection for canvas text color
-let dark_mode = $state(is_dark_mode());
-$effect(() => watch_dark_mode((dark) => dark_mode = dark));
-const text_color = $derived(helpers.get_canvas_text_color(dark_mode));
-$effect(() => {
-    if (!canvas)
-        return;
+    canvas_dims = { width: w, height: h, scale: Math.min(w, h) / 600 }
+    render_once()
+  }
+
+  // Reactive dark mode detection for canvas text color
+  let dark_mode = $state(is_dark_mode())
+  $effect(() => watch_dark_mode((dark) => dark_mode = dark))
+  const text_color = $derived(helpers.get_canvas_text_color(dark_mode))
+
+  $effect(() => {
+    if (!canvas) return
+
     // Initial setup
-    update_canvas_size();
+    update_canvas_size()
+
     // Watch for resize events - only update canvas, don't reset camera
-    const resize_observer = new ResizeObserver(update_canvas_size);
-    const container = canvas.parentElement;
+    const resize_observer = new ResizeObserver(update_canvas_size)
+
+    const container = canvas.parentElement
     if (container) {
-        resize_observer.observe(container);
+      resize_observer.observe(container)
     }
-    return () => {
-        if (frame_id)
-            cancelAnimationFrame(frame_id);
-        if (pulse_frame_id)
-            cancelAnimationFrame(pulse_frame_id);
-        resize_observer.disconnect();
-    };
-});
-// Fullscreen handling with camera reset
-let was_fullscreen = $state(fullscreen);
-$effect(() => {
+
+    return () => { // Cleanup on unmount
+      if (frame_id) cancelAnimationFrame(frame_id)
+      if (pulse_frame_id) cancelAnimationFrame(pulse_frame_id)
+      resize_observer.disconnect()
+    }
+  })
+
+  // Fullscreen handling with camera reset
+  let was_fullscreen = $state(fullscreen)
+  $effect(() => {
     setup_fullscreen_effect(fullscreen, wrapper, (entering_fullscreen) => {
-        if (entering_fullscreen !== was_fullscreen) {
-            camera.center_x = 0;
-            camera.center_y = -50;
-            was_fullscreen = entering_fullscreen;
-        }
-    });
-    set_fullscreen_bg(wrapper, fullscreen, `--hull-3d-bg-fullscreen`);
-});
-// Performance: Cache canvas dimensions and formation energy range
-let canvas_dims = $state({ width: 600, height: 600, scale: 1 });
-const energy_range = $derived.by(() => {
-    const energies = plot_entries.map((e) => e.e_form_per_atom ?? 0);
-    const [min, max] = [Math.min(0, ...energies), Math.max(0, ...energies)];
-    const z_scale = 0.75 / Math.max(max - min, 0.001);
-    return { min, max, center: (min + max) / 2, z_scale };
-});
-// Performance: Pre-compute and cache all point projections + depth sorting
-const sorted_points_cache = $derived.by(() => {
-    if (!canvas || plot_entries.length === 0)
-        return [];
+      if (entering_fullscreen !== was_fullscreen) {
+        camera.center_x = 0
+        camera.center_y = -50
+        was_fullscreen = entering_fullscreen
+      }
+    })
+    set_fullscreen_bg(wrapper, fullscreen, `--hull-3d-bg-fullscreen`)
+  })
+
+  // Performance: Cache canvas dimensions and formation energy range
+  let canvas_dims = $state({ width: 600, height: 600, scale: 1 })
+  const energy_range = $derived.by(() => {
+    const energies = plot_entries.map((e) => e.e_form_per_atom ?? 0)
+    const [min, max] = [Math.min(0, ...energies), Math.max(0, ...energies)]
+    const z_scale = 0.75 / Math.max(max - min, 0.001)
+    return { min, max, center: (min + max) / 2, z_scale }
+  })
+
+  // Performance: Pre-compute and cache all point projections + depth sorting
+  const sorted_points_cache = $derived.by(() => {
+    if (!canvas || plot_entries.length === 0) return []
     return plot_entries
-        .filter((entry) => entry.visible)
-        .map((entry) => ({
+      .filter((entry) => entry.visible)
+      .map((entry) => ({
         entry,
         projected: project_3d_point(entry.x, entry.y, entry.z),
-    }))
-        .sort((a, b) => a.projected.depth - b.projected.depth);
-});
-let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#0072B2`};
+      }))
+      .sort((a, b) => a.projected.depth - b.projected.depth)
+  })
+
+  let style = $derived(
+    `--hull-stable-color:${merged_config.colors?.stable || `#0072B2`};
     --hull-unstable-color:${merged_config.colors?.unstable || `#E69F00`};
     --hull-edge-color:${merged_config.colors?.edge || `var(--text-color, #212121)`};
-     --hull-text-color:${merged_config.colors?.annotation || `var(--text-color, #212121)`}`);
+     --hull-text-color:${
+      merged_config.colors?.annotation || `var(--text-color, #212121)`
+    }`,
+  )
 </script>
 
 <svelte:document
@@ -984,7 +1453,7 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
       selected_entry,
     })}
   <h3 style="position: absolute; left: 1em; top: 1ex; margin: 0; font-weight: 500">
-    {@html merged_controls.title || phase_stats?.chemical_system || ``}
+    {@html sanitize_html(merged_controls.title || phase_stats?.chemical_system || ``)}
   </h3>
   <canvas
     bind:this={canvas}