matterviz 0.4.1 → 0.4.3

package/dist/convex-hull/ConvexHull4D.svelte

@@ -29,12 +29,7 @@
   import TemperatureSlider from './TemperatureSlider.svelte'
   import type { Point4D } from './thermodynamics'
   import * as thermo from './thermodynamics'
-  import type {
-    ConvexHullEntry,
-    HighlightStyle,
-    HullFaceColorMode,
-    PhaseData,
-  } from './types'
+  import type { ConvexHullEntry, HighlightStyle, HullFaceColorMode, PhaseData } from './types'
   import { MAGNETIC_ORDERING_CATEGORY } from './types'
   import { compute_hull_stability } from './helpers'
 
@@ -61,9 +56,7 @@
     ),
     element_colors = vesta_hex,
     color_mode = $bindable(DEFAULTS.convex_hull.quaternary.color_mode),
-    color_scale = $bindable(
-      DEFAULTS.convex_hull.quaternary.color_scale as D3InterpolateName,
-    ),
+    color_scale = $bindable(DEFAULTS.convex_hull.quaternary.color_scale as D3InterpolateName),
     info_pane_open = $bindable(DEFAULTS.convex_hull.quaternary.info_pane_open),
     controls_open = $bindable(DEFAULTS.convex_hull.quaternary.legend_pane_open),
     max_hull_dist_show_phases = $bindable(
@@ -72,12 +65,8 @@
     max_hull_dist_show_labels = $bindable(
       DEFAULTS.convex_hull.quaternary.max_hull_dist_show_labels,
     ),
-    show_stable_labels = $bindable(
-      DEFAULTS.convex_hull.quaternary.show_stable_labels,
-    ),
-    show_unstable_labels = $bindable(
-      DEFAULTS.convex_hull.quaternary.show_unstable_labels,
-    ),
+    show_stable_labels = $bindable(DEFAULTS.convex_hull.quaternary.show_stable_labels),
+    show_unstable_labels = $bindable(DEFAULTS.convex_hull.quaternary.show_unstable_labels),
     on_file_drop,
     enable_click_selection = true,
     enable_structure_preview = true,
@@ -96,9 +85,10 @@
     children,
     tooltip,
     ...rest
-  }: BaseConvexHullProps<ConvexHullEntry> & Hull3DProps & {
-    highlight_style?: HighlightStyle
-  } = $props()
+  }: BaseConvexHullProps<ConvexHullEntry> &
+    Hull3DProps & {
+      highlight_style?: HighlightStyle
+    } = $props()
 
   const merged_controls = $derived({ ...default_controls, ...controls })
   const controls_config = $derived(normalize_show_controls(show_controls))
@@ -106,13 +96,24 @@
     ...default_hull_config,
     ...config,
     colors: { ...default_hull_config.colors, ...config.colors },
-    margin: { t: 60, r: 60, b: 60, l: 60, ...config.margin },
   })
 
-  // 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))
+  // Cache resolved canvas colors and refresh them only when the theme changes.
+  const initial_text_color = helpers.get_canvas_text_color(is_dark_mode())
+  let text_color = $state(initial_text_color)
+  let hull_edge_color = $state(initial_text_color)
+  function refresh_canvas_colors(dark_mode: boolean): void {
+    const next_text_color = helpers.get_canvas_text_color(dark_mode)
+    text_color = next_text_color
+    const resolved_edge_color = canvas
+      ? getComputedStyle(canvas).getPropertyValue(`--hull-edge-color`).trim()
+      : ``
+    hull_edge_color = resolved_edge_color || next_text_color
+  }
+  $effect(() => {
+    refresh_canvas_colors(is_dark_mode())
+    return watch_dark_mode(refresh_canvas_colors)
+  })
 
   // Shared reactive data pipeline (temperature → gas → energy mode → hull data → threshold)
   // Explicit generic breaks the circular type inference through the all_enriched_entries thunk
@@ -131,44 +132,44 @@
     show_unstable: () => show_unstable,
     entry_category: () => entry_category,
     hidden_categories: () => hidden_categories,
