matterviz 0.3.7 → 0.4.1

package/dist/convex-hull/ConvexHull3D.svelte

@@ -13,18 +13,12 @@
   import 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 { Spinner } from '../feedback'
   import { format_num } from '../labels'
-  import {
-    set_fullscreen_bg,
-    setup_fullscreen_effect,
-    toggle_fullscreen,
-  } from '../layout'
-  import { to_radians, type Point3D, type Vec3 } from '../math'
-  import { ColorBar, PlotTooltip } from '../plot'
-  import { centered_rect, pad_rect, rects_overlap, rect_within_rect } from '../plot/layout'
-  import type { Rect } from '../plot/layout'
+  import { to_radians, type Point3D, type Vec2, type Vec3 } from '../math'
+  import { ColorBar } from '../plot'
+  import { centered_rect, pad_rect, rects_overlap, rect_within_rect } from '../plot/core/layout'
+  import type { Rect } from '../plot/core/layout'
   import { create_pulse_animation } from '../effects.svelte'
   import { DEFAULTS } from '../settings'
   import type { AnyStructure } from '../structure'
@@ -40,39 +34,41 @@
     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 { create_canvas_interactions } from './canvas-interactions.svelte'
+  import ConvexHullChrome from './ConvexHullChrome.svelte'
   import GasPressureControls from './GasPressureControls.svelte'
   import * as helpers from './helpers'
+  import { create_hull_data_pipeline } from './hull-state.svelte'
   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,
   } from './types'
   import { compute_hull_stability } from './helpers'
+  import { MAGNETIC_ORDERING_CATEGORY } from './types'
 
   let {
     entries = [],
     controls = {},
     config = {},
+    show_controls,
     on_point_click,
     on_point_hover,
     fullscreen = $bindable(DEFAULTS.convex_hull.ternary.fullscreen),
-    enable_fullscreen = true,
+    fullscreen_toggle = 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),
+    entry_category = MAGNETIC_ORDERING_CATEGORY,
+    hidden_categories = $bindable([]),
     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(
@@ -84,7 +80,7 @@
       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),
+    controls_open = $bindable(DEFAULTS.convex_hull.ternary.legend_pane_open),
     max_hull_dist_show_phases = $bindable(
       DEFAULTS.convex_hull.ternary.max_hull_dist_show_phases,
     ),
@@ -119,7 +115,7 @@
   } = $props()
 
   const merged_controls = $derived({ ...default_controls, ...controls })
-  const controls_config = $derived(normalize_show_controls(merged_controls.show))
+  const controls_config = $derived(normalize_show_controls(show_controls))
   const merged_config = $derived({
     ...default_hull_config,
     ...config,
@@ -127,89 +123,36 @@
     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, {
-        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(() => {
-    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 []
-    }
-
-    return pd_data.elements
+  // Shared reactive data pipeline (temperature → gas → energy mode → hull data → threshold)
+  // Explicit generic breaks the circular type inference through the all_enriched_entries thunk
+  const hull_data = create_hull_data_pipeline<ConvexHullEntry>({
+    dim: 3,
+    entries: () => entries,
+    temperature: () => temperature,
+    interpolate_temperature: () => interpolate_temperature,
+    max_interpolation_gap: () => max_interpolation_gap,
+    gas_config: () => gas_config,
+    gas_pressures: () => gas_pressures,
+    energy_source_mode: () => energy_source_mode,
+    all_enriched_entries: () => all_enriched_entries,
+    max_hull_dist_show_phases: () => max_hull_dist_show_phases,
+    show_stable: () => show_stable,
+    show_unstable: () => show_unstable,
+    entry_category: () => entry_category,
+    hidden_categories: () => hidden_categories,
+    keep_plot_entry: (entry, max_dist) => (entry.e_above_hull ?? 0) <= max_dist,
+    set_temperature: (next_temp) => temperature = next_temp,
+    set_max_hull_dist_show_phases: (value) => max_hull_dist_show_phases = value,
+    set_stable_entries: (value) => stable_entries = value,
+    set_unstable_entries: (value) => unstable_entries = value,
   })
+  const has_temp_data = $derived(hull_data.has_temp_data)
+  const gas_analysis = $derived(hull_data.gas_analysis)
+  const merged_gas_config = $derived(hull_data.merged_gas_config)
+  const pd_data = $derived(hull_data.pd_data)
+  const elements = $derived(hull_data.elements)
+  const plot_entries = $derived(hull_data.plot_entries)
+  const visible_entries = $derived(hull_data.visible_entries)
 
   // 1) Raw 3D coordinates (formation-energy z), independent of hull state
   const coords_entries = $derived.by(() => {
@@ -250,7 +193,7 @@
   // 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
+    if (hull_data.energy_mode !== `on-the-fly`) return coords_entries
     const pts = coords_entries.map(({ x, y, z }) => ({ x, y, z }))
     const raw_dists = thermo.compute_e_above_hull_for_points(pts, hull_model)
     return coords_entries.map((entry, idx) => ({
@@ -258,51 +201,10 @@
     }))
   })
 
-  // 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,
-  ))
-
-  const next_auto_threshold = helpers.auto_threshold_reset(
-    DEFAULTS.convex_hull.ternary.max_hull_dist_show_phases,
-  )
-  $effect(() => {
-    max_hull_dist_show_phases = next_auto_threshold(
-      entries,
-      max_hull_dist_show_phases,
-      auto_default_threshold,
-    ) ?? max_hull_dist_show_phases
-  })
-
-  // Filter by threshold; visibility is a view predicate, not entry state.
-  const plot_entries = $derived(
-    all_enriched_entries.filter((entry) =>
-      (entry.e_above_hull ?? 0) <= max_hull_dist_show_phases
-    ),
-  )
-  const visible_entries = $derived(helpers.visible_entries(
-    plot_entries,
-    show_stable,
-    show_unstable,
-  ))
-
-  $effect(() => {
-    stable_entries = plot_entries.filter(helpers.entry_is_stable)
-    unstable_entries = plot_entries.filter(helpers.entry_is_unstable)
-  })
-
   // Canvas rendering
   let canvas: HTMLCanvasElement | undefined = undefined
   let ctx: CanvasRenderingContext2D | null = null
 
-  // Performance optimization
-  let frame_id = 0
-
   const camera_default = {
     elevation: DEFAULTS.convex_hull.ternary.camera_elevation,
     azimuth: DEFAULTS.convex_hull.ternary.camera_azimuth,
@@ -418,43 +320,64 @@
     }
   })
 