-    // Always include stable entries and elemental reference points
-    keep_plot_entry: (entry, max_dist) =>
-      helpers.entry_is_stable(entry) ||
-      (typeof entry.e_above_hull === `number` && entry.e_above_hull <= 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,
+    keep_plot_entry: helpers.entry_within_hull_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 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)
 
+  // Entry → 4D hull point (3 barycentric composition fractions + e_form as w),
+  // or null when the entry lacks a finite formation energy or valid composition
+  function to_point_4d(entry: ConvexHullEntry): Point4D | null {
+    if (
+      !Number.isFinite(entry.e_form_per_atom) ||
+      ![entry.x, entry.y, entry.z].every(Number.isFinite)
+    )
+      return null
+    const amounts = elements.map((el) => entry.composition[el] || 0)
+    const total = amounts.reduce((sum, amt) => sum + amt, 0)
+    if (!(total > 0)) return null
+    const [x, y, z] = amounts.map((amt) => amt / total)
+    return [x, y, z].every(Number.isFinite)
+      ? { x, y, z, w: entry.e_form_per_atom ?? NaN }
+      : null
+  }
+
   // Compute 4D hull for visualization (always compute when we have formation energies)
   const hull_4d = $derived.by(() => {
     if (elements.length !== 4) return []
 
     try {
-      // Get coords with formation energies, excluding entries that don't participate in hull
-      const coords = compute_4d_coords(pd_data.entries, elements)
+      // Excluded entries don't participate in hull construction
+      const points_4d = compute_4d_coords(pd_data.entries, elements)
         .filter((ent) => !ent.exclude_from_hull)
-
-      // Convert to 4D points for hull computation using barycentric coordinates (composition fractions)
-      const points_4d: Point4D[] = coords
-        .filter(
-          (ent) =>
-            Number.isFinite(ent.e_form_per_atom) &&
-            [ent.x, ent.y, ent.z].every(Number.isFinite),
-        )
-        .map((ent) => {
-          const amounts = elements.map((el) => ent.composition[el] || 0)
-          const total = amounts.reduce((sum, amt) => sum + amt, 0)
-          if (!(total > 0)) return { x: NaN, y: NaN, z: NaN, w: NaN }
-          const [x, y, z] = amounts.map((amt) => amt / total)
-          return { x, y, z, w: ent.e_form_per_atom ?? NaN }
-        })
-        .filter((point) => [point.x, point.y, point.z, point.w].every(Number.isFinite))
+        .map(to_point_4d)
+        .filter((point): point is Point4D => point !== null)
 
       if (points_4d.length < 5) return [] // Need at least 5 points for 4D hull
 
@@ -189,32 +190,26 @@
 
       // Build 4D points, tracking original indices for mapping hull distances back
       const valid = coords.flatMap((entry, idx) => {
-        if (
-          !Number.isFinite(entry.e_form_per_atom) ||
-          ![entry.x, entry.y, entry.z].every(Number.isFinite)
-        ) return []
-        const amounts = elements.map((el) => entry.composition[el] || 0)
-          const total = amounts.reduce((sum, amt) => sum + amt, 0)
-        if (!(total > 0)) return []
-          const [x, y, z] = amounts.map((amt) => amt / total)
-        return [x, y, z].every(Number.isFinite)
-          ? [{ idx, pt: { x, y, z, w: entry.e_form_per_atom ?? NaN } }]
-          : []
+        const pt = to_point_4d(entry)
+        return pt ? [{ idx, pt }] : []
       })
-      const raw_dists = thermo.compute_e_above_hull_4d(valid.map((item) => item.pt), hull_4d)
+      const raw_dists = thermo.compute_e_above_hull_4d(
+        valid.map((item) => item.pt),
+        hull_4d,
+      )
       const hull_map = new Map(valid.map((item, hull_idx) => [item.idx, raw_dists[hull_idx]]))
-      return coords.map((entry, idx) => {
-        const raw = hull_map.get(idx)
-        if (raw === undefined) return { ...entry, e_above_hull: raw, is_stable: false }
-        return { ...entry, ...compute_hull_stability(raw, entry.exclude_from_hull) }
-      })
+      // missing/non-finite distance (no energy or point outside hull projection) -> unknown
+      return coords.map((entry, idx) => ({
+        ...entry,
+        ...compute_hull_stability(hull_map.get(idx), entry.exclude_from_hull),
+      }))
     } catch (err) {
       console.error(`Error computing quaternary coordinates:`, err)
       return []
     }
   })
 