-  // 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)
-  $effect(() => {
-    const current_selection = helpers.current_entry(selected_entry, plot_entries)
-    const stale_selection = selected_entry && !current_selection
-    if (stale_selection) selected_entry = null
-    else if (current_selection && current_selection !== selected_entry) {
-      selected_entry = current_selection
-    }
-    const current_hover = helpers.current_entry(hover_data?.entry, plot_entries)
-    if (hover_data?.entry && !current_hover) {
-      hover_data = null
-      on_point_hover?.(null)
-    } else if (hover_data && current_hover && current_hover !== hover_data.entry) {
-      hover_data = { ...hover_data, entry: current_hover }
-    }
-    if (modal_open) {
-      const structure = current_selection && extract_structure_from_entry(current_selection)
-      if (structure) selected_structure = structure
-      else {
-        modal_open = false
-        selected_structure = null
+  // Shared canvas-interaction scaffold (mouse/keyboard handlers, hover/drag/popup
+  // state, canvas sizing, render scheduler). Rotation math + keydown actions stay local.
+  const interactions = create_canvas_interactions({
+    wheel_clamp: [0.5, 10],
+    fullscreen_bg_var: `--hull-3d-bg-fullscreen`,
+    canvas: () => canvas,
+    wrapper: () => wrapper,
+    ctx: () => ctx,
+    set_ctx: (context) => ctx = context,
+    set_canvas_dims: (dims) => canvas_dims = dims,
+    visible_entries: () => visible_entries,
+    plot_entries: () => plot_entries,
+    selected_entry: () => selected_entry,
+    set_selected_entry: (entry) => selected_entry = entry,
+    fullscreen: () => fullscreen,
+    enable_click_selection: () => enable_click_selection,
+    enable_structure_preview: () => enable_structure_preview,
+    on_point_click: () => on_point_click,
+    on_point_hover: () => on_point_hover,
+    on_file_drop: () => on_file_drop,
+    entry_category: () => entry_category,
+    zoom: () => camera.zoom,
+    set_zoom: (zoom) => camera.zoom = zoom,
+    project_point: project_3d_point,
+    extract_structure: extract_structure_from_entry,
+    render_frame,
+    on_drag: (dx, dy, panning) => {
+      if (panning) {
+        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
       }
-    }
+    },
+    // Reset pan center when entering/exiting fullscreen
+    on_fullscreen_change: () => {
+      camera.center_x = 0
+      camera.center_y = -50
+    },
+    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,
+    }),
   })
+  const { render_once } = interactions
+  const sorted_points_cache = $derived(interactions.sorted_points_cache)
 
   // Hull face color (customizable via controls)
   let hull_face_color = $state(`#4caf50`)
@@ -478,17 +401,14 @@
   // 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
+    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, visible_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
+  // function (not const) so the create_canvas_interactions options above can reference it
+  function extract_structure_from_entry(entry: ConvexHullEntry): AnyStructure | null {
+    return helpers.extract_structure_from_entry(entries, entry)
   }
 
   const reset_camera = () => Object.assign(camera, camera_default)
@@ -496,16 +416,17 @@
     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
+    controls_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
+    hidden_categories = []
     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
+    max_hull_dist_show_phases = hull_data.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
@@ -513,75 +434,6 @@
       .hull_face_color_mode as HullFaceColorMode
   }
 
-  const handle_keydown = (event: KeyboardEvent) => {
-    const target = event.target
-    if (target instanceof HTMLElement && 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()
-    }
-
-    if (event.key === `Escape` && modal_open) {
-      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
-            }
-          }
-        }
-      } 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,
-    }
-    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: ConvexHullEntry): string =>
     helpers.get_point_color_for_entry(
       entry,
@@ -841,12 +693,14 @@
         return energy_face_scale?.(avg_e_form - min_face_e_form) ?? hull_face_color
       }
       if (hull_face_color_mode === `dominant_element`) {
-        // Find element vertex closest to face centroid in 2D ternary space
+        // Find element vertex closest to face centroid in 2D ternary space (single-pass argmin)
         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))]
+        let [closest_idx, min_dist] = [0, Infinity]
+        for (const [idx, [tx, ty]] of TRIANGLE_VERTICES.entries()) {
+          const dist = Math.hypot(cx - tx, cy - ty)
+          if (dist < min_dist) [closest_idx, min_dist] = [idx, dist]
+        }
+        const el = elements[closest_idx]
         return element_colors[el] ?? `#888888`
       }
       if (hull_face_color_mode === `facet_index`) {
@@ -962,8 +816,8 @@
   }
 
   // Formation energy color bar helpers
-  const e_form_range = $derived.by((): [number, number] => {
-    const min_fe = plot_entries.length ? energy_range.min : -1
+  const e_form_range = $derived.by((): Vec2 => {
+    const min_fe = plot_entries.length > 0 ? energy_range.min : -1
     return [min_fe, 0]
   })
 
@@ -980,59 +834,16 @@
 
   function draw_data_points(): void {
     if (!ctx || sorted_points_cache.length === 0) return
-
-    for (const { entry, projected } of sorted_points_cache) {
-      const is_stable = helpers.entry_is_stable(entry)
-      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()
-    }
+    helpers.draw_hull_points(ctx, sorted_points_cache, {
+      scale: canvas_dims.scale,
+      shadow_factor: 0.1,
+      selected_entry,
+      is_highlighted,
+      get_point_color,
+      highlight_style: merged_highlight_style,
+      pulse_time: pulse.time,
+      pulse_opacity,
+    })
   }
 
   const hull_label_font_size = 12
@@ -1216,180 +1027,11 @@
     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
-
-    // 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
-    }
-
-    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: MouseEvent): ConvexHullEntry | null =>
-    helpers.find_hull_entry_at_mouse(
-      canvas,
-      event,
-      visible_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)
-    if (!entry) {
-      if (modal_open) close_structure_popup()
-      return
-    }
-
-    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
-        }
-      }
-    }
-  }
-
-  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,
-      })
-    }
-  }
-
-  function render_once() {
-    if (!frame_id) {
-      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]
-
-    // 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))
-    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_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()
-
-    // Watch for resize events - only update canvas, don't reset camera
-    const resize_observer = new ResizeObserver(update_canvas_size)
-
-    const container = canvas.parentElement
-    if (container) {
-      resize_observer.observe(container)
-    }
-
-    return () => { // Cleanup on unmount
-      if (frame_id) cancelAnimationFrame(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(() => {
@@ -1404,56 +1046,30 @@
     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 || visible_entries.length === 0) return []
-    return visible_entries
-      .map((entry) => ({
-        entry,
-        projected: project_3d_point(entry.x, entry.y, entry.z),
-      }))
-      .sort((left, right) => left.projected.depth - right.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)`
-    }`,
-  )
+  let style = $derived(helpers.hull_style_css(merged_config.colors))
 </script>
 
 <svelte:document
   onfullscreenchange={() => {
-    fullscreen = Boolean(document.fullscreenElement)
+    // tie fullscreen state to this component's own wrapper, not any fullscreen element
+    fullscreen = document.fullscreenElement === wrapper
   }}
-  onmousemove={handle_mouse_move}
-  onmouseup={() => ([is_dragging, drag_started] = [false, false])}
+  onmousemove={interactions.handle_mouse_move}
+  onmouseup={interactions.handle_mouse_up}
 />
 
 <div
   {...rest}
   class="convex-hull-3d {rest.class ?? ``}"
-  class:dragover={drag_over}
+  class:dragover={interactions.drag_over}
   style={`${style}; ${rest.style ?? ``}`}
   data-has-selection={selected_entry !== null}
-  data-has-hover={hover_data !== null}
-  data-is-dragging={is_dragging}
+  data-has-hover={interactions.hover_data !== null}
+  data-is-dragging={interactions.is_dragging}
   bind:this={wrapper}
   role="application"
   tabindex="-1"
-  onkeydown={handle_keydown}
-  ondrop={handle_file_drop}
-  ondragover={(event) => {
-    event.preventDefault()
-    drag_over = true
-  }}
-  ondragleave={(event) => {
-    event.preventDefault()
-    drag_over = false
-  }}
+  {...interactions.wrapper_handlers}
   aria-label="Ternary convex hull visualization"
 >
   {@render children?.({
@@ -1469,12 +1085,7 @@
     bind:this={canvas}
     tabindex="0"
     aria-label={merged_controls.title || phase_stats?.chemical_system || `3D Convex Hull`}
-    onmousedown={handle_mouse_down}
-    onmousemove={handle_hover}
-    onclick={handle_click}
-    onkeydown={handle_keydown}
-    ondblclick={handle_double_click}
-    onwheel={handle_wheel}
+    {...interactions.canvas_handlers}
   ></canvas>
 
   {#if entries.length === 0}
@@ -1486,14 +1097,9 @@
 
   <!-- Formation Energy Color Bar (bottom-left corner) -->
   {#if color_mode === `energy` && plot_entries.length > 0}
-    {@const hull_distances = plot_entries
-      .map((entry) => entry.e_above_hull)
-      .filter((value): value is number => typeof value === `number`)}
-    {@const min_energy = hull_distances.length > 0 ? Math.min(...hull_distances) : 0}
-    {@const max_energy = hull_distances.length > 0 ? Math.max(...hull_distances, 0.1) : 0.1}
     <ColorBar
       title="Energy above hull (eV/atom)"
-      range={[min_energy, max_energy]}
+      range={helpers.hull_distance_range(plot_entries)}
       {color_scale}
       wrapper_style="position: absolute; bottom: 16px; left: 1em; width: 200px;"
       bar_style="height: 12px;"
@@ -1517,82 +1123,46 @@
     />
   {/if}
 
-  <!-- Control buttons (top-right corner) -->
-  {#if controls_config.mode !== `never`}
-    <section class="control-buttons {controls_config.class}">
-      {#if controls_config.visible(`reset`)}
-        <button
-          type="button"
-          onclick={reset_all}
-          title="Reset view and settings"
-          class="reset-camera-btn"
-        >
-          <Icon icon="Reset" />
-        </button>
-      {/if}
-
-      {#if enable_info_pane && phase_stats && controls_config.visible(`info-pane`)}
-        <ConvexHullInfoPane
-          bind:pane_open={info_pane_open}
-          {phase_stats}
-          {stable_entries}
-          {unstable_entries}
-          {show_stable}
-          {show_unstable}
-          {max_hull_dist_show_phases}
-          {max_hull_dist_show_labels}
-          {label_threshold}
-          toggle_props={{ class: `info-btn` }}
-        />
-      {/if}
-
-      {#if enable_fullscreen && controls_config.visible(`fullscreen`)}
-        <button
-          type="button"
-          onclick={() => toggle_fullscreen(wrapper)}
-          title="{fullscreen ? `Exit` : `Enter`} fullscreen"
-          class="fullscreen-btn"
-        >
-          <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" />
-        </button>
-      {/if}
-
-      <!-- Legend controls pane -->
-      {#if controls_config.visible(`controls`)}
-        <ConvexHullControls
-          bind:controls_open={legend_pane_open}
-          bind:color_mode
-          bind:color_scale
-          bind:show_stable
-          bind:show_unstable
-          bind:show_stable_labels
-          bind:show_unstable_labels
-          bind:max_hull_dist_show_phases
-          bind:max_hull_dist_show_labels
-          {max_hull_dist_in_data}
-          {stable_entries}
-          {unstable_entries}
-          {camera}
-          {merged_controls}
-          toggle_props={{ class: `legend-controls-btn` }}
-          {show_hull_faces}
-          on_hull_faces_change={(value: boolean) => show_hull_faces = value}
-          {hull_face_color}
-          on_hull_face_color_change={(value: string) => hull_face_color = value}
-          {hull_face_opacity}
-          on_hull_face_opacity_change={(value: number) => hull_face_opacity = value}
-          {hull_face_color_mode}
-          on_hull_face_color_mode_change={(value: HullFaceColorMode) =>
-            hull_face_color_mode = value}
-          bind:energy_source_mode
-          {has_precomputed_e_form}
-          {can_compute_e_form}
-          {has_precomputed_hull}
-          {can_compute_hull}
-        />
-      {/if}
-    </section>
-  {/if}
+  <!-- Toolbar + tooltip/copy-feedback/drag/structure-popup chrome -->
+  <ConvexHullChrome
+    {interactions}
+    {hull_data}
+    {controls_config}
+    {reset_all}
+    reset_title="Reset view and settings"
+    {enable_info_pane}
+    {phase_stats}
+    {label_threshold}
+    {fullscreen}
+    {fullscreen_toggle}
+    {wrapper}
+    {camera}
+    {merged_controls}
+    {stable_entries}
+    {unstable_entries}
+    {get_point_color}
+    {merged_highlight_style}
+    {is_highlighted}
+    {tooltip}
+    {selected_entry}
+    bind:show_hull_faces
+    bind:hull_face_color
+    bind:hull_face_opacity
+    bind:hull_face_color_mode
+    bind:info_pane_open
+    bind:controls_open
+    bind:color_mode
+    bind:color_scale
+    bind:show_stable
+    bind:show_unstable
+    {entry_category}
+    bind:hidden_categories
+    bind:show_stable_labels
+    bind:show_unstable_labels
+    bind:max_hull_dist_show_phases
+    bind:max_hull_dist_show_labels
+    bind:energy_source_mode
+  />
 
   <!-- Orientation gizmo (configurable placement, default top-right) -->
   {#if gizmo && typeof WebGLRenderingContext !== `undefined`}
@@ -1633,7 +1203,7 @@
       (gas_analysis.has_gas_dependent_elements && merged_gas_config)}
     <div class="right-controls">
       {#if has_temp_data && temperature !== undefined}
-        <TemperatureSlider {available_temperatures} bind:temperature />
+        <TemperatureSlider available_temperatures={hull_data.available_temperatures} bind:temperature />
       {/if}
       {#if gas_analysis.has_gas_dependent_elements && merged_gas_config}
         <GasPressureControls
@@ -1645,45 +1215,6 @@
     </div>
   {/if}
 
-  <!-- Hover tooltip -->
-  {#if hover_data}
-    {@const { entry, position } = hover_data}
-    {@const entry_highlight = is_highlighted(entry) ? merged_highlight_style : undefined}
-    {@const tooltip_style =
-      `z-index: ${CONVEX_HULL_STYLE.z_index.tooltip}; backdrop-filter: blur(4px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);`}
-    <PlotTooltip
-      x={position.x}
-      y={position.y}
-      offset={{ x: 10, y: -10 }}
-      bg_color={get_point_color(entry)}
-      fixed
-      style={tooltip_style}
-    >
-      <ConvexHullTooltip
-        {entry}
-        {polymorph_stats_map}
-        highlight_style={entry_highlight}
-        {tooltip}
-      />
-    </PlotTooltip>
-  {/if}
-
-  <ClickFeedback bind:visible={copy_feedback.visible} position={copy_feedback.position} />
-  <DragOverlay visible={drag_over} />
-
-  {#if modal_open && selected_structure}
-    <StructurePopup
-      structure={selected_structure}
-      place_right={modal_place_right}
-      stats={{
-        id: selected_entry?.entry_id,
-        e_above_hull: selected_entry?.e_above_hull,
-        e_form: selected_entry?.e_form_per_atom,
-      }}
-      onclose={close_structure_popup}
-    />
-  {/if}
 </div>
 
 <style>
@@ -1763,39 +1294,4 @@
     opacity: 1;
     pointer-events: auto;
   }
-  .control-buttons {
-    position: absolute;
-    top: 1ex;
-    right: 1ex;
-    display: flex;
-    gap: 8px;
-    transition: opacity 0.2s ease-in-out;
-  }
-  .control-buttons.hover-visible {
-    opacity: 0;
-    pointer-events: none;
-  }
-  .convex-hull-3d:hover .control-buttons.hover-visible,
-  .convex-hull-3d:focus-within .control-buttons.hover-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  .control-buttons.always-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  .control-buttons :global(button) {
-    background: transparent;
-    border: none;
-    padding: 4px;
-    cursor: pointer;
-    border-radius: 3px;
-    color: var(--text-color, currentColor);
-    transition: background-color 0.2s;
-    display: flex;
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
-  }
-  .control-buttons :global(button):hover {
-    background-color: color-mix(in srgb, currentColor 8%, transparent);
-  }
 </style>