-  let canvas: HTMLCanvasElement | undefined = undefined
+  let canvas = $state<HTMLCanvasElement>()
   let ctx: CanvasRenderingContext2D | null = null
 
   // Camera state - following Materials Project's 3D camera setup
@@ -234,12 +229,12 @@
     canvas: () => canvas,
     wrapper: () => wrapper,
     ctx: () => ctx,
-    set_ctx: (context) => ctx = context,
-    set_canvas_dims: (dims) => canvas_dims = dims,
+    set_ctx: (context) => (ctx = context),
+    set_canvas_dims: (dims) => (canvas_dims = dims),
     visible_entries: () => hull_data.visible_entries,
     plot_entries: () => plot_entries,
     selected_entry: () => selected_entry,
-    set_selected_entry: (entry) => selected_entry = entry,
+    set_selected_entry: (entry) => (selected_entry = entry),
     fullscreen: () => fullscreen,
     enable_click_selection: () => enable_click_selection,
     enable_structure_preview: () => enable_structure_preview,
@@ -248,7 +243,7 @@
     on_file_drop: () => on_file_drop,
     entry_category: () => entry_category,
     zoom: () => camera.zoom,
-    set_zoom: (zoom) => camera.zoom = zoom,
+    set_zoom: (zoom) => (camera.zoom = zoom),
     project_point: project_3d_point,
     extract_structure: extract_structure_from_entry,
     render_frame,
@@ -271,11 +266,11 @@
     },
     actions: () => ({
       r: reset_camera,
-      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,
+      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
@@ -292,9 +287,7 @@
   let pulse_opacity = $derived(0.3 + 0.4 * pulse.unit)
 
   // Merge highlight style with defaults
-  const merged_highlight_style = $derived(
-    helpers.merge_highlight_style(highlight_style),
-  )
+  const merged_highlight_style = $derived(helpers.merge_highlight_style(highlight_style))
 
   // Helper to check if entry is highlighted
   const is_highlighted = (entry: ConvexHullEntry): boolean =>
@@ -303,13 +296,11 @@
   // Re-render when important state changes
   $effect(() => {
     // oxfmt-ignore
-    void [show_hull_faces, color_mode, color_scale, camera.rotation_x, camera.rotation_y, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_data.visible_entries, hull_face_color, hull_face_opacity, hull_face_color_mode, element_colors, text_color, elements] // track reactively
+    void [show_hull_faces, color_mode, color_scale, camera.rotation_x, camera.rotation_y, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_data.visible_entries, hull_face_color, hull_face_opacity, hull_face_color_mode, element_colors, text_color, hull_edge_color, elements] // track reactively
 
     render_once()
   })
 
-  // Visibility toggles are now bindable props
-
   // Smart label defaults: hide labels for large datasets. Applied once per dataset
   // (keyed on the entries prop) so later entry-count changes from temperature/gas
   // filtering don't clobber the user's label toggles.
@@ -347,8 +338,7 @@
     show_unstable_labels = DEFAULTS.convex_hull.quaternary.show_unstable_labels
     // Use auto-computed threshold based on entry count instead of static default
     max_hull_dist_show_phases = hull_data.auto_default_threshold
-    max_hull_dist_show_labels =
-      DEFAULTS.convex_hull.quaternary.max_hull_dist_show_labels
+    max_hull_dist_show_labels = DEFAULTS.convex_hull.quaternary.max_hull_dist_show_labels
     show_hull_faces = DEFAULTS.convex_hull.quaternary.show_hull_faces
     hull_face_color = DEFAULTS.convex_hull.quaternary.hull_face_color
     hull_face_opacity = DEFAULTS.convex_hull.quaternary.hull_face_opacity
@@ -365,8 +355,8 @@
     )
 
   // Cache energy color scale per frame/setting
-  const energy_color_scale = $derived.by(() =>
-    helpers.get_energy_color_scale(color_mode, color_scale, plot_entries)
+  const energy_color_scale = $derived(
+    helpers.get_energy_color_scale(color_mode, color_scale, plot_entries),
   )
 
   // Convex hull statistics - compute internally and expose via bindable prop
@@ -382,16 +372,11 @@
   ): { x: number; y: number; depth: number } {
     if (!canvas) return { x: 0, y: 0, depth: 0 }
 
-    // Center coordinates around tetrahedron/triangle centroid
-    let [centered_x, centered_y, centered_z] = [x, y, z]
-
-    // Tetrahedron centroid: average of vertices (1,0,0), (0.5,√3/2,0), (0.5,√3/6,√6/3), (0,0,0)
-    const centroid_x = (1 + 0.5 + 0.5 + 0) / 4 // = 0.5
-    const centroid_y = (0 + Math.sqrt(3) / 2 + Math.sqrt(3) / 6 + 0) / 4 // = √3/6
-    const centroid_z = (0 + 0 + Math.sqrt(6) / 3 + 0) / 4 // = √6/12
-    centered_x = x - centroid_x
-    centered_y = y - centroid_y
-    centered_z = z - centroid_z
+    // Center coordinates around the tetrahedron centroid: average of vertices
+    // (1,0,0), (0.5,√3/2,0), (0.5,√3/6,√6/3), (0,0,0)
+    const centered_x = x - (1 + 0.5 + 0.5 + 0) / 4 // centroid_x = 0.5
+    const centered_y = y - (0 + Math.sqrt(3) / 2 + Math.sqrt(3) / 6 + 0) / 4 // = √3/6
+    const centered_z = z - (0 + 0 + Math.sqrt(6) / 3 + 0) / 4 // = √6/12
 
     // Apply 3D transformations around the centered coordinates
     const cos_x = Math.cos(camera.rotation_x)
@@ -419,56 +404,33 @@
     }
   }
 
+  // Dashed tetrahedron outline (matching the gray structure lines used in 3D)
+  // plus corner element labels
   function draw_structure_outline(): void {
     if (!ctx || !canvas) return
 
-    const styles = getComputedStyle(canvas)
-    // Match gray dashed structure lines used in 3D
     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)
 
-    // Draw tetrahedron edges
-    draw_tetrahedron()
-
-    // Reset dash and stroke for subsequent drawings
-    ctx.setLineDash([])
-    ctx.strokeStyle = styles.getPropertyValue(`--hull-edge-color`) || `#212121`
-  }
-
-  function draw_tetrahedron(): void {
-    if (!ctx) return
-
-    // Convert vertices to Point3D objects
     const vertices = TETRAHEDRON_VERTICES.map(([x, y, z]) => ({ x, y, z }))
-
-    // Tetrahedron edges (connecting vertices)
-    const edges = [
-      [0, 1],
-      [0, 2],
-      [0, 3], // From vertex 0
-      [1, 2],
-      [1, 3], // From vertex 1
-      [2, 3], // From vertex 2
-    ]
-
-    // Draw edges
+    // oxfmt-ignore
+    const edges = [[0, 1], [0, 2], [0, 3], [1, 2], [1, 3], [2, 3]]
     ctx.beginPath()
     for (const [start, end] of edges) {
-      const v1 = vertices[start]
-      const v2 = vertices[end]
-
-      const proj1 = project_3d_point(v1.x, v1.y, v1.z)
-      const proj2 = project_3d_point(v2.x, v2.y, v2.z)
-
+      const proj1 = project_3d_point(vertices[start].x, vertices[start].y, vertices[start].z)
+      const proj2 = project_3d_point(vertices[end].x, vertices[end].y, vertices[end].z)
       ctx.moveTo(proj1.x, proj1.y)
       ctx.lineTo(proj2.x, proj2.y)
     }
     ctx.stroke()
 
-    // Corner element labels: place just outside along line towards tetrahedron centroid
+    // Reset dash and stroke for subsequent drawings
+    ctx.setLineDash([])
+    ctx.strokeStyle = hull_edge_color
+
+    // Corner element labels: place just outside each vertex, along the centroid→vertex line
     if (elements.length === 4) {
-      // Tetrahedron centroid in barycentric space maps to average of vertices
       const centroid = {
         x: (vertices[0].x + vertices[1].x + vertices[2].x + vertices[3].x) / 4,
         y: (vertices[0].y + vertices[1].y + vertices[2].y + vertices[3].y) / 4,
@@ -483,16 +445,13 @@
       const distance = 0.06
       for (let idx = 0; idx < 4; idx++) {
         const vx = vertices[idx]
-        // Direction from centroid to vertex
-        const { x: cx, y: cy, z: cz } = centroid
-        const dir = { x: vx.x - cx, y: vx.y - cy, z: vx.z - cz }
+        const dir = { x: vx.x - centroid.x, y: vx.y - centroid.y, z: vx.z - centroid.z }
         const len = Math.hypot(dir.x, dir.y, dir.z) || 1
-        const label_pos = {
-          x: vx.x + (dir.x / len) * distance,
-          y: vx.y + (dir.y / len) * distance,
-          z: vx.z + (dir.z / len) * distance,
-        }
-        const proj = project_3d_point(label_pos.x, label_pos.y, label_pos.z)
+        const proj = project_3d_point(
+          vx.x + (dir.x / len) * distance,
+          vx.y + (dir.y / len) * distance,
+          vx.z + (dir.z / len) * distance,
+        )
         ctx.fillText(elements[idx], proj.x, proj.y)
       }
     }
@@ -527,30 +486,10 @@
       const [p0, p1, p2, p3] = tet.vertices
 
       // Convert barycentric coordinates to tetrahedral 3D coordinates
-      const tet0 = barycentric_to_tetrahedral([
-        p0.x,
-        p0.y,
-        p0.z,
-        1 - p0.x - p0.y - p0.z,
-      ])
-      const tet1 = barycentric_to_tetrahedral([
-        p1.x,
-        p1.y,
-        p1.z,
-        1 - p1.x - p1.y - p1.z,
-      ])
-      const tet2 = barycentric_to_tetrahedral([
-        p2.x,
-        p2.y,
-        p2.z,
-        1 - p2.x - p2.y - p2.z,
-      ])
-      const tet3 = barycentric_to_tetrahedral([
-        p3.x,
-        p3.y,
-        p3.z,
-        1 - p3.x - p3.y - p3.z,
-      ])
+      const tet0 = barycentric_to_tetrahedral([p0.x, p0.y, p0.z, 1 - p0.x - p0.y - p0.z])
+      const tet1 = barycentric_to_tetrahedral([p1.x, p1.y, p1.z, 1 - p1.x - p1.y - p1.z])
+      const tet2 = barycentric_to_tetrahedral([p2.x, p2.y, p2.z, 1 - p2.x - p2.y - p2.z])
+      const tet3 = barycentric_to_tetrahedral([p3.x, p3.y, p3.z, 1 - p3.x - p3.y - p3.z])
 
       // Project to 2D screen space
       const proj0 = project_3d_point(tet0.x, tet0.y, tet0.z)
@@ -564,8 +503,14 @@
         (p0.x + p1.x + p2.x + p3.x) / 4,
         (p0.y + p1.y + p2.y + p3.y) / 4,
         (p0.z + p1.z + p2.z + p3.z) / 4,
-        ((1 - p0.x - p0.y - p0.z) + (1 - p1.x - p1.y - p1.z) +
-          (1 - p2.x - p2.y - p2.z) + (1 - p3.x - p3.y - p3.z)) / 4,
+        (1 -
+          p0.x -
+          p0.y -
+          p0.z +
+          (1 - p1.x - p1.y - p1.z) +
+          (1 - p2.x - p2.y - p2.z) +
+          (1 - p3.x - p3.y - p3.z)) /
+          4,
       ]
 
       // Each tetrahedron has 4 triangular faces
@@ -607,7 +552,7 @@
     let min_w = 0
     if (hull_face_color_mode === `formation_energy`) {
       const all_avg_w = triangles.map((tri) => tri.avg_w)
-      min_w = Math.min(...all_avg_w)
+      min_w = helpers.array_min(all_avg_w)
       energy_face_scale = helpers.get_energy_color_scale(
         `energy`,
         color_scale,
@@ -625,7 +570,7 @@
       }
       if (hull_face_color_mode === `dominant_element`) {
         // Find element with highest fraction
-        const max_idx = tri.centroid_bary.indexOf(Math.max(...tri.centroid_bary))
+        const max_idx = tri.centroid_bary.indexOf(helpers.array_max(tri.centroid_bary))
         const el = elements[max_idx]
         return element_colors[el] ?? `#888888`
       }
@@ -639,9 +584,10 @@
     for (const tri of triangles) {
       const [v0, v1, v2] = tri.vertices
       // Uniform mode uses variable opacity; other modes use fixed opacity
-      const alpha = hull_face_color_mode === `uniform`
-        ? (norm_alpha?.(tri.avg_w) ?? hull_face_opacity)
-        : hull_face_opacity
+      const alpha =
+        hull_face_color_mode === `uniform`
+          ? (norm_alpha?.(tri.avg_w) ?? hull_face_opacity)
+          : hull_face_opacity
       const face_color = get_face_color(tri)
 
       ctx.save()
@@ -683,9 +629,12 @@
         .filter((entry) => {
           if (entry.is_element) return false
           const is_stable = helpers.entry_is_stable(entry)
-          return (is_stable && show_stable_labels) ||
-            (!is_stable && show_unstable_labels &&
+          return (
+            (is_stable && show_stable_labels) ||
+            (!is_stable &&
+              show_unstable_labels &&
               (entry.e_above_hull ?? 0) <= max_hull_dist_show_labels)
+          )
         }),
     )
 
@@ -761,7 +710,7 @@
 
 <div
   {...rest}
-  class="convex-hull-4d {rest.class ?? ``}"
+  class={[`convex-hull-4d`, rest.class]}
   class:dragover={interactions.drag_over}
   style={`${style}; ${rest.style ?? ``}`}
   data-has-selection={selected_entry !== null}
@@ -776,11 +725,11 @@
   aria-label="Convex hull visualization"
 >
   {@render children?.({
-      stable_entries,
-      unstable_entries,
-      highlighted_entries,
-      selected_entry,
-    })}
+    stable_entries,
+    unstable_entries,
+    highlighted_entries,
+    selected_entry,
+  })}
   <h3 style="position: absolute; left: 1em; top: 1ex; margin: 0">
     {@html sanitize_html(merged_controls.title || phase_stats?.chemical_system || ``)}
   </h3>
@@ -853,7 +802,10 @@
   />
 
   {#if hull_data.has_temp_data && temperature !== undefined}
-    <TemperatureSlider available_temperatures={hull_data.available_temperatures} bind:temperature />
+    <TemperatureSlider
+      available_temperatures={hull_data.available_temperatures}
+      bind:temperature
+    />
   {/if}
 
   {#if hull_data.gas_analysis.has_gas_dependent_elements && merged_gas_config}
@@ -863,7 +815,6 @@
       temperature={temperature ?? 300}
     />
   {/if}
-
 </div>
 
 <style>

package/dist/convex-hull/ConvexHull4D.svelte.d.ts

@@ -3,6 +3,6 @@ import type { ConvexHullEntry, HighlightStyle } from './types';
 type $$ComponentProps = BaseConvexHullProps<ConvexHullEntry> & Hull3DProps & {
     highlight_style?: HighlightStyle;
 };
-declare const ConvexHull4D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "show_hull_faces" | "hull_face_opacity" | "hull_face_color_mode" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "hidden_categories" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
+declare const ConvexHull4D: import("svelte").Component<$$ComponentProps, {}, "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "temperature" | "show_hull_faces" | "hull_face_opacity" | "hull_face_color_mode" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "hidden_categories" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
 type ConvexHull4D = ReturnType<typeof ConvexHull4D>;
 export default ConvexHull4D;

package/dist/convex-hull/ConvexHullChrome.svelte

@@ -59,32 +59,30 @@
     max_hull_dist_show_phases = $bindable(0),
     max_hull_dist_show_labels = $bindable(0.1),
     energy_source_mode = $bindable(`precomputed`),
-  }:
-    & Pick<
-      ControlsProps,
-      | `camera`
-      | `merged_controls`
-      | `stable_entries`
-      | `unstable_entries`
-      | `color_mode`
-      | `color_scale`
-      | `show_stable`
-      | `show_unstable`
-      | `entry_category`
-      | `hidden_categories`
-      | `show_stable_labels`
-      | `show_unstable_labels`
-      | `max_hull_dist_show_phases`
-      | `max_hull_dist_show_labels`
-      | `energy_source_mode`
-      | `controls_open`
-      | `show_hull_faces`
-      | `hull_face_color`
-      | `hull_face_opacity`
-      | `hull_face_color_mode`
-    >
-    & Pick<ComponentProps<typeof ConvexHullInfoPane>, `phase_stats` | `label_threshold`>
-    & {
+  }: Pick<
+    ControlsProps,
+    | `camera`
+    | `merged_controls`
+    | `stable_entries`
+    | `unstable_entries`
+    | `color_mode`
+    | `color_scale`
+    | `show_stable`
+    | `show_unstable`
+    | `entry_category`
+    | `hidden_categories`
+    | `show_stable_labels`
+    | `show_unstable_labels`
+    | `max_hull_dist_show_phases`
+    | `max_hull_dist_show_labels`
+    | `energy_source_mode`
+    | `controls_open`
+    | `show_hull_faces`
+    | `hull_face_color`
+    | `hull_face_opacity`
+    | `hull_face_color_mode`
+  > &
+    Pick<ComponentProps<typeof ConvexHullInfoPane>, `phase_stats` | `label_threshold`> & {
       interactions: ReturnType<typeof create_canvas_interactions>
       hull_data: ReturnType<typeof create_hull_data_pipeline<ConvexHullEntry>>
       controls_config: ShowControlsState
@@ -107,12 +105,7 @@
 {#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_title}
-        class="reset-camera-btn"
-      >
+      <button type="button" onclick={reset_all} title={reset_title} class="reset-camera-btn">
         <Icon icon="Reset" />
       </button>
     {/if}
@@ -159,14 +152,14 @@
         {merged_controls}
         toggle_props={{ class: `legend-controls-btn` }}
         {show_hull_faces}
-        on_hull_faces_change={(value: boolean) => show_hull_faces = value}
+        on_hull_faces_change={(value: boolean) => (show_hull_faces = value)}
         {hull_face_color}
-        on_hull_face_color_change={(value: string) => hull_face_color = value}
+        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}
+        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}
+          (hull_face_color_mode = value)}
         bind:energy_source_mode
         has_precomputed_e_form={hull_data.has_precomputed_e_form}
         can_compute_e_form={hull_data.can_compute_e_form}
@@ -181,8 +174,7 @@
 {#if interactions.hover_data}
   {@const { entry, position } = interactions.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);
+  {@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}
@@ -209,7 +201,11 @@
 />
 
 <!-- z-index 1: above auto-stacked siblings after the chrome (3D gizmo, gas controls), below z-2 sliders -->
-<DragOverlay visible={interactions.drag_over} style="z-index: 1" />
+<DragOverlay
+  visible={interactions.drag_over}
+  message="Drop JSON file to load phase diagram data"
+  style="z-index: 1"
+/>
 
 {#if interactions.modal_open && interactions.selected_structure}
   <StructurePopup
@@ -260,7 +256,7 @@
     color: var(--text-color, currentColor);
     transition: background-color 0.2s;
     display: flex;
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
+    font-size: var(--ctrl-btn-icon-size, clamp(0.7rem, 2cqmin, 0.85rem));
   }
   .control-buttons :global(button):hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